@tangle-network/sandbox-ui 0.116.8 → 0.116.9

package/dist/integrations.js

@@ -1,9 +1,363 @@
-import { n as normalizeProviderId, r as providerLogoCandidates, t as ProviderIcon } from "./provider-logo-DjqmConF.js";
-import { Button, Card, CardContent, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState } from "@tangle-network/ui/primitives";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { n as normalizeProviderId, r as providerLogoCandidates, t as ProviderIcon } from "./provider-logo-BiuiO_c2.js";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState } from "@tangle-network/ui/primitives";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { cn, focusFieldWithin, focusRing } from "@tangle-network/ui/utils";
 import { Check, ExternalLink, MoreVertical, Search, Unplug } from "lucide-react";
+//#region src/integrations/integrations-catalog.tsx
+const TONES = {
+	neutral: "text-muted-foreground",
+	success: "text-[var(--surface-success-text)]",
+	warning: "text-[var(--surface-warning-text)]",
+	error: "text-destructive"
+};
+function catalogRowActive(row) {
+	return row.kind === "app" ? row.installedCount > 0 : row.connections.length > 0;
+}
+/** A controlled selector shared by the catalog and detail; never picks an account. */
+function ConnectionSelector({ connections, value, onChange, label }) {
+	const selected = connections.some((connection) => connection.id === value) ? value : "";
+	return /* @__PURE__ */ jsxs("select", {
+		"aria-label": label,
+		value: selected ?? "",
+		onChange: (event) => onChange(event.target.value || null),
+		className: cn("h-8 w-full min-w-0 truncate rounded-md border border-border bg-background px-2 text-sm text-foreground", focusRing),
+		children: [/* @__PURE__ */ jsx("option", {
+			value: "",
+			children: "Select an account"
+		}), connections.map((connection) => /* @__PURE__ */ jsx("option", {
+			value: connection.id,
+			children: connection.accountDisplay ? `${connection.accountDisplay} · ${connection.id}` : connection.id
+		}, connection.id))]
+	});
+}
+function ConnectionMenu({ row, connection, onManage, onDisconnect, compact }) {
+	const manage = connection.capabilities.manage && (connection.manageHref || onManage);
+	const disconnect = connection.capabilities.disconnect && onDisconnect;
+	const actions = connection.actions ?? [];
+	if (!manage && !disconnect && actions.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-testid": `menu-${row.providerId}`,
+			"aria-label": `More actions for ${row.title}`,
+			title: "More actions",
+			className: cn("relative z-20 flex shrink-0 items-center justify-center rounded-md transition-colors", compact ? "h-6 w-6 text-muted-foreground/70 hover:bg-background hover:text-foreground focus-visible:bg-background focus-visible:text-foreground" : "h-7 w-7 text-muted-foreground hover:bg-accent hover:text-foreground", focusRing),
+			children: /* @__PURE__ */ jsx(MoreVertical, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		side: "right",
+		align: "start",
+		className: "min-w-[160px] rounded-md",
+		children: [
+			manage && (connection.manageHref ? /* @__PURE__ */ jsx(DropdownMenuItem, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("a", {
+					href: connection.manageHref,
+					target: connection.manageInNewWindow ? "_blank" : void 0,
+					rel: connection.manageInNewWindow ? "noopener noreferrer" : void 0,
+					"data-testid": `manage-item-${row.providerId}`,
+					children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
+				})
+			}) : /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				"data-testid": `manage-item-${row.providerId}`,
+				onSelect: () => onManage?.(connection, row),
+				children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
+			})),
+			actions.map((action) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+				disabled: action.disabled,
+				onSelect: action.onSelect,
+				children: action.label
+			}, action.id)),
+			disconnect && (manage || actions.length > 0) ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null,
+			disconnect ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				"data-testid": `disconnect-${row.providerId}`,
+				className: "text-destructive focus:text-destructive",
+				onSelect: () => onDisconnect?.(connection, row),
+				children: [/* @__PURE__ */ jsx(Unplug, { className: "mr-2 h-4 w-4" }), " Disconnect"]
+			}) : null
+		]
+	})] });
+}
+/** Platform's catalog presentation, with app-owned state, destinations and effects. */
+function IntegrationsCatalog({ rows, query, onQueryChange, categoryFilter = "", onCategoryFilterChange, sort, onSortChange, onSelectConnection, onConnect, onManage, onDisconnect, onRequestIntegration, onRetry, loading = false, error, actionError, connectError, busyProviderId, reserveConnectionContext = false, skeletonCount, emptyCatalogLabel = "No integrations are available to connect yet.", title, description, layout = "cards", className }) {
+	const compact = layout === "tiles";
+	const categories = [...new Set(rows.flatMap((row) => row.category ? [row.category] : []))].sort();
+	const q = query.trim().toLowerCase();
+	const filtered = rows.filter((row) => (!categoryFilter || row.category === categoryFilter) && (!q || `${row.title} ${row.providerId} ${row.description ?? ""}`.toLowerCase().includes(q)));
+	const hiddenActive = rows.filter((row) => catalogRowActive(row) && !filtered.includes(row)).length;
+	const state = error ? "error" : loading && rows.length === 0 ? "loading" : rows.length === 0 ? "empty" : "loaded";
+	const gridClass = compact ? "grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6" : "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3";
+	const boxClass = cn(compact ? "flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center" : "flex min-w-0 min-h-[200px] flex-col gap-3 rounded-xl border p-4 text-left", compact && reserveConnectionContext && "w-full min-h-[136px]");
+	const headerClass = cn("flex w-full min-w-0 gap-2", compact ? "flex-col items-center" : "items-start gap-3");
+	const clearFilters = () => {
+		onQueryChange("");
+		onCategoryFilterChange?.("");
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("w-full min-w-0 space-y-4", className),
+		"aria-label": title ?? "Integrations",
+		"aria-busy": loading,
+		"data-testid": state === "loading" ? "integrations-skeleton" : "integrations-panel",
+		"data-catalog-state": state,
+		children: [
+			title ? /* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-lg font-semibold",
+				children: title
+			}), description ? /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: description
+			}) : null] }) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("flex min-w-0 flex-1 items-center gap-2 rounded-lg border bg-card px-3 py-2", focusFieldWithin),
+						children: [/* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: query,
+							onChange: (event) => onQueryChange(event.target.value),
+							"aria-label": "Search integrations",
+							placeholder: "Search integrations...",
+							autoFocus: compact,
+							"data-testid": "integration-search",
+							className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+						})]
+					}),
+					onCategoryFilterChange ? /* @__PURE__ */ jsxs("select", {
+						"aria-label": "Filter by category",
+						value: categoryFilter,
+						onChange: (event) => onCategoryFilterChange(event.target.value),
+						className: cn("h-10 min-w-0 rounded-lg border bg-card px-3 text-sm", focusRing),
+						children: [
+							/* @__PURE__ */ jsx("option", {
+								value: "",
+								children: "All categories"
+							}),
+							categoryFilter && !categories.includes(categoryFilter) ? /* @__PURE__ */ jsx("option", {
+								value: categoryFilter,
+								children: categoryFilter
+							}) : null,
+							categories.map((category) => /* @__PURE__ */ jsx("option", {
+								value: category,
+								children: category
+							}, category))
+						]
+					}) : null,
+					sort && onSortChange ? /* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-label": "Sort integrations",
+						className: "flex shrink-0 items-center gap-1 rounded-lg border border-border bg-card p-1",
+						children: [["featured", "Featured"], ["alpha", "A–Z"]].map(([value, label]) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-pressed": sort === value,
+							onClick: () => onSortChange(value),
+							"data-testid": `sort-${value}`,
+							className: cn("rounded-md px-2.5 py-1 text-xs font-medium transition-colors", focusRing, sort === value ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"),
+							children: label
+						}, value))
+					}) : null,
+					onRequestIntegration ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => onRequestIntegration(query.trim()),
+						children: "Request an integration"
+					}) : null
+				]
+			}),
+			actionError ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-sm text-destructive",
+				children: actionError
+			}) : null,
+			connectError ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				"data-testid": "integration-connect-error",
+				className: "rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+				children: connectError
+			}) : null,
+			(q || categoryFilter) && state === "loaded" ? /* @__PURE__ */ jsxs("span", {
+				role: "status",
+				className: "sr-only",
+				children: [filtered.length, " matching integrations"]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: gridClass,
+				"data-testid": "integrations-catalog-grid",
+				children: state === "loading" ? Array.from({ length: skeletonCount ?? (compact ? 12 : 6) }, (_, i) => /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					className: cn(boxClass, "animate-pulse border-border bg-muted/40"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: headerClass,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "shrink-0 rounded-2xl bg-muted",
+							style: {
+								width: 48,
+								height: 48
+							}
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex h-8 w-full items-center justify-center",
+							children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-3/4 rounded bg-muted" })
+						})]
+					}), !compact ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "h-8 w-full rounded bg-muted" }), /* @__PURE__ */ jsx("div", { className: "mt-auto h-9 border-t border-border" })] }) : null]
+				}, i)) : state === "error" ? /* @__PURE__ */ jsxs("div", {
+					role: "alert",
+					className: "col-span-full flex min-h-[200px] min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-destructive/40 bg-card p-6",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "break-words text-sm text-destructive",
+						children: error
+					}), onRetry ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: onRetry,
+						children: "Retry"
+					}) : null]
+				}) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "col-span-full min-h-[200px] min-w-0 rounded-xl border border-border bg-card p-4",
+					children: [/* @__PURE__ */ jsx(EmptyState, {
+						title: state === "empty" ? "No integrations" : "No matches",
+						description: state === "empty" ? emptyCatalogLabel : `No integrations match "${query.trim()}".`
+					}), q || categoryFilter ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center gap-2",
+						children: [hiddenActive > 0 ? /* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-muted-foreground",
+							children: [hiddenActive, " active integrations are hidden by your filters."]
+						}) : null, /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: clearFilters,
+							children: "Clear filters"
+						})]
+					}) : null]
+				}) : filtered.map((row) => {
+					const provider = row.kind === "provider" ? row : void 0;
+					const connection = provider?.connections.find((item) => item.id === provider.selectedConnectionId);
+					const active = catalogRowActive(row);
+					const canConnect = provider?.canConnect && onConnect;
+					const connecting = busyProviderId === row.providerId;
+					const wholeButton = !active && !!canConnect && !row.to;
+					const Box = wholeButton ? "button" : "div";
+					const manageHref = connection?.capabilities.manage ? connection.manageHref : void 0;
+					const header = /* @__PURE__ */ jsxs("div", {
+						className: headerClass,
+						children: [/* @__PURE__ */ jsx(ProviderIcon, {
+							id: row.kind === "app" ? row.logoProviderId : row.providerId,
+							iconUrl: row.iconUrl,
+							displayName: row.title,
+							size: 48,
+							className: "rounded-2xl"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex h-8 w-full min-w-0 flex-col justify-center leading-4",
+							children: [row.to ? /* @__PURE__ */ jsx("a", {
+								href: row.to,
+								className: cn("relative z-20 truncate text-sm font-medium hover:underline", focusRing),
+								children: row.title
+							}) : /* @__PURE__ */ jsx("span", {
+								className: cn("w-full font-medium text-foreground", compact ? "text-xs" : "text-sm", connection?.accountDisplay ? "truncate" : "line-clamp-2"),
+								children: row.title
+							}), connection?.accountDisplay ? /* @__PURE__ */ jsx("span", {
+								className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
+								"data-testid": `account-${row.providerId}`,
+								children: connection.accountDisplay
+							}) : null]
+						})]
+					});
+					return /* @__PURE__ */ jsxs(Box, {
+						type: wholeButton ? "button" : void 0,
+						"data-testid": `integration-${row.providerId}`,
+						"data-connected": active ? "true" : "false",
+						"data-connecting": connecting ? "true" : void 0,
+						"aria-busy": connecting || void 0,
+						disabled: wholeButton ? connecting : void 0,
+						onClick: wholeButton ? () => provider && onConnect?.(provider) : void 0,
+						title: connection?.accountDisplay ? `${row.title} — ${connection.accountDisplay}` : row.description ?? row.title,
+						className: cn(boxClass, "group relative", compact && active ? "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]" : "border-border bg-card", wholeButton && cn("transition-all hover:border-[var(--border-strong)] hover:bg-accent/40 hover:shadow-sm", focusRing), connection?.detail && compact && "w-full min-h-[136px]"),
+						children: [
+							compact && manageHref ? /* @__PURE__ */ jsx("a", {
+								href: manageHref,
+								target: connection?.manageInNewWindow ? "_blank" : void 0,
+								rel: connection?.manageInNewWindow ? "noopener noreferrer" : void 0,
+								"aria-label": `Manage ${row.title}${connection?.manageInNewWindow ? " (opens in new window)" : ""}`,
+								"data-testid": `manage-${row.providerId}`,
+								className: cn("absolute inset-0 z-10 rounded-xl", focusRing)
+							}) : null,
+							compact && active ? /* @__PURE__ */ jsx("span", {
+								className: "pointer-events-none absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white",
+								children: /* @__PURE__ */ jsx(Check, {
+									className: "h-3 w-3",
+									strokeWidth: 3
+								})
+							}) : null,
+							header,
+							provider && (provider.connections.length > 1 || active && !connection) ? /* @__PURE__ */ jsx("div", {
+								className: "relative z-20 w-full min-w-0",
+								children: /* @__PURE__ */ jsx(ConnectionSelector, {
+									connections: provider.connections,
+									value: provider.selectedConnectionId,
+									onChange: (id) => onSelectConnection(row.providerId, id),
+									label: `Account for ${row.title}`
+								})
+							}) : null,
+							connection?.detail ? /* @__PURE__ */ jsx("span", {
+								className: "w-full truncate text-[11px] leading-4 text-muted-foreground",
+								title: connection.detail,
+								children: connection.detail
+							}) : null,
+							!compact ? /* @__PURE__ */ jsx("p", {
+								className: cn("min-h-8 text-sm", TONES[connection?.statusTone ?? "neutral"]),
+								children: row.kind === "app" ? row.installedCount ? `Installed · ${row.installedCount} ${row.installedCount === 1 ? "account" : "accounts"}` : "Not installed" : connection?.statusLabel ?? (active ? `${provider?.connections.length} accounts · select one to manage` : "Not connected")
+							}) : null,
+							!compact ? /* @__PURE__ */ jsxs("div", {
+								className: "mt-auto flex min-h-9 items-center gap-2 border-t border-border pt-3",
+								children: [row.kind === "app" ? /* @__PURE__ */ jsx("a", {
+									href: row.to,
+									className: cn("text-sm font-medium hover:underline", focusRing),
+									children: row.installedCount ? "Manage" : "Set up"
+								}) : !active && canConnect ? wholeButton ? /* @__PURE__ */ jsx("span", {
+									className: "text-sm font-medium",
+									children: connecting ? "Connecting…" : "Connect"
+								}) : /* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									disabled: connecting,
+									onClick: () => onConnect?.(row),
+									children: connecting ? "Connecting…" : "Connect"
+								}) : manageHref ? /* @__PURE__ */ jsx("a", {
+									href: manageHref,
+									target: connection?.manageInNewWindow ? "_blank" : void 0,
+									rel: connection?.manageInNewWindow ? "noopener noreferrer" : void 0,
+									"data-testid": `manage-${row.providerId}`,
+									className: cn("text-sm font-medium hover:underline", focusRing),
+									children: "Manage"
+								}) : connection?.capabilities.manage && onManage ? /* @__PURE__ */ jsx(Button, {
+									variant: "outline",
+									onClick: () => onManage(connection, row),
+									children: "Manage"
+								}) : null, provider && connection ? /* @__PURE__ */ jsx("div", {
+									className: "ml-auto",
+									children: /* @__PURE__ */ jsx(ConnectionMenu, {
+										compact,
+										row: provider,
+										connection,
+										onManage,
+										onDisconnect
+									}, connection.id)
+								}) : null]
+							}) : provider && connection ? /* @__PURE__ */ jsx("div", {
+								className: "absolute right-1.5 top-1.5 z-20",
+								children: /* @__PURE__ */ jsx(ConnectionMenu, {
+									compact,
+									row: provider,
+									connection,
+									onManage,
+									onDisconnect
+								}, connection.id)
+							}) : null
+						]
+					}, `${row.kind}:${row.providerId}`);
+				})
+			})
+		]
+	});
+}
+//#endregion
 //#region src/integrations/integrations-panel.tsx
 const DEFAULT_FEATURED_IDS = [
 	"gmail",
@@ -43,419 +397,573 @@ const DEFAULT_FEATURED_IDS = [
 function defaultConnectorOf(provider) {
 	return provider.connectors?.[0]?.connectorId ?? provider.providerId;
 }
-const TILE_GRID_CLASS = "grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6";
-const DEFAULT_SKELETON_COUNT = 12;
-const TILE_BOX_CLASS = "flex min-w-0 aspect-square flex-col items-center justify-center gap-2 rounded-xl border p-3 text-center";
-/**
-* Search + sort row. Rendered by the skeleton AND the loaded panel from this
-* one component, which is the whole point: the row is ~74px tall with a 16px
-* gap under it, and a skeleton that omitted it under-reserved the page by that
-* much on every single load — the panel visibly dropped when data arrived.
-* Height parity here is structural, not a matched pair of magic numbers.
-*
-* The controls stay live while loading. They drive local state only (`query`,
-* `sort`), so typing during the fetch is applied the moment the catalog lands
-* instead of being thrown away — and keeping the same input element mounted
-* across the transition is what preserves its autofocus.
-*/
-function IntegrationsToolbar({ query, onQueryChange, sort, onSortChange }) {
-	return /* @__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 bg-card px-3 py-2 ${focusFieldWithin}`,
-			children: [/* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("input", {
-				type: "text",
-				value: query,
-				onChange: (e) => onQueryChange(e.target.value),
-				"aria-label": "Search integrations",
-				placeholder: "Search integrations...",
-				autoFocus: true,
-				"data-testid": "integration-search",
-				className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			role: "group",
-			"aria-label": "Sort integrations",
-			className: "flex shrink-0 items-center gap-1 rounded-lg border border-border bg-card p-1",
-			children: [["featured", "Featured"], ["alpha", "A–Z"]].map(([value, label]) => /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-pressed": sort === value,
-				onClick: () => onSortChange(value),
-				"data-testid": `sort-${value}`,
-				className: cn("rounded-md px-2.5 py-1 text-xs font-medium transition-colors", focusRing, sort === value ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground"),
-				children: label
-			}, value))
-		})]
-	});
-}
-const LOGO_SIZE = 48;
-function buildConnectionIndex(connections) {
-	const index = /* @__PURE__ */ new Map();
-	for (const conn of connections) {
-		if (conn.status === "revoked") continue;
-		index.set(`${conn.providerId}:${conn.connectorId ?? conn.providerId}`, conn);
-	}
-	return index;
+function displayNameOf(provider) {
+	return provider.displayName ?? provider.title ?? provider.providerId.replace(/[-_]/g, " ");
 }
-function makeFeaturedRank(featuredIds) {
+function makeFeaturedRank(ids) {
 	const rank = /* @__PURE__ */ new Map();
-	featuredIds.forEach((id, i) => {
-		const norm = normalizeProviderId(id);
+	ids.forEach((id, i) => {
 		if (!rank.has(id)) rank.set(id, i);
-		if (!rank.has(norm)) rank.set(norm, i);
+		const normalized = normalizeProviderId(id);
+		if (!rank.has(normalized)) rank.set(normalized, i);
 	});
 	return rank;
 }
 function rankOf(provider, rank) {
 	const raw = provider.providerId.toLowerCase();
-	const direct = rank.get(raw);
-	if (direct !== void 0) return direct;
-	return rank.get(normalizeProviderId(raw)) ?? Number.MAX_SAFE_INTEGER;
-}
-function displayNameOf(provider) {
-	return provider.displayName ?? provider.title ?? provider.providerId.replace(/[-_]/g, " ");
-}
-function matchesQuery(provider, q) {
-	return `${displayNameOf(provider)} ${provider.providerId} ${provider.description ?? ""}`.toLowerCase().includes(q);
+	return rank.get(raw) ?? rank.get(normalizeProviderId(raw)) ?? Number.MAX_SAFE_INTEGER;
 }
-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]");
+/** Compatibility facade: legacy effects/sorting, one controlled catalog renderer. */
+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 = 12, className }) {
+	const [query, setQuery] = React$1.useState("");
+	const [sort, setSort] = React$1.useState(defaultSort);
+	const [selected, setSelected] = React$1.useState({});
 	const [actionError, setActionError] = React$1.useState(null);
 	const [pendingAction, setPendingAction] = React$1.useState(false);
+	const [connectingId, setConnectingId] = React$1.useState(null);
+	const [connectError, setConnectError] = React$1.useState(null);
+	const activeConnect = React$1.useRef(0);
+	const [disconnectTarget, setDisconnectTarget] = React$1.useState(null);
+	const [isDisconnecting, setIsDisconnecting] = React$1.useState(false);
+	const [disconnectError, setDisconnectError] = React$1.useState(null);
+	const activeDisconnect = React$1.useRef(0);
+	React$1.useEffect(() => () => {
+		activeConnect.current += 1;
+		activeDisconnect.current += 1;
+	}, []);
 	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.");
+		} catch (failure) {
+			setActionError(failure instanceof Error ? failure.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);
-	const [isDisconnecting, setIsDisconnecting] = React$1.useState(false);
-	const [disconnectError, setDisconnectError] = React$1.useState(null);
-	const activeDisconnect = React$1.useRef(0);
-	const connectionIndex = React$1.useMemo(() => buildConnectionIndex(connections), [connections]);
-	const featuredRank = React$1.useMemo(() => makeFeaturedRank(featuredIds), [featuredIds]);
-	const visible = React$1.useMemo(() => {
-		const q = query.trim().toLowerCase();
-		const sorted = [...q ? catalog.filter((p) => matchesQuery(p, q)) : catalog];
-		sorted.sort((a, b) => {
-			if (sort === "featured") {
-				const ra = rankOf(a, featuredRank);
-				const rb = rankOf(b, featuredRank);
-				if (ra !== rb) return ra - rb;
-			}
-			return displayNameOf(a).localeCompare(displayNameOf(b));
-		});
-		return sorted;
-	}, [
-		catalog,
-		query,
-		sort,
-		featuredRank
-	]);
-	const closeDisconnect = React$1.useCallback(() => {
-		activeDisconnect.current += 1;
-		setIsDisconnecting(false);
-		setDisconnectTarget(null);
-		setDisconnectError(null);
-	}, []);
-	const [connectingId, setConnectingId] = React$1.useState(null);
-	const [connectError, setConnectError] = React$1.useState(null);
-	const activeConnect = React$1.useRef(0);
-	const startConnect = React$1.useCallback(async (input) => {
-		const reqId = activeConnect.current += 1;
+	const startConnect = async (provider) => {
+		const request = ++activeConnect.current;
 		setConnectError(null);
 		let pending;
 		try {
-			pending = onConnect(input);
-		} catch (e) {
-			setConnectError(e instanceof Error ? e.message : "Failed to start the connection.");
+			pending = onConnect({
+				providerId: provider.providerId,
+				connectorId: defaultConnectorOf(provider)
+			});
+		} catch (failure) {
+			setConnectError(failure instanceof Error ? failure.message : "Failed to start the connection.");
 			return;
 		}
 		if (typeof pending?.then !== "function") return;
-		setConnectingId(input.providerId);
+		setConnectingId(provider.providerId);
 		try {
 			await pending;
-		} catch (e) {
-			if (activeConnect.current !== reqId) return;
-			setConnectError(e instanceof Error ? e.message : "Failed to start the connection.");
+		} catch (failure) {
+			if (activeConnect.current === request) setConnectError(failure instanceof Error ? failure.message : "Failed to start the connection.");
 		} finally {
-			if (activeConnect.current === reqId) setConnectingId(null);
+			if (activeConnect.current === request) setConnectingId(null);
 		}
-	}, [onConnect]);
-	const confirmDisconnect = React$1.useCallback(async () => {
+	};
+	const closeDisconnect = React$1.useCallback(() => {
+		activeDisconnect.current += 1;
+		setIsDisconnecting(false);
+		setDisconnectTarget(null);
+		setDisconnectError(null);
+	}, []);
+	const confirmDisconnect = async () => {
 		if (!disconnectTarget) return;
-		const reqId = activeDisconnect.current += 1;
+		const request = ++activeDisconnect.current;
 		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.");
+			await onDisconnect(disconnectTarget.connection.id);
+			if (activeDisconnect.current === request) setDisconnectTarget(null);
+		} catch (failure) {
+			if (activeDisconnect.current === request) setDisconnectError(failure instanceof Error ? failure.message : "Failed to disconnect.");
 		} finally {
-			if (activeDisconnect.current === reqId) setIsDisconnecting(false);
+			if (activeDisconnect.current === request) 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: ", error.message]
+	};
+	const rank = makeFeaturedRank(featuredIds);
+	const rows = [...catalog].sort((a, b) => {
+		if (sort === "featured") {
+			const delta = rankOf(a, rank) - rankOf(b, rank);
+			if (delta) return delta;
+		}
+		return displayNameOf(a).localeCompare(displayNameOf(b));
+	}).map((provider) => {
+		const live = connections.filter((connection) => connection.providerId === provider.providerId && connection.status !== "revoked");
+		const selectedId = Object.hasOwn(selected, provider.providerId) ? selected[provider.providerId] ?? null : live.length === 1 ? live[0].id : null;
+		return {
+			kind: "provider",
+			providerId: provider.providerId,
+			title: displayNameOf(provider),
+			description: provider.description,
+			iconUrl: provider.iconUrl,
+			canConnect: true,
+			selectedConnectionId: live.some((connection) => connection.id === selectedId) ? selectedId : null,
+			connections: live.map((connection) => {
+				const health = healthByConnectionId?.[connection.id];
+				const manageHref = getManageHref?.(connection);
+				return {
+					id: connection.id,
+					accountDisplay: connection.accountDisplay,
+					statusLabel: health?.message ?? connection.status.replace(/_/g, " "),
+					detail: getConnectionContext?.(connection),
+					manageHref,
+					manageInNewWindow: true,
+					capabilities: {
+						manage: Boolean(manageHref || onManage),
+						disconnect: true
+					},
+					actions: (getConnectionActions?.(connection) ?? []).map((action) => ({
+						id: action.id,
+						label: action.label,
+						disabled: action.disabled || pendingAction,
+						onSelect: () => {
+							runConnectionAction(action);
+						}
+					}))
+				};
 			})
-		})
+		};
 	});
-	if (isLoading && catalog.length === 0) return /* @__PURE__ */ jsxs("div", {
-		className: cn("space-y-4", className),
-		"data-testid": "integrations-skeleton",
-		children: [/* @__PURE__ */ jsx(IntegrationsToolbar, {
-			query,
-			onQueryChange: setQuery,
-			sort,
-			onSortChange: setSort
-		}), /* @__PURE__ */ jsx("div", {
-			className: TILE_GRID_CLASS,
-			children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsxs("div", {
-				"aria-hidden": true,
-				className: cn(tileBoxClass, "animate-pulse border-border bg-muted/40"),
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "shrink-0 rounded-2xl bg-muted",
-					style: {
-						width: LOGO_SIZE,
-						height: LOGO_SIZE
-					}
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex h-8 w-full items-center justify-center",
-					children: /* @__PURE__ */ jsx("div", { className: "h-2.5 w-3/4 rounded bg-muted" })
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IntegrationsCatalog, {
+		rows,
+		query,
+		onQueryChange: setQuery,
+		sort,
+		onSortChange: setSort,
+		layout: "tiles",
+		loading: isLoading,
+		reserveConnectionContext: Boolean(getConnectionContext),
+		error: error ? `Failed to load integrations: ${error.message}` : null,
+		actionError,
+		connectError,
+		busyProviderId: connectingId,
+		skeletonCount,
+		emptyCatalogLabel,
+		className,
+		onSelectConnection: (providerId, id) => setSelected((current) => ({
+			...current,
+			[providerId]: id
+		})),
+		onConnect: (row) => {
+			const provider = catalog.find((item) => item.providerId === row.providerId);
+			if (provider) startConnect(provider);
+		},
+		onManage: onManage ? (connection, row) => {
+			runConnectionAction({
+				id: "manage",
+				label: "Manage",
+				onSelect: () => onManage({
+					connectionId: connection.id,
+					providerId: row.providerId
+				})
+			});
+		} : void 0,
+		onDisconnect: (display, row) => {
+			const connection = connections.find((item) => item.id === display.id && item.providerId === row.providerId && item.status !== "revoked");
+			if (connection) setDisconnectTarget({
+				connection,
+				name: row.title
+			});
+		}
+	}), /* @__PURE__ */ jsx(Dialog, {
+		open: !!disconnectTarget,
+		onOpenChange: (open) => {
+			if (!open) closeDisconnect();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-w-sm",
+			onCloseAutoFocus: (event) => event.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",
+					disconnectTarget?.connection.accountDisplay ? ` (${disconnectTarget.connection.accountDisplay})` : "",
+					". 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"
+				})] })
+			]
+		})
+	})] });
+}
+//#endregion
+//#region src/integrations/connection-detail.tsx
+/** Platform's permission layout, without its fetching, defaults or persistence. */
+function IntegrationConnectionDetail({ provider, connections, selectedConnectionId, onSelectConnection, detailsByConnectionId, loading, error, backHref, description, onRetry, onTestConnection, onDisconnect, onDecisionChange, onResetDecision, className }) {
+	const connection = connections.find((item) => item.id === selectedConnectionId);
+	const details = connection && Object.hasOwn(detailsByConnectionId, connection.id) ? detailsByConnectionId[connection.id] : void 0;
+	const busy = !!details?.busy;
+	const groups = details?.permissionGroups;
+	const failure = error ?? details?.error;
+	const renderRows = (group) => /* @__PURE__ */ jsx("ul", {
+		className: "divide-y divide-border",
+		children: group.rows.map((row) => {
+			const known = row.decision !== null && row.decisionOptions.some((option) => option.value === row.decision);
+			const editable = connection?.capabilities.editPermissions && onDecisionChange;
+			return /* @__PURE__ */ jsxs("li", {
+				className: "flex min-w-0 flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("rounded border border-border px-2 py-0.5 text-xs", row.riskTone === "error" ? "text-destructive" : "text-muted-foreground"),
+							children: row.riskLabel
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 break-words text-sm font-medium",
+							children: row.title
+						})]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 break-all font-mono text-xs text-muted-foreground",
+						children: row.actionPath
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-3 sm:shrink-0",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: row.sourceLabel
+						}),
+						editable ? /* @__PURE__ */ jsxs("select", {
+							"aria-label": `Decision for ${row.actionPath}`,
+							value: known ? row.decision : "",
+							disabled: busy || row.disabled,
+							onChange: (event) => {
+								if (connection && row.decisionOptions.some((option) => option.value === event.target.value)) onDecisionChange?.(connection.id, row.actionPath, event.target.value);
+							},
+							className: cn("h-9 rounded-md border border-border bg-background px-2 text-sm", focusRing),
+							children: [!known ? /* @__PURE__ */ jsx("option", {
+								value: "",
+								disabled: true,
+								children: "Not available"
+							}) : null, row.decisionOptions.map((option) => /* @__PURE__ */ jsx("option", {
+								value: option.value,
+								children: option.label
+							}, option.value))]
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "text-sm",
+							children: known ? row.decisionOptions.find((option) => option.value === row.decision)?.label : "Not available"
+						}),
+						row.canReset && connection?.capabilities.resetPermissions && onResetDecision ? /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							disabled: busy || row.disabled,
+							"aria-label": `Reset ${row.actionPath}`,
+							onClick: () => onResetDecision(connection.id, row.actionPath),
+							children: "Reset"
+						}) : null
+					]
 				})]
-			}, i))
-		})]
-	});
-	if (catalog.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
-		title: "No integrations",
-		description: emptyCatalogLabel,
-		className
+			}, row.actionPath);
+		})
 	});
-	const disconnectAccountLabel = disconnectTarget?.accountDisplay;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("space-y-4", className),
-		"data-testid": "integrations-panel",
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("w-full min-w-0 space-y-4", className),
+		"aria-label": `${provider.title} connection settings`,
+		"data-testid": "integration-connection-detail",
+		"aria-busy": loading || details?.loading || void 0,
 		children: [
-			/* @__PURE__ */ jsx(IntegrationsToolbar, {
-				query,
-				onQueryChange: setQuery,
-				sort,
-				onSortChange: setSort
-			}),
-			actionError ? /* @__PURE__ */ jsx("p", {
-				role: "alert",
-				className: "text-sm text-destructive",
-				children: actionError
+			backHref ? /* @__PURE__ */ jsx("a", {
+				href: backHref,
+				className: cn("inline-flex text-sm text-muted-foreground hover:text-foreground", focusRing),
+				children: "← Integrations"
 			}) : null,
-			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, {
-				title: "No matches",
-				description: `No integrations match "${query.trim()}".`
-			}) : /* @__PURE__ */ jsx("div", {
-				className: TILE_GRID_CLASS,
-				children: visible.map((provider) => {
-					const connectorId = defaultConnectorOf(provider);
-					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(tileBoxClass, "group relative", "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]"),
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex min-w-0 items-start gap-3",
+				children: [/* @__PURE__ */ jsx(ProviderIcon, {
+					id: provider.providerId,
+					iconUrl: provider.iconUrl,
+					displayName: provider.title,
+					size: 48
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsxs("h2", {
+						className: "break-words text-xl font-semibold",
+						children: [provider.title, " connection settings"]
+					}), description ? /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-sm text-muted-foreground",
+						children: description
+					}) : null]
+				})]
+			}),
+			/* @__PURE__ */ jsx(ConnectionSelector, {
+				connections,
+				value: selectedConnectionId,
+				onChange: onSelectConnection,
+				label: `Account for ${provider.title}`
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-[200px] min-w-0 space-y-4",
+				children: [failure ? /* @__PURE__ */ jsxs("div", {
+					role: "alert",
+					className: "rounded-xl border border-destructive/40 bg-card p-4 text-sm text-destructive",
+					children: [/* @__PURE__ */ jsx("p", { children: failure }), onRetry ? /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => onRetry(connection?.id ?? null),
+						children: "Retry"
+					}) : null]
+				}) : null, loading && !connection ? /* @__PURE__ */ jsx("p", {
+					role: "status",
+					className: "rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground",
+					children: "Loading connections…"
+				}) : !connection ? /* @__PURE__ */ jsx("p", {
+					className: "rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground",
+					children: connections.length ? "Select a connected account to view its settings." : "No connected accounts are available."
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-start justify-between gap-3 rounded-xl border border-border bg-card p-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
 							children: [
-								manageHref ? /* @__PURE__ */ jsx("a", {
-									href: manageHref,
-									target: "_blank",
-									rel: "noopener noreferrer",
-									"aria-label": `Manage ${name} (opens in new window)`,
-									"data-testid": `manage-${provider.providerId}`,
-									className: `absolute inset-0 z-10 rounded-xl ${focusRing}`
-								}) : null,
-								/* @__PURE__ */ jsx("span", {
-									className: "pointer-events-none absolute left-2 top-2 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--surface-success-text)] text-white",
-									children: /* @__PURE__ */ jsx(Check, {
-										className: "h-3 w-3",
-										strokeWidth: 3
-									})
+								/* @__PURE__ */ jsx("p", {
+									className: "break-words text-sm font-medium",
+									children: connection.accountDisplay ?? connection.id
 								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "pointer-events-none flex w-full min-w-0 flex-col items-center gap-2",
-									children: [/* @__PURE__ */ jsx(ProviderIcon, {
-										id: provider.providerId,
-										iconUrl: provider.iconUrl,
-										displayName: displayNameOf(provider),
-										size: LOGO_SIZE,
-										className: "rounded-2xl"
-									}), /* @__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]
-									})]
+								/* @__PURE__ */ jsx("p", {
+									className: "text-sm text-muted-foreground",
+									children: connection.statusLabel
 								}),
-								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", {
-										type: "button",
-										"data-testid": `menu-${provider.providerId}`,
-										"aria-label": `More actions for ${name}`,
-										title: "More actions",
-										className: `absolute right-1.5 top-1.5 z-20 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 ${focusRing}`,
-										children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3.5 w-3.5" })
-									})
-								}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-									side: "right",
-									align: "start",
-									className: "min-w-[160px] rounded-md",
-									children: [
-										manageHref ? /* @__PURE__ */ jsx(DropdownMenuItem, {
-											asChild: true,
-											children: /* @__PURE__ */ jsxs("a", {
-												href: manageHref,
-												target: "_blank",
-												rel: "noopener noreferrer",
-												"data-testid": `manage-item-${provider.providerId}`,
-												children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
-											})
-										}) : onManage ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
-											"data-testid": `manage-item-${provider.providerId}`,
-											onClick: () => onManage({
-												connectionId: live.id,
-												providerId: provider.providerId
-											}),
-											children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " Manage"]
-										}) : 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",
-											onClick: () => setDisconnectTarget({
-												connectionId: live.id,
-												name,
-												accountDisplay: live.accountDisplay
-											}),
-											children: [/* @__PURE__ */ jsx(Unplug, { className: "mr-2 h-4 w-4" }), " Disconnect"]
-										})
-									]
-								})] })
+								connection.detail ? /* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-sm text-muted-foreground",
+									children: connection.detail
+								}) : null
 							]
-						}, `${provider.providerId}:${connectorId}`);
-					}
-					return /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						"data-testid": `integration-${provider.providerId}`,
-						"data-connected": "false",
-						"data-connecting": connectingId === provider.providerId ? "true" : void 0,
-						disabled: connectingId === provider.providerId,
-						"aria-busy": connectingId === provider.providerId,
-						onClick: () => {
-							startConnect({
-								providerId: provider.providerId,
-								connectorId
-							});
-						},
-						title: provider.description ? provider.description : `Connect ${name}`,
-						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,
-							displayName: displayNameOf(provider),
-							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
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap gap-2",
+							children: [connection.capabilities.test && onTestConnection ? /* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								disabled: busy,
+								onClick: () => onTestConnection(connection.id),
+								children: "Test connection"
+							}) : null, connection.capabilities.disconnect && onDisconnect ? /* @__PURE__ */ jsx(Button, {
+								variant: "destructive",
+								disabled: busy,
+								onClick: () => onDisconnect(connection.id),
+								children: "Disconnect"
+							}) : null]
 						})]
-					}, `${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"
-						})] })
-					]
-				})
-			})
+					}),
+					details?.testResult ? /* @__PURE__ */ jsx("p", {
+						role: details.testResult.tone === "error" ? "alert" : "status",
+						className: cn("text-sm", details.testResult.tone === "error" ? "text-destructive" : "text-muted-foreground"),
+						children: details.testResult.message
+					}) : null,
+					details?.loading ? /* @__PURE__ */ jsx("p", {
+						role: "status",
+						className: "rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground",
+						children: "Loading connection settings…"
+					}) : !groups ? /* @__PURE__ */ jsx("p", {
+						className: "rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground",
+						children: "Connection settings are not available yet."
+					}) : groups.every((group) => group.rows.length === 0) ? /* @__PURE__ */ jsx("p", {
+						className: "rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground",
+						children: "No actions are available for this connection."
+					}) : groups.map((group) => group.collapsed ? /* @__PURE__ */ jsxs("details", {
+						className: "min-w-0 rounded-xl border border-border bg-card",
+						children: [
+							/* @__PURE__ */ jsxs("summary", {
+								className: cn("cursor-pointer rounded-xl p-4 font-medium", focusRing),
+								children: [
+									group.title,
+									" (",
+									group.rows.length,
+									")"
+								]
+							}),
+							group.description ? /* @__PURE__ */ jsx("p", {
+								className: "px-4 pb-4 text-sm text-muted-foreground",
+								children: group.description
+							}) : null,
+							renderRows(group)
+						]
+					}, group.id) : /* @__PURE__ */ jsxs("section", {
+						className: "min-w-0 rounded-xl border border-border bg-card",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "border-b border-border p-4",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "font-medium",
+								children: group.title
+							}), group.description ? /* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-sm text-muted-foreground",
+								children: group.description
+							}) : null]
+						}), renderRows(group)]
+					}, group.id))
+				] })]
+			}, connection?.id ?? "unselected")
 		]
 	});
 }
 //#endregion
+//#region src/integrations/connection-dialogs.tsx
+const fieldClass = cn("h-10 w-full min-w-0 rounded-md border border-border bg-background px-3 text-sm disabled:opacity-50", focusRing);
+function ConnectionDialog({ children, complete, submitLabel, ...props }) {
+	const opener = React$1.useRef(null);
+	const errorId = React$1.useId();
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: props.open,
+		onOpenChange: props.onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[90dvh] max-w-md overflow-y-auto",
+			onOpenAutoFocus: () => {
+				opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			},
+			onCloseAutoFocus: (event) => {
+				event.preventDefault();
+				if (opener.current?.isConnected) opener.current.focus();
+			},
+			onEscapeKeyDown: (event) => event.stopPropagation(),
+			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: ["Connect ", props.title] }), /* @__PURE__ */ jsx(DialogDescription, { children: props.description ?? "Enter the connection details requested by this application." })] }), /* @__PURE__ */ jsxs("form", {
+				className: "min-w-0 space-y-4",
+				"aria-busy": props.busy || void 0,
+				"aria-describedby": props.error ? errorId : void 0,
+				onSubmit: (event) => {
+					event.preventDefault();
+					if (complete && !props.busy && props.canSubmit !== false) props.onSubmit();
+				},
+				children: [
+					children,
+					props.error ? /* @__PURE__ */ jsx("p", {
+						id: errorId,
+						role: "alert",
+						className: "text-sm text-destructive",
+						children: props.error
+					}) : null,
+					/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: () => props.onOpenChange(false),
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: !complete || props.busy || props.canSubmit === false,
+						children: props.busy ? "Connecting…" : submitLabel
+					})] })
+				]
+			})]
+		})
+	});
+}
+function ApiKeyField({ value, onValueChange, busy, error }) {
+	const id = React$1.useId();
+	const [revealed, setRevealed] = React$1.useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			className: "block text-sm font-medium",
+			children: "API key"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				id,
+				type: revealed ? "text" : "password",
+				value,
+				required: true,
+				onChange: (event) => onValueChange(event.target.value),
+				disabled: busy,
+				autoComplete: "off",
+				autoCapitalize: "none",
+				spellCheck: false,
+				"aria-invalid": !!error || void 0,
+				className: cn(fieldClass, "font-mono")
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				"aria-label": revealed ? "Hide API key" : "Show API key",
+				"aria-pressed": revealed,
+				onClick: () => setRevealed((current) => !current),
+				disabled: busy,
+				children: revealed ? "Hide" : "Show"
+			})]
+		})]
+	});
+}
+/** Key bytes remain in owner-controlled value/onValueChange; no request or storage. */
+function ApiKeyConnectDialog(props) {
+	return /* @__PURE__ */ jsxs(ConnectionDialog, {
+		...props,
+		complete: props.value.trim().length > 0,
+		submitLabel: "Connect",
+		children: [/* @__PURE__ */ jsx(ApiKeyField, {
+			value: props.value,
+			onValueChange: props.onValueChange,
+			busy: props.busy,
+			error: props.error
+		}, props.providerId), props.children]
+	});
+}
+function ParameterFields({ parameters, values, onValueChange, busy, error }) {
+	const prefix = React$1.useId();
+	return /* @__PURE__ */ jsx(Fragment, { children: parameters.map((parameter) => {
+		const id = `${prefix}-${parameter.key}`;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: id,
+					className: "block text-sm font-medium",
+					children: parameter.label
+				}),
+				/* @__PURE__ */ jsx("input", {
+					id,
+					type: "text",
+					value: values[parameter.key] ?? "",
+					onChange: (event) => onValueChange(parameter.key, event.target.value),
+					required: parameter.required,
+					disabled: busy,
+					autoComplete: "off",
+					autoCapitalize: "none",
+					spellCheck: false,
+					placeholder: parameter.placeholder,
+					"aria-invalid": !!error || void 0,
+					"aria-describedby": parameter.description ? `${id}-hint` : void 0,
+					className: fieldClass
+				}),
+				parameter.description ? /* @__PURE__ */ jsx("p", {
+					id: `${id}-hint`,
+					className: "text-xs text-muted-foreground",
+					children: parameter.description
+				}) : null
+			]
+		}, parameter.key);
+	}) });
+}
+/** Parameter schema/values and all auth behavior belong to the owner. */
+function OAuthConnectionParameterDialog(props) {
+	const complete = props.parameters.every((parameter) => !parameter.required || !!props.values[parameter.key]?.trim());
+	return /* @__PURE__ */ jsxs(ConnectionDialog, {
+		...props,
+		complete,
+		submitLabel: "Continue",
+		children: [/* @__PURE__ */ jsx(ParameterFields, { ...props }, props.providerId), props.children]
+	});
+}
+//#endregion
 //#region src/integrations/use-integrations.ts
 function unwrap(json) {
 	if (json && typeof json === "object" && "data" in json && json.data !== void 0) return json.data;
@@ -652,4 +1160,4 @@ function useIntegrations({ apiBaseUrl, fetchImpl, autoLoad = true, refreshOnRetu
 	};
 }
 //#endregion
-export { IntegrationsPanel, ProviderIcon, providerLogoCandidates, useIntegrations };
+export { ApiKeyConnectDialog, ApiKeyConnectDialog as ApiKeyConnectModal, IntegrationConnectionDetail, IntegrationsCatalog, IntegrationsPanel, OAuthConnectionParameterDialog, OAuthConnectionParameterDialog as OAuthConnectionParameterModal, ProviderIcon, catalogRowActive, providerLogoCandidates, useIntegrations };