@tangle-network/sandbox-ui 0.116.5 → 0.116.6

package/README.md

@@ -38,6 +38,17 @@ Import styles in your app root:
 import "@tangle-network/sandbox-ui/styles";
 ```
 
+### Workspace integration access
+
+Use `IntegrationsPanel` from `/integrations` for the provider catalog, logos, search, connection status, and account actions.
+Do not render a second connection catalog above it.
+Supply `getConnectionContext` for a short access label on each connected card.
+Supply `getConnectionActions` for authorized workspace actions in that card's menu.
+Each action has an `id`, `label`, optional `disabled` flag, and `onSelect` callback.
+The panel waits for asynchronous actions and surfaces failures.
+Keep workspace authorization and binding persistence in the consuming application's server.
+When a provider has multiple accounts, include distinct account labels and identities in its workspace actions.
+
 ### Embed a sandbox app
 
 Use `EmbeddedAppView` when a workspace presents a running web app beside an agent conversation.

package/dist/globals.css

@@ -1043,6 +1043,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-\[136px\] {
+    min-height: 136px;
+  }
   .min-h-\[160px\] {
     min-height: 160px;
   }

package/dist/integrations.d.ts

@@ -47,6 +47,12 @@ interface IntegrationHealth {
 //#endregion
 //#region src/integrations/integrations-panel.d.ts
 type IntegrationSort = "featured" | "alpha";
+interface IntegrationConnectionAction {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  onSelect: () => void | Promise<void>;
+}
 interface IntegrationsPanelProps {
   catalog: IntegrationProvider[];
   connections: IntegrationConnection[];
@@ -86,6 +92,10 @@ interface IntegrationsPanelProps {
     connectionId: string;
     providerId: string;
   }) => void | Promise<void>;
+  /** Consumer-owned access context shown below the connected account. */
+  getConnectionContext?: (connection: IntegrationConnection) => string | undefined;
+  /** Additional authorized actions in the connected card menu. */
+  getConnectionActions?: (connection: IntegrationConnection) => IntegrationConnectionAction[];
   /** Empty-state message when the catalog hasn't loaded any providers. */
   emptyCatalogLabel?: string;
   /**
@@ -104,7 +114,7 @@ interface IntegrationsPanelProps {
   skeletonCount?: number;
   className?: string;
 }
-export declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel, featuredIds, defaultSort, skeletonCount, className }: IntegrationsPanelProps): React$1.JSX.Element;
+export declare function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, getConnectionContext, getConnectionActions, emptyCatalogLabel, featuredIds, defaultSort, skeletonCount, className }: IntegrationsPanelProps): React$1.JSX.Element;
 //#endregion
 //#region src/integrations/use-integrations.d.ts
 /**
@@ -188,4 +198,4 @@ interface ProviderIconProps {
  */
 export declare function ProviderIcon({ id, iconUrl, displayName, size, className }: ProviderIconProps): React$1.JSX.Element;
 //#endregion
-export type { ConnectInput, IntegrationConnection, IntegrationConnector, IntegrationHealth, IntegrationProvider, IntegrationSort, IntegrationsPanelProps, ProviderIconProps, UseIntegrationsOptions, UseIntegrationsResult };
+export type { ConnectInput, IntegrationConnection, IntegrationConnectionAction, IntegrationConnector, IntegrationHealth, IntegrationProvider, IntegrationSort, IntegrationsPanelProps, ProviderIconProps, UseIntegrationsOptions, UseIntegrationsResult };

package/dist/integrations.js

@@ -118,7 +118,21 @@ function displayNameOf(provider) {
 function matchesQuery(provider, q) {
 	return `${displayNameOf(provider)} ${provider.providerId} ${provider.description ?? ""}`.toLowerCase().includes(q);
 }
-function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, emptyCatalogLabel = "No integrations available yet.", featuredIds = DEFAULT_FEATURED_IDS, defaultSort = "featured", skeletonCount = DEFAULT_SKELETON_COUNT, className }) {
+function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoading, error, onConnect, onDisconnect, getManageHref, onManage, getConnectionContext, getConnectionActions, emptyCatalogLabel = "No integrations available yet.", featuredIds = DEFAULT_FEATURED_IDS, defaultSort = "featured", skeletonCount = DEFAULT_SKELETON_COUNT, className }) {
+	const tileBoxClass = cn(TILE_BOX_CLASS, getConnectionContext && "w-full min-h-[136px]");
+	const [actionError, setActionError] = React$1.useState(null);
+	const [pendingAction, setPendingAction] = React$1.useState(false);
+	const runConnectionAction = async (action) => {
+		setActionError(null);
+		setPendingAction(true);
+		try {
+			await action.onSelect();
+		} catch (error) {
+			setActionError(error instanceof Error ? error.message : "Could not update the connection.");
+		} finally {
+			setPendingAction(false);
+		}
+	};
 	const [query, setQuery] = React$1.useState("");
 	const [sort, setSort] = React$1.useState(defaultSort);
 	const [disconnectTarget, setDisconnectTarget] = React$1.useState(null);
@@ -213,7 +227,7 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 			className: TILE_GRID_CLASS,
 			children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxs("div", {
 				"aria-hidden": true,
-				className: cn(TILE_BOX_CLASS, "animate-pulse border-border bg-muted/40"),
+				className: cn(tileBoxClass, "animate-pulse border-border bg-muted/40"),
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "shrink-0 rounded-2xl bg-muted",
 					style: {
@@ -243,6 +257,11 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 				sort,
 				onSortChange: setSort
 			}),
+			actionError ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: actionError
+			}) : null,
 			connectError ? /* @__PURE__ */ jsx("div", {
 				role: "alert",
 				"data-testid": "integration-connect-error",
@@ -259,13 +278,15 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 					const live = connectionIndex.get(`${provider.providerId}:${connectorId}`);
 					const name = displayNameOf(provider);
 					if (Boolean(live) && live) {
+						const connectionContext = getConnectionContext?.(live);
+						const connectionActions = getConnectionActions?.(live) ?? [];
 						const manageHref = getManageHref?.(live);
 						const canManage = Boolean(manageHref) || Boolean(onManage);
 						return /* @__PURE__ */ jsxs("div", {
 							"data-testid": `integration-${provider.providerId}`,
 							"data-connected": "true",
 							title: live.accountDisplay ? `${name} — ${live.accountDisplay}` : name,
-							className: cn(TILE_BOX_CLASS, "group relative", "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"),
+							className: cn(tileBoxClass, "group relative", "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"),
 							children: [
 								manageHref ? /* @__PURE__ */ jsx("a", {
 									href: manageHref,
@@ -302,6 +323,11 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 										}) : null]
 									})]
 								}),
+								connectionContext ? /* @__PURE__ */ jsx("span", {
+									className: "pointer-events-none w-full truncate text-[11px] leading-4 text-muted-foreground",
+									title: connectionContext,
+									children: connectionContext
+								}) : null,
 								/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
 									asChild: true,
 									children: /* @__PURE__ */ jsx("button", {
@@ -334,7 +360,14 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 											}),
 											children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
 										}) : null,
-										canManage ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+										connectionActions.map((action) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+											disabled: action.disabled || pendingAction,
+											onSelect: () => {
+												runConnectionAction(action);
+											},
+											children: action.label
+										}, action.id)),
+										canManage || connectionActions.length > 0 ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
 										/* @__PURE__ */ jsxs(DropdownMenuItem, {
 											"data-testid": `disconnect-${provider.providerId}`,
 											className: "text-destructive focus:text-destructive",
@@ -364,7 +397,7 @@ function IntegrationsPanel({ catalog, connections, healthByConnectionId, isLoadi
 							});
 						},
 						title: provider.description ? provider.description : `Connect ${name}`,
-						className: cn(TILE_BOX_CLASS, "group border-border bg-card transition-all", "hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm", focusRing),
+						className: cn(tileBoxClass, "group border-border bg-card transition-all", "hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm", focusRing),
 						children: [/* @__PURE__ */ jsx(ProviderIcon, {
 							id: provider.providerId,
 							iconUrl: provider.iconUrl,

package/dist/styles.css

@@ -1043,6 +1043,9 @@
   .min-h-\[120px\] {
     min-height: 120px;
   }
+  .min-h-\[136px\] {
+    min-height: 136px;
+  }
   .min-h-\[160px\] {
     min-height: 160px;
   }

package/package.json

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