@tangle-network/sandbox-ui 0.91.3 → 0.91.4

package/dist/globals.css

@@ -1945,6 +1945,12 @@
       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)) {

package/dist/integrations.js

@@ -147,6 +147,39 @@ function IntegrationsPanel({
     setDisconnectTarget(null);
     setDisconnectError(null);
   }, []);
+  const [connectingId, setConnectingId] = React.useState(null);
+  const [connectError, setConnectError] = React.useState(null);
+  const activeConnect = React.useRef(0);
+  const startConnect = React.useCallback(
+    async (input) => {
+      const reqId = activeConnect.current += 1;
+      setConnectError(null);
+      let pending;
+      try {
+        pending = onConnect(input);
+      } catch (e) {
+        setConnectError(
+          e instanceof Error ? e.message : "Failed to start the connection."
+        );
+        return;
+      }
+      if (typeof pending?.then !== "function") {
+        return;
+      }
+      setConnectingId(input.providerId);
+      try {
+        await pending;
+      } catch (e) {
+        if (activeConnect.current !== reqId) return;
+        setConnectError(
+          e instanceof Error ? e.message : "Failed to start the connection."
+        );
+      } finally {
+        if (activeConnect.current === reqId) setConnectingId(null);
+      }
+    },
+    [onConnect]
+  );
   const confirmDisconnect = React.useCallback(async () => {
     if (!disconnectTarget) return;
     const reqId = activeDisconnect.current += 1;
@@ -245,6 +278,15 @@ function IntegrationsPanel({
         }
       )
     ] }),
+    connectError ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        "data-testid": "integration-connect-error",
+        className: "mb-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+        children: connectError
+      }
+    ) : null,
     visible.length === 0 ? /* @__PURE__ */ jsx(
       EmptyState,
       {
@@ -393,7 +435,15 @@ function IntegrationsPanel({
           type: "button",
           "data-testid": `integration-${provider.providerId}`,
           "data-connected": "false",
-          onClick: () => onConnect({ providerId: provider.providerId, connectorId }),
+          "data-connecting": connectingId === provider.providerId ? "true" : void 0,
+          disabled: connectingId === provider.providerId,
+          "aria-busy": connectingId === provider.providerId,
+          onClick: () => {
+            void startConnect({
+              providerId: provider.providerId,
+              connectorId
+            });
+          },
           title: provider.description ? provider.description : `Connect ${name}`,
           className: cn(
             "group flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card p-3 text-center transition-all",

package/dist/styles.css

@@ -1945,6 +1945,12 @@
       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)) {

package/package.json

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