neoagent 1.4.1 → 1.4.4

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.
@@ -2,7 +2,11 @@
2
2
  NeoAgent · App Layout · v2
3
3
  ══════════════════════════════════════════ */
4
4
 
5
- #app { display: flex; height: 100vh; overflow: hidden; }
5
+ #app {
6
+ display: flex;
7
+ height: 100vh;
8
+ overflow: hidden;
9
+ }
6
10
 
7
11
  /* ── SIDEBAR ── */
8
12
 
@@ -10,41 +14,68 @@
10
14
  width: var(--sidebar-width);
11
15
  background: var(--bg-1);
12
16
  border-right: 1px solid var(--border);
13
- display: flex; flex-direction: column;
14
- flex-shrink: 0; overflow: hidden;
17
+ display: flex;
18
+ flex-direction: column;
19
+ flex-shrink: 0;
20
+ overflow: hidden;
15
21
  }
16
22
 
17
23
  .sidebar-header {
18
- display: flex; align-items: center;
24
+ display: flex;
25
+ align-items: center;
19
26
  padding: 16px 14px 14px;
20
27
  border-bottom: 1px solid var(--border);
21
28
  flex-shrink: 0;
22
29
  }
23
30
 
24
- .sidebar-logo { display: flex; align-items: center; gap: 10px; }
31
+ .sidebar-logo {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: 10px;
35
+ }
25
36
 
26
37
  .logo-icon-sm {
27
- width: 30px; height: 30px;
38
+ width: 30px;
39
+ height: 30px;
28
40
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
29
41
  border-radius: 8px;
30
- display: flex; align-items: center; justify-content: center;
31
- box-shadow: 0 2px 12px rgba(99,102,241,.4); flex-shrink: 0;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ box-shadow: 0 2px 12px rgba(99, 102, 241, .4);
46
+ flex-shrink: 0;
47
+ }
48
+
49
+ .logo-icon-sm svg {
50
+ width: 16px;
51
+ height: 16px;
52
+ stroke: white;
32
53
  }
33
- .logo-icon-sm svg { width: 16px; height: 16px; stroke: white; }
34
54
 
35
55
  .logo-text {
36
- font-weight: 700; font-size: 15px;
37
- background: linear-gradient(135deg, #eaeaf4, #a5a5c8);
38
- -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
56
+ font-weight: 700;
57
+ font-size: 15px;
58
+ background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
59
+ -webkit-background-clip: text;
60
+ -webkit-text-fill-color: transparent;
61
+ background-clip: text;
39
62
  }
40
63
 
41
64
  /* main nav fills available space */
42
65
  .sidebar-nav {
43
- flex: 1; overflow-y: auto; padding: 8px;
44
- display: flex; flex-direction: column; gap: 1px;
66
+ flex: 1;
67
+ overflow-y: auto;
68
+ padding: 8px;
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: 1px;
45
72
  }
46
73
 
47
- .sidebar-section { flex: 1; overflow-y: auto; padding: 10px 8px; }
74
+ .sidebar-section {
75
+ flex: 1;
76
+ overflow-y: auto;
77
+ padding: 10px 8px;
78
+ }
48
79
 
49
80
  .sidebar-label {
50
81
  font-size: 11px;
@@ -93,18 +124,29 @@
93
124
  }
94
125
 
95
126
  .sidebar-btn {
96
- display: flex; align-items: center; gap: 10px;
97
- width: 100%; padding: 8px 10px;
98
- border: none; background: transparent;
99
- color: var(--text-secondary); border-radius: var(--radius);
100
- cursor: pointer; font-size: 13px; font-weight: 500;
127
+ display: flex;
128
+ align-items: center;
129
+ gap: 10px;
130
+ width: 100%;
131
+ padding: 8px 10px;
132
+ border: none;
133
+ background: transparent;
134
+ color: var(--text-secondary);
135
+ border-radius: var(--radius);
136
+ cursor: pointer;
137
+ font-size: 13px;
138
+ font-weight: 500;
101
139
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
102
- text-align: left; position: relative;
140
+ text-align: left;
141
+ position: relative;
142
+ }
143
+
144
+ .sidebar-btn svg {
145
+ flex-shrink: 0;
103
146
  }
104
- .sidebar-btn svg { flex-shrink: 0; }
105
147
 
106
148
  .sidebar-btn:hover {
107
- background: rgba(255,255,255,.05);
149
+ background: rgba(255, 255, 255, .05);
108
150
  color: var(--text-primary);
109
151
  transform: translateX(2px);
110
152
  }
@@ -113,45 +155,81 @@
113
155
  background: var(--accent-muted);
114
156
  color: var(--accent);
115
157
  }
158
+
116
159
  .sidebar-btn.active::before {
117
160
  content: '';
118
- position: absolute; left: 0; top: 22%; bottom: 22%;
119
- width: 3px; border-radius: 0 3px 3px 0;
120
- background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
161
+ position: absolute;
162
+ left: 0;
163
+ top: 22%;
164
+ bottom: 22%;
165
+ width: 3px;
166
+ border-radius: 0 3px 3px 0;
167
+ background: var(--accent);
168
+ box-shadow: 0 0 8px var(--accent-glow);
121
169
  }
122
170
 
123
- .sidebar-divider { height: 1px; background: var(--border); margin: 4px 0; }
171
+
172
+ .sidebar-divider {
173
+ height: 1px;
174
+ background: var(--border);
175
+ margin: 4px 0;
176
+ }
124
177
 
125
178
  /* ── MAIN CONTENT ── */
126
179
 
127
180
  .main-content {
128
- flex: 1; overflow: hidden;
129
- display: flex; flex-direction: column;
181
+ flex: 1;
182
+ overflow: hidden;
183
+ display: flex;
184
+ flex-direction: column;
130
185
  background: var(--bg-0);
131
186
  }
132
187
 
133
188
  .page {
134
- display: none; flex: 1; overflow: hidden; flex-direction: column;
189
+ display: none;
190
+ flex: 1;
191
+ overflow: hidden;
192
+ flex-direction: column;
135
193
  }
136
194
 
137
195
  .page.active {
138
196
  display: flex;
139
- animation: pageFadeIn var(--t-mid, 200ms) cubic-bezier(.16,1,.3,1) both;
197
+ animation: pageFadeIn var(--t-mid, 200ms) cubic-bezier(.16, 1, .3, 1) both;
140
198
  }
141
199
 
142
200
  @keyframes pageFadeIn {
143
- from { opacity: 0; transform: translateY(6px); }
144
- to { opacity: 1; transform: translateY(0); }
201
+ from {
202
+ opacity: 0;
203
+ transform: translateY(6px);
204
+ }
205
+
206
+ to {
207
+ opacity: 1;
208
+ transform: translateY(0);
209
+ }
145
210
  }
146
211
 
147
212
  .page-header {
148
- display: flex; align-items: center; justify-content: space-between;
149
- padding: 16px 24px; border-bottom: 1px solid var(--border);
150
- flex-shrink: 0; background: var(--bg-0);
213
+ display: flex;
214
+ align-items: center;
215
+ justify-content: space-between;
216
+ padding: 16px 24px;
217
+ border-bottom: 1px solid var(--border);
218
+ flex-shrink: 0;
219
+ background: var(--bg-0);
151
220
  }
152
- .page-header h1 { font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
153
221
 
154
- .page-body { flex: 1; overflow-y: auto; padding: 24px; }
222
+ .page-header h1 {
223
+ font-size: 18px;
224
+ font-weight: 600;
225
+ letter-spacing: -.2px;
226
+ }
227
+
228
+ .page-body {
229
+ flex: 1;
230
+ overflow-y: auto;
231
+ padding: 24px;
232
+ }
155
233
 
156
234
  /* ── Chat ── */
157
235
 
@@ -161,7 +239,7 @@
161
239
  height: 100%;
162
240
  }
163
241
 
164
- .activity-badge {
242
+ .world-badge {
165
243
  margin-left: auto;
166
244
  width: 7px;
167
245
  height: 7px;
@@ -169,264 +247,411 @@
169
247
  background: var(--accent);
170
248
  animation: pulse 1.5s ease-in-out infinite;
171
249
  flex-shrink: 0;
172
- box-shadow: 0 0 6px var(--accent-glow, rgba(99,102,241,.4));
250
+ box-shadow: 0 0 6px var(--accent-glow, rgba(99, 102, 241, .4));
173
251
  }
174
- .activity-badge.hidden { display: none; }
175
252
 
176
- /* ── Activity UI ── */
253
+ .world-badge.hidden {
254
+ display: none;
255
+ }
177
256
 
178
- .activity-container {
179
- display: flex; height: 100%; width: 100%; overflow: hidden;
180
- background: var(--bg-0);
257
+ /* ── World UI ── */
258
+
259
+ .world-page {
260
+ height: 100%;
261
+ overflow: auto;
262
+ padding: 24px;
263
+ background:
264
+ linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 86%, white 14%), var(--bg-0)),
265
+ radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 35%);
266
+ }
267
+
268
+ .world-pill {
269
+ display: inline-flex;
270
+ align-items: center;
271
+ min-height: 34px;
272
+ padding: 0 12px;
273
+ border-radius: 999px;
274
+ border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
275
+ background: color-mix(in srgb, var(--bg-0) 68%, transparent);
276
+ color: var(--text-primary);
277
+ font-size: 12px;
278
+ font-weight: 700;
279
+ letter-spacing: 0.04em;
280
+ text-transform: uppercase;
281
+ backdrop-filter: blur(10px);
282
+ }
283
+
284
+ .world-pill.subtle {
285
+ border-color: color-mix(in srgb, var(--info) 18%, var(--border));
286
+ color: var(--text-secondary);
181
287
  }
182
288
 
183
- .activity-sidebar {
184
- width: 280px; flex-shrink: 0;
289
+ .world-layout {
290
+ display: grid;
291
+ grid-template-columns: minmax(0, 1.9fr) minmax(310px, 0.85fr);
292
+ gap: 20px;
293
+ min-height: 0;
294
+ align-items: start;
295
+ }
296
+
297
+ .world-stage-card,
298
+ .world-panel {
299
+ background: color-mix(in srgb, var(--bg-card) 90%, transparent);
300
+ border: 1px solid var(--border);
301
+ border-radius: 24px;
302
+ box-shadow: var(--shadow);
303
+ }
304
+
305
+ .world-stage-card {
306
+ padding: 14px;
307
+ min-width: 0;
308
+ overflow: hidden;
309
+ }
310
+
311
+ .world-stage-frame {
312
+ position: relative;
313
+ border-radius: 20px;
314
+ overflow: hidden;
185
315
  background: var(--bg-1);
186
- border-right: 1px solid var(--border);
187
- display: flex; flex-direction: column;
316
+ border: 1px solid var(--border);
317
+ min-height: 560px;
318
+ aspect-ratio: 16 / 9;
319
+ width: 100%;
320
+ max-width: 100%;
188
321
  }
189
322
 
190
- .activity-sidebar-header {
191
- padding: 16px; border-bottom: 1px solid var(--border);
192
- display: flex; justify-content: space-between; align-items: center;
193
- flex-shrink: 0;
323
+ .world-canvas {
324
+ display: block;
325
+ width: 100%;
326
+ height: 100%;
327
+ min-height: 560px;
328
+ max-width: 100%;
329
+ image-rendering: pixelated;
330
+ image-rendering: crisp-edges;
194
331
  }
195
332
 
196
- .activity-sidebar-header h2 {
197
- font-size: 14px; font-weight: 600; color: var(--text-primary);
198
- text-transform: uppercase; letter-spacing: 0.5px;
333
+ .world-stage-overlay {
334
+ position: absolute;
335
+ left: 16px;
336
+ right: 16px;
337
+ top: 16px;
338
+ display: flex;
339
+ justify-content: space-between;
340
+ align-items: flex-start;
341
+ gap: 12px;
342
+ pointer-events: none;
199
343
  }
200
344
 
201
- .activity-sidebar-list {
202
- flex: 1; overflow-y: auto; padding: 12px;
203
- display: flex; flex-direction: column; gap: 4px;
345
+ .world-overlay-group {
346
+ display: flex;
347
+ gap: 10px;
348
+ flex-wrap: wrap;
204
349
  }
205
350
 
206
- .activity-empty-text {
207
- text-align: center; color: var(--text-muted); font-size: 13px; padding: 20px;
351
+ .world-overlay-chip {
352
+ display: flex;
353
+ flex-direction: column;
354
+ gap: 3px;
355
+ min-width: 0;
356
+ padding: 10px 12px;
357
+ border-radius: 16px;
358
+ background: color-mix(in srgb, var(--bg-0) 78%, transparent);
359
+ border: 1px solid var(--border);
360
+ backdrop-filter: blur(10px);
208
361
  }
209
362
 
210
- .ahp-run-card {
211
- padding: 12px; border-radius: var(--radius-lg); cursor: pointer;
212
- border: 1px solid transparent; background: transparent;
213
- transition: all 0.15s ease;
363
+ .world-overlay-label {
364
+ font-size: 10px;
365
+ letter-spacing: 0.14em;
366
+ text-transform: uppercase;
367
+ color: var(--text-muted);
214
368
  }
215
369
 
216
- .ahp-run-card:hover { background: var(--bg-hover); border-color: var(--border); }
217
- .ahp-run-card.active { background: var(--bg-card); border-color: var(--accent); box-shadow: 0 2px 12px rgba(99,102,241,0.15); }
370
+ .world-overlay-value {
371
+ color: var(--text-primary);
372
+ font-size: 13px;
373
+ font-weight: 600;
374
+ max-width: 320px;
375
+ white-space: nowrap;
376
+ overflow: hidden;
377
+ text-overflow: ellipsis;
378
+ }
218
379
 
219
- .ahp-run-title {
220
- font-size: 13px; font-weight: 600; color: var(--text-primary);
221
- white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px;
380
+ .world-hud {
381
+ display: flex;
382
+ flex-direction: column;
383
+ gap: 16px;
384
+ min-width: 0;
222
385
  }
223
386
 
224
- .ahp-run-meta {
225
- display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted);
387
+ .world-panel {
388
+ padding: 18px;
226
389
  }
227
390
 
228
- .ahp-run-status {
229
- padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase;
391
+ .world-panel-header {
392
+ display: flex;
393
+ align-items: center;
394
+ justify-content: space-between;
395
+ gap: 10px;
396
+ margin-bottom: 14px;
230
397
  }
231
- .ahp-run-status.completed { background: rgba(16,185,129,0.15); color: #10b981; }
232
- .ahp-run-status.failed { background: rgba(239,68,68,0.15); color: #ef4444; }
233
- .ahp-run-status.running { background: var(--accent-muted); color: var(--accent); animation: pulse 1.2s infinite; }
234
398
 
235
- .activity-main {
236
- flex: 1; display: flex; flex-direction: column; min-width: 0;
399
+ .world-panel-header h2 {
400
+ margin: 0;
401
+ font-size: 15px;
402
+ color: var(--text-primary);
237
403
  }
238
404
 
239
- .activity-main-header {
240
- padding: 16px 24px; border-bottom: 1px solid var(--border);
241
- background: var(--bg-0); flex-shrink: 0;
242
- display: flex; justify-content: space-between; align-items: center;
405
+ .world-panel-kicker {
406
+ font-size: 11px;
407
+ color: var(--text-muted);
408
+ text-transform: uppercase;
409
+ letter-spacing: 0.08em;
243
410
  }
244
411
 
245
- .activity-main-header h2 {
246
- font-size: 16px; font-weight: 600; color: var(--text-primary);
247
- white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
412
+ .world-stats-grid {
413
+ display: grid;
414
+ grid-template-columns: repeat(2, minmax(0, 1fr));
415
+ gap: 10px;
248
416
  }
249
417
 
250
- .activity-main-actions {
251
- display: flex; align-items: center; gap: 12px; flex-shrink: 0;
418
+ .world-stat {
419
+ padding: 12px;
420
+ border-radius: 16px;
421
+ background: color-mix(in srgb, var(--bg-1) 72%, transparent);
422
+ border: 1px solid var(--border);
252
423
  }
253
424
 
254
- .atl-viewport {
255
- flex: 1; overflow-y: auto; padding: 24px;
256
- background: var(--bg-0); scroll-behavior: smooth;
425
+ .world-stat-label {
426
+ display: block;
427
+ margin-bottom: 6px;
428
+ font-size: 11px;
429
+ color: var(--text-muted);
430
+ text-transform: uppercase;
431
+ letter-spacing: 0.08em;
257
432
  }
258
433
 
259
- .atl-feed {
260
- max-width: 800px; margin: 0 auto;
261
- display: flex; flex-direction: column; gap: 16px;
434
+ .world-stat-value {
435
+ display: block;
436
+ color: var(--text-primary);
437
+ font-size: 18px;
438
+ line-height: 1.2;
262
439
  }
263
440
 
264
- /* Step Layout */
265
- .atl-step {
266
- display: flex; gap: 16px;
267
- animation: pageFadeIn 0.2s cubic-bezier(0.16,1,0.3,1) both;
441
+ .world-event-list {
442
+ display: flex;
443
+ flex-direction: column;
444
+ gap: 10px;
268
445
  }
269
446
 
270
- /* Spine */
271
- .atl-spine {
272
- display: flex; flex-direction: column; align-items: center;
273
- flex-shrink: 0; width: 32px;
447
+ .world-agent-list {
448
+ display: flex;
449
+ flex-direction: column;
450
+ gap: 10px;
274
451
  }
275
452
 
276
- .atl-dot {
277
- width: 32px; height: 32px; border-radius: 50%;
278
- display: flex; align-items: center; justify-content: center;
279
- font-size: 14px; background: var(--bg-card); border: 2px solid var(--border);
280
- z-index: 2; transition: all 0.2s ease;
453
+ .world-agent-card {
454
+ padding: 12px 13px;
455
+ border-radius: 16px;
456
+ background: color-mix(in srgb, var(--bg-1) 72%, transparent);
457
+ border: 1px solid var(--border);
281
458
  }
282
459
 
283
- .atl-connector {
284
- flex: 1; width: 2px; min-height: 24px; background: var(--border); margin: 4px 0;
460
+ .world-agent-topline {
461
+ display: flex;
462
+ align-items: center;
463
+ justify-content: space-between;
464
+ gap: 10px;
465
+ margin-bottom: 8px;
285
466
  }
286
- .atl-step:last-child .atl-connector { display: none; }
287
467
 
288
- .atl-step.running .atl-dot {
289
- border-color: var(--accent);
290
- box-shadow: 0 0 0 4px var(--accent-muted);
291
- animation: pulse 1.5s infinite;
468
+ .world-agent-title {
469
+ color: var(--text-primary);
470
+ font-size: 14px;
471
+ font-weight: 700;
292
472
  }
293
473
 
294
- /* Step Colors */
295
- .atl-step[data-color="cli"] .atl-dot { border-color: #10b981; color: #10b981; }
296
- .atl-step[data-color="browser"] .atl-dot { border-color: #3b82f6; color: #3b82f6; }
297
- .atl-step[data-color="memory"] .atl-dot { border-color: #f59e0b; color: #f59e0b; }
298
- .atl-step[data-color="thinking"] .atl-dot { border-color: #8b5cf6; color: #8b5cf6; }
299
- .atl-step[data-color="messaging"] .atl-dot { border-color: #ec4899; color: #ec4899; }
300
- .atl-step[data-color="http"] .atl-dot { border-color: #06b6d4; color: #06b6d4; }
301
- .atl-step[data-color="file"] .atl-dot { border-color: #f97316; color: #f97316; }
302
- .atl-step[data-color="agent"] .atl-dot { border-color: #a855f7; color: #a855f7; }
303
- .atl-step[data-color="response"] .atl-dot { border-color: #10b981; background: rgba(16,185,129,0.1); color: #10b981; }
474
+ .world-agent-chip {
475
+ display: inline-flex;
476
+ align-items: center;
477
+ justify-content: center;
478
+ min-height: 22px;
479
+ padding: 0 8px;
480
+ border-radius: 999px;
481
+ font-size: 10px;
482
+ letter-spacing: 0.08em;
483
+ text-transform: uppercase;
484
+ font-weight: 800;
485
+ }
486
+
487
+ .world-agent-chip.lead {
488
+ background: color-mix(in srgb, var(--success) 16%, transparent);
489
+ color: var(--success);
490
+ }
491
+
492
+ .world-agent-chip.helper {
493
+ background: color-mix(in srgb, var(--info) 16%, transparent);
494
+ color: var(--info);
495
+ }
304
496
 
305
- /* Timeline Card */
306
- .atl-card {
307
- flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border);
308
- border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
309
- transition: box-shadow 0.2s; margin-bottom: 24px;
497
+ .world-agent-meta {
498
+ color: var(--text-secondary);
499
+ font-size: 12px;
500
+ margin-bottom: 6px;
310
501
  }
311
- .atl-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
312
502
 
313
- .atl-card-head {
314
- padding: 14px 16px; background: rgba(255,255,255,0.015);
315
- display: flex; align-items: flex-start; gap: 12px;
316
- cursor: pointer; user-select: none;
503
+ .world-agent-status {
504
+ color: var(--text-primary);
505
+ font-size: 13px;
506
+ line-height: 1.5;
317
507
  }
318
- .atl-card.open .atl-card-head { border-bottom: 1px solid var(--border); }
319
508
 
320
- .atl-card-label {
321
- font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
322
- color: var(--text-primary); flex-shrink: 0;
509
+ .world-event-entry,
510
+ .world-empty-state {
511
+ padding: 12px 13px;
512
+ border-radius: 16px;
513
+ background: color-mix(in srgb, var(--bg-1) 72%, transparent);
514
+ border: 1px solid var(--border);
323
515
  }
324
516
 
325
- .atl-card-summary {
326
- font-size: 13px; color: var(--text-secondary); flex: 1; min-width: 0;
327
- overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
517
+ .world-empty-state {
518
+ color: var(--text-secondary);
519
+ line-height: 1.6;
328
520
  }
329
521
 
330
- .atl-status-chip {
331
- font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; flex-shrink: 0;
522
+ .world-event-topline {
523
+ display: flex;
524
+ align-items: center;
525
+ justify-content: space-between;
526
+ gap: 10px;
527
+ margin-bottom: 6px;
332
528
  }
333
- .atl-status-chip.running { background: var(--accent-muted); color: var(--accent); animation: pulse 1.2s infinite; }
334
- .atl-status-chip.completed { background: rgba(16,185,129,0.15); color: #10b981; }
335
- .atl-status-chip.failed { background: rgba(239,68,68,0.15); color: #ef4444; }
336
529
 
337
- .atl-toggle {
338
- color: var(--text-muted); font-size: 12px; margin-top: 2px;
339
- transition: transform 0.2s; flex-shrink: 0;
530
+ .world-event-tag {
531
+ font-size: 10px;
532
+ font-weight: 800;
533
+ letter-spacing: 0.12em;
534
+ text-transform: uppercase;
535
+ color: var(--accent);
340
536
  }
341
- .atl-card.open .atl-toggle { transform: rotate(180deg); }
342
537
 
343
- .atl-card-body {
344
- display: none; padding: 16px; background: var(--bg-card);
538
+ .world-event-time {
539
+ font-size: 11px;
540
+ color: var(--text-muted);
345
541
  }
346
- .atl-card.open .atl-card-body { display: block; }
347
542
 
348
- /* Card Body Content */
349
- .atl-cmd {
350
- font-family: 'SF Mono', monospace; font-size: 12px; color: var(--text-primary);
351
- background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius);
352
- padding: 10px; margin-bottom: 12px; word-break: break-all;
543
+ .world-event-text {
544
+ color: var(--text-primary);
545
+ font-size: 13px;
546
+ line-height: 1.5;
353
547
  }
354
548
 
355
- .atl-detail { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
549
+ .world-legend {
550
+ display: grid;
551
+ grid-template-columns: repeat(2, minmax(0, 1fr));
552
+ gap: 10px;
553
+ }
356
554
 
357
- .atl-code {
358
- font-family: 'SF Mono', monospace; font-size: 12px; background: var(--bg-1);
359
- border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
360
- color: var(--text-secondary); max-height: 400px; overflow-y: auto; line-height: 1.5;
555
+ .world-legend-item {
556
+ display: flex;
557
+ align-items: center;
558
+ gap: 10px;
559
+ color: var(--text-primary);
560
+ font-size: 13px;
361
561
  }
362
562
 
363
- .atl-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
364
- .atl-text.error { color: #ef4444; background: rgba(239,68,68,0.1); padding: 12px; border-radius: var(--radius); }
365
- .atl-success { font-size: 13px; font-weight: 500; color: #10b981; }
563
+ .swatch {
564
+ width: 14px;
565
+ height: 14px;
566
+ border-radius: 4px;
567
+ box-shadow: 0 0 10px currentColor;
568
+ }
366
569
 
367
- .atl-http-badge {
368
- display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
570
+ .swatch.core {
571
+ background: var(--success);
572
+ color: var(--success);
369
573
  }
370
- .atl-http-badge.ok { background: rgba(16,185,129,0.15); color: #10b981; }
371
- .atl-http-badge.warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
372
- .atl-http-badge.err { background: rgba(239,68,68,0.15); color: #ef4444; }
373
574
 
374
- .atl-url-chip {
375
- display: inline-flex; font-size: 12px; color: var(--accent); background: var(--accent-muted);
376
- border-radius: 4px; padding: 4px 10px; margin-bottom: 12px; font-family: monospace;
377
- text-decoration: none; word-break: break-all;
575
+ .swatch.browser {
576
+ background: var(--info);
577
+ color: var(--info);
378
578
  }
379
- .atl-url-chip:hover { text-decoration: underline; }
380
579
 
381
- .atl-screenshot {
382
- width: 100%; border-radius: 8px; border: 1px solid var(--border);
383
- display: block; max-height: 400px; object-fit: contain; object-position: center; margin-top: 8px;
384
- background: var(--bg-1);
580
+ .swatch.memory {
581
+ background: var(--warning);
582
+ color: var(--warning);
385
583
  }
386
584
 
387
- .atl-response-body {
388
- font-size: 14px; line-height: 1.6; color: var(--text-primary); padding: 4px;
585
+ .swatch.cli {
586
+ background: #f97316;
587
+ color: #f97316;
389
588
  }
390
- .atl-response-body pre { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow-x: auto; margin: 12px 0; }
391
- .atl-response-body code { font-family: 'SF Mono', monospace; font-size: 13px; }
392
589
 
393
- .atl-empty {
394
- display: flex; flex-direction: column; align-items: center; justify-content: center;
395
- height: 100%; min-height: 400px; color: var(--text-muted); text-align: center; gap: 12px;
590
+ .swatch.social {
591
+ background: #ec4899;
592
+ color: #ec4899;
396
593
  }
397
- .atl-empty svg { opacity: 0.3; }
398
- .atl-empty p { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
399
- .atl-empty span { font-size: 14px; margin: 0; }
400
594
 
401
595
  /* ── Chat: social message bubble ── */
402
596
  .chat-message.social .chat-avatar {
403
- background: #25d36620; color: #25d366; font-size: 12px;
597
+ background: #25d36620;
598
+ color: #25d366;
599
+ font-size: 12px;
404
600
  }
601
+
405
602
  .chat-message.social .chat-bubble {
406
- background: var(--bg-card); border: 1px solid var(--border);
603
+ background: var(--bg-card);
604
+ border: 1px solid var(--border);
407
605
  border-bottom-left-radius: 4px;
408
606
  }
607
+
409
608
  .chat-platform-badge {
410
- display: inline-flex; align-items: center; gap: 4px;
411
- font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
412
- color: var(--text-muted); margin-bottom: 4px;
609
+ display: inline-flex;
610
+ align-items: center;
611
+ gap: 4px;
612
+ font-size: 10px;
613
+ font-weight: 700;
614
+ text-transform: uppercase;
615
+ letter-spacing: 0.5px;
616
+ color: var(--text-muted);
617
+ margin-bottom: 4px;
618
+ }
619
+
620
+ .chat-platform-badge.whatsapp {
621
+ color: #25d366;
622
+ }
623
+
624
+ .chat-sender {
625
+ font-size: 12px;
626
+ font-weight: 600;
627
+ color: var(--text-secondary);
628
+ margin-bottom: 4px;
413
629
  }
414
- .chat-platform-badge.whatsapp { color: #25d366; }
415
- .chat-sender { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
416
630
 
417
631
  /* ── Chat: interim status message ── */
418
632
  .chat-interim {
419
- display: flex; align-items: flex-start; gap: 8px;
420
- margin-bottom: 8px; padding-left: 4px;
633
+ display: flex;
634
+ align-items: flex-start;
635
+ gap: 8px;
636
+ margin-bottom: 8px;
637
+ padding-left: 4px;
421
638
  }
639
+
422
640
  .chat-interim-dot {
423
- width: 6px; height: 6px; border-radius: 50%;
424
- background: var(--accent); flex-shrink: 0; margin-top: 6px;
641
+ width: 6px;
642
+ height: 6px;
643
+ border-radius: 50%;
644
+ background: var(--accent);
645
+ flex-shrink: 0;
646
+ margin-top: 6px;
425
647
  animation: pulse 1.2s ease-in-out infinite;
426
648
  }
649
+
427
650
  .chat-interim-text {
428
- font-size: 13px; color: var(--text-muted);
429
- font-style: italic; line-height: 1.5;
651
+ font-size: 13px;
652
+ color: var(--text-muted);
653
+ font-style: italic;
654
+ line-height: 1.5;
430
655
  }
431
656
 
432
657
  .chat-messages {
@@ -436,41 +661,72 @@
436
661
  }
437
662
 
438
663
  .chat-message {
439
- display: flex; gap: 12px; margin-bottom: 20px; max-width: 820px;
440
- animation: msgIn 200ms cubic-bezier(.16,1,.3,1) both;
664
+ display: flex;
665
+ gap: 12px;
666
+ margin-bottom: 20px;
667
+ max-width: 820px;
668
+ animation: msgIn 200ms cubic-bezier(.16, 1, .3, 1) both;
441
669
  }
670
+
442
671
  @keyframes msgIn {
443
- from { opacity: 0; transform: translateY(6px); }
444
- to { opacity: 1; transform: translateY(0); }
672
+ from {
673
+ opacity: 0;
674
+ transform: translateY(6px);
675
+ }
676
+
677
+ to {
678
+ opacity: 1;
679
+ transform: translateY(0);
680
+ }
445
681
  }
446
682
 
447
- .chat-message.user { flex-direction: row-reverse; margin-left: auto; }
683
+ .chat-message.user {
684
+ flex-direction: row-reverse;
685
+ margin-left: auto;
686
+ }
448
687
 
449
688
  .chat-avatar {
450
- width: 30px; height: 30px; border-radius: 8px;
451
- display: flex; align-items: center; justify-content: center;
452
- flex-shrink: 0; font-size: 13px; font-weight: 600;
689
+ width: 30px;
690
+ height: 30px;
691
+ border-radius: 8px;
692
+ display: flex;
693
+ align-items: center;
694
+ justify-content: center;
695
+ flex-shrink: 0;
696
+ font-size: 13px;
697
+ font-weight: 600;
453
698
  }
699
+
454
700
  .chat-message.assistant .chat-avatar {
455
701
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
456
- color: white; box-shadow: 0 2px 10px rgba(99,102,241,.35);
702
+ color: white;
703
+ box-shadow: 0 2px 10px rgba(99, 102, 241, .35);
457
704
  }
705
+
458
706
  .chat-message.user .chat-avatar {
459
- background: var(--bg-4, #1e1e32); color: var(--text-secondary);
707
+ background: var(--bg-4, #1e1e32);
708
+ color: var(--text-secondary);
460
709
  }
461
710
 
462
711
  .chat-bubble {
463
- padding: 11px 16px; border-radius: var(--radius-lg);
464
- max-width: 620px; line-height: 1.65; word-break: break-word;
712
+ padding: 11px 16px;
713
+ border-radius: var(--radius-lg);
714
+ max-width: 620px;
715
+ line-height: 1.65;
716
+ word-break: break-word;
465
717
  }
718
+
466
719
  .chat-message.user .chat-bubble {
467
- background: var(--accent); color: #fff;
720
+ background: var(--accent);
721
+ color: #fff;
468
722
  border-bottom-right-radius: 4px;
469
- box-shadow: 0 2px 12px rgba(99,102,241,.3);
723
+ box-shadow: 0 2px 12px rgba(99, 102, 241, .3);
470
724
  }
725
+
471
726
  .chat-message.assistant .chat-bubble {
472
727
  background: var(--bg-card);
473
- border: 1px solid var(--border); border-bottom-left-radius: 4px;
728
+ border: 1px solid var(--border);
729
+ border-bottom-left-radius: 4px;
474
730
  }
475
731
 
476
732
  .chat-tool-call {
@@ -514,60 +770,100 @@
514
770
  /* ── Animations ── */
515
771
 
516
772
  @keyframes pulse {
517
- 0%, 100% { opacity: 1; }
518
- 50% { opacity: 0.3; }
773
+
774
+ 0%,
775
+ 100% {
776
+ opacity: 1;
777
+ }
778
+
779
+ 50% {
780
+ opacity: 0.3;
781
+ }
519
782
  }
520
783
 
521
784
  /* ── CHAT INPUT ── */
522
785
 
523
786
  .chat-input-area {
524
787
  padding: 12px 20px 20px;
525
- border-top: 1px solid var(--border); flex-shrink: 0;
788
+ border-top: 1px solid var(--border);
789
+ flex-shrink: 0;
526
790
  }
527
791
 
528
792
  .chat-input-wrapper {
529
- display: flex; align-items: flex-end; gap: 8px;
530
- background: var(--bg-2, #111120); border: 1px solid var(--border);
531
- border-radius: var(--radius-lg); padding: 4px 4px 4px 16px;
793
+ display: flex;
794
+ align-items: flex-end;
795
+ gap: 8px;
796
+ background: var(--bg-2);
797
+ border: 1px solid var(--border);
798
+ border-radius: var(--radius-lg);
799
+ padding: 4px 4px 4px 16px;
532
800
  transition: border-color 120ms ease, box-shadow 120ms ease;
533
801
  }
802
+
534
803
  .chat-input-wrapper:focus-within {
535
804
  border-color: var(--accent);
536
- box-shadow: 0 0 0 3px var(--accent-muted), 0 4px 20px rgba(99,102,241,.12);
805
+ box-shadow: 0 0 0 3px var(--accent-muted), 0 4px 20px rgba(99, 102, 241, .12);
537
806
  }
538
807
 
539
808
  .chat-input {
540
- flex: 1; border: none; background: transparent; resize: none;
541
- padding: 10px 0; max-height: 200px; line-height: 1.5; color: var(--text-primary);
809
+ flex: 1;
810
+ border: none;
811
+ background: transparent;
812
+ resize: none;
813
+ padding: 10px 0;
814
+ max-height: 200px;
815
+ line-height: 1.5;
816
+ color: var(--text-primary);
817
+ }
818
+
819
+ .chat-input:focus {
820
+ outline: none;
542
821
  }
543
- .chat-input:focus { outline: none; }
544
822
 
545
823
  .chat-send-btn {
546
- border-radius: 10px; padding: 8px 12px; flex-shrink: 0;
824
+ border-radius: 10px;
825
+ padding: 8px 12px;
826
+ flex-shrink: 0;
547
827
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
548
828
  }
549
- .chat-send-btn:hover { transform: scale(1.06); }
550
829
 
551
- .chat-input-info { display: flex; justify-content: space-between; padding: 5px 2px 0;
830
+ .chat-send-btn:hover {
831
+ transform: scale(1.06);
832
+ }
833
+
834
+ .chat-input-info {
835
+ display: flex;
836
+ justify-content: space-between;
837
+ padding: 5px 2px 0;
552
838
  }
553
839
 
554
840
  /* ── MEMORY PANELS ── */
555
841
 
556
- .mem-panel { display: none; }
842
+ .mem-panel {
843
+ display: none;
844
+ }
845
+
557
846
  .mem-panel.active {
558
847
  display: block;
559
- animation: pageFadeIn 200ms cubic-bezier(.16,1,.3,1) both;
848
+ animation: pageFadeIn 200ms cubic-bezier(.16, 1, .3, 1) both;
560
849
  }
561
850
 
562
851
  /* ── MCP / Skill / Task Cards ── */
563
852
 
564
853
  .item-card {
565
- background: var(--bg-card); border: 1px solid var(--border);
566
- border-radius: var(--radius-lg); padding: 16px; margin-bottom: 10px;
854
+ background: var(--bg-card);
855
+ border: 1px solid var(--border);
856
+ border-radius: var(--radius-lg);
857
+ padding: 16px;
858
+ margin-bottom: 10px;
567
859
  transition: border-color 120ms ease, box-shadow 120ms ease;
568
- animation: fadeSlideUp 200ms cubic-bezier(.16,1,.3,1) both;
860
+ animation: fadeSlideUp 200ms cubic-bezier(.16, 1, .3, 1) both;
861
+ }
862
+
863
+ .item-card:hover {
864
+ border-color: var(--border-light);
865
+ box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
569
866
  }
570
- .item-card:hover { border-color: var(--border-light); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
571
867
 
572
868
  .item-card-header {
573
869
  display: flex;
@@ -593,7 +889,8 @@
593
889
 
594
890
  /* ── QR Code ── */
595
891
 
596
- #qrContainer canvas, #qrContainer img {
892
+ #qrContainer canvas,
893
+ #qrContainer img {
597
894
  border-radius: var(--radius);
598
895
  max-width: 280px;
599
896
  }
@@ -601,8 +898,44 @@
601
898
  /* ── Responsive ── */
602
899
 
603
900
  @media (max-width: 768px) {
604
- .sidebar { width: 0; position: absolute; z-index: 100; height: 100%; }
605
- .sidebar.open { width: var(--sidebar-width); }
606
- .chat-message { max-width: 100%; }
607
- .activity-timeline { padding: 16px 12px 32px; }
901
+ .sidebar {
902
+ width: 0;
903
+ position: absolute;
904
+ z-index: 100;
905
+ height: 100%;
906
+ }
907
+
908
+ .sidebar.open {
909
+ width: var(--sidebar-width);
910
+ }
911
+
912
+ .chat-message {
913
+ max-width: 100%;
914
+ }
915
+
916
+ .world-page {
917
+ padding: 18px;
918
+ }
919
+
920
+ .world-layout {
921
+ grid-template-columns: 1fr;
922
+ }
923
+
924
+ .world-stage-frame,
925
+ .world-canvas {
926
+ min-height: 380px;
927
+ }
928
+
929
+ .world-stage-overlay {
930
+ flex-direction: column;
931
+ align-items: flex-start;
932
+ }
933
+
934
+ .world-overlay-group {
935
+ width: 100%;
936
+ }
937
+
938
+ .world-legend {
939
+ grid-template-columns: 1fr;
940
+ }
608
941
  }