bgrun 3.3.2 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dashboard/app/api/debug/route.ts +17 -0
- package/dashboard/app/api/processes/route.ts +19 -3
- package/dashboard/app/globals.css +376 -144
- package/dashboard/app/layout.tsx +1 -1
- package/dashboard/app/page.client.tsx +89 -3
- package/dashboard/app/page.tsx +14 -0
- package/dist/index.js +92 -8
- package/package.json +3 -4
- package/src/api.ts +17 -2
- package/src/commands/list.ts +14 -1
- package/src/db.ts +17 -2
- package/src/index.ts +20 -1
- package/src/platform.ts +59 -15
- package/src/table.ts +2 -0
|
@@ -1,38 +1,51 @@
|
|
|
1
|
-
/* BGR Dashboard — Design System
|
|
1
|
+
/* BGR Dashboard — Design System v3 */
|
|
2
|
+
/* Inspired by agent-interface premium dark theme */
|
|
2
3
|
|
|
3
4
|
/* ─── Design Tokens ─── */
|
|
4
5
|
:root {
|
|
5
6
|
--bg-primary: #07070d;
|
|
6
7
|
--bg-secondary: #0e0e16;
|
|
8
|
+
--bg-surface: #111119;
|
|
7
9
|
--bg-card: rgba(16, 16, 24, 0.85);
|
|
8
10
|
--bg-glass: rgba(255, 255, 255, 0.03);
|
|
9
|
-
--bg-hover: rgba(255, 255, 255, 0.
|
|
11
|
+
--bg-hover: rgba(255, 255, 255, 0.05);
|
|
12
|
+
--bg-elevated: rgba(255, 255, 255, 0.06);
|
|
10
13
|
--border-glass: rgba(255, 255, 255, 0.07);
|
|
11
|
-
--border-hover: rgba(255, 255, 255, 0.
|
|
14
|
+
--border-hover: rgba(255, 255, 255, 0.14);
|
|
15
|
+
--border-subtle: rgba(255, 255, 255, 0.04);
|
|
12
16
|
--accent-primary: #6366f1;
|
|
13
17
|
--accent-secondary: #8b5cf6;
|
|
14
18
|
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
|
|
19
|
+
--accent-gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.08));
|
|
15
20
|
--success: #22c55e;
|
|
16
21
|
--success-soft: #16a34a;
|
|
17
22
|
--success-bg: rgba(34, 197, 94, 0.12);
|
|
23
|
+
--success-border: rgba(34, 197, 94, 0.2);
|
|
18
24
|
--danger: #ef4444;
|
|
19
25
|
--danger-bg: rgba(239, 68, 68, 0.12);
|
|
26
|
+
--danger-border: rgba(239, 68, 68, 0.2);
|
|
20
27
|
--warning: #f59e0b;
|
|
21
28
|
--warning-bg: rgba(245, 158, 11, 0.12);
|
|
22
29
|
--info: #38bdf8;
|
|
23
30
|
--info-bg: rgba(56, 189, 248, 0.12);
|
|
31
|
+
--info-border: rgba(56, 189, 248, 0.2);
|
|
24
32
|
--text-primary: #f1f5f9;
|
|
25
33
|
--text-secondary: #94a3b8;
|
|
26
34
|
--text-muted: #64748b;
|
|
27
|
-
--
|
|
35
|
+
--text-dim: #475569;
|
|
36
|
+
--shadow-glow: 0 0 80px rgba(99, 102, 241, 0.08);
|
|
28
37
|
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2);
|
|
38
|
+
--shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2);
|
|
39
|
+
--shadow-accent: 0 4px 20px rgba(99, 102, 241, 0.25);
|
|
29
40
|
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
30
41
|
--radius-sm: 8px;
|
|
31
42
|
--radius-md: 12px;
|
|
32
43
|
--radius-lg: 16px;
|
|
33
44
|
--radius-xl: 20px;
|
|
45
|
+
--radius-2xl: 24px;
|
|
34
46
|
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
35
47
|
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
48
|
+
--transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
36
49
|
}
|
|
37
50
|
|
|
38
51
|
* {
|
|
@@ -47,6 +60,7 @@ html {
|
|
|
47
60
|
color: var(--text-primary);
|
|
48
61
|
line-height: 1.5;
|
|
49
62
|
-webkit-font-smoothing: antialiased;
|
|
63
|
+
-moz-osx-font-smoothing: grayscale;
|
|
50
64
|
}
|
|
51
65
|
|
|
52
66
|
body {
|
|
@@ -54,24 +68,144 @@ body {
|
|
|
54
68
|
overflow-x: hidden;
|
|
55
69
|
}
|
|
56
70
|
|
|
57
|
-
/* Ambient background */
|
|
71
|
+
/* Ambient background — layered radials for depth */
|
|
58
72
|
body::before {
|
|
59
73
|
content: '';
|
|
60
74
|
position: fixed;
|
|
61
75
|
inset: 0;
|
|
62
76
|
background:
|
|
63
|
-
radial-gradient(ellipse
|
|
64
|
-
radial-gradient(ellipse
|
|
77
|
+
radial-gradient(ellipse 800px 500px at 10% 5%, rgba(99, 102, 241, 0.07) 0%, transparent 100%),
|
|
78
|
+
radial-gradient(ellipse 600px 400px at 90% 85%, rgba(139, 92, 246, 0.05) 0%, transparent 100%),
|
|
79
|
+
radial-gradient(ellipse 400px 300px at 50% 50%, rgba(99, 102, 241, 0.02) 0%, transparent 100%);
|
|
65
80
|
pointer-events: none;
|
|
66
81
|
z-index: 0;
|
|
67
82
|
}
|
|
68
83
|
|
|
84
|
+
/* Subtle noise texture overlay */
|
|
85
|
+
body::after {
|
|
86
|
+
content: '';
|
|
87
|
+
position: fixed;
|
|
88
|
+
inset: 0;
|
|
89
|
+
opacity: 0.015;
|
|
90
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
91
|
+
pointer-events: none;
|
|
92
|
+
z-index: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* ─── Animations ─── */
|
|
96
|
+
@keyframes fadeIn {
|
|
97
|
+
from {
|
|
98
|
+
opacity: 0;
|
|
99
|
+
transform: translateY(6px);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
to {
|
|
103
|
+
opacity: 1;
|
|
104
|
+
transform: translateY(0);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@keyframes fadeSlideIn {
|
|
109
|
+
from {
|
|
110
|
+
opacity: 0;
|
|
111
|
+
transform: translateY(8px);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
to {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
transform: translateY(0);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@keyframes shimmer {
|
|
121
|
+
0% {
|
|
122
|
+
background-position: -200% 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
100% {
|
|
126
|
+
background-position: 200% 0;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@keyframes statusPulse {
|
|
131
|
+
|
|
132
|
+
0%,
|
|
133
|
+
100% {
|
|
134
|
+
box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
|
|
135
|
+
opacity: 1;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
50% {
|
|
139
|
+
box-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
|
|
140
|
+
opacity: 0.7;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@keyframes float {
|
|
145
|
+
|
|
146
|
+
0%,
|
|
147
|
+
100% {
|
|
148
|
+
transform: translateY(0);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
50% {
|
|
152
|
+
transform: translateY(-6px);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@keyframes toastIn {
|
|
157
|
+
from {
|
|
158
|
+
opacity: 0;
|
|
159
|
+
transform: translateX(40px) scale(0.95);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
to {
|
|
163
|
+
opacity: 1;
|
|
164
|
+
transform: translateX(0) scale(1);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
@keyframes toastOut {
|
|
169
|
+
from {
|
|
170
|
+
opacity: 1;
|
|
171
|
+
transform: translateX(0) scale(1);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
to {
|
|
175
|
+
opacity: 0;
|
|
176
|
+
transform: translateX(40px) scale(0.95);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@keyframes modalIn {
|
|
181
|
+
from {
|
|
182
|
+
opacity: 0;
|
|
183
|
+
transform: scale(0.96) translateY(8px);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
to {
|
|
187
|
+
opacity: 1;
|
|
188
|
+
transform: scale(1) translateY(0);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@keyframes drawerSlideIn {
|
|
193
|
+
from {
|
|
194
|
+
transform: translateX(100%);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
to {
|
|
198
|
+
transform: translateX(0);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
69
202
|
.container {
|
|
70
203
|
max-width: 1400px;
|
|
71
204
|
margin: 0 auto;
|
|
72
205
|
padding: 1.75rem 2rem;
|
|
73
206
|
position: relative;
|
|
74
207
|
z-index: 1;
|
|
208
|
+
animation: fadeIn 0.4s ease;
|
|
75
209
|
}
|
|
76
210
|
|
|
77
211
|
/* ─── Header ─── */
|
|
@@ -91,15 +225,30 @@ body::before {
|
|
|
91
225
|
}
|
|
92
226
|
|
|
93
227
|
.logo-icon {
|
|
94
|
-
width:
|
|
95
|
-
height:
|
|
228
|
+
width: 46px;
|
|
229
|
+
height: 46px;
|
|
96
230
|
background: var(--accent-gradient);
|
|
97
|
-
border-radius:
|
|
231
|
+
border-radius: 14px;
|
|
98
232
|
display: flex;
|
|
99
233
|
align-items: center;
|
|
100
234
|
justify-content: center;
|
|
101
235
|
font-size: 1.25rem;
|
|
102
|
-
box-shadow:
|
|
236
|
+
box-shadow: var(--shadow-accent);
|
|
237
|
+
position: relative;
|
|
238
|
+
overflow: hidden;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Shimmer on logo icon */
|
|
242
|
+
.logo-icon::after {
|
|
243
|
+
content: '';
|
|
244
|
+
position: absolute;
|
|
245
|
+
inset: 0;
|
|
246
|
+
background: linear-gradient(110deg,
|
|
247
|
+
transparent 30%,
|
|
248
|
+
rgba(255, 255, 255, 0.15) 50%,
|
|
249
|
+
transparent 70%);
|
|
250
|
+
background-size: 200% 100%;
|
|
251
|
+
animation: shimmer 3s ease-in-out infinite;
|
|
103
252
|
}
|
|
104
253
|
|
|
105
254
|
.logo h1 {
|
|
@@ -134,6 +283,12 @@ body::before {
|
|
|
134
283
|
color: var(--text-muted);
|
|
135
284
|
font-family: var(--font-mono);
|
|
136
285
|
letter-spacing: 0.02em;
|
|
286
|
+
transition: all var(--transition-fast);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.version-badge:hover {
|
|
290
|
+
border-color: var(--border-hover);
|
|
291
|
+
color: var(--text-secondary);
|
|
137
292
|
}
|
|
138
293
|
|
|
139
294
|
/* ─── Stats Grid ─── */
|
|
@@ -147,61 +302,88 @@ body::before {
|
|
|
147
302
|
.stat-card {
|
|
148
303
|
background: var(--bg-card);
|
|
149
304
|
border: 1px solid var(--border-glass);
|
|
150
|
-
border-radius: var(--radius-
|
|
151
|
-
padding: 1.
|
|
305
|
+
border-radius: var(--radius-xl);
|
|
306
|
+
padding: 1.375rem 1.5rem;
|
|
152
307
|
backdrop-filter: blur(20px);
|
|
153
308
|
transition: all var(--transition-smooth);
|
|
154
309
|
position: relative;
|
|
155
310
|
overflow: hidden;
|
|
156
311
|
}
|
|
157
312
|
|
|
158
|
-
|
|
313
|
+
/* Gradient orb decorations */
|
|
314
|
+
.stat-card::before {
|
|
159
315
|
content: '';
|
|
160
316
|
position: absolute;
|
|
161
|
-
top:
|
|
162
|
-
right:
|
|
317
|
+
top: -20px;
|
|
318
|
+
right: -20px;
|
|
163
319
|
width: 100px;
|
|
164
320
|
height: 100px;
|
|
165
321
|
border-radius: 50%;
|
|
166
|
-
opacity: 0
|
|
167
|
-
|
|
322
|
+
opacity: 0;
|
|
323
|
+
transition: opacity var(--transition-smooth);
|
|
324
|
+
pointer-events: none;
|
|
325
|
+
filter: blur(30px);
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.stat-card::after {
|
|
329
|
+
content: '';
|
|
330
|
+
position: absolute;
|
|
331
|
+
bottom: 0;
|
|
332
|
+
left: 0;
|
|
333
|
+
right: 0;
|
|
334
|
+
height: 1px;
|
|
335
|
+
opacity: 0;
|
|
336
|
+
transition: opacity var(--transition-smooth);
|
|
168
337
|
pointer-events: none;
|
|
169
338
|
}
|
|
170
339
|
|
|
171
340
|
.stat-card:hover {
|
|
172
341
|
border-color: var(--border-hover);
|
|
173
|
-
transform: translateY(-
|
|
342
|
+
transform: translateY(-2px);
|
|
343
|
+
box-shadow: var(--shadow-elevated);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.stat-card:hover::before {
|
|
347
|
+
opacity: 1;
|
|
174
348
|
}
|
|
175
349
|
|
|
176
350
|
.stat-card.running {
|
|
177
351
|
border-left: 3px solid var(--success);
|
|
178
352
|
}
|
|
179
353
|
|
|
180
|
-
.stat-card.running::
|
|
354
|
+
.stat-card.running::before {
|
|
181
355
|
background: var(--success);
|
|
182
|
-
opacity: 0.
|
|
356
|
+
opacity: 0.08;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.stat-card.running:hover::before {
|
|
360
|
+
opacity: 0.12;
|
|
183
361
|
}
|
|
184
362
|
|
|
185
363
|
.stat-card.stopped {
|
|
186
364
|
border-left: 3px solid var(--danger);
|
|
187
365
|
}
|
|
188
366
|
|
|
189
|
-
.stat-card.stopped::
|
|
367
|
+
.stat-card.stopped::before {
|
|
190
368
|
background: var(--danger);
|
|
191
|
-
opacity: 0.
|
|
369
|
+
opacity: 0.08;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.stat-card.stopped:hover::before {
|
|
373
|
+
opacity: 0.12;
|
|
192
374
|
}
|
|
193
375
|
|
|
194
376
|
.stat-label {
|
|
195
|
-
font-size: 0.
|
|
377
|
+
font-size: 0.675rem;
|
|
196
378
|
text-transform: uppercase;
|
|
197
379
|
letter-spacing: 0.1em;
|
|
198
380
|
color: var(--text-muted);
|
|
199
|
-
margin-bottom: 0.
|
|
200
|
-
font-weight:
|
|
381
|
+
margin-bottom: 0.5rem;
|
|
382
|
+
font-weight: 600;
|
|
201
383
|
}
|
|
202
384
|
|
|
203
385
|
.stat-value {
|
|
204
|
-
font-size:
|
|
386
|
+
font-size: 2rem;
|
|
205
387
|
font-weight: 700;
|
|
206
388
|
line-height: 1.1;
|
|
207
389
|
letter-spacing: -0.02em;
|
|
@@ -261,6 +443,7 @@ body::before {
|
|
|
261
443
|
pointer-events: none;
|
|
262
444
|
width: 16px;
|
|
263
445
|
height: 16px;
|
|
446
|
+
transition: color var(--transition-fast);
|
|
264
447
|
}
|
|
265
448
|
|
|
266
449
|
.search-input {
|
|
@@ -278,10 +461,14 @@ body::before {
|
|
|
278
461
|
|
|
279
462
|
.search-input:focus {
|
|
280
463
|
border-color: var(--accent-primary);
|
|
281
|
-
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
|
464
|
+
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 0 20px rgba(99, 102, 241, 0.05);
|
|
282
465
|
background: rgba(255, 255, 255, 0.05);
|
|
283
466
|
}
|
|
284
467
|
|
|
468
|
+
.search-input:focus~.search-icon {
|
|
469
|
+
color: var(--accent-primary);
|
|
470
|
+
}
|
|
471
|
+
|
|
285
472
|
.search-input::placeholder {
|
|
286
473
|
color: var(--text-muted);
|
|
287
474
|
}
|
|
@@ -294,11 +481,16 @@ body::before {
|
|
|
294
481
|
padding: 0.125rem 0.375rem;
|
|
295
482
|
font-size: 0.625rem;
|
|
296
483
|
font-family: var(--font-mono);
|
|
297
|
-
color: var(--text-
|
|
484
|
+
color: var(--text-dim);
|
|
298
485
|
border: 1px solid var(--border-glass);
|
|
299
486
|
border-radius: 4px;
|
|
300
487
|
background: var(--bg-secondary);
|
|
301
488
|
pointer-events: none;
|
|
489
|
+
transition: opacity var(--transition-fast);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.search-input:focus~.search-shortcut {
|
|
493
|
+
opacity: 0;
|
|
302
494
|
}
|
|
303
495
|
|
|
304
496
|
/* ─── Buttons ─── */
|
|
@@ -315,6 +507,33 @@ body::before {
|
|
|
315
507
|
transition: all var(--transition-fast);
|
|
316
508
|
font-family: inherit;
|
|
317
509
|
white-space: nowrap;
|
|
510
|
+
position: relative;
|
|
511
|
+
overflow: hidden;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.btn-icon {
|
|
515
|
+
width: 36px;
|
|
516
|
+
height: 36px;
|
|
517
|
+
padding: 0;
|
|
518
|
+
display: flex;
|
|
519
|
+
align-items: center;
|
|
520
|
+
justify-content: center;
|
|
521
|
+
border-radius: var(--radius-lg);
|
|
522
|
+
background: transparent;
|
|
523
|
+
color: var(--text-muted);
|
|
524
|
+
border: 1px solid transparent;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.btn-icon:hover {
|
|
528
|
+
color: var(--text-primary);
|
|
529
|
+
background: var(--bg-hover);
|
|
530
|
+
border-color: var(--border-glass);
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.btn-icon.active {
|
|
534
|
+
background: rgba(var(--color-primary), 0.1);
|
|
535
|
+
color: rgb(var(--color-primary));
|
|
536
|
+
border: 1px solid rgba(var(--color-primary), 0.2);
|
|
318
537
|
}
|
|
319
538
|
|
|
320
539
|
.btn-primary {
|
|
@@ -325,7 +544,11 @@ body::before {
|
|
|
325
544
|
|
|
326
545
|
.btn-primary:hover {
|
|
327
546
|
transform: translateY(-1px);
|
|
328
|
-
box-shadow: 0 4px
|
|
547
|
+
box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4);
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.btn-primary:active {
|
|
551
|
+
transform: translateY(0) scale(0.98);
|
|
329
552
|
}
|
|
330
553
|
|
|
331
554
|
.btn-ghost {
|
|
@@ -340,10 +563,14 @@ body::before {
|
|
|
340
563
|
border-color: var(--border-hover);
|
|
341
564
|
}
|
|
342
565
|
|
|
566
|
+
.btn-ghost:active {
|
|
567
|
+
transform: scale(0.98);
|
|
568
|
+
}
|
|
569
|
+
|
|
343
570
|
.btn-danger {
|
|
344
571
|
background: var(--danger-bg);
|
|
345
572
|
color: var(--danger);
|
|
346
|
-
border: 1px solid
|
|
573
|
+
border: 1px solid var(--danger-border);
|
|
347
574
|
}
|
|
348
575
|
|
|
349
576
|
.btn-danger:hover {
|
|
@@ -359,7 +586,7 @@ body::before {
|
|
|
359
586
|
.table-container {
|
|
360
587
|
background: var(--bg-card);
|
|
361
588
|
border: 1px solid var(--border-glass);
|
|
362
|
-
border-radius: var(--radius-
|
|
589
|
+
border-radius: var(--radius-2xl);
|
|
363
590
|
overflow: hidden;
|
|
364
591
|
backdrop-filter: blur(20px);
|
|
365
592
|
box-shadow: var(--shadow-card);
|
|
@@ -367,24 +594,49 @@ body::before {
|
|
|
367
594
|
|
|
368
595
|
table {
|
|
369
596
|
width: 100%;
|
|
370
|
-
border-collapse:
|
|
597
|
+
border-collapse: separate;
|
|
598
|
+
border-spacing: 0;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
/* ─── Group Header ─── */
|
|
602
|
+
.group-header td {
|
|
603
|
+
padding: 1.5rem 0.5rem 0.5rem 1.25rem !important;
|
|
604
|
+
background: transparent !important;
|
|
605
|
+
border: none !important;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.group-label {
|
|
609
|
+
display: flex;
|
|
610
|
+
align-items: center;
|
|
611
|
+
gap: 0.5rem;
|
|
612
|
+
font-size: 0.75rem;
|
|
613
|
+
font-weight: 700;
|
|
614
|
+
text-transform: uppercase;
|
|
615
|
+
letter-spacing: 0.05em;
|
|
616
|
+
color: var(--text-muted);
|
|
617
|
+
opacity: 0.8;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.group-icon {
|
|
621
|
+
font-size: 1rem;
|
|
622
|
+
opacity: 0.7;
|
|
371
623
|
}
|
|
372
624
|
|
|
373
625
|
th {
|
|
374
626
|
text-align: left;
|
|
375
|
-
padding: 0.
|
|
627
|
+
padding: 0.875rem 1.25rem;
|
|
376
628
|
font-size: 0.6875rem;
|
|
377
629
|
text-transform: uppercase;
|
|
378
630
|
letter-spacing: 0.08em;
|
|
379
|
-
color: var(--text-
|
|
380
|
-
background: rgba(0, 0, 0, 0.
|
|
631
|
+
color: var(--text-dim);
|
|
632
|
+
background: rgba(0, 0, 0, 0.3);
|
|
381
633
|
border-bottom: 1px solid var(--border-glass);
|
|
382
634
|
font-weight: 600;
|
|
383
635
|
}
|
|
384
636
|
|
|
385
637
|
td {
|
|
386
638
|
padding: 0.875rem 1.25rem;
|
|
387
|
-
border-bottom: 1px solid
|
|
639
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
388
640
|
transition: background var(--transition-fast);
|
|
389
641
|
vertical-align: middle;
|
|
390
642
|
}
|
|
@@ -403,21 +655,10 @@ tr[data-process-name]:hover td {
|
|
|
403
655
|
|
|
404
656
|
tr[data-process-name].selected td {
|
|
405
657
|
background: rgba(99, 102, 241, 0.06);
|
|
658
|
+
border-bottom-color: rgba(99, 102, 241, 0.08);
|
|
406
659
|
}
|
|
407
660
|
|
|
408
661
|
/* Row entrance animation */
|
|
409
|
-
@keyframes fadeSlideIn {
|
|
410
|
-
from {
|
|
411
|
-
opacity: 0;
|
|
412
|
-
transform: translateY(8px);
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
to {
|
|
416
|
-
opacity: 1;
|
|
417
|
-
transform: translateY(0);
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
|
|
421
662
|
tr.animate-in {
|
|
422
663
|
animation: fadeSlideIn 0.35s ease forwards;
|
|
423
664
|
}
|
|
@@ -427,31 +668,39 @@ tr.animate-in:nth-child(1) {
|
|
|
427
668
|
}
|
|
428
669
|
|
|
429
670
|
tr.animate-in:nth-child(2) {
|
|
430
|
-
animation-delay: 0.
|
|
671
|
+
animation-delay: 0.04s;
|
|
431
672
|
}
|
|
432
673
|
|
|
433
674
|
tr.animate-in:nth-child(3) {
|
|
434
|
-
animation-delay: 0.
|
|
675
|
+
animation-delay: 0.08s;
|
|
435
676
|
}
|
|
436
677
|
|
|
437
678
|
tr.animate-in:nth-child(4) {
|
|
438
|
-
animation-delay: 0.
|
|
679
|
+
animation-delay: 0.12s;
|
|
439
680
|
}
|
|
440
681
|
|
|
441
682
|
tr.animate-in:nth-child(5) {
|
|
442
|
-
animation-delay: 0.
|
|
683
|
+
animation-delay: 0.16s;
|
|
443
684
|
}
|
|
444
685
|
|
|
445
686
|
tr.animate-in:nth-child(6) {
|
|
446
|
-
animation-delay: 0.
|
|
687
|
+
animation-delay: 0.2s;
|
|
447
688
|
}
|
|
448
689
|
|
|
449
690
|
tr.animate-in:nth-child(7) {
|
|
450
|
-
animation-delay: 0.
|
|
691
|
+
animation-delay: 0.24s;
|
|
451
692
|
}
|
|
452
693
|
|
|
453
694
|
tr.animate-in:nth-child(8) {
|
|
454
|
-
animation-delay: 0.
|
|
695
|
+
animation-delay: 0.28s;
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
tr.animate-in:nth-child(9) {
|
|
699
|
+
animation-delay: 0.32s;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
tr.animate-in:nth-child(10) {
|
|
703
|
+
animation-delay: 0.36s;
|
|
455
704
|
}
|
|
456
705
|
|
|
457
706
|
.process-name {
|
|
@@ -464,10 +713,10 @@ tr.animate-in:nth-child(8) {
|
|
|
464
713
|
}
|
|
465
714
|
|
|
466
715
|
.process-icon {
|
|
467
|
-
width:
|
|
468
|
-
height:
|
|
716
|
+
width: 34px;
|
|
717
|
+
height: 34px;
|
|
469
718
|
background: var(--accent-gradient);
|
|
470
|
-
border-radius:
|
|
719
|
+
border-radius: 10px;
|
|
471
720
|
display: flex;
|
|
472
721
|
align-items: center;
|
|
473
722
|
justify-content: center;
|
|
@@ -475,6 +724,13 @@ tr.animate-in:nth-child(8) {
|
|
|
475
724
|
color: white;
|
|
476
725
|
font-weight: 700;
|
|
477
726
|
flex-shrink: 0;
|
|
727
|
+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
|
|
728
|
+
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
tr[data-process-name]:hover .process-icon {
|
|
732
|
+
transform: scale(1.05);
|
|
733
|
+
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
|
|
478
734
|
}
|
|
479
735
|
|
|
480
736
|
/* ─── Status Badge ─── */
|
|
@@ -487,16 +743,19 @@ tr.animate-in:nth-child(8) {
|
|
|
487
743
|
font-size: 0.7rem;
|
|
488
744
|
font-weight: 600;
|
|
489
745
|
letter-spacing: 0.01em;
|
|
746
|
+
transition: all var(--transition-fast);
|
|
490
747
|
}
|
|
491
748
|
|
|
492
749
|
.status-badge.running {
|
|
493
750
|
background: var(--success-bg);
|
|
494
751
|
color: var(--success);
|
|
752
|
+
border: 1px solid var(--success-border);
|
|
495
753
|
}
|
|
496
754
|
|
|
497
755
|
.status-badge.stopped {
|
|
498
756
|
background: var(--danger-bg);
|
|
499
757
|
color: var(--danger);
|
|
758
|
+
border: 1px solid var(--danger-border);
|
|
500
759
|
}
|
|
501
760
|
|
|
502
761
|
.status-dot {
|
|
@@ -517,18 +776,20 @@ tr.animate-in:nth-child(8) {
|
|
|
517
776
|
opacity: 0.6;
|
|
518
777
|
}
|
|
519
778
|
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
779
|
+
/* ─── Memory Badge ─── */
|
|
780
|
+
.memory-badge {
|
|
781
|
+
display: inline-flex;
|
|
782
|
+
align-items: center;
|
|
783
|
+
padding: 2px 6px;
|
|
784
|
+
border-radius: 4px;
|
|
785
|
+
background: rgba(56, 189, 248, 0.08);
|
|
786
|
+
/* info-bg-subtle */
|
|
787
|
+
color: var(--info);
|
|
788
|
+
font-size: 0.7rem;
|
|
789
|
+
font-family: var(--font-mono);
|
|
790
|
+
border: 1px solid rgba(56, 189, 248, 0.15);
|
|
791
|
+
width: fit-content;
|
|
792
|
+
white-space: nowrap;
|
|
532
793
|
}
|
|
533
794
|
|
|
534
795
|
.pid {
|
|
@@ -542,6 +803,10 @@ tr.animate-in:nth-child(8) {
|
|
|
542
803
|
font-family: var(--font-mono);
|
|
543
804
|
font-size: 0.8125rem;
|
|
544
805
|
font-weight: 500;
|
|
806
|
+
padding: 0.125rem 0.5rem;
|
|
807
|
+
background: var(--info-bg);
|
|
808
|
+
border-radius: 6px;
|
|
809
|
+
border: 1px solid var(--info-border);
|
|
545
810
|
}
|
|
546
811
|
|
|
547
812
|
.command {
|
|
@@ -595,24 +860,29 @@ tr.animate-in:nth-child(8) {
|
|
|
595
860
|
background: var(--bg-hover);
|
|
596
861
|
color: var(--text-primary);
|
|
597
862
|
border-color: var(--border-glass);
|
|
863
|
+
transform: scale(1.08);
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
.action-btn:active {
|
|
867
|
+
transform: scale(0.95);
|
|
598
868
|
}
|
|
599
869
|
|
|
600
870
|
.action-btn.danger:hover {
|
|
601
871
|
background: var(--danger-bg);
|
|
602
872
|
color: var(--danger);
|
|
603
|
-
border-color:
|
|
873
|
+
border-color: var(--danger-border);
|
|
604
874
|
}
|
|
605
875
|
|
|
606
876
|
.action-btn.success:hover {
|
|
607
877
|
background: var(--success-bg);
|
|
608
878
|
color: var(--success);
|
|
609
|
-
border-color:
|
|
879
|
+
border-color: var(--success-border);
|
|
610
880
|
}
|
|
611
881
|
|
|
612
882
|
.action-btn.info:hover {
|
|
613
883
|
background: var(--info-bg);
|
|
614
884
|
color: var(--info);
|
|
615
|
-
border-color:
|
|
885
|
+
border-color: var(--info-border);
|
|
616
886
|
}
|
|
617
887
|
|
|
618
888
|
/* ─── Empty State ─── */
|
|
@@ -629,18 +899,6 @@ tr.animate-in:nth-child(8) {
|
|
|
629
899
|
animation: float 3s ease-in-out infinite;
|
|
630
900
|
}
|
|
631
901
|
|
|
632
|
-
@keyframes float {
|
|
633
|
-
|
|
634
|
-
0%,
|
|
635
|
-
100% {
|
|
636
|
-
transform: translateY(0);
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
50% {
|
|
640
|
-
transform: translateY(-6px);
|
|
641
|
-
}
|
|
642
|
-
}
|
|
643
|
-
|
|
644
902
|
.empty-state h3 {
|
|
645
903
|
font-size: 1rem;
|
|
646
904
|
color: var(--text-secondary);
|
|
@@ -658,7 +916,7 @@ tr.animate-in:nth-child(8) {
|
|
|
658
916
|
position: fixed;
|
|
659
917
|
inset: 0;
|
|
660
918
|
background: rgba(0, 0, 0, 0.6);
|
|
661
|
-
backdrop-filter: blur(
|
|
919
|
+
backdrop-filter: blur(8px);
|
|
662
920
|
display: none;
|
|
663
921
|
align-items: center;
|
|
664
922
|
justify-content: center;
|
|
@@ -672,25 +930,13 @@ tr.animate-in:nth-child(8) {
|
|
|
672
930
|
.modal {
|
|
673
931
|
background: var(--bg-secondary);
|
|
674
932
|
border: 1px solid var(--border-glass);
|
|
675
|
-
border-radius: var(--radius-
|
|
933
|
+
border-radius: var(--radius-2xl);
|
|
676
934
|
width: 100%;
|
|
677
935
|
max-width: 480px;
|
|
678
936
|
max-height: 90vh;
|
|
679
937
|
overflow: auto;
|
|
680
|
-
animation: modalIn 0.
|
|
681
|
-
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
682
|
-
}
|
|
683
|
-
|
|
684
|
-
@keyframes modalIn {
|
|
685
|
-
from {
|
|
686
|
-
opacity: 0;
|
|
687
|
-
transform: scale(0.96) translateY(8px);
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
to {
|
|
691
|
-
opacity: 1;
|
|
692
|
-
transform: scale(1) translateY(0);
|
|
693
|
-
}
|
|
938
|
+
animation: modalIn 0.25s ease;
|
|
939
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(99, 102, 241, 0.08);
|
|
694
940
|
}
|
|
695
941
|
|
|
696
942
|
.modal-header {
|
|
@@ -777,7 +1023,7 @@ tr.animate-in:nth-child(8) {
|
|
|
777
1023
|
position: fixed;
|
|
778
1024
|
top: 0;
|
|
779
1025
|
right: 0;
|
|
780
|
-
width:
|
|
1026
|
+
width: 520px;
|
|
781
1027
|
height: 100vh;
|
|
782
1028
|
background: var(--bg-secondary);
|
|
783
1029
|
border-left: 1px solid var(--border-glass);
|
|
@@ -786,7 +1032,7 @@ tr.animate-in:nth-child(8) {
|
|
|
786
1032
|
flex-direction: column;
|
|
787
1033
|
transform: translateX(100%);
|
|
788
1034
|
transition: transform var(--transition-smooth);
|
|
789
|
-
box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
|
|
1035
|
+
box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3), -2px 0 20px rgba(0, 0, 0, 0.2);
|
|
790
1036
|
}
|
|
791
1037
|
|
|
792
1038
|
.detail-drawer.open {
|
|
@@ -800,6 +1046,7 @@ tr.animate-in:nth-child(8) {
|
|
|
800
1046
|
padding: 1.25rem 1.5rem;
|
|
801
1047
|
border-bottom: 1px solid var(--border-glass);
|
|
802
1048
|
flex-shrink: 0;
|
|
1049
|
+
background: rgba(0, 0, 0, 0.15);
|
|
803
1050
|
}
|
|
804
1051
|
|
|
805
1052
|
.drawer-header h3 {
|
|
@@ -807,13 +1054,14 @@ tr.animate-in:nth-child(8) {
|
|
|
807
1054
|
font-weight: 600;
|
|
808
1055
|
display: flex;
|
|
809
1056
|
align-items: center;
|
|
810
|
-
gap: 0.
|
|
1057
|
+
gap: 0.75rem;
|
|
811
1058
|
}
|
|
812
1059
|
|
|
813
1060
|
.drawer-header .process-icon {
|
|
814
|
-
width:
|
|
815
|
-
height:
|
|
1061
|
+
width: 32px;
|
|
1062
|
+
height: 32px;
|
|
816
1063
|
font-size: 0.7rem;
|
|
1064
|
+
border-radius: var(--radius-sm);
|
|
817
1065
|
}
|
|
818
1066
|
|
|
819
1067
|
.drawer-close {
|
|
@@ -837,25 +1085,26 @@ tr.animate-in:nth-child(8) {
|
|
|
837
1085
|
}
|
|
838
1086
|
|
|
839
1087
|
.drawer-meta {
|
|
840
|
-
padding:
|
|
1088
|
+
padding: 1.125rem 1.5rem;
|
|
841
1089
|
border-bottom: 1px solid var(--border-glass);
|
|
842
1090
|
display: grid;
|
|
843
1091
|
grid-template-columns: 1fr 1fr;
|
|
844
|
-
gap: 0.
|
|
1092
|
+
gap: 0.875rem;
|
|
845
1093
|
flex-shrink: 0;
|
|
1094
|
+
background: rgba(0, 0, 0, 0.08);
|
|
846
1095
|
}
|
|
847
1096
|
|
|
848
1097
|
.meta-item {
|
|
849
1098
|
display: flex;
|
|
850
1099
|
flex-direction: column;
|
|
851
|
-
gap: 0.
|
|
1100
|
+
gap: 0.25rem;
|
|
852
1101
|
}
|
|
853
1102
|
|
|
854
1103
|
.meta-label {
|
|
855
1104
|
font-size: 0.625rem;
|
|
856
1105
|
text-transform: uppercase;
|
|
857
1106
|
letter-spacing: 0.08em;
|
|
858
|
-
color: var(--text-
|
|
1107
|
+
color: var(--text-dim);
|
|
859
1108
|
font-weight: 600;
|
|
860
1109
|
}
|
|
861
1110
|
|
|
@@ -869,11 +1118,12 @@ tr.animate-in:nth-child(8) {
|
|
|
869
1118
|
display: flex;
|
|
870
1119
|
border-bottom: 1px solid var(--border-glass);
|
|
871
1120
|
flex-shrink: 0;
|
|
1121
|
+
background: rgba(0, 0, 0, 0.08);
|
|
872
1122
|
}
|
|
873
1123
|
|
|
874
1124
|
.drawer-tab {
|
|
875
1125
|
flex: 1;
|
|
876
|
-
padding: 0.
|
|
1126
|
+
padding: 0.75rem;
|
|
877
1127
|
background: none;
|
|
878
1128
|
border: none;
|
|
879
1129
|
color: var(--text-muted);
|
|
@@ -883,10 +1133,13 @@ tr.animate-in:nth-child(8) {
|
|
|
883
1133
|
border-bottom: 2px solid transparent;
|
|
884
1134
|
transition: all var(--transition-fast);
|
|
885
1135
|
font-family: inherit;
|
|
1136
|
+
text-transform: uppercase;
|
|
1137
|
+
letter-spacing: 0.04em;
|
|
886
1138
|
}
|
|
887
1139
|
|
|
888
1140
|
.drawer-tab:hover {
|
|
889
1141
|
color: var(--text-secondary);
|
|
1142
|
+
background: var(--bg-hover);
|
|
890
1143
|
}
|
|
891
1144
|
|
|
892
1145
|
.drawer-tab.active {
|
|
@@ -914,16 +1167,18 @@ tr.animate-in:nth-child(8) {
|
|
|
914
1167
|
flex: 1;
|
|
915
1168
|
padding: 1rem 1.5rem;
|
|
916
1169
|
min-height: 0;
|
|
1170
|
+
background: rgba(0, 0, 0, 0.2);
|
|
917
1171
|
}
|
|
918
1172
|
|
|
919
1173
|
.drawer-backdrop {
|
|
920
1174
|
position: fixed;
|
|
921
1175
|
inset: 0;
|
|
922
|
-
background: rgba(0, 0, 0, 0.
|
|
1176
|
+
background: rgba(0, 0, 0, 0.4);
|
|
923
1177
|
z-index: 899;
|
|
924
1178
|
opacity: 0;
|
|
925
1179
|
pointer-events: none;
|
|
926
1180
|
transition: opacity var(--transition-smooth);
|
|
1181
|
+
backdrop-filter: blur(2px);
|
|
927
1182
|
}
|
|
928
1183
|
|
|
929
1184
|
.drawer-backdrop.active {
|
|
@@ -953,12 +1208,12 @@ tr.animate-in:nth-child(8) {
|
|
|
953
1208
|
border-radius: var(--radius-md);
|
|
954
1209
|
font-size: 0.8125rem;
|
|
955
1210
|
color: var(--text-primary);
|
|
956
|
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
1211
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2);
|
|
957
1212
|
pointer-events: auto;
|
|
958
1213
|
animation: toastIn 0.3s ease forwards;
|
|
959
1214
|
min-width: 260px;
|
|
960
1215
|
max-width: 400px;
|
|
961
|
-
backdrop-filter: blur(
|
|
1216
|
+
backdrop-filter: blur(16px);
|
|
962
1217
|
}
|
|
963
1218
|
|
|
964
1219
|
.toast.removing {
|
|
@@ -967,8 +1222,8 @@ tr.animate-in:nth-child(8) {
|
|
|
967
1222
|
|
|
968
1223
|
.toast-icon {
|
|
969
1224
|
flex-shrink: 0;
|
|
970
|
-
width:
|
|
971
|
-
height:
|
|
1225
|
+
width: 20px;
|
|
1226
|
+
height: 20px;
|
|
972
1227
|
border-radius: 50%;
|
|
973
1228
|
display: flex;
|
|
974
1229
|
align-items: center;
|
|
@@ -1004,44 +1259,21 @@ tr.animate-in:nth-child(8) {
|
|
|
1004
1259
|
color: var(--info);
|
|
1005
1260
|
}
|
|
1006
1261
|
|
|
1007
|
-
@keyframes toastIn {
|
|
1008
|
-
from {
|
|
1009
|
-
opacity: 0;
|
|
1010
|
-
transform: translateX(40px);
|
|
1011
|
-
}
|
|
1012
|
-
|
|
1013
|
-
to {
|
|
1014
|
-
opacity: 1;
|
|
1015
|
-
transform: translateX(0);
|
|
1016
|
-
}
|
|
1017
|
-
}
|
|
1018
|
-
|
|
1019
|
-
@keyframes toastOut {
|
|
1020
|
-
from {
|
|
1021
|
-
opacity: 1;
|
|
1022
|
-
transform: translateX(0);
|
|
1023
|
-
}
|
|
1024
|
-
|
|
1025
|
-
to {
|
|
1026
|
-
opacity: 0;
|
|
1027
|
-
transform: translateX(40px);
|
|
1028
|
-
}
|
|
1029
|
-
}
|
|
1030
|
-
|
|
1031
1262
|
/* ─── Log Lines ─── */
|
|
1032
1263
|
.log-line {
|
|
1033
|
-
padding: 0.
|
|
1264
|
+
padding: 0.125rem 0;
|
|
1034
1265
|
transition: background var(--transition-fast);
|
|
1035
|
-
border-radius:
|
|
1266
|
+
border-radius: 3px;
|
|
1036
1267
|
}
|
|
1037
1268
|
|
|
1038
1269
|
.log-line:hover {
|
|
1039
|
-
background: rgba(255, 255, 255, 0.
|
|
1270
|
+
background: rgba(255, 255, 255, 0.04);
|
|
1040
1271
|
}
|
|
1041
1272
|
|
|
1042
1273
|
/* ─── Scrollbar ─── */
|
|
1043
1274
|
::-webkit-scrollbar {
|
|
1044
1275
|
width: 5px;
|
|
1276
|
+
height: 5px;
|
|
1045
1277
|
}
|
|
1046
1278
|
|
|
1047
1279
|
::-webkit-scrollbar-track {
|