@tangle-network/sandbox-ui 0.60.0 → 0.61.0

package/dist/{chunk-MKX3F55O.js → chunk-J36F6LD2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-D7JJLG4L.js";
+} from "./chunk-OQZQFSWM.js";
 import {
   TerminalView
 } from "./chunk-VIREDUBF.js";

package/dist/{chunk-D7JJLG4L.js → chunk-OQZQFSWM.js}

@@ -589,12 +589,24 @@ function RailExpandable({
         onClick: onNavigate,
         ...item.prefetch !== void 0 ? { prefetch: item.prefetch } : {},
         className: cn(
-          "flex h-8 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
+          "flex h-8 min-w-0 items-center gap-2 rounded-md px-2.5 text-[12px] transition-colors",
           active ? "bg-[var(--accent-surface-strong)] font-medium text-[var(--accent-text)]" : "text-muted-foreground hover:bg-[var(--accent-surface-soft)] hover:text-foreground"
         ),
         children: [
           FIcon ? /* @__PURE__ */ jsx3(FIcon, { className: "h-4 w-4 shrink-0" }) : null,
-          /* @__PURE__ */ jsx3("span", { className: "truncate", children: item.label })
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: cn("min-w-0 flex-1 truncate", item.isLoading && "shimmer-text"),
+              ...item.isLoading ? { role: "status", "aria-label": "Agent responding" } : {},
+              children: item.label
+            }
+          ),
+          item.isLoading ? /* @__PURE__ */ jsxs2("span", { className: "responding-ellipsis", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx3("span", {}),
+            /* @__PURE__ */ jsx3("span", {}),
+            /* @__PURE__ */ jsx3("span", {})
+          ] }) : null
         ]
       },
       item.id

package/dist/dashboard.d.ts

@@ -183,6 +183,8 @@ interface RailExpandableSubItem {
     }>;
     href: string;
     prefetch?: "none" | "intent" | "render" | "viewport";
+    /** Show a live working indicator on the row while the item is busy. */
+    isLoading?: boolean;
 }
 interface RailExpandableProps {
     icon: React.ComponentType<{

package/dist/dashboard.js

@@ -54,7 +54,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-D7JJLG4L.js";
+} from "./chunk-OQZQFSWM.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -6057,6 +6057,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 +6141,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/index.js

@@ -149,7 +149,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-MKX3F55O.js";
+} from "./chunk-J36F6LD2.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -214,7 +214,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-D7JJLG4L.js";
+} from "./chunk-OQZQFSWM.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/styles.css

@@ -6057,6 +6057,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 +6141,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,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-MKX3F55O.js";
+} from "./chunk-J36F6LD2.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-D7JJLG4L.js";
+import "./chunk-OQZQFSWM.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",