@tangle-network/sandbox-ui 2.0.22 → 3.0.1

package/dist/tailwind.css

@@ -904,6 +904,7 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --radius-full: 999px;
+    --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
   }
 }
 @layer utilities.agent-graph-base {
@@ -1096,6 +1097,9 @@
     .left-3, :scope:is(.left-3) {
       left: calc(var(--spacing) * 3);
     }
+    .z-50, :scope:is(.z-50) {
+      z-index: 50;
+    }
     .container, :scope:is(.container) {
       width: 100%;
       @media (width >= 40rem) {
@@ -1174,12 +1178,21 @@
     .w-8, :scope:is(.w-8) {
       width: calc(var(--spacing) * 8);
     }
+    .w-64, :scope:is(.w-64) {
+      width: calc(var(--spacing) * 64);
+    }
+    .w-72, :scope:is(.w-72) {
+      width: calc(var(--spacing) * 72);
+    }
     .w-full, :scope:is(.w-full) {
       width: 100%;
     }
     .max-w-64, :scope:is(.max-w-64) {
       max-width: calc(var(--spacing) * 64);
     }
+    .max-w-\[calc\(100vw-2rem\)\], :scope:is(.max-w-\[calc\(100vw-2rem\)\]) {
+      max-width: calc(100vw - 2rem);
+    }
     .\!min-w-0, :scope:is(.\!min-w-0) {
       min-width: 0px !important;
     }
@@ -1192,6 +1205,9 @@
     .shrink-0, :scope:is(.shrink-0) {
       flex-shrink: 0;
     }
+    .origin-\(--radix-popover-content-transform-origin\), :scope:is(.origin-\(--radix-popover-content-transform-origin\)) {
+      transform-origin: var(--radix-popover-content-transform-origin);
+    }
     .-rotate-90, :scope:is(.-rotate-90) {
       rotate: calc(90deg * -1);
     }
@@ -1201,6 +1217,9 @@
     .animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\], :scope:is(.animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\]) {
       animation: tangle-breathe var(--motion-ambient) infinite;
     }
+    .cursor-pointer, :scope:is(.cursor-pointer) {
+      cursor: pointer;
+    }
     .grid-cols-\[minmax\(0\,1fr\)_auto\],:scope:is(.grid-cols-\[minmax\(0\,1fr\)_auto\]) {
       grid-template-columns: minmax(0,1fr) auto;
     }
@@ -1332,6 +1351,9 @@
     .pt-3, :scope:is(.pt-3) {
       padding-top: calc(var(--spacing) * 3);
     }
+    .pb-2, :scope:is(.pb-2) {
+      padding-bottom: calc(var(--spacing) * 2);
+    }
     .text-center, :scope:is(.text-center) {
       text-align: center;
     }
@@ -1363,6 +1385,10 @@
       --tw-leading: 18px;
       line-height: 18px;
     }
+    .leading-none, :scope:is(.leading-none) {
+      --tw-leading: 1;
+      line-height: 1;
+    }
     .font-medium, :scope:is(.font-medium) {
       --tw-font-weight: var(--font-weight-medium);
       font-weight: var(--font-weight-medium);
@@ -1400,9 +1426,20 @@
       --tw-numeric-spacing: tabular-nums;
       font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
     }
+    .underline-offset-4, :scope:is(.underline-offset-4) {
+      text-underline-offset: 4px;
+    }
     .opacity-0, :scope:is(.opacity-0) {
       opacity: 0%;
     }
+    .shadow, :scope:is(.shadow) {
+      --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));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .shadow-\[var\(--shadow-card\)\], :scope:is(.shadow-\[var\(--shadow-card\)\]) {
+      --tw-shadow: var(--shadow-card);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
     .shadow-sm, :scope:is(.shadow-sm) {
       --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));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1411,6 +1448,18 @@
       --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));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
+    .outline-hidden, :scope:is(.outline-hidden) {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+    .blur, :scope:is(.blur) {
+      --tw-blur: blur(8px);
+      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,);
+    }
     .grayscale, :scope:is(.grayscale) {
       --tw-grayscale: grayscale(100%);
       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,);
@@ -1437,6 +1486,9 @@
       .hover\:text-foreground:hover, :scope:is(.hover\:text-foreground:hover) {
         color: hsl(var(--foreground));
       }
+      .hover\:underline:hover, :scope:is(.hover\:underline:hover) {
+        text-decoration-line: underline;
+      }
       .hover\:grayscale-0:hover, :scope:is(.hover\:grayscale-0:hover) {
         --tw-grayscale: grayscale(0%);
         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,);
@@ -1452,7 +1504,22 @@
     .aria-pressed\:bg-muted[aria-pressed="true"], :scope:is(.aria-pressed\:bg-muted[aria-pressed="true"]) {
       background-color: hsl(var(--muted));
     }
+    .data-\[state\=closed\]\:\[animation\:tangle-surface-absent_var\(--motion-dismiss\)_both\][data-state="closed"], :scope:is(.data-\[state\=closed\]\:\[animation\:tangle-surface-absent_var\(--motion-dismiss\)_both\][data-state="closed"]) {
+      animation: tangle-surface-absent var(--motion-dismiss) both;
+    }
+    .data-\[state\=delayed-open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="delayed-open"], :scope:is(.data-\[state\=delayed-open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="delayed-open"]) {
+      animation: tangle-surface-present var(--motion-surface) both;
+    }
+    .data-\[state\=instant-open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="instant-open"], :scope:is(.data-\[state\=instant-open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="instant-open"]) {
+      animation: tangle-surface-present var(--motion-surface) both;
+    }
+    .data-\[state\=open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="open"], :scope:is(.data-\[state\=open\]\:\[animation\:tangle-surface-present_var\(--motion-surface\)_both\][data-state="open"]) {
+      animation: tangle-surface-present var(--motion-surface) both;
+    }
     @media (prefers-reduced-motion: reduce) {
+      .motion-reduce\:animate-none\!, :scope:is(.motion-reduce\:animate-none\!) {
+        animation: none !important;
+      }
       .motion-reduce\:transition-none, :scope:is(.motion-reduce\:transition-none) {
         transition-property: none;
       }
@@ -2707,6 +2774,8 @@ svg.react-flow__connectionline {
   }
 }
 @keyframes tangle-intro-enter { from { opacity: 0; transform: translateY(var(--arrive-distance)); } to { opacity: 1; transform: none; } }
+@keyframes tangle-surface-present { from { --tangle-presence: 0; } to { --tangle-presence: 1; } }
+@keyframes tangle-surface-absent { from { --tangle-presence: 1; } to { --tangle-presence: 0; } }
 
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer theme, base, ar-base, components, utilities;
@@ -5725,9 +5794,6 @@ button.tgc-count-label {
 .fw-root .fw-link-up::before {
   right: -3.25px;
 }
-.fw-root .fw-card-anchor {
-  display: contents;
-}
 .fw-root .fw-seg-alt {
   filter: brightness(.78);
 }
@@ -5752,9 +5818,8 @@ button.tgc-count-label {
   box-shadow: 0 0 0 3px var(--fw-surface);
 }
 .fw-root .fw-card {
-  position: absolute;
-  z-index: 20;
-  width: min(320px, calc(100% - 16px));
+  position: relative;
+  width: 100%;
   max-height: min(60vh, 560px);
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -5763,13 +5828,7 @@ button.tgc-count-label {
   background: var(--fw-raised);
   border: 1px solid var(--fw-border);
   box-shadow: var(--shadow-dropdown);
-  transition: left var(--motion-surface), top var(--motion-surface), opacity var(--motion-control);
-}
-.fw-root .fw-card[role="tooltip"] {
-  pointer-events: none;
-}
-.fw-root .fw-card-above .fw-card {
-  transform: translateY(-100%);
+  transition: opacity var(--motion-control);
 }
 .fw-root .fw-card-agent {
   display: flex;

package/dist/{trace-workspace-DkakKRLV.js → trace-workspace-BiJbv9WQ.js}

@@ -2,7 +2,7 @@ import { t as cn } from "./utils-BER_bdgE.js";
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BQlarCIo.js";
 import { t as ProviderIcon } from "./provider-logo-CPKRPHcS.js";
 import { t as AgentGraph$1 } from "./AgentGraph-BGWx9hhS.js";
-import { t as useFollowTail } from "./use-follow-tail-Ckx5ZSV2.js";
+import { t as useFollowTail } from "./use-follow-tail-Ht7fZGQQ.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useReducer, useRef, useState } from "react";
 import { X } from "lucide-react";
@@ -314,7 +314,7 @@ function agentGraphAt(spans, byId, at, epoch, cards, extraEdges = []) {
 			id: span.id,
 			label: card?.label ?? span.name,
 			model: card?.model ?? span.detail,
-			status: at === null && card?.status ? card.status : state === "done" ? "succeeded" : state,
+			status: at === null && card?.status ? card.status : state,
 			costUsd: at === null ? card?.costUsd ?? span.costUsd : span.endMs <= at ? span.costUsd : void 0,
 			startedAt: epoch == null || !Number.isFinite(epoch) ? at === null ? card?.startedAt : void 0 : epoch + span.startMs,
 			...timing,

package/dist/use-follow-tail-Ht7fZGQQ.js

@@ -0,0 +1 @@
+export { useFollowTail as t } from "@tangle-network/ui/hooks/use-follow-tail";

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
-import { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText } from "@tangle-network/ui/utils";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };
+import { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration, formatSpanDuration, formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText } from "@tangle-network/ui/utils";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration, formatSpanDuration, formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/dist/utils.js

@@ -1 +1 @@
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText } from "@tangle-network/ui/utils";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration, formatSpanDuration, formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText } from "@tangle-network/ui/utils";

package/dist/{workspace--GvnZNpH.js → workspace-CAdAoNmW.js}

@@ -1091,27 +1091,21 @@ function RuntimePane({ title = "Runtime", subtitle = "Session state, execution o
 const MINUTE = 6e4;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
-const WEEK = 7 * DAY;
-const MONTH = 30 * DAY;
-const YEAR = 365 * DAY;
-/**
-* Compact age for a session rail: `now`, `5m`, `3h`, `2d`, `3w`, `4mo`, `1y`.
-* Unlike `timeAgo` from `@tangle-network/ui/utils` it accepts any date input,
-* rolls past hours into days and beyond, and carries no "ago" suffix, so it
-* fits a "codex · 2h" meta line. A future or unparseable date reads `now` /
-* empty rather than a negative count. `now` is injectable for deterministic tests.
-*/
+const UNITS = [
+	["y", 365 * DAY],
+	["mo", 30 * DAY],
+	["w", 7 * DAY],
+	["d", DAY],
+	["h", HOUR],
+	["m", MINUTE]
+];
+/** Compact age without an ago suffix; invalid dates are empty and future dates read now. */
 function formatRelativeAge(date, now = Date.now()) {
 	const timestamp = date instanceof Date ? date.getTime() : new Date(date).getTime();
 	if (Number.isNaN(timestamp)) return "";
 	const elapsed = Math.max(0, now - timestamp);
-	if (elapsed < MINUTE) return "now";
-	if (elapsed < HOUR) return `${Math.floor(elapsed / MINUTE)}m`;
-	if (elapsed < DAY) return `${Math.floor(elapsed / HOUR)}h`;
-	if (elapsed < WEEK) return `${Math.floor(elapsed / DAY)}d`;
-	if (elapsed < MONTH) return `${Math.floor(elapsed / WEEK)}w`;
-	if (elapsed < YEAR) return `${Math.floor(elapsed / MONTH)}mo`;
-	return `${Math.floor(elapsed / YEAR)}y`;
+	const unit = UNITS.find(([, duration]) => !(elapsed < duration));
+	return unit ? `${Math.floor(elapsed / unit[1])}${unit[0]}` : "now";
 }
 // src/workspace/session-optimistic.ts
 /**