@abstractframework/monitor-flow 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,576 @@
1
+ /* Shared Agent Cycles monitor styles (ported from AbstractFlow run modal) */
2
+
3
+ .agent-trace-panel {
4
+ border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.12));
5
+ border-radius: 10px;
6
+ padding: 12px;
7
+ background: var(--ui-surface-1, rgba(0, 0, 0, 0.12));
8
+ max-width: 100%;
9
+ min-width: 0;
10
+ overflow-x: hidden;
11
+ }
12
+
13
+ .agent-trace-header {
14
+ display: flex;
15
+ align-items: baseline;
16
+ justify-content: space-between;
17
+ gap: 10px;
18
+ }
19
+
20
+ .agent-trace-title {
21
+ font-size: var(--font-size-xs, 11px);
22
+ color: var(--text-muted);
23
+ text-transform: uppercase;
24
+ letter-spacing: 0.06em;
25
+ }
26
+
27
+ .agent-trace-subtitle {
28
+ font-size: var(--font-size-sm, 12px);
29
+ color: var(--text-secondary);
30
+ }
31
+
32
+ .agent-trace-subrun {
33
+ margin-left: 8px;
34
+ font-family: var(--font-mono);
35
+ font-size: var(--font-size-xs, 11px);
36
+ color: var(--text-muted);
37
+ overflow-wrap: anywhere;
38
+ word-break: break-word;
39
+ }
40
+
41
+ .agent-trace-copy {
42
+ margin-left: 6px;
43
+ width: 20px;
44
+ height: 20px;
45
+ border-radius: 7px;
46
+ border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.12));
47
+ background: var(--ui-surface-2, rgba(255, 255, 255, 0.03));
48
+ color: var(--text-muted, rgba(255, 255, 255, 0.6));
49
+ padding: 0;
50
+ display: inline-flex;
51
+ align-items: center;
52
+ justify-content: center;
53
+ cursor: pointer;
54
+ }
55
+
56
+ .agent-trace-copy:hover:not(:disabled) {
57
+ background: var(--ui-surface-2, rgba(255, 255, 255, 0.06));
58
+ color: var(--text-primary, rgba(255, 255, 255, 0.9));
59
+ }
60
+
61
+ .agent-trace-open {
62
+ padding: 6px 10px;
63
+ border-radius: 10px;
64
+ border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.12));
65
+ background: var(--ui-surface-2, rgba(255, 255, 255, 0.04));
66
+ color: var(--text-primary, rgba(255, 255, 255, 0.9));
67
+ cursor: pointer;
68
+ font-size: var(--font-size-sm, 12px);
69
+ }
70
+
71
+ .agent-trace-open:hover:not(:disabled) {
72
+ background: var(--ui-surface-2, rgba(255, 255, 255, 0.07));
73
+ }
74
+
75
+ .agent-trace-badges {
76
+ display: inline-flex;
77
+ align-items: center;
78
+ gap: 6px;
79
+ flex-wrap: wrap;
80
+ }
81
+
82
+ .run-metric-badge.metric-tool {
83
+ border: 1px solid var(--info-border, rgba(52, 152, 219, 0.35));
84
+ background: var(--info-subtle, rgba(52, 152, 219, 0.10));
85
+ color: var(--text-primary, rgba(200, 232, 255, 0.95));
86
+ border-radius: 999px;
87
+ padding: 3px 8px;
88
+ font-size: var(--font-size-xs, 11px);
89
+ font-family: var(--font-mono);
90
+ white-space: nowrap;
91
+ max-width: 360px;
92
+ overflow: hidden;
93
+ text-overflow: ellipsis;
94
+ }
95
+
96
+ .agent-trace-empty {
97
+ padding: 10px 0 0;
98
+ font-size: var(--font-size-sm, 12px);
99
+ color: var(--text-muted);
100
+ }
101
+
102
+ .agent-cycle-list {
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 12px;
106
+ margin-top: 10px;
107
+ }
108
+
109
+ .agent-cycle-meta {
110
+ font-size: var(--font-size-xs, 11px);
111
+ color: var(--text-muted);
112
+ text-transform: uppercase;
113
+ letter-spacing: 0.06em;
114
+ }
115
+
116
+ .agent-cycle {
117
+ border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.12));
118
+ border-radius: 12px;
119
+ background: var(--ui-surface-2, rgba(255, 255, 255, 0.02));
120
+ overflow: hidden;
121
+ }
122
+
123
+ .agent-cycle-summary {
124
+ cursor: pointer;
125
+ list-style: none;
126
+ padding: 10px 12px;
127
+ display: flex;
128
+ align-items: center;
129
+ gap: 10px;
130
+ flex-wrap: wrap;
131
+ user-select: none;
132
+ min-width: 0;
133
+ max-width: 100%;
134
+ }
135
+
136
+ .agent-cycle-summary::-webkit-details-marker {
137
+ display: none;
138
+ }
139
+
140
+ .agent-cycle-label {
141
+ font-size: var(--font-size-xs, 11px);
142
+ color: var(--text-muted);
143
+ text-transform: uppercase;
144
+ letter-spacing: 0.06em;
145
+ font-weight: 800;
146
+ }
147
+
148
+ .agent-cycle-index {
149
+ font-family: var(--font-mono);
150
+ font-size: var(--font-size-sm, 12px);
151
+ color: var(--text-primary);
152
+ font-weight: 800;
153
+ }
154
+
155
+ .agent-cycle-spacer {
156
+ flex: 1;
157
+ min-width: 10px;
158
+ }
159
+
160
+ .agent-cycle-preview {
161
+ max-width: 560px;
162
+ font-size: var(--font-size-sm, 12px);
163
+ color: var(--text-secondary);
164
+ white-space: nowrap;
165
+ overflow: hidden;
166
+ text-overflow: ellipsis;
167
+ min-width: 0;
168
+ }
169
+
170
+ .agent-cycle-body {
171
+ padding: 0 12px 12px 12px;
172
+ display: flex;
173
+ flex-direction: column;
174
+ gap: 10px;
175
+ }
176
+
177
+ .agent-cycle-stage {
178
+ font-size: var(--font-size-xs, 11px);
179
+ font-weight: 800;
180
+ text-transform: uppercase;
181
+ letter-spacing: 0.04em;
182
+ border: 1px solid rgba(255, 255, 255, 0.12);
183
+ background: rgba(255, 255, 255, 0.03);
184
+ color: var(--text-secondary);
185
+ padding: 3px 8px;
186
+ border-radius: 999px;
187
+ }
188
+
189
+ .agent-trace-preview-inline {
190
+ font-size: var(--font-size-sm, 12px);
191
+ color: var(--text-secondary);
192
+ }
193
+
194
+ .agent-observe-body {
195
+ padding: 0 12px 12px 12px;
196
+ }
197
+
198
+ .agent-observe-empty {
199
+ font-size: var(--font-size-sm, 12px);
200
+ color: var(--text-muted);
201
+ padding: 6px 0 0;
202
+ }
203
+
204
+ .agent-observe-results {
205
+ display: flex;
206
+ flex-direction: column;
207
+ gap: 8px;
208
+ margin-top: 6px;
209
+ }
210
+
211
+ .agent-observe-result {
212
+ border: 1px solid var(--bg-tertiary);
213
+ border-radius: 10px;
214
+ background: rgba(255, 255, 255, 0.02);
215
+ overflow: hidden;
216
+ }
217
+
218
+ .agent-observe-summary {
219
+ cursor: pointer;
220
+ list-style: none;
221
+ padding: 8px 10px;
222
+ display: flex;
223
+ align-items: center;
224
+ gap: 10px;
225
+ user-select: none;
226
+ }
227
+
228
+ .agent-observe-summary::-webkit-details-marker {
229
+ display: none;
230
+ }
231
+
232
+ .agent-observe-name {
233
+ font-family: var(--font-mono);
234
+ font-size: var(--font-size-sm, 12px);
235
+ color: var(--text-primary);
236
+ font-weight: 800;
237
+ }
238
+
239
+ .agent-observe-callid {
240
+ margin-left: auto;
241
+ font-family: var(--font-mono);
242
+ font-size: var(--font-size-xs, 11px);
243
+ color: var(--text-muted);
244
+ }
245
+
246
+ .agent-cycle-others {
247
+ margin-top: 4px;
248
+ }
249
+
250
+ .agent-cycle-others-title {
251
+ font-size: var(--font-size-xs, 11px);
252
+ color: var(--text-muted);
253
+ text-transform: uppercase;
254
+ letter-spacing: 0.06em;
255
+ margin: 4px 0 6px;
256
+ }
257
+
258
+ .agent-trace-entry {
259
+ border: 1px solid var(--bg-tertiary);
260
+ border-radius: 10px;
261
+ background: rgba(255, 255, 255, 0.02);
262
+ overflow: hidden;
263
+ }
264
+
265
+ .agent-trace-summary {
266
+ cursor: pointer;
267
+ list-style: none;
268
+ padding: 10px 12px;
269
+ display: flex;
270
+ align-items: center;
271
+ gap: 10px;
272
+ flex-wrap: wrap;
273
+ user-select: none;
274
+ min-width: 0;
275
+ max-width: 100%;
276
+ }
277
+
278
+ .agent-trace-summary::-webkit-details-marker {
279
+ display: none;
280
+ }
281
+
282
+ .agent-trace-status {
283
+ font-size: var(--font-size-xs, 11px);
284
+ text-transform: uppercase;
285
+ letter-spacing: 0.04em;
286
+ font-weight: 800;
287
+ }
288
+
289
+ .agent-trace-status.completed {
290
+ color: var(--success);
291
+ }
292
+
293
+ .agent-trace-status.running,
294
+ .agent-trace-status.waiting {
295
+ color: var(--warning);
296
+ }
297
+
298
+ .agent-trace-status.failed {
299
+ color: var(--error);
300
+ }
301
+
302
+ .agent-trace-kind {
303
+ font-weight: 800;
304
+ font-size: var(--font-size-sm, 12px);
305
+ color: var(--text-primary);
306
+ }
307
+
308
+ .agent-trace-node,
309
+ .agent-trace-run {
310
+ font-family: var(--font-mono);
311
+ font-size: var(--font-size-xs, 11px);
312
+ color: var(--text-muted);
313
+ overflow-wrap: anywhere;
314
+ word-break: break-word;
315
+ min-width: 0;
316
+ max-width: 100%;
317
+ }
318
+
319
+ .agent-trace-run {
320
+ margin-left: auto;
321
+ }
322
+
323
+ .agent-trace-preview {
324
+ padding: 0 12px 10px 12px;
325
+ font-size: var(--font-size-sm, 12px);
326
+ color: var(--text-secondary);
327
+ white-space: pre-wrap;
328
+ word-break: break-word;
329
+ }
330
+
331
+ .agent-trace-body {
332
+ padding: 0 12px 12px 12px;
333
+ display: flex;
334
+ flex-direction: column;
335
+ gap: 10px;
336
+ min-width: 0;
337
+ }
338
+
339
+ .agent-trace-body > * {
340
+ min-width: 0;
341
+ }
342
+
343
+ .agent-trace-tabs {
344
+ display: flex;
345
+ align-items: center;
346
+ gap: 6px;
347
+ flex-wrap: wrap;
348
+ }
349
+
350
+ .agent-trace-tab {
351
+ border: 1px solid var(--bg-tertiary);
352
+ background: rgba(255, 255, 255, 0.02);
353
+ color: var(--text-secondary);
354
+ font-size: var(--font-size-xs, 11px);
355
+ padding: 4px 8px;
356
+ border-radius: 999px;
357
+ cursor: pointer;
358
+ }
359
+
360
+ .agent-trace-tab:hover {
361
+ border-color: rgba(255, 255, 255, 0.25);
362
+ color: var(--text-primary);
363
+ }
364
+
365
+ .agent-trace-tab.active {
366
+ border-color: rgba(255, 255, 255, 0.35);
367
+ background: rgba(255, 255, 255, 0.06);
368
+ color: var(--text-primary);
369
+ }
370
+
371
+ .run-details-output {
372
+ font-family: var(--font-mono);
373
+ font-size: var(--font-size-sm, 12px);
374
+ margin: 0;
375
+ padding: 12px;
376
+ border-radius: 10px;
377
+ border: 1px solid var(--bg-tertiary);
378
+ background: rgba(0, 0, 0, 0.25);
379
+ color: var(--text-primary);
380
+ white-space: pre-wrap;
381
+ overflow-wrap: anywhere;
382
+ word-break: break-word;
383
+ max-height: 360px;
384
+ overflow-y: auto;
385
+ overflow-x: hidden;
386
+ max-width: 100%;
387
+ box-sizing: border-box;
388
+ min-width: 0;
389
+ }
390
+
391
+ /* JSON viewer (for Raw/Trace tabs) */
392
+ .json-token.key { color: #9cdcfe; }
393
+ .json-token.string { color: #ce9178; }
394
+ .json-token.number { color: #b5cea8; }
395
+ .json-token.boolean { color: #569cd6; }
396
+ .json-token.null { color: #569cd6; opacity: 0.9; font-style: italic; }
397
+
398
+ .json-viewer {
399
+ white-space: normal;
400
+ word-break: normal;
401
+ max-width: 100%;
402
+ box-sizing: border-box;
403
+ min-width: 0;
404
+ }
405
+
406
+ .json-viewer__toolbar {
407
+ position: sticky;
408
+ top: 0;
409
+ z-index: 1;
410
+ display: flex;
411
+ justify-content: flex-end;
412
+ margin-bottom: 8px;
413
+ padding-bottom: 6px;
414
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
415
+ }
416
+
417
+ .json-viewer__copy {
418
+ font-size: var(--font-size-xs, 11px);
419
+ padding: 6px 10px;
420
+ }
421
+
422
+ .json-viewer__tree {
423
+ white-space: pre-wrap;
424
+ overflow-wrap: anywhere;
425
+ word-break: break-word;
426
+ max-width: 100%;
427
+ }
428
+
429
+ .json-viewer__details,
430
+ .json-viewer__children {
431
+ max-width: 100%;
432
+ min-width: 0;
433
+ overflow-wrap: anywhere;
434
+ word-break: break-word;
435
+ }
436
+
437
+ .json-viewer__line,
438
+ .json-viewer__summary {
439
+ font-family: var(--font-mono);
440
+ font-size: var(--font-size-sm, 12px);
441
+ line-height: 1.45;
442
+ max-width: 100%;
443
+ min-width: 0;
444
+ overflow-wrap: anywhere;
445
+ word-break: break-word;
446
+ }
447
+
448
+ .json-viewer__summary {
449
+ cursor: pointer;
450
+ list-style: none;
451
+ }
452
+
453
+ .json-viewer__summary::-webkit-details-marker {
454
+ display: none;
455
+ }
456
+
457
+ .json-viewer__punct {
458
+ color: var(--text-muted);
459
+ }
460
+
461
+ .json-viewer__caret {
462
+ display: inline-block;
463
+ width: 14px;
464
+ margin-right: 4px;
465
+ color: var(--text-muted);
466
+ opacity: 0.9;
467
+ }
468
+
469
+ .json-viewer__children {
470
+ margin-top: 2px;
471
+ }
472
+
473
+ /* LLM message rendering (System/User tabs) */
474
+ .mf-msg-list {
475
+ display: flex;
476
+ flex-direction: column;
477
+ gap: 10px;
478
+ min-width: 0;
479
+ }
480
+
481
+ .mf-msg {
482
+ border: 1px solid var(--bg-tertiary);
483
+ border-radius: 10px;
484
+ padding: 10px;
485
+ background: rgba(255, 255, 255, 0.02);
486
+ min-width: 0;
487
+ }
488
+
489
+ .mf-msg-meta {
490
+ display: flex;
491
+ align-items: center;
492
+ justify-content: space-between;
493
+ gap: 10px;
494
+ font-size: var(--font-size-xs, 11px);
495
+ color: var(--text-muted);
496
+ font-family: var(--font-mono);
497
+ text-transform: uppercase;
498
+ letter-spacing: 0.04em;
499
+ }
500
+
501
+ .mf-msg-role {
502
+ font-weight: 800;
503
+ color: var(--text-secondary);
504
+ }
505
+
506
+ .mf-msg-name {
507
+ font-family: var(--font-mono);
508
+ font-size: var(--font-size-xs, 11px);
509
+ color: var(--text-muted);
510
+ }
511
+
512
+ .mf-msg-content {
513
+ margin-top: 8px;
514
+ min-width: 0;
515
+ }
516
+
517
+ .mf-msg-content .run-details-output {
518
+ max-height: 280px;
519
+ }
520
+
521
+ /* Lightweight Markdown renderer (safe React nodes, no HTML injection). */
522
+ .mf-md {
523
+ font-size: var(--font-size-sm, 12px);
524
+ line-height: 1.45;
525
+ color: var(--text-primary);
526
+ font-family: var(--font-sans);
527
+ min-width: 0;
528
+ }
529
+
530
+ .mf-md h1,
531
+ .mf-md h2,
532
+ .mf-md h3 {
533
+ margin: 6px 0 4px 0;
534
+ font-size: var(--font-size-md, 13px);
535
+ }
536
+
537
+ .mf-md_p {
538
+ margin: 4px 0;
539
+ white-space: pre-wrap;
540
+ word-break: break-word;
541
+ }
542
+
543
+ .mf-md_ul {
544
+ margin: 4px 0;
545
+ padding-left: 16px;
546
+ }
547
+
548
+ .mf-md code {
549
+ font-family: var(--font-mono);
550
+ font-size: var(--font-size-xs, 11px);
551
+ padding: 1px 4px;
552
+ border-radius: 8px;
553
+ border: 1px solid var(--bg-tertiary);
554
+ background: rgba(0, 0, 0, 0.25);
555
+ }
556
+
557
+ .mf-md_pre {
558
+ margin: 6px 0;
559
+ padding: 10px 12px;
560
+ border-radius: 10px;
561
+ border: 1px solid var(--bg-tertiary);
562
+ background: rgba(0, 0, 0, 0.25);
563
+ overflow: auto;
564
+ max-width: 100%;
565
+ box-sizing: border-box;
566
+ }
567
+
568
+ .mf-md_pre code {
569
+ padding: 0;
570
+ border: none;
571
+ background: transparent;
572
+ font-size: var(--font-size-xs, 11px);
573
+ white-space: pre-wrap;
574
+ overflow-wrap: anywhere;
575
+ word-break: break-word;
576
+ }