@jaimevalasek/aioson 1.5.1 → 1.6.0
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/README.md +6 -0
- package/docs/design-previews/aurora-command-ui-website.html +884 -0
- package/docs/design-previews/aurora-command-ui.html +682 -0
- package/docs/design-previews/bold-editorial-ui-website.html +658 -0
- package/docs/design-previews/bold-editorial-ui.html +717 -0
- package/docs/design-previews/clean-saas-ui-website.html +1202 -0
- package/docs/design-previews/clean-saas-ui.html +549 -0
- package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
- package/docs/design-previews/cognitive-core-ui.html +463 -0
- package/docs/design-previews/glassmorphism-ui-website.html +572 -0
- package/docs/design-previews/glassmorphism-ui.html +886 -0
- package/docs/design-previews/index.html +699 -0
- package/docs/design-previews/interface-design-website.html +1187 -0
- package/docs/design-previews/interface-design.html +513 -0
- package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
- package/docs/design-previews/neo-brutalist-ui.html +797 -0
- package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
- package/docs/design-previews/premium-command-center-ui.html +552 -0
- package/docs/design-previews/warm-craft-ui-website.html +684 -0
- package/docs/design-previews/warm-craft-ui.html +739 -0
- package/docs/en/cli-reference.md +20 -9
- package/docs/pt/README.md +7 -0
- package/docs/pt/agent-sharding.md +132 -0
- package/docs/pt/agentes.md +8 -2
- package/docs/pt/busca-de-contexto.md +129 -0
- package/docs/pt/cache-de-contexto.md +156 -0
- package/docs/pt/comandos-cli.md +28 -0
- package/docs/pt/design-hybrid-forge.md +107 -0
- package/docs/pt/inicio-rapido.md +54 -3
- package/docs/pt/inteligencia-adaptativa.md +324 -0
- package/docs/pt/monitor-de-contexto.md +104 -0
- package/docs/pt/recuperacao-de-sessao.md +125 -0
- package/docs/pt/sandbox.md +125 -0
- package/docs/pt/skills.md +98 -6
- package/package.json +1 -1
- package/src/agent-loader.js +280 -0
- package/src/cli.js +94 -0
- package/src/commands/agent-loader.js +85 -0
- package/src/commands/context-cache.js +90 -0
- package/src/commands/context-monitor.js +92 -0
- package/src/commands/context-search.js +66 -0
- package/src/commands/design-hybrid-options.js +385 -0
- package/src/commands/health.js +214 -0
- package/src/commands/init.js +54 -13
- package/src/commands/install.js +52 -13
- package/src/commands/learning-evolve.js +355 -0
- package/src/commands/live.js +34 -0
- package/src/commands/recovery.js +43 -0
- package/src/commands/sandbox.js +37 -0
- package/src/commands/setup-context.js +22 -2
- package/src/commands/setup.js +178 -0
- package/src/commands/skill.js +79 -32
- package/src/commands/tool-registry-cmd.js +232 -0
- package/src/commands/update.js +7 -0
- package/src/constants.js +9 -0
- package/src/context-cache.js +159 -0
- package/src/context-search.js +326 -0
- package/src/design-variation-catalog.js +503 -0
- package/src/i18n/messages/en.js +32 -2
- package/src/i18n/messages/es.js +30 -2
- package/src/i18n/messages/fr.js +30 -2
- package/src/i18n/messages/pt-BR.js +32 -2
- package/src/install-animation.js +260 -0
- package/src/install-profile.js +143 -0
- package/src/install-wizard.js +474 -0
- package/src/installer.js +38 -10
- package/src/parser.js +7 -1
- package/src/recovery-context-session.js +154 -0
- package/src/runtime-store.js +97 -1
- package/src/sandbox.js +177 -0
- package/src/tool-executor.js +94 -0
- package/src/updater.js +11 -3
- package/template/.aioson/agents/analyst.md +58 -3
- package/template/.aioson/agents/architect.md +38 -0
- package/template/.aioson/agents/design-hybrid-forge.md +127 -0
- package/template/.aioson/agents/dev.md +103 -0
- package/template/.aioson/agents/deyvin.md +57 -0
- package/template/.aioson/agents/pm.md +58 -0
- package/template/.aioson/agents/product.md +28 -0
- package/template/.aioson/agents/qa.md +79 -0
- package/template/.aioson/agents/setup.md +65 -3
- package/template/.aioson/agents/sheldon.md +107 -6
- package/template/.aioson/agents/tester.md +156 -0
- package/template/.aioson/config.md +15 -0
- package/template/.aioson/context/forensics/.gitkeep +0 -0
- package/template/.aioson/context/seeds/seed-example.md +27 -0
- package/template/.aioson/context/user-profile.md +42 -0
- package/template/.aioson/locales/en/agents/setup.md +33 -1
- package/template/.aioson/locales/es/agents/setup.md +33 -1
- package/template/.aioson/locales/fr/agents/setup.md +33 -1
- package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
- package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
- package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
- package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
- package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
- package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
- package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
- package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
- package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
- package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
- package/template/AGENTS.md +23 -1
- package/template/CLAUDE.md +1 -0
|
@@ -0,0 +1,797 @@
|
|
|
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>Neo-Brutalist UI — AIOSON Design Skill Preview</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
10
|
+
<style>
|
|
11
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
12
|
+
|
|
13
|
+
:root {
|
|
14
|
+
--yellow: #FACC15;
|
|
15
|
+
--black: #1A1A1A;
|
|
16
|
+
--body: #2A2A2A;
|
|
17
|
+
--secondary: #666666;
|
|
18
|
+
--bg: #FFFDF5;
|
|
19
|
+
--white: #FFFFFF;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
html, body {
|
|
23
|
+
height: 100%;
|
|
24
|
+
background: var(--bg);
|
|
25
|
+
font-family: 'Space Grotesk', system-ui, sans-serif;
|
|
26
|
+
font-size: 14px;
|
|
27
|
+
color: var(--body);
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* ── Layout ── */
|
|
32
|
+
.shell {
|
|
33
|
+
display: flex;
|
|
34
|
+
height: 100vh;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* ── Sidebar ── */
|
|
38
|
+
.sidebar {
|
|
39
|
+
width: 240px;
|
|
40
|
+
flex-shrink: 0;
|
|
41
|
+
background: var(--bg);
|
|
42
|
+
border-right: 3px solid var(--black);
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.sidebar-logo {
|
|
48
|
+
padding: 22px 20px;
|
|
49
|
+
border-bottom: 3px solid var(--black);
|
|
50
|
+
}
|
|
51
|
+
.logo-row {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
gap: 10px;
|
|
55
|
+
}
|
|
56
|
+
.logo-box {
|
|
57
|
+
width: 36px;
|
|
58
|
+
height: 36px;
|
|
59
|
+
background: var(--yellow);
|
|
60
|
+
border: 2px solid var(--black);
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
font-family: 'JetBrains Mono', monospace;
|
|
65
|
+
font-weight: 700;
|
|
66
|
+
font-size: 13px;
|
|
67
|
+
color: var(--black);
|
|
68
|
+
letter-spacing: -1px;
|
|
69
|
+
}
|
|
70
|
+
.logo-name {
|
|
71
|
+
font-weight: 800;
|
|
72
|
+
font-size: 16px;
|
|
73
|
+
color: var(--black);
|
|
74
|
+
letter-spacing: -0.5px;
|
|
75
|
+
}
|
|
76
|
+
.logo-version {
|
|
77
|
+
font-family: 'JetBrains Mono', monospace;
|
|
78
|
+
font-size: 10px;
|
|
79
|
+
color: var(--secondary);
|
|
80
|
+
margin-top: 2px;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.nav-section {
|
|
84
|
+
padding: 16px 12px;
|
|
85
|
+
flex: 1;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.nav-item {
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
gap: 10px;
|
|
92
|
+
padding: 11px 12px;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
font-family: 'JetBrains Mono', monospace;
|
|
95
|
+
font-weight: 600;
|
|
96
|
+
font-size: 11px;
|
|
97
|
+
text-transform: uppercase;
|
|
98
|
+
letter-spacing: 0.08em;
|
|
99
|
+
color: var(--secondary);
|
|
100
|
+
border: 2px solid transparent;
|
|
101
|
+
margin-bottom: 4px;
|
|
102
|
+
}
|
|
103
|
+
.nav-item:hover {
|
|
104
|
+
background: rgba(250,204,21,0.20);
|
|
105
|
+
color: var(--black);
|
|
106
|
+
}
|
|
107
|
+
.nav-item.active {
|
|
108
|
+
background: var(--yellow);
|
|
109
|
+
color: var(--black);
|
|
110
|
+
border: 2px solid var(--black);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.nav-icon {
|
|
114
|
+
width: 14px;
|
|
115
|
+
height: 14px;
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.nav-count {
|
|
120
|
+
margin-left: auto;
|
|
121
|
+
font-family: 'JetBrains Mono', monospace;
|
|
122
|
+
font-size: 10px;
|
|
123
|
+
font-weight: 700;
|
|
124
|
+
border: 2px solid var(--black);
|
|
125
|
+
padding: 1px 6px;
|
|
126
|
+
}
|
|
127
|
+
.nav-item.active .nav-count {
|
|
128
|
+
background: var(--black);
|
|
129
|
+
color: var(--yellow);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.sidebar-footer {
|
|
133
|
+
padding: 16px 16px 20px;
|
|
134
|
+
border-top: 3px solid var(--black);
|
|
135
|
+
}
|
|
136
|
+
.user-row {
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: center;
|
|
139
|
+
gap: 10px;
|
|
140
|
+
padding: 10px;
|
|
141
|
+
border: 2px solid var(--black);
|
|
142
|
+
box-shadow: 3px 3px 0 var(--black);
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
background: var(--white);
|
|
145
|
+
}
|
|
146
|
+
.avatar-box {
|
|
147
|
+
width: 30px;
|
|
148
|
+
height: 30px;
|
|
149
|
+
background: var(--yellow);
|
|
150
|
+
border: 2px solid var(--black);
|
|
151
|
+
display: flex;
|
|
152
|
+
align-items: center;
|
|
153
|
+
justify-content: center;
|
|
154
|
+
font-family: 'JetBrains Mono', monospace;
|
|
155
|
+
font-weight: 700;
|
|
156
|
+
font-size: 11px;
|
|
157
|
+
color: var(--black);
|
|
158
|
+
flex-shrink: 0;
|
|
159
|
+
}
|
|
160
|
+
.user-name {
|
|
161
|
+
font-weight: 700;
|
|
162
|
+
font-size: 12px;
|
|
163
|
+
color: var(--black);
|
|
164
|
+
}
|
|
165
|
+
.user-role {
|
|
166
|
+
font-family: 'JetBrains Mono', monospace;
|
|
167
|
+
font-size: 10px;
|
|
168
|
+
color: var(--secondary);
|
|
169
|
+
text-transform: uppercase;
|
|
170
|
+
letter-spacing: 0.06em;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* ── Main ── */
|
|
174
|
+
.main {
|
|
175
|
+
flex: 1;
|
|
176
|
+
display: flex;
|
|
177
|
+
flex-direction: column;
|
|
178
|
+
overflow: hidden;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* ── Top bar ── */
|
|
182
|
+
.topbar {
|
|
183
|
+
height: 56px;
|
|
184
|
+
background: var(--bg);
|
|
185
|
+
border-bottom: 3px solid var(--black);
|
|
186
|
+
display: flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
padding: 0 28px;
|
|
189
|
+
gap: 12px;
|
|
190
|
+
flex-shrink: 0;
|
|
191
|
+
}
|
|
192
|
+
.topbar-title {
|
|
193
|
+
font-weight: 800;
|
|
194
|
+
font-size: 13.5px;
|
|
195
|
+
color: var(--black);
|
|
196
|
+
flex: 1;
|
|
197
|
+
letter-spacing: -0.2px;
|
|
198
|
+
}
|
|
199
|
+
.topbar-badge {
|
|
200
|
+
font-family: 'JetBrains Mono', monospace;
|
|
201
|
+
font-size: 10px;
|
|
202
|
+
font-weight: 700;
|
|
203
|
+
text-transform: uppercase;
|
|
204
|
+
letter-spacing: 0.1em;
|
|
205
|
+
background: var(--black);
|
|
206
|
+
color: var(--yellow);
|
|
207
|
+
padding: 4px 10px;
|
|
208
|
+
border: 2px solid var(--black);
|
|
209
|
+
}
|
|
210
|
+
.topbar-actions {
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: center;
|
|
213
|
+
gap: 8px;
|
|
214
|
+
}
|
|
215
|
+
.topbar-btn {
|
|
216
|
+
height: 34px;
|
|
217
|
+
padding: 0 14px;
|
|
218
|
+
border: 2px solid var(--black);
|
|
219
|
+
background: var(--white);
|
|
220
|
+
font-family: 'JetBrains Mono', monospace;
|
|
221
|
+
font-size: 10px;
|
|
222
|
+
font-weight: 600;
|
|
223
|
+
text-transform: uppercase;
|
|
224
|
+
letter-spacing: 0.07em;
|
|
225
|
+
color: var(--black);
|
|
226
|
+
cursor: pointer;
|
|
227
|
+
box-shadow: 2px 2px 0 var(--black);
|
|
228
|
+
display: flex;
|
|
229
|
+
align-items: center;
|
|
230
|
+
gap: 6px;
|
|
231
|
+
}
|
|
232
|
+
.topbar-btn svg { width: 13px; height: 13px; }
|
|
233
|
+
|
|
234
|
+
/* ── Content ── */
|
|
235
|
+
.content {
|
|
236
|
+
flex: 1;
|
|
237
|
+
overflow-y: auto;
|
|
238
|
+
padding: 28px 32px 40px;
|
|
239
|
+
}
|
|
240
|
+
.content::-webkit-scrollbar { width: 8px; }
|
|
241
|
+
.content::-webkit-scrollbar-track { background: var(--bg); border-left: 2px solid var(--black); }
|
|
242
|
+
.content::-webkit-scrollbar-thumb { background: var(--black); }
|
|
243
|
+
|
|
244
|
+
/* ── Page header ── */
|
|
245
|
+
.page-header {
|
|
246
|
+
display: flex;
|
|
247
|
+
align-items: flex-end;
|
|
248
|
+
justify-content: space-between;
|
|
249
|
+
margin-bottom: 24px;
|
|
250
|
+
padding-bottom: 20px;
|
|
251
|
+
border-bottom: 3px solid var(--black);
|
|
252
|
+
}
|
|
253
|
+
.page-eyebrow {
|
|
254
|
+
font-family: 'JetBrains Mono', monospace;
|
|
255
|
+
font-size: 10px;
|
|
256
|
+
font-weight: 600;
|
|
257
|
+
text-transform: uppercase;
|
|
258
|
+
letter-spacing: 0.12em;
|
|
259
|
+
color: var(--secondary);
|
|
260
|
+
margin-bottom: 6px;
|
|
261
|
+
}
|
|
262
|
+
.page-title {
|
|
263
|
+
font-size: 28px;
|
|
264
|
+
font-weight: 800;
|
|
265
|
+
color: var(--black);
|
|
266
|
+
letter-spacing: -0.8px;
|
|
267
|
+
line-height: 1.1;
|
|
268
|
+
}
|
|
269
|
+
.page-title span {
|
|
270
|
+
background: var(--yellow);
|
|
271
|
+
padding: 0 4px;
|
|
272
|
+
}
|
|
273
|
+
.page-date {
|
|
274
|
+
font-family: 'JetBrains Mono', monospace;
|
|
275
|
+
font-size: 11px;
|
|
276
|
+
color: var(--secondary);
|
|
277
|
+
text-align: right;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* ── Stat cards ── */
|
|
281
|
+
.stats-grid {
|
|
282
|
+
display: grid;
|
|
283
|
+
grid-template-columns: repeat(3, 1fr);
|
|
284
|
+
gap: 16px;
|
|
285
|
+
margin-bottom: 24px;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.stat-card {
|
|
289
|
+
background: var(--white);
|
|
290
|
+
border: 2px solid var(--black);
|
|
291
|
+
box-shadow: 4px 4px 0 var(--black);
|
|
292
|
+
padding: 20px 20px 18px;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.stat-tag {
|
|
296
|
+
font-family: 'JetBrains Mono', monospace;
|
|
297
|
+
font-size: 10px;
|
|
298
|
+
font-weight: 700;
|
|
299
|
+
text-transform: uppercase;
|
|
300
|
+
letter-spacing: 0.1em;
|
|
301
|
+
color: var(--secondary);
|
|
302
|
+
margin-bottom: 12px;
|
|
303
|
+
display: flex;
|
|
304
|
+
align-items: center;
|
|
305
|
+
gap: 8px;
|
|
306
|
+
}
|
|
307
|
+
.stat-tag::after {
|
|
308
|
+
content: '';
|
|
309
|
+
flex: 1;
|
|
310
|
+
height: 1px;
|
|
311
|
+
background: var(--black);
|
|
312
|
+
opacity: 0.2;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.stat-number {
|
|
316
|
+
font-family: 'JetBrains Mono', monospace;
|
|
317
|
+
font-size: 44px;
|
|
318
|
+
font-weight: 700;
|
|
319
|
+
color: var(--black);
|
|
320
|
+
letter-spacing: -2px;
|
|
321
|
+
line-height: 1;
|
|
322
|
+
margin-bottom: 4px;
|
|
323
|
+
}
|
|
324
|
+
.stat-number.yellow { color: var(--yellow); -webkit-text-stroke: 1.5px var(--black); }
|
|
325
|
+
|
|
326
|
+
.stat-delta {
|
|
327
|
+
font-family: 'JetBrains Mono', monospace;
|
|
328
|
+
font-size: 11px;
|
|
329
|
+
font-weight: 600;
|
|
330
|
+
margin-top: 10px;
|
|
331
|
+
display: inline-block;
|
|
332
|
+
padding: 2px 8px;
|
|
333
|
+
border: 2px solid var(--black);
|
|
334
|
+
}
|
|
335
|
+
.delta-up { background: #D1FAE5; }
|
|
336
|
+
.delta-down { background: #FEE2E2; }
|
|
337
|
+
.delta-neutral { background: #FEF9C3; }
|
|
338
|
+
|
|
339
|
+
/* ── Table ── */
|
|
340
|
+
.table-card {
|
|
341
|
+
background: var(--white);
|
|
342
|
+
border: 2px solid var(--black);
|
|
343
|
+
box-shadow: 4px 4px 0 var(--black);
|
|
344
|
+
margin-bottom: 24px;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.card-header {
|
|
348
|
+
display: flex;
|
|
349
|
+
align-items: center;
|
|
350
|
+
justify-content: space-between;
|
|
351
|
+
padding: 16px 20px;
|
|
352
|
+
border-bottom: 2px solid var(--black);
|
|
353
|
+
background: var(--black);
|
|
354
|
+
}
|
|
355
|
+
.card-title {
|
|
356
|
+
font-weight: 800;
|
|
357
|
+
font-size: 14px;
|
|
358
|
+
color: var(--yellow);
|
|
359
|
+
letter-spacing: -0.2px;
|
|
360
|
+
}
|
|
361
|
+
.card-title-sub {
|
|
362
|
+
font-family: 'JetBrains Mono', monospace;
|
|
363
|
+
font-size: 10px;
|
|
364
|
+
color: rgba(255,255,255,0.5);
|
|
365
|
+
text-transform: uppercase;
|
|
366
|
+
letter-spacing: 0.08em;
|
|
367
|
+
margin-top: 2px;
|
|
368
|
+
}
|
|
369
|
+
.card-action-btn {
|
|
370
|
+
font-family: 'JetBrains Mono', monospace;
|
|
371
|
+
font-size: 10px;
|
|
372
|
+
font-weight: 700;
|
|
373
|
+
text-transform: uppercase;
|
|
374
|
+
letter-spacing: 0.08em;
|
|
375
|
+
background: var(--yellow);
|
|
376
|
+
border: 2px solid var(--yellow);
|
|
377
|
+
color: var(--black);
|
|
378
|
+
padding: 6px 14px;
|
|
379
|
+
cursor: pointer;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
table {
|
|
383
|
+
width: 100%;
|
|
384
|
+
border-collapse: collapse;
|
|
385
|
+
}
|
|
386
|
+
thead th {
|
|
387
|
+
background: #F5F5F0;
|
|
388
|
+
padding: 10px 20px;
|
|
389
|
+
text-align: left;
|
|
390
|
+
font-family: 'JetBrains Mono', monospace;
|
|
391
|
+
font-size: 10px;
|
|
392
|
+
font-weight: 700;
|
|
393
|
+
text-transform: uppercase;
|
|
394
|
+
letter-spacing: 0.1em;
|
|
395
|
+
color: var(--secondary);
|
|
396
|
+
border: 1px solid var(--black);
|
|
397
|
+
border-top: none;
|
|
398
|
+
}
|
|
399
|
+
tbody tr { }
|
|
400
|
+
tbody td {
|
|
401
|
+
padding: 12px 20px;
|
|
402
|
+
font-size: 13px;
|
|
403
|
+
color: var(--body);
|
|
404
|
+
border: 1px solid var(--black);
|
|
405
|
+
vertical-align: middle;
|
|
406
|
+
}
|
|
407
|
+
tbody tr:nth-child(odd) td { background: var(--white); }
|
|
408
|
+
tbody tr:nth-child(even) td { background: #FAFAF5; }
|
|
409
|
+
|
|
410
|
+
.build-id {
|
|
411
|
+
font-family: 'JetBrains Mono', monospace;
|
|
412
|
+
font-weight: 700;
|
|
413
|
+
font-size: 12px;
|
|
414
|
+
color: var(--black);
|
|
415
|
+
}
|
|
416
|
+
.branch-name {
|
|
417
|
+
font-family: 'JetBrains Mono', monospace;
|
|
418
|
+
font-size: 12px;
|
|
419
|
+
color: var(--secondary);
|
|
420
|
+
}
|
|
421
|
+
.branch-name::before {
|
|
422
|
+
content: '⌥ ';
|
|
423
|
+
opacity: 0.5;
|
|
424
|
+
}
|
|
425
|
+
.duration {
|
|
426
|
+
font-family: 'JetBrains Mono', monospace;
|
|
427
|
+
font-size: 12px;
|
|
428
|
+
font-weight: 600;
|
|
429
|
+
color: var(--body);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.status-badge {
|
|
433
|
+
display: inline-flex;
|
|
434
|
+
align-items: center;
|
|
435
|
+
gap: 5px;
|
|
436
|
+
padding: 3px 10px;
|
|
437
|
+
border-radius: 9999px;
|
|
438
|
+
border: 2px solid var(--black);
|
|
439
|
+
font-family: 'JetBrains Mono', monospace;
|
|
440
|
+
font-size: 10px;
|
|
441
|
+
font-weight: 700;
|
|
442
|
+
text-transform: uppercase;
|
|
443
|
+
letter-spacing: 0.05em;
|
|
444
|
+
}
|
|
445
|
+
.badge-pass { background: #D1FAE5; color: #065F46; }
|
|
446
|
+
.badge-fail { background: #FEE2E2; color: #991B1B; }
|
|
447
|
+
.badge-run { background: var(--yellow); color: var(--black); }
|
|
448
|
+
.badge-skip { background: #F3F4F6; color: var(--secondary); }
|
|
449
|
+
|
|
450
|
+
/* ── Bottom row ── */
|
|
451
|
+
.bottom-row {
|
|
452
|
+
display: grid;
|
|
453
|
+
grid-template-columns: 1fr 280px;
|
|
454
|
+
gap: 16px;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
.info-card {
|
|
458
|
+
background: var(--white);
|
|
459
|
+
border: 2px solid var(--black);
|
|
460
|
+
box-shadow: 4px 4px 0 var(--black);
|
|
461
|
+
padding: 20px;
|
|
462
|
+
}
|
|
463
|
+
.info-card-title {
|
|
464
|
+
font-weight: 800;
|
|
465
|
+
font-size: 13px;
|
|
466
|
+
color: var(--black);
|
|
467
|
+
text-transform: uppercase;
|
|
468
|
+
letter-spacing: 0.04em;
|
|
469
|
+
margin-bottom: 14px;
|
|
470
|
+
padding-bottom: 10px;
|
|
471
|
+
border-bottom: 2px solid var(--black);
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
.kv-row {
|
|
475
|
+
display: flex;
|
|
476
|
+
justify-content: space-between;
|
|
477
|
+
align-items: center;
|
|
478
|
+
padding: 8px 0;
|
|
479
|
+
border-bottom: 1px solid rgba(0,0,0,0.12);
|
|
480
|
+
}
|
|
481
|
+
.kv-row:last-child { border-bottom: none; }
|
|
482
|
+
.kv-key {
|
|
483
|
+
font-family: 'JetBrains Mono', monospace;
|
|
484
|
+
font-size: 10px;
|
|
485
|
+
font-weight: 600;
|
|
486
|
+
text-transform: uppercase;
|
|
487
|
+
letter-spacing: 0.08em;
|
|
488
|
+
color: var(--secondary);
|
|
489
|
+
}
|
|
490
|
+
.kv-val {
|
|
491
|
+
font-family: 'JetBrains Mono', monospace;
|
|
492
|
+
font-size: 12px;
|
|
493
|
+
font-weight: 700;
|
|
494
|
+
color: var(--black);
|
|
495
|
+
}
|
|
496
|
+
.kv-val.green { color: #065F46; }
|
|
497
|
+
.kv-val.red { color: #991B1B; }
|
|
498
|
+
|
|
499
|
+
/* ── Primary button ── */
|
|
500
|
+
.btn-primary {
|
|
501
|
+
display: inline-flex;
|
|
502
|
+
align-items: center;
|
|
503
|
+
gap: 8px;
|
|
504
|
+
background: var(--yellow);
|
|
505
|
+
border: 2px solid var(--black);
|
|
506
|
+
box-shadow: 3px 3px 0 var(--black);
|
|
507
|
+
color: var(--black);
|
|
508
|
+
font-family: 'JetBrains Mono', monospace;
|
|
509
|
+
font-weight: 700;
|
|
510
|
+
font-size: 11px;
|
|
511
|
+
text-transform: uppercase;
|
|
512
|
+
letter-spacing: 0.08em;
|
|
513
|
+
padding: 10px 20px;
|
|
514
|
+
cursor: pointer;
|
|
515
|
+
transition: transform 0.1s, box-shadow 0.1s;
|
|
516
|
+
}
|
|
517
|
+
.btn-primary:hover {
|
|
518
|
+
transform: translate(-1px, -1px);
|
|
519
|
+
box-shadow: 5px 5px 0 var(--black);
|
|
520
|
+
}
|
|
521
|
+
.btn-primary:active {
|
|
522
|
+
transform: translate(2px, 2px);
|
|
523
|
+
box-shadow: 1px 1px 0 var(--black);
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.btn-secondary {
|
|
527
|
+
display: inline-flex;
|
|
528
|
+
align-items: center;
|
|
529
|
+
gap: 8px;
|
|
530
|
+
background: var(--white);
|
|
531
|
+
border: 2px solid var(--black);
|
|
532
|
+
box-shadow: 3px 3px 0 var(--black);
|
|
533
|
+
color: var(--black);
|
|
534
|
+
font-family: 'JetBrains Mono', monospace;
|
|
535
|
+
font-weight: 600;
|
|
536
|
+
font-size: 11px;
|
|
537
|
+
text-transform: uppercase;
|
|
538
|
+
letter-spacing: 0.08em;
|
|
539
|
+
padding: 10px 20px;
|
|
540
|
+
cursor: pointer;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.action-row {
|
|
544
|
+
display: flex;
|
|
545
|
+
gap: 12px;
|
|
546
|
+
margin-top: 16px;
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
/* ── Watermark ── */
|
|
550
|
+
.watermark {
|
|
551
|
+
position: fixed;
|
|
552
|
+
top: 12px;
|
|
553
|
+
right: 14px;
|
|
554
|
+
background: var(--black);
|
|
555
|
+
color: var(--yellow);
|
|
556
|
+
font-family: 'JetBrains Mono', monospace;
|
|
557
|
+
font-size: 9.5px;
|
|
558
|
+
font-weight: 700;
|
|
559
|
+
text-transform: uppercase;
|
|
560
|
+
letter-spacing: 0.1em;
|
|
561
|
+
padding: 4px 10px;
|
|
562
|
+
border: 2px solid var(--yellow);
|
|
563
|
+
z-index: 100;
|
|
564
|
+
}
|
|
565
|
+
</style>
|
|
566
|
+
</head>
|
|
567
|
+
<body>
|
|
568
|
+
|
|
569
|
+
<div class="watermark">AIOSON Design Skill Preview</div>
|
|
570
|
+
|
|
571
|
+
<div class="shell">
|
|
572
|
+
|
|
573
|
+
<!-- Sidebar -->
|
|
574
|
+
<aside class="sidebar">
|
|
575
|
+
<div class="sidebar-logo">
|
|
576
|
+
<div class="logo-row">
|
|
577
|
+
<div class="logo-box">CI</div>
|
|
578
|
+
<div>
|
|
579
|
+
<div class="logo-name">BuildForge</div>
|
|
580
|
+
<div class="logo-version">v3.8.1 · STABLE</div>
|
|
581
|
+
</div>
|
|
582
|
+
</div>
|
|
583
|
+
</div>
|
|
584
|
+
|
|
585
|
+
<nav class="nav-section">
|
|
586
|
+
|
|
587
|
+
<div class="nav-item active">
|
|
588
|
+
<svg class="nav-icon" viewBox="0 0 14 14" fill="currentColor"><rect x="1" y="1" width="5" height="5"/><rect x="8" y="1" width="5" height="5"/><rect x="1" y="8" width="5" height="5"/><rect x="8" y="8" width="5" height="5"/></svg>
|
|
589
|
+
Dashboard
|
|
590
|
+
<span class="nav-count">3</span>
|
|
591
|
+
</div>
|
|
592
|
+
|
|
593
|
+
<div class="nav-item">
|
|
594
|
+
<svg class="nav-icon" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1L13 4v6L7 13 1 10V4L7 1z"/></svg>
|
|
595
|
+
Analytics
|
|
596
|
+
</div>
|
|
597
|
+
|
|
598
|
+
<div class="nav-item">
|
|
599
|
+
<svg class="nav-icon" viewBox="0 0 14 14" fill="currentColor"><circle cx="7" cy="7" r="6"/><path d="M5 4l5 3-5 3V4z" fill="white"/></svg>
|
|
600
|
+
Builds
|
|
601
|
+
<span class="nav-count">47</span>
|
|
602
|
+
</div>
|
|
603
|
+
|
|
604
|
+
<div class="nav-item">
|
|
605
|
+
<svg class="nav-icon" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l1.5 3 3 .5-2 2 .5 3L7 8 4 10l.5-3-2-2 3-.5z"/></svg>
|
|
606
|
+
Settings
|
|
607
|
+
</div>
|
|
608
|
+
|
|
609
|
+
</nav>
|
|
610
|
+
|
|
611
|
+
<div class="sidebar-footer">
|
|
612
|
+
<div class="user-row">
|
|
613
|
+
<div class="avatar-box">JR</div>
|
|
614
|
+
<div>
|
|
615
|
+
<div class="user-name">J. Rodriguez</div>
|
|
616
|
+
<div class="user-role">Lead Engineer</div>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
</div>
|
|
620
|
+
</aside>
|
|
621
|
+
|
|
622
|
+
<!-- Main -->
|
|
623
|
+
<div class="main">
|
|
624
|
+
<header class="topbar">
|
|
625
|
+
<span class="topbar-title">Neo-Brutalist UI — AIOSON Design Skill Preview</span>
|
|
626
|
+
<span class="topbar-badge">Bold · Grid · Flat</span>
|
|
627
|
+
<div class="topbar-actions">
|
|
628
|
+
<button class="topbar-btn">
|
|
629
|
+
<svg viewBox="0 0 14 14" fill="currentColor"><circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="m10 10 3 3" stroke="currentColor" stroke-width="1.5"/></svg>
|
|
630
|
+
Filter
|
|
631
|
+
</button>
|
|
632
|
+
<button class="topbar-btn" style="background: var(--yellow); border-color: var(--black);">
|
|
633
|
+
+ Trigger Build
|
|
634
|
+
</button>
|
|
635
|
+
</div>
|
|
636
|
+
</header>
|
|
637
|
+
|
|
638
|
+
<div class="content">
|
|
639
|
+
|
|
640
|
+
<!-- Page header -->
|
|
641
|
+
<div class="page-header">
|
|
642
|
+
<div>
|
|
643
|
+
<div class="page-eyebrow">// MAIN WORKSPACE</div>
|
|
644
|
+
<h1 class="page-title">Build <span>Dashboard</span></h1>
|
|
645
|
+
</div>
|
|
646
|
+
<div class="page-date">
|
|
647
|
+
<div>MARCH 28, 2026</div>
|
|
648
|
+
<div style="margin-top:4px; color: var(--black); font-weight: 700;">14:32:07 UTC</div>
|
|
649
|
+
<div style="margin-top:4px; display:flex; align-items:center; gap:6px;">
|
|
650
|
+
<span style="width:7px;height:7px;background:#22C55E;border:1px solid #000;display:inline-block;"></span>
|
|
651
|
+
ALL SYSTEMS OPERATIONAL
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
|
|
656
|
+
<!-- Stats -->
|
|
657
|
+
<div class="stats-grid">
|
|
658
|
+
|
|
659
|
+
<div class="stat-card">
|
|
660
|
+
<div class="stat-tag">Builds Today</div>
|
|
661
|
+
<div class="stat-number">47</div>
|
|
662
|
+
<span class="stat-delta delta-up">+12 vs yesterday</span>
|
|
663
|
+
</div>
|
|
664
|
+
|
|
665
|
+
<div class="stat-card">
|
|
666
|
+
<div class="stat-tag">Success Rate</div>
|
|
667
|
+
<div class="stat-number yellow">91.2<span style="font-size:24px;letter-spacing:-1px;">%</span></div>
|
|
668
|
+
<span class="stat-delta delta-neutral">-0.4% this week</span>
|
|
669
|
+
</div>
|
|
670
|
+
|
|
671
|
+
<div class="stat-card">
|
|
672
|
+
<div class="stat-tag">Open Issues</div>
|
|
673
|
+
<div class="stat-number">13</div>
|
|
674
|
+
<span class="stat-delta delta-down">+5 since morning</span>
|
|
675
|
+
</div>
|
|
676
|
+
|
|
677
|
+
</div>
|
|
678
|
+
|
|
679
|
+
<!-- Build history table -->
|
|
680
|
+
<div class="table-card">
|
|
681
|
+
<div class="card-header">
|
|
682
|
+
<div>
|
|
683
|
+
<div class="card-title">Build History</div>
|
|
684
|
+
<div class="card-title-sub">Last 4 pipeline runs · ci/cd queue</div>
|
|
685
|
+
</div>
|
|
686
|
+
<button class="card-action-btn">⟳ Refresh</button>
|
|
687
|
+
</div>
|
|
688
|
+
<table>
|
|
689
|
+
<thead>
|
|
690
|
+
<tr>
|
|
691
|
+
<th>Build ID</th>
|
|
692
|
+
<th>Branch</th>
|
|
693
|
+
<th>Status</th>
|
|
694
|
+
<th>Duration</th>
|
|
695
|
+
<th>Triggered</th>
|
|
696
|
+
</tr>
|
|
697
|
+
</thead>
|
|
698
|
+
<tbody>
|
|
699
|
+
<tr>
|
|
700
|
+
<td><div class="build-id">#BUILD-0891</div></td>
|
|
701
|
+
<td><div class="branch-name">main</div></td>
|
|
702
|
+
<td><span class="status-badge badge-pass">PASSED</span></td>
|
|
703
|
+
<td><div class="duration">02:14</div></td>
|
|
704
|
+
<td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--secondary);">2m ago · push</span></td>
|
|
705
|
+
</tr>
|
|
706
|
+
<tr>
|
|
707
|
+
<td><div class="build-id">#BUILD-0890</div></td>
|
|
708
|
+
<td><div class="branch-name">feat/auth-v2</div></td>
|
|
709
|
+
<td><span class="status-badge badge-run">RUNNING</span></td>
|
|
710
|
+
<td><div class="duration">00:47…</div></td>
|
|
711
|
+
<td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--secondary);">5m ago · PR</span></td>
|
|
712
|
+
</tr>
|
|
713
|
+
<tr>
|
|
714
|
+
<td><div class="build-id">#BUILD-0889</div></td>
|
|
715
|
+
<td><div class="branch-name">fix/rate-limit</div></td>
|
|
716
|
+
<td><span class="status-badge badge-fail">FAILED</span></td>
|
|
717
|
+
<td><div class="duration">01:03</div></td>
|
|
718
|
+
<td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--secondary);">22m ago · push</span></td>
|
|
719
|
+
</tr>
|
|
720
|
+
<tr>
|
|
721
|
+
<td><div class="build-id">#BUILD-0888</div></td>
|
|
722
|
+
<td><div class="branch-name">chore/deps</div></td>
|
|
723
|
+
<td><span class="status-badge badge-skip">SKIPPED</span></td>
|
|
724
|
+
<td><div class="duration">00:00</div></td>
|
|
725
|
+
<td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--secondary);">1h ago · bot</span></td>
|
|
726
|
+
</tr>
|
|
727
|
+
</tbody>
|
|
728
|
+
</table>
|
|
729
|
+
</div>
|
|
730
|
+
|
|
731
|
+
<!-- Bottom row -->
|
|
732
|
+
<div class="bottom-row">
|
|
733
|
+
|
|
734
|
+
<div class="info-card">
|
|
735
|
+
<div class="info-card-title">Pipeline Health — This Week</div>
|
|
736
|
+
<div class="kv-row">
|
|
737
|
+
<span class="kv-key">Total Builds</span>
|
|
738
|
+
<span class="kv-val">214</span>
|
|
739
|
+
</div>
|
|
740
|
+
<div class="kv-row">
|
|
741
|
+
<span class="kv-key">Passed</span>
|
|
742
|
+
<span class="kv-val green">195</span>
|
|
743
|
+
</div>
|
|
744
|
+
<div class="kv-row">
|
|
745
|
+
<span class="kv-key">Failed</span>
|
|
746
|
+
<span class="kv-val red">19</span>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="kv-row">
|
|
749
|
+
<span class="kv-key">Avg Duration</span>
|
|
750
|
+
<span class="kv-val">01:52</span>
|
|
751
|
+
</div>
|
|
752
|
+
<div class="kv-row">
|
|
753
|
+
<span class="kv-key">Deploy Freq</span>
|
|
754
|
+
<span class="kv-val green">8.6 / day</span>
|
|
755
|
+
</div>
|
|
756
|
+
<div class="kv-row">
|
|
757
|
+
<span class="kv-key">MTTR</span>
|
|
758
|
+
<span class="kv-val">04:21</span>
|
|
759
|
+
</div>
|
|
760
|
+
<div class="action-row">
|
|
761
|
+
<button class="btn-primary">▶ New Build</button>
|
|
762
|
+
<button class="btn-secondary">⬇ Export CSV</button>
|
|
763
|
+
</div>
|
|
764
|
+
</div>
|
|
765
|
+
|
|
766
|
+
<div class="info-card">
|
|
767
|
+
<div class="info-card-title">Active Runners</div>
|
|
768
|
+
<div class="kv-row">
|
|
769
|
+
<span class="kv-key">runner-prod-01</span>
|
|
770
|
+
<span class="kv-val green">BUSY</span>
|
|
771
|
+
</div>
|
|
772
|
+
<div class="kv-row">
|
|
773
|
+
<span class="kv-key">runner-prod-02</span>
|
|
774
|
+
<span class="kv-val green">IDLE</span>
|
|
775
|
+
</div>
|
|
776
|
+
<div class="kv-row">
|
|
777
|
+
<span class="kv-key">runner-prod-03</span>
|
|
778
|
+
<span class="kv-val green">BUSY</span>
|
|
779
|
+
</div>
|
|
780
|
+
<div class="kv-row">
|
|
781
|
+
<span class="kv-key">runner-eu-01</span>
|
|
782
|
+
<span class="kv-val" style="color:var(--secondary);">OFFLINE</span>
|
|
783
|
+
</div>
|
|
784
|
+
<div class="kv-row">
|
|
785
|
+
<span class="kv-key">Queue Depth</span>
|
|
786
|
+
<span class="kv-val">3 pending</span>
|
|
787
|
+
</div>
|
|
788
|
+
</div>
|
|
789
|
+
|
|
790
|
+
</div>
|
|
791
|
+
</div>
|
|
792
|
+
</div>
|
|
793
|
+
|
|
794
|
+
</div>
|
|
795
|
+
|
|
796
|
+
</body>
|
|
797
|
+
</html>
|