Hugging Face's logo

Spaces:
johnreaver
/
anycoder-087d6747
Running

App Files Community
johnreaver commited on
Commit
8983d60
·
verified ·
1 Parent(s): ab36076

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1244 -19
index.html CHANGED
@@ -1,19 +1,1244 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Autonomous AI Dev System</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --bg-deep: #0a0e17;
12
+ --bg-surface: #111827;
13
+ --bg-card: #1a2234;
14
+ --bg-card-hover: #1f2a40;
15
+ --border: #2a3550;
16
+ --border-active: #3b82f6;
17
+ --fg: #e2e8f0;
18
+ --fg-muted: #8892a8;
19
+ --fg-dim: #4a5568;
20
+ --accent-cyan: #06d6a0;
21
+ --accent-teal: #0ea5e9;
22
+ --accent-orange: #f59e0b;
23
+ --accent-red: #ef4444;
24
+ --accent-purple: #a855f7;
25
+ --accent-pink: #ec4899;
26
+ --accent-lime: #84cc16;
27
+ --glow-cyan: rgba(6, 214, 160, 0.15);
28
+ --glow-orange: rgba(245, 158, 11, 0.15);
29
+ --glow-red: rgba(239, 68, 68, 0.15);
30
+ --radius: 12px;
31
+ --radius-sm: 8px;
32
+ --radius-xs: 6px;
33
+ --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
34
+ --font-mono: 'JetBrains Mono', monospace;
35
+ --font-sans: 'Space Grotesk', sans-serif;
36
+ }
37
+
38
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
39
+
40
+ html { scroll-behavior: smooth; }
41
+
42
+ body {
43
+ font-family: var(--font-sans);
44
+ background: var(--bg-deep);
45
+ color: var(--fg);
46
+ line-height: 1.6;
47
+ min-height: 100vh;
48
+ overflow-x: hidden;
49
+ }
50
+
51
+ /* Background atmosphere */
52
+ body::before {
53
+ content: '';
54
+ position: fixed;
55
+ top: 0; left: 0; right: 0; bottom: 0;
56
+ background:
57
+ radial-gradient(ellipse 800px 600px at 20% 10%, rgba(6, 214, 160, 0.04), transparent),
58
+ radial-gradient(ellipse 600px 500px at 80% 80%, rgba(14, 165, 233, 0.04), transparent),
59
+ radial-gradient(ellipse 400px 400px at 50% 50%, rgba(168, 85, 247, 0.02), transparent);
60
+ pointer-events: none;
61
+ z-index: 0;
62
+ }
63
+
64
+ /* Scrollbar */
65
+ ::-webkit-scrollbar { width: 6px; height: 6px; }
66
+ ::-webkit-scrollbar-track { background: var(--bg-deep); }
67
+ ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
68
+ ::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }
69
+
70
+ /* Layout */
71
+ .app-container {
72
+ position: relative;
73
+ z-index: 1;
74
+ max-width: 1600px;
75
+ margin: 0 auto;
76
+ padding: 0 24px;
77
+ }
78
+
79
+ /* Header */
80
+ header {
81
+ padding: 20px 0;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: space-between;
85
+ flex-wrap: wrap;
86
+ gap: 16px;
87
+ border-bottom: 1px solid var(--border);
88
+ margin-bottom: 24px;
89
+ }
90
+
91
+ .header-left {
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 16px;
95
+ }
96
+
97
+ .logo-icon {
98
+ width: 44px;
99
+ height: 44px;
100
+ background: linear-gradient(135deg, var(--accent-cyan), var(--accent-teal));
101
+ border-radius: var(--radius-sm);
102
+ display: flex;
103
+ align-items: center;
104
+ justify-content: center;
105
+ font-size: 20px;
106
+ color: var(--bg-deep);
107
+ font-weight: 700;
108
+ box-shadow: 0 0 20px rgba(6, 214, 160, 0.3);
109
+ animation: logoPulse 3s ease-in-out infinite;
110
+ }
111
+
112
+ @keyframes logoPulse {
113
+ 0%, 100% { box-shadow: 0 0 20px rgba(6, 214, 160, 0.3); }
114
+ 50% { box-shadow: 0 0 30px rgba(6, 214, 160, 0.5); }
115
+ }
116
+
117
+ .header-title h1 {
118
+ font-size: 1.3rem;
119
+ font-weight: 700;
120
+ letter-spacing: -0.02em;
121
+ background: linear-gradient(135deg, var(--accent-cyan), var(--accent-teal));
122
+ -webkit-background-clip: text;
123
+ -webkit-text-fill-color: transparent;
124
+ background-clip: text;
125
+ }
126
+
127
+ .header-title p {
128
+ font-size: 0.75rem;
129
+ color: var(--fg-muted);
130
+ font-weight: 400;
131
+ }
132
+
133
+ .built-with {
134
+ font-size: 0.7rem;
135
+ color: var(--fg-dim);
136
+ text-decoration: none;
137
+ padding: 4px 10px;
138
+ border: 1px solid var(--border);
139
+ border-radius: var(--radius-xs);
140
+ transition: var(--transition);
141
+ }
142
+
143
+ .built-with:hover {
144
+ color: var(--accent-cyan);
145
+ border-color: var(--accent-cyan);
146
+ background: var(--glow-cyan);
147
+ }
148
+
149
+ /* Mode selector */
150
+ .mode-selector {
151
+ display: flex;
152
+ gap: 4px;
153
+ background: var(--bg-surface);
154
+ padding: 4px;
155
+ border-radius: var(--radius-sm);
156
+ border: 1px solid var(--border);
157
+ }
158
+
159
+ .mode-btn {
160
+ padding: 6px 14px;
161
+ border: none;
162
+ background: transparent;
163
+ color: var(--fg-muted);
164
+ font-family: var(--font-sans);
165
+ font-size: 0.75rem;
166
+ font-weight: 500;
167
+ border-radius: var(--radius-xs);
168
+ cursor: pointer;
169
+ transition: var(--transition);
170
+ display: flex;
171
+ align-items: center;
172
+ gap: 6px;
173
+ }
174
+
175
+ .mode-btn:hover { color: var(--fg); background: var(--bg-card); }
176
+
177
+ .mode-btn.active {
178
+ background: var(--accent-cyan);
179
+ color: var(--bg-deep);
180
+ font-weight: 600;
181
+ }
182
+
183
+ .mode-btn.active.mode-fast { background: var(--accent-orange); }
184
+ .mode-btn.active.mode-debug { background: var(--accent-purple); }
185
+
186
+ /* Status bar */
187
+ .status-bar {
188
+ display: flex;
189
+ gap: 16px;
190
+ flex-wrap: wrap;
191
+ margin-bottom: 24px;
192
+ }
193
+
194
+ .status-item {
195
+ display: flex;
196
+ align-items: center;
197
+ gap: 8px;
198
+ padding: 8px 14px;
199
+ background: var(--bg-card);
200
+ border: 1px solid var(--border);
201
+ border-radius: var(--radius-sm);
202
+ font-size: 0.78rem;
203
+ transition: var(--transition);
204
+ }
205
+
206
+ .status-dot {
207
+ width: 8px;
208
+ height: 8px;
209
+ border-radius: 50%;
210
+ background: var(--accent-cyan);
211
+ animation: dotBlink 2s ease-in-out infinite;
212
+ }
213
+
214
+ .status-dot.idle { background: var(--fg-dim); animation: none; }
215
+ .status-dot.running { background: var(--accent-cyan); }
216
+ .status-dot.error { background: var(--accent-red); animation: none; }
217
+
218
+ @keyframes dotBlink {
219
+ 0%, 100% { opacity: 1; }
220
+ 50% { opacity: 0.4; }
221
+ }
222
+
223
+ .status-label { color: var(--fg-muted); }
224
+ .status-value { color: var(--fg); font-weight: 600; }
225
+
226
+ /* Main grid */
227
+ .main-grid {
228
+ display: grid;
229
+ grid-template-columns: 1fr 1fr;
230
+ gap: 20px;
231
+ margin-bottom: 24px;
232
+ }
233
+
234
+ /* Cards */
235
+ .card {
236
+ background: var(--bg-card);
237
+ border: 1px solid var(--border);
238
+ border-radius: var(--radius);
239
+ overflow: hidden;
240
+ transition: var(--transition);
241
+ }
242
+
243
+ .card:hover {
244
+ border-color: rgba(6, 214, 160, 0.2);
245
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
246
+ }
247
+
248
+ .card-header {
249
+ display: flex;
250
+ align-items: center;
251
+ justify-content: space-between;
252
+ padding: 14px 18px;
253
+ border-bottom: 1px solid var(--border);
254
+ background: rgba(255, 255, 255, 0.01);
255
+ }
256
+
257
+ .card-header-left {
258
+ display: flex;
259
+ align-items: center;
260
+ gap: 10px;
261
+ }
262
+
263
+ .card-icon {
264
+ width: 32px;
265
+ height: 32px;
266
+ border-radius: var(--radius-xs);
267
+ display: flex;
268
+ align-items: center;
269
+ justify-content: center;
270
+ font-size: 14px;
271
+ }
272
+
273
+ .card-title {
274
+ font-size: 0.85rem;
275
+ font-weight: 600;
276
+ letter-spacing: -0.01em;
277
+ }
278
+
279
+ .card-badge {
280
+ font-size: 0.65rem;
281
+ padding: 2px 8px;
282
+ border-radius: 10px;
283
+ font-weight: 600;
284
+ text-transform: uppercase;
285
+ letter-spacing: 0.05em;
286
+ }
287
+
288
+ .card-body {
289
+ padding: 16px 18px;
290
+ }
291
+
292
+ /* Task input */
293
+ .task-input-section {
294
+ grid-column: 1 / -1;
295
+ }
296
+
297
+ .task-input-wrapper {
298
+ display: flex;
299
+ gap: 12px;
300
+ align-items: flex-end;
301
+ }
302
+
303
+ .input-group {
304
+ flex: 1;
305
+ display: flex;
306
+ flex-direction: column;
307
+ gap: 6px;
308
+ }
309
+
310
+ .input-group label {
311
+ font-size: 0.72rem;
312
+ color: var(--fg-muted);
313
+ font-weight: 500;
314
+ text-transform: uppercase;
315
+ letter-spacing: 0.06em;
316
+ }
317
+
318
+ .task-textarea {
319
+ width: 100%;
320
+ min-height: 80px;
321
+ padding: 12px 14px;
322
+ background: var(--bg-surface);
323
+ border: 1px solid var(--border);
324
+ border-radius: var(--radius-sm);
325
+ color: var(--fg);
326
+ font-family: var(--font-sans);
327
+ font-size: 0.85rem;
328
+ resize: vertical;
329
+ transition: var(--transition);
330
+ line-height: 1.5;
331
+ }
332
+
333
+ .task-textarea:focus {
334
+ outline: none;
335
+ border-color: var(--accent-cyan);
336
+ box-shadow: 0 0 0 3px var(--glow-cyan);
337
+ }
338
+
339
+ .task-textarea::placeholder { color: var(--fg-dim); }
340
+
341
+ .btn-execute {
342
+ padding: 12px 28px;
343
+ background: linear-gradient(135deg, var(--accent-cyan), var(--accent-teal));
344
+ color: var(--bg-deep);
345
+ border: none;
346
+ border-radius: var(--radius-sm);
347
+ font-family: var(--font-sans);
348
+ font-size: 0.85rem;
349
+ font-weight: 700;
350
+ cursor: pointer;
351
+ transition: var(--transition);
352
+ white-space: nowrap;
353
+ display: flex;
354
+ align-items: center;
355
+ gap: 8px;
356
+ min-height: 48px;
357
+ }
358
+
359
+ .btn-execute:hover {
360
+ transform: translateY(-1px);
361
+ box-shadow: 0 6px 24px rgba(6, 214, 160, 0.3);
362
+ }
363
+
364
+ .btn-execute:active { transform: translateY(0); }
365
+
366
+ .btn-execute:disabled {
367
+ opacity: 0.5;
368
+ cursor: not-allowed;
369
+ transform: none;
370
+ box-shadow: none;
371
+ }
372
+
373
+ .btn-secondary {
374
+ padding: 8px 16px;
375
+ background: var(--bg-surface);
376
+ color: var(--fg-muted);
377
+ border: 1px solid var(--border);
378
+ border-radius: var(--radius-xs);
379
+ font-family: var(--font-sans);
380
+ font-size: 0.75rem;
381
+ font-weight: 500;
382
+ cursor: pointer;
383
+ transition: var(--transition);
384
+ }
385
+
386
+ .btn-secondary:hover {
387
+ color: var(--fg);
388
+ border-color: var(--fg-dim);
389
+ }
390
+
391
+ /* Agent grid */
392
+ .agents-grid {
393
+ display: grid;
394
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
395
+ gap: 10px;
396
+ }
397
+
398
+ .agent-card {
399
+ background: var(--bg-surface);
400
+ border: 1px solid var(--border);
401
+ border-radius: var(--radius-sm);
402
+ padding: 12px;
403
+ cursor: pointer;
404
+ transition: var(--transition);
405
+ position: relative;
406
+ overflow: hidden;
407
+ }
408
+
409
+ .agent-card::before {
410
+ content: '';
411
+ position: absolute;
412
+ top: 0; left: 0; right: 0;
413
+ height: 2px;
414
+ background: var(--agent-color, var(--fg-dim));
415
+ opacity: 0;
416
+ transition: var(--transition);
417
+ }
418
+
419
+ .agent-card:hover::before,
420
+ .agent-card.active::before { opacity: 1; }
421
+
422
+ .agent-card:hover {
423
+ border-color: var(--agent-color, var(--border-active));
424
+ transform: translateY(-2px);
425
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
426
+ }
427
+
428
+ .agent-card.active {
429
+ border-color: var(--agent-color, var(--accent-cyan));
430
+ background: rgba(255, 255, 255, 0.03);
431
+ }
432
+
433
+ .agent-card.working {
434
+ animation: agentWorking 1.5s ease-in-out infinite;
435
+ }
436
+
437
+ @keyframes agentWorking {
438
+ 0%, 100% { box-shadow: 0 0 0 0 var(--glow-cyan); }
439
+ 50% { box-shadow: 0 0 16px 2px var(--glow-cyan); }
440
+ }
441
+
442
+ .agent-icon-wrap {
443
+ width: 36px;
444
+ height: 36px;
445
+ border-radius: var(--radius-xs);
446
+ display: flex;
447
+ align-items: center;
448
+ justify-content: center;
449
+ font-size: 16px;
450
+ margin-bottom: 8px;
451
+ color: var(--agent-color, var(--fg-muted));
452
+ background: rgba(255, 255, 255, 0.04);
453
+ }
454
+
455
+ .agent-name {
456
+ font-size: 0.72rem;
457
+ font-weight: 600;
458
+ margin-bottom: 2px;
459
+ color: var(--fg);
460
+ }
461
+
462
+ .agent-role {
463
+ font-size: 0.62rem;
464
+ color: var(--fg-muted);
465
+ line-height: 1.3;
466
+ }
467
+
468
+ .agent-status-dot {
469
+ position: absolute;
470
+ top: 8px;
471
+ right: 8px;
472
+ width: 6px;
473
+ height: 6px;
474
+ border-radius: 50%;
475
+ background: var(--fg-dim);
476
+ }
477
+
478
+ .agent-status-dot.active { background: var(--accent-cyan); animation: dotBlink 1s ease-in-out infinite; }
479
+ .agent-status-dot.done { background: var(--accent-lime); animation: none; }
480
+ .agent-status-dot.error { background: var(--accent-red); animation: none; }
481
+
482
+ /* Workflow pipeline */
483
+ .workflow-pipeline {
484
+ display: flex;
485
+ flex-direction: column;
486
+ gap: 0;
487
+ }
488
+
489
+ .workflow-step {
490
+ display: flex;
491
+ align-items: flex-start;
492
+ gap: 14px;
493
+ padding: 12px 0;
494
+ position: relative;
495
+ }
496
+
497
+ .workflow-step:not(:last-child)::after {
498
+ content: '';
499
+ position: absolute;
500
+ left: 15px;
501
+ top: 40px;
502
+ bottom: -4px;
503
+ width: 2px;
504
+ background: var(--border);
505
+ }
506
+
507
+ .workflow-step.active:not(:last-child)::after {
508
+ background: var(--accent-cyan);
509
+ box-shadow: 0 0 8px var(--glow-cyan);
510
+ }
511
+
512
+ .workflow-step.completed:not(:last-child)::after {
513
+ background: var(--accent-lime);
514
+ }
515
+
516
+ .step-indicator {
517
+ width: 32px;
518
+ height: 32px;
519
+ border-radius: 50%;
520
+ display: flex;
521
+ align-items: center;
522
+ justify-content: center;
523
+ font-size: 12px;
524
+ font-weight: 700;
525
+ background: var(--bg-surface);
526
+ border: 2px solid var(--border);
527
+ color: var(--fg-dim);
528
+ flex-shrink: 0;
529
+ transition: var(--transition);
530
+ z-index: 1;
531
+ }
532
+
533
+ .workflow-step.active .step-indicator {
534
+ border-color: var(--accent-cyan);
535
+ color: var(--accent-cyan);
536
+ background: var(--glow-cyan);
537
+ animation: stepPulse 2s ease-in-out infinite;
538
+ }
539
+
540
+ .workflow-step.completed .step-indicator {
541
+ border-color: var(--accent-lime);
542
+ color: var(--bg-deep);
543
+ background: var(--accent-lime);
544
+ }
545
+
546
+ .workflow-step.failed .step-indicator {
547
+ border-color: var(--accent-red);
548
+ color: var(--accent-red);
549
+ background: var(--glow-red);
550
+ }
551
+
552
+ @keyframes stepPulse {
553
+ 0%, 100% { box-shadow: 0 0 0 0 var(--glow-cyan); }
554
+ 50% { box-shadow: 0 0 12px 4px var(--glow-cyan); }
555
+ }
556
+
557
+ .step-content {
558
+ flex: 1;
559
+ min-width: 0;
560
+ }
561
+
562
+ .step-title {
563
+ font-size: 0.8rem;
564
+ font-weight: 600;
565
+ color: var(--fg);
566
+ margin-bottom: 2px;
567
+ }
568
+
569
+ .step-desc {
570
+ font-size: 0.7rem;
571
+ color: var(--fg-muted);
572
+ }
573
+
574
+ .step-detail {
575
+ margin-top: 8px;
576
+ padding: 10px 12px;
577
+ background: var(--bg-surface);
578
+ border: 1px solid var(--border);
579
+ border-radius: var(--radius-xs);
580
+ font-family: var(--font-mono);
581
+ font-size: 0.68rem;
582
+ color: var(--fg-muted);
583
+ line-height: 1.6;
584
+ max-height: 200px;
585
+ overflow-y: auto;
586
+ display: none;
587
+ }
588
+
589
+ .workflow-step.active .step-detail,
590
+ .workflow-step.completed .step-detail {
591
+ display: block;
592
+ }
593
+
594
+ /* Execution log */
595
+ .log-container {
596
+ max-height: 400px;
597
+ overflow-y: auto;
598
+ display: flex;
599
+ flex-direction: column;
600
+ gap: 4px;
601
+ }
602
+
603
+ .log-entry {
604
+ display: flex;
605
+ align-items: flex-start;
606
+ gap: 10px;
607
+ padding: 8px 10px;
608
+ background: var(--bg-surface);
609
+ border-radius: var(--radius-xs);
610
+ font-size: 0.72rem;
611
+ animation: logSlideIn 0.3s ease-out;
612
+ border-left: 3px solid transparent;
613
+ }
614
+
615
+ .log-entry.info { border-left-color: var(--accent-teal); }
616
+ .log-entry.success { border-left-color: var(--accent-lime); }
617
+ .log-entry.warning { border-left-color: var(--accent-orange); }
618
+ .log-entry.error { border-left-color: var(--accent-red); }
619
+ .log-entry.agent { border-left-color: var(--accent-purple); }
620
+
621
+ @keyframes logSlideIn {
622
+ from { opacity: 0; transform: translateX(-8px); }
623
+ to { opacity: 1; transform: translateX(0); }
624
+ }
625
+
626
+ .log-time {
627
+ color: var(--fg-dim);
628
+ font-family: var(--font-mono);
629
+ font-size: 0.65rem;
630
+ white-space: nowrap;
631
+ padding-top: 1px;
632
+ }
633
+
634
+ .log-agent {
635
+ color: var(--accent-cyan);
636
+ font-weight: 600;
637
+ white-space: nowrap;
638
+ }
639
+
640
+ .log-msg {
641
+ color: var(--fg-muted);
642
+ flex: 1;
643
+ min-width: 0;
644
+ word-break: break-word;
645
+ }
646
+
647
+ /* Knowledge base */
648
+ .kb-list {
649
+ display: flex;
650
+ flex-direction: column;
651
+ gap: 8px;
652
+ max-height: 350px;
653
+ overflow-y: auto;
654
+ }
655
+
656
+ .kb-entry {
657
+ padding: 10px 12px;
658
+ background: var(--bg-surface);
659
+ border: 1px solid var(--border);
660
+ border-radius: var(--radius-xs);
661
+ transition: var(--transition);
662
+ }
663
+
664
+ .kb-entry:hover {
665
+ border-color: rgba(168, 85, 247, 0.3);
666
+ }
667
+
668
+ .kb-rule {
669
+ font-family: var(--font-mono);
670
+ font-size: 0.68rem;
671
+ color: var(--accent-purple);
672
+ margin-bottom: 4px;
673
+ }
674
+
675
+ .kb-meta {
676
+ display: flex;
677
+ gap: 12px;
678
+ font-size: 0.62rem;
679
+ color: var(--fg-dim);
680
+ }
681
+
682
+ .kb-score {
683
+ color: var(--accent-lime);
684
+ font-weight: 600;
685
+ }
686
+
687
+ /* JSON viewer */
688
+ .json-viewer {
689
+ font-family: var(--font-mono);
690
+ font-size: 0.7rem;
691
+ line-height: 1.6;
692
+ color: var(--fg-muted);
693
+ max-height: 300px;
694
+ overflow-y: auto;
695
+ padding: 12px;
696
+ background: var(--bg-surface);
697
+ border-radius: var(--radius-xs);
698
+ border: 1px solid var(--border);
699
+ white-space: pre-wrap;
700
+ word-break: break-all;
701
+ }
702
+
703
+ .json-key { color: var(--accent-cyan); }
704
+ .json-string { color: var(--accent-orange); }
705
+ .json-number { color: var(--accent-purple); }
706
+ .json-bool { color: var(--accent-pink); }
707
+ .json-null { color: var(--fg-dim); }
708
+
709
+ /* Definition of Done */
710
+ .dod-list {
711
+ display: flex;
712
+ flex-direction: column;
713
+ gap: 6px;
714
+ }
715
+
716
+ .dod-item {
717
+ display: flex;
718
+ align-items: center;
719
+ gap: 10px;
720
+ padding: 8px 12px;
721
+ background: var(--bg-surface);
722
+ border-radius: var(--radius-xs);
723
+ font-size: 0.78rem;
724
+ transition: var(--transition);
725
+ }
726
+
727
+ .dod-check {
728
+ width: 20px;
729
+ height: 20px;
730
+ border-radius: 50%;
731
+ display: flex;
732
+ align-items: center;
733
+ justify-content: center;
734
+ font-size: 10px;
735
+ border: 2px solid var(--border);
736
+ color: transparent;
737
+ transition: var(--transition);
738
+ flex-shrink: 0;
739
+ }
740
+
741
+ .dod-item.checked .dod-check {
742
+ border-color: var(--accent-lime);
743
+ background: var(--accent-lime);
744
+ color: var(--bg-deep);
745
+ }
746
+
747
+ .dod-item.checked {
748
+ color: var(--fg-muted);
749
+ }
750
+
751
+ .dod-item.checked .dod-text {
752
+ text-decoration: line-through;
753
+ }
754
+
755
+ .dod-text { color: var(--fg); }
756
+
757
+ /* Task decomposition */
758
+ .task-tree {
759
+ display: flex;
760
+ flex-direction: column;
761
+ gap: 6px;
762
+ }
763
+
764
+ .task-node {
765
+ display: flex;
766
+ align-items: center;
767
+ gap: 10px;
768
+ padding: 8px 12px;
769
+ background: var(--bg-surface);
770
+ border: 1px solid var(--border);
771
+ border-radius: var(--radius-xs);
772
+ font-size: 0.75rem;
773
+ transition: var(--transition);
774
+ animation: taskAppear 0.4s ease-out;
775
+ }
776
+
777
+ @keyframes taskAppear {
778
+ from { opacity: 0; transform: translateY(-8px); }
779
+ to { opacity: 1; transform: translateY(0); }
780
+ }
781
+
782
+ .task-node:hover { border-color: var(--accent-teal); }
783
+
784
+ .task-status-icon {
785
+ font-size: 10px;
786
+ width: 20px;
787
+ height: 20px;
788
+ display: flex;
789
+ align-items: center;
790
+ justify-content: center;
791
+ border-radius: 50%;
792
+ flex-shrink: 0;
793
+ }
794
+
795
+ .task-status-icon.pending { color: var(--fg-dim); }
796
+ .task-status-icon.in-progress { color: var(--accent-orange); animation: dotBlink 1s ease-in-out infinite; }
797
+ .task-status-icon.done { color: var(--accent-lime); }
798
+ .task-status-icon.failed { color: var(--accent-red); }
799
+
800
+ .task-agent-tag {
801
+ font-size: 0.62rem;
802
+ padding: 2px 8px;
803
+ border-radius: 10px;
804
+ background: rgba(6, 214, 160, 0.1);
805
+ color: var(--accent-cyan);
806
+ font-weight: 600;
807
+ white-space: nowrap;
808
+ }
809
+
810
+ .task-desc {
811
+ flex: 1;
812
+ color: var(--fg);
813
+ min-width: 0;
814
+ overflow: hidden;
815
+ text-overflow: ellipsis;
816
+ white-space: nowrap;
817
+ }
818
+
819
+ /* Communication feed */
820
+ .comm-feed {
821
+ display: flex;
822
+ flex-direction: column;
823
+ gap: 8px;
824
+ max-height: 350px;
825
+ overflow-y: auto;
826
+ }
827
+
828
+ .comm-msg {
829
+ padding: 10px 12px;
830
+ background: var(--bg-surface);
831
+ border: 1px solid var(--border);
832
+ border-radius: var(--radius-xs);
833
+ animation: logSlideIn 0.3s ease-out;
834
+ }
835
+
836
+ .comm-msg-header {
837
+ display: flex;
838
+ align-items: center;
839
+ justify-content: space-between;
840
+ margin-bottom: 6px;
841
+ }
842
+
843
+ .comm-from {
844
+ font-size: 0.72rem;
845
+ font-weight: 600;
846
+ color: var(--accent-cyan);
847
+ }
848
+
849
+ .comm-status {
850
+ font-size: 0.6rem;
851
+ padding: 2px 6px;
852
+ border-radius: 8px;
853
+ font-weight: 600;
854
+ text-transform: uppercase;
855
+ }
856
+
857
+ .comm-status.done { background: rgba(132, 204, 22, 0.15); color: var(--accent-lime); }
858
+ .comm-status.in_progress { background: rgba(245, 158, 11, 0.15); color: var(--accent-orange); }
859
+ .comm-status.pending { background: rgba(74, 85, 104, 0.3); color: var(--fg-dim); }
860
+ .comm-status.failed { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
861
+
862
+ .comm-body {
863
+ font-size: 0.7rem;
864
+ color: var(--fg-muted);
865
+ font-family: var(--font-mono);
866
+ line-height: 1.5;
867
+ }
868
+
869
+ /* Full-width sections */
870
+ .full-width {
871
+ grid-column: 1 / -1;
872
+ }
873
+
874
+ /* Tab system */
875
+ .tabs {
876
+ display: flex;
877
+ gap: 2px;
878
+ background: var(--bg-surface);
879
+ padding: 3px;
880
+ border-radius: var(--radius-xs);
881
+ }
882
+
883
+ .tab-btn {
884
+ padding: 5px 12px;
885
+ border: none;
886
+ background: transparent;
887
+ color: var(--fg-muted);
888
+ font-family: var(--font-sans);
889
+ font-size: 0.7rem;
890
+ font-weight: 500;
891
+ border-radius: var(--radius-xs);
892
+ cursor: pointer;
893
+ transition: var(--transition);
894
+ }
895
+
896
+ .tab-btn:hover { color: var(--fg); }
897
+ .tab-btn.active { background: var(--bg-card); color: var(--fg); font-weight: 600; }
898
+
899
+ .tab-content { display: none; }
900
+ .tab-content.active { display: block; }
901
+
902
+ /* Progress bar */
903
+ .progress-bar {
904
+ width: 100%;
905
+ height: 4px;
906
+ background: var(--bg-surface);
907
+ border-radius: 2px;
908
+ overflow: hidden;
909
+ margin-top: 8px;
910
+ }
911
+
912
+ .progress-fill {
913
+ height: 100%;
914
+ background: linear-gradient(90deg, var(--accent-cyan), var(--accent-teal));
915
+ border-radius: 2px;
916
+ transition: width 0.5s ease;
917
+ width: 0%;
918
+ }
919
+
920
+ /* Notification toast */
921
+ .toast-container {
922
+ position: fixed;
923
+ top: 20px;
924
+ right: 20px;
925
+ z-index: 1000;
926
+ display: flex;
927
+ flex-direction: column;
928
+ gap: 8px;
929
+ }
930
+
931
+ .toast {
932
+ padding: 12px 18px;
933
+ border-radius: var(--radius-sm);
934
+ font-size: 0.78rem;
935
+ font-weight: 500;
936
+ animation: toastIn 0.4s ease-out, toastOut 0.4s ease-in 2.6s forwards;
937
+ display: flex;
938
+ align-items: center;
939
+ gap: 8px;
940
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
941
+ }
942
+
943
+ .toast.success { background: var(--accent-lime); color: var(--bg-deep); }
944
+ .toast.error { background: var(--accent-red); color: #fff; }
945
+ .toast.info { background: var(--accent-teal); color: var(--bg-deep); }
946
+ .toast.warning { background: var(--accent-orange); color: var(--bg-deep); }
947
+
948
+ @keyframes toastIn {
949
+ from { opacity: 0; transform: translateX(40px); }
950
+ to { opacity: 1; transform: translateX(0); }
951
+ }
952
+
953
+ @keyframes toastOut {
954
+ from { opacity: 1; transform: translateX(0); }
955
+ to { opacity: 0; transform: translateX(40px); }
956
+ }
957
+
958
+ /* Empty state */
959
+ .empty-state {
960
+ text-align: center;
961
+ padding: 30px 20px;
962
+ color: var(--fg-dim);
963
+ }
964
+
965
+ .empty-state i {
966
+ font-size: 28px;
967
+ margin-bottom: 10px;
968
+ display: block;
969
+ opacity: 0.5;
970
+ }
971
+
972
+ .empty-state p {
973
+ font-size: 0.78rem;
974
+ }
975
+
976
+ /* Responsive */
977
+ @media (max-width: 1024px) {
978
+ .main-grid {
979
+ grid-template-columns: 1fr;
980
+ }
981
+ }
982
+
983
+ @media (max-width: 768px) {
984
+ .app-container { padding: 0 12px; }
985
+ header { padding: 14px 0; }
986
+ .header-title h1 { font-size: 1.1rem; }
987
+ .agents-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
988
+ .task-input-wrapper { flex-direction: column; }
989
+ .btn-execute { width: 100%; justify-content: center; }
990
+ .status-bar { gap: 8px; }
991
+ .status-item { padding: 6px 10px; font-size: 0.72rem; }
992
+ }
993
+
994
+ @media (max-width: 480px) {
995
+ .agents-grid { grid-template-columns: repeat(2, 1fr); }
996
+ .mode-selector { flex-wrap: wrap; }
997
+ }
998
+
999
+ /* Reduced motion */
1000
+ @media (prefers-reduced-motion: reduce) {
1001
+ *, *::before, *::after {
1002
+ animation-duration: 0.01ms !important;
1003
+ transition-duration: 0.01ms !important;
1004
+ }
1005
+ }
1006
+
1007
+ /* Particle canvas */
1008
+ #particle-canvas {
1009
+ position: fixed;
1010
+ top: 0; left: 0;
1011
+ width: 100%;
1012
+ height: 100%;
1013
+ pointer-events: none;
1014
+ z-index: 0;
1015
+ opacity: 0.4;
1016
+ }
1017
+ </style>
1018
+ </head>
1019
+ <body>
1020
+
1021
+ <canvas id="particle-canvas" aria-hidden="true"></canvas>
1022
+
1023
+ <div class="toast-container" id="toastContainer"></div>
1024
+
1025
+ <div class="app-container">
1026
+ <header>
1027
+ <div class="header-left">
1028
+ <div class="logo-icon"><i class="fas fa-brain"></i></div>
1029
+ <div class="header-title">
1030
+ <h1>Autonomous AI Dev System</h1>
1031
+ <p>Self-organizing multi-agent engineering pipeline</p>
1032
+ </div>
1033
+ </div>
1034
+ <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
1035
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with" rel="noopener">Built with anycoder</a>
1036
+ <div class="mode-selector">
1037
+ <button class="mode-btn active" data-mode="safe" onclick="setMode('safe')">
1038
+ <i class="fas fa-shield-halved"></i> Safe
1039
+ </button>
1040
+ <button class="mode-btn mode-fast" data-mode="fast" onclick="setMode('fast')">
1041
+ <i class="fas fa-bolt"></i> Fast
1042
+ </button>
1043
+ <button class="mode-btn mode-debug" data-mode="debug" onclick="setMode('debug')">
1044
+ <i class="fas fa-bug"></i> Debug
1045
+ </button>
1046
+ </div>
1047
+ </div>
1048
+ </header>
1049
+
1050
+ <!-- Status bar -->
1051
+ <div class="status-bar">
1052
+ <div class="status-item">
1053
+ <div class="status-dot idle" id="systemDot"></div>
1054
+ <span class="status-label">System</span>
1055
+ <span class="status-value" id="systemStatus">Idle</span>
1056
+ </div>
1057
+ <div class="status-item">
1058
+ <i class="fas fa-layer-group" style="color:var(--accent-teal);font-size:12px;"></i>
1059
+ <span class="status-label">Agents</span>
1060
+ <span class="status-value">11</span>
1061
+ </div>
1062
+ <div class="status-item">
1063
+ <i class="fas fa-list-check" style="color:var(--accent-orange);font-size:12px;"></i>
1064
+ <span class="status-label">Tasks</span>
1065
+ <span class="status-value" id="taskCount">0</span>
1066
+ </div>
1067
+ <div class="status-item">
1068
+ <i class="fas fa-book" style="color:var(--accent-purple);font-size:12px;"></i>
1069
+ <span class="status-label">Knowledge</span>
1070
+ <span class="status-value" id="kbCount">3</span>
1071
+ </div>
1072
+ <div class="status-item">
1073
+ <i class="fas fa-clock" style="color:var(--accent-lime);font-size:12px;"></i>
1074
+ <span class="status-label">Elapsed</span>
1075
+ <span class="status-value" id="elapsedTime">0s</span>
1076
+ </div>
1077
+ <div class="status-item" style="margin-left:auto;">
1078
+ <div class="progress-bar" style="width:120px;">
1079
+ <div class="progress-fill" id="progressFill"></div>
1080
+ </div>
1081
+ <span class="status-value" id="progressPct">0%</span>
1082
+ </div>
1083
+ </div>
1084
+
1085
+ <div class="main-grid">
1086
+ <!-- Task Input -->
1087
+ <section class="card task-input-section" aria-label="Task Input">
1088
+ <div class="card-header">
1089
+ <div class="card-header-left">
1090
+ <div class="card-icon" style="background:var(--glow-cyan);color:var(--accent-cyan);">
1091
+ <i class="fas fa-terminal"></i>
1092
+ </div>
1093
+ <span class="card-title">Task Input</span>
1094
+ </div>
1095
+ <span class="card-badge" style="background:var(--glow-cyan);color:var(--accent-cyan);">Ready</span>
1096
+ </div>
1097
+ <div class="card-body">
1098
+ <div class="task-input-wrapper">
1099
+ <div class="input-group" style="flex:1;">
1100
+ <label for="taskInput">Describe your software task</label>
1101
+ <textarea id="taskInput" class="task-textarea" placeholder="Example: Build a REST API for a task management app with user authentication, CRUD operations for tasks, and real-time notifications..."></textarea>
1102
+ </div>
1103
+ <div style="display:flex;flex-direction:column;gap:8px;">
1104
+ <button class="btn-execute" id="executeBtn" onclick="startExecution()">
1105
+ <i class="fas fa-play"></i> Execute
1106
+ </button>
1107
+ <button class="btn-secondary" onclick="resetSystem()">
1108
+ <i class="fas fa-rotate-right"></i> Reset
1109
+ </button>
1110
+ </div>
1111
+ </div>
1112
+ </div>
1113
+ </section>
1114
+
1115
+ <!-- Agent Grid -->
1116
+ <section class="card full-width" aria-label="Agent Team">
1117
+ <div class="card-header">
1118
+ <div class="card-header-left">
1119
+ <div class="card-icon" style="background:rgba(168,85,247,0.15);color:var(--accent-purple);">
1120
+ <i class="fas fa-users-gear"></i>
1121
+ </div>
1122
+ <span class="card-title">Agent Team</span>
1123
+ </div>
1124
+ <span class="card-badge" style="background:rgba(168,85,247,0.15);color:var(--accent-purple);">11 Agents</span>
1125
+ </div>
1126
+ <div class="card-body">
1127
+ <div class="agents-grid" id="agentsGrid"></div>
1128
+ </div>
1129
+ </section>
1130
+
1131
+ <!-- Workflow Pipeline -->
1132
+ <section class="card" aria-label="Workflow Pipeline">
1133
+ <div class="card-header">
1134
+ <div class="card-header-left">
1135
+ <div class="card-icon" style="background:rgba(14,165,233,0.15);color:var(--accent-teal);">
1136
+ <i class="fas fa-diagram-project"></i>
1137
+ </div>
1138
+ <span class="card-title">Workflow Pipeline</span>
1139
+ </div>
1140
+ </div>
1141
+ <div class="card-body">
1142
+ <div class="workflow-pipeline" id="workflowPipeline"></div>
1143
+ </div>
1144
+ </section>
1145
+
1146
+ <!-- Task Decomposition -->
1147
+ <section class="card" aria-label="Task Decomposition">
1148
+ <div class="card-header">
1149
+ <div class="card-header-left">
1150
+ <div class="card-icon" style="background:var(--glow-orange);color:var(--accent-orange);">
1151
+ <i class="fas fa-sitemap"></i>
1152
+ </div>
1153
+ <span class="card-title">Task Decomposition</span>
1154
+ </div>
1155
+ <div class="tabs">
1156
+ <button class="tab-btn active" onclick="switchTab(this, 'tasksTab')">Tasks</button>
1157
+ <button class="tab-btn" onclick="switchTab(this, 'commTab')">Comm</button>
1158
+ </div>
1159
+ </div>
1160
+ <div class="card-body">
1161
+ <div id="tasksTab" class="tab-content active">
1162
+ <div class="task-tree" id="taskTree">
1163
+ <div class="empty-state">
1164
+ <i class="fas fa-puzzle-piece"></i>
1165
+ <p>Submit a task to see decomposition</p>
1166
+ </div>
1167
+ </div>
1168
+ </div>
1169
+ <div id="commTab" class="tab-content">
1170
+ <div class="comm-feed" id="commFeed">
1171
+ <div class="empty-state">
1172
+ <i class="fas fa-comments"></i>
1173
+ <p>Agent communications will appear here</p>
1174
+ </div>
1175
+ </div>
1176
+ </div>
1177
+ </div>
1178
+ </section>
1179
+
1180
+ <!-- Execution Log -->
1181
+ <section class="card" aria-label="Execution Log">
1182
+ <div class="card-header">
1183
+ <div class="card-header-left">
1184
+ <div class="card-icon" style="background:rgba(132,204,22,0.15);color:var(--accent-lime);">
1185
+ <i class="fas fa-scroll"></i>
1186
+ </div>
1187
+ <span class="card-title">Execution Log</span>
1188
+ </div>
1189
+ <button class="btn-secondary" onclick="clearLog()">
1190
+ <i class="fas fa-trash-can"></i> Clear
1191
+ </button>
1192
+ </div>
1193
+ <div class="card-body">
1194
+ <div class="log-container" id="logContainer">
1195
+ <div class="empty-state">
1196
+ <i class="fas fa-file-lines"></i>
1197
+ <p>Logs will appear during execution</p>
1198
+ </div>
1199
+ </div>
1200
+ </div>
1201
+ </section>
1202
+
1203
+ <!-- Knowledge Base & JSON & DoD -->
1204
+ <section class="card" aria-label="Knowledge & Validation">
1205
+ <div class="card-header">
1206
+ <div class="card-header-left">
1207
+ <div class="card-icon" style="background:rgba(168,85,247,0.15);color:var(--accent-purple);">
1208
+ <i class="fas fa-brain"></i>
1209
+ </div>
1210
+ <span class="card-title">Knowledge & Validation</span>
1211
+ </div>
1212
+ <div class="tabs">
1213
+ <button class="tab-btn active" onclick="switchTab(this, 'kbTab')">Knowledge</button>
1214
+ <button class="tab-btn" onclick="switchTab(this, 'jsonTab')">JSON</button>
1215
+ <button class="tab-btn" onclick="switchTab(this, 'dodTab')">DoD</button>
1216
+ </div>
1217
+ </div>
1218
+ <div class="card-body">
1219
+ <div id="kbTab" class="tab-content active">
1220
+ <div class="kb-list" id="kbList"></div>
1221
+ </div>
1222
+ <div id="jsonTab" class="tab-content">
1223
+ <div class="json-viewer" id="jsonViewer">{
1224
+ "message": "Submit a task to see agent communication JSON"
1225
+ }</div>
1226
+ </div>
1227
+ <div id="dodTab" class="tab-content">
1228
+ <div class="dod-list" id="dodList"></div>
1229
+ </div>
1230
+ </div>
1231
+ </section>
1232
+ </div>
1233
+ </div>
1234
+
1235
+ <script>
1236
+ // ========================================
1237
+ // Agent definitions
1238
+ // ========================================
1239
+ const AGENTS = [
1240
+ { id: 'pm', name: 'Product Manager', icon: 'fa-clipboard-list', color: '#06d6a0', role: 'Requirements & priorities' },
1241
+ { id: 'arch', name: 'Architect', icon: 'fa-drafting-compass', color: '#0ea5e9', role: 'System design & APIs' },
1242
+ { id: 'planner', name: 'Task Planner', icon: 'fa-list-ol', color: '#a855f7', role: 'Task decomposition' },
1243
+ { id: 'backend', name: 'Backend Dev', icon: 'fa-server', color: '#f59e0b', role: 'Server logic & APIs' },
1244
+ { id: 'frontend', name: 'Frontend Dev', icon: