@tangle-network/sandbox-ui 0.60.0 → 0.62.0

package/dist/index.js

@@ -64,8 +64,18 @@ import {
 } from "./chunk-WID73FPH.js";
 import "./chunk-2BUPSB7O.js";
 import {
-  OpenUIArtifactRenderer
-} from "./chunk-AZ3AWMTM.js";
+  TOOL_CATEGORY_ICONS,
+  cn,
+  copyText,
+  formatBytes,
+  formatDuration,
+  formatUptime,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText,
+  timeAgo,
+  truncateText
+} from "./chunk-TK46XFLM.js";
 import {
   AuthHeader,
   GitHubLoginButton,
@@ -92,20 +102,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   snapModelToHarness
-} from "./chunk-V5JZOO3W.js";
-import {
-  TOOL_CATEGORY_ICONS,
-  cn,
-  copyText,
-  formatBytes,
-  formatDuration,
-  formatUptime,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText,
-  timeAgo,
-  truncateText
-} from "./chunk-TK46XFLM.js";
+} from "./chunk-R72QYE2U.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -149,7 +146,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-MKX3F55O.js";
+} from "./chunk-J36F6LD2.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -214,7 +211,11 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-D7JJLG4L.js";
+} from "./chunk-OQZQFSWM.js";
+import "./chunk-VIREDUBF.js";
+import {
+  usePtySession
+} from "./chunk-77WVVJA4.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -223,10 +224,6 @@ import {
   UsageChart,
   formatPrice
 } from "./chunk-OMUIPJQZ.js";
-import "./chunk-VIREDUBF.js";
-import {
-  usePtySession
-} from "./chunk-77WVVJA4.js";
 import {
   Avatar,
   AvatarFallback,
@@ -332,6 +329,9 @@ import {
   modelDedupKey
 } from "./chunk-SF6LPMMN.js";
 import "./chunk-EI44GEQ5.js";
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-AZ3AWMTM.js";
 import "./chunk-U67V476Y.js";
 
 // src/index.ts

package/dist/styles.css

@@ -542,6 +542,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-px {
+    margin-top: 1px;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -605,6 +608,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-2\.5 {
+    margin-left: calc(var(--spacing) * 2.5);
+  }
   .ml-10 {
     margin-left: calc(var(--spacing) * 10);
   }
@@ -756,9 +762,6 @@
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-\[3px\] {
     height: 3px;
   }
@@ -789,9 +792,6 @@
   .h-\[640px\] {
     height: 640px;
   }
-  .h-\[720px\] {
-    height: 720px;
-  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -1092,9 +1092,6 @@
   .w-\[420px\] {
     width: 420px;
   }
-  .w-\[460px\] {
-    width: 460px;
-  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -1143,6 +1140,9 @@
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -1287,9 +1287,6 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
-  .shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1376,9 +1373,6 @@
   .cursor-default {
     cursor: default;
   }
-  .cursor-ew-resize {
-    cursor: ew-resize;
-  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1909,6 +1903,12 @@
   .border-\[var\(--surface-danger-border\)\] {
     border-color: var(--surface-danger-border);
   }
+  .border-\[var\(--surface-danger-border\)\]\/60 {
+    border-color: var(--surface-danger-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--surface-danger-border) 60%, transparent);
+    }
+  }
   .border-\[var\(--surface-info-border\)\] {
     border-color: var(--surface-info-border);
   }
@@ -1963,12 +1963,6 @@
       border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
     }
   }
-  .border-destructive\/40 {
-    border-color: color-mix(in srgb, hsl(var(--destructive)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
-    }
-  }
   .border-destructive\/50 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2014,6 +2008,12 @@
       border-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
     }
   }
+  .border-primary\/15 {
+    border-color: color-mix(in srgb, hsl(var(--primary)) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    }
+  }
   .border-primary\/20 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2026,12 +2026,6 @@
       border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
     }
   }
-  .border-primary\/40 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
   .border-primary\/50 {
     border-color: color-mix(in srgb, hsl(var(--primary)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2251,10 +2245,10 @@
   .bg-accent {
     background-color: var(--color-accent);
   }
-  .bg-accent\/30 {
-    background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+  .bg-accent\/20 {
+    background-color: color-mix(in srgb, hsl(var(--accent)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
     }
   }
   .bg-amber-500\/10 {
@@ -2320,6 +2314,12 @@
   .bg-card {
     background-color: var(--color-card);
   }
+  .bg-card\/40 {
+    background-color: color-mix(in srgb, hsl(var(--card)) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-card) 40%, transparent);
+    }
+  }
   .bg-card\/50 {
     background-color: color-mix(in srgb, hsl(var(--card)) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2818,15 +2818,9 @@
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
-  .pb-1\.5 {
-    padding-bottom: calc(var(--spacing) * 1.5);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-2\.5 {
-    padding-bottom: calc(var(--spacing) * 2.5);
-  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -2845,8 +2839,8 @@
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
+  .pl-3\.5 {
+    padding-left: calc(var(--spacing) * 3.5);
   }
   .pl-7 {
     padding-left: calc(var(--spacing) * 7);
@@ -3527,10 +3521,6 @@
     --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-xl {
-    --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);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3750,13 +3740,6 @@
       }
     }
   }
-  .group-hover\:bg-primary {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: var(--color-primary);
-      }
-    }
-  }
   .group-hover\:text-primary {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -3799,11 +3782,6 @@
       }
     }
   }
-  .group-focus\:bg-primary {
-    &:is(:where(.group):focus *) {
-      background-color: var(--color-primary);
-    }
-  }
   .peer-disabled\:cursor-not-allowed {
     &:is(:where(.peer):disabled ~ *) {
       cursor: not-allowed;
@@ -4153,22 +4131,22 @@
       }
     }
   }
-  .hover\:bg-accent\/30 {
+  .hover\:bg-accent\/25 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
+        background-color: color-mix(in srgb, hsl(var(--accent)) 25%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+          background-color: color-mix(in oklab, var(--color-accent) 25%, transparent);
         }
       }
     }
   }
-  .hover\:bg-accent\/35 {
+  .hover\:bg-accent\/30 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--accent)) 35%, transparent);
+        background-color: color-mix(in srgb, hsl(var(--accent)) 30%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 35%, transparent);
+          background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
         }
       }
     }
@@ -4307,16 +4285,6 @@
       }
     }
   }
-  .hover\:bg-muted\/60 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
@@ -4896,15 +4864,6 @@
       opacity: 60%;
     }
   }
-  .disabled\:hover\:bg-transparent {
-    &:disabled {
-      &:hover {
-        @media (hover: hover) {
-          background-color: transparent;
-        }
-      }
-    }
-  }
   .data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;
@@ -5444,11 +5403,6 @@
       }
     }
   }
-  .\[\@media\(hover\:none\)\]\:opacity-100 {
-    @media (hover:none) {
-      opacity: 100%;
-    }
-  }
 }
 :root,
 [data-sandbox-ui],
@@ -6057,6 +6011,56 @@
     background-size: 200% 100%;
     animation: shimmer 2s infinite;
   }
+  .shimmer-text {
+    background-image: linear-gradient(
+      90deg,
+      hsl(var(--muted-foreground)) 0%,
+      hsl(var(--muted-foreground)) 28%,
+      var(--accent-text) 50%,
+      hsl(var(--muted-foreground)) 72%,
+      hsl(var(--muted-foreground)) 100%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: shimmer 1.3s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .shimmer-text {
+      animation: none;
+    }
+  }
+  .responding-ellipsis {
+    display: inline-flex;
+    width: 1.25rem;
+    margin-left: auto;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 0.1875rem;
+    color: hsl(var(--primary));
+  }
+  .responding-ellipsis > span {
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 9999px;
+    background: currentColor;
+    opacity: 0.6;
+    animation: responding-ellipsis 0.8s ease-in-out infinite;
+  }
+  .responding-ellipsis > span:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  .responding-ellipsis > span:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .responding-ellipsis > span {
+      animation: none;
+      opacity: 0.8;
+    }
+  }
   .animate-in {
     animation: fade-in 0.25s ease-out;
   }
@@ -6091,6 +6095,16 @@
       background-position: 200% 0;
     }
   }
+  @keyframes responding-ellipsis {
+    0%, 80%, 100% {
+      opacity: 0.6;
+      transform: translateY(0);
+    }
+    40% {
+      opacity: 1;
+      transform: translateY(-1.5px);
+    }
+  }
   @keyframes fade-in {
     from {
       opacity: 0;

package/dist/workbench.js

@@ -12,12 +12,12 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-MKX3F55O.js";
+} from "./chunk-J36F6LD2.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-D7JJLG4L.js";
-import "./chunk-OMUIPJQZ.js";
+import "./chunk-OQZQFSWM.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";
+import "./chunk-OMUIPJQZ.js";
 import "./chunk-4ZZUMXPX.js";
 import "./chunk-HU4B2M4K.js";
 import "./chunk-SF6LPMMN.js";

package/dist/workflows.js

@@ -1,7 +1,6 @@
 import {
   buildWorkflowGraph
-} from "./chunk-WEYFEMIN.js";
-import "./chunk-7JLB7UZ3.js";
+} from "./chunk-34F66QTV.js";
 import "./chunk-U67V476Y.js";
 
 // src/workflows/WorkflowGraphLazy.tsx
@@ -27,7 +26,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-VMG2ZEAN.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-M5ZOY43R.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -26,10 +26,6 @@
       "import": "./dist/chat.js",
       "types": "./dist/chat.d.ts"
     },
-    "./assistant": {
-      "import": "./dist/assistant.js",
-      "types": "./dist/assistant.d.ts"
-    },
     "./workflows": {
       "import": "./dist/workflows.js",
       "types": "./dist/workflows.d.ts"
@@ -126,9 +122,9 @@
     "test:bridge": "pnpm build && vitest run src/__tests__/re-export-identity.test.ts"
   },
   "peerDependencies": {
-    "@tangle-network/agent-interface": ">=0.15.0 <1.0.0",
+    "@tangle-network/agent-interface": ">=0.16.0 <1.0.0",
     "@tangle-network/brand": "^0.6.0",
-    "@tangle-network/ui": "^4.0.0",
+    "@tangle-network/ui": "^5.1.0",
     "@xyflow/react": "^12.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
@@ -181,9 +177,9 @@
     "@storybook/react-vite": "^8.6.18",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
-    "@tangle-network/agent-interface": ">=0.15.0 <1.0.0",
+    "@tangle-network/agent-interface": ">=0.16.0 <1.0.0",
     "@tangle-network/brand": "^0.6.0",
-    "@tangle-network/ui": "^4.1.0",
+    "@tangle-network/ui": "^5.1.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",