@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.
Files changed (131) hide show
  1. package/README.md +6 -0
  2. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  3. package/docs/design-previews/aurora-command-ui.html +682 -0
  4. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  5. package/docs/design-previews/bold-editorial-ui.html +717 -0
  6. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  7. package/docs/design-previews/clean-saas-ui.html +549 -0
  8. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  9. package/docs/design-previews/cognitive-core-ui.html +463 -0
  10. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  11. package/docs/design-previews/glassmorphism-ui.html +886 -0
  12. package/docs/design-previews/index.html +699 -0
  13. package/docs/design-previews/interface-design-website.html +1187 -0
  14. package/docs/design-previews/interface-design.html +513 -0
  15. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  16. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  17. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  18. package/docs/design-previews/premium-command-center-ui.html +552 -0
  19. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  20. package/docs/design-previews/warm-craft-ui.html +739 -0
  21. package/docs/en/cli-reference.md +20 -9
  22. package/docs/pt/README.md +7 -0
  23. package/docs/pt/agent-sharding.md +132 -0
  24. package/docs/pt/agentes.md +8 -2
  25. package/docs/pt/busca-de-contexto.md +129 -0
  26. package/docs/pt/cache-de-contexto.md +156 -0
  27. package/docs/pt/comandos-cli.md +28 -0
  28. package/docs/pt/design-hybrid-forge.md +107 -0
  29. package/docs/pt/inicio-rapido.md +54 -3
  30. package/docs/pt/inteligencia-adaptativa.md +324 -0
  31. package/docs/pt/monitor-de-contexto.md +104 -0
  32. package/docs/pt/recuperacao-de-sessao.md +125 -0
  33. package/docs/pt/sandbox.md +125 -0
  34. package/docs/pt/skills.md +98 -6
  35. package/package.json +1 -1
  36. package/src/agent-loader.js +280 -0
  37. package/src/cli.js +94 -0
  38. package/src/commands/agent-loader.js +85 -0
  39. package/src/commands/context-cache.js +90 -0
  40. package/src/commands/context-monitor.js +92 -0
  41. package/src/commands/context-search.js +66 -0
  42. package/src/commands/design-hybrid-options.js +385 -0
  43. package/src/commands/health.js +214 -0
  44. package/src/commands/init.js +54 -13
  45. package/src/commands/install.js +52 -13
  46. package/src/commands/learning-evolve.js +355 -0
  47. package/src/commands/live.js +34 -0
  48. package/src/commands/recovery.js +43 -0
  49. package/src/commands/sandbox.js +37 -0
  50. package/src/commands/setup-context.js +22 -2
  51. package/src/commands/setup.js +178 -0
  52. package/src/commands/skill.js +79 -32
  53. package/src/commands/tool-registry-cmd.js +232 -0
  54. package/src/commands/update.js +7 -0
  55. package/src/constants.js +9 -0
  56. package/src/context-cache.js +159 -0
  57. package/src/context-search.js +326 -0
  58. package/src/design-variation-catalog.js +503 -0
  59. package/src/i18n/messages/en.js +32 -2
  60. package/src/i18n/messages/es.js +30 -2
  61. package/src/i18n/messages/fr.js +30 -2
  62. package/src/i18n/messages/pt-BR.js +32 -2
  63. package/src/install-animation.js +260 -0
  64. package/src/install-profile.js +143 -0
  65. package/src/install-wizard.js +474 -0
  66. package/src/installer.js +38 -10
  67. package/src/parser.js +7 -1
  68. package/src/recovery-context-session.js +154 -0
  69. package/src/runtime-store.js +97 -1
  70. package/src/sandbox.js +177 -0
  71. package/src/tool-executor.js +94 -0
  72. package/src/updater.js +11 -3
  73. package/template/.aioson/agents/analyst.md +58 -3
  74. package/template/.aioson/agents/architect.md +38 -0
  75. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  76. package/template/.aioson/agents/dev.md +103 -0
  77. package/template/.aioson/agents/deyvin.md +57 -0
  78. package/template/.aioson/agents/pm.md +58 -0
  79. package/template/.aioson/agents/product.md +28 -0
  80. package/template/.aioson/agents/qa.md +79 -0
  81. package/template/.aioson/agents/setup.md +65 -3
  82. package/template/.aioson/agents/sheldon.md +107 -6
  83. package/template/.aioson/agents/tester.md +156 -0
  84. package/template/.aioson/config.md +15 -0
  85. package/template/.aioson/context/forensics/.gitkeep +0 -0
  86. package/template/.aioson/context/seeds/seed-example.md +27 -0
  87. package/template/.aioson/context/user-profile.md +42 -0
  88. package/template/.aioson/locales/en/agents/setup.md +33 -1
  89. package/template/.aioson/locales/es/agents/setup.md +33 -1
  90. package/template/.aioson/locales/fr/agents/setup.md +33 -1
  91. package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
  92. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  93. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  94. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  95. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  96. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  97. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  98. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  99. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  100. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  101. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  102. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  103. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  104. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  105. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  106. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  107. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  108. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  109. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  110. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  111. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  112. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  113. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  114. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  115. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  116. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  117. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  118. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  119. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  120. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  121. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  122. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  123. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  124. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  125. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  126. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  127. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  128. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  129. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  130. package/template/AGENTS.md +23 -1
  131. package/template/CLAUDE.md +1 -0
package/docs/design-previews/premium-command-center-ui.html ADDED
@@ -0,0 +1,552 @@
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>Premium Command Center — AIOSON Design Skill</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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --base: #0b1015;
15
+ --surface: #10161d;
16
+ --elevated: #151c24;
17
+ --sunken: #080c11;
18
+ --border: rgba(255,255,255,0.08);
19
+ --border-strong: rgba(255,255,255,0.15);
20
+ --border-accent: rgba(99,179,237,0.30);
21
+ --accent: #63b3ed;
22
+ --accent-muted: #4a90a4;
23
+ --accent-bg: rgba(99,179,237,0.06);
24
+ --fg: #f3f7fb;
25
+ --fg-sec: #b7c2cf;
26
+ --fg-muted: #7f8b99;
27
+ --green: #38a169;
28
+ --amber: #d97706;
29
+ --red: #e53e3e;
30
+ --blue: #4299e1;
31
+ --left-nav: 240px;
32
+ --right-rail: 280px;
33
+ --topbar: 52px;
34
+ }
35
+
36
+ html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; background: var(--base); color: var(--fg-sec); font-size: 13.5px; line-height: 1.5; }
37
+
38
+ /* AIOSON badge */
39
+ .aioson-badge {
40
+ position: fixed; top: 10px; right: 10px; z-index: 9999;
41
+ background: rgba(99,179,237,0.15); color: var(--accent);
42
+ border: 1px solid var(--border-accent);
43
+ font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
44
+ letter-spacing: 0.06em; padding: 4px 10px; border-radius: 9999px;
45
+ pointer-events: none;
46
+ }
47
+
48
+ /* Aurora field */
49
+ .aurora {
50
+ position: fixed; inset: 0; z-index: 0; pointer-events: none;
51
+ background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(99,179,237,0.04) 0%, transparent 70%);
52
+ }
53
+
54
+ .mono { font-family: 'JetBrains Mono', monospace; }
55
+
56
+ /* Layout */
57
+ .shell { display: flex; height: 100vh; flex-direction: column; position: relative; z-index: 1; overflow: hidden; }
58
+
59
+ /* Top bar */
60
+ .topbar {
61
+ height: var(--topbar); flex-shrink: 0;
62
+ background: var(--surface); border-bottom: 1px solid var(--border);
63
+ display: flex; align-items: center; gap: 12px; padding: 0 16px;
64
+ position: relative; z-index: 10;
65
+ }
66
+ .topbar-logo { display: flex; align-items: center; gap: 9px; width: calc(var(--left-nav) - 16px); flex-shrink: 0; }
67
+ .logo-gem {
68
+ width: 26px; height: 26px; border-radius: 5px;
69
+ background: linear-gradient(135deg, var(--accent-muted), var(--accent));
70
+ display: flex; align-items: center; justify-content: center; flex-shrink: 0;
71
+ }
72
+ .logo-inner { width: 8px; height: 8px; border-radius: 1px; background: var(--base); }
73
+ .logo-wordmark { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
74
+ .logo-version { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--fg-muted); }
75
+
76
+ /* Search bar */
77
+ .search-bar {
78
+ flex: 1; max-width: 400px; margin: 0 auto;
79
+ height: 32px; background: var(--sunken);
80
+ border: 1px solid var(--border); border-radius: 6px;
81
+ display: flex; align-items: center; padding: 0 12px; gap: 8px;
82
+ }
83
+ .search-icon { flex-shrink: 0; opacity: 0.4; }
84
+ .search-input {
85
+ flex: 1; background: none; border: none; outline: none;
86
+ font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--fg-sec);
87
+ }
88
+ .search-input::placeholder { color: var(--fg-muted); }
89
+ .search-kbd {
90
+ font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
91
+ color: var(--fg-muted); background: var(--border); border-radius: 3px;
92
+ padding: 1px 5px; border: 1px solid var(--border-strong);
93
+ }
94
+
95
+ /* Status indicators */
96
+ .status-row { display: flex; align-items: center; gap: 12px; margin-left: auto; }
97
+ .status-indicator { display: flex; align-items: center; gap: 5px; }
98
+ .status-dot { width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; }
99
+ .status-dot-green { background: var(--green); box-shadow: 0 0 5px var(--green); }
100
+ .status-dot-amber { background: var(--amber); }
101
+ .status-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--fg-muted); letter-spacing: 0.06em; }
102
+ .divider-v { width: 1px; height: 18px; background: var(--border); }
103
+ .topbar-btn {
104
+ height: 28px; padding: 0 10px; border-radius: 5px;
105
+ border: 1px solid var(--border); background: none;
106
+ font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500;
107
+ color: var(--fg-sec); cursor: pointer;
108
+ display: flex; align-items: center; gap: 5px;
109
+ }
110
+ .topbar-btn:hover { background: var(--elevated); border-color: var(--border-strong); }
111
+
112
+ /* Tri-rail body */
113
+ .tri-rail { flex: 1; display: flex; min-height: 0; }
114
+
115
+ /* Left nav */
116
+ .left-nav {
117
+ width: var(--left-nav); flex-shrink: 0;
118
+ background: var(--surface); border-right: 1px solid var(--border);
119
+ display: flex; flex-direction: column; overflow-y: auto;
120
+ }
121
+ .nav-header { padding: 16px 16px 8px; }
122
+ .nav-section-tag {
123
+ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500;
124
+ letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted);
125
+ padding: 0 16px; margin-bottom: 4px; margin-top: 16px;
126
+ }
127
+ .nav-item {
128
+ display: flex; align-items: center; gap: 9px;
129
+ padding: 0 14px; height: 34px; cursor: pointer;
130
+ font-size: 12.5px; font-weight: 500; color: var(--fg-muted);
131
+ border-left: 2px solid transparent;
132
+ transition: background 0.1s, color 0.1s, border-color 0.1s;
133
+ position: relative;
134
+ }
135
+ .nav-item:hover { background: var(--elevated); color: var(--fg-sec); }
136
+ .nav-item.active {
137
+ border-left-color: var(--accent);
138
+ background: var(--accent-bg); color: var(--accent);
139
+ }
140
+ .nav-item-icon {
141
+ width: 15px; height: 15px; border-radius: 3px;
142
+ background: currentColor; opacity: 0.35; flex-shrink: 0;
143
+ }
144
+ .nav-item.active .nav-item-icon { opacity: 0.7; }
145
+ .nav-item-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
146
+ .nav-item-badge {
147
+ margin-left: auto; height: 16px; min-width: 16px; padding: 0 5px;
148
+ border-radius: 9999px; background: rgba(99,179,237,0.12);
149
+ border: 1px solid rgba(99,179,237,0.2); color: var(--accent);
150
+ font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500;
151
+ display: flex; align-items: center; justify-content: center;
152
+ }
153
+ .nav-item-badge-red {
154
+ background: rgba(229,62,62,0.12); border-color: rgba(229,62,62,0.2); color: var(--red);
155
+ }
156
+ .nav-footer {
157
+ margin-top: auto; padding: 12px; border-top: 1px solid var(--border);
158
+ }
159
+ .user-chip {
160
+ display: flex; align-items: center; gap: 8px; padding: 8px;
161
+ border-radius: 6px; cursor: pointer;
162
+ }
163
+ .user-chip:hover { background: var(--elevated); }
164
+ .user-avatar {
165
+ width: 26px; height: 26px; border-radius: 9999px;
166
+ background: var(--accent-bg); border: 1px solid var(--border-accent);
167
+ display: flex; align-items: center; justify-content: center;
168
+ font-size: 10px; font-weight: 700; color: var(--accent); flex-shrink: 0;
169
+ }
170
+ .user-info-name { font-size: 12px; font-weight: 600; color: var(--fg); }
171
+ .user-info-role { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; }
172
+
173
+ /* Center workspace */
174
+ .workspace { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
175
+
176
+ /* Section header */
177
+ .sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
178
+ .sec-title { font-size: 13px; font-weight: 600; color: var(--fg); }
179
+ .sec-line { flex: 1; height: 1px; background: var(--border); }
180
+ .sec-meta { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--fg-muted); letter-spacing: 0.06em; }
181
+
182
+ /* Card grid */
183
+ .card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
184
+ .card {
185
+ background: var(--surface); border: 1px solid var(--border);
186
+ border-radius: 7px; padding: 16px 18px;
187
+ transition: border-color 0.2s;
188
+ }
189
+ .card:hover { border-color: var(--border-strong); }
190
+ .card-label {
191
+ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500;
192
+ letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px;
193
+ }
194
+ .card-metric { font-size: 28px; font-weight: 600; color: var(--fg); letter-spacing: -0.03em; line-height: 1; }
195
+ .card-metric-unit { font-size: 14px; font-weight: 400; color: var(--fg-muted); }
196
+ .card-sub { font-size: 11.5px; color: var(--fg-muted); margin-top: 8px; }
197
+ .card-sub .up { color: var(--green); }
198
+ .card-sub .warn { color: var(--amber); }
199
+ .mini-bar { height: 3px; background: var(--border); border-radius: 9999px; overflow: hidden; margin-top: 12px; }
200
+ .mini-fill { height: 100%; border-radius: 9999px; }
201
+
202
+ /* Workflow list */
203
+ .workflow-list { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
204
+ .wf-header {
205
+ display: flex; align-items: center; justify-content: space-between;
206
+ padding: 12px 16px; border-bottom: 1px solid var(--border);
207
+ }
208
+ .wf-title { font-size: 12.5px; font-weight: 600; color: var(--fg); }
209
+ .wf-action {
210
+ height: 26px; padding: 0 10px; border-radius: 5px;
211
+ border: 1px solid var(--border-accent); background: var(--accent-bg);
212
+ color: var(--accent); font-size: 11px; font-weight: 500;
213
+ font-family: 'Inter', sans-serif; cursor: pointer;
214
+ }
215
+ .wf-row {
216
+ display: flex; align-items: center; gap: 12px;
217
+ padding: 10px 16px; border-bottom: 1px solid var(--border);
218
+ transition: background 0.1s;
219
+ }
220
+ .wf-row:last-child { border-bottom: none; }
221
+ .wf-row:hover { background: var(--elevated); }
222
+ .wf-status-dot { width: 7px; height: 7px; border-radius: 9999px; flex-shrink: 0; }
223
+ .wf-name { font-size: 12.5px; font-weight: 500; color: var(--fg); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
224
+ .wf-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--fg-muted); }
225
+ .wf-badge {
226
+ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500;
227
+ letter-spacing: 0.05em; padding: 2px 7px; border-radius: 9999px;
228
+ border: 1px solid var(--border);
229
+ }
230
+ .wf-badge-running { color: var(--accent); border-color: rgba(99,179,237,0.25); background: rgba(99,179,237,0.08); }
231
+ .wf-badge-success { color: var(--green); border-color: rgba(56,161,105,0.25); background: rgba(56,161,105,0.08); }
232
+ .wf-badge-failed { color: var(--red); border-color: rgba(229,62,62,0.25); background: rgba(229,62,62,0.08); }
233
+ .wf-badge-queued { color: var(--fg-muted); border-color: var(--border); }
234
+ .wf-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--fg-muted); white-space: nowrap; }
235
+
236
+ /* Right rail */
237
+ .right-rail {
238
+ width: var(--right-rail); flex-shrink: 0;
239
+ background: var(--surface); border-left: 1px solid var(--border);
240
+ display: flex; flex-direction: column;
241
+ }
242
+ .rail-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
243
+ .rail-tab {
244
+ flex: 1; height: 38px; display: flex; align-items: center; justify-content: center;
245
+ font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500;
246
+ letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
247
+ border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.1s;
248
+ }
249
+ .rail-tab:hover { color: var(--fg-sec); }
250
+ .rail-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
251
+ .rail-content { flex: 1; overflow-y: auto; padding: 12px; }
252
+ .activity-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
253
+ .activity-title { font-size: 11.5px; font-weight: 600; color: var(--fg); }
254
+ .activity-live { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--green); font-family: 'JetBrains Mono', monospace; }
255
+ .live-pulse { width: 6px; height: 6px; border-radius: 9999px; background: var(--green); box-shadow: 0 0 5px var(--green); animation: pulse 2s infinite; }
256
+ @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
257
+ .log-entry {
258
+ display: flex; flex-direction: column; gap: 2px;
259
+ padding: 8px 10px; border-radius: 5px; margin-bottom: 5px;
260
+ background: var(--elevated); border: 1px solid var(--border);
261
+ transition: border-color 0.15s;
262
+ }
263
+ .log-entry:hover { border-color: var(--border-strong); }
264
+ .log-entry-top { display: flex; align-items: center; gap: 6px; }
265
+ .log-ts { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--fg-muted); flex-shrink: 0; }
266
+ .log-agent { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; }
267
+ .log-agent-orch { background: rgba(99,179,237,0.1); color: var(--accent); }
268
+ .log-agent-dev { background: rgba(56,161,105,0.1); color: var(--green); }
269
+ .log-agent-qa { background: rgba(167,139,250,0.1); color: #A78BFA; }
270
+ .log-agent-sys { background: rgba(255,255,255,0.06); color: var(--fg-muted); }
271
+ .log-msg { font-size: 11.5px; color: var(--fg-sec); line-height: 1.4; }
272
+ .log-type { font-family: 'JetBrains Mono', monospace; font-size: 9px; margin-left: auto; flex-shrink: 0; }
273
+ .log-type-plan { color: var(--accent); }
274
+ .log-type-emit { color: var(--green); }
275
+ .log-type-warn { color: var(--amber); }
276
+ .log-type-error { color: var(--red); }
277
+ .rail-footer {
278
+ border-top: 1px solid var(--border); padding: 10px 12px;
279
+ display: flex; align-items: center; justify-content: space-between;
280
+ flex-shrink: 0;
281
+ }
282
+ .rail-footer-stat { text-align: center; }
283
+ .rail-footer-val { font-size: 16px; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; }
284
+ .rail-footer-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
285
+ .rail-divider { width: 1px; height: 30px; background: var(--border); }
286
+ </style>
287
+ </head>
288
+ <body>
289
+
290
+ <div class="aurora"></div>
291
+ <div class="aioson-badge">AIOSON Design Skill</div>
292
+
293
+ <div class="shell">
294
+
295
+ <!-- Top bar -->
296
+ <header class="topbar">
297
+ <div class="topbar-logo">
298
+ <div class="logo-gem"><div class="logo-inner"></div></div>
299
+ <div>
300
+ <div class="logo-wordmark">Command Center</div>
301
+ <div class="logo-version mono">v2.4.1</div>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="search-bar">
306
+ <svg class="search-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"><circle cx="5" cy="5" r="3.5" stroke="#7f8b99" stroke-width="1.2"/><path d="M8 8l2.5 2.5" stroke="#7f8b99" stroke-width="1.2" stroke-linecap="round"/></svg>
307
+ <input class="search-input" type="text" placeholder="Search workflows, agents, sessions..." />
308
+ <span class="search-kbd">⌘K</span>
309
+ </div>
310
+
311
+ <div class="status-row">
312
+ <div class="status-indicator"><div class="status-dot status-dot-green"></div><span class="status-label">24 AGENTS</span></div>
313
+ <div class="divider-v"></div>
314
+ <div class="status-indicator"><div class="status-dot status-dot-amber"></div><span class="status-label">3 WARNINGS</span></div>
315
+ <div class="divider-v"></div>
316
+ <button class="topbar-btn">Profile</button>
317
+ </div>
318
+ </header>
319
+
320
+ <!-- Tri-rail -->
321
+ <div class="tri-rail">
322
+
323
+ <!-- Left nav -->
324
+ <nav class="left-nav">
325
+ <div style="margin-top:12px;"></div>
326
+ <div class="nav-section-tag">Workspace</div>
327
+ <div class="nav-item active">
328
+ <div class="nav-item-icon"></div>
329
+ <span class="nav-item-label">Dashboard</span>
330
+ </div>
331
+ <div class="nav-item">
332
+ <div class="nav-item-icon"></div>
333
+ <span class="nav-item-label">Workflows</span>
334
+ <div class="nav-item-badge">12</div>
335
+ </div>
336
+ <div class="nav-item">
337
+ <div class="nav-item-icon"></div>
338
+ <span class="nav-item-label">Agents</span>
339
+ <div class="nav-item-badge">24</div>
340
+ </div>
341
+ <div class="nav-item">
342
+ <div class="nav-item-icon"></div>
343
+ <span class="nav-item-label">Deployments</span>
344
+ </div>
345
+ <div class="nav-section-tag">Observability</div>
346
+ <div class="nav-item">
347
+ <div class="nav-item-icon"></div>
348
+ <span class="nav-item-label">Logs</span>
349
+ </div>
350
+ <div class="nav-item">
351
+ <div class="nav-item-icon"></div>
352
+ <span class="nav-item-label">Alerts</span>
353
+ <div class="nav-item-badge nav-item-badge-red">3</div>
354
+ </div>
355
+ <div class="nav-item">
356
+ <div class="nav-item-icon"></div>
357
+ <span class="nav-item-label">Metrics</span>
358
+ </div>
359
+ <div class="nav-section-tag">System</div>
360
+ <div class="nav-item">
361
+ <div class="nav-item-icon"></div>
362
+ <span class="nav-item-label">Settings</span>
363
+ </div>
364
+
365
+ <div class="nav-footer">
366
+ <div class="user-chip">
367
+ <div class="user-avatar">JD</div>
368
+ <div>
369
+ <div class="user-info-name">Jordan Davies</div>
370
+ <div class="user-info-role">Operator</div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </nav>
375
+
376
+ <!-- Center workspace -->
377
+ <main class="workspace">
378
+
379
+ <!-- Metric cards -->
380
+ <div>
381
+ <div class="sec-head">
382
+ <span class="sec-title">System Overview</span>
383
+ <div class="sec-line"></div>
384
+ <span class="sec-meta mono">Updated 3s ago</span>
385
+ </div>
386
+ <div class="card-grid-2">
387
+ <div class="card">
388
+ <div class="card-label">Workflow Throughput</div>
389
+ <div class="card-metric">1,284 <span class="card-metric-unit">/hr</span></div>
390
+ <div class="card-sub"><span class="up">↑ 8.2%</span> vs last hour</div>
391
+ <div class="mini-bar"><div class="mini-fill" style="width:72%;background:var(--accent)"></div></div>
392
+ </div>
393
+ <div class="card">
394
+ <div class="card-label">Active Sessions</div>
395
+ <div class="card-metric">347</div>
396
+ <div class="card-sub">Peak: 521 &nbsp;·&nbsp; <span class="warn">3 degraded</span></div>
397
+ <div class="mini-bar"><div class="mini-fill" style="width:67%;background:var(--green)"></div></div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Workflow status list -->
403
+ <div>
404
+ <div class="sec-head">
405
+ <span class="sec-title">Workflow Status</span>
406
+ <div class="sec-line"></div>
407
+ <span class="sec-meta mono">12 workflows</span>
408
+ </div>
409
+ <div class="workflow-list">
410
+ <div class="wf-header">
411
+ <div class="wf-title">Active Workflows</div>
412
+ <button class="wf-action">New Workflow</button>
413
+ </div>
414
+ <div class="wf-row">
415
+ <div class="wf-status-dot" style="background:var(--accent);box-shadow:0 0 5px var(--accent)"></div>
416
+ <div class="wf-name">Platform Deploy — Staging</div>
417
+ <span class="wf-id mono">WF-0091</span>
418
+ <span class="wf-badge wf-badge-running">Running</span>
419
+ <span class="wf-time mono">00:04:22</span>
420
+ </div>
421
+ <div class="wf-row">
422
+ <div class="wf-status-dot" style="background:var(--green)"></div>
423
+ <div class="wf-name">Data Pipeline — ETL Batch</div>
424
+ <span class="wf-id mono">WF-0088</span>
425
+ <span class="wf-badge wf-badge-success">Success</span>
426
+ <span class="wf-time mono">00:02:11</span>
427
+ </div>
428
+ <div class="wf-row">
429
+ <div class="wf-status-dot" style="background:var(--red)"></div>
430
+ <div class="wf-name">Security Scan — API Gateway</div>
431
+ <span class="wf-id mono">WF-0085</span>
432
+ <span class="wf-badge wf-badge-failed">Failed</span>
433
+ <span class="wf-time mono">00:01:47</span>
434
+ </div>
435
+ <div class="wf-row">
436
+ <div class="wf-status-dot" style="background:var(--accent);box-shadow:0 0 5px var(--accent)"></div>
437
+ <div class="wf-name">Model Eval — Classification v3</div>
438
+ <span class="wf-id mono">WF-0089</span>
439
+ <span class="wf-badge wf-badge-running">Running</span>
440
+ <span class="wf-time mono">00:11:03</span>
441
+ </div>
442
+ <div class="wf-row">
443
+ <div class="wf-status-dot" style="background:var(--fg-muted)"></div>
444
+ <div class="wf-name">Backup Sync — Cold Storage</div>
445
+ <span class="wf-id mono">WF-0092</span>
446
+ <span class="wf-badge wf-badge-queued">Queued</span>
447
+ <span class="wf-time mono">—</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ </main>
453
+
454
+ <!-- Right rail -->
455
+ <aside class="right-rail">
456
+ <div class="rail-tabs">
457
+ <div class="rail-tab active">Activity</div>
458
+ <div class="rail-tab">Metrics</div>
459
+ <div class="rail-tab">Alerts</div>
460
+ </div>
461
+ <div class="rail-content">
462
+ <div class="activity-header">
463
+ <span class="activity-title">Live Event Stream</span>
464
+ <div class="activity-live"><div class="live-pulse"></div>LIVE</div>
465
+ </div>
466
+
467
+ <div class="log-entry">
468
+ <div class="log-entry-top">
469
+ <span class="log-ts mono">14:32:09</span>
470
+ <span class="log-agent log-agent-orch">ORCH</span>
471
+ <span class="log-type log-type-plan">PLAN</span>
472
+ </div>
473
+ <div class="log-msg">Workflow WF-0091 reached step 4/7 — deploying to staging-eu-west</div>
474
+ </div>
475
+
476
+ <div class="log-entry">
477
+ <div class="log-entry-top">
478
+ <span class="log-ts mono">14:32:07</span>
479
+ <span class="log-agent log-agent-dev">DEV</span>
480
+ <span class="log-type log-type-emit">EMIT</span>
481
+ </div>
482
+ <div class="log-msg">Build artifact pushed: platform-ui-v2.4.1-staging.tar.gz (142MB)</div>
483
+ </div>
484
+
485
+ <div class="log-entry">
486
+ <div class="log-entry-top">
487
+ <span class="log-ts mono">14:32:01</span>
488
+ <span class="log-agent log-agent-qa">QA</span>
489
+ <span class="log-type log-type-emit">EMIT</span>
490
+ </div>
491
+ <div class="log-msg">Test suite passed — 284/284 cases, coverage 91.4%</div>
492
+ </div>
493
+
494
+ <div class="log-entry">
495
+ <div class="log-entry-top">
496
+ <span class="log-ts mono">14:31:47</span>
497
+ <span class="log-agent log-agent-sys">SYS</span>
498
+ <span class="log-type log-type-warn">WARN</span>
499
+ </div>
500
+ <div class="log-msg">AGT-0044 load at 91% — consider horizontal scaling</div>
501
+ </div>
502
+
503
+ <div class="log-entry">
504
+ <div class="log-entry-top">
505
+ <span class="log-ts mono">14:31:34</span>
506
+ <span class="log-agent log-agent-orch">ORCH</span>
507
+ <span class="log-type log-type-plan">PLAN</span>
508
+ </div>
509
+ <div class="log-msg">Handoff: deyvin → qa — implementation complete for PR #447</div>
510
+ </div>
511
+
512
+ <div class="log-entry">
513
+ <div class="log-entry-top">
514
+ <span class="log-ts mono">14:31:20</span>
515
+ <span class="log-agent log-agent-dev">DEV</span>
516
+ <span class="log-type log-type-emit">EMIT</span>
517
+ </div>
518
+ <div class="log-msg">Session SES-2841 started — feature/auth-refresh-tokens</div>
519
+ </div>
520
+
521
+ <div class="log-entry">
522
+ <div class="log-entry-top">
523
+ <span class="log-ts mono">14:30:58</span>
524
+ <span class="log-agent log-agent-sys">SYS</span>
525
+ <span class="log-type log-type-emit">EMIT</span>
526
+ </div>
527
+ <div class="log-msg">WF-0085 failed at step 2 — security scan returned CRITICAL(2)</div>
528
+ </div>
529
+ </div>
530
+ <div class="rail-footer">
531
+ <div class="rail-footer-stat">
532
+ <div class="rail-footer-val">1,284</div>
533
+ <div class="rail-footer-label">Events/hr</div>
534
+ </div>
535
+ <div class="rail-divider"></div>
536
+ <div class="rail-footer-stat">
537
+ <div class="rail-footer-val">98.3<span style="font-size:11px;font-weight:400;color:var(--fg-muted)">%</span></div>
538
+ <div class="rail-footer-label">Uptime</div>
539
+ </div>
540
+ <div class="rail-divider"></div>
541
+ <div class="rail-footer-stat">
542
+ <div class="rail-footer-val">142<span style="font-size:11px;font-weight:400;color:var(--fg-muted)">ms</span></div>
543
+ <div class="rail-footer-label">P50 Lat</div>
544
+ </div>
545
+ </div>
546
+ </aside>
547
+
548
+ </div>
549
+ </div>
550
+
551
+ </body>
552
+ </html>