@tangle-network/sandbox-ui 2.0.3 → 2.0.5

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.
@@ -1,7 +1,7 @@
1
- import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-Dd1EBlhu.js";
2
- import { A as worstSeverity, E as isStructuralKind, O as triggerNodeIndex, P as shortModel, T as buildWorkflowGraph, _ as problemBorder, a as ProblemMessages, b as statusBorder, c as STATUS_COLOR, f as StatusFooter, g as kindAccent, h as emptySlotLabel, i as ProblemMarker, k as wfEdgeId, l as STATUS_LABEL, m as edgeColor, o as RESTING_BORDER, p as StatusPill, r as NodeMark, s as RESTING_SHADOW, v as problemSurface, x as COMPACT_NODE_SIZE, y as problemTitle } from "./node-ui-DWv_oLvy.js";
1
+ import { a as fmtDuration, c as fmtTokens, i as fmtCost, r as clampPreview } from "./AgentGraph-YuBa5O8m.js";
2
+ import { A as worstSeverity, E as isStructuralKind, O as triggerNodeIndex, P as shortModel, T as buildWorkflowGraph, _ as problemBorder, a as ProblemMessages, b as statusBorder, c as STATUS_COLOR, f as StatusFooter, g as kindAccent, h as emptySlotLabel, i as ProblemMarker, k as wfEdgeId, l as STATUS_LABEL, m as edgeColor, o as RESTING_BORDER, p as StatusPill, r as NodeMark, s as RESTING_SHADOW, v as problemSurface, x as COMPACT_NODE_SIZE, y as problemTitle } from "./node-ui-Dst2R2M5.js";
3
3
  import { n as classifyOutput, t as NodeOutputBody } from "./node-output-DlySTwxr.js";
4
- import { i as loadElk, n as motionAllowed, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-DGd0fm1H.js";
4
+ import { i as loadElk, n as motionAllowed, r as useColorMode, t as SELECTION_OUTLINE } from "./canvas-theme-aqWjGbfu.js";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
6
  import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
7
7
  import { Expand, Maximize2, Minimize2, Plus, Shrink, X } from "lucide-react";
@@ -47,12 +47,9 @@ function useColorMode(wrapperRef, hasGraph) {
47
47
  }, [wrapperRef, hasGraph]);
48
48
  return mode;
49
49
  }
50
- /** The selected node's ring. An `outline` rather than a border or a box-shadow
51
- * because both of those are already spoken for — the border carries tone and
52
- * run status, the shadow carries the running/waiting glow — and an outline
53
- * composes with both without disturbing the laid-out box. */
50
+ /** Selection preserves the status border and stays quieter than failure or a response request. */
54
51
  const SELECTION_OUTLINE = {
55
- outline: "2px solid hsl(var(--foreground) / .7)",
52
+ outline: "1px solid hsl(var(--foreground) / .45)",
56
53
  outlineOffset: 2
57
54
  };
58
55
  export { loadElk as i, motionAllowed as n, useColorMode as r, SELECTION_OUTLINE as t };
package/dist/globals.css CHANGED
@@ -383,6 +383,9 @@
383
383
  .right-2 {
384
384
  right: calc(var(--spacing) * 2);
385
385
  }
386
+ .right-3 {
387
+ right: calc(var(--spacing) * 3);
388
+ }
386
389
  .right-4 {
387
390
  right: calc(var(--spacing) * 4);
388
391
  }
@@ -1520,6 +1523,9 @@
1520
1523
  .max-w-40 {
1521
1524
  max-width: calc(var(--spacing) * 40);
1522
1525
  }
1526
+ .max-w-64 {
1527
+ max-width: calc(var(--spacing) * 64);
1528
+ }
1523
1529
  .max-w-72 {
1524
1530
  max-width: calc(var(--spacing) * 72);
1525
1531
  }
@@ -1844,6 +1850,9 @@
1844
1850
  .scale-\[1\.02\] {
1845
1851
  scale: 1.02;
1846
1852
  }
1853
+ .-rotate-90 {
1854
+ rotate: calc(90deg * -1);
1855
+ }
1847
1856
  .rotate-90 {
1848
1857
  rotate: 90deg;
1849
1858
  }
@@ -2122,6 +2131,9 @@
2122
2131
  .gap-x-4 {
2123
2132
  column-gap: calc(var(--spacing) * 4);
2124
2133
  }
2134
+ .gap-x-5 {
2135
+ column-gap: calc(var(--spacing) * 5);
2136
+ }
2125
2137
  .gap-x-6 {
2126
2138
  column-gap: calc(var(--spacing) * 6);
2127
2139
  }
@@ -2136,6 +2148,9 @@
2136
2148
  .gap-y-1 {
2137
2149
  row-gap: var(--spacing);
2138
2150
  }
2151
+ .gap-y-1\.5 {
2152
+ row-gap: calc(var(--spacing) * 1.5);
2153
+ }
2139
2154
  .gap-y-2 {
2140
2155
  row-gap: calc(var(--spacing) * 2);
2141
2156
  }
@@ -5310,6 +5325,10 @@
5310
5325
  .focus-visible\:ring-ring:focus-visible {
5311
5326
  --tw-ring-color: hsl(var(--ring));
5312
5327
  }
5328
+ .focus-visible\:outline:focus-visible {
5329
+ outline-style: var(--tw-outline-style);
5330
+ outline-width: 1px;
5331
+ }
5313
5332
  .focus-visible\:outline-1:focus-visible {
5314
5333
  outline-style: var(--tw-outline-style);
5315
5334
  outline-width: 1px;
@@ -9127,7 +9146,7 @@
9127
9146
  }
9128
9147
  .ag-live-slot {
9129
9148
  display: flex;
9130
- align-items: center;
9149
+ align-items: flex-start;
9131
9150
  width: 100%;
9132
9151
  height: 100%;
9133
9152
  }
@@ -9139,7 +9158,7 @@
9139
9158
  box-sizing: border-box;
9140
9159
  width: 100%;
9141
9160
  height: 100%;
9142
- padding: 10px;
9161
+ padding: 8px;
9143
9162
  border: 1px solid var(--ag-border);
9144
9163
  border-radius: var(--radius-card);
9145
9164
  animation: agent-arrive var(--motion-arrive) both;
@@ -9165,7 +9184,7 @@
9165
9184
  .ag-live-name {
9166
9185
  grid-column: 2;
9167
9186
  grid-row: 1;
9168
- font-size: 14px;
9187
+ font-size: var(--font-size-sm);
9169
9188
  line-height: 18px;
9170
9189
  font-weight: 600;
9171
9190
  overflow: hidden;
@@ -9173,7 +9192,7 @@
9173
9192
  white-space: nowrap;
9174
9193
  }
9175
9194
  .ag-live-meta, .ag-live-stats {
9176
- font-size: 12px;
9195
+ font-size: var(--font-size-xs);
9177
9196
  line-height: 16px;
9178
9197
  color: var(--ag-muted);
9179
9198
  }
@@ -9187,7 +9206,12 @@
9187
9206
  .ag-live-accounting {
9188
9207
  grid-column: 2 / -1;
9189
9208
  grid-row: 3;
9209
+ font-size: var(--font-size-xs);
9190
9210
  font-variant-numeric: tabular-nums;
9211
+ overflow: hidden;
9212
+ text-overflow: ellipsis;
9213
+ white-space: nowrap;
9214
+ max-width: 100%;
9191
9215
  }
9192
9216
  .ag-live-pill {
9193
9217
  grid-column: 3;
@@ -9220,19 +9244,16 @@
9220
9244
  flex: 1;
9221
9245
  min-width: 0;
9222
9246
  margin: 0;
9223
- font-size: 13px;
9224
- line-height: 17px;
9247
+ font-size: var(--font-size-sm);
9248
+ line-height: 20px;
9225
9249
  display: -webkit-box;
9226
9250
  -webkit-line-clamp: 2;
9227
9251
  -webkit-box-orient: vertical;
9228
9252
  overflow: hidden;
9229
9253
  }
9230
- .ag-live-failure {
9231
- color: var(--surface-danger-text);
9232
- }
9233
9254
  .ag-live-quiet {
9234
9255
  color: var(--surface-warning-text);
9235
- font-size: 12px;
9256
+ font-size: var(--font-size-xs);
9236
9257
  line-height: 16px;
9237
9258
  }
9238
9259
  .ag-live-inspect {
@@ -9246,8 +9267,8 @@
9246
9267
  text-decoration: underline;
9247
9268
  }
9248
9269
  .ag-live-respond {
9249
- height: 28px;
9250
- min-height: 28px;
9270
+ height: var(--control-height-sm);
9271
+ min-height: var(--control-height-sm);
9251
9272
  flex: none;
9252
9273
  border: 1px solid currentColor;
9253
9274
  border-radius: var(--radius-control);
@@ -9266,18 +9287,13 @@
9266
9287
  margin: 0;
9267
9288
  padding: 0;
9268
9289
  list-style: none;
9269
- min-height: 64px;
9270
- display: flex;
9271
- flex-direction: column;
9272
- justify-content: flex-end;
9273
- transform: translateY(-16px);
9274
9290
  }
9275
9291
  .ag-live-events li {
9276
9292
  display: flex;
9277
9293
  align-items: center;
9278
9294
  gap: 6px;
9279
9295
  min-height: 16px;
9280
- font: 11px/16px var(--font-mono, monospace);
9296
+ font: var(--font-size-xs)/16px var(--font-mono, monospace);
9281
9297
  color: var(--ag-muted);
9282
9298
  transition: color var(--motion-stream);
9283
9299
  }
@@ -9303,34 +9319,33 @@
9303
9319
  font-variant-numeric: tabular-nums;
9304
9320
  }
9305
9321
  .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;
9322
+ height: 80px;
9323
+ display: grid;
9324
+ grid-template-columns: 16px minmax(0, 1fr) auto auto;
9325
+ grid-template-rows: 18px minmax(0, 1fr);
9326
+ gap: 4px 8px;
9312
9327
  }
9313
9328
  .ag-live-chip .ag-live-head {
9314
- display: flex;
9315
- flex: none;
9316
- max-width: 45%;
9329
+ display: contents;
9317
9330
  }
9318
9331
  .ag-live-chip .ag-live-names {
9319
- display: flex;
9320
- min-width: 0;
9332
+ display: contents;
9333
+ }
9334
+ .ag-live-chip .ag-live-name {
9335
+ grid-column: 2;
9336
+ grid-row: 1;
9321
9337
  }
9322
9338
  .ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child {
9323
9339
  display: none;
9324
9340
  }
9325
9341
  .ag-live-chip-result {
9326
- flex: 1;
9342
+ grid-column: 1 / -1;
9343
+ grid-row: 2;
9327
9344
  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;
9345
+ overflow: auto;
9346
+ overflow-wrap: anywhere;
9347
+ font-size: var(--font-size-sm);
9348
+ line-height: 18px;
9334
9349
  }
9335
9350
  .ag-phone-list {
9336
9351
  display: flex;
@@ -9400,55 +9415,54 @@
9400
9415
  flex: 0 0 auto;
9401
9416
  }
9402
9417
  .ag-live-card.ag-live-chip {
9403
- min-height: 40px;
9404
- height: 40px;
9418
+ min-height: 80px;
9419
+ height: 80px;
9405
9420
  }
9406
9421
  }
9407
- .ag-live-accounting {
9408
- overflow: hidden;
9409
- text-overflow: ellipsis;
9410
- white-space: nowrap;
9411
- max-width: 100%;
9412
- }
9413
9422
  .ag-live-chip-status {
9414
- flex: none;
9415
- font-size: 12px;
9423
+ grid-column: 3;
9424
+ grid-row: 1;
9425
+ font-size: var(--font-size-xs);
9416
9426
  color: var(--ag-status);
9417
9427
  }
9418
9428
  .ag-live-chip-cost {
9419
- flex: none;
9420
- font-size: 12px;
9429
+ grid-column: 4;
9430
+ grid-row: 1;
9431
+ font-size: var(--font-size-xs);
9421
9432
  color: var(--ag-muted);
9422
9433
  font-variant-numeric: tabular-nums;
9423
9434
  }
9424
9435
  .ag-parent-label {
9425
9436
  color: var(--ag-muted);
9426
- font-size: 12px;
9437
+ font-size: var(--font-size-xs);
9427
9438
  font-weight: 400;
9428
9439
  }
9429
9440
  .ag-agent-card[data-status="needs-you"] p {
9430
9441
  -webkit-line-clamp: 1;
9431
9442
  }
9432
9443
  .ag-latest {
9444
+ container-type: inline-size;
9433
9445
  flex: none;
9434
9446
  min-width: 0;
9435
9447
  border-bottom: 1px solid hsl(var(--border));
9436
- padding: 8px 12px;
9448
+ padding: 4px 12px;
9437
9449
  color: hsl(var(--foreground));
9438
- font-size: 12px;
9450
+ font-size: var(--font-size-xs);
9439
9451
  line-height: 16px;
9440
9452
  }
9441
9453
  .ag-latest header {
9454
+ float: left;
9455
+ width: 128px;
9456
+ height: 64px;
9442
9457
  display: flex;
9443
- align-items: center;
9444
- min-height: 24px;
9445
- gap: 8px;
9458
+ flex-direction: column;
9459
+ align-items: start;
9460
+ justify-content: center;
9446
9461
  }
9447
9462
  .ag-latest header > span {
9448
9463
  color: hsl(var(--muted-foreground));
9449
9464
  }
9450
9465
  .ag-latest header > button {
9451
- margin-left: auto;
9452
9466
  padding: 0;
9453
9467
  border: 0;
9454
9468
  background: transparent;
@@ -9458,20 +9472,26 @@
9458
9472
  cursor: pointer;
9459
9473
  }
9460
9474
  .ag-latest ol {
9475
+ display: grid;
9476
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
9477
+ gap: 0 12px;
9461
9478
  list-style: none;
9462
- margin: 0;
9479
+ margin: 0 0 0 140px;
9463
9480
  padding: 0;
9464
9481
  overflow: auto;
9482
+ height: 64px;
9465
9483
  }
9466
9484
  .ag-latest li {
9467
- height: 28px;
9485
+ min-height: 64px;
9468
9486
  }
9469
9487
  .ag-latest li > button {
9470
- display: flex;
9471
- align-items: center;
9472
- gap: 6px;
9488
+ display: grid;
9489
+ grid-template-columns: 8px minmax(0, 1fr) auto;
9490
+ gap: 0 6px;
9491
+ align-content: start;
9492
+ align-items: start;
9473
9493
  width: 100%;
9474
- height: 28px;
9494
+ min-height: 64px;
9475
9495
  padding: 0;
9476
9496
  border: 0;
9477
9497
  background: transparent;
@@ -9487,8 +9507,8 @@
9487
9507
  font-weight: 600;
9488
9508
  }
9489
9509
  .ag-latest li strong {
9490
- flex: none;
9491
- max-width: 22%;
9510
+ grid-column: 2;
9511
+ grid-row: 1;
9492
9512
  overflow: hidden;
9493
9513
  text-overflow: ellipsis;
9494
9514
  white-space: nowrap;
@@ -9497,34 +9517,91 @@
9497
9517
  box-sizing: border-box;
9498
9518
  width: 8px;
9499
9519
  height: 8px;
9500
- flex: none;
9501
9520
  border-radius: var(--radius-pill);
9502
9521
  }
9503
9522
  .ag-latest-state {
9523
+ grid-column: 3;
9524
+ grid-row: 1;
9504
9525
  display: inline-flex;
9505
9526
  align-items: center;
9506
9527
  gap: 4px;
9507
- flex: none;
9508
9528
  }
9509
9529
  .ag-latest-label {
9510
- flex: 1;
9530
+ grid-column: 2 / -1;
9531
+ grid-row: 2;
9511
9532
  min-width: 0;
9512
- overflow: hidden;
9513
- text-overflow: ellipsis;
9514
- white-space: nowrap;
9515
- font: 11px/16px var(--font-mono, monospace);
9533
+ overflow-wrap: anywhere;
9534
+ font: var(--font-size-xs)/16px var(--font-mono, monospace);
9516
9535
  }
9517
9536
  .ag-latest time {
9518
- flex: none;
9537
+ grid-column: 2 / -1;
9538
+ grid-row: 3;
9519
9539
  color: hsl(var(--muted-foreground));
9520
- font: 11px/16px var(--font-mono, monospace);
9540
+ font: var(--font-size-xs)/16px var(--font-mono, monospace);
9521
9541
  font-variant-numeric: tabular-nums;
9522
9542
  }
9523
9543
  .ag-latest-empty {
9544
+ grid-column: 1 / -1;
9524
9545
  display: flex;
9525
9546
  align-items: center;
9526
9547
  color: hsl(var(--muted-foreground));
9527
9548
  }
9549
+ .ag-frame-owner .ag-live-card {
9550
+ height: 100%;
9551
+ display: grid;
9552
+ grid-template-columns: 18px minmax(0, 1fr) auto;
9553
+ grid-template-rows: 18px minmax(0, 1fr);
9554
+ gap: 4px 8px;
9555
+ }
9556
+ .ag-frame-owner .ag-live-chip-result {
9557
+ white-space: nowrap;
9558
+ }
9559
+ .ag-frame-owner .ag-live-head {
9560
+ display: contents;
9561
+ }
9562
+ .ag-frame-owner .ag-live-meta, .ag-frame-owner .ag-live-events-clip {
9563
+ display: none;
9564
+ }
9565
+ .ag-frame-owner .ag-live-thinking-row {
9566
+ grid-column: 2 / -1;
9567
+ grid-row: 2;
9568
+ }
9569
+ .ag-frame-owner .ag-live-thinking {
9570
+ -webkit-line-clamp: 1;
9571
+ }
9572
+ .ag-frame-owner .ag-live-accounting {
9573
+ display: none;
9574
+ }
9575
+ .ag-frame-owner .ag-agent-card {
9576
+ flex-direction: row;
9577
+ align-items: center;
9578
+ gap: 16px;
9579
+ }
9580
+ @container (width < 600px) {
9581
+ .ag-latest header {
9582
+ float: none;
9583
+ width: auto;
9584
+ height: 24px;
9585
+ flex-direction: row;
9586
+ align-items: center;
9587
+ justify-content: start;
9588
+ gap: 8px;
9589
+ }
9590
+ .ag-latest header > button {
9591
+ margin-left: auto;
9592
+ }
9593
+ .ag-latest ol {
9594
+ grid-template-columns: 1fr;
9595
+ margin-left: 0;
9596
+ height: calc(var(--ag-latest-rows) * 64px);
9597
+ }
9598
+ }
9599
+ @media (pointer: coarse) {
9600
+ .ag-live-respond {
9601
+ min-height: 44px;
9602
+ min-width: 44px;
9603
+ }
9604
+ }
9528
9605
  @property --tw-translate-x {
9529
9606
  syntax: "*";
9530
9607
  inherits: false;
@@ -1,4 +1,4 @@
1
- import { d as AgentGraphNode, n as AgentGraphProps } from "./AgentGraph-BqLPrigw.js";
1
+ import { d as AgentGraphNode, n as AgentGraphProps } from "./AgentGraph-DzdpPFEI.js";
2
2
  import { ReactNode } from "react";
3
3
  import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep, ExpandedToolDetail, ExpandedToolDetailProps, FeedSegment, InlineThinkingItem as InlineThinkingItem$1, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunPhase, RunPhaseList, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot, RunStatus, RunStatusIcon as RunStatusIcon$1, RunStatusIconProps, StatusMeta, TaskList, TaskListItem, TaskListProps, TaskStatus, ToolCallData, ToolCallData as ToolCallData$1, ToolCallFeed, ToolCallFeedProps, ToolCallStatus, ToolCallType, parseToolEvent, runStatus as runStatus$1, showsTaskPriority, statusMeta as statusMeta$1, taskProgress, taskStatus } from "@tangle-network/ui/run";
4
4
  import { FlowWaterfallProps } from "@tangle-network/charts/react";
package/dist/index.d.ts CHANGED
@@ -16,7 +16,7 @@ import { C as ChangedFile, D as SandboxArtifactTerminal, E as SandboxArtifactPan
16
16
  import { n as DiffViewProps, t as DiffView } from "./diff-view-DDHWtR6X.js";
17
17
  import { a as PreviewReadiness, i as PreviewAccess, n as EmbeddedAppView, r as EmbeddedAppViewProps, t as EmbeddedApp } from "./embedded-app-view-Ta5GI4hx.js";
18
18
  import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISchemaIssue, OpenUISchemaValidation, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
19
- import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-CjGeAD3E.js";
19
+ import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-DFNf9mJ2.js";
20
20
  import { n as filterFileNodes, t as fileTreeFromPaths } from "./index-CrN4d8gd.js";
21
21
  import { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, ChatSession, RegisterActiveSessionOptions, SessionProjectKey, activeSessionsAtom, addMessage, addParts, bumpActiveSessionActivity, clearChat, connectSession, disconnectSession, getActiveSession, getAllActiveSessions, getAllProjectActivity, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getTotalRunningSessionCount, hasBackgroundRunningSessions, isStreamingAtom, messagesAtom, partMapAtom, registerActiveSession, resetActiveSessions, sessionAtom, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useHasBackgroundRunningSessions, useNavbarSessions, useProjectActivity, useProjectSessions, useSessionsByActivity, useTotalRunningSessions } from "./stores.js";
22
22
  import { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime } from "./types.js";
package/dist/index.js CHANGED
@@ -12,8 +12,8 @@ import { a as CodeSurface, i as CODE_THEME, n as buildUnifiedPatch, r as compute
12
12
  import { n as PreviewView, t as EmbeddedAppView } from "./embedded-app-view-DXsoPale.js";
13
13
  import { OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, findUnsupportedOpenUINode, validateOpenUIJsonArtifact, validateOpenUIJsonNode } from "./openui.js";
14
14
  import { S as ReasoningLevelPicker, _ as modelProvider, a as ChatMessage, b as DEFAULT_REASONING_LEVEL_OPTIONS, c as SpeakerHeader, d as UserMessage, f as agentTimelineStepKind, g as ArtifactAgentDock, h as partitionBySpeaker, i as ChatContainer, l as TRANSCRIPT_TEXT, m as isViewerMessage, n as AgentTimelineColumn, o as MessageAuthor, p as foldSummary, r as AgentTimelineStep, s as MessageList, t as AgentTimeline, u as ThinkingIndicator, v as snapHarnessToModel, x as HARNESS_REASONING_OPTIONS, y as AgentProfilePicker } from "./chat-BrlLa4rg.js";
15
- import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-B0HDqO5h.js";
16
- import { t as LatestEvents } from "./latest-events-D1i5Ny3N.js";
15
+ import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-wUKH3Qh6.js";
16
+ import { t as LatestEvents } from "./latest-events-CWvZr8Ut.js";
17
17
  import "./vault-tree.js";
18
18
  import { a as TangleLoginButton, i as UserMenu, n as GitHubLoginButton, r as LoginLayout, t as AuthHeader } from "./auth-BDpoZ_2f.js";
19
19
  import { t as AgentMessagingConnection } from "./connections-DymjzHe_.js";
@@ -1,65 +1,45 @@
1
- import { g as useRunNow, h as useMotionAllowed, o as fmtEventTime, p as tokenMilliseconds } from "./AgentGraph-Dd1EBlhu.js";
1
+ import { g as useRunNow, o as fmtEventTime, p as tokenMilliseconds } from "./AgentGraph-YuBa5O8m.js";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
4
4
  import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";
5
5
  // src/run/latest-events.tsx
6
6
  function EventRow({ entry, now, onSelect }) {
7
- const ref = useRef(null), motion = useMotionAllowed();
8
- useLayoutEffect(() => {
9
- const element = ref.current;
10
- if (!element) return;
11
- const style = getComputedStyle(element);
12
- const animation = element.animate([{
13
- opacity: 0,
14
- ...motion ? { transform: "translateY(calc(" + style.getPropertyValue("--arrive-distance") + " * -1))" } : {}
15
- }, {
16
- opacity: 1,
17
- ...motion ? { transform: "none" } : {}
18
- }], {
19
- duration: tokenMilliseconds(motion ? "--duration-arrive" : "--duration-fast", element),
20
- easing: style.getPropertyValue("--ease-entrance").trim() || "ease-out"
21
- });
22
- return () => animation.cancel();
23
- }, [entry.id, motion]);
24
7
  const meta = statusMeta(entry.observed ? entry.status : "unknown"), age = fmtEventTime(entry.at, now);
25
- return /* @__PURE__ */ jsx("li", {
26
- ref,
27
- children: /* @__PURE__ */ jsxs("button", {
28
- type: "button",
29
- disabled: !onSelect,
30
- onClick: () => onSelect?.(entry),
31
- title: entry.name + ": " + entry.label,
32
- children: [
33
- /* @__PURE__ */ jsx("span", {
34
- className: "ag-latest-dot",
35
- style: {
36
- background: entry.observed ? "var(" + meta.token + ")" : "transparent",
37
- border: entry.observed ? void 0 : "1.5px solid var(" + meta.token + ")"
38
- },
8
+ return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
9
+ type: "button",
10
+ disabled: !onSelect,
11
+ onClick: () => onSelect?.(entry),
12
+ title: entry.name + ": " + entry.label,
13
+ children: [
14
+ /* @__PURE__ */ jsx("span", {
15
+ className: "ag-latest-dot",
16
+ style: {
17
+ background: entry.observed ? "var(" + meta.token + ")" : "transparent",
18
+ border: entry.observed ? void 0 : "1.5px solid var(" + meta.token + ")"
19
+ },
20
+ "aria-hidden": true
21
+ }),
22
+ /* @__PURE__ */ jsx("strong", { children: entry.name }),
23
+ entry.observed && /* @__PURE__ */ jsxs("span", {
24
+ className: "ag-latest-state",
25
+ style: { color: "var(" + meta.token + ")" },
26
+ children: [entry.status !== "running" && /* @__PURE__ */ jsx(RunStatusIcon, {
27
+ status: entry.status,
28
+ size: 14,
39
29
  "aria-hidden": true
40
- }),
41
- /* @__PURE__ */ jsx("strong", { children: entry.name }),
42
- entry.observed && /* @__PURE__ */ jsxs("span", {
43
- className: "ag-latest-state",
44
- style: { color: "var(" + meta.token + ")" },
45
- children: [entry.status !== "running" && /* @__PURE__ */ jsx(RunStatusIcon, {
46
- status: entry.status,
47
- size: 14,
48
- "aria-hidden": true
49
- }), meta.label]
50
- }),
51
- /* @__PURE__ */ jsx("span", {
52
- className: "ag-latest-label",
53
- children: entry.label
54
- }),
55
- /* @__PURE__ */ jsxs("time", { children: [
56
- entry.observed ? "Observed " : "",
57
- age,
58
- age !== "now" && age !== "—" ? " ago" : ""
59
- ] })
60
- ]
61
- })
62
- });
30
+ }), meta.label]
31
+ }),
32
+ /* @__PURE__ */ jsx("span", {
33
+ className: "ag-latest-label",
34
+ children: entry.label
35
+ }),
36
+ /* @__PURE__ */ jsxs("time", { children: [
37
+ entry.observed ? "Observed " : "",
38
+ age,
39
+ age !== "now" && age !== "—" ? " ago" : ""
40
+ ] })
41
+ ]
42
+ }) });
63
43
  }
64
44
  /** Recorded events and locally observed state changes. Hover or focus holds the reading position. */
65
45
  function LatestEvents({ agents, n = 5, now, live = now === void 0, selectedId, onSelect }) {
@@ -165,7 +145,7 @@ function LatestEvents({ agents, n = 5, now, live = now === void 0, selectedId, o
165
145
  /* @__PURE__ */ jsx("ol", {
166
146
  tabIndex: 0,
167
147
  "aria-label": "Recorded activity events",
168
- style: { height: Math.min(limit, 3) * 28 },
148
+ style: { "--ag-latest-rows": Math.min(limit, 3) },
169
149
  children: visible.length ? visible.map((entry) => /* @__PURE__ */ jsx(EventRow, {
170
150
  entry,
171
151
  now: clock,
@@ -1,6 +1,6 @@
1
1
  import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
2
2
  import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
3
- import { r as clampPreview } from "./AgentGraph-Dd1EBlhu.js";
3
+ import { r as clampPreview } from "./AgentGraph-YuBa5O8m.js";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, Zap } from "lucide-react";
6
6
  import { RunStatusIcon, statusMeta } from "@tangle-network/ui/run";
@@ -1,8 +1,8 @@
1
1
  import { t as cn } from "./utils-BER_bdgE.js";
2
2
  import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-bTcMjQtB.js";
3
3
  import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
4
- import { f as syncAmbient, l as activityTiming, t as AgentGraph, u as ambientStyle } from "./AgentGraph-Dd1EBlhu.js";
5
- import { t as LatestEvents } from "./latest-events-D1i5Ny3N.js";
4
+ import { f as syncAmbient, l as activityTiming, t as AgentGraph, u as ambientStyle } from "./AgentGraph-YuBa5O8m.js";
5
+ import { t as LatestEvents } from "./latest-events-CWvZr8Ut.js";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
  import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
8
8
  import { X } from "lucide-react";
package/dist/run.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-CjGeAD3E.js";
1
+ import { $ as traceSpanMark, A as ToolCallData, B as taskStatus, C as RunStatusIcon, D as TaskListItem, E as TaskList, F as parseToolEvent, G as AgentTranscriptEntry, H as LatestEventsProps, I as runStatus, J as TraceEvent, K as foldAgentRows, L as showsTaskPriority, M as ToolCallFeedProps, N as ToolCallStatus, O as TaskListProps, P as ToolCallType, Q as TraceWaterfallProps, R as statusMeta, S as RunStatus, T as StatusMeta, U as AgentStreamRow, V as LatestEvents, W as AgentStreamState, X as TraceWorkspaceProps, Y as TraceWorkspace, Z as TraceWaterfall, _ as RunPhaseList, a as ApprovalPlanStep, b as RunRowStatus, c as FeedSegment, d as InlineToolItem, f as InlineToolItemProps, g as RunPhase, h as RunGroupProps, i as ApprovalDiffSummary, j as ToolCallFeed, k as TaskStatus, l as InlineThinkingItem, m as RunGroup, n as ApprovalCardProps, o as ExpandedToolDetail, p as LiveDuration, q as useAgentStream, r as ApprovalDiffFile, s as ExpandedToolDetailProps, t as ApprovalCard, u as InlineThinkingItemProps, v as RunRowShell, w as RunStatusIconProps, x as RunRowStatusDot, y as RunRowShellProps, z as taskProgress } from "./index-DFNf9mJ2.js";
2
2
  export { type AgentStreamRow, type AgentStreamState, type AgentTranscriptEntry, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LatestEvents, type LatestEventsProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type RunStatus, RunStatusIcon, type RunStatusIconProps, type StatusMeta, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, type TraceEvent, TraceWaterfall, type TraceWaterfallProps, TraceWorkspace, type TraceWorkspaceProps, foldAgentRows, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream };
package/dist/run.js CHANGED
@@ -1,3 +1,3 @@
1
- import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-B0HDqO5h.js";
2
- import { t as LatestEvents } from "./latest-events-D1i5Ny3N.js";
1
+ import { C as TraceWaterfall, S as useAgentStream, _ as statusMeta, a as InlineToolItem, b as TraceWorkspace, c as RunPhaseList, d as RunStatusIcon, f as TaskList, g as showsTaskPriority, h as runStatus, i as InlineThinkingItem, l as RunRowShell, m as parseToolEvent, n as ApprovalDiffSummary, o as LiveDuration, p as ToolCallFeed, r as ExpandedToolDetail, s as RunGroup, t as ApprovalCard, u as RunRowStatusDot, v as taskProgress, w as traceSpanMark, x as foldAgentRows, y as taskStatus } from "./run-wUKH3Qh6.js";
2
+ import { t as LatestEvents } from "./latest-events-CWvZr8Ut.js";
3
3
  export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LatestEvents, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, RunStatusIcon, TaskList, ToolCallFeed, TraceWaterfall, TraceWorkspace, foldAgentRows, parseToolEvent, runStatus, showsTaskPriority, statusMeta, taskProgress, taskStatus, traceSpanMark, useAgentStream };