@tangle-network/sandbox-ui 2.0.3 → 2.0.4
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/{AgentGraph-Dd1EBlhu.js → AgentGraph-DA5lyE06.js} +2 -2
- package/dist/{AgentGraph-BqLPrigw.d.ts → AgentGraph-K7OCgKcC.d.ts} +4 -4
- package/dist/{AgentGraphCanvas-CIGQjYtw.js → AgentGraphCanvas-BQwSxnaH.js} +49 -114
- package/dist/{WorkflowGraph-Bj6VMnOz.js → WorkflowGraph-CQyy5SBb.js} +3 -3
- package/dist/{canvas-theme-DGd0fm1H.js → canvas-theme-aqWjGbfu.js} +2 -5
- package/dist/globals.css +126 -66
- package/dist/{index-CjGeAD3E.d.ts → index-DMX2q0_h.d.ts} +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/{latest-events-D1i5Ny3N.js → latest-events-C_G-ekNg.js} +36 -56
- package/dist/{node-ui-DWv_oLvy.js → node-ui-DJo7yr4o.js} +1 -1
- package/dist/{run-B0HDqO5h.js → run-X00BQO6i.js} +2 -2
- package/dist/run.d.ts +1 -1
- package/dist/run.js +2 -2
- package/dist/styles.css +126 -66
- package/dist/tailwind.css +44 -31
- package/dist/workflows.d.ts +1 -1
- package/dist/workflows.js +2 -2
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -9127,7 +9127,7 @@
|
|
|
9127
9127
|
}
|
|
9128
9128
|
.ag-live-slot {
|
|
9129
9129
|
display: flex;
|
|
9130
|
-
align-items:
|
|
9130
|
+
align-items: flex-start;
|
|
9131
9131
|
width: 100%;
|
|
9132
9132
|
height: 100%;
|
|
9133
9133
|
}
|
|
@@ -9139,7 +9139,7 @@
|
|
|
9139
9139
|
box-sizing: border-box;
|
|
9140
9140
|
width: 100%;
|
|
9141
9141
|
height: 100%;
|
|
9142
|
-
padding:
|
|
9142
|
+
padding: 8px;
|
|
9143
9143
|
border: 1px solid var(--ag-border);
|
|
9144
9144
|
border-radius: var(--radius-card);
|
|
9145
9145
|
animation: agent-arrive var(--motion-arrive) both;
|
|
@@ -9165,7 +9165,7 @@
|
|
|
9165
9165
|
.ag-live-name {
|
|
9166
9166
|
grid-column: 2;
|
|
9167
9167
|
grid-row: 1;
|
|
9168
|
-
font-size:
|
|
9168
|
+
font-size: var(--font-size-sm);
|
|
9169
9169
|
line-height: 18px;
|
|
9170
9170
|
font-weight: 600;
|
|
9171
9171
|
overflow: hidden;
|
|
@@ -9173,7 +9173,7 @@
|
|
|
9173
9173
|
white-space: nowrap;
|
|
9174
9174
|
}
|
|
9175
9175
|
.ag-live-meta, .ag-live-stats {
|
|
9176
|
-
font-size:
|
|
9176
|
+
font-size: var(--font-size-xs);
|
|
9177
9177
|
line-height: 16px;
|
|
9178
9178
|
color: var(--ag-muted);
|
|
9179
9179
|
}
|
|
@@ -9187,6 +9187,7 @@
|
|
|
9187
9187
|
.ag-live-accounting {
|
|
9188
9188
|
grid-column: 2 / -1;
|
|
9189
9189
|
grid-row: 3;
|
|
9190
|
+
font-size: var(--font-size-xs);
|
|
9190
9191
|
font-variant-numeric: tabular-nums;
|
|
9191
9192
|
}
|
|
9192
9193
|
.ag-live-pill {
|
|
@@ -9220,19 +9221,16 @@
|
|
|
9220
9221
|
flex: 1;
|
|
9221
9222
|
min-width: 0;
|
|
9222
9223
|
margin: 0;
|
|
9223
|
-
font-size:
|
|
9224
|
-
line-height:
|
|
9224
|
+
font-size: var(--font-size-sm);
|
|
9225
|
+
line-height: 20px;
|
|
9225
9226
|
display: -webkit-box;
|
|
9226
9227
|
-webkit-line-clamp: 2;
|
|
9227
9228
|
-webkit-box-orient: vertical;
|
|
9228
9229
|
overflow: hidden;
|
|
9229
9230
|
}
|
|
9230
|
-
.ag-live-failure {
|
|
9231
|
-
color: var(--surface-danger-text);
|
|
9232
|
-
}
|
|
9233
9231
|
.ag-live-quiet {
|
|
9234
9232
|
color: var(--surface-warning-text);
|
|
9235
|
-
font-size:
|
|
9233
|
+
font-size: var(--font-size-xs);
|
|
9236
9234
|
line-height: 16px;
|
|
9237
9235
|
}
|
|
9238
9236
|
.ag-live-inspect {
|
|
@@ -9246,8 +9244,8 @@
|
|
|
9246
9244
|
text-decoration: underline;
|
|
9247
9245
|
}
|
|
9248
9246
|
.ag-live-respond {
|
|
9249
|
-
height:
|
|
9250
|
-
min-height:
|
|
9247
|
+
height: var(--control-height-sm);
|
|
9248
|
+
min-height: var(--control-height-sm);
|
|
9251
9249
|
flex: none;
|
|
9252
9250
|
border: 1px solid currentColor;
|
|
9253
9251
|
border-radius: var(--radius-control);
|
|
@@ -9266,18 +9264,13 @@
|
|
|
9266
9264
|
margin: 0;
|
|
9267
9265
|
padding: 0;
|
|
9268
9266
|
list-style: none;
|
|
9269
|
-
min-height: 64px;
|
|
9270
|
-
display: flex;
|
|
9271
|
-
flex-direction: column;
|
|
9272
|
-
justify-content: flex-end;
|
|
9273
|
-
transform: translateY(-16px);
|
|
9274
9267
|
}
|
|
9275
9268
|
.ag-live-events li {
|
|
9276
9269
|
display: flex;
|
|
9277
9270
|
align-items: center;
|
|
9278
9271
|
gap: 6px;
|
|
9279
9272
|
min-height: 16px;
|
|
9280
|
-
font:
|
|
9273
|
+
font: var(--font-size-xs)/16px var(--font-mono, monospace);
|
|
9281
9274
|
color: var(--ag-muted);
|
|
9282
9275
|
transition: color var(--motion-stream);
|
|
9283
9276
|
}
|
|
@@ -9303,34 +9296,33 @@
|
|
|
9303
9296
|
font-variant-numeric: tabular-nums;
|
|
9304
9297
|
}
|
|
9305
9298
|
.ag-live-chip {
|
|
9306
|
-
height:
|
|
9307
|
-
|
|
9308
|
-
|
|
9309
|
-
|
|
9310
|
-
|
|
9311
|
-
opacity: 1;
|
|
9299
|
+
height: 80px;
|
|
9300
|
+
display: grid;
|
|
9301
|
+
grid-template-columns: 16px minmax(0, 1fr) auto auto;
|
|
9302
|
+
grid-template-rows: 18px minmax(0, 1fr);
|
|
9303
|
+
gap: 4px 8px;
|
|
9312
9304
|
}
|
|
9313
9305
|
.ag-live-chip .ag-live-head {
|
|
9314
|
-
display:
|
|
9315
|
-
flex: none;
|
|
9316
|
-
max-width: 45%;
|
|
9306
|
+
display: contents;
|
|
9317
9307
|
}
|
|
9318
9308
|
.ag-live-chip .ag-live-names {
|
|
9319
|
-
display:
|
|
9320
|
-
|
|
9309
|
+
display: contents;
|
|
9310
|
+
}
|
|
9311
|
+
.ag-live-chip .ag-live-name {
|
|
9312
|
+
grid-column: 2;
|
|
9313
|
+
grid-row: 1;
|
|
9321
9314
|
}
|
|
9322
9315
|
.ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child {
|
|
9323
9316
|
display: none;
|
|
9324
9317
|
}
|
|
9325
9318
|
.ag-live-chip-result {
|
|
9326
|
-
|
|
9319
|
+
grid-column: 1 / -1;
|
|
9320
|
+
grid-row: 2;
|
|
9327
9321
|
min-width: 0;
|
|
9328
|
-
overflow:
|
|
9329
|
-
|
|
9330
|
-
|
|
9331
|
-
|
|
9332
|
-
line-height: 16px;
|
|
9333
|
-
font-weight: 500;
|
|
9322
|
+
overflow: auto;
|
|
9323
|
+
overflow-wrap: anywhere;
|
|
9324
|
+
font-size: var(--font-size-sm);
|
|
9325
|
+
line-height: 18px;
|
|
9334
9326
|
}
|
|
9335
9327
|
.ag-phone-list {
|
|
9336
9328
|
display: flex;
|
|
@@ -9400,8 +9392,8 @@
|
|
|
9400
9392
|
flex: 0 0 auto;
|
|
9401
9393
|
}
|
|
9402
9394
|
.ag-live-card.ag-live-chip {
|
|
9403
|
-
min-height:
|
|
9404
|
-
height:
|
|
9395
|
+
min-height: 80px;
|
|
9396
|
+
height: 80px;
|
|
9405
9397
|
}
|
|
9406
9398
|
}
|
|
9407
9399
|
.ag-live-accounting {
|
|
@@ -9411,44 +9403,49 @@
|
|
|
9411
9403
|
max-width: 100%;
|
|
9412
9404
|
}
|
|
9413
9405
|
.ag-live-chip-status {
|
|
9414
|
-
|
|
9415
|
-
|
|
9406
|
+
grid-column: 3;
|
|
9407
|
+
grid-row: 1;
|
|
9408
|
+
font-size: var(--font-size-xs);
|
|
9416
9409
|
color: var(--ag-status);
|
|
9417
9410
|
}
|
|
9418
9411
|
.ag-live-chip-cost {
|
|
9419
|
-
|
|
9420
|
-
|
|
9412
|
+
grid-column: 4;
|
|
9413
|
+
grid-row: 1;
|
|
9414
|
+
font-size: var(--font-size-xs);
|
|
9421
9415
|
color: var(--ag-muted);
|
|
9422
9416
|
font-variant-numeric: tabular-nums;
|
|
9423
9417
|
}
|
|
9424
9418
|
.ag-parent-label {
|
|
9425
9419
|
color: var(--ag-muted);
|
|
9426
|
-
font-size:
|
|
9420
|
+
font-size: var(--font-size-xs);
|
|
9427
9421
|
font-weight: 400;
|
|
9428
9422
|
}
|
|
9429
9423
|
.ag-agent-card[data-status="needs-you"] p {
|
|
9430
9424
|
-webkit-line-clamp: 1;
|
|
9431
9425
|
}
|
|
9432
9426
|
.ag-latest {
|
|
9427
|
+
container-type: inline-size;
|
|
9433
9428
|
flex: none;
|
|
9434
9429
|
min-width: 0;
|
|
9435
9430
|
border-bottom: 1px solid hsl(var(--border));
|
|
9436
|
-
padding:
|
|
9431
|
+
padding: 4px 12px;
|
|
9437
9432
|
color: hsl(var(--foreground));
|
|
9438
|
-
font-size:
|
|
9433
|
+
font-size: var(--font-size-xs);
|
|
9439
9434
|
line-height: 16px;
|
|
9440
9435
|
}
|
|
9441
9436
|
.ag-latest header {
|
|
9437
|
+
float: left;
|
|
9438
|
+
width: 128px;
|
|
9439
|
+
height: 64px;
|
|
9442
9440
|
display: flex;
|
|
9443
|
-
|
|
9444
|
-
|
|
9445
|
-
|
|
9441
|
+
flex-direction: column;
|
|
9442
|
+
align-items: start;
|
|
9443
|
+
justify-content: center;
|
|
9446
9444
|
}
|
|
9447
9445
|
.ag-latest header > span {
|
|
9448
9446
|
color: hsl(var(--muted-foreground));
|
|
9449
9447
|
}
|
|
9450
9448
|
.ag-latest header > button {
|
|
9451
|
-
margin-left: auto;
|
|
9452
9449
|
padding: 0;
|
|
9453
9450
|
border: 0;
|
|
9454
9451
|
background: transparent;
|
|
@@ -9458,20 +9455,26 @@
|
|
|
9458
9455
|
cursor: pointer;
|
|
9459
9456
|
}
|
|
9460
9457
|
.ag-latest ol {
|
|
9458
|
+
display: grid;
|
|
9459
|
+
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
|
|
9460
|
+
gap: 0 12px;
|
|
9461
9461
|
list-style: none;
|
|
9462
|
-
margin: 0;
|
|
9462
|
+
margin: 0 0 0 140px;
|
|
9463
9463
|
padding: 0;
|
|
9464
9464
|
overflow: auto;
|
|
9465
|
+
height: 64px;
|
|
9465
9466
|
}
|
|
9466
9467
|
.ag-latest li {
|
|
9467
|
-
height:
|
|
9468
|
+
min-height: 64px;
|
|
9468
9469
|
}
|
|
9469
9470
|
.ag-latest li > button {
|
|
9470
|
-
display:
|
|
9471
|
-
|
|
9472
|
-
gap: 6px;
|
|
9471
|
+
display: grid;
|
|
9472
|
+
grid-template-columns: 8px minmax(0, 1fr) auto;
|
|
9473
|
+
gap: 0 6px;
|
|
9474
|
+
align-content: start;
|
|
9475
|
+
align-items: start;
|
|
9473
9476
|
width: 100%;
|
|
9474
|
-
height:
|
|
9477
|
+
min-height: 64px;
|
|
9475
9478
|
padding: 0;
|
|
9476
9479
|
border: 0;
|
|
9477
9480
|
background: transparent;
|
|
@@ -9487,8 +9490,8 @@
|
|
|
9487
9490
|
font-weight: 600;
|
|
9488
9491
|
}
|
|
9489
9492
|
.ag-latest li strong {
|
|
9490
|
-
|
|
9491
|
-
|
|
9493
|
+
grid-column: 2;
|
|
9494
|
+
grid-row: 1;
|
|
9492
9495
|
overflow: hidden;
|
|
9493
9496
|
text-overflow: ellipsis;
|
|
9494
9497
|
white-space: nowrap;
|
|
@@ -9497,34 +9500,91 @@
|
|
|
9497
9500
|
box-sizing: border-box;
|
|
9498
9501
|
width: 8px;
|
|
9499
9502
|
height: 8px;
|
|
9500
|
-
flex: none;
|
|
9501
9503
|
border-radius: var(--radius-pill);
|
|
9502
9504
|
}
|
|
9503
9505
|
.ag-latest-state {
|
|
9506
|
+
grid-column: 3;
|
|
9507
|
+
grid-row: 1;
|
|
9504
9508
|
display: inline-flex;
|
|
9505
9509
|
align-items: center;
|
|
9506
9510
|
gap: 4px;
|
|
9507
|
-
flex: none;
|
|
9508
9511
|
}
|
|
9509
9512
|
.ag-latest-label {
|
|
9510
|
-
|
|
9513
|
+
grid-column: 2 / -1;
|
|
9514
|
+
grid-row: 2;
|
|
9511
9515
|
min-width: 0;
|
|
9512
|
-
overflow:
|
|
9513
|
-
|
|
9514
|
-
white-space: nowrap;
|
|
9515
|
-
font: 11px/16px var(--font-mono, monospace);
|
|
9516
|
+
overflow-wrap: anywhere;
|
|
9517
|
+
font: var(--font-size-xs)/16px var(--font-mono, monospace);
|
|
9516
9518
|
}
|
|
9517
9519
|
.ag-latest time {
|
|
9518
|
-
|
|
9520
|
+
grid-column: 2 / -1;
|
|
9521
|
+
grid-row: 3;
|
|
9519
9522
|
color: hsl(var(--muted-foreground));
|
|
9520
|
-
font:
|
|
9523
|
+
font: var(--font-size-xs)/16px var(--font-mono, monospace);
|
|
9521
9524
|
font-variant-numeric: tabular-nums;
|
|
9522
9525
|
}
|
|
9523
9526
|
.ag-latest-empty {
|
|
9527
|
+
grid-column: 1 / -1;
|
|
9524
9528
|
display: flex;
|
|
9525
9529
|
align-items: center;
|
|
9526
9530
|
color: hsl(var(--muted-foreground));
|
|
9527
9531
|
}
|
|
9532
|
+
.ag-frame-owner .ag-live-card {
|
|
9533
|
+
height: 100%;
|
|
9534
|
+
display: grid;
|
|
9535
|
+
grid-template-columns: 18px minmax(0, 1fr) auto;
|
|
9536
|
+
grid-template-rows: 18px minmax(0, 1fr);
|
|
9537
|
+
gap: 4px 8px;
|
|
9538
|
+
}
|
|
9539
|
+
.ag-frame-owner .ag-live-chip-result {
|
|
9540
|
+
white-space: nowrap;
|
|
9541
|
+
}
|
|
9542
|
+
.ag-frame-owner .ag-live-head {
|
|
9543
|
+
display: contents;
|
|
9544
|
+
}
|
|
9545
|
+
.ag-frame-owner .ag-live-meta, .ag-frame-owner .ag-live-events-clip {
|
|
9546
|
+
display: none;
|
|
9547
|
+
}
|
|
9548
|
+
.ag-frame-owner .ag-live-thinking-row {
|
|
9549
|
+
grid-column: 2 / -1;
|
|
9550
|
+
grid-row: 2;
|
|
9551
|
+
}
|
|
9552
|
+
.ag-frame-owner .ag-live-thinking {
|
|
9553
|
+
-webkit-line-clamp: 1;
|
|
9554
|
+
}
|
|
9555
|
+
.ag-frame-owner .ag-live-accounting {
|
|
9556
|
+
display: none;
|
|
9557
|
+
}
|
|
9558
|
+
.ag-frame-owner .ag-agent-card {
|
|
9559
|
+
flex-direction: row;
|
|
9560
|
+
align-items: center;
|
|
9561
|
+
gap: 16px;
|
|
9562
|
+
}
|
|
9563
|
+
@container (width < 600px) {
|
|
9564
|
+
.ag-latest header {
|
|
9565
|
+
float: none;
|
|
9566
|
+
width: auto;
|
|
9567
|
+
height: 24px;
|
|
9568
|
+
flex-direction: row;
|
|
9569
|
+
align-items: center;
|
|
9570
|
+
justify-content: start;
|
|
9571
|
+
gap: 8px;
|
|
9572
|
+
}
|
|
9573
|
+
.ag-latest header > button {
|
|
9574
|
+
margin-left: auto;
|
|
9575
|
+
}
|
|
9576
|
+
.ag-latest ol {
|
|
9577
|
+
grid-template-columns: 1fr;
|
|
9578
|
+
margin-left: 0;
|
|
9579
|
+
height: calc(var(--ag-latest-rows) * 64px);
|
|
9580
|
+
}
|
|
9581
|
+
}
|
|
9582
|
+
@media (pointer: coarse) {
|
|
9583
|
+
.ag-live-respond {
|
|
9584
|
+
min-height: 44px;
|
|
9585
|
+
min-width: 44px;
|
|
9586
|
+
}
|
|
9587
|
+
}
|
|
9528
9588
|
@property --tw-translate-x {
|
|
9529
9589
|
syntax: "*";
|
|
9530
9590
|
inherits: false;
|
package/dist/tailwind.css
CHANGED
|
@@ -883,39 +883,39 @@
|
|
|
883
883
|
|
|
884
884
|
.agent-graph { container-type: inline-size; }
|
|
885
885
|
.ag-live { --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-surface: hsl(var(--card)); --ag-border: hsl(var(--border)); }
|
|
886
|
-
.ag-live-slot { display: flex; align-items:
|
|
887
|
-
.ag-live-card { position: relative; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; width: 100%; height: 100%; padding:
|
|
886
|
+
.ag-live-slot { display: flex; align-items: flex-start; width: 100%; height: 100%; }
|
|
887
|
+
.ag-live-card { position: relative; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; width: 100%; height: 100%; padding: 8px; border: 1px solid var(--ag-border);
|
|
888
888
|
border-radius: var(--radius-card); animation: agent-arrive var(--motion-arrive) both; background: var(--ag-surface); color: var(--ag-fg); overflow: hidden;
|
|
889
889
|
transition: height var(--motion-surface), border-radius var(--motion-surface), border-color var(--motion-control), box-shadow var(--motion-control); }
|
|
890
890
|
.ag-live-head { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; }
|
|
891
891
|
.ag-live-head > :first-child { grid-column: 1; grid-row: 1 / 3; }
|
|
892
892
|
.ag-live-names, .ag-live-stats { display: contents; }
|
|
893
|
-
.ag-live-name { grid-column: 2; grid-row: 1; font-size:
|
|
894
|
-
.ag-live-meta, .ag-live-stats { font-size:
|
|
893
|
+
.ag-live-name { grid-column: 2; grid-row: 1; font-size: var(--font-size-sm); line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
894
|
+
.ag-live-meta, .ag-live-stats { font-size: var(--font-size-xs); line-height: 16px; color: var(--ag-muted); }
|
|
895
895
|
.ag-live-meta { grid-column: 2 / -1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
896
|
-
.ag-live-accounting { grid-column: 2 / -1; grid-row: 3; font-variant-numeric: tabular-nums; }
|
|
896
|
+
.ag-live-accounting { grid-column: 2 / -1; grid-row: 3; font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
|
|
897
897
|
.ag-live-pill { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--ag-status); }
|
|
898
898
|
.ag-running-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-info-text); }
|
|
899
899
|
[data-activity="quiet"] .ag-running-dot { background: var(--surface-warning-text); animation: none !important; }
|
|
900
900
|
.ag-live-thinking-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
901
|
-
.ag-live-thinking { flex: 1; min-width: 0; margin: 0; font-size:
|
|
902
|
-
.ag-live-
|
|
903
|
-
.ag-live-quiet { color: var(--surface-warning-text); font-size: 12px; line-height: 16px; }
|
|
901
|
+
.ag-live-thinking { flex: 1; min-width: 0; margin: 0; font-size: var(--font-size-sm); line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
902
|
+
.ag-live-quiet { color: var(--surface-warning-text); font-size: var(--font-size-xs); line-height: 16px; }
|
|
904
903
|
.ag-live-inspect { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
|
|
905
904
|
.ag-live-inspect > span:last-child { text-decoration: underline; }
|
|
906
|
-
.ag-live-respond { height:
|
|
905
|
+
.ag-live-respond { height: var(--control-height-sm); min-height: var(--control-height-sm); flex: none; border: 1px solid currentColor; border-radius: var(--radius-control); padding: 0 8px; color: var(--surface-warning-text); background: transparent; cursor: pointer; }
|
|
907
906
|
.ag-live-events-clip { margin-top: auto; height: 48px; min-height: 48px; overflow: hidden; }
|
|
908
|
-
.ag-live-events { margin: 0; padding: 0; list-style: none;
|
|
909
|
-
.ag-live-events li { display: flex; align-items: center; gap: 6px; min-height: 16px; font:
|
|
907
|
+
.ag-live-events { margin: 0; padding: 0; list-style: none; }
|
|
908
|
+
.ag-live-events li { display: flex; align-items: center; gap: 6px; min-height: 16px; font: var(--font-size-xs)/16px var(--font-mono, monospace); color: var(--ag-muted); transition: color var(--motion-stream); }
|
|
910
909
|
.ag-live-events li svg { flex: none; width: 12px; height: 12px; }
|
|
911
910
|
.ag-live-events li:last-child { color: var(--ag-fg); }
|
|
912
911
|
.ag-live-event-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
913
912
|
.ag-live-event-at { flex: none; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
|
|
914
|
-
.ag-live-chip { height:
|
|
915
|
-
.ag-live-chip .ag-live-head { display:
|
|
916
|
-
.ag-live-chip .ag-live-names { display:
|
|
913
|
+
.ag-live-chip { height: 80px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; grid-template-rows: 18px minmax(0, 1fr); gap: 4px 8px; }
|
|
914
|
+
.ag-live-chip .ag-live-head { display: contents; }
|
|
915
|
+
.ag-live-chip .ag-live-names { display: contents; }
|
|
916
|
+
.ag-live-chip .ag-live-name { grid-column: 2; grid-row: 1; }
|
|
917
917
|
.ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child { display: none; }
|
|
918
|
-
.ag-live-chip-result {
|
|
918
|
+
.ag-live-chip-result { grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow: auto; overflow-wrap: anywhere; font-size: var(--font-size-sm); line-height: 18px; }
|
|
919
919
|
.ag-phone-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 8px; list-style: none; }
|
|
920
920
|
.ag-phone-list > li { min-width: 0; padding-left: min(calc(var(--depth) * 16px), 32px); border-left: 1px solid var(--ag-border); }
|
|
921
921
|
.ag-phone-select { width: 100%; height: 100%; text-align: left; background: transparent; padding: 0; border: 0; color: inherit; cursor: pointer; }
|
|
@@ -929,28 +929,41 @@
|
|
|
929
929
|
.ag-phone-select .ag-agent-card { height: auto; min-height: 88px; }
|
|
930
930
|
.ag-caption-target { display: none; }
|
|
931
931
|
.ag-status-button { flex: 0 0 auto; }
|
|
932
|
-
.ag-live-card.ag-live-chip { min-height:
|
|
932
|
+
.ag-live-card.ag-live-chip { min-height: 80px; height: 80px; }
|
|
933
933
|
}
|
|
934
934
|
.ag-live-accounting { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
|
|
935
|
-
.ag-live-chip-status {
|
|
936
|
-
.ag-live-chip-cost {
|
|
937
|
-
.ag-parent-label { color: var(--ag-muted); font-size:
|
|
935
|
+
.ag-live-chip-status { grid-column: 3; grid-row: 1; font-size: var(--font-size-xs); color: var(--ag-status); }
|
|
936
|
+
.ag-live-chip-cost { grid-column: 4; grid-row: 1; font-size: var(--font-size-xs); color: var(--ag-muted); font-variant-numeric: tabular-nums; }
|
|
937
|
+
.ag-parent-label { color: var(--ag-muted); font-size: var(--font-size-xs); font-weight: 400; }
|
|
938
938
|
.ag-agent-card[data-status="needs-you"] p { -webkit-line-clamp: 1; }
|
|
939
|
-
.ag-latest { flex: none; min-width: 0; border-bottom: 1px solid hsl(var(--border)); padding:
|
|
940
|
-
.ag-latest header { display: flex;
|
|
939
|
+
.ag-latest { container-type: inline-size; flex: none; min-width: 0; border-bottom: 1px solid hsl(var(--border)); padding: 4px 12px; color: hsl(var(--foreground)); font-size: var(--font-size-xs); line-height: 16px; }
|
|
940
|
+
.ag-latest header { float: left; width: 128px; height: 64px; display: flex; flex-direction: column; align-items: start; justify-content: center; }
|
|
941
941
|
.ag-latest header > span { color: hsl(var(--muted-foreground)); }
|
|
942
|
-
.ag-latest header > button {
|
|
943
|
-
.ag-latest ol { list-style: none; margin: 0; padding: 0; overflow: auto; }
|
|
944
|
-
.ag-latest li { height:
|
|
945
|
-
.ag-latest li > button { display:
|
|
942
|
+
.ag-latest header > button { padding: 0; border: 0; background: transparent; text-decoration: underline; font: inherit; color: inherit; cursor: pointer; }
|
|
943
|
+
.ag-latest ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 12px; list-style: none; margin: 0 0 0 140px; padding: 0; overflow: auto; height: 64px; }
|
|
944
|
+
.ag-latest li { min-height: 64px; }
|
|
945
|
+
.ag-latest li > button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 0 6px; align-content: start; align-items: start; width: 100%; min-height: 64px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
|
|
946
946
|
.ag-latest li > button:disabled { cursor: default; }
|
|
947
947
|
.ag-latest strong { font-weight: 600; }
|
|
948
|
-
.ag-latest li strong {
|
|
949
|
-
.ag-latest-dot { box-sizing: border-box; width: 8px; height: 8px;
|
|
950
|
-
.ag-latest-state { display: inline-flex; align-items: center; gap: 4px;
|
|
951
|
-
.ag-latest-label {
|
|
952
|
-
.ag-latest time {
|
|
953
|
-
.ag-latest-empty { display: flex; align-items: center; color: hsl(var(--muted-foreground)); }
|
|
948
|
+
.ag-latest li strong { grid-column: 2; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
949
|
+
.ag-latest-dot { box-sizing: border-box; width: 8px; height: 8px; border-radius: var(--radius-pill); }
|
|
950
|
+
.ag-latest-state { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 4px; }
|
|
951
|
+
.ag-latest-label { grid-column: 2 / -1; grid-row: 2; min-width: 0; overflow-wrap: anywhere; font: var(--font-size-xs)/16px var(--font-mono, monospace); }
|
|
952
|
+
.ag-latest time { grid-column: 2 / -1; grid-row: 3; color: hsl(var(--muted-foreground)); font: var(--font-size-xs)/16px var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
|
|
953
|
+
.ag-latest-empty { grid-column: 1 / -1; display: flex; align-items: center; color: hsl(var(--muted-foreground)); }
|
|
954
|
+
.ag-frame-owner .ag-live-card { height: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: 18px minmax(0, 1fr); gap: 4px 8px; }
|
|
955
|
+
.ag-frame-owner .ag-live-chip-result { white-space: nowrap; }
|
|
956
|
+
.ag-frame-owner .ag-live-head { display: contents; }
|
|
957
|
+
.ag-frame-owner .ag-live-meta, .ag-frame-owner .ag-live-events-clip { display: none; }
|
|
958
|
+
.ag-frame-owner .ag-live-thinking-row { grid-column: 2 / -1; grid-row: 2; }
|
|
959
|
+
.ag-frame-owner .ag-live-thinking { -webkit-line-clamp: 1; }
|
|
960
|
+
.ag-frame-owner .ag-live-accounting { display: none; }
|
|
961
|
+
.ag-frame-owner .ag-agent-card { flex-direction: row; align-items: center; gap: 16px; }
|
|
962
|
+
@container (width < 600px) {
|
|
963
|
+
.ag-latest header { float: none; width: auto; height: 24px; flex-direction: row; align-items: center; justify-content: start; gap: 8px; } .ag-latest header > button { margin-left: auto; }
|
|
964
|
+
.ag-latest ol { grid-template-columns: 1fr; margin-left: 0; height: calc(var(--ag-latest-rows) * 64px); }
|
|
965
|
+
}
|
|
966
|
+
@media (pointer: coarse) { .ag-live-respond { min-height: 44px; min-width: 44px; } }
|
|
954
967
|
|
|
955
968
|
/* Published sources: this package's dist and its @tangle-network/ui peer. */
|
|
956
969
|
@source "./**/*.js";
|
package/dist/workflows.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as ModelBrandStack, o as modelBrandFor, t as ModelBrandIdentity } from "./model-brand-ZwVS49Fq.js";
|
|
2
|
-
import { a as AgentGraphTool, c as AgentGraphEdge, d as AgentGraphNode, f as AgentGraphStatus, i as AgentGraphCallKind, l as AgentGraphEdgeKind, n as AgentGraphProps, o as AgentGraphActivity, r as AgentGraphCall, s as AgentGraphDirection, t as AgentGraph, u as AgentGraphEvent } from "./AgentGraph-
|
|
2
|
+
import { a as AgentGraphTool, c as AgentGraphEdge, d as AgentGraphNode, f as AgentGraphStatus, i as AgentGraphCallKind, l as AgentGraphEdgeKind, n as AgentGraphProps, o as AgentGraphActivity, r as AgentGraphCall, s as AgentGraphDirection, t as AgentGraph, u as AgentGraphEvent } from "./AgentGraph-K7OCgKcC.js";
|
|
3
3
|
import { StatusTone } from "@tangle-network/ui/primitives";
|
|
4
4
|
import { Component, ReactElement, ReactNode } from "react";
|
|
5
5
|
import { LucideIcon } from "lucide-react";
|
package/dist/workflows.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
|
|
2
|
-
import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-
|
|
3
|
-
import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-
|
|
2
|
+
import { n as WorkflowGraph, t as AgentGraph } from "./AgentGraph-DA5lyE06.js";
|
|
3
|
+
import { C as actionNodeId, D as triggerNodeId, M as humanizeIdentifier, N as parseActionPath, O as triggerNodeIndex, P as shortModel, S as TRIGGER_NODE_ID, T as buildWorkflowGraph, c as STATUS_COLOR, d as STATUS_TONE, j as actionPathLabel, l as STATUS_LABEL, n as KIND_ICON, p as StatusPill, r as NodeMark, u as STATUS_PILL, w as branchNodeId } from "./node-ui-DJo7yr4o.js";
|
|
4
4
|
import { n as classifyOutput, r as condenseText, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
|
|
5
5
|
export { AgentGraph, KIND_ICON, ModelBrandStack, NodeMark, NodeOutputBody, StatusPill as NodeStatusPill, STATUS_COLOR, STATUS_LABEL, STATUS_PILL, STATUS_TONE, TRIGGER_NODE_ID, WorkflowGraph as WorkflowGraphLazy, actionNodeId, actionPathLabel, branchNodeId, buildWorkflowGraph, classifyOutput, condenseText, humanizeIdentifier, modelBrandFor, parseActionPath, shortModel, triggerNodeId, triggerNodeIndex };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tangle-network/sandbox-ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
|
|
6
6
|
"repository": {
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
"@nanostores/react": ">=0.8.4 <2.0.0",
|
|
139
139
|
"@tangle-network/agent-interface": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^5.2.0",
|
|
140
140
|
"@tangle-network/brand": "^1.31.1",
|
|
141
|
-
"@tangle-network/charts": "^2.0.
|
|
141
|
+
"@tangle-network/charts": "^2.0.5",
|
|
142
142
|
"@tangle-network/ui": "^11.51.1",
|
|
143
143
|
"@tanstack/react-query": "^5.0.0",
|
|
144
144
|
"@tiptap/core": ">=3.20.4 <4.0.0",
|
|
@@ -237,7 +237,7 @@
|
|
|
237
237
|
"@tailwindcss/postcss": "^4.3.3",
|
|
238
238
|
"@tangle-network/agent-interface": "5.10.2",
|
|
239
239
|
"@tangle-network/brand": "^1.31.1",
|
|
240
|
-
"@tangle-network/charts": "^2.0.
|
|
240
|
+
"@tangle-network/charts": "^2.0.5",
|
|
241
241
|
"@tanstack/react-query": "^5.104.5",
|
|
242
242
|
"@testing-library/dom": "^10.4.2",
|
|
243
243
|
"@testing-library/jest-dom": "^7.0.1",
|