@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/styles.css CHANGED
@@ -9127,7 +9127,7 @@
9127
9127
  }
9128
9128
  .ag-live-slot {
9129
9129
  display: flex;
9130
- align-items: center;
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: 10px;
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: 14px;
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: 12px;
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: 13px;
9224
- line-height: 17px;
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: 12px;
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: 28px;
9250
- min-height: 28px;
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: 11px/16px var(--font-mono, monospace);
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: 40px;
9307
- flex-direction: row;
9308
- align-items: center;
9309
- gap: 8px;
9310
- border-radius: var(--radius-pill);
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: flex;
9315
- flex: none;
9316
- max-width: 45%;
9306
+ display: contents;
9317
9307
  }
9318
9308
  .ag-live-chip .ag-live-names {
9319
- display: flex;
9320
- min-width: 0;
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
- flex: 1;
9319
+ grid-column: 1 / -1;
9320
+ grid-row: 2;
9327
9321
  min-width: 0;
9328
- overflow: hidden;
9329
- text-overflow: ellipsis;
9330
- white-space: nowrap;
9331
- font-size: 12px;
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: 40px;
9404
- height: 40px;
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
- flex: none;
9415
- font-size: 12px;
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
- flex: none;
9420
- font-size: 12px;
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: 12px;
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: 8px 12px;
9431
+ padding: 4px 12px;
9437
9432
  color: hsl(var(--foreground));
9438
- font-size: 12px;
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
- align-items: center;
9444
- min-height: 24px;
9445
- gap: 8px;
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: 28px;
9468
+ min-height: 64px;
9468
9469
  }
9469
9470
  .ag-latest li > button {
9470
- display: flex;
9471
- align-items: center;
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: 28px;
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
- flex: none;
9491
- max-width: 22%;
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
- flex: 1;
9513
+ grid-column: 2 / -1;
9514
+ grid-row: 2;
9511
9515
  min-width: 0;
9512
- overflow: hidden;
9513
- text-overflow: ellipsis;
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
- flex: none;
9520
+ grid-column: 2 / -1;
9521
+ grid-row: 3;
9519
9522
  color: hsl(var(--muted-foreground));
9520
- font: 11px/16px var(--font-mono, monospace);
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: center; 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: 10px; border: 1px solid var(--ag-border);
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: 14px; line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
894
- .ag-live-meta, .ag-live-stats { font-size: 12px; line-height: 16px; color: var(--ag-muted); }
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: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
902
- .ag-live-failure { color: var(--surface-danger-text); }
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: 28px; min-height: 28px; flex: none; border: 1px solid currentColor; border-radius: var(--radius-control); padding: 0 8px; color: var(--surface-warning-text); background: transparent; cursor: pointer; }
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; min-height: 64px; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(-16px); }
909
- .ag-live-events li { display: flex; align-items: center; gap: 6px; min-height: 16px; font: 11px/16px var(--font-mono, monospace); color: var(--ag-muted); transition: color var(--motion-stream); }
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: 40px; flex-direction: row; align-items: center; gap: 8px; border-radius: var(--radius-pill); opacity: 1; }
915
- .ag-live-chip .ag-live-head { display: flex; flex: none; max-width: 45%; }
916
- .ag-live-chip .ag-live-names { display: flex; min-width: 0; }
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 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 500; }
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: 40px; height: 40px; }
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 { flex: none; font-size: 12px; color: var(--ag-status); }
936
- .ag-live-chip-cost { flex: none; font-size: 12px; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
937
- .ag-parent-label { color: var(--ag-muted); font-size: 12px; font-weight: 400; }
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: 8px 12px; color: hsl(var(--foreground)); font-size: 12px; line-height: 16px; }
940
- .ag-latest header { display: flex; align-items: center; min-height: 24px; gap: 8px; }
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 { margin-left: auto; padding: 0; border: 0; background: transparent; text-decoration: underline; font: inherit; color: inherit; cursor: pointer; }
943
- .ag-latest ol { list-style: none; margin: 0; padding: 0; overflow: auto; }
944
- .ag-latest li { height: 28px; }
945
- .ag-latest li > button { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
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 { flex: none; max-width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
949
- .ag-latest-dot { box-sizing: border-box; width: 8px; height: 8px; flex: none; border-radius: var(--radius-pill); }
950
- .ag-latest-state { display: inline-flex; align-items: center; gap: 4px; flex: none; }
951
- .ag-latest-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/16px var(--font-mono, monospace); }
952
- .ag-latest time { flex: none; color: hsl(var(--muted-foreground)); font: 11px/16px var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
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";
@@ -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-BqLPrigw.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-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-Dd1EBlhu.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-DWv_oLvy.js";
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",
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.4",
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.4",
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",