@agent-link/server 0.1.163 → 0.1.165

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.
@@ -0,0 +1,682 @@
1
+ /* ══════════════════════════════════════════════════════════════════════════════
2
+ Loop Mode Styles
3
+ ══════════════════════════════════════════════════════════════════════════════ */
4
+
5
+ /* ── Loop name input ── */
6
+ .loop-name-input {
7
+ width: 100%;
8
+ padding: 8px 10px;
9
+ border: 1px solid var(--border);
10
+ border-radius: 6px;
11
+ background: var(--bg-secondary);
12
+ color: var(--text-primary);
13
+ font-size: 0.9rem;
14
+ font-family: inherit;
15
+ }
16
+ .loop-name-input:focus {
17
+ outline: none;
18
+ border-color: var(--accent);
19
+ }
20
+
21
+ /* ── Schedule selector ── */
22
+ .loop-schedule-options {
23
+ display: flex;
24
+ flex-direction: column;
25
+ gap: 8px;
26
+ border: 1px solid var(--border);
27
+ border-radius: 8px;
28
+ padding: 12px;
29
+ background: var(--bg-secondary);
30
+ }
31
+ .loop-schedule-radio {
32
+ display: flex;
33
+ align-items: center;
34
+ gap: 8px;
35
+ font-size: 0.85rem;
36
+ color: var(--text-primary);
37
+ cursor: pointer;
38
+ }
39
+ .loop-schedule-radio input[type="radio"] {
40
+ margin: 0;
41
+ accent-color: var(--accent);
42
+ }
43
+ .loop-schedule-detail {
44
+ display: inline-flex;
45
+ align-items: center;
46
+ gap: 4px;
47
+ font-size: 0.82rem;
48
+ color: var(--text-secondary);
49
+ margin-left: 4px;
50
+ }
51
+ .loop-time-input {
52
+ width: 46px;
53
+ padding: 3px 6px;
54
+ border: 1px solid var(--border);
55
+ border-radius: 4px;
56
+ background: var(--bg-primary);
57
+ color: var(--text-primary);
58
+ font-size: 0.82rem;
59
+ font-family: inherit;
60
+ text-align: center;
61
+ }
62
+ .loop-time-input:focus {
63
+ outline: none;
64
+ border-color: var(--accent);
65
+ }
66
+ .loop-day-select {
67
+ padding: 3px 6px;
68
+ border: 1px solid var(--border);
69
+ border-radius: 4px;
70
+ background: var(--bg-primary);
71
+ color: var(--text-primary);
72
+ font-size: 0.82rem;
73
+ font-family: inherit;
74
+ cursor: pointer;
75
+ }
76
+ .loop-day-select:focus {
77
+ outline: none;
78
+ border-color: var(--accent);
79
+ }
80
+ .loop-cron-input {
81
+ width: 140px;
82
+ padding: 3px 8px;
83
+ border: 1px solid var(--border);
84
+ border-radius: 4px;
85
+ background: var(--bg-primary);
86
+ color: var(--text-primary);
87
+ font-size: 0.82rem;
88
+ font-family: 'SF Mono', 'Fira Code', monospace;
89
+ }
90
+ .loop-cron-input:focus {
91
+ outline: none;
92
+ border-color: var(--accent);
93
+ }
94
+
95
+ /* ── Template selected highlight ── */
96
+ .loop-template-selected {
97
+ border-color: rgba(59,130,246,0.4) !important;
98
+ background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.03) 100%) !important;
99
+ }
100
+
101
+ /* ── Active Loops list ── */
102
+ .loop-active-section {
103
+ margin-top: 24px;
104
+ border-top: 1px solid var(--border);
105
+ padding-top: 16px;
106
+ }
107
+ .loop-active-header {
108
+ font-size: 0.8rem;
109
+ font-weight: 600;
110
+ color: var(--text-secondary);
111
+ text-transform: uppercase;
112
+ letter-spacing: 0.04em;
113
+ margin-bottom: 10px;
114
+ }
115
+ .loop-active-list {
116
+ display: flex;
117
+ flex-direction: column;
118
+ gap: 6px;
119
+ }
120
+ .loop-active-item {
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: space-between;
124
+ gap: 12px;
125
+ padding: 10px 14px;
126
+ border: 1px solid var(--border);
127
+ border-radius: 8px;
128
+ transition: border-color 0.15s;
129
+ }
130
+ .loop-active-item:hover {
131
+ border-color: rgba(59,130,246,0.3);
132
+ }
133
+ .loop-active-item-info {
134
+ flex: 1;
135
+ min-width: 0;
136
+ cursor: pointer;
137
+ }
138
+ .loop-active-item-top {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 8px;
142
+ margin-bottom: 2px;
143
+ }
144
+ .loop-active-item-name {
145
+ font-size: 0.85rem;
146
+ font-weight: 600;
147
+ color: var(--text-primary);
148
+ overflow: hidden;
149
+ text-overflow: ellipsis;
150
+ white-space: nowrap;
151
+ }
152
+ .loop-status-dot {
153
+ width: 8px;
154
+ height: 8px;
155
+ border-radius: 50%;
156
+ flex-shrink: 0;
157
+ }
158
+ .loop-status-dot-on {
159
+ background: #10B981;
160
+ }
161
+ .loop-status-dot-off {
162
+ background: var(--text-secondary);
163
+ opacity: 0.4;
164
+ }
165
+ .loop-active-item-meta {
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 10px;
169
+ font-size: 0.75rem;
170
+ color: var(--text-secondary);
171
+ }
172
+ .loop-active-item-actions {
173
+ display: flex;
174
+ gap: 4px;
175
+ flex-shrink: 0;
176
+ }
177
+
178
+ /* ── Loop action buttons ── */
179
+ .loop-action-btn {
180
+ padding: 5px 12px;
181
+ font-size: 0.78rem;
182
+ font-weight: 500;
183
+ color: var(--text-primary);
184
+ background: var(--bg-secondary);
185
+ border: 1px solid var(--border);
186
+ border-radius: 6px;
187
+ cursor: pointer;
188
+ transition: all 0.15s;
189
+ white-space: nowrap;
190
+ }
191
+ .loop-action-btn:hover:not(:disabled) {
192
+ border-color: var(--accent);
193
+ color: var(--accent);
194
+ }
195
+ .loop-action-btn:disabled {
196
+ opacity: 0.4;
197
+ cursor: not-allowed;
198
+ }
199
+ .loop-action-btn.loop-action-sm {
200
+ padding: 3px 8px;
201
+ font-size: 0.72rem;
202
+ }
203
+ .loop-action-btn.loop-action-run {
204
+ color: #10B981;
205
+ border-color: rgba(16,185,129,0.3);
206
+ }
207
+ .loop-action-btn.loop-action-run:hover:not(:disabled) {
208
+ background: rgba(16,185,129,0.1);
209
+ border-color: #10B981;
210
+ }
211
+ .loop-action-btn.loop-action-cancel {
212
+ color: var(--error);
213
+ border-color: rgba(239,68,68,0.3);
214
+ }
215
+ .loop-action-btn.loop-action-cancel:hover {
216
+ background: rgba(239,68,68,0.1);
217
+ border-color: var(--error);
218
+ }
219
+ .loop-action-btn.loop-action-delete {
220
+ color: var(--error);
221
+ border-color: rgba(239,68,68,0.3);
222
+ }
223
+ .loop-action-btn.loop-action-delete:hover {
224
+ background: rgba(239,68,68,0.1);
225
+ border-color: var(--error);
226
+ }
227
+
228
+ /* ── Loop detail view ── */
229
+ .loop-detail-header {
230
+ margin-bottom: 16px;
231
+ }
232
+ .loop-detail-info {
233
+ margin-bottom: 16px;
234
+ }
235
+ .loop-detail-name {
236
+ font-size: 1.15rem;
237
+ font-weight: 600;
238
+ color: var(--text-primary);
239
+ margin: 0 0 6px;
240
+ }
241
+ .loop-detail-meta {
242
+ display: flex;
243
+ align-items: center;
244
+ gap: 10px;
245
+ margin-bottom: 10px;
246
+ }
247
+ .loop-detail-schedule {
248
+ font-size: 0.82rem;
249
+ color: var(--text-secondary);
250
+ }
251
+ .loop-status-badge {
252
+ font-size: 0.72rem;
253
+ font-weight: 600;
254
+ padding: 2px 8px;
255
+ border-radius: 10px;
256
+ text-transform: uppercase;
257
+ letter-spacing: 0.03em;
258
+ }
259
+ .loop-status-enabled {
260
+ background: rgba(16,185,129,0.15);
261
+ color: #10B981;
262
+ }
263
+ .loop-status-disabled {
264
+ background: rgba(156,163,175,0.15);
265
+ color: var(--text-secondary);
266
+ }
267
+ .loop-detail-actions {
268
+ display: flex;
269
+ gap: 6px;
270
+ }
271
+ .loop-detail-prompt-section {
272
+ margin-bottom: 20px;
273
+ padding: 12px 14px;
274
+ border: 1px solid var(--border);
275
+ border-radius: 8px;
276
+ background: var(--bg-secondary);
277
+ }
278
+ .loop-detail-prompt-label {
279
+ font-size: 0.75rem;
280
+ font-weight: 600;
281
+ color: var(--text-secondary);
282
+ text-transform: uppercase;
283
+ letter-spacing: 0.03em;
284
+ margin-bottom: 6px;
285
+ }
286
+ .loop-detail-prompt-text {
287
+ font-size: 0.84rem;
288
+ color: var(--text-primary);
289
+ line-height: 1.6;
290
+ white-space: pre-wrap;
291
+ }
292
+
293
+ /* ── Execution history ── */
294
+ .loop-exec-history-section {
295
+ border-top: 1px solid var(--border);
296
+ padding-top: 16px;
297
+ }
298
+ .loop-exec-history-header {
299
+ font-size: 0.8rem;
300
+ font-weight: 600;
301
+ color: var(--text-secondary);
302
+ text-transform: uppercase;
303
+ letter-spacing: 0.04em;
304
+ margin-bottom: 10px;
305
+ }
306
+ .loop-loading {
307
+ display: flex;
308
+ align-items: center;
309
+ gap: 10px;
310
+ padding: 20px 0;
311
+ font-size: 0.85rem;
312
+ color: var(--text-secondary);
313
+ }
314
+ .loop-exec-empty {
315
+ font-size: 0.85rem;
316
+ color: var(--text-secondary);
317
+ padding: 16px 0;
318
+ }
319
+ .loop-exec-list {
320
+ display: flex;
321
+ flex-direction: column;
322
+ gap: 4px;
323
+ }
324
+ .loop-exec-item {
325
+ display: flex;
326
+ align-items: center;
327
+ justify-content: space-between;
328
+ gap: 12px;
329
+ padding: 8px 12px;
330
+ border: 1px solid var(--border);
331
+ border-radius: 6px;
332
+ transition: border-color 0.15s;
333
+ }
334
+ .loop-exec-item:hover {
335
+ border-color: rgba(59,130,246,0.2);
336
+ }
337
+ .loop-exec-item-left {
338
+ display: flex;
339
+ align-items: center;
340
+ gap: 10px;
341
+ flex: 1;
342
+ min-width: 0;
343
+ font-size: 0.82rem;
344
+ }
345
+ .loop-exec-item-right {
346
+ flex-shrink: 0;
347
+ }
348
+ .loop-exec-status-icon {
349
+ font-size: 0.9rem;
350
+ width: 18px;
351
+ text-align: center;
352
+ flex-shrink: 0;
353
+ }
354
+ .loop-exec-status-running {
355
+ color: var(--accent);
356
+ animation: loop-spin 1s linear infinite;
357
+ }
358
+ @keyframes loop-spin {
359
+ from { transform: rotate(0deg); }
360
+ to { transform: rotate(360deg); }
361
+ }
362
+ .loop-exec-status-success {
363
+ color: #10B981;
364
+ }
365
+ .loop-exec-status-error {
366
+ color: var(--error);
367
+ }
368
+ .loop-exec-status-cancelled {
369
+ color: var(--text-secondary);
370
+ }
371
+ .loop-exec-time {
372
+ color: var(--text-primary);
373
+ font-weight: 500;
374
+ white-space: nowrap;
375
+ }
376
+ .loop-exec-running-label {
377
+ color: var(--accent);
378
+ font-weight: 500;
379
+ font-size: 0.78rem;
380
+ }
381
+ .loop-exec-duration {
382
+ color: var(--text-secondary);
383
+ white-space: nowrap;
384
+ }
385
+ .loop-exec-error-text {
386
+ color: var(--error);
387
+ font-size: 0.75rem;
388
+ overflow: hidden;
389
+ text-overflow: ellipsis;
390
+ white-space: nowrap;
391
+ }
392
+ .loop-exec-trigger-badge {
393
+ font-size: 0.68rem;
394
+ padding: 1px 6px;
395
+ border-radius: 8px;
396
+ background: rgba(139,92,246,0.15);
397
+ color: #8B5CF6;
398
+ text-transform: uppercase;
399
+ letter-spacing: 0.03em;
400
+ }
401
+
402
+ /* ── Execution messages ── */
403
+ .loop-exec-messages {
404
+ max-height: calc(100vh - 200px);
405
+ overflow-y: auto;
406
+ }
407
+
408
+ /* ── Running Loop notification banner ── */
409
+ .loop-running-banner {
410
+ position: fixed;
411
+ bottom: 80px;
412
+ left: 50%;
413
+ transform: translateX(-50%);
414
+ display: flex;
415
+ align-items: center;
416
+ gap: 10px;
417
+ padding: 8px 16px;
418
+ background: var(--bg-secondary);
419
+ border: 1px solid var(--accent);
420
+ border-radius: 20px;
421
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
422
+ z-index: 100;
423
+ font-size: 0.82rem;
424
+ color: var(--text-primary);
425
+ }
426
+ .loop-running-banner-dot {
427
+ width: 8px;
428
+ height: 8px;
429
+ border-radius: 50%;
430
+ background: var(--accent);
431
+ animation: loop-pulse 1.5s ease-in-out infinite;
432
+ }
433
+ @keyframes loop-pulse {
434
+ 0%, 100% { opacity: 1; }
435
+ 50% { opacity: 0.3; }
436
+ }
437
+
438
+ /* ── Modal dialog (generic) ── */
439
+ .modal-overlay {
440
+ position: fixed;
441
+ top: 0; left: 0; right: 0; bottom: 0;
442
+ background: rgba(0, 0, 0, 0.5);
443
+ z-index: 1000;
444
+ display: flex;
445
+ align-items: center;
446
+ justify-content: center;
447
+ }
448
+ .modal-dialog {
449
+ width: 380px;
450
+ max-width: 90vw;
451
+ background: var(--bg-secondary);
452
+ border: 1px solid var(--border);
453
+ border-radius: 12px;
454
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
455
+ }
456
+ .modal-title {
457
+ padding: 12px 16px;
458
+ font-size: 0.95rem;
459
+ font-weight: 600;
460
+ border-bottom: 1px solid var(--border);
461
+ color: var(--text-primary);
462
+ }
463
+ .modal-body {
464
+ padding: 16px;
465
+ font-size: 0.88rem;
466
+ line-height: 1.5;
467
+ color: var(--text-primary);
468
+ }
469
+ .modal-actions {
470
+ padding: 10px 16px;
471
+ display: flex;
472
+ justify-content: flex-end;
473
+ gap: 8px;
474
+ border-top: 1px solid var(--border);
475
+ }
476
+ .modal-confirm-btn {
477
+ padding: 6px 20px;
478
+ background: var(--error);
479
+ color: #fff;
480
+ border: none;
481
+ border-radius: 8px;
482
+ font-size: 0.85rem;
483
+ font-weight: 600;
484
+ cursor: pointer;
485
+ transition: background 0.15s;
486
+ }
487
+ .modal-confirm-btn:hover {
488
+ background: #c04444;
489
+ }
490
+ .modal-cancel-btn {
491
+ padding: 6px 20px;
492
+ background: transparent;
493
+ color: var(--text-primary);
494
+ border: 1px solid var(--border);
495
+ border-radius: 8px;
496
+ font-size: 0.85rem;
497
+ cursor: pointer;
498
+ transition: border-color 0.15s;
499
+ }
500
+ .modal-cancel-btn:hover {
501
+ border-color: var(--text-primary);
502
+ }
503
+
504
+ /* ── Loop error banner ── */
505
+ .loop-error-banner {
506
+ display: flex;
507
+ align-items: center;
508
+ gap: 8px;
509
+ margin-top: 12px;
510
+ padding: 10px 14px;
511
+ background: rgba(239, 68, 68, 0.1);
512
+ border: 1px solid rgba(239, 68, 68, 0.3);
513
+ border-radius: 8px;
514
+ color: var(--error);
515
+ font-size: 0.84rem;
516
+ cursor: pointer;
517
+ transition: background 0.15s;
518
+ }
519
+ .loop-error-banner:hover {
520
+ background: rgba(239, 68, 68, 0.15);
521
+ }
522
+ .loop-error-icon {
523
+ flex-shrink: 0;
524
+ font-size: 1rem;
525
+ }
526
+ .loop-error-text {
527
+ flex: 1;
528
+ min-width: 0;
529
+ overflow-wrap: anywhere;
530
+ }
531
+ .loop-error-dismiss {
532
+ flex-shrink: 0;
533
+ opacity: 0.6;
534
+ font-size: 0.8rem;
535
+ }
536
+ .loop-error-dismiss:hover {
537
+ opacity: 1;
538
+ }
539
+
540
+ /* ── Load more executions ── */
541
+ .loop-load-more {
542
+ display: flex;
543
+ justify-content: center;
544
+ padding: 12px 0 4px;
545
+ }
546
+
547
+ /* ── Memory management ── */
548
+ .memory-empty {
549
+ padding: 24px 16px;
550
+ text-align: center;
551
+ color: var(--text-secondary);
552
+ font-size: 0.85rem;
553
+ }
554
+ .memory-empty-hint {
555
+ margin-top: 6px;
556
+ font-size: 0.78rem;
557
+ opacity: 0.7;
558
+ }
559
+ .memory-file-item {
560
+ display: flex;
561
+ align-items: center;
562
+ justify-content: space-between;
563
+ }
564
+ .memory-file-row {
565
+ display: flex;
566
+ align-items: center;
567
+ gap: 6px;
568
+ flex: 1;
569
+ min-width: 0;
570
+ cursor: pointer;
571
+ padding: 4px 8px;
572
+ border-radius: 4px;
573
+ }
574
+ .memory-file-row:hover {
575
+ background: var(--hover-bg);
576
+ }
577
+ .memory-delete-btn {
578
+ background: none;
579
+ border: none;
580
+ color: var(--text-secondary);
581
+ cursor: pointer;
582
+ padding: 4px;
583
+ border-radius: 4px;
584
+ opacity: 0;
585
+ transition: opacity 0.15s;
586
+ flex-shrink: 0;
587
+ }
588
+ .memory-file-item:hover .memory-delete-btn {
589
+ opacity: 1;
590
+ }
591
+ .memory-delete-btn:hover {
592
+ color: var(--error-color, #e53e3e);
593
+ background: var(--hover-bg);
594
+ }
595
+ .memory-edit-container {
596
+ display: flex;
597
+ flex-direction: column;
598
+ height: 100%;
599
+ }
600
+ .memory-edit-textarea {
601
+ flex: 1;
602
+ min-height: 0;
603
+ width: 100%;
604
+ border: none;
605
+ resize: none;
606
+ padding: 12px;
607
+ font-family: var(--font-mono);
608
+ font-size: 0.85rem;
609
+ line-height: 1.5;
610
+ background: var(--bg-primary);
611
+ color: var(--text-primary);
612
+ box-sizing: border-box;
613
+ }
614
+ .memory-edit-textarea:focus {
615
+ outline: none;
616
+ }
617
+ .memory-header-cancel {
618
+ background: none;
619
+ border: 1px solid var(--border);
620
+ color: var(--text-secondary);
621
+ padding: 3px 10px;
622
+ border-radius: 4px;
623
+ cursor: pointer;
624
+ font-size: 0.75rem;
625
+ white-space: nowrap;
626
+ }
627
+ .memory-header-cancel:hover {
628
+ background: var(--bg-tertiary);
629
+ }
630
+ .memory-header-save {
631
+ background: var(--accent);
632
+ border: none;
633
+ color: white;
634
+ padding: 3px 10px;
635
+ border-radius: 4px;
636
+ cursor: pointer;
637
+ font-size: 0.75rem;
638
+ white-space: nowrap;
639
+ }
640
+ .memory-header-save:hover {
641
+ opacity: 0.9;
642
+ }
643
+ .memory-header-save:disabled {
644
+ opacity: 0.5;
645
+ cursor: not-allowed;
646
+ }
647
+ .preview-refresh-btn {
648
+ display: inline-flex;
649
+ align-items: center;
650
+ background: none;
651
+ border: none;
652
+ color: var(--text-secondary);
653
+ padding: 2px;
654
+ border-radius: 4px;
655
+ cursor: pointer;
656
+ }
657
+ .preview-refresh-btn:hover {
658
+ background: var(--hover-bg);
659
+ color: var(--text-primary);
660
+ }
661
+ .preview-edit-btn {
662
+ display: inline-flex;
663
+ align-items: center;
664
+ gap: 4px;
665
+ background: none;
666
+ border: 1px solid var(--border-color);
667
+ color: var(--text-secondary);
668
+ padding: 2px 8px;
669
+ border-radius: 4px;
670
+ cursor: pointer;
671
+ font-size: 0.75rem;
672
+ margin-left: auto;
673
+ }
674
+ .preview-edit-btn:hover {
675
+ background: var(--hover-bg);
676
+ color: var(--text-primary);
677
+ }
678
+ .preview-edit-label {
679
+ font-size: 0.75rem;
680
+ color: var(--accent-color);
681
+ margin-left: auto;
682
+ }