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