@tangle-network/sandbox-ui 0.46.0 → 0.47.0

package/dist/{WorkflowGraph-6IKZYPST.js → WorkflowGraph-EOV2P5AM.js}

@@ -1,6 +1,6 @@
 import {
   ProviderIcon
-} from "./chunk-CXV6X33U.js";
+} from "./chunk-GTJ5PSK5.js";
 import {
   buildWorkflowGraph
 } from "./chunk-SUC6ZJZW.js";

package/dist/assistant.js

@@ -1,6 +1,6 @@
 import {
   ProviderIcon
-} from "./chunk-CXV6X33U.js";
+} from "./chunk-GTJ5PSK5.js";
 import {
   providerLabel
 } from "./chunk-7JLB7UZ3.js";

package/dist/{chunk-CXV6X33U.js → chunk-GTJ5PSK5.js}

@@ -97,6 +97,74 @@ var PROVIDER_LOGO_SLUGS = {
   buffer: "buffer",
   hootsuite: "hootsuite"
 };
+var ACTIVEPIECES_CDN = "https://cdn.activepieces.com/pieces";
+var PROVIDER_LOGO_URLS = {
+  // Catalog logo whose filename/extension differs from the provider id.
+  "cal-com": `${ACTIVEPIECES_CDN}/cal.com.png`,
+  "customer-io": `${ACTIVEPIECES_CDN}/customerio.png`,
+  anthropic: `${ACTIVEPIECES_CDN}/claude.png`,
+  telegram: `${ACTIVEPIECES_CDN}/telegram_bot.png`,
+  "twilio-sms": `${ACTIVEPIECES_CDN}/twilio.png`,
+  "amazon-sqs": `${ACTIVEPIECES_CDN}/aws-sqs.png`,
+  frame: `${ACTIVEPIECES_CDN}/frameio.png`,
+  "jira-cloud": `${ACTIVEPIECES_CDN}/jira.png`,
+  "jira-data-center": `${ACTIVEPIECES_CDN}/jira.png`,
+  stripe: `${ACTIVEPIECES_CDN}/stripe.png`,
+  "stripe-pack": `${ACTIVEPIECES_CDN}/stripe.png`,
+  gemini: `${ACTIVEPIECES_CDN}/google-gemini.png`,
+  "google-gemini": `${ACTIVEPIECES_CDN}/google-gemini.png`,
+  bluesky: `${ACTIVEPIECES_CDN}/bluesky.png`,
+  emailit: `${ACTIVEPIECES_CDN}/emailit.svg`,
+  cloutly: `${ACTIVEPIECES_CDN}/cloutly.svg`,
+  gistly: `${ACTIVEPIECES_CDN}/gistly.svg`,
+  jotform: `${ACTIVEPIECES_CDN}/jotform.svg`,
+  supadata: `${ACTIVEPIECES_CDN}/supadata.svg`,
+  "hugging-face": `${ACTIVEPIECES_CDN}/huggingface.svg`,
+  huggingface: `${ACTIVEPIECES_CDN}/huggingface.svg`,
+  heygen: `${ACTIVEPIECES_CDN}/heygen.jpg`,
+  instasent: `${ACTIVEPIECES_CDN}/instasent.jpg`,
+  "chainalysis-api": `${ACTIVEPIECES_CDN}/chainalysis-api.jpg`,
+  scrapegraphai: `${ACTIVEPIECES_CDN}/scrapegraphai.jpg`,
+  localai: `${ACTIVEPIECES_CDN}/localai.jpeg`,
+  talkable: "https://www.talkable.com/wp-content/uploads/2021/12/talkable-favicon.svg",
+  // Sub-connector or variant reusing its parent connector's catalog logo.
+  "facebook-leads": `${ACTIVEPIECES_CDN}/facebook.png`,
+  "facebook-pages": `${ACTIVEPIECES_CDN}/facebook.png`,
+  "whatsapp-business": `${ACTIVEPIECES_CDN}/whatsapp.png`,
+  onedrive: `${ACTIVEPIECES_CDN}/oneDrive.png`,
+  "microsoft-onedrive": `${ACTIVEPIECES_CDN}/oneDrive.png`,
+  "outlook-mail": `${ACTIVEPIECES_CDN}/microsoft-outlook.png`,
+  "microsoft-calendar": `${ACTIVEPIECES_CDN}/microsoft-outlook.png`,
+  "microsoft-outlook-calendar": `${ACTIVEPIECES_CDN}/microsoft-outlook.png`,
+  sharepoint: `${ACTIVEPIECES_CDN}/microsoft-sharepoint.png`,
+  "notion-database": `${ACTIVEPIECES_CDN}/notion.png`,
+  "slack-inbound": `${ACTIVEPIECES_CDN}/slack.png`,
+  helpscout: `${ACTIVEPIECES_CDN}/help-scout.png`,
+  figjam: `${ACTIVEPIECES_CDN}/figma.png`,
+  webhook: `${ACTIVEPIECES_CDN}/new-core/webhooks.svg`,
+  // Absent from the catalog CDN — served from a public icon source.
+  make: "https://cdn.simpleicons.org/make",
+  n8n: "https://cdn.simpleicons.org/n8n",
+  zapier: "https://cdn.simpleicons.org/zapier",
+  auth0: "https://cdn.simpleicons.org/auth0",
+  basecamp: "https://cdn.simpleicons.org/basecamp",
+  ebay: "https://cdn.simpleicons.org/ebay",
+  gusto: "https://cdn.simpleicons.org/gusto",
+  miro: "https://cdn.simpleicons.org/miro",
+  sanity: "https://cdn.simpleicons.org/sanity",
+  sentry: "https://cdn.simpleicons.org/sentry",
+  opsgenie: "https://cdn.simpleicons.org/opsgenie",
+  phony: "https://www.google.com/s2/favicons?sz=64&domain_url=https://ph0ny.com",
+  docuseal: "https://www.google.com/s2/favicons?sz=64&domain_url=https://docuseal.com",
+  braze: "https://www.google.com/s2/favicons?sz=64&domain_url=https://braze.com",
+  pipedream: "https://www.google.com/s2/favicons?sz=64&domain_url=https://pipedream.com",
+  weaviate: "https://www.google.com/s2/favicons?sz=64&domain_url=https://weaviate.io",
+  "adobe-creative-cloud": "https://www.google.com/s2/favicons?sz=64&domain_url=https://adobe.com",
+  clio: "https://www.google.com/s2/favicons?sz=64&domain_url=https://clio.com",
+  marketo: "https://www.google.com/s2/favicons?sz=64&domain_url=https://marketo.com",
+  rippling: "https://www.google.com/s2/favicons?sz=64&domain_url=https://rippling.com",
+  "microsoft-graph": "https://www.google.com/s2/favicons?sz=64&domain_url=https://graph.microsoft.com"
+};
 var PROVIDER_VECTOR_LOGOS = {
   slack: "slack",
   salesforce: "salesforce",
@@ -121,6 +189,9 @@ function providerLogoCandidates(opts) {
   const curated = PROVIDER_LOGO_SLUGS[raw] ?? PROVIDER_LOGO_SLUGS[norm];
   const vectorName = PROVIDER_VECTOR_LOGOS[raw] ?? PROVIDER_VECTOR_LOGOS[norm] ?? (curated ? PROVIDER_VECTOR_LOGOS[curated] : void 0);
   if (vectorName) out.push(`https://svgl.app/library/${vectorName}.svg`);
+  const pinned = PROVIDER_LOGO_URLS[raw] ?? PROVIDER_LOGO_URLS[norm];
+  if (pinned) out.push(pinned);
+  if (raw) out.push(`${ACTIVEPIECES_CDN}/${encodeURIComponent(raw)}.png`);
   const slugs = /* @__PURE__ */ new Set();
   if (curated) slugs.add(curated);
   slugs.add(norm.replace(/-/g, ""));
@@ -203,7 +274,5 @@ function ProviderIcon({
 
 export {
   normalizeProviderId,
-  providerLogoCandidates,
-  monogramColor,
   ProviderIcon
 };

package/dist/globals.css

@@ -2857,6 +2857,10 @@
   .text-\[length\:var\(--font-size-xl\,1\.25rem\)\] {
     font-size: var(--font-size-xl,1.25rem);
   }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -4555,6 +4559,11 @@
       }
     }
   }
+  .focus-visible\:bg-background {
+    &:focus-visible {
+      background-color: var(--color-background);
+    }
+  }
   .focus-visible\:bg-primary\/40 {
     &:focus-visible {
       background-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
@@ -4568,6 +4577,11 @@
       background-color: transparent;
     }
   }
+  .focus-visible\:text-foreground {
+    &:focus-visible {
+      color: var(--color-foreground);
+    }
+  }
   .focus-visible\:opacity-100 {
     &:focus-visible {
       opacity: 100%;
@@ -4611,6 +4625,14 @@
       }
     }
   }
+  .focus-visible\:ring-primary\/40 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-primary\/60 {
     &:focus-visible {
       --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);

package/dist/integrations.d.ts

@@ -13,10 +13,7 @@ interface IntegrationConnection {
     connectorId?: string;
     status: "connected" | "pending" | "revoked" | "expired" | (string & {});
     grantedScopes?: string[];
-    account?: {
-        identity?: string;
-        displayName?: string;
-    } & Record<string, unknown>;
+    accountDisplay?: string | null;
     expiresAt?: string | null;
     createdAt?: string;
     updatedAt?: string;
@@ -57,8 +54,10 @@ interface IntegrationsPanelProps {
         connectorId: string;
     }) => void | Promise<void>;
     /**
-     * Invoked when the user manages (disconnects) a live connection via the
-     * hover-revealed affordance on a connected tile.
+     * Invoked when the user confirms disconnecting a live connection from the
+     * disconnect control on a connected tile. May return a promise; the
+     * confirmation dialog shows a loading state until it settles and surfaces a
+     * thrown error inline.
      */
     onDisconnect: (connectionId: string) => void | Promise<void>;
     /** Empty-state message when the catalog hasn't loaded any providers. */

package/dist/integrations.js

@@ -1,15 +1,25 @@
 import {
-  monogramColor,
-  normalizeProviderId,
-  providerLogoCandidates
-} from "./chunk-CXV6X33U.js";
+  ProviderIcon,
+  normalizeProviderId
+} from "./chunk-GTJ5PSK5.js";
 import "./chunk-U67V476Y.js";
 
 // src/integrations/integrations-panel.tsx
 import * as React from "react";
-import { Card, CardContent, EmptyState } from "@tangle-network/ui/primitives";
+import {
+  Button,
+  Card,
+  CardContent,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  EmptyState
+} from "@tangle-network/ui/primitives";
 import { cn } from "@tangle-network/ui/utils";
-import { Check, Search, Settings2 } from "lucide-react";
+import { Check, Search, Unplug } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_FEATURED_IDS = [
   "gmail",
@@ -49,51 +59,7 @@ var DEFAULT_FEATURED_IDS = [
 function defaultConnectorOf(provider) {
   return provider.connectors?.[0]?.connectorId ?? provider.providerId;
 }
-function ProviderLogo({
-  provider,
-  size = 56
-}) {
-  const candidates = React.useMemo(
-    () => providerLogoCandidates({
-      id: provider.providerId,
-      iconUrl: provider.iconUrl
-    }),
-    [provider]
-  );
-  const [index, setIndex] = React.useState(0);
-  const label = (provider.displayName ?? provider.providerId).trim();
-  const initial = label.charAt(0).toUpperCase() || "?";
-  const src = candidates[index];
-  if (!src) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "flex shrink-0 items-center justify-center rounded-2xl font-semibold text-white",
-        style: {
-          width: size,
-          height: size,
-          backgroundColor: monogramColor(provider.providerId),
-          fontSize: Math.round(size * 0.42)
-        },
-        "aria-hidden": true,
-        children: initial
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      src,
-      alt: "",
-      width: size,
-      height: size,
-      loading: "lazy",
-      className: "shrink-0 object-contain",
-      style: { width: size, height: size },
-      onError: () => setIndex((i) => i + 1)
-    }
-  );
-}
+var LOGO_SIZE = 48;
 function buildConnectionIndex(connections) {
   const index = /* @__PURE__ */ new Map();
   for (const conn of connections) {
@@ -140,6 +106,12 @@ function IntegrationsPanel({
 }) {
   const [query, setQuery] = React.useState("");
   const [sort, setSort] = React.useState(defaultSort);
+  const [disconnectTarget, setDisconnectTarget] = React.useState(null);
+  const [isDisconnecting, setIsDisconnecting] = React.useState(false);
+  const [disconnectError, setDisconnectError] = React.useState(
+    null
+  );
+  const activeDisconnect = React.useRef(0);
   const connectionIndex = React.useMemo(
     () => buildConnectionIndex(connections),
     [connections]
@@ -162,6 +134,30 @@ function IntegrationsPanel({
     });
     return sorted;
   }, [catalog, query, sort, featuredRank]);
+  const closeDisconnect = React.useCallback(() => {
+    activeDisconnect.current += 1;
+    setIsDisconnecting(false);
+    setDisconnectTarget(null);
+    setDisconnectError(null);
+  }, []);
+  const confirmDisconnect = React.useCallback(async () => {
+    if (!disconnectTarget) return;
+    const reqId = activeDisconnect.current += 1;
+    setIsDisconnecting(true);
+    setDisconnectError(null);
+    try {
+      await Promise.resolve(onDisconnect(disconnectTarget.connectionId));
+      if (activeDisconnect.current !== reqId) return;
+      setDisconnectTarget(null);
+    } catch (e) {
+      if (activeDisconnect.current !== reqId) return;
+      setDisconnectError(
+        e instanceof Error ? e.message : "Failed to disconnect."
+      );
+    } finally {
+      if (activeDisconnect.current === reqId) setIsDisconnecting(false);
+    }
+  }, [disconnectTarget, onDisconnect]);
   if (error) {
     return /* @__PURE__ */ jsx(Card, { className: cn("border-destructive/50", className), children: /* @__PURE__ */ jsx(CardContent, { className: "py-6", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive", children: [
       "Failed to load integrations: ",
@@ -196,6 +192,7 @@ function IntegrationsPanel({
       }
     );
   }
+  const disconnectAccountLabel = disconnectTarget?.accountDisplay;
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 rounded-lg border border-border bg-card px-3 py-2", children: [
@@ -260,8 +257,9 @@ function IntegrationsPanel({
           {
             "data-testid": `integration-${provider.providerId}`,
             "data-connected": "true",
+            title: live.accountDisplay ? `${name} \u2014 ${live.accountDisplay}` : name,
             className: cn(
-              "group relative flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
+              "relative flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center",
               "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"
             ),
             children: [
@@ -270,16 +268,48 @@ function IntegrationsPanel({
                 "button",
                 {
                   type: "button",
-                  onClick: () => onDisconnect(live.id),
-                  "data-testid": `manage-${provider.providerId}`,
-                  "aria-label": `Manage ${name}`,
-                  title: "Manage connection",
-                  className: "absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-background hover:text-foreground group-hover:opacity-100",
-                  children: /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" })
+                  onClick: () => setDisconnectTarget({
+                    connectionId: live.id,
+                    name,
+                    accountDisplay: live.accountDisplay
+                  }),
+                  "data-testid": `disconnect-${provider.providerId}`,
+                  "aria-label": `Disconnect ${name}`,
+                  title: "Disconnect",
+                  className: "absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                  children: /* @__PURE__ */ jsx(Unplug, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ProviderIcon,
+                {
+                  id: provider.providerId,
+                  iconUrl: provider.iconUrl,
+                  displayName: provider.displayName,
+                  size: LOGO_SIZE,
+                  className: "rounded-2xl"
                 }
               ),
-              /* @__PURE__ */ jsx(ProviderLogo, { provider, size: 48 }),
-              /* @__PURE__ */ jsx("span", { className: "line-clamp-2 w-full text-xs font-medium text-foreground", children: name })
+              /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full flex-col justify-center leading-4", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "w-full text-xs font-medium text-foreground",
+                      live.accountDisplay ? "truncate" : "line-clamp-2"
+                    ),
+                    children: name
+                  }
+                ),
+                live.accountDisplay ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
+                    "data-testid": `account-${provider.providerId}`,
+                    children: live.accountDisplay
+                  }
+                ) : null
+              ] })
             ]
           },
           `${provider.providerId}:${connectorId}`
@@ -298,13 +328,77 @@ function IntegrationsPanel({
             "hover:border-primary/40 hover:bg-accent/40 hover:shadow-sm focus:outline-none focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary/20"
           ),
           children: [
-            /* @__PURE__ */ jsx(ProviderLogo, { provider, size: 56 }),
-            /* @__PURE__ */ jsx("span", { className: "line-clamp-2 w-full text-xs font-medium text-foreground", children: name })
+            /* @__PURE__ */ jsx(
+              ProviderIcon,
+              {
+                id: provider.providerId,
+                iconUrl: provider.iconUrl,
+                displayName: provider.displayName,
+                size: LOGO_SIZE,
+                className: "rounded-2xl"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "line-clamp-2 h-8 w-full text-xs font-medium leading-4 text-foreground", children: name })
           ]
         },
         `${provider.providerId}:${connectorId}`
       );
-    }) })
+    }) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: !!disconnectTarget,
+        onOpenChange: (open) => {
+          if (!open) closeDisconnect();
+        },
+        children: /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            className: "max-w-sm",
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsxs(DialogTitle, { children: [
+                  "Disconnect ",
+                  disconnectTarget?.name ?? "integration",
+                  "?"
+                ] }),
+                /* @__PURE__ */ jsxs(DialogDescription, { children: [
+                  "This removes Sandbox's access to your",
+                  " ",
+                  disconnectTarget?.name ?? "this",
+                  " account",
+                  disconnectAccountLabel ? ` (${disconnectAccountLabel})` : "",
+                  ". You can reconnect anytime."
+                ] })
+              ] }),
+              disconnectError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: disconnectError }) : null,
+              /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    onClick: closeDisconnect,
+                    "data-testid": "cancel-disconnect",
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "destructive",
+                    loading: isDisconnecting,
+                    onClick: confirmDisconnect,
+                    "data-testid": "confirm-disconnect",
+                    children: "Disconnect"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 

package/dist/styles.css

@@ -2857,6 +2857,10 @@
   .text-\[length\:var\(--font-size-xl\,1\.25rem\)\] {
     font-size: var(--font-size-xl,1.25rem);
   }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -4555,6 +4559,11 @@
       }
     }
   }
+  .focus-visible\:bg-background {
+    &:focus-visible {
+      background-color: var(--color-background);
+    }
+  }
   .focus-visible\:bg-primary\/40 {
     &:focus-visible {
       background-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
@@ -4568,6 +4577,11 @@
       background-color: transparent;
     }
   }
+  .focus-visible\:text-foreground {
+    &:focus-visible {
+      color: var(--color-foreground);
+    }
+  }
   .focus-visible\:opacity-100 {
     &:focus-visible {
       opacity: 100%;
@@ -4611,6 +4625,14 @@
       }
     }
   }
+  .focus-visible\:ring-primary\/40 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-primary\/60 {
     &:focus-visible {
       --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);

package/dist/workflows.js

@@ -27,7 +27,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-6IKZYPST.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-EOV2P5AM.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

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