orquesta-agent 0.2.53 → 0.2.54
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/dist/ui/public/app.js +261 -282
- package/dist/ui/public/index.html +70 -63
- package/dist/ui/public/style.css +411 -260
- package/dist/ui/server.d.ts.map +1 -1
- package/dist/ui/server.js +39 -0
- package/dist/ui/server.js.map +1 -1
- package/package.json +1 -1
package/dist/ui/public/style.css
CHANGED
|
@@ -1,308 +1,483 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
/* Orquesta Agent Manager — Dark Theme */
|
|
2
|
+
:root {
|
|
3
|
+
--bg-primary: #09090b;
|
|
4
|
+
--bg-secondary: #18181b;
|
|
5
|
+
--bg-card: #1c1c21;
|
|
6
|
+
--bg-card-hover: #222228;
|
|
7
|
+
--bg-input: #27272a;
|
|
8
|
+
--border: #2e2e33;
|
|
9
|
+
--border-hover: #3f3f46;
|
|
10
|
+
--text-primary: #fafafa;
|
|
11
|
+
--text-secondary: #a1a1aa;
|
|
12
|
+
--text-muted: #71717a;
|
|
13
|
+
--accent: #8b5cf6;
|
|
14
|
+
--accent-hover: #7c3aed;
|
|
15
|
+
--accent-glow: rgba(139, 92, 246, 0.15);
|
|
16
|
+
--green: #22c55e;
|
|
17
|
+
--green-glow: rgba(34, 197, 94, 0.2);
|
|
18
|
+
--red: #ef4444;
|
|
19
|
+
--red-glow: rgba(239, 68, 68, 0.2);
|
|
20
|
+
--yellow: #eab308;
|
|
21
|
+
--yellow-glow: rgba(234, 179, 8, 0.15);
|
|
22
|
+
--radius: 10px;
|
|
23
|
+
--radius-sm: 6px;
|
|
24
|
+
--shadow: 0 1px 3px rgba(0,0,0,0.4);
|
|
25
|
+
--shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
7
29
|
|
|
8
30
|
body {
|
|
9
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
10
|
-
background:
|
|
11
|
-
color:
|
|
12
|
-
line-height: 1.
|
|
31
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
32
|
+
background: var(--bg-primary);
|
|
33
|
+
color: var(--text-primary);
|
|
34
|
+
line-height: 1.5;
|
|
35
|
+
min-height: 100vh;
|
|
13
36
|
}
|
|
14
37
|
|
|
15
38
|
.container {
|
|
16
|
-
max-width:
|
|
39
|
+
max-width: 1280px;
|
|
17
40
|
margin: 0 auto;
|
|
18
|
-
padding:
|
|
41
|
+
padding: 24px;
|
|
19
42
|
}
|
|
20
43
|
|
|
21
|
-
/* Header */
|
|
44
|
+
/* ── Header ─────────────────────────────────────────── */
|
|
22
45
|
.header {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
46
|
+
display: flex;
|
|
47
|
+
justify-content: space-between;
|
|
48
|
+
align-items: center;
|
|
49
|
+
padding: 20px 0;
|
|
50
|
+
margin-bottom: 28px;
|
|
51
|
+
border-bottom: 1px solid var(--border);
|
|
28
52
|
}
|
|
29
53
|
|
|
30
|
-
.header-
|
|
54
|
+
.header-left {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
gap: 14px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.logo {
|
|
61
|
+
width: 36px;
|
|
62
|
+
height: 36px;
|
|
63
|
+
background: var(--accent);
|
|
64
|
+
border-radius: 8px;
|
|
31
65
|
display: flex;
|
|
32
|
-
justify-content: space-between;
|
|
33
66
|
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
font-weight: 700;
|
|
69
|
+
font-size: 18px;
|
|
70
|
+
color: white;
|
|
34
71
|
}
|
|
35
72
|
|
|
36
73
|
.header h1 {
|
|
37
|
-
font-size:
|
|
38
|
-
|
|
74
|
+
font-size: 22px;
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
color: var(--text-primary);
|
|
77
|
+
letter-spacing: -0.02em;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.header h1 span {
|
|
81
|
+
color: var(--text-muted);
|
|
82
|
+
font-weight: 400;
|
|
83
|
+
font-size: 14px;
|
|
84
|
+
margin-left: 10px;
|
|
39
85
|
}
|
|
40
86
|
|
|
41
|
-
.header-
|
|
87
|
+
.header-right {
|
|
42
88
|
display: flex;
|
|
43
|
-
gap:
|
|
89
|
+
gap: 10px;
|
|
44
90
|
align-items: center;
|
|
45
91
|
}
|
|
46
92
|
|
|
47
|
-
/* System
|
|
48
|
-
.
|
|
49
|
-
|
|
50
|
-
|
|
93
|
+
/* ── System Health ──────────────────────────────────── */
|
|
94
|
+
.health-grid {
|
|
95
|
+
display: grid;
|
|
96
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
97
|
+
gap: 12px;
|
|
98
|
+
margin-bottom: 28px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.health-card {
|
|
102
|
+
background: var(--bg-card);
|
|
103
|
+
border: 1px solid var(--border);
|
|
104
|
+
border-radius: var(--radius);
|
|
51
105
|
padding: 16px;
|
|
52
|
-
margin-bottom: 24px;
|
|
53
|
-
display: flex;
|
|
54
|
-
gap: 24px;
|
|
55
|
-
flex-wrap: wrap;
|
|
56
106
|
}
|
|
57
107
|
|
|
58
|
-
.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
108
|
+
.health-label {
|
|
109
|
+
font-size: 12px;
|
|
110
|
+
font-weight: 500;
|
|
111
|
+
color: var(--text-muted);
|
|
112
|
+
text-transform: uppercase;
|
|
113
|
+
letter-spacing: 0.05em;
|
|
114
|
+
margin-bottom: 8px;
|
|
62
115
|
}
|
|
63
116
|
|
|
64
|
-
.
|
|
117
|
+
.health-value {
|
|
118
|
+
font-size: 24px;
|
|
65
119
|
font-weight: 600;
|
|
66
|
-
color:
|
|
120
|
+
color: var(--text-primary);
|
|
121
|
+
margin-bottom: 8px;
|
|
67
122
|
}
|
|
68
123
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
border-radius: 12px;
|
|
74
|
-
font-size: 12px;
|
|
75
|
-
font-weight: 600;
|
|
76
|
-
background: #e3f2fd;
|
|
77
|
-
color: #1976d2;
|
|
124
|
+
.health-value small {
|
|
125
|
+
font-size: 13px;
|
|
126
|
+
font-weight: 400;
|
|
127
|
+
color: var(--text-secondary);
|
|
78
128
|
}
|
|
79
129
|
|
|
80
|
-
.
|
|
81
|
-
|
|
82
|
-
|
|
130
|
+
.health-bar {
|
|
131
|
+
width: 100%;
|
|
132
|
+
height: 4px;
|
|
133
|
+
background: var(--bg-input);
|
|
134
|
+
border-radius: 2px;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.health-bar-fill {
|
|
139
|
+
height: 100%;
|
|
140
|
+
border-radius: 2px;
|
|
141
|
+
transition: width 0.6s ease;
|
|
83
142
|
}
|
|
84
143
|
|
|
85
|
-
.
|
|
86
|
-
|
|
87
|
-
|
|
144
|
+
.health-bar-fill.green { background: var(--green); }
|
|
145
|
+
.health-bar-fill.yellow { background: var(--yellow); }
|
|
146
|
+
.health-bar-fill.red { background: var(--red); }
|
|
147
|
+
|
|
148
|
+
.health-detail {
|
|
149
|
+
font-size: 11px;
|
|
150
|
+
color: var(--text-muted);
|
|
151
|
+
margin-top: 6px;
|
|
88
152
|
}
|
|
89
153
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
154
|
+
/* ── Status Row (CLIs) ──────────────────────────────── */
|
|
155
|
+
.status-row {
|
|
156
|
+
display: flex;
|
|
157
|
+
gap: 16px;
|
|
158
|
+
margin-bottom: 28px;
|
|
159
|
+
flex-wrap: wrap;
|
|
93
160
|
}
|
|
94
161
|
|
|
95
|
-
|
|
162
|
+
.status-chip {
|
|
163
|
+
display: inline-flex;
|
|
164
|
+
align-items: center;
|
|
165
|
+
gap: 6px;
|
|
166
|
+
padding: 6px 14px;
|
|
167
|
+
background: var(--bg-card);
|
|
168
|
+
border: 1px solid var(--border);
|
|
169
|
+
border-radius: 20px;
|
|
170
|
+
font-size: 13px;
|
|
171
|
+
color: var(--text-secondary);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.status-chip .dot {
|
|
175
|
+
width: 7px;
|
|
176
|
+
height: 7px;
|
|
177
|
+
border-radius: 50%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.status-chip .dot.on { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
|
|
181
|
+
.status-chip .dot.off { background: var(--red); }
|
|
182
|
+
.status-chip .dot.warn { background: var(--yellow); }
|
|
183
|
+
|
|
184
|
+
/* ── Actions Bar ────────────────────────────────────── */
|
|
185
|
+
.actions-bar {
|
|
186
|
+
display: flex;
|
|
187
|
+
justify-content: space-between;
|
|
188
|
+
align-items: center;
|
|
189
|
+
margin-bottom: 20px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.actions-bar h2 {
|
|
193
|
+
font-size: 16px;
|
|
194
|
+
font-weight: 600;
|
|
195
|
+
color: var(--text-primary);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* ── Buttons ────────────────────────────────────────── */
|
|
96
199
|
.btn {
|
|
97
200
|
display: inline-flex;
|
|
98
201
|
align-items: center;
|
|
99
202
|
gap: 6px;
|
|
100
|
-
padding:
|
|
101
|
-
border:
|
|
102
|
-
border-radius:
|
|
103
|
-
font-size:
|
|
203
|
+
padding: 8px 16px;
|
|
204
|
+
border: 1px solid var(--border);
|
|
205
|
+
border-radius: var(--radius-sm);
|
|
206
|
+
font-size: 13px;
|
|
104
207
|
font-weight: 500;
|
|
105
208
|
cursor: pointer;
|
|
106
|
-
transition: all 0.
|
|
209
|
+
transition: all 0.15s;
|
|
210
|
+
background: var(--bg-card);
|
|
211
|
+
color: var(--text-primary);
|
|
212
|
+
font-family: inherit;
|
|
107
213
|
}
|
|
108
214
|
|
|
109
215
|
.btn:hover {
|
|
110
|
-
|
|
111
|
-
|
|
216
|
+
background: var(--bg-card-hover);
|
|
217
|
+
border-color: var(--border-hover);
|
|
112
218
|
}
|
|
113
219
|
|
|
114
220
|
.btn-primary {
|
|
115
|
-
background:
|
|
221
|
+
background: var(--accent);
|
|
222
|
+
border-color: var(--accent);
|
|
116
223
|
color: white;
|
|
117
224
|
}
|
|
118
225
|
|
|
119
226
|
.btn-primary:hover {
|
|
120
|
-
background:
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
.btn-secondary {
|
|
124
|
-
background: #e0e0e0;
|
|
125
|
-
color: #424242;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.btn-secondary:hover {
|
|
129
|
-
background: #bdbdbd;
|
|
227
|
+
background: var(--accent-hover);
|
|
228
|
+
border-color: var(--accent-hover);
|
|
130
229
|
}
|
|
131
230
|
|
|
132
231
|
.btn-success {
|
|
133
|
-
background:
|
|
134
|
-
color:
|
|
232
|
+
background: rgba(34, 197, 94, 0.1);
|
|
233
|
+
border-color: rgba(34, 197, 94, 0.3);
|
|
234
|
+
color: var(--green);
|
|
135
235
|
}
|
|
136
236
|
|
|
137
237
|
.btn-success:hover {
|
|
138
|
-
background:
|
|
238
|
+
background: rgba(34, 197, 94, 0.2);
|
|
139
239
|
}
|
|
140
240
|
|
|
141
241
|
.btn-danger {
|
|
142
|
-
background:
|
|
143
|
-
color:
|
|
242
|
+
background: rgba(239, 68, 68, 0.1);
|
|
243
|
+
border-color: rgba(239, 68, 68, 0.3);
|
|
244
|
+
color: var(--red);
|
|
144
245
|
}
|
|
145
246
|
|
|
146
247
|
.btn-danger:hover {
|
|
147
|
-
background:
|
|
248
|
+
background: rgba(239, 68, 68, 0.2);
|
|
148
249
|
}
|
|
149
250
|
|
|
150
251
|
.btn-sm {
|
|
151
|
-
padding:
|
|
252
|
+
padding: 5px 10px;
|
|
152
253
|
font-size: 12px;
|
|
153
254
|
}
|
|
154
255
|
|
|
155
|
-
.btn
|
|
156
|
-
|
|
256
|
+
.btn svg {
|
|
257
|
+
width: 14px;
|
|
258
|
+
height: 14px;
|
|
259
|
+
flex-shrink: 0;
|
|
157
260
|
}
|
|
158
261
|
|
|
159
|
-
/*
|
|
160
|
-
.
|
|
161
|
-
|
|
262
|
+
/* ── Agent Cards ────────────────────────────────────── */
|
|
263
|
+
.agents-grid {
|
|
264
|
+
display: grid;
|
|
265
|
+
gap: 14px;
|
|
162
266
|
}
|
|
163
267
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
border-
|
|
170
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
268
|
+
.agent-card {
|
|
269
|
+
background: var(--bg-card);
|
|
270
|
+
border: 1px solid var(--border);
|
|
271
|
+
border-radius: var(--radius);
|
|
272
|
+
overflow: hidden;
|
|
273
|
+
transition: border-color 0.2s;
|
|
171
274
|
}
|
|
172
275
|
|
|
173
|
-
.
|
|
174
|
-
|
|
175
|
-
margin-bottom: 16px;
|
|
176
|
-
opacity: 0.5;
|
|
276
|
+
.agent-card:hover {
|
|
277
|
+
border-color: var(--border-hover);
|
|
177
278
|
}
|
|
178
279
|
|
|
179
|
-
.
|
|
180
|
-
|
|
181
|
-
margin-bottom: 8px;
|
|
182
|
-
color: #2c3e50;
|
|
280
|
+
.agent-card.running {
|
|
281
|
+
border-left: 3px solid var(--green);
|
|
183
282
|
}
|
|
184
283
|
|
|
185
|
-
.
|
|
186
|
-
|
|
284
|
+
.agent-card.stopped {
|
|
285
|
+
border-left: 3px solid var(--text-muted);
|
|
187
286
|
}
|
|
188
287
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
display: grid;
|
|
192
|
-
gap: 16px;
|
|
193
|
-
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
288
|
+
.agent-card.error {
|
|
289
|
+
border-left: 3px solid var(--red);
|
|
194
290
|
}
|
|
195
291
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
padding: 20px;
|
|
201
|
-
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
202
|
-
transition: all 0.2s;
|
|
292
|
+
.agent-card-header {
|
|
293
|
+
display: flex;
|
|
294
|
+
justify-content: space-between;
|
|
295
|
+
align-items: center;
|
|
296
|
+
padding: 16px 20px;
|
|
203
297
|
}
|
|
204
298
|
|
|
205
|
-
.agent-card
|
|
206
|
-
|
|
299
|
+
.agent-card-left {
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
gap: 12px;
|
|
303
|
+
min-width: 0;
|
|
207
304
|
}
|
|
208
305
|
|
|
209
|
-
.agent-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
306
|
+
.agent-status-dot {
|
|
307
|
+
width: 10px;
|
|
308
|
+
height: 10px;
|
|
309
|
+
border-radius: 50%;
|
|
310
|
+
flex-shrink: 0;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.agent-status-dot.running {
|
|
314
|
+
background: var(--green);
|
|
315
|
+
box-shadow: 0 0 8px var(--green-glow);
|
|
316
|
+
animation: pulse 2s infinite;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.agent-status-dot.stopped { background: var(--text-muted); }
|
|
320
|
+
.agent-status-dot.error { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
|
|
321
|
+
|
|
322
|
+
@keyframes pulse {
|
|
323
|
+
0%, 100% { opacity: 1; }
|
|
324
|
+
50% { opacity: 0.5; }
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.agent-name {
|
|
328
|
+
font-size: 15px;
|
|
329
|
+
font-weight: 600;
|
|
330
|
+
color: var(--text-primary);
|
|
331
|
+
white-space: nowrap;
|
|
332
|
+
overflow: hidden;
|
|
333
|
+
text-overflow: ellipsis;
|
|
214
334
|
}
|
|
215
335
|
|
|
216
|
-
.agent-
|
|
336
|
+
.agent-project-link {
|
|
337
|
+
font-size: 12px;
|
|
338
|
+
color: var(--accent);
|
|
339
|
+
text-decoration: none;
|
|
217
340
|
display: flex;
|
|
218
341
|
align-items: center;
|
|
219
|
-
gap:
|
|
342
|
+
gap: 4px;
|
|
220
343
|
}
|
|
221
344
|
|
|
222
|
-
.agent-
|
|
223
|
-
|
|
224
|
-
color: #2c3e50;
|
|
345
|
+
.agent-project-link:hover {
|
|
346
|
+
text-decoration: underline;
|
|
225
347
|
}
|
|
226
348
|
|
|
227
|
-
.
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
display: inline-block;
|
|
349
|
+
.agent-card-right {
|
|
350
|
+
display: flex;
|
|
351
|
+
gap: 6px;
|
|
352
|
+
flex-shrink: 0;
|
|
232
353
|
}
|
|
233
354
|
|
|
234
|
-
.
|
|
235
|
-
|
|
236
|
-
|
|
355
|
+
.agent-card-meta {
|
|
356
|
+
display: flex;
|
|
357
|
+
gap: 24px;
|
|
358
|
+
padding: 0 20px 14px;
|
|
359
|
+
flex-wrap: wrap;
|
|
237
360
|
}
|
|
238
361
|
|
|
239
|
-
.
|
|
240
|
-
|
|
362
|
+
.meta-item {
|
|
363
|
+
font-size: 12px;
|
|
241
364
|
}
|
|
242
365
|
|
|
243
|
-
.
|
|
244
|
-
|
|
245
|
-
|
|
366
|
+
.meta-item .meta-label {
|
|
367
|
+
color: var(--text-muted);
|
|
368
|
+
margin-right: 6px;
|
|
246
369
|
}
|
|
247
370
|
|
|
248
|
-
.
|
|
249
|
-
|
|
371
|
+
.meta-item .meta-value {
|
|
372
|
+
color: var(--text-secondary);
|
|
373
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
250
374
|
}
|
|
251
375
|
|
|
252
|
-
|
|
376
|
+
/* ── Inline Logs ────────────────────────────────────── */
|
|
377
|
+
.agent-logs {
|
|
378
|
+
border-top: 1px solid var(--border);
|
|
379
|
+
max-height: 0;
|
|
380
|
+
overflow: hidden;
|
|
381
|
+
transition: max-height 0.3s ease;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.agent-logs.open {
|
|
385
|
+
max-height: 400px;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.agent-logs-header {
|
|
253
389
|
display: flex;
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
390
|
+
justify-content: space-between;
|
|
391
|
+
align-items: center;
|
|
392
|
+
padding: 10px 20px;
|
|
393
|
+
background: rgba(0,0,0,0.2);
|
|
257
394
|
}
|
|
258
395
|
|
|
259
|
-
.
|
|
396
|
+
.agent-logs-header span {
|
|
397
|
+
font-size: 12px;
|
|
260
398
|
font-weight: 600;
|
|
261
|
-
color:
|
|
262
|
-
|
|
399
|
+
color: var(--text-muted);
|
|
400
|
+
text-transform: uppercase;
|
|
401
|
+
letter-spacing: 0.05em;
|
|
263
402
|
}
|
|
264
403
|
|
|
265
|
-
.
|
|
266
|
-
|
|
267
|
-
|
|
404
|
+
.logs-content {
|
|
405
|
+
background: #0a0a0c;
|
|
406
|
+
color: #d4d4d8;
|
|
407
|
+
padding: 12px 20px;
|
|
408
|
+
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
409
|
+
font-size: 12px;
|
|
410
|
+
line-height: 1.6;
|
|
411
|
+
max-height: 320px;
|
|
412
|
+
overflow-y: auto;
|
|
413
|
+
white-space: pre-wrap;
|
|
414
|
+
word-wrap: break-word;
|
|
268
415
|
}
|
|
269
416
|
|
|
270
|
-
.
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
417
|
+
.logs-content::-webkit-scrollbar {
|
|
418
|
+
width: 6px;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.logs-content::-webkit-scrollbar-track {
|
|
422
|
+
background: transparent;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.logs-content::-webkit-scrollbar-thumb {
|
|
426
|
+
background: var(--border);
|
|
427
|
+
border-radius: 3px;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
/* ── Empty State ────────────────────────────────────── */
|
|
431
|
+
.empty-state {
|
|
432
|
+
text-align: center;
|
|
433
|
+
padding: 80px 20px;
|
|
434
|
+
border: 1px dashed var(--border);
|
|
435
|
+
border-radius: var(--radius);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.empty-state svg {
|
|
439
|
+
width: 48px;
|
|
440
|
+
height: 48px;
|
|
441
|
+
color: var(--text-muted);
|
|
442
|
+
margin-bottom: 16px;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.empty-state h3 {
|
|
446
|
+
font-size: 16px;
|
|
447
|
+
font-weight: 600;
|
|
448
|
+
color: var(--text-secondary);
|
|
449
|
+
margin-bottom: 6px;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.empty-state p {
|
|
453
|
+
font-size: 13px;
|
|
454
|
+
color: var(--text-muted);
|
|
455
|
+
margin-bottom: 20px;
|
|
274
456
|
}
|
|
275
457
|
|
|
276
|
-
/* Modal */
|
|
458
|
+
/* ── Modal ──────────────────────────────────────────── */
|
|
277
459
|
.modal {
|
|
278
460
|
display: none;
|
|
279
461
|
position: fixed;
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
height: 100%;
|
|
284
|
-
background: rgba(0,0,0,0.5);
|
|
462
|
+
inset: 0;
|
|
463
|
+
background: rgba(0,0,0,0.7);
|
|
464
|
+
backdrop-filter: blur(4px);
|
|
285
465
|
z-index: 1000;
|
|
286
466
|
align-items: center;
|
|
287
467
|
justify-content: center;
|
|
288
468
|
}
|
|
289
469
|
|
|
290
|
-
.modal.active {
|
|
291
|
-
display: flex;
|
|
292
|
-
}
|
|
470
|
+
.modal.active { display: flex; }
|
|
293
471
|
|
|
294
472
|
.modal-content {
|
|
295
|
-
background:
|
|
473
|
+
background: var(--bg-secondary);
|
|
474
|
+
border: 1px solid var(--border);
|
|
296
475
|
border-radius: 12px;
|
|
297
476
|
width: 90%;
|
|
298
|
-
max-width:
|
|
477
|
+
max-width: 520px;
|
|
299
478
|
max-height: 90vh;
|
|
300
479
|
overflow-y: auto;
|
|
301
|
-
box-shadow:
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
.modal-large {
|
|
305
|
-
max-width: 900px;
|
|
480
|
+
box-shadow: var(--shadow-lg);
|
|
306
481
|
}
|
|
307
482
|
|
|
308
483
|
.modal-header {
|
|
@@ -310,77 +485,75 @@ body {
|
|
|
310
485
|
justify-content: space-between;
|
|
311
486
|
align-items: center;
|
|
312
487
|
padding: 20px 24px;
|
|
313
|
-
border-bottom: 1px solid
|
|
488
|
+
border-bottom: 1px solid var(--border);
|
|
314
489
|
}
|
|
315
490
|
|
|
316
491
|
.modal-header h2 {
|
|
317
|
-
font-size:
|
|
318
|
-
|
|
492
|
+
font-size: 17px;
|
|
493
|
+
font-weight: 600;
|
|
319
494
|
}
|
|
320
495
|
|
|
321
496
|
.modal-close {
|
|
322
497
|
background: none;
|
|
323
498
|
border: none;
|
|
324
|
-
font-size:
|
|
325
|
-
color:
|
|
499
|
+
font-size: 20px;
|
|
500
|
+
color: var(--text-muted);
|
|
326
501
|
cursor: pointer;
|
|
327
|
-
line-height: 1;
|
|
328
|
-
padding: 0;
|
|
329
502
|
width: 32px;
|
|
330
503
|
height: 32px;
|
|
331
504
|
display: flex;
|
|
332
505
|
align-items: center;
|
|
333
506
|
justify-content: center;
|
|
334
|
-
border-radius:
|
|
335
|
-
transition: all 0.
|
|
507
|
+
border-radius: var(--radius-sm);
|
|
508
|
+
transition: all 0.15s;
|
|
336
509
|
}
|
|
337
510
|
|
|
338
511
|
.modal-close:hover {
|
|
339
|
-
background:
|
|
340
|
-
color:
|
|
512
|
+
background: var(--bg-input);
|
|
513
|
+
color: var(--text-primary);
|
|
341
514
|
}
|
|
342
515
|
|
|
343
|
-
.modal-body {
|
|
344
|
-
padding: 24px;
|
|
345
|
-
}
|
|
516
|
+
.modal-body { padding: 24px; }
|
|
346
517
|
|
|
347
|
-
/* Form */
|
|
518
|
+
/* ── Form ───────────────────────────────────────────── */
|
|
348
519
|
.form-group {
|
|
349
|
-
margin-bottom:
|
|
520
|
+
margin-bottom: 18px;
|
|
350
521
|
}
|
|
351
522
|
|
|
352
523
|
.form-group label {
|
|
353
524
|
display: block;
|
|
354
525
|
margin-bottom: 6px;
|
|
355
|
-
font-weight:
|
|
356
|
-
color:
|
|
357
|
-
font-size:
|
|
526
|
+
font-weight: 500;
|
|
527
|
+
color: var(--text-secondary);
|
|
528
|
+
font-size: 13px;
|
|
358
529
|
}
|
|
359
530
|
|
|
360
531
|
.form-group input[type="text"],
|
|
361
532
|
.form-group input[type="password"],
|
|
362
533
|
.form-group select {
|
|
363
534
|
width: 100%;
|
|
364
|
-
padding:
|
|
365
|
-
|
|
366
|
-
border
|
|
367
|
-
|
|
535
|
+
padding: 9px 12px;
|
|
536
|
+
background: var(--bg-input);
|
|
537
|
+
border: 1px solid var(--border);
|
|
538
|
+
border-radius: var(--radius-sm);
|
|
539
|
+
color: var(--text-primary);
|
|
540
|
+
font-size: 13px;
|
|
368
541
|
font-family: inherit;
|
|
369
|
-
transition: all 0.
|
|
542
|
+
transition: all 0.15s;
|
|
370
543
|
}
|
|
371
544
|
|
|
372
545
|
.form-group input:focus,
|
|
373
546
|
.form-group select:focus {
|
|
374
547
|
outline: none;
|
|
375
|
-
border-color:
|
|
376
|
-
box-shadow: 0 0 0 3px
|
|
548
|
+
border-color: var(--accent);
|
|
549
|
+
box-shadow: 0 0 0 3px var(--accent-glow);
|
|
377
550
|
}
|
|
378
551
|
|
|
379
552
|
.form-group small {
|
|
380
553
|
display: block;
|
|
381
554
|
margin-top: 4px;
|
|
382
|
-
font-size:
|
|
383
|
-
color:
|
|
555
|
+
font-size: 11px;
|
|
556
|
+
color: var(--text-muted);
|
|
384
557
|
}
|
|
385
558
|
|
|
386
559
|
.checkbox-label {
|
|
@@ -389,83 +562,61 @@ body {
|
|
|
389
562
|
gap: 8px;
|
|
390
563
|
cursor: pointer;
|
|
391
564
|
font-weight: normal;
|
|
565
|
+
font-size: 13px;
|
|
566
|
+
color: var(--text-secondary);
|
|
392
567
|
}
|
|
393
568
|
|
|
394
569
|
.checkbox-label input[type="checkbox"] {
|
|
395
|
-
width:
|
|
396
|
-
height:
|
|
570
|
+
width: 16px;
|
|
571
|
+
height: 16px;
|
|
572
|
+
accent-color: var(--accent);
|
|
397
573
|
cursor: pointer;
|
|
398
574
|
}
|
|
399
575
|
|
|
400
576
|
.form-actions {
|
|
401
577
|
display: flex;
|
|
402
|
-
gap:
|
|
578
|
+
gap: 10px;
|
|
403
579
|
justify-content: flex-end;
|
|
404
580
|
margin-top: 24px;
|
|
405
|
-
padding-top:
|
|
406
|
-
border-top: 1px solid
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
/* Logs */
|
|
410
|
-
.logs-controls {
|
|
411
|
-
display: flex;
|
|
412
|
-
gap: 12px;
|
|
413
|
-
margin-bottom: 16px;
|
|
414
|
-
align-items: center;
|
|
581
|
+
padding-top: 20px;
|
|
582
|
+
border-top: 1px solid var(--border);
|
|
415
583
|
}
|
|
416
584
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
padding:
|
|
421
|
-
border-radius:
|
|
422
|
-
font-
|
|
423
|
-
font-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
overflow-y: auto;
|
|
427
|
-
white-space: pre-wrap;
|
|
428
|
-
word-wrap: break-word;
|
|
585
|
+
/* ── Badge ──────────────────────────────────────────── */
|
|
586
|
+
.badge {
|
|
587
|
+
display: inline-block;
|
|
588
|
+
padding: 3px 10px;
|
|
589
|
+
border-radius: 12px;
|
|
590
|
+
font-size: 11px;
|
|
591
|
+
font-weight: 600;
|
|
592
|
+
text-transform: uppercase;
|
|
593
|
+
letter-spacing: 0.03em;
|
|
429
594
|
}
|
|
430
595
|
|
|
431
|
-
.
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
font-style: italic;
|
|
435
|
-
}
|
|
596
|
+
.badge-running { background: var(--green-glow); color: var(--green); }
|
|
597
|
+
.badge-stopped { background: rgba(113,113,122,0.15); color: var(--text-muted); }
|
|
598
|
+
.badge-error { background: var(--red-glow); color: var(--red); }
|
|
436
599
|
|
|
437
|
-
/* Responsive */
|
|
600
|
+
/* ── Responsive ─────────────────────────────────────── */
|
|
438
601
|
@media (max-width: 768px) {
|
|
439
|
-
.
|
|
440
|
-
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
.
|
|
444
|
-
flex-direction: column;
|
|
445
|
-
gap: 16px;
|
|
446
|
-
align-items: flex-start;
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
.system-info {
|
|
450
|
-
flex-direction: column;
|
|
451
|
-
gap: 8px;
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
.agent-actions {
|
|
455
|
-
flex-direction: column;
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
.agent-actions .btn {
|
|
459
|
-
width: 100%;
|
|
460
|
-
}
|
|
602
|
+
.container { padding: 16px; }
|
|
603
|
+
.header { flex-direction: column; gap: 12px; align-items: flex-start; }
|
|
604
|
+
.health-grid { grid-template-columns: repeat(2, 1fr); }
|
|
605
|
+
.agent-card-meta { gap: 12px; }
|
|
606
|
+
.agent-card-right .btn span.btn-label { display: none; }
|
|
461
607
|
}
|
|
462
608
|
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
to { transform: rotate(360deg); }
|
|
609
|
+
@media (max-width: 480px) {
|
|
610
|
+
.health-grid { grid-template-columns: 1fr; }
|
|
466
611
|
}
|
|
467
612
|
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
613
|
+
/* ── Animations ─────────────────────────────────────── */
|
|
614
|
+
@keyframes spin { to { transform: rotate(360deg); } }
|
|
615
|
+
.spinning { animation: spin 1s linear infinite; }
|
|
616
|
+
|
|
617
|
+
@keyframes fadeIn {
|
|
618
|
+
from { opacity: 0; transform: translateY(4px); }
|
|
619
|
+
to { opacity: 1; transform: translateY(0); }
|
|
471
620
|
}
|
|
621
|
+
|
|
622
|
+
.agent-card { animation: fadeIn 0.2s ease; }
|