agent-relay 1.0.2 → 1.0.3
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/daemon/connection.d.ts +2 -0
- package/dist/daemon/connection.d.ts.map +1 -1
- package/dist/daemon/connection.js +5 -0
- package/dist/daemon/connection.js.map +1 -1
- package/dist/daemon/router.d.ts +1 -0
- package/dist/daemon/router.d.ts.map +1 -1
- package/dist/daemon/router.js.map +1 -1
- package/dist/daemon/server.d.ts.map +1 -1
- package/dist/daemon/server.js +8 -4
- package/dist/daemon/server.js.map +1 -1
- package/dist/dashboard/public/index.html +156 -331
- package/dist/dashboard/server.js +2 -2
- package/dist/dashboard/server.js.map +1 -1
- package/dist/dashboard/start.d.ts +6 -0
- package/dist/dashboard/start.d.ts.map +1 -0
- package/dist/dashboard/start.js +13 -0
- package/dist/dashboard/start.js.map +1 -0
- package/dist/protocol/types.d.ts +2 -0
- package/dist/protocol/types.d.ts.map +1 -1
- package/dist/wrapper/client.d.ts +2 -0
- package/dist/wrapper/client.d.ts.map +1 -1
- package/dist/wrapper/client.js +2 -0
- package/dist/wrapper/client.js.map +1 -1
- package/dist/wrapper/tmux-wrapper.d.ts.map +1 -1
- package/dist/wrapper/tmux-wrapper.js +6 -2
- package/dist/wrapper/tmux-wrapper.js.map +1 -1
- package/package.json +2 -1
|
@@ -4,396 +4,251 @@
|
|
|
4
4
|
<title>Agent Relay</title>
|
|
5
5
|
<style>
|
|
6
6
|
:root {
|
|
7
|
-
--bg-primary: #
|
|
8
|
-
--bg-secondary: #
|
|
9
|
-
--bg-card:
|
|
10
|
-
--
|
|
11
|
-
--border-
|
|
12
|
-
--
|
|
13
|
-
--primary
|
|
14
|
-
--
|
|
15
|
-
--
|
|
16
|
-
--text: #
|
|
17
|
-
--text-muted: #
|
|
18
|
-
--success: #
|
|
7
|
+
--bg-primary: #09090b;
|
|
8
|
+
--bg-secondary: #18181b;
|
|
9
|
+
--bg-card: #18181b;
|
|
10
|
+
--bg-elevated: #27272a;
|
|
11
|
+
--border-color: #27272a;
|
|
12
|
+
--border-hover: #3f3f46;
|
|
13
|
+
--primary: #3b82f6;
|
|
14
|
+
--primary-muted: rgba(59, 130, 246, 0.15);
|
|
15
|
+
--text: #fafafa;
|
|
16
|
+
--text-secondary: #a1a1aa;
|
|
17
|
+
--text-muted: #71717a;
|
|
18
|
+
--success: #22c55e;
|
|
19
|
+
--success-muted: rgba(34, 197, 94, 0.15);
|
|
19
20
|
--error: #ef4444;
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--gradient-hero: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #eab308 100%);
|
|
21
|
+
--error-muted: rgba(239, 68, 68, 0.15);
|
|
22
|
+
--warning: #f59e0b;
|
|
23
|
+
--warning-muted: rgba(245, 158, 11, 0.15);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
27
27
|
|
|
28
28
|
body {
|
|
29
|
-
font-family:
|
|
29
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
30
30
|
background: var(--bg-primary);
|
|
31
31
|
color: var(--text);
|
|
32
32
|
min-height: 100vh;
|
|
33
33
|
overflow-x: hidden;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
/* Animated background */
|
|
37
|
-
body::before {
|
|
38
|
-
content: '';
|
|
39
|
-
position: fixed;
|
|
40
|
-
top: 0; left: 0; right: 0; bottom: 0;
|
|
41
|
-
background:
|
|
42
|
-
radial-gradient(ellipse at 20% 20%, rgba(249, 115, 22, 0.15) 0%, transparent 50%),
|
|
43
|
-
radial-gradient(ellipse at 80% 80%, rgba(234, 179, 8, 0.15) 0%, transparent 50%),
|
|
44
|
-
radial-gradient(ellipse at 40% 60%, rgba(251, 191, 36, 0.1) 0%, transparent 40%);
|
|
45
|
-
animation: bgPulse 8s ease-in-out infinite;
|
|
46
|
-
pointer-events: none;
|
|
47
|
-
z-index: 0;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@keyframes bgPulse {
|
|
51
|
-
0%, 100% { opacity: 1; transform: scale(1); }
|
|
52
|
-
50% { opacity: 0.8; transform: scale(1.05); }
|
|
53
|
-
}
|
|
54
|
-
|
|
55
36
|
.container {
|
|
56
|
-
|
|
57
|
-
z-index: 1;
|
|
58
|
-
max-width: 1600px;
|
|
37
|
+
max-width: 1400px;
|
|
59
38
|
margin: 0 auto;
|
|
60
39
|
display: grid;
|
|
61
|
-
grid-template-columns:
|
|
62
|
-
gap:
|
|
40
|
+
grid-template-columns: 320px 1fr;
|
|
41
|
+
gap: 1px;
|
|
63
42
|
height: 100vh;
|
|
64
|
-
|
|
43
|
+
background: var(--border-color);
|
|
65
44
|
}
|
|
66
45
|
|
|
67
46
|
.sidebar {
|
|
68
47
|
display: flex;
|
|
69
48
|
flex-direction: column;
|
|
70
|
-
|
|
71
|
-
overflow
|
|
72
|
-
padding-right: 8px;
|
|
49
|
+
background: var(--bg-primary);
|
|
50
|
+
overflow: hidden;
|
|
73
51
|
}
|
|
74
52
|
|
|
75
53
|
.main-content {
|
|
76
54
|
display: flex;
|
|
77
55
|
flex-direction: column;
|
|
78
|
-
|
|
56
|
+
background: var(--bg-primary);
|
|
79
57
|
overflow: hidden;
|
|
80
58
|
}
|
|
81
59
|
|
|
82
|
-
/* Glowing header */
|
|
83
60
|
.header {
|
|
84
61
|
display: flex;
|
|
85
62
|
justify-content: space-between;
|
|
86
63
|
align-items: center;
|
|
87
|
-
padding: 20px
|
|
88
|
-
|
|
89
|
-
border-radius: 16px;
|
|
90
|
-
border: 1px solid var(--border-color);
|
|
91
|
-
backdrop-filter: blur(20px);
|
|
92
|
-
position: relative;
|
|
93
|
-
overflow: hidden;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.header::before {
|
|
97
|
-
content: '';
|
|
98
|
-
position: absolute;
|
|
99
|
-
top: 0; left: 0; right: 0;
|
|
100
|
-
height: 2px;
|
|
101
|
-
background: var(--gradient-hero);
|
|
102
|
-
animation: shimmer 3s linear infinite;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
@keyframes shimmer {
|
|
106
|
-
0% { background-position: -200% 0; }
|
|
107
|
-
100% { background-position: 200% 0; }
|
|
64
|
+
padding: 16px 20px;
|
|
65
|
+
border-bottom: 1px solid var(--border-color);
|
|
108
66
|
}
|
|
109
67
|
|
|
110
68
|
.logo {
|
|
111
69
|
display: flex;
|
|
112
70
|
align-items: center;
|
|
113
|
-
gap:
|
|
71
|
+
gap: 10px;
|
|
114
72
|
}
|
|
115
73
|
|
|
116
74
|
.logo-icon {
|
|
117
|
-
width:
|
|
118
|
-
height:
|
|
119
|
-
background: var(--
|
|
120
|
-
border-radius:
|
|
75
|
+
width: 32px;
|
|
76
|
+
height: 32px;
|
|
77
|
+
background: var(--primary);
|
|
78
|
+
border-radius: 8px;
|
|
121
79
|
display: flex;
|
|
122
80
|
align-items: center;
|
|
123
81
|
justify-content: center;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
@keyframes logoFloat {
|
|
130
|
-
0%, 100% { transform: translateY(0); }
|
|
131
|
-
50% { transform: translateY(-3px); }
|
|
82
|
+
color: white;
|
|
83
|
+
font-weight: 600;
|
|
84
|
+
font-size: 14px;
|
|
132
85
|
}
|
|
133
86
|
|
|
134
87
|
h1 {
|
|
135
|
-
font-size:
|
|
136
|
-
font-weight:
|
|
137
|
-
|
|
138
|
-
background-size: 200% auto;
|
|
139
|
-
-webkit-background-clip: text;
|
|
140
|
-
-webkit-text-fill-color: transparent;
|
|
141
|
-
background-clip: text;
|
|
142
|
-
animation: gradientText 4s linear infinite;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
@keyframes gradientText {
|
|
146
|
-
0% { background-position: 0% center; }
|
|
147
|
-
100% { background-position: 200% center; }
|
|
88
|
+
font-size: 1rem;
|
|
89
|
+
font-weight: 600;
|
|
90
|
+
color: var(--text);
|
|
148
91
|
}
|
|
149
92
|
|
|
150
93
|
h2 {
|
|
151
|
-
|
|
152
|
-
font-weight:
|
|
94
|
+
font-size: 0.875rem;
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
color: var(--text-secondary);
|
|
153
97
|
}
|
|
154
98
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
padding:
|
|
159
|
-
border-radius: 16px;
|
|
160
|
-
border: 1px solid var(--border-color);
|
|
161
|
-
backdrop-filter: blur(20px);
|
|
162
|
-
position: relative;
|
|
163
|
-
overflow: hidden;
|
|
164
|
-
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
165
|
-
animation: cardFadeIn 0.5s ease-out backwards;
|
|
99
|
+
.agents-section {
|
|
100
|
+
flex: 1;
|
|
101
|
+
overflow-y: auto;
|
|
102
|
+
padding: 12px;
|
|
166
103
|
}
|
|
167
104
|
|
|
168
|
-
.
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
opacity: 0.5;
|
|
176
|
-
transition: all 0.3s;
|
|
105
|
+
.agents-header {
|
|
106
|
+
padding: 8px 8px 12px;
|
|
107
|
+
font-size: 0.75rem;
|
|
108
|
+
font-weight: 500;
|
|
109
|
+
color: var(--text-muted);
|
|
110
|
+
text-transform: uppercase;
|
|
111
|
+
letter-spacing: 0.05em;
|
|
177
112
|
}
|
|
178
113
|
|
|
179
|
-
.agent-card
|
|
180
|
-
|
|
181
|
-
border-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
114
|
+
.agent-card {
|
|
115
|
+
padding: 12px;
|
|
116
|
+
border-radius: 8px;
|
|
117
|
+
margin-bottom: 4px;
|
|
118
|
+
transition: background 0.15s;
|
|
119
|
+
cursor: default;
|
|
185
120
|
}
|
|
186
121
|
|
|
187
|
-
.agent-card:hover
|
|
188
|
-
|
|
189
|
-
width: 6px;
|
|
122
|
+
.agent-card:hover {
|
|
123
|
+
background: var(--bg-secondary);
|
|
190
124
|
}
|
|
191
125
|
|
|
192
126
|
.agent-card.active {
|
|
193
|
-
|
|
194
|
-
background: rgba(249, 115, 22, 0.1);
|
|
127
|
+
background: var(--bg-elevated);
|
|
195
128
|
}
|
|
196
129
|
|
|
197
|
-
.agent-card.active::before {
|
|
198
|
-
opacity: 1;
|
|
199
|
-
animation: borderPulse 2s ease-in-out infinite;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
@keyframes borderPulse {
|
|
203
|
-
0%, 100% { opacity: 1; }
|
|
204
|
-
50% { opacity: 0.5; }
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
@keyframes cardFadeIn {
|
|
208
|
-
from { opacity: 0; transform: translateX(-20px); }
|
|
209
|
-
to { opacity: 1; transform: translateX(0); }
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.agent-card:nth-child(1) { animation-delay: 0.1s; }
|
|
213
|
-
.agent-card:nth-child(2) { animation-delay: 0.2s; }
|
|
214
|
-
.agent-card:nth-child(3) { animation-delay: 0.3s; }
|
|
215
|
-
.agent-card:nth-child(4) { animation-delay: 0.4s; }
|
|
216
|
-
|
|
217
130
|
.agent-header {
|
|
218
131
|
display: flex;
|
|
219
132
|
justify-content: space-between;
|
|
220
133
|
align-items: center;
|
|
221
|
-
margin-bottom:
|
|
134
|
+
margin-bottom: 8px;
|
|
222
135
|
}
|
|
223
136
|
|
|
224
137
|
.agent-name {
|
|
225
|
-
font-weight:
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
letter-spacing: -0.02em;
|
|
138
|
+
font-weight: 600;
|
|
139
|
+
font-size: 0.875rem;
|
|
140
|
+
color: var(--text);
|
|
229
141
|
}
|
|
230
142
|
|
|
231
|
-
.agent-
|
|
232
|
-
color: var(--text-muted);
|
|
233
|
-
font-size: 0.85em;
|
|
234
|
-
margin-bottom: 16px;
|
|
143
|
+
.agent-meta {
|
|
235
144
|
display: flex;
|
|
236
145
|
align-items: center;
|
|
237
|
-
gap:
|
|
146
|
+
gap: 6px;
|
|
147
|
+
margin-bottom: 10px;
|
|
238
148
|
}
|
|
239
149
|
|
|
240
|
-
.agent-role
|
|
241
|
-
|
|
242
|
-
color: var(--
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
150
|
+
.agent-role {
|
|
151
|
+
font-size: 0.75rem;
|
|
152
|
+
color: var(--text-muted);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.cli-badge {
|
|
156
|
+
background: var(--bg-elevated);
|
|
157
|
+
color: var(--text-secondary);
|
|
158
|
+
padding: 2px 6px;
|
|
159
|
+
border-radius: 4px;
|
|
160
|
+
font-size: 0.7rem;
|
|
246
161
|
font-weight: 500;
|
|
247
162
|
}
|
|
248
163
|
|
|
249
164
|
.agent-status {
|
|
250
|
-
background: rgba(0, 0, 0, 0.3);
|
|
251
|
-
padding: 12px 16px;
|
|
252
|
-
border-radius: 10px;
|
|
253
|
-
font-size: 0.9em;
|
|
254
|
-
color: var(--accent-light);
|
|
255
|
-
border: 1px solid rgba(6, 182, 212, 0.2);
|
|
256
165
|
display: flex;
|
|
257
166
|
align-items: center;
|
|
258
|
-
gap:
|
|
167
|
+
gap: 6px;
|
|
168
|
+
font-size: 0.8rem;
|
|
169
|
+
color: var(--text-secondary);
|
|
259
170
|
}
|
|
260
171
|
|
|
261
172
|
.status-dot {
|
|
262
|
-
width:
|
|
263
|
-
height:
|
|
173
|
+
width: 6px;
|
|
174
|
+
height: 6px;
|
|
264
175
|
border-radius: 50%;
|
|
265
|
-
background: var(--
|
|
266
|
-
animation: statusPulse 2s ease-in-out infinite;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
@keyframes statusPulse {
|
|
270
|
-
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
|
|
271
|
-
50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(6, 182, 212, 0); }
|
|
176
|
+
background: var(--success);
|
|
272
177
|
}
|
|
273
178
|
|
|
274
179
|
.badge {
|
|
275
|
-
background: var(--
|
|
276
|
-
color:
|
|
277
|
-
padding:
|
|
278
|
-
border-radius:
|
|
279
|
-
font-size: 0.
|
|
280
|
-
font-weight:
|
|
281
|
-
letter-spacing: 0.5px;
|
|
282
|
-
animation: badgePulse 2s ease-in-out infinite;
|
|
283
|
-
box-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
@keyframes badgePulse {
|
|
287
|
-
0%, 100% { transform: scale(1); }
|
|
288
|
-
50% { transform: scale(1.05); }
|
|
180
|
+
background: var(--primary-muted);
|
|
181
|
+
color: var(--primary);
|
|
182
|
+
padding: 2px 8px;
|
|
183
|
+
border-radius: 10px;
|
|
184
|
+
font-size: 0.7rem;
|
|
185
|
+
font-weight: 600;
|
|
289
186
|
}
|
|
290
187
|
|
|
291
188
|
/* Activity Log */
|
|
292
189
|
.activity-log {
|
|
293
|
-
background: var(--bg-card);
|
|
294
|
-
border-radius: 20px;
|
|
295
|
-
border: 1px solid var(--border-color);
|
|
296
|
-
backdrop-filter: blur(20px);
|
|
297
190
|
display: flex;
|
|
298
191
|
flex-direction: column;
|
|
299
192
|
flex: 1;
|
|
300
193
|
overflow: hidden;
|
|
301
|
-
position: relative;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
.activity-log::before {
|
|
305
|
-
content: '';
|
|
306
|
-
position: absolute;
|
|
307
|
-
top: 0; left: 0; right: 0;
|
|
308
|
-
height: 1px;
|
|
309
|
-
background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
|
|
310
194
|
}
|
|
311
195
|
|
|
312
196
|
.log-header {
|
|
313
|
-
padding: 20px
|
|
197
|
+
padding: 16px 20px;
|
|
314
198
|
border-bottom: 1px solid var(--border-color);
|
|
315
199
|
display: flex;
|
|
316
200
|
justify-content: space-between;
|
|
317
201
|
align-items: center;
|
|
318
|
-
background: rgba(0, 0, 0, 0.2);
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
.log-header h2 {
|
|
322
|
-
display: flex;
|
|
323
|
-
align-items: center;
|
|
324
|
-
gap: 10px;
|
|
325
202
|
}
|
|
326
203
|
|
|
327
204
|
.live-indicator {
|
|
328
205
|
display: flex;
|
|
329
206
|
align-items: center;
|
|
330
207
|
gap: 6px;
|
|
331
|
-
font-size: 0.
|
|
208
|
+
font-size: 0.75rem;
|
|
332
209
|
color: var(--text-muted);
|
|
333
|
-
background: rgba(0, 0, 0, 0.3);
|
|
334
|
-
padding: 6px 12px;
|
|
335
|
-
border-radius: 20px;
|
|
336
210
|
}
|
|
337
211
|
|
|
338
212
|
.live-dot {
|
|
339
|
-
width:
|
|
340
|
-
height:
|
|
213
|
+
width: 6px;
|
|
214
|
+
height: 6px;
|
|
341
215
|
border-radius: 50%;
|
|
342
216
|
background: var(--success);
|
|
343
|
-
animation: livePulse 1.5s ease-in-out infinite;
|
|
344
|
-
}
|
|
345
|
-
|
|
346
|
-
@keyframes livePulse {
|
|
347
|
-
0%, 100% { opacity: 1; transform: scale(1); }
|
|
348
|
-
50% { opacity: 0.5; transform: scale(0.8); }
|
|
349
217
|
}
|
|
350
218
|
|
|
351
219
|
.log-content {
|
|
352
220
|
overflow-y: auto;
|
|
353
|
-
padding: 0;
|
|
354
221
|
flex: 1;
|
|
355
222
|
display: flex;
|
|
356
223
|
flex-direction: column-reverse;
|
|
357
224
|
}
|
|
358
225
|
|
|
359
226
|
.message {
|
|
360
|
-
padding: 20px
|
|
361
|
-
border-bottom: 1px solid
|
|
227
|
+
padding: 16px 20px;
|
|
228
|
+
border-bottom: 1px solid var(--border-color);
|
|
362
229
|
display: flex;
|
|
363
|
-
gap:
|
|
364
|
-
transition: background 0.
|
|
230
|
+
gap: 12px;
|
|
231
|
+
transition: background 0.15s;
|
|
365
232
|
}
|
|
366
233
|
|
|
367
234
|
.message:hover {
|
|
368
|
-
background:
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
@keyframes messageFadeIn {
|
|
372
|
-
from { opacity: 0; transform: translateY(20px); }
|
|
373
|
-
to { opacity: 1; transform: translateY(0); }
|
|
235
|
+
background: var(--bg-secondary);
|
|
374
236
|
}
|
|
375
237
|
|
|
376
238
|
.message:last-child { border-bottom: none; }
|
|
377
239
|
|
|
378
240
|
.msg-avatar {
|
|
379
|
-
width:
|
|
380
|
-
height:
|
|
381
|
-
border-radius:
|
|
382
|
-
background: var(--
|
|
383
|
-
color:
|
|
241
|
+
width: 36px;
|
|
242
|
+
height: 36px;
|
|
243
|
+
border-radius: 8px;
|
|
244
|
+
background: var(--bg-elevated);
|
|
245
|
+
color: var(--text-secondary);
|
|
384
246
|
display: flex;
|
|
385
247
|
align-items: center;
|
|
386
248
|
justify-content: center;
|
|
387
|
-
font-weight:
|
|
388
|
-
font-size:
|
|
249
|
+
font-weight: 600;
|
|
250
|
+
font-size: 0.8rem;
|
|
389
251
|
flex-shrink: 0;
|
|
390
|
-
box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
|
|
391
|
-
transition: transform 0.3s, box-shadow 0.3s;
|
|
392
|
-
}
|
|
393
|
-
|
|
394
|
-
.message:hover .msg-avatar {
|
|
395
|
-
transform: scale(1.1) rotate(5deg);
|
|
396
|
-
box-shadow: 0 6px 25px rgba(249, 115, 22, 0.5);
|
|
397
252
|
}
|
|
398
253
|
|
|
399
254
|
.msg-body { flex: 1; min-width: 0; }
|
|
@@ -401,158 +256,131 @@
|
|
|
401
256
|
.msg-meta {
|
|
402
257
|
display: flex;
|
|
403
258
|
align-items: center;
|
|
404
|
-
gap:
|
|
405
|
-
margin-bottom:
|
|
406
|
-
flex-wrap: wrap;
|
|
259
|
+
gap: 8px;
|
|
260
|
+
margin-bottom: 6px;
|
|
407
261
|
}
|
|
408
262
|
|
|
409
263
|
.msg-sender {
|
|
410
|
-
|
|
411
|
-
font-
|
|
412
|
-
|
|
264
|
+
font-weight: 600;
|
|
265
|
+
font-size: 0.875rem;
|
|
266
|
+
color: var(--text);
|
|
413
267
|
}
|
|
414
268
|
|
|
415
269
|
.msg-arrow {
|
|
416
|
-
color: var(--
|
|
417
|
-
font-size:
|
|
418
|
-
animation: arrowBounce 1s ease-in-out infinite;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
@keyframes arrowBounce {
|
|
422
|
-
0%, 100% { transform: translateX(0); }
|
|
423
|
-
50% { transform: translateX(3px); }
|
|
270
|
+
color: var(--text-muted);
|
|
271
|
+
font-size: 0.75rem;
|
|
424
272
|
}
|
|
425
273
|
|
|
426
274
|
.msg-target {
|
|
427
|
-
color: var(--
|
|
428
|
-
font-weight:
|
|
275
|
+
color: var(--primary);
|
|
276
|
+
font-weight: 500;
|
|
277
|
+
font-size: 0.875rem;
|
|
429
278
|
}
|
|
430
279
|
|
|
431
280
|
.msg-time {
|
|
432
281
|
color: var(--text-muted);
|
|
433
|
-
font-size: 0.
|
|
282
|
+
font-size: 0.75rem;
|
|
434
283
|
margin-left: auto;
|
|
435
|
-
background: rgba(0, 0, 0, 0.2);
|
|
436
|
-
padding: 4px 10px;
|
|
437
|
-
border-radius: 12px;
|
|
438
284
|
}
|
|
439
285
|
|
|
440
286
|
.msg-text {
|
|
441
|
-
font-family:
|
|
442
|
-
font-size: 0.
|
|
287
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
288
|
+
font-size: 0.8rem;
|
|
443
289
|
white-space: pre-wrap;
|
|
444
|
-
color: var(--text);
|
|
445
|
-
background:
|
|
446
|
-
padding:
|
|
447
|
-
border-radius:
|
|
448
|
-
|
|
449
|
-
line-height: 1.6;
|
|
290
|
+
color: var(--text-secondary);
|
|
291
|
+
background: var(--bg-secondary);
|
|
292
|
+
padding: 12px;
|
|
293
|
+
border-radius: 6px;
|
|
294
|
+
line-height: 1.5;
|
|
450
295
|
}
|
|
451
296
|
|
|
452
297
|
/* Connection Status */
|
|
453
298
|
#connection-status {
|
|
454
|
-
font-size: 0.
|
|
455
|
-
font-weight:
|
|
456
|
-
padding:
|
|
457
|
-
border-radius:
|
|
458
|
-
background:
|
|
299
|
+
font-size: 0.75rem;
|
|
300
|
+
font-weight: 500;
|
|
301
|
+
padding: 4px 10px;
|
|
302
|
+
border-radius: 6px;
|
|
303
|
+
background: var(--success-muted);
|
|
459
304
|
color: var(--success);
|
|
460
|
-
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
461
305
|
display: flex;
|
|
462
306
|
align-items: center;
|
|
463
|
-
gap:
|
|
464
|
-
transition: all 0.
|
|
307
|
+
gap: 6px;
|
|
308
|
+
transition: all 0.15s;
|
|
465
309
|
}
|
|
466
310
|
|
|
467
311
|
#connection-status .dot {
|
|
468
|
-
width:
|
|
469
|
-
height:
|
|
312
|
+
width: 6px;
|
|
313
|
+
height: 6px;
|
|
470
314
|
border-radius: 50%;
|
|
471
315
|
background: var(--success);
|
|
472
|
-
animation: connPulse 2s ease-in-out infinite;
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
@keyframes connPulse {
|
|
476
|
-
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
|
|
477
|
-
50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
|
|
478
316
|
}
|
|
479
317
|
|
|
480
318
|
.disconnected {
|
|
481
|
-
background:
|
|
319
|
+
background: var(--error-muted) !important;
|
|
482
320
|
color: var(--error) !important;
|
|
483
|
-
border-color: rgba(239, 68, 68, 0.3) !important;
|
|
484
321
|
}
|
|
485
322
|
|
|
486
323
|
.disconnected .dot {
|
|
487
324
|
background: var(--error) !important;
|
|
488
|
-
animation: none !important;
|
|
489
325
|
}
|
|
490
326
|
|
|
491
327
|
.empty-state {
|
|
492
328
|
text-align: center;
|
|
493
|
-
padding:
|
|
329
|
+
padding: 48px 24px;
|
|
494
330
|
color: var(--text-muted);
|
|
495
331
|
}
|
|
496
332
|
|
|
497
|
-
.empty-state-icon {
|
|
498
|
-
font-size: 48px;
|
|
499
|
-
margin-bottom: 16px;
|
|
500
|
-
opacity: 0.5;
|
|
501
|
-
}
|
|
502
|
-
|
|
503
333
|
.empty-state-text {
|
|
504
|
-
font-size:
|
|
334
|
+
font-size: 0.875rem;
|
|
505
335
|
line-height: 1.6;
|
|
506
336
|
}
|
|
507
337
|
|
|
508
338
|
/* Scrollbar */
|
|
509
|
-
::-webkit-scrollbar { width:
|
|
339
|
+
::-webkit-scrollbar { width: 6px; }
|
|
510
340
|
::-webkit-scrollbar-track { background: transparent; }
|
|
511
341
|
::-webkit-scrollbar-thumb {
|
|
512
|
-
background:
|
|
513
|
-
border-radius:
|
|
342
|
+
background: var(--border-hover);
|
|
343
|
+
border-radius: 3px;
|
|
514
344
|
}
|
|
515
345
|
::-webkit-scrollbar-thumb:hover {
|
|
516
|
-
background:
|
|
346
|
+
background: var(--text-muted);
|
|
517
347
|
}
|
|
518
348
|
|
|
519
349
|
.last-active {
|
|
520
|
-
margin-top:
|
|
521
|
-
font-size: 0.
|
|
350
|
+
margin-top: 8px;
|
|
351
|
+
font-size: 0.7rem;
|
|
522
352
|
color: var(--text-muted);
|
|
523
|
-
text-align: right;
|
|
524
|
-
opacity: 0.7;
|
|
525
353
|
}
|
|
526
354
|
</style>
|
|
527
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
528
355
|
</head>
|
|
529
356
|
<body>
|
|
530
357
|
<div class="container">
|
|
531
358
|
<div class="sidebar">
|
|
532
359
|
<div class="header">
|
|
533
360
|
<div class="logo">
|
|
534
|
-
<div class="logo-icon"
|
|
361
|
+
<div class="logo-icon">AR</div>
|
|
535
362
|
<h1>Agent Relay</h1>
|
|
536
363
|
</div>
|
|
537
364
|
<div id="connection-status">
|
|
538
365
|
<span class="dot"></span>
|
|
539
|
-
<span>
|
|
366
|
+
<span>Connected</span>
|
|
540
367
|
</div>
|
|
541
368
|
</div>
|
|
542
|
-
<div
|
|
543
|
-
|
|
369
|
+
<div class="agents-section">
|
|
370
|
+
<div class="agents-header">Agents</div>
|
|
371
|
+
<div id="agents">
|
|
372
|
+
<!-- Agents injected here -->
|
|
373
|
+
</div>
|
|
544
374
|
</div>
|
|
545
375
|
</div>
|
|
546
376
|
|
|
547
377
|
<div class="main-content">
|
|
548
378
|
<div class="activity-log">
|
|
549
379
|
<div class="log-header">
|
|
550
|
-
<h2>
|
|
551
|
-
<span>Live Activity</span>
|
|
552
|
-
</h2>
|
|
380
|
+
<h2>Activity</h2>
|
|
553
381
|
<div class="live-indicator">
|
|
554
382
|
<span class="live-dot"></span>
|
|
555
|
-
<span>
|
|
383
|
+
<span>Live</span>
|
|
556
384
|
</div>
|
|
557
385
|
</div>
|
|
558
386
|
<div class="log-content" id="log">
|
|
@@ -603,10 +431,9 @@
|
|
|
603
431
|
<div class="agent-card ${a.messageCount > 0 ? 'active' : ''}">
|
|
604
432
|
<div class="agent-header">
|
|
605
433
|
<div class="agent-name">${a.name}</div>
|
|
606
|
-
${a.messageCount > 0 ? `<span class="badge">${a.messageCount}
|
|
434
|
+
${a.messageCount > 0 ? `<span class="badge">${a.messageCount}</span>` : ''}
|
|
607
435
|
</div>
|
|
608
|
-
<div class="agent-
|
|
609
|
-
${a.role}
|
|
436
|
+
<div class="agent-meta">
|
|
610
437
|
<span class="cli-badge">${a.cli}</span>
|
|
611
438
|
</div>
|
|
612
439
|
<div class="agent-status">
|
|
@@ -614,7 +441,7 @@
|
|
|
614
441
|
${a.status && a.status !== 'Idle' ? a.status : 'Ready'}
|
|
615
442
|
</div>
|
|
616
443
|
<div class="last-active">
|
|
617
|
-
${a.lastActive ?
|
|
444
|
+
${a.lastActive ? timeAgo(new Date(a.lastActive)) : 'No activity'}
|
|
618
445
|
</div>
|
|
619
446
|
</div>
|
|
620
447
|
`).join('');
|
|
@@ -625,8 +452,7 @@
|
|
|
625
452
|
} else if (!agentsContainer.querySelector('.empty-state')) {
|
|
626
453
|
agentsContainer.innerHTML = `
|
|
627
454
|
<div class="empty-state">
|
|
628
|
-
<div class="empty-state-
|
|
629
|
-
<div class="empty-state-text">Waiting for agents to connect...</div>
|
|
455
|
+
<div class="empty-state-text">Waiting for agents...</div>
|
|
630
456
|
</div>
|
|
631
457
|
`;
|
|
632
458
|
}
|
|
@@ -642,8 +468,7 @@
|
|
|
642
468
|
} else if (!logContainer.querySelector('.empty-state')) {
|
|
643
469
|
logContainer.innerHTML = `
|
|
644
470
|
<div class="empty-state">
|
|
645
|
-
<div class="empty-state-
|
|
646
|
-
<div class="empty-state-text">No messages yet.<br>Start your agents to see the conversation!</div>
|
|
471
|
+
<div class="empty-state-text">No messages yet</div>
|
|
647
472
|
</div>
|
|
648
473
|
`;
|
|
649
474
|
}
|