@tangle-network/charts 2.0.14 → 2.0.15
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/react/agent-graph.css +150 -150
- package/dist/react/flow-waterfall.css +10 -13
- package/dist/react/index.js +85 -79
- package/package.json +1 -1
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
}
|
|
26
26
|
@layer base {
|
|
27
27
|
@scope (.agent-graph, .ag-root, .ag-latest, [data-agent-metrics]) {
|
|
28
|
-
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
|
28
|
+
*, :scope:is(*), ::after, :scope:is(::after), ::before, :scope:is(::before), ::backdrop, :scope:is(::backdrop), ::file-selector-button, :scope:is(::file-selector-button) {
|
|
29
29
|
box-sizing: border-box;
|
|
30
30
|
margin: 0;
|
|
31
31
|
padding: 0;
|
|
32
32
|
border: 0 solid;
|
|
33
33
|
}
|
|
34
|
-
html, :host {
|
|
34
|
+
html, :scope:is(html), :host, :scope:is(:host) {
|
|
35
35
|
line-height: 1.5;
|
|
36
36
|
-webkit-text-size-adjust: 100%;
|
|
37
37
|
tab-size: 4;
|
|
@@ -40,74 +40,74 @@
|
|
|
40
40
|
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
41
41
|
-webkit-tap-highlight-color: transparent;
|
|
42
42
|
}
|
|
43
|
-
hr {
|
|
43
|
+
hr, :scope:is(hr) {
|
|
44
44
|
height: 0;
|
|
45
45
|
color: inherit;
|
|
46
46
|
border-top-width: 1px;
|
|
47
47
|
}
|
|
48
|
-
abbr:where([title]) {
|
|
48
|
+
abbr:where([title]), :scope:is(abbr:where([title])) {
|
|
49
49
|
-webkit-text-decoration: underline dotted;
|
|
50
50
|
text-decoration: underline dotted;
|
|
51
51
|
}
|
|
52
|
-
h1, h2, h3, h4, h5, h6 {
|
|
52
|
+
h1, :scope:is(h1), h2, :scope:is(h2), h3, :scope:is(h3), h4, :scope:is(h4), h5, :scope:is(h5), h6, :scope:is(h6) {
|
|
53
53
|
font-size: inherit;
|
|
54
54
|
font-weight: inherit;
|
|
55
55
|
}
|
|
56
|
-
a {
|
|
56
|
+
a, :scope:is(a) {
|
|
57
57
|
color: inherit;
|
|
58
58
|
-webkit-text-decoration: inherit;
|
|
59
59
|
text-decoration: inherit;
|
|
60
60
|
}
|
|
61
|
-
b, strong {
|
|
61
|
+
b, :scope:is(b), strong, :scope:is(strong) {
|
|
62
62
|
font-weight: bolder;
|
|
63
63
|
}
|
|
64
|
-
code, kbd, samp, pre {
|
|
64
|
+
code, :scope:is(code), kbd, :scope:is(kbd), samp, :scope:is(samp), pre, :scope:is(pre) {
|
|
65
65
|
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
66
66
|
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
67
67
|
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
68
68
|
font-size: 1em;
|
|
69
69
|
}
|
|
70
|
-
small {
|
|
70
|
+
small, :scope:is(small) {
|
|
71
71
|
font-size: 80%;
|
|
72
72
|
}
|
|
73
|
-
sub, sup {
|
|
73
|
+
sub, :scope:is(sub), sup, :scope:is(sup) {
|
|
74
74
|
font-size: 75%;
|
|
75
75
|
line-height: 0;
|
|
76
76
|
position: relative;
|
|
77
77
|
vertical-align: baseline;
|
|
78
78
|
}
|
|
79
|
-
sub {
|
|
79
|
+
sub, :scope:is(sub) {
|
|
80
80
|
bottom: -0.25em;
|
|
81
81
|
}
|
|
82
|
-
sup {
|
|
82
|
+
sup, :scope:is(sup) {
|
|
83
83
|
top: -0.5em;
|
|
84
84
|
}
|
|
85
|
-
table {
|
|
85
|
+
table, :scope:is(table) {
|
|
86
86
|
text-indent: 0;
|
|
87
87
|
border-color: inherit;
|
|
88
88
|
border-collapse: collapse;
|
|
89
89
|
}
|
|
90
|
-
:-moz-focusring:where(:not(iframe)) {
|
|
90
|
+
:-moz-focusring:where(:not(iframe)), :scope:is(:-moz-focusring:where(:not(iframe))) {
|
|
91
91
|
outline: auto;
|
|
92
92
|
}
|
|
93
|
-
progress {
|
|
93
|
+
progress, :scope:is(progress) {
|
|
94
94
|
vertical-align: baseline;
|
|
95
95
|
}
|
|
96
|
-
summary {
|
|
96
|
+
summary, :scope:is(summary) {
|
|
97
97
|
display: list-item;
|
|
98
98
|
}
|
|
99
|
-
ol, ul, menu {
|
|
99
|
+
ol, :scope:is(ol), ul, :scope:is(ul), menu, :scope:is(menu) {
|
|
100
100
|
list-style: none;
|
|
101
101
|
}
|
|
102
|
-
img, svg, video, canvas, audio, iframe, embed, object {
|
|
102
|
+
img, :scope:is(img), svg, :scope:is(svg), video, :scope:is(video), canvas, :scope:is(canvas), audio, :scope:is(audio), iframe, :scope:is(iframe), embed, :scope:is(embed), object, :scope:is(object) {
|
|
103
103
|
display: block;
|
|
104
104
|
vertical-align: middle;
|
|
105
105
|
}
|
|
106
|
-
img, video {
|
|
106
|
+
img, :scope:is(img), video, :scope:is(video) {
|
|
107
107
|
max-width: 100%;
|
|
108
108
|
height: auto;
|
|
109
109
|
}
|
|
110
|
-
button, input, select, optgroup, textarea, ::file-selector-button {
|
|
110
|
+
button, :scope:is(button), input, :scope:is(input), select, :scope:is(select), optgroup, :scope:is(optgroup), textarea, :scope:is(textarea), ::file-selector-button, :scope:is(::file-selector-button) {
|
|
111
111
|
font: inherit;
|
|
112
112
|
font-feature-settings: inherit;
|
|
113
113
|
font-variation-settings: inherit;
|
|
@@ -117,71 +117,71 @@
|
|
|
117
117
|
background-color: transparent;
|
|
118
118
|
opacity: 1;
|
|
119
119
|
}
|
|
120
|
-
:where(select:is([multiple], [size])) optgroup {
|
|
120
|
+
:where(select:is([multiple], [size])) optgroup, :scope:is(:where(select:is([multiple], [size])) optgroup) {
|
|
121
121
|
font-weight: bolder;
|
|
122
122
|
}
|
|
123
|
-
:where(select:is([multiple], [size])) optgroup option {
|
|
123
|
+
:where(select:is([multiple], [size])) optgroup option, :scope:is(:where(select:is([multiple], [size])) optgroup option) {
|
|
124
124
|
padding-inline-start: 20px;
|
|
125
125
|
}
|
|
126
|
-
::file-selector-button {
|
|
126
|
+
::file-selector-button, :scope:is(::file-selector-button) {
|
|
127
127
|
margin-inline-end: 4px;
|
|
128
128
|
}
|
|
129
|
-
::placeholder {
|
|
129
|
+
::placeholder, :scope:is(::placeholder) {
|
|
130
130
|
opacity: 1;
|
|
131
131
|
}
|
|
132
132
|
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
133
|
-
::placeholder {
|
|
133
|
+
::placeholder, :scope:is(::placeholder) {
|
|
134
134
|
color: currentcolor;
|
|
135
135
|
@supports (color: color-mix(in lab, red, red)) {
|
|
136
136
|
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
|
-
textarea {
|
|
140
|
+
textarea, :scope:is(textarea) {
|
|
141
141
|
resize: vertical;
|
|
142
142
|
}
|
|
143
|
-
::-webkit-search-decoration {
|
|
143
|
+
::-webkit-search-decoration, :scope:is(::-webkit-search-decoration) {
|
|
144
144
|
-webkit-appearance: none;
|
|
145
145
|
}
|
|
146
|
-
::-webkit-date-and-time-value {
|
|
146
|
+
::-webkit-date-and-time-value, :scope:is(::-webkit-date-and-time-value) {
|
|
147
147
|
min-height: 1lh;
|
|
148
148
|
text-align: inherit;
|
|
149
149
|
}
|
|
150
|
-
::-webkit-datetime-edit {
|
|
150
|
+
::-webkit-datetime-edit, :scope:is(::-webkit-datetime-edit) {
|
|
151
151
|
display: inline-flex;
|
|
152
152
|
}
|
|
153
|
-
::-webkit-datetime-edit-fields-wrapper {
|
|
153
|
+
::-webkit-datetime-edit-fields-wrapper, :scope:is(::-webkit-datetime-edit-fields-wrapper) {
|
|
154
154
|
padding: 0;
|
|
155
155
|
}
|
|
156
|
-
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
|
156
|
+
::-webkit-datetime-edit, :scope:is(::-webkit-datetime-edit), ::-webkit-datetime-edit-year-field, :scope:is(::-webkit-datetime-edit-year-field), ::-webkit-datetime-edit-month-field, :scope:is(::-webkit-datetime-edit-month-field), ::-webkit-datetime-edit-day-field, :scope:is(::-webkit-datetime-edit-day-field), ::-webkit-datetime-edit-hour-field, :scope:is(::-webkit-datetime-edit-hour-field), ::-webkit-datetime-edit-minute-field, :scope:is(::-webkit-datetime-edit-minute-field), ::-webkit-datetime-edit-second-field, :scope:is(::-webkit-datetime-edit-second-field), ::-webkit-datetime-edit-millisecond-field, :scope:is(::-webkit-datetime-edit-millisecond-field), ::-webkit-datetime-edit-meridiem-field, :scope:is(::-webkit-datetime-edit-meridiem-field) {
|
|
157
157
|
padding-block: 0;
|
|
158
158
|
}
|
|
159
|
-
::-webkit-calendar-picker-indicator {
|
|
159
|
+
::-webkit-calendar-picker-indicator, :scope:is(::-webkit-calendar-picker-indicator) {
|
|
160
160
|
line-height: 1;
|
|
161
161
|
}
|
|
162
|
-
:-moz-ui-invalid {
|
|
162
|
+
:-moz-ui-invalid, :scope:is(:-moz-ui-invalid) {
|
|
163
163
|
box-shadow: none;
|
|
164
164
|
}
|
|
165
|
-
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
|
|
165
|
+
button, :scope:is(button), input:where([type="button"], [type="reset"], [type="submit"]), :scope:is(input:where([type="button"], [type="reset"], [type="submit"])), ::file-selector-button, :scope:is(::file-selector-button) {
|
|
166
166
|
appearance: button;
|
|
167
167
|
}
|
|
168
|
-
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
168
|
+
::-webkit-inner-spin-button, :scope:is(::-webkit-inner-spin-button), ::-webkit-outer-spin-button, :scope:is(::-webkit-outer-spin-button) {
|
|
169
169
|
height: auto;
|
|
170
170
|
}
|
|
171
|
-
[hidden]:where(:not([hidden="until-found"])) {
|
|
171
|
+
[hidden]:where(:not([hidden="until-found"])), :scope:is([hidden]:where(:not([hidden="until-found"]))) {
|
|
172
172
|
display: none !important;
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
176
|
@layer utilities {
|
|
177
177
|
@scope (.agent-graph, .ag-root, .ag-latest, [data-agent-metrics]) {
|
|
178
|
-
.pointer-events-auto {
|
|
178
|
+
.pointer-events-auto, :scope:is(.pointer-events-auto) {
|
|
179
179
|
pointer-events: auto;
|
|
180
180
|
}
|
|
181
|
-
.visible {
|
|
181
|
+
.visible, :scope:is(.visible) {
|
|
182
182
|
visibility: visible;
|
|
183
183
|
}
|
|
184
|
-
.sr-only {
|
|
184
|
+
.sr-only, :scope:is(.sr-only) {
|
|
185
185
|
position: absolute;
|
|
186
186
|
width: 1px;
|
|
187
187
|
height: 1px;
|
|
@@ -192,25 +192,25 @@
|
|
|
192
192
|
white-space: nowrap;
|
|
193
193
|
border-width: 0;
|
|
194
194
|
}
|
|
195
|
-
.absolute {
|
|
195
|
+
.absolute, :scope:is(.absolute) {
|
|
196
196
|
position: absolute;
|
|
197
197
|
}
|
|
198
|
-
.fixed {
|
|
198
|
+
.fixed, :scope:is(.fixed) {
|
|
199
199
|
position: fixed;
|
|
200
200
|
}
|
|
201
|
-
.relative {
|
|
201
|
+
.relative, :scope:is(.relative) {
|
|
202
202
|
position: relative;
|
|
203
203
|
}
|
|
204
|
-
.static {
|
|
204
|
+
.static, :scope:is(.static) {
|
|
205
205
|
position: static;
|
|
206
206
|
}
|
|
207
|
-
.top-2 {
|
|
207
|
+
.top-2, :scope:is(.top-2) {
|
|
208
208
|
top: calc(var(--spacing) * 2);
|
|
209
209
|
}
|
|
210
|
-
.right-3 {
|
|
210
|
+
.right-3, :scope:is(.right-3) {
|
|
211
211
|
right: calc(var(--spacing) * 3);
|
|
212
212
|
}
|
|
213
|
-
.container {
|
|
213
|
+
.container, :scope:is(.container) {
|
|
214
214
|
width: 100%;
|
|
215
215
|
@media (width >= 40rem) {
|
|
216
216
|
max-width: 40rem;
|
|
@@ -228,348 +228,348 @@
|
|
|
228
228
|
max-width: 96rem;
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
|
-
.m-0 {
|
|
231
|
+
.m-0, :scope:is(.m-0) {
|
|
232
232
|
margin: 0px;
|
|
233
233
|
}
|
|
234
|
-
.mt-3 {
|
|
234
|
+
.mt-3, :scope:is(.mt-3) {
|
|
235
235
|
margin-top: calc(var(--spacing) * 3);
|
|
236
236
|
}
|
|
237
|
-
.mt-auto {
|
|
237
|
+
.mt-auto, :scope:is(.mt-auto) {
|
|
238
238
|
margin-top: auto;
|
|
239
239
|
}
|
|
240
|
-
.mb-1 {
|
|
240
|
+
.mb-1, :scope:is(.mb-1) {
|
|
241
241
|
margin-bottom: var(--spacing);
|
|
242
242
|
}
|
|
243
|
-
.mb-2 {
|
|
243
|
+
.mb-2, :scope:is(.mb-2) {
|
|
244
244
|
margin-bottom: calc(var(--spacing) * 2);
|
|
245
245
|
}
|
|
246
|
-
.mb-3 {
|
|
246
|
+
.mb-3, :scope:is(.mb-3) {
|
|
247
247
|
margin-bottom: calc(var(--spacing) * 3);
|
|
248
248
|
}
|
|
249
|
-
.line-clamp-2 {
|
|
249
|
+
.line-clamp-2, :scope:is(.line-clamp-2) {
|
|
250
250
|
overflow: hidden;
|
|
251
251
|
display: -webkit-box;
|
|
252
252
|
-webkit-box-orient: vertical;
|
|
253
253
|
-webkit-line-clamp: 2;
|
|
254
254
|
}
|
|
255
|
-
.\!hidden {
|
|
255
|
+
.\!hidden, :scope:is(.\!hidden) {
|
|
256
256
|
display: none !important;
|
|
257
257
|
}
|
|
258
|
-
.block {
|
|
258
|
+
.block, :scope:is(.block) {
|
|
259
259
|
display: block;
|
|
260
260
|
}
|
|
261
|
-
.contents {
|
|
261
|
+
.contents, :scope:is(.contents) {
|
|
262
262
|
display: contents;
|
|
263
263
|
}
|
|
264
|
-
.flex {
|
|
264
|
+
.flex, :scope:is(.flex) {
|
|
265
265
|
display: flex;
|
|
266
266
|
}
|
|
267
|
-
.grid {
|
|
267
|
+
.grid, :scope:is(.grid) {
|
|
268
268
|
display: grid;
|
|
269
269
|
}
|
|
270
|
-
.\!h-1 {
|
|
270
|
+
.\!h-1, :scope:is(.\!h-1) {
|
|
271
271
|
height: var(--spacing) !important;
|
|
272
272
|
}
|
|
273
|
-
.h-16 {
|
|
273
|
+
.h-16, :scope:is(.h-16) {
|
|
274
274
|
height: calc(var(--spacing) * 16);
|
|
275
275
|
}
|
|
276
|
-
.h-full {
|
|
276
|
+
.h-full, :scope:is(.h-full) {
|
|
277
277
|
height: 100%;
|
|
278
278
|
}
|
|
279
|
-
.min-h-0 {
|
|
279
|
+
.min-h-0, :scope:is(.min-h-0) {
|
|
280
280
|
min-height: 0px;
|
|
281
281
|
}
|
|
282
|
-
.min-h-4 {
|
|
282
|
+
.min-h-4, :scope:is(.min-h-4) {
|
|
283
283
|
min-height: calc(var(--spacing) * 4);
|
|
284
284
|
}
|
|
285
|
-
.min-h-10 {
|
|
285
|
+
.min-h-10, :scope:is(.min-h-10) {
|
|
286
286
|
min-height: calc(var(--spacing) * 10);
|
|
287
287
|
}
|
|
288
|
-
.\!w-1 {
|
|
288
|
+
.\!w-1, :scope:is(.\!w-1) {
|
|
289
289
|
width: var(--spacing) !important;
|
|
290
290
|
}
|
|
291
|
-
.w-8 {
|
|
291
|
+
.w-8, :scope:is(.w-8) {
|
|
292
292
|
width: calc(var(--spacing) * 8);
|
|
293
293
|
}
|
|
294
|
-
.w-full {
|
|
294
|
+
.w-full, :scope:is(.w-full) {
|
|
295
295
|
width: 100%;
|
|
296
296
|
}
|
|
297
|
-
.max-w-64 {
|
|
297
|
+
.max-w-64, :scope:is(.max-w-64) {
|
|
298
298
|
max-width: calc(var(--spacing) * 64);
|
|
299
299
|
}
|
|
300
|
-
.\!min-w-0 {
|
|
300
|
+
.\!min-w-0, :scope:is(.\!min-w-0) {
|
|
301
301
|
min-width: 0px !important;
|
|
302
302
|
}
|
|
303
|
-
.min-w-0 {
|
|
303
|
+
.min-w-0, :scope:is(.min-w-0) {
|
|
304
304
|
min-width: 0px;
|
|
305
305
|
}
|
|
306
|
-
.flex-1 {
|
|
306
|
+
.flex-1, :scope:is(.flex-1) {
|
|
307
307
|
flex: 1;
|
|
308
308
|
}
|
|
309
|
-
.shrink-0 {
|
|
309
|
+
.shrink-0, :scope:is(.shrink-0) {
|
|
310
310
|
flex-shrink: 0;
|
|
311
311
|
}
|
|
312
|
-
.-rotate-90 {
|
|
312
|
+
.-rotate-90, :scope:is(.-rotate-90) {
|
|
313
313
|
rotate: calc(90deg * -1);
|
|
314
314
|
}
|
|
315
|
-
.transform {
|
|
315
|
+
.transform, :scope:is(.transform) {
|
|
316
316
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
317
317
|
}
|
|
318
|
-
.animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\] {
|
|
318
|
+
.animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\], :scope:is(.animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\]) {
|
|
319
319
|
animation: tangle-breathe var(--motion-ambient) infinite;
|
|
320
320
|
}
|
|
321
|
-
.grid-cols-\[minmax\(0\,1fr\)_auto\] {
|
|
321
|
+
.grid-cols-\[minmax\(0\,1fr\)_auto\],:scope:is(.grid-cols-\[minmax\(0\,1fr\)_auto\]) {
|
|
322
322
|
grid-template-columns: minmax(0,1fr) auto;
|
|
323
323
|
}
|
|
324
|
-
.flex-col {
|
|
324
|
+
.flex-col, :scope:is(.flex-col) {
|
|
325
325
|
flex-direction: column;
|
|
326
326
|
}
|
|
327
|
-
.flex-wrap {
|
|
327
|
+
.flex-wrap, :scope:is(.flex-wrap) {
|
|
328
328
|
flex-wrap: wrap;
|
|
329
329
|
}
|
|
330
|
-
.items-center {
|
|
330
|
+
.items-center, :scope:is(.items-center) {
|
|
331
331
|
align-items: center;
|
|
332
332
|
}
|
|
333
|
-
.justify-between {
|
|
333
|
+
.justify-between, :scope:is(.justify-between) {
|
|
334
334
|
justify-content: space-between;
|
|
335
335
|
}
|
|
336
|
-
.justify-center {
|
|
336
|
+
.justify-center, :scope:is(.justify-center) {
|
|
337
337
|
justify-content: center;
|
|
338
338
|
}
|
|
339
|
-
.gap-0\.5 {
|
|
339
|
+
.gap-0\.5, :scope:is(.gap-0\.5) {
|
|
340
340
|
gap: calc(var(--spacing) * 0.5);
|
|
341
341
|
}
|
|
342
|
-
.gap-1 {
|
|
342
|
+
.gap-1, :scope:is(.gap-1) {
|
|
343
343
|
gap: var(--spacing);
|
|
344
344
|
}
|
|
345
|
-
.gap-2 {
|
|
345
|
+
.gap-2, :scope:is(.gap-2) {
|
|
346
346
|
gap: calc(var(--spacing) * 2);
|
|
347
347
|
}
|
|
348
|
-
.gap-3 {
|
|
348
|
+
.gap-3, :scope:is(.gap-3) {
|
|
349
349
|
gap: calc(var(--spacing) * 3);
|
|
350
350
|
}
|
|
351
|
-
:where(.space-y-0\.5 > :not(:last-child)) {
|
|
351
|
+
:where(.space-y-0\.5 > :not(:last-child)), :scope:is(:where(.space-y-0\.5 > :not(:last-child))) {
|
|
352
352
|
--tw-space-y-reverse: 0;
|
|
353
353
|
margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
|
|
354
354
|
margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
|
|
355
355
|
}
|
|
356
|
-
.gap-x-3 {
|
|
356
|
+
.gap-x-3, :scope:is(.gap-x-3) {
|
|
357
357
|
column-gap: calc(var(--spacing) * 3);
|
|
358
358
|
}
|
|
359
|
-
.gap-x-5 {
|
|
359
|
+
.gap-x-5, :scope:is(.gap-x-5) {
|
|
360
360
|
column-gap: calc(var(--spacing) * 5);
|
|
361
361
|
}
|
|
362
|
-
.gap-y-1 {
|
|
362
|
+
.gap-y-1, :scope:is(.gap-y-1) {
|
|
363
363
|
row-gap: var(--spacing);
|
|
364
364
|
}
|
|
365
|
-
.gap-y-1\.5 {
|
|
365
|
+
.gap-y-1\.5, :scope:is(.gap-y-1\.5) {
|
|
366
366
|
row-gap: calc(var(--spacing) * 1.5);
|
|
367
367
|
}
|
|
368
|
-
.truncate {
|
|
368
|
+
.truncate, :scope:is(.truncate) {
|
|
369
369
|
overflow: hidden;
|
|
370
370
|
text-overflow: ellipsis;
|
|
371
371
|
white-space: nowrap;
|
|
372
372
|
}
|
|
373
|
-
.overflow-auto {
|
|
373
|
+
.overflow-auto, :scope:is(.overflow-auto) {
|
|
374
374
|
overflow: auto;
|
|
375
375
|
}
|
|
376
|
-
.rounded {
|
|
376
|
+
.rounded, :scope:is(.rounded) {
|
|
377
377
|
border-radius: 0.25rem;
|
|
378
378
|
}
|
|
379
|
-
.rounded-2xl {
|
|
379
|
+
.rounded-2xl, :scope:is(.rounded-2xl) {
|
|
380
380
|
border-radius: var(--radius-2xl);
|
|
381
381
|
}
|
|
382
|
-
.rounded-\[var\(--radius-card\)\] {
|
|
382
|
+
.rounded-\[var\(--radius-card\)\], :scope:is(.rounded-\[var\(--radius-card\)\]) {
|
|
383
383
|
border-radius: var(--radius-card);
|
|
384
384
|
}
|
|
385
|
-
.rounded-full {
|
|
385
|
+
.rounded-full, :scope:is(.rounded-full) {
|
|
386
386
|
border-radius: var(--radius-full);
|
|
387
387
|
}
|
|
388
|
-
.rounded-lg {
|
|
388
|
+
.rounded-lg, :scope:is(.rounded-lg) {
|
|
389
389
|
border-radius: var(--radius-lg);
|
|
390
390
|
}
|
|
391
|
-
.rounded-xl {
|
|
391
|
+
.rounded-xl, :scope:is(.rounded-xl) {
|
|
392
392
|
border-radius: var(--radius-xl);
|
|
393
393
|
}
|
|
394
|
-
.\!border-0 {
|
|
394
|
+
.\!border-0, :scope:is(.\!border-0) {
|
|
395
395
|
border-style: var(--tw-border-style) !important;
|
|
396
396
|
border-width: 0px !important;
|
|
397
397
|
}
|
|
398
|
-
.border {
|
|
398
|
+
.border, :scope:is(.border) {
|
|
399
399
|
border-style: var(--tw-border-style);
|
|
400
400
|
border-width: 1px;
|
|
401
401
|
}
|
|
402
|
-
.border-t {
|
|
402
|
+
.border-t, :scope:is(.border-t) {
|
|
403
403
|
border-top-style: var(--tw-border-style);
|
|
404
404
|
border-top-width: 1px;
|
|
405
405
|
}
|
|
406
|
-
.border-dashed {
|
|
406
|
+
.border-dashed, :scope:is(.border-dashed) {
|
|
407
407
|
--tw-border-style: dashed;
|
|
408
408
|
border-style: dashed;
|
|
409
409
|
}
|
|
410
|
-
.border-border {
|
|
410
|
+
.border-border, :scope:is(.border-border) {
|
|
411
411
|
border-color: hsl(var(--border));
|
|
412
412
|
}
|
|
413
|
-
.\!bg-transparent {
|
|
413
|
+
.\!bg-transparent, :scope:is(.\!bg-transparent) {
|
|
414
414
|
background-color: transparent !important;
|
|
415
415
|
}
|
|
416
|
-
.bg-background {
|
|
416
|
+
.bg-background, :scope:is(.bg-background) {
|
|
417
417
|
background-color: hsl(var(--background));
|
|
418
418
|
}
|
|
419
|
-
.bg-card {
|
|
419
|
+
.bg-card, :scope:is(.bg-card) {
|
|
420
420
|
background-color: hsl(var(--card));
|
|
421
421
|
}
|
|
422
|
-
.p-2 {
|
|
422
|
+
.p-2, :scope:is(.p-2) {
|
|
423
423
|
padding: calc(var(--spacing) * 2);
|
|
424
424
|
}
|
|
425
|
-
.p-4 {
|
|
425
|
+
.p-4, :scope:is(.p-4) {
|
|
426
426
|
padding: calc(var(--spacing) * 4);
|
|
427
427
|
}
|
|
428
|
-
.px-1\.5 {
|
|
428
|
+
.px-1\.5, :scope:is(.px-1\.5) {
|
|
429
429
|
padding-inline: calc(var(--spacing) * 1.5);
|
|
430
430
|
}
|
|
431
|
-
.px-2 {
|
|
431
|
+
.px-2, :scope:is(.px-2) {
|
|
432
432
|
padding-inline: calc(var(--spacing) * 2);
|
|
433
433
|
}
|
|
434
|
-
.px-3 {
|
|
434
|
+
.px-3, :scope:is(.px-3) {
|
|
435
435
|
padding-inline: calc(var(--spacing) * 3);
|
|
436
436
|
}
|
|
437
|
-
.py-0\.5 {
|
|
437
|
+
.py-0\.5, :scope:is(.py-0\.5) {
|
|
438
438
|
padding-block: calc(var(--spacing) * 0.5);
|
|
439
439
|
}
|
|
440
|
-
.py-1 {
|
|
440
|
+
.py-1, :scope:is(.py-1) {
|
|
441
441
|
padding-block: var(--spacing);
|
|
442
442
|
}
|
|
443
|
-
.py-2 {
|
|
443
|
+
.py-2, :scope:is(.py-2) {
|
|
444
444
|
padding-block: calc(var(--spacing) * 2);
|
|
445
445
|
}
|
|
446
|
-
.pt-3 {
|
|
446
|
+
.pt-3, :scope:is(.pt-3) {
|
|
447
447
|
padding-top: calc(var(--spacing) * 3);
|
|
448
448
|
}
|
|
449
|
-
.text-center {
|
|
449
|
+
.text-center, :scope:is(.text-center) {
|
|
450
450
|
text-align: center;
|
|
451
451
|
}
|
|
452
|
-
.text-left {
|
|
452
|
+
.text-left, :scope:is(.text-left) {
|
|
453
453
|
text-align: left;
|
|
454
454
|
}
|
|
455
|
-
.text-right {
|
|
455
|
+
.text-right, :scope:is(.text-right) {
|
|
456
456
|
text-align: right;
|
|
457
457
|
}
|
|
458
|
-
.text-sm {
|
|
458
|
+
.text-sm, :scope:is(.text-sm) {
|
|
459
459
|
font-size: var(--text-sm);
|
|
460
460
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
461
461
|
}
|
|
462
|
-
.text-xs {
|
|
462
|
+
.text-xs, :scope:is(.text-xs) {
|
|
463
463
|
font-size: var(--text-xs);
|
|
464
464
|
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
465
465
|
}
|
|
466
|
-
.text-\[10px\] {
|
|
466
|
+
.text-\[10px\], :scope:is(.text-\[10px\]) {
|
|
467
467
|
font-size: 10px;
|
|
468
468
|
}
|
|
469
|
-
.leading-4 {
|
|
469
|
+
.leading-4, :scope:is(.leading-4) {
|
|
470
470
|
--tw-leading: calc(var(--spacing) * 4);
|
|
471
471
|
line-height: calc(var(--spacing) * 4);
|
|
472
472
|
}
|
|
473
|
-
.leading-\[18px\] {
|
|
473
|
+
.leading-\[18px\], :scope:is(.leading-\[18px\]) {
|
|
474
474
|
--tw-leading: 18px;
|
|
475
475
|
line-height: 18px;
|
|
476
476
|
}
|
|
477
|
-
.font-medium {
|
|
477
|
+
.font-medium, :scope:is(.font-medium) {
|
|
478
478
|
--tw-font-weight: var(--font-weight-medium);
|
|
479
479
|
font-weight: var(--font-weight-medium);
|
|
480
480
|
}
|
|
481
|
-
.font-normal {
|
|
481
|
+
.font-normal, :scope:is(.font-normal) {
|
|
482
482
|
--tw-font-weight: var(--font-weight-normal);
|
|
483
483
|
font-weight: var(--font-weight-normal);
|
|
484
484
|
}
|
|
485
|
-
.font-semibold {
|
|
485
|
+
.font-semibold, :scope:is(.font-semibold) {
|
|
486
486
|
--tw-font-weight: var(--font-weight-semibold);
|
|
487
487
|
font-weight: var(--font-weight-semibold);
|
|
488
488
|
}
|
|
489
|
-
.break-words {
|
|
489
|
+
.break-words, :scope:is(.break-words) {
|
|
490
490
|
overflow-wrap: break-word;
|
|
491
491
|
}
|
|
492
|
-
.whitespace-normal {
|
|
492
|
+
.whitespace-normal, :scope:is(.whitespace-normal) {
|
|
493
493
|
white-space: normal;
|
|
494
494
|
}
|
|
495
|
-
.whitespace-nowrap {
|
|
495
|
+
.whitespace-nowrap, :scope:is(.whitespace-nowrap) {
|
|
496
496
|
white-space: nowrap;
|
|
497
497
|
}
|
|
498
|
-
.whitespace-pre-wrap {
|
|
498
|
+
.whitespace-pre-wrap, :scope:is(.whitespace-pre-wrap) {
|
|
499
499
|
white-space: pre-wrap;
|
|
500
500
|
}
|
|
501
|
-
.text-\[var\(--surface-danger-text\)\] {
|
|
501
|
+
.text-\[var\(--surface-danger-text\)\], :scope:is(.text-\[var\(--surface-danger-text\)\]) {
|
|
502
502
|
color: var(--surface-danger-text);
|
|
503
503
|
}
|
|
504
|
-
.text-foreground {
|
|
504
|
+
.text-foreground, :scope:is(.text-foreground) {
|
|
505
505
|
color: hsl(var(--foreground));
|
|
506
506
|
}
|
|
507
|
-
.text-muted-foreground {
|
|
507
|
+
.text-muted-foreground, :scope:is(.text-muted-foreground) {
|
|
508
508
|
color: hsl(var(--muted-foreground));
|
|
509
509
|
}
|
|
510
|
-
.tabular-nums {
|
|
510
|
+
.tabular-nums, :scope:is(.tabular-nums) {
|
|
511
511
|
--tw-numeric-spacing: tabular-nums;
|
|
512
512
|
font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
|
|
513
513
|
}
|
|
514
|
-
.opacity-0 {
|
|
514
|
+
.opacity-0, :scope:is(.opacity-0) {
|
|
515
515
|
opacity: 0%;
|
|
516
516
|
}
|
|
517
|
-
.shadow-sm {
|
|
517
|
+
.shadow-sm, :scope:is(.shadow-sm) {
|
|
518
518
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
519
519
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
520
520
|
}
|
|
521
|
-
.shadow-xl {
|
|
521
|
+
.shadow-xl, :scope:is(.shadow-xl) {
|
|
522
522
|
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
523
523
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
524
524
|
}
|
|
525
|
-
.grayscale {
|
|
525
|
+
.grayscale, :scope:is(.grayscale) {
|
|
526
526
|
--tw-grayscale: grayscale(100%);
|
|
527
527
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
528
528
|
}
|
|
529
|
-
.transition {
|
|
529
|
+
.transition, :scope:is(.transition) {
|
|
530
530
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
|
531
531
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
532
532
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
533
533
|
}
|
|
534
|
-
.\!outline-none {
|
|
534
|
+
.\!outline-none, :scope:is(.\!outline-none) {
|
|
535
535
|
--tw-outline-style: none !important;
|
|
536
536
|
outline-style: none !important;
|
|
537
537
|
}
|
|
538
|
-
.\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\] {
|
|
538
|
+
.\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\],:scope:is(.\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\]) {
|
|
539
539
|
transition: color var(--motion-control),background-color var(--motion-control),border-color var(--motion-control),box-shadow var(--motion-control),transform var(--motion-control),scale var(--motion-control),opacity var(--motion-control);
|
|
540
540
|
}
|
|
541
|
-
.\[transition\:opacity_var\(--motion-surface\)\,transform_var\(--motion-surface\)\] {
|
|
541
|
+
.\[transition\:opacity_var\(--motion-surface\)\,transform_var\(--motion-surface\)\],:scope:is(.\[transition\:opacity_var\(--motion-surface\)\,transform_var\(--motion-surface\)\]) {
|
|
542
542
|
transition: opacity var(--motion-surface),transform var(--motion-surface);
|
|
543
543
|
}
|
|
544
544
|
@media (hover: hover) {
|
|
545
|
-
.hover\:bg-muted:hover {
|
|
545
|
+
.hover\:bg-muted:hover, :scope:is(.hover\:bg-muted:hover) {
|
|
546
546
|
background-color: hsl(var(--muted));
|
|
547
547
|
}
|
|
548
|
-
.hover\:text-foreground:hover {
|
|
548
|
+
.hover\:text-foreground:hover, :scope:is(.hover\:text-foreground:hover) {
|
|
549
549
|
color: hsl(var(--foreground));
|
|
550
550
|
}
|
|
551
|
-
.hover\:grayscale-0:hover {
|
|
551
|
+
.hover\:grayscale-0:hover, :scope:is(.hover\:grayscale-0:hover) {
|
|
552
552
|
--tw-grayscale: grayscale(0%);
|
|
553
553
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
554
554
|
}
|
|
555
555
|
}
|
|
556
|
-
.focus-visible\:outline:focus-visible {
|
|
556
|
+
.focus-visible\:outline:focus-visible, :scope:is(.focus-visible\:outline:focus-visible) {
|
|
557
557
|
outline-style: var(--tw-outline-style);
|
|
558
558
|
outline-width: 1px;
|
|
559
559
|
}
|
|
560
|
-
.disabled\:opacity-40:disabled {
|
|
560
|
+
.disabled\:opacity-40:disabled, :scope:is(.disabled\:opacity-40:disabled) {
|
|
561
561
|
opacity: 40%;
|
|
562
562
|
}
|
|
563
|
-
.aria-pressed\:bg-muted[aria-pressed="true"] {
|
|
563
|
+
.aria-pressed\:bg-muted[aria-pressed="true"], :scope:is(.aria-pressed\:bg-muted[aria-pressed="true"]) {
|
|
564
564
|
background-color: hsl(var(--muted));
|
|
565
565
|
}
|
|
566
566
|
@media (prefers-reduced-motion: reduce) {
|
|
567
|
-
.motion-reduce\:transition-none {
|
|
567
|
+
.motion-reduce\:transition-none, :scope:is(.motion-reduce\:transition-none) {
|
|
568
568
|
transition-property: none;
|
|
569
569
|
}
|
|
570
570
|
}
|
|
571
571
|
@media (width >= 40rem) {
|
|
572
|
-
.sm\:\!block {
|
|
572
|
+
.sm\:\!block, :scope:is(.sm\:\!block) {
|
|
573
573
|
display: block !important;
|
|
574
574
|
}
|
|
575
575
|
}
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.fw-root .fw-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--fw-border); flex-wrap: wrap; }
|
|
66
|
-
.fw-root .fw-title-block { min-width: 0; display: grid; gap: 4px; }
|
|
66
|
+
.fw-root .fw-title-block { flex: 1; min-width: 0; display: grid; gap: 4px; }
|
|
67
67
|
.fw-root .fw-title-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
68
68
|
.fw-root .fw-title-glyph { display: inline-flex; color: var(--fw-accent); }
|
|
69
69
|
.fw-root .fw-title { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
|
|
@@ -195,6 +195,8 @@
|
|
|
195
195
|
.fw-root .fw-enter > [role="gridcell"] { transition: opacity var(--motion-arrive); transition-delay: var(--fw-enter-delay); }
|
|
196
196
|
.fw-root .fw-enter :is(.fw-bar, .fw-seg) { transition: clip-path var(--motion-grow, var(--motion-stream)); transition-delay: var(--fw-enter-delay); clip-path: inset(0); }
|
|
197
197
|
@starting-style { .fw-root .fw-enter > [role="gridcell"] { opacity: 0; } .fw-root .fw-enter :is(.fw-bar, .fw-seg) { clip-path: inset(0 100% 0 0); } }
|
|
198
|
+
.fw-root[data-follow-live] .fw-row[data-running] .fw-bar { --on: 1; }
|
|
199
|
+
.fw-root[data-follow-live] :is(.fw-seg, .fw-mark), .fw-root[data-follow-live] .fw-row:not([data-running]) .fw-bar { --fw-t: calc(var(--e) + 1); }
|
|
198
200
|
.fw-root .fw-row[data-critical] .fw-bar { box-shadow: inset 0 -2px 0 var(--fw-accent); }
|
|
199
201
|
.fw-root .fw-row[data-search="context"] .fw-label { color: var(--fw-muted); }
|
|
200
202
|
.fw-root .fw-row[data-search="match"] .fw-name-text { font-weight: 600; }
|
|
@@ -220,10 +222,10 @@
|
|
|
220
222
|
.fw-root [data-outcome="neutral"] { --outcome-tone: var(--fw-muted); }
|
|
221
223
|
.fw-root [data-outcome], .fw-root [data-outcome] [data-tone] { --tone: var(--outcome-tone); }
|
|
222
224
|
.fw-root.fw-root .fw-agent-dot[data-outcome] { --tone: var(--outcome-tone); }
|
|
223
|
-
.fw-root .fw-legend { display: flex; flex-wrap:
|
|
224
|
-
.fw-root .fw-legend li { display: inline-flex; align-items: center; gap: 8px; flex
|
|
225
|
-
.fw-root .fw-legends { display: flex;
|
|
226
|
-
.fw-root .fw-legends .fw-legend { margin: 0; }
|
|
225
|
+
.fw-root .fw-legend { display: flex; flex-wrap: nowrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--fw-muted); font-size: 14px; line-height: 18px; }
|
|
226
|
+
.fw-root .fw-legend li { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
|
|
227
|
+
.fw-root .fw-legends { display: flex; align-items: center; gap: 24px; max-width: 100%; min-width: 0; overflow-x: auto; margin-top: 8px; }
|
|
228
|
+
.fw-root .fw-legends .fw-legend { flex: none; margin: 0; }
|
|
227
229
|
.fw-root .fw-kinds { margin: 0; padding: 0; justify-content: flex-start; color: var(--fw-muted); }
|
|
228
230
|
.fw-root .fw-kinds .fw-swatch-model { width: 12px; height: 8px; border-radius: 2px; background: var(--fw-kind-model); }
|
|
229
231
|
.fw-root.fw-fill-agent .fw-kinds .fw-swatch-model { background: var(--model-fill); }
|
|
@@ -273,7 +275,7 @@
|
|
|
273
275
|
.fw-root .fw-outcome-end { display: inline-flex; pointer-events: auto; }
|
|
274
276
|
.fw-root .fw-duration { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--fw-muted); font-variant-numeric: tabular-nums; }
|
|
275
277
|
.fw-root .fw-k-failed ~ .fw-end .fw-duration { color: var(--fw-failed); }
|
|
276
|
-
.fw-root .fw-badge { display: inline-flex; flex: none; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size:
|
|
278
|
+
.fw-root .fw-badge { display: inline-flex; flex: none; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--fw-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--fw-border); }
|
|
277
279
|
|
|
278
280
|
.fw-root .fw-links { position: absolute; top: 0; bottom: 0; left: var(--fw-label-col); right: 0; overflow: hidden; pointer-events: none; z-index: 0; }
|
|
279
281
|
.fw-root .fw-link {
|
|
@@ -372,9 +374,6 @@
|
|
|
372
374
|
.fw-root .fw-legend button { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
|
|
373
375
|
.fw-root .fw-legend button[aria-pressed="true"] { color: var(--fw-text); text-decoration: underline; text-underline-offset: 4px; }
|
|
374
376
|
.fw-root .fw-summary button { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; }
|
|
375
|
-
.fw-root .fw-key > summary { display: none; }
|
|
376
|
-
.fw-root .fw-key > summary svg { width: 12px; height: 12px; margin-left: 6px; }
|
|
377
|
-
.fw-root .fw-key[open] > summary svg { transform: rotate(90deg); }
|
|
378
377
|
.fw-root .fw-row-state { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
|
|
379
378
|
.fw-root .fw-error-rug { position: relative; height: 10px; margin-left: var(--fw-label-col); overflow: hidden; }
|
|
380
379
|
.fw-root .fw-error-tick { position: absolute; width: 2px; height: 8px; background: var(--fw-failed); left: calc(var(--fw-pad) + (var(--s) - var(--fw-v0)) * var(--fw-k) * 1px); }
|
|
@@ -394,12 +393,10 @@
|
|
|
394
393
|
.fw-root .fw-summary::after { content: ""; flex-basis: 100%; }
|
|
395
394
|
.fw-root .fw-summary > div:nth-child(n+3) { order: 1; }
|
|
396
395
|
.fw-root :is(.fw-zoom, .fw-branch-controls, .fw-resize, .fw-links, .fw-gridlayer, .fw-marker-layer, .fw-subtitle, .fw-badge, .fw-icon-tile) { display: none; }
|
|
397
|
-
.fw-root .fw-key > summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; grid-area: 2 / 2; }
|
|
398
|
-
.fw-root .fw-key:not([open]) .fw-legends { display: none; }
|
|
399
396
|
.fw-root .fw-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px; }
|
|
400
|
-
.fw-root .fw-title-block
|
|
397
|
+
.fw-root .fw-title-block { display: contents; }
|
|
401
398
|
.fw-root .fw-title-line { grid-column: 1 / -1; flex-wrap: wrap; }
|
|
402
|
-
.fw-root .fw-legends { grid-area: 3 / 1 / auto / -1; margin:
|
|
399
|
+
.fw-root .fw-legends { grid-area: 3 / 1 / auto / -1; margin: 0; }
|
|
403
400
|
.fw-root .fw-tools { grid-area: 2 / 1; flex-wrap: wrap; }
|
|
404
401
|
.fw-root .fw-segmented { padding: 2px; }
|
|
405
402
|
.fw-root .fw-segmented button { min-width: 28px; padding: 0 6px; }
|
package/dist/react/index.js
CHANGED
|
@@ -1688,8 +1688,8 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
|
|
|
1688
1688
|
});
|
|
1689
1689
|
const hatched = new Set(hatch);
|
|
1690
1690
|
const plotBottom = top + lanes.length * rowH;
|
|
1691
|
-
const first = maxHeight
|
|
1692
|
-
const visible = maxHeight
|
|
1691
|
+
const first = maxHeight ? Math.max(0, Math.floor((scrollTop - top) / rowH) - 6) : 0;
|
|
1692
|
+
const visible = maxHeight ? lanes.slice(first, first + Math.ceil(maxHeight / rowH) + 14) : lanes;
|
|
1693
1693
|
const select = (id) => onSelect?.(id);
|
|
1694
1694
|
const focusLane = (index) => {
|
|
1695
1695
|
const at = Math.max(0, Math.min(lanes.length - 1, index));
|
|
@@ -1783,6 +1783,26 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
|
|
|
1783
1783
|
tabIndex: onSelect ? 0 : void 0,
|
|
1784
1784
|
"aria-label": lane.label,
|
|
1785
1785
|
"aria-pressed": onSelect ? selectedId === lane.id : void 0,
|
|
1786
|
+
onMouseEnter: () => setTip({
|
|
1787
|
+
x: tipX(x(ends(lane.spans.at(-1) ?? { end: t1 }))),
|
|
1788
|
+
y: tipY(y),
|
|
1789
|
+
title: lane.label,
|
|
1790
|
+
lines: lane.spans.flatMap((s) => [
|
|
1791
|
+
{
|
|
1792
|
+
label: s.end === null ? `${s.state} (open)` : s.state,
|
|
1793
|
+
value: span(s.start, ends(s)),
|
|
1794
|
+
color: hatched.has(s.state) ? void 0 : colors[s.state] ?? fallback
|
|
1795
|
+
},
|
|
1796
|
+
...s.note ? [{
|
|
1797
|
+
label: s.note,
|
|
1798
|
+
value: ""
|
|
1799
|
+
}] : [],
|
|
1800
|
+
...s.endLabel ? [{
|
|
1801
|
+
label: "Duration / cost",
|
|
1802
|
+
value: s.endLabel
|
|
1803
|
+
}] : []
|
|
1804
|
+
])
|
|
1805
|
+
}),
|
|
1786
1806
|
onClick: () => select(lane.id),
|
|
1787
1807
|
onKeyDown: (event) => {
|
|
1788
1808
|
if (event.key === "Enter" || event.key === " ") {
|
|
@@ -1814,27 +1834,7 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
|
|
|
1814
1834
|
y,
|
|
1815
1835
|
width,
|
|
1816
1836
|
height: rowH,
|
|
1817
|
-
fill: "transparent"
|
|
1818
|
-
onMouseEnter: () => setTip({
|
|
1819
|
-
x: tipX(x(ends(lane.spans.at(-1) ?? { end: t1 }))),
|
|
1820
|
-
y: tipY(y),
|
|
1821
|
-
title: lane.label,
|
|
1822
|
-
lines: lane.spans.flatMap((s) => [
|
|
1823
|
-
{
|
|
1824
|
-
label: s.end === null ? `${s.state} (open)` : s.state,
|
|
1825
|
-
value: span(s.start, ends(s)),
|
|
1826
|
-
color: hatched.has(s.state) ? void 0 : colors[s.state] ?? fallback
|
|
1827
|
-
},
|
|
1828
|
-
...s.note ? [{
|
|
1829
|
-
label: s.note,
|
|
1830
|
-
value: ""
|
|
1831
|
-
}] : [],
|
|
1832
|
-
...s.endLabel ? [{
|
|
1833
|
-
label: "Duration / cost",
|
|
1834
|
-
value: s.endLabel
|
|
1835
|
-
}] : []
|
|
1836
|
-
])
|
|
1837
|
-
})
|
|
1837
|
+
fill: "transparent"
|
|
1838
1838
|
}),
|
|
1839
1839
|
/* @__PURE__ */ jsxs("text", {
|
|
1840
1840
|
x: phone ? 8 : labelW - em * .5,
|
|
@@ -3087,15 +3087,11 @@ const FlowRow = memo(function FlowRow(props) {
|
|
|
3087
3087
|
const opens = family || agentView && isAgent && row.own.length > 0;
|
|
3088
3088
|
const outcomes = row.outcomes ?? (span.outcome ? [span.outcome] : []);
|
|
3089
3089
|
const failedEnd = isAgent && !family && state === "failed" && Number.isFinite(span.endMs) && span.endMs <= clockMs;
|
|
3090
|
-
const callouts =
|
|
3091
|
-
className: "fw-badge",
|
|
3092
|
-
title: agentView ? "Longest elapsed leaf agent" : "Longest elapsed leaf step",
|
|
3093
|
-
children: agentView ? "Longest leaf" : "Longest step"
|
|
3094
|
-
}), costliest && /* @__PURE__ */ jsx("span", {
|
|
3090
|
+
const callouts = (slowest || costliest) && /* @__PURE__ */ jsx("span", {
|
|
3095
3091
|
className: "fw-badge",
|
|
3096
|
-
title: "
|
|
3097
|
-
children: "Costliest leaf"
|
|
3098
|
-
})
|
|
3092
|
+
title: costliest ? `${slowest ? "Longest elapsed; " : ""}highest reported cost among priced leaf agents` : agentView ? "Longest elapsed leaf agent" : "Longest elapsed leaf step",
|
|
3093
|
+
children: slowest ? agentView ? costliest ? "Longest · costliest leaf" : "Longest leaf" : "Longest step" : "Costliest leaf"
|
|
3094
|
+
});
|
|
3099
3095
|
return /* @__PURE__ */ jsxs("div", {
|
|
3100
3096
|
role: "row",
|
|
3101
3097
|
"data-span-id": row.id,
|
|
@@ -3973,6 +3969,7 @@ function useTraceClock(input) {
|
|
|
3973
3969
|
const [clockMs, setClockMs] = useState(position ?? observedTotal);
|
|
3974
3970
|
const receivedAt = useRef(Date.now());
|
|
3975
3971
|
const playhead = useRef(position ?? observedTotal);
|
|
3972
|
+
const geometry = useRef({});
|
|
3976
3973
|
const latest = useRef(input);
|
|
3977
3974
|
latest.current = input;
|
|
3978
3975
|
useEffect(() => {
|
|
@@ -3988,9 +3985,29 @@ function useTraceClock(input) {
|
|
|
3988
3985
|
if (!element) return;
|
|
3989
3986
|
const { startMs, endMs } = latest.current.view(t);
|
|
3990
3987
|
const k = Math.max(1e-9, latest.current.trackPx / Math.max(1, endMs - startMs));
|
|
3991
|
-
|
|
3992
|
-
|
|
3993
|
-
|
|
3988
|
+
const following = latest.current.live && !latest.current.playing && latest.current.position === null;
|
|
3989
|
+
for (const [name, value, scale] of [
|
|
3990
|
+
[
|
|
3991
|
+
"--fw-t",
|
|
3992
|
+
t,
|
|
3993
|
+
k
|
|
3994
|
+
],
|
|
3995
|
+
[
|
|
3996
|
+
"--fw-v0",
|
|
3997
|
+
startMs,
|
|
3998
|
+
k
|
|
3999
|
+
],
|
|
4000
|
+
[
|
|
4001
|
+
"--fw-k",
|
|
4002
|
+
k,
|
|
4003
|
+
endMs - startMs
|
|
4004
|
+
]
|
|
4005
|
+
]) {
|
|
4006
|
+
const distance = Math.abs(value - (geometry.current[name] ?? NaN)) * scale;
|
|
4007
|
+
if (following && Number.isFinite(distance) && distance < .25) continue;
|
|
4008
|
+
element.style.setProperty(name, String(value));
|
|
4009
|
+
geometry.current[name] = value;
|
|
4010
|
+
}
|
|
3994
4011
|
if (slider.current) {
|
|
3995
4012
|
slider.current.max = String(Math.max(1, limit, t));
|
|
3996
4013
|
slider.current.value = String(t);
|
|
@@ -3999,12 +4016,13 @@ function useTraceClock(input) {
|
|
|
3999
4016
|
};
|
|
4000
4017
|
useLayoutEffect(() => {
|
|
4001
4018
|
if (position !== null) playhead.current = position;
|
|
4002
|
-
if (!
|
|
4019
|
+
if (!live && !playing) {
|
|
4003
4020
|
const t = position ?? observedTotal;
|
|
4004
4021
|
paint(t);
|
|
4005
4022
|
setClockMs(t);
|
|
4006
4023
|
return;
|
|
4007
4024
|
}
|
|
4025
|
+
paint(playing ? playhead.current : position ?? liveNow());
|
|
4008
4026
|
let frame = 0;
|
|
4009
4027
|
let last = performance.now();
|
|
4010
4028
|
let lastText = 0;
|
|
@@ -4037,11 +4055,10 @@ function useTraceClock(input) {
|
|
|
4037
4055
|
playing,
|
|
4038
4056
|
position,
|
|
4039
4057
|
observedTotal,
|
|
4040
|
-
snapshot
|
|
4058
|
+
snapshot,
|
|
4059
|
+
view,
|
|
4060
|
+
trackPx
|
|
4041
4061
|
]);
|
|
4042
|
-
useLayoutEffect(() => {
|
|
4043
|
-
paint(playing ? playhead.current : position ?? (live ? liveNow() : observedTotal));
|
|
4044
|
-
}, [view, trackPx]);
|
|
4045
4062
|
return {
|
|
4046
4063
|
clockMs,
|
|
4047
4064
|
limitMs: liveNow,
|
|
@@ -4116,14 +4133,14 @@ function PlaybackBar({ view, playing, limit, clockMs, speed, zoom, marks, slider
|
|
|
4116
4133
|
/* @__PURE__ */ jsxs("div", {
|
|
4117
4134
|
className: "fw-overview-marks",
|
|
4118
4135
|
"aria-hidden": true,
|
|
4119
|
-
children: [marks.map((mark, i) => /* @__PURE__ */ jsx("span", {
|
|
4136
|
+
children: [view !== "agents" && marks.map((mark, i) => /* @__PURE__ */ jsx("span", {
|
|
4120
4137
|
className: `fw-ov fw-seg-${mark.kind}`,
|
|
4121
4138
|
"data-tone": toneKey(mark.tone),
|
|
4122
4139
|
style: {
|
|
4123
4140
|
left: `${mark.startMs / Math.max(1, limit) * 100}%`,
|
|
4124
4141
|
width: `${Math.max(.15, (Math.min(mark.endMs, limit) - mark.startMs) / Math.max(1, limit) * 100)}%`
|
|
4125
4142
|
}
|
|
4126
|
-
}, i)), zoom && /* @__PURE__ */ jsx("span", {
|
|
4143
|
+
}, i)), view !== "agents" && zoom && /* @__PURE__ */ jsx("span", {
|
|
4127
4144
|
className: "fw-brush",
|
|
4128
4145
|
style: {
|
|
4129
4146
|
left: `${zoom.startMs / limit * 100}%`,
|
|
@@ -4284,14 +4301,14 @@ function KindLegend({ rows, fill }) {
|
|
|
4284
4301
|
const shown = [
|
|
4285
4302
|
["model", "Model call"],
|
|
4286
4303
|
["tool", "Tool call"],
|
|
4287
|
-
["waiting", "
|
|
4304
|
+
["waiting", "Waiting / untraced"],
|
|
4288
4305
|
["handoff", "Handoff"]
|
|
4289
4306
|
].filter(([kind]) => kind === "waiting" ? rows.some((row) => row.kind === "pipeline") : kind === "handoff" ? rows.some((row) => row.span.handoffTo || row.hasAgents) : has(kind));
|
|
4290
4307
|
if (shown.length === 0) return null;
|
|
4291
|
-
return /* @__PURE__ */
|
|
4308
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
4292
4309
|
className: "fw-legend fw-kinds",
|
|
4293
4310
|
"aria-label": "Key",
|
|
4294
|
-
children:
|
|
4311
|
+
children: shown.map(([kind, name]) => {
|
|
4295
4312
|
const examples = rows.flatMap((owner) => owner.own.flatMap((mark) => workKind(mark) === kind ? [{
|
|
4296
4313
|
owner,
|
|
4297
4314
|
mark
|
|
@@ -4300,23 +4317,12 @@ function KindLegend({ rows, fill }) {
|
|
|
4300
4317
|
return /* @__PURE__ */ jsxs("li", {
|
|
4301
4318
|
"data-tone": fill === "agent" ? toneKey(example?.mark.tone ?? 0) : void 0,
|
|
4302
4319
|
"data-example": example?.owner.id,
|
|
4303
|
-
children: [
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
}),
|
|
4308
|
-
name,
|
|
4309
|
-
example && /* @__PURE__ */ jsxs("span", { children: [
|
|
4310
|
-
"(",
|
|
4311
|
-
example.owner.name,
|
|
4312
|
-
")"
|
|
4313
|
-
] })
|
|
4314
|
-
]
|
|
4320
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
4321
|
+
className: `fw-swatch-${kind === "waiting" ? "wait" : kind}`,
|
|
4322
|
+
"aria-hidden": true
|
|
4323
|
+
}), name]
|
|
4315
4324
|
}, kind);
|
|
4316
|
-
})
|
|
4317
|
-
className: "fw-kind-rule",
|
|
4318
|
-
children: fill === "agent" ? "Hue identifies family; shade identifies work. Rail: recorded elapsed time." : "Shade identifies work. Rail: recorded elapsed time."
|
|
4319
|
-
})]
|
|
4325
|
+
})
|
|
4320
4326
|
});
|
|
4321
4327
|
}
|
|
4322
4328
|
function MarkerLegend({ markers }) {
|
|
@@ -4831,6 +4837,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
|
|
|
4831
4837
|
return /* @__PURE__ */ jsxs("section", {
|
|
4832
4838
|
ref: root,
|
|
4833
4839
|
"data-flow-waterfall": true,
|
|
4840
|
+
"data-follow-live": isLive && position === null && !playing || void 0,
|
|
4834
4841
|
"aria-label": label,
|
|
4835
4842
|
className: `fw-root fw-root-${view} fw-fill-${agentFill}`,
|
|
4836
4843
|
"data-selection": selectedId ? "" : void 0,
|
|
@@ -4901,25 +4908,24 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
|
|
|
4901
4908
|
children: "Live"
|
|
4902
4909
|
})
|
|
4903
4910
|
]
|
|
4904
|
-
}), view !== "graph" && /* @__PURE__ */ jsxs("
|
|
4905
|
-
className: "fw-
|
|
4906
|
-
|
|
4907
|
-
|
|
4908
|
-
|
|
4909
|
-
|
|
4910
|
-
|
|
4911
|
-
|
|
4912
|
-
|
|
4913
|
-
|
|
4914
|
-
|
|
4915
|
-
|
|
4916
|
-
|
|
4917
|
-
|
|
4918
|
-
|
|
4919
|
-
|
|
4920
|
-
|
|
4921
|
-
|
|
4922
|
-
})]
|
|
4911
|
+
}), view !== "graph" && /* @__PURE__ */ jsxs("div", {
|
|
4912
|
+
className: "fw-legends",
|
|
4913
|
+
role: "region",
|
|
4914
|
+
"aria-label": "Timeline key",
|
|
4915
|
+
tabIndex: 0,
|
|
4916
|
+
children: [
|
|
4917
|
+
view === "agents" && /* @__PURE__ */ jsx(KindLegend, {
|
|
4918
|
+
rows: visible,
|
|
4919
|
+
fill: agentFill
|
|
4920
|
+
}),
|
|
4921
|
+
/* @__PURE__ */ jsx(OutcomeLegend, {
|
|
4922
|
+
agents,
|
|
4923
|
+
neutral: visible.some((row) => row.kind === "pipeline" && !row.span.outcome && !row.outcomes?.length),
|
|
4924
|
+
selected: filter,
|
|
4925
|
+
onFilter: applyFilter
|
|
4926
|
+
}),
|
|
4927
|
+
/* @__PURE__ */ jsx(MarkerLegend, { markers })
|
|
4928
|
+
]
|
|
4923
4929
|
})]
|
|
4924
4930
|
}), /* @__PURE__ */ jsxs("div", {
|
|
4925
4931
|
className: "fw-tools",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tangle-network/charts",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.15",
|
|
4
4
|
"description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|