@burdenoff/microfe-channel 2026.625.2 → 2026.625.3

package/dist/channel/modules/channels/pages/ConnectionDetailsPage.js

@@ -1,338 +1,383 @@
 import { useChannel as e } from "../../../providers/ChannelProvider.js";
 import { nativeImpact as t, nativeNotify as n } from "../../../../utils/nativeBridge.js";
 import { reportShellError as ee } from "../../../utils/shellBridge.js";
-import { getGlobalChannelClient as r } from "../../../graphql/global-client.js";
-import { GetConnectionDocument as i } from "../../../../generated/global-operations.js";
-import { useChannel as a } from "../../../hooks/useChannels.js";
-import { PermissionGuard as o } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as s } from "../../../constants/permissions.js";
-import { useEffect as c, useState as l } from "react";
-import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as d, ArrowLeft as f, CheckCircle2 as p, Clock as te, Edit as ne, Loader2 as m, RefreshCw as h, Shield as g, Trash2 as _, XCircle as v } from "lucide-react";
-import { useNavigate as y, useParams as b } from "react-router-dom";
-import { usePermissions as x } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import { CTAOverflowMenu as w, EmphasisPanel as T, GlassCard as E } from "@burdenoff/fe-libs/ui";
-import { TagBadge as D } from "@burdenoff/fe-libs/tag";
+import { getGlobalChannelClient as te } from "../../../graphql/global-client.js";
+import { GetConnectionDocument as r } from "../../../../generated/global-operations.js";
+import { useChannel as ne } from "../../../hooks/useChannels.js";
+import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
+import { useEffect as re, useState as o } from "react";
+import { useI18n as ie } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as s, ArrowLeft as c, CheckCircle2 as l, Clock as u, Edit as d, Loader2 as f, RefreshCw as p, Shield as m, Trash2 as h, XCircle as g } from "lucide-react";
+import { useNavigate as _, useParams as v } from "react-router-dom";
+import { usePermissions as ae } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { CTAOverflowMenu as oe, EmphasisPanel as x, GlassCard as S, NextSteps as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
+import { TagBadge as T } from "@burdenoff/fe-libs/tag";
 //#region src/channel/modules/channels/pages/ConnectionDetailsPage.tsx
-var O = {
+var E = {
 	true: {
-		icon: p,
+		icon: l,
 		color: "text-status-success-text",
 		bgColor: "bg-status-success-bg-subtle",
 		label: "Healthy"
 	},
 	false: {
-		icon: v,
+		icon: g,
 		color: "text-status-error-text",
 		bgColor: "bg-error-500/10",
 		label: "Unhealthy"
 	}
 };
-function k() {
-	let p = y(), { hasPermission: v } = x(), k = v(s.CHANNEL_UPDATE), re = v(s.CHANNEL_EXECUTE), A = b(), { connectionId: j } = A, { authToken: M, apiGatewayUrl: N, organizationId: P } = e(), [F, I] = l(A.channelId), [L, R] = l(null);
-	c(() => {
-		if (F || !j) return;
+function D() {
+	let l = _(), { hasPermission: g } = ae(), D = g(a.CHANNEL_UPDATE), O = g(a.CHANNEL_EXECUTE), k = v(), { connectionId: A } = k, { authToken: j, apiGatewayUrl: M, organizationId: N } = e(), [P, F] = o(k.channelId), [I, L] = o(null);
+	re(() => {
+		if (P || !A) return;
 		let e = !1;
 		return (async () => {
 			try {
-				let t = await r(N, M, P).query({
-					query: i,
-					variables: { id: j },
+				let t = await te(M, j, N).query({
+					query: r,
+					variables: { id: A },
 					fetchPolicy: "network-only"
 				});
 				if (e) return;
 				let n = t.data?.getConnection;
-				n?.channelId ? I(n.channelId) : R("Connection not found");
+				n?.channelId ? F(n.channelId) : L("Connection not found");
 			} catch (t) {
-				e || R(t instanceof Error ? t.message : "Failed to resolve connection");
+				e || L(t instanceof Error ? t.message : "Failed to resolve connection");
 			}
 		})(), () => {
 			e = !0;
 		};
 	}, [
-		j,
-		F,
-		N,
+		A,
+		P,
 		M,
-		P
+		j,
+		N
 	]);
-	let z = F, { channel: B, isLoading: V, error: H, runHealthCheck: U, deleteConnection: W } = a(z), { t: G } = u(), K = (e, t) => {
-		let n = G(e);
+	let R = P, { channel: z, isLoading: B, error: V, runHealthCheck: H, deleteConnection: U } = ne(R), { t: W } = ie(), G = (e, t) => {
+		let n = W(e);
 		return n === e ? t : n;
-	}, [q, J] = l(!1), [Y, X] = l(!1), [ie, Z] = l(!1), Q = B?.connection, ae = async () => {
-		X(!0);
+	}, [K, q] = o(!1), [J, Y] = o(!1), [se, X] = o(!1), Z = z?.connection, Q = async () => {
+		Y(!0);
 		try {
-			await U();
+			await H();
 		} finally {
-			X(!1);
+			Y(!1);
 		}
-	}, oe = async () => {
-		if (j) {
-			t("medium"), J(!0);
+	}, ce = async () => {
+		if (A) {
+			t("medium"), q(!0);
 			try {
-				await W(j), n("success"), p(`/channels/${z}`);
+				await U(A), n("success"), l(`/channels/${R}`);
 			} catch (e) {
 				n("error"), ee(e, {
 					module: "channel",
 					context: { action: "Failed to delete connection" }
 				}, "[channel] Failed to delete connection");
 			} finally {
-				J(!1);
+				q(!1);
 			}
 		}
 	};
-	if (V || !F && !L) return /* @__PURE__ */ S("div", {
+	if (B || !P && !I) return /* @__PURE__ */ y("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ S(m, { className: "size-8 animate-spin text-text-secondary" })
+		children: /* @__PURE__ */ y(f, { className: "size-8 animate-spin text-text-secondary" })
 	});
-	if (L || H || !B) return /* @__PURE__ */ C("div", {
+	if (I || V || !z) return /* @__PURE__ */ b("div", {
 		className: "flex flex-col items-center justify-center min-h-screen gap-4",
 		children: [
-			/* @__PURE__ */ S(d, { className: "size-12 text-status-error-text" }),
-			/* @__PURE__ */ S("h1", {
+			/* @__PURE__ */ y(s, { className: "size-12 text-status-error-text" }),
+			/* @__PURE__ */ y("h1", {
 				className: "text-xl font-semibold",
-				children: K("channel.channelNotFound", "Channel not found")
+				children: G("channel.channelNotFound", "Channel not found")
 			}),
-			/* @__PURE__ */ S("button", {
+			/* @__PURE__ */ y("button", {
 				type: "button",
-				onClick: () => p("../../list"),
+				onClick: () => l("../../list"),
 				className: "text-primary hover:underline",
-				children: K("channel.backToChannels", "Back to channels")
+				children: G("channel.backToChannels", "Back to channels")
 			})
 		]
 	});
-	if (!Q) return /* @__PURE__ */ C("div", {
+	if (!Z) return /* @__PURE__ */ b("div", {
 		className: "flex flex-col items-center justify-center min-h-screen gap-4",
 		children: [
-			/* @__PURE__ */ S(d, { className: "size-12 text-text-secondary" }),
-			/* @__PURE__ */ S("h1", {
+			/* @__PURE__ */ y(s, { className: "size-12 text-text-secondary" }),
+			/* @__PURE__ */ y("h1", {
 				className: "text-xl font-semibold",
-				children: K("channel.noConnectionFound", "No connection found")
+				children: G("channel.noConnectionFound", "No connection found")
 			}),
-			/* @__PURE__ */ S("p", {
+			/* @__PURE__ */ y("p", {
 				className: "text-sm text-text-secondary",
-				children: K("channel.noConnectionConfigured", "This channel does not have a connection configured.")
+				children: G("channel.noConnectionConfigured", "This channel does not have a connection configured.")
 			}),
-			/* @__PURE__ */ S("button", {
+			/* @__PURE__ */ y("button", {
 				type: "button",
-				onClick: () => p(`/channels/${z}`),
+				onClick: () => l(`/channels/${R}`),
 				className: "text-primary hover:underline",
-				children: K("channel.backToChannel", "Back to channel")
+				children: G("channel.backToChannel", "Back to channel")
 			})
 		]
 	});
-	let $ = O[String(Q.isHealthy)] || O.false, se = $.icon;
-	return /* @__PURE__ */ S(o, {
-		permission: s.CHANNEL_CONNECTION_READ,
-		children: /* @__PURE__ */ C("div", {
+	let $ = E[String(Z.isHealthy)] || E.false, le = $.icon;
+	return /* @__PURE__ */ y(i, {
+		permission: a.CHANNEL_CONNECTION_READ,
+		children: /* @__PURE__ */ b("div", {
 			className: "min-h-screen bg-bg-surface",
-			children: [/* @__PURE__ */ S("div", {
+			children: [/* @__PURE__ */ y("div", {
 				className: "border-b bg-bg-surface",
-				children: /* @__PURE__ */ S("div", {
+				children: /* @__PURE__ */ y("div", {
 					className: "container mx-auto px-6 py-4",
-					children: /* @__PURE__ */ C("div", {
+					children: /* @__PURE__ */ b("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ C("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "flex items-center gap-4",
-							children: [/* @__PURE__ */ S("button", {
+							children: [/* @__PURE__ */ y("button", {
 								type: "button",
-								onClick: () => p(`/channels/${z}`),
+								onClick: () => l(`/channels/${R}`),
 								className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
-								children: /* @__PURE__ */ S(f, { className: "size-5 " })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
+								children: /* @__PURE__ */ y(c, { className: "size-5 " })
+							}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
 								className: "text-2xl font-bold",
-								children: K("channel.connectionDetails", "Connection Details")
-							}), /* @__PURE__ */ C("p", {
+								children: G("channel.connectionDetails", "Connection Details")
+							}), /* @__PURE__ */ b("p", {
 								className: "text-sm text-text-secondary",
 								children: [
-									B.name,
+									z.name,
 									" • ",
-									B.platform
+									z.platform
 								]
 							})] })]
-						}), /* @__PURE__ */ S(w, {
-							primary: k ? {
-								label: K("channel.editChannel", "Edit Channel"),
-								icon: /* @__PURE__ */ S(ne, {
+						}), /* @__PURE__ */ y(oe, {
+							primary: D ? {
+								label: G("channel.editChannel", "Edit Channel"),
+								icon: /* @__PURE__ */ y(d, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}),
-								onSelect: () => p(`/channels/${z}/edit`)
+								onSelect: () => l(`/channels/${R}/edit`)
 							} : void 0,
-							actions: re ? [{
-								label: K("channel.runHealthCheck", "Run Health Check"),
-								icon: Y ? /* @__PURE__ */ S(m, {
+							actions: O ? [{
+								label: G("channel.runHealthCheck", "Run Health Check"),
+								icon: J ? /* @__PURE__ */ y(f, {
 									className: "size-4 animate-spin",
 									"aria-hidden": "true"
-								}) : /* @__PURE__ */ S(h, {
+								}) : /* @__PURE__ */ y(p, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}),
-								disabled: Y,
-								onSelect: () => void ae()
+								disabled: J,
+								onSelect: () => void Q()
 							}] : []
 						})]
 					})
 				})
-			}), /* @__PURE__ */ C("div", {
+			}), /* @__PURE__ */ b("div", {
 				className: "container mx-auto px-6 py-8 max-w-5xl space-y-6",
-				children: [/* @__PURE__ */ S(T, {
-					className: "p-6",
-					children: /* @__PURE__ */ S("div", {
-						className: "flex items-center justify-between",
-						children: /* @__PURE__ */ C("div", {
-							className: "flex items-center gap-4",
-							children: [/* @__PURE__ */ S("div", {
-								className: $.color,
-								children: /* @__PURE__ */ S(se, { className: "size-10 " })
-							}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h2", {
-								className: "text-xl font-semibold",
-								children: $.label
-							}), /* @__PURE__ */ S("p", {
-								className: "text-sm text-text-secondary",
-								children: Q.isHealthy ? K("channel.connectionWorking", "Connection is working properly") : K("channel.connectionNotWorking", "Connection is not working properly")
-							})] })]
+				children: [
+					/* @__PURE__ */ y(w, {
+						icon: /* @__PURE__ */ y(m, {
+							size: 15,
+							"aria-hidden": "true"
+						}),
+						children: G("channel.connectionDetailsPurpose", "The authenticated link between this channel and its provider — its auth type, whether it is active, when it was last tested, and how soon its token expires. Use it to verify the channel can actually send, to spot a token that needs refreshing before it lapses, or to remove a connection you no longer need.")
+					}),
+					/* @__PURE__ */ y(C, {
+						storageKey: "channel-connection-detail",
+						steps: [
+							...O ? [{
+								id: "health",
+								label: G("channel.nextRunHealthCheck", "Run a health check"),
+								description: G("channel.nextConnectionHealthDesc", "Confirm the credentials still authenticate against the provider."),
+								icon: /* @__PURE__ */ y(p, {
+									size: 16,
+									"aria-hidden": "true"
+								}),
+								onClick: () => void Q()
+							}] : [],
+							...D ? [{
+								id: "edit",
+								label: G("channel.nextEditChannel", "Edit the channel"),
+								description: G("channel.nextEditChannelDesc", "Update credentials, status or platform metadata for this channel."),
+								icon: /* @__PURE__ */ y(d, {
+									size: 16,
+									"aria-hidden": "true"
+								}),
+								onClick: () => l(`/channels/${R}/edit`)
+							}] : [],
+							{
+								id: "back",
+								label: G("channel.nextBackToChannel", "Back to the channel"),
+								description: G("channel.nextBackToChannelDesc", "Return to the channel overview to send a test or review deliveries."),
+								icon: /* @__PURE__ */ y(c, {
+									size: 16,
+									"aria-hidden": "true"
+								}),
+								onClick: () => l(`/channels/${R}`)
+							}
+						]
+					}),
+					/* @__PURE__ */ y(x, {
+						className: "p-6",
+						children: /* @__PURE__ */ y("div", {
+							className: "flex items-center justify-between",
+							children: /* @__PURE__ */ b("div", {
+								className: "flex items-center gap-4",
+								children: [/* @__PURE__ */ y("div", {
+									className: $.color,
+									children: /* @__PURE__ */ y(le, { className: "size-10 " })
+								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
+									className: "text-xl font-semibold",
+									children: $.label
+								}), /* @__PURE__ */ y("p", {
+									className: "text-sm text-text-secondary",
+									children: Z.isHealthy ? G("channel.connectionWorking", "Connection is working properly") : G("channel.connectionNotWorking", "Connection is not working properly")
+								})] })]
+							})
 						})
-					})
-				}), /* @__PURE__ */ C("div", {
-					className: "grid gap-6 lg:grid-cols-3",
-					children: [/* @__PURE__ */ C(E, {
-						treatment: "plain",
-						className: "border-border-seam p-6 space-y-4 lg:col-span-2",
-						children: [
-							/* @__PURE__ */ S("h3", {
+					}),
+					/* @__PURE__ */ b("div", {
+						className: "grid gap-6 lg:grid-cols-3",
+						children: [/* @__PURE__ */ b(S, {
+							treatment: "plain",
+							className: "border-border-seam p-6 space-y-4 lg:col-span-2",
+							children: [
+								/* @__PURE__ */ y("h3", {
+									className: "font-semibold",
+									children: G("channel.connectionInformation", "Connection Information")
+								}),
+								/* @__PURE__ */ b("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [
+										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Connection ID"
+										}), /* @__PURE__ */ y("p", {
+											className: "font-mono text-sm",
+											children: Z.id
+										})] }),
+										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Auth Type"
+										}), /* @__PURE__ */ b("p", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ y(m, { className: "size-4 text-text-secondary" }), Z.authType]
+										})] }),
+										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Status"
+										}), /* @__PURE__ */ y("p", {
+											className: Z.isActive ? "text-status-success-text" : "text-text-secondary",
+											children: Z.isActive ? G("channel.activeStatus", "Active") : G("channel.inactiveStatus", "Inactive")
+										})] }),
+										/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Token Refresh"
+										}), /* @__PURE__ */ y("p", {
+											className: Z.needsTokenRefresh ? "text-status-warning-text" : "text-text-secondary",
+											children: Z.needsTokenRefresh ? G("channel.tokenRefreshRequired", "Required soon") : G("channel.tokenRefreshNotNeeded", "Not needed")
+										})] }),
+										Z.lastTestedAt && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Last Tested"
+										}), /* @__PURE__ */ b("p", {
+											className: "flex items-center gap-2",
+											children: [/* @__PURE__ */ y(u, { className: "size-4 text-text-secondary" }), new Date(Z.lastTestedAt).toLocaleString()]
+										})] }),
+										Z.daysUntilExpiry !== null && Z.daysUntilExpiry !== void 0 && /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-sm text-text-secondary",
+											children: "Days Until Token Expiry"
+										}), /* @__PURE__ */ b("p", {
+											className: Z.daysUntilExpiry < 30 ? "text-status-warning-text" : "text-text-secondary",
+											children: [Z.daysUntilExpiry, " days"]
+										})] })
+									]
+								}),
+								Z.testStatus && /* @__PURE__ */ b("div", {
+									className: "pt-4 border-t",
+									children: [/* @__PURE__ */ y("p", {
+										className: "text-sm text-text-secondary mb-2",
+										children: "Last Test Status"
+									}), /* @__PURE__ */ y("div", {
+										className: "p-3 rounded-lg bg-bg-sunken",
+										children: /* @__PURE__ */ y("p", {
+											className: "font-mono text-sm",
+											children: Z.testStatus
+										})
+									})]
+								}),
+								Z.tagAssignments && Z.tagAssignments.length > 0 && /* @__PURE__ */ b("div", {
+									className: "pt-4 border-t",
+									children: [/* @__PURE__ */ y("p", {
+										className: "text-sm text-text-secondary mb-2",
+										children: G("channel.tags", "Tags")
+									}), /* @__PURE__ */ y("div", {
+										className: "flex flex-wrap gap-1.5",
+										"aria-label": "Connection tags",
+										children: Z.tagAssignments.map((e) => /* @__PURE__ */ y(T, {
+											id: e.tagId,
+											label: e.tagId,
+											size: "md"
+										}, e.id))
+									})]
+								})
+							]
+						}), /* @__PURE__ */ b(S, {
+							treatment: "plain",
+							className: "border-border-seam p-6 space-y-4 lg:col-span-1",
+							children: [/* @__PURE__ */ y("h3", {
 								className: "font-semibold",
-								children: K("channel.connectionInformation", "Connection Information")
-							}),
-							/* @__PURE__ */ C("div", {
-								className: "grid grid-cols-2 gap-4",
-								children: [
-									/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-										className: "text-sm text-text-secondary",
-										children: "Connection ID"
-									}), /* @__PURE__ */ S("p", {
-										className: "font-mono text-sm",
-										children: Q.id
-									})] }),
-									/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-										className: "text-sm text-text-secondary",
-										children: "Auth Type"
-									}), /* @__PURE__ */ C("p", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ S(g, { className: "size-4 text-text-secondary" }), Q.authType]
-									})] }),
-									/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-										className: "text-sm text-text-secondary",
-										children: "Status"
-									}), /* @__PURE__ */ S("p", {
-										className: Q.isActive ? "text-status-success-text" : "text-text-secondary",
-										children: Q.isActive ? K("channel.activeStatus", "Active") : K("channel.inactiveStatus", "Inactive")
-									})] }),
-									/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-										className: "text-sm text-text-secondary",
-										children: "Token Refresh"
-									}), /* @__PURE__ */ S("p", {
-										className: Q.needsTokenRefresh ? "text-status-warning-text" : "text-text-secondary",
-										children: Q.needsTokenRefresh ? K("channel.tokenRefreshRequired", "Required soon") : K("channel.tokenRefreshNotNeeded", "Not needed")
-									})] }),
-									Q.lastTestedAt && /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-										className: "text-sm text-text-secondary",
-										children: "Last Tested"
-									}), /* @__PURE__ */ C("p", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ S(te, { className: "size-4 text-text-secondary" }), new Date(Q.lastTestedAt).toLocaleString()]
-									})] }),
-									Q.daysUntilExpiry !== null && Q.daysUntilExpiry !== void 0 && /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-										className: "text-sm text-text-secondary",
-										children: "Days Until Token Expiry"
-									}), /* @__PURE__ */ C("p", {
-										className: Q.daysUntilExpiry < 30 ? "text-status-warning-text" : "text-text-secondary",
-										children: [Q.daysUntilExpiry, " days"]
-									})] })
-								]
-							}),
-							Q.testStatus && /* @__PURE__ */ C("div", {
-								className: "pt-4 border-t",
-								children: [/* @__PURE__ */ S("p", {
-									className: "text-sm text-text-secondary mb-2",
-									children: "Last Test Status"
-								}), /* @__PURE__ */ S("div", {
-									className: "p-3 rounded-lg bg-bg-sunken",
-									children: /* @__PURE__ */ S("p", {
-										className: "font-mono text-sm",
-										children: Q.testStatus
-									})
-								})]
-							}),
-							Q.tagAssignments && Q.tagAssignments.length > 0 && /* @__PURE__ */ C("div", {
-								className: "pt-4 border-t",
-								children: [/* @__PURE__ */ S("p", {
-									className: "text-sm text-text-secondary mb-2",
-									children: K("channel.tags", "Tags")
-								}), /* @__PURE__ */ S("div", {
-									className: "flex flex-wrap gap-1.5",
-									"aria-label": "Connection tags",
-									children: Q.tagAssignments.map((e) => /* @__PURE__ */ S(D, {
-										id: e.tagId,
-										label: e.tagId,
-										size: "md"
-									}, e.id))
-								})]
-							})
-						]
-					}), /* @__PURE__ */ C(E, {
-						treatment: "plain",
-						className: "border-border-seam p-6 space-y-4 lg:col-span-1",
-						children: [/* @__PURE__ */ S("h3", {
-							className: "font-semibold",
-							children: K("channel.actions", "Actions")
-						}), /* @__PURE__ */ C("div", {
-							className: "flex flex-col gap-3",
-							children: [/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("p", {
-								className: "font-medium",
-								children: K("channel.deleteConnection", "Delete Connection")
-							}), /* @__PURE__ */ S("p", {
-								className: "text-sm text-text-secondary",
-								children: K("channel.deleteConnectionWarning", "Permanently remove this connection. The channel will become inactive.")
-							})] }), ie ? /* @__PURE__ */ C("div", {
-								className: "flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ S("span", {
-										className: "text-sm text-text-secondary",
-										children: K("channel.confirmDelete", "Confirm delete?")
-									}),
-									/* @__PURE__ */ C("button", {
-										type: "button",
-										onClick: oe,
-										disabled: q,
-										className: "px-4 py-2 rounded-lg bg-status-error-bg text-status-error-text hover:bg-status-error-bg/90 transition-colors flex items-center gap-2",
-										children: [q ? /* @__PURE__ */ S(m, { className: "size-4 animate-spin" }) : /* @__PURE__ */ S(_, { className: "size-4 " }), K("channel.delete", "Delete")]
-									}),
-									/* @__PURE__ */ S("button", {
+								children: G("channel.actions", "Actions")
+							}), /* @__PURE__ */ b("div", {
+								className: "flex flex-col gap-3",
+								children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+									className: "font-medium",
+									children: G("channel.deleteConnection", "Delete Connection")
+								}), /* @__PURE__ */ y("p", {
+									className: "text-sm text-text-secondary",
+									children: G("channel.deleteConnectionWarning", "Permanently remove this connection. The channel will become inactive.")
+								})] }), se ? /* @__PURE__ */ b("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ y("span", {
+											className: "text-sm text-text-secondary",
+											children: G("channel.confirmDelete", "Confirm delete?")
+										}),
+										/* @__PURE__ */ b("button", {
+											type: "button",
+											onClick: ce,
+											disabled: K,
+											className: "px-4 py-2 rounded-lg bg-status-error-bg text-status-error-text hover:bg-status-error-bg/90 transition-colors flex items-center gap-2",
+											children: [K ? /* @__PURE__ */ y(f, { className: "size-4 animate-spin" }) : /* @__PURE__ */ y(h, { className: "size-4 " }), G("channel.delete", "Delete")]
+										}),
+										/* @__PURE__ */ y("button", {
+											type: "button",
+											onClick: () => X(!1),
+											className: "px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors",
+											children: G("channel.cancel", "Cancel")
+										})
+									]
+								}) : /* @__PURE__ */ y(i, {
+									permission: a.CHANNEL_CONNECTION_DELETE,
+									children: /* @__PURE__ */ b("button", {
 										type: "button",
-										onClick: () => Z(!1),
-										className: "px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors",
-										children: K("channel.cancel", "Cancel")
+										onClick: () => X(!0),
+										className: "px-4 py-2 rounded-lg text-status-error-text border border-status-error-border hover:bg-status-error-bg/10 transition-colors flex items-center gap-2",
+										children: [/* @__PURE__ */ y(h, { className: "size-4 " }), G("channel.delete", "Delete")]
 									})
-								]
-							}) : /* @__PURE__ */ S(o, {
-								permission: s.CHANNEL_CONNECTION_DELETE,
-								children: /* @__PURE__ */ C("button", {
-									type: "button",
-									onClick: () => Z(!0),
-									className: "px-4 py-2 rounded-lg text-status-error-text border border-status-error-border hover:bg-status-error-bg/10 transition-colors flex items-center gap-2",
-									children: [/* @__PURE__ */ S(_, { className: "size-4 " }), K("channel.delete", "Delete")]
-								})
+								})]
 							})]
 						})]
-					})]
-				})]
+					})
+				]
 			})]
 		})
 	});
 }
 //#endregion
-export { k as ConnectionDetailsPage };
+export { D as ConnectionDetailsPage };
 
 //# sourceMappingURL=ConnectionDetailsPage.js.map