@burdenoff/microfe-channel 2026.624.3 → 2026.625.1

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

@@ -12,8 +12,9 @@ import { Activity as oe, AlertCircle as p, AlertTriangle as m, Cable as h, Check
 import { useNavigate as me } from "react-router-dom";
 import { usePermissions as he } from "@burdenoff/fe-libs/shared/providers/shell";
 import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { CTAOverflowMenu as ge, GlassCard as E } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/ChannelDashboardPage.tsx
-var E = {
+var D = {
 	EMAIL: {
 		label: "Email",
 		color: "bg-accent-blue-subtle text-accent-blue"
@@ -54,7 +55,7 @@ var E = {
 		label: "Webchat",
 		color: "bg-accent-teal-subtle text-accent-teal"
 	}
-}, D = {
+}, O = {
 	ACTIVE: {
 		label: "Active",
 		dotColor: "bg-status-success-bg",
@@ -85,7 +86,7 @@ var E = {
 		textColor: "text-text-secondary",
 		icon: b
 	}
-}, O = {
+}, k = {
 	HEALTHY: {
 		label: "Healthy",
 		color: "text-status-success-text",
@@ -107,7 +108,7 @@ var E = {
 		icon: _
 	}
 };
-function ge(e) {
+function _e(e) {
 	let t = Date.now() - new Date(e).getTime();
 	if (Number.isNaN(t) || t < 0) return "just now";
 	let n = Math.floor(t / 1e3);
@@ -119,13 +120,14 @@ function ge(e) {
 	let a = Math.floor(i / 24);
 	return a < 7 ? `${a}d ago` : a < 30 ? `${Math.floor(a / 7)}w ago` : `${Math.floor(a / 30)}mo ago`;
 }
-function k({ icon: e, iconClass: t, value: n, label: r, sub: i }) {
-	return /* @__PURE__ */ T("div", {
-		className: "p-4 bg-surface border border-border-subtle rounded-lg",
+function A({ icon: e, iconClass: t, value: n, label: r, sub: i }) {
+	return /* @__PURE__ */ T(E, {
+		treatment: "metric",
+		className: "p-4 border-border-seam",
 		children: [/* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ w("div", {
-				className: "p-2 rounded-lg hover:bg-action-primary-bg/10",
+				className: "p-2 rounded-lg bg-accent-primary/10",
 				children: /* @__PURE__ */ w(e, {
 					size: 18,
 					className: t
@@ -138,27 +140,27 @@ function k({ icon: e, iconClass: t, value: n, label: r, sub: i }) {
 				children: r
 			})] })]
 		}), i && /* @__PURE__ */ w("p", {
-			className: "text-[11px] text-text-secondary mt-2 pl-11",
+			className: "text-[11px] text-text-muted mt-2 pl-11",
 			children: i
 		})]
 	});
 }
-function A() {
-	let m = me(), { hasPermission: g } = he(), _ = g(c.CHANNEL_CREATE), { t: C } = ae(), A = (e, t) => {
+function j() {
+	let m = me(), { hasPermission: g } = he(), _ = g(c.CHANNEL_CREATE), { t: C } = ae(), j = (e, t) => {
 		let n = C(e);
 		return n === e ? t : n;
-	}, [j, M] = f(null), [_e, N] = f(null), [P, F] = f(0), I = (e) => ({
-		...E[e] ?? {
+	}, [ve, M] = f(null), [ye, N] = f(null), [P, F] = f(0), I = (e) => ({
+		...D[e] ?? {
 			label: e,
 			color: "bg-bg-sunken text-text-tertiary"
 		},
-		label: l(e, te, A)
+		label: l(e, te, j)
 	}), L = (e) => ({
-		...D[e] ?? D.INACTIVE,
-		label: l(e, ne, A)
+		...O[e] ?? O.INACTIVE,
+		label: l(e, ne, j)
 	}), R = (e) => ({
-		...O[e] ?? O.UNKNOWN,
-		label: l(e, ee, A)
+		...k[e] ?? k.UNKNOWN,
+		label: l(e, ee, j)
 	}), { channels: z, isLoading: B, error: V, total: H, filter: U, updateFilter: W, deleteChannel: G, activateChannel: K, deactivateChannel: q, runHealthCheck: J, refetch: Y } = o(), X = Math.max(1, Math.ceil(H / 10)), Z = ie(Y);
 	d(() => {
 		Z.current = Y;
@@ -207,7 +209,7 @@ function A() {
 			errored: i,
 			unhealthy: a
 		};
-	}, [z]), ve = u(async (e) => {
+	}, [z]), be = u(async (e) => {
 		t("medium"), N(e);
 		try {
 			await G(e), n("success"), M(null);
@@ -216,14 +218,14 @@ function A() {
 		} finally {
 			N(null);
 		}
-	}, [G]), ye = u(async (e) => {
+	}, [G]), xe = u(async (e) => {
 		N(e.id);
 		try {
 			e.status === "ACTIVE" ? await q(e.id) : await K(e.id);
 		} finally {
 			N(null);
 		}
-	}, [K, q]), be = u(async (e) => {
+	}, [K, q]), Se = u(async (e) => {
 		N(e);
 		try {
 			await J(e);
@@ -248,57 +250,64 @@ function A() {
 							})
 						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
 							className: "text-xl font-bold text-text-primary",
-							children: A("channel.channelDashboard", "Channel Dashboard")
+							children: j("channel.channelDashboard", "Channel Dashboard")
 						}), /* @__PURE__ */ w("p", {
 							className: "text-sm text-text-secondary",
-							children: A("channel.dashboardSubtitle", "Manage and monitor your communication channels")
+							children: j("channel.dashboardSubtitle", "Manage and monitor your communication channels")
 						})] })]
-					}), /* @__PURE__ */ T("div", {
+					}), /* @__PURE__ */ w("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ T("button", {
-							type: "button",
-							onClick: () => Y(),
-							className: "inline-flex items-center gap-1.5 px-3 py-2 text-sm text-text-secondary hover:text-text-primary border border-border-subtle rounded-lg hover:bg-action-primary-bg/10 transition-colors",
-							children: [/* @__PURE__ */ w(S, { size: 14 }), A("channel.refresh", "Refresh")]
-						}), _ && /* @__PURE__ */ T("button", {
-							type: "button",
-							onClick: () => m("/channels/create"),
-							className: "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
-							"data-tour": "channels-dashboard-create-button",
-							children: [/* @__PURE__ */ w(y, { size: 14 }), A("channel.createChannel", "Create Channel")]
-						})]
+						"data-tour": "channels-dashboard-create-button",
+						children: /* @__PURE__ */ w(ge, {
+							primary: _ ? {
+								label: j("channel.createChannel", "Create Channel"),
+								icon: /* @__PURE__ */ w(y, {
+									size: 16,
+									"aria-hidden": "true"
+								}),
+								onSelect: () => m("/channels/create")
+							} : void 0,
+							actions: [{
+								label: j("channel.refresh", "Refresh"),
+								icon: /* @__PURE__ */ w(S, {
+									size: 16,
+									"aria-hidden": "true"
+								}),
+								onSelect: () => void Y()
+							}]
+						})
 					})]
 				}),
 				/* @__PURE__ */ T("div", {
 					"data-tour": "channels-dashboard-kpi-section",
 					className: "grid gap-3 grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
 					children: [
-						/* @__PURE__ */ w(k, {
+						/* @__PURE__ */ w(A, {
 							icon: x,
 							iconClass: "text-accent-primary",
 							value: H,
-							label: A("channel.totalChannels", "Total Channels"),
-							sub: $.active > 0 ? `${$.active} ${A("channel.status.active", "Active").toLowerCase()}, ${H - $.active} ${A("channel.status.inactive", "Inactive").toLowerCase()}` : void 0
+							label: j("channel.totalChannels", "Total Channels"),
+							sub: $.active > 0 ? `${$.active} ${j("channel.status.active", "Active").toLowerCase()}, ${H - $.active} ${j("channel.status.inactive", "Inactive").toLowerCase()}` : void 0
 						}),
-						/* @__PURE__ */ w(k, {
+						/* @__PURE__ */ w(A, {
 							icon: fe,
 							iconClass: "text-status-success-text",
 							value: $.healthy,
-							label: A("channel.healthy", "Healthy"),
-							sub: $.unhealthy > 0 ? `${$.unhealthy} ${A("channel.health.unhealthy", "Unhealthy").toLowerCase()}` : H > 0 ? $.healthy === H ? A("channel.allSystemsNominal", "All systems nominal") : `${H - $.healthy} ${A("channel.health.unchecked", "unchecked")}` : void 0
+							label: j("channel.healthy", "Healthy"),
+							sub: $.unhealthy > 0 ? `${$.unhealthy} ${j("channel.health.unhealthy", "Unhealthy").toLowerCase()}` : H > 0 ? $.healthy === H ? j("channel.allSystemsNominal", "All systems nominal") : `${H - $.healthy} ${j("channel.health.unchecked", "unchecked")}` : void 0
 						}),
-						/* @__PURE__ */ w(k, {
+						/* @__PURE__ */ w(A, {
 							icon: h,
 							iconClass: "text-accent-blue",
 							value: $.connected,
-							label: A("channel.connected", "Connected"),
-							sub: H > 0 ? `${H - $.connected} ${A("channel.disconnected", "Disconnected").toLowerCase()}` : void 0
+							label: j("channel.connected", "Connected"),
+							sub: H > 0 ? `${H - $.connected} ${j("channel.disconnected", "Disconnected").toLowerCase()}` : void 0
 						}),
-						/* @__PURE__ */ w(k, {
+						/* @__PURE__ */ w(A, {
 							icon: le,
 							iconClass: "text-accent-violet",
 							value: $.messages24h.toLocaleString(),
-							label: A("channel.messages24h", "Messages (24h)")
+							label: j("channel.messages24h", "Messages (24h)")
 						})
 					]
 				}),
@@ -317,14 +326,14 @@ function A() {
 									children: $.errored
 								}),
 								" ",
-								A($.errored === 1 ? "channel.errorStateSummarySingle" : "channel.errorStateSummaryMultiple", $.errored === 1 ? "channel in error state" : "channels in error state")
+								j($.errored === 1 ? "channel.errorStateSummarySingle" : "channel.errorStateSummaryMultiple", $.errored === 1 ? "channel in error state" : "channels in error state")
 							]
 						}),
 						/* @__PURE__ */ w("button", {
 							type: "button",
 							onClick: () => W({ status: "ERROR" }),
 							className: "ml-auto text-xs font-medium text-status-error-text hover:text-status-error-text/80 transition-colors",
-							children: A("channel.showErrors", "Show errors")
+							children: j("channel.showErrors", "Show errors")
 						})
 					]
 				}),
@@ -339,8 +348,8 @@ function A() {
 								className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
 							}), /* @__PURE__ */ w("input", {
 								type: "text",
-								"aria-label": A("channel.searchChannels", "Search channels..."),
-								placeholder: A("channel.searchChannels", "Search channels..."),
+								"aria-label": j("channel.searchChannels", "Search channels..."),
+								placeholder: j("channel.searchChannels", "Search channels..."),
 								value: U.search || "",
 								onChange: (e) => W({ search: e.target.value }),
 								className: "w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 placeholder:text-text-secondary"
@@ -352,8 +361,8 @@ function A() {
 							className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary",
 							children: [/* @__PURE__ */ w("option", {
 								value: "",
-								children: A("channel.allPlatforms", "All Platforms")
-							}), Object.entries(E).map(([e, t]) => /* @__PURE__ */ w("option", {
+								children: j("channel.allPlatforms", "All Platforms")
+							}), Object.entries(D).map(([e, t]) => /* @__PURE__ */ w("option", {
 								value: e,
 								children: t.label
 							}, e))]
@@ -364,8 +373,8 @@ function A() {
 							className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/50 text-text-primary",
 							children: [/* @__PURE__ */ w("option", {
 								value: "",
-								children: A("channel.allStatus", "All Status")
-							}), Object.entries(D).map(([e, t]) => /* @__PURE__ */ w("option", {
+								children: j("channel.allStatus", "All Status")
+							}), Object.entries(O).map(([e, t]) => /* @__PURE__ */ w("option", {
 								value: e,
 								children: t.label
 							}, e))]
@@ -383,7 +392,7 @@ function A() {
 							className: "flex-1 min-w-0",
 							children: [/* @__PURE__ */ w("p", {
 								className: "text-sm font-medium text-status-error-text",
-								children: A("channel.loadFailed", "Failed to load channels")
+								children: j("channel.loadFailed", "Failed to load channels")
 							}), /* @__PURE__ */ w("p", {
 								className: "text-xs text-status-error-text/70 truncate",
 								children: V
@@ -393,7 +402,7 @@ function A() {
 							type: "button",
 							onClick: () => Y(),
 							className: "shrink-0 px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
-							children: A("channel.retry", "Retry")
+							children: j("channel.retry", "Retry")
 						})
 					]
 				}),
@@ -416,22 +425,23 @@ function A() {
 						}),
 						/* @__PURE__ */ w("h3", {
 							className: "text-lg font-semibold text-text-primary mb-1",
-							children: U.search || U.platform || U.status ? A("channel.noChannelsMatchFilter", "No channels match your filters") : A("channel.noChannels", "No channels yet")
+							children: U.search || U.platform || U.status ? j("channel.noChannelsMatchFilter", "No channels match your filters") : j("channel.noChannels", "No channels yet")
 						}),
 						/* @__PURE__ */ w("p", {
 							className: "text-sm text-text-secondary max-w-sm mb-5",
-							children: U.search || U.platform || U.status ? A("channel.adjustFilters", "Try adjusting your search or filters.") : A("channel.createFirstChannel", "Create your first communication channel to start sending messages across Email, SMS, Push, Slack and more.")
+							children: U.search || U.platform || U.status ? j("channel.adjustFilters", "Try adjusting your search or filters.") : j("channel.createFirstChannel", "Create your first communication channel to start sending messages across Email, SMS, Push, Slack and more.")
 						}),
 						_ && !(U.search || U.platform || U.status) && /* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => m("/channels/create"),
 							className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
-							children: [/* @__PURE__ */ w(y, { size: 14 }), A("channel.createChannel", "Create Channel")]
+							children: [/* @__PURE__ */ w(y, { size: 14 }), j("channel.createChannel", "Create Channel")]
 						})
 					]
 				}),
-				z.length > 0 && /* @__PURE__ */ T("div", {
-					className: "border border-border-subtle rounded-lg overflow-hidden",
+				z.length > 0 && /* @__PURE__ */ T(E, {
+					treatment: "plain",
+					className: "border-border-seam rounded-lg overflow-hidden p-0",
 					"data-tour": "channels-dashboard-table",
 					children: [/* @__PURE__ */ w("div", {
 						className: "overflow-x-auto min-w-full",
@@ -442,41 +452,41 @@ function A() {
 								children: [
 									/* @__PURE__ */ w("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.channel", "Channel")
+										children: j("channel.channel", "Channel")
 									}),
 									/* @__PURE__ */ w("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.platform", "Platform")
+										children: j("channel.platform", "Platform")
 									}),
 									/* @__PURE__ */ w("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.status", "Status")
+										children: j("channel.status", "Status")
 									}),
 									/* @__PURE__ */ w("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.health", "Health")
+										children: j("channel.health", "Health")
 									}),
 									/* @__PURE__ */ w("th", {
 										className: "text-left px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.connection", "Connection")
+										children: j("channel.connection", "Connection")
 									}),
 									/* @__PURE__ */ w("th", {
 										className: "text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.msgs24h", "Msgs 24h")
+										children: j("channel.msgs24h", "Msgs 24h")
 									}),
 									/* @__PURE__ */ w("th", {
 										className: "text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.updated", "Updated")
+										children: j("channel.updated", "Updated")
 									}),
 									/* @__PURE__ */ w("th", {
 										className: "text-right px-4 py-3 text-xs font-medium text-text-secondary uppercase tracking-wider",
-										children: A("channel.actions", "Actions")
+										children: j("channel.actions", "Actions")
 									})
 								]
 							}) }), /* @__PURE__ */ w("tbody", {
 								className: "divide-y divide-border",
 								children: z.map((e) => {
-									let t = _e === e.id;
+									let t = ye === e.id;
 									return /* @__PURE__ */ T("tr", {
 										className: "bg-surface hover:bg-action-primary-bg/60 transition-colors group",
 										children: [
@@ -529,7 +539,7 @@ function A() {
 												className: "px-4 py-3",
 												children: /* @__PURE__ */ w("span", {
 													className: `text-xs ${e.isConnected ? "text-status-success-text" : "text-text-secondary"}`,
-													children: e.isConnected ? A("channel.connected", "Connected") : A("channel.disconnected", "Disconnected")
+													children: e.isConnected ? j("channel.connected", "Connected") : j("channel.disconnected", "Disconnected")
 												})
 											}),
 											/* @__PURE__ */ w("td", {
@@ -543,7 +553,7 @@ function A() {
 												className: "px-4 py-3 text-right",
 												children: /* @__PURE__ */ w("span", {
 													className: "text-xs text-text-secondary whitespace-nowrap",
-													children: ge(e.updatedAt)
+													children: _e(e.updatedAt)
 												})
 											}),
 											/* @__PURE__ */ w("td", {
@@ -555,17 +565,17 @@ function A() {
 															type: "button",
 															onClick: () => m(`/channels/${e.id}`),
 															className: "p-1.5 text-text-secondary hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors",
-															title: A("channel.view", "View"),
+															title: j("channel.view", "View"),
 															children: /* @__PURE__ */ w(se, { size: 14 })
 														}),
 														/* @__PURE__ */ w(s, {
 															permission: c.CHANNEL_EXECUTE,
 															children: /* @__PURE__ */ w("button", {
 																type: "button",
-																onClick: () => be(e.id),
+																onClick: () => Se(e.id),
 																disabled: t,
 																className: "p-1.5 text-text-secondary hover:text-accent-blue hover:bg-accent-blue-subtle rounded transition-colors disabled:opacity-40",
-																title: A("channel.healthCheck", "Health Check"),
+																title: j("channel.healthCheck", "Health Check"),
 																children: t ? /* @__PURE__ */ w(v, {
 																	size: 14,
 																	className: "animate-spin"
@@ -576,26 +586,26 @@ function A() {
 															permission: c.CHANNEL_UPDATE,
 															children: /* @__PURE__ */ w("button", {
 																type: "button",
-																onClick: () => ye(e),
+																onClick: () => xe(e),
 																disabled: t,
 																className: `p-1.5 rounded transition-colors disabled:opacity-40 ${e.status === "ACTIVE" ? "text-text-secondary hover:text-status-warning-text hover:bg-status-warning-bg-subtle" : "text-text-secondary hover:text-status-success-text hover:bg-status-success-bg-subtle"}`,
-																title: e.status === "ACTIVE" ? A("channel.deactivate", "Deactivate") : A("channel.activate", "Activate"),
+																title: e.status === "ACTIVE" ? j("channel.deactivate", "Deactivate") : j("channel.activate", "Activate"),
 																children: e.status === "ACTIVE" ? /* @__PURE__ */ w(b, { size: 14 }) : /* @__PURE__ */ w(ue, { size: 14 })
 															})
 														}),
-														j === e.id ? /* @__PURE__ */ T("span", {
+														ve === e.id ? /* @__PURE__ */ T("span", {
 															className: "inline-flex items-center gap-1 ml-1",
 															children: [/* @__PURE__ */ w("button", {
 																type: "button",
-																onClick: () => ve(e.id),
+																onClick: () => be(e.id),
 																disabled: t,
 																className: "px-1.5 py-0.5 text-[11px] font-medium text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
-																children: t ? "..." : A("channel.yes", "Yes")
+																children: t ? "..." : j("channel.yes", "Yes")
 															}), /* @__PURE__ */ w("button", {
 																type: "button",
 																onClick: () => M(null),
 																className: "px-1.5 py-0.5 text-[11px] text-text-secondary hover:bg-action-primary-bg/10 rounded transition-colors",
-																children: A("channel.no", "No")
+																children: j("channel.no", "No")
 															})]
 														}) : /* @__PURE__ */ w(s, {
 															permission: c.CHANNEL_DELETE,
@@ -603,7 +613,7 @@ function A() {
 																type: "button",
 																onClick: () => M(e.id),
 																className: "p-1.5 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
-																title: A("channel.delete", "Delete"),
+																title: j("channel.delete", "Delete"),
 																children: /* @__PURE__ */ w(pe, { size: 14 })
 															})
 														})
@@ -620,7 +630,7 @@ function A() {
 						children: [/* @__PURE__ */ T("p", {
 							className: "text-xs text-text-secondary",
 							children: [
-								A("channel.showing", "Showing"),
+								j("channel.showing", "Showing"),
 								" ",
 								/* @__PURE__ */ T("span", {
 									className: "font-medium text-text-primary",
@@ -631,14 +641,14 @@ function A() {
 									]
 								}),
 								" ",
-								A("channel.of", "of"),
+								j("channel.of", "of"),
 								" ",
 								/* @__PURE__ */ w("span", {
 									className: "font-medium text-text-primary",
 									children: H
 								}),
 								" ",
-								A("channel.channelsLower", "channels")
+								j("channel.channelsLower", "channels")
 							]
 						}), /* @__PURE__ */ T("div", {
 							className: "flex items-center gap-2",
@@ -648,7 +658,7 @@ function A() {
 									onClick: () => F((e) => Math.max(0, e - 1)),
 									disabled: P === 0,
 									className: "px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-									children: A("channel.previous", "Prev")
+									children: j("channel.previous", "Prev")
 								}),
 								/* @__PURE__ */ T("span", {
 									className: "text-xs text-text-secondary",
@@ -663,7 +673,7 @@ function A() {
 									onClick: () => F((e) => Math.min(X - 1, e + 1)),
 									disabled: P >= X - 1,
 									className: "px-2.5 py-1 text-xs border border-border-subtle rounded hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-									children: A("channel.next", "Next")
+									children: j("channel.next", "Next")
 								})
 							]
 						})]
@@ -676,7 +686,7 @@ function A() {
 						/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => m("/channels/?tab=all"),
-							className: "flex items-center gap-3 p-3 bg-surface border border-border-subtle rounded-lg hover:bg-action-primary-bg/10 transition-colors text-left",
+							className: "flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left",
 							children: [/* @__PURE__ */ w(x, {
 								size: 16,
 								className: "text-accent-primary shrink-0"
@@ -684,17 +694,17 @@ function A() {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ w("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: A("channel.allChannels", "All Channels")
+									children: j("channel.allChannels", "All Channels")
 								}), /* @__PURE__ */ w("p", {
 									className: "text-xs text-text-secondary truncate",
-									children: A("channel.browseChannels", "Browse and manage channel cards")
+									children: j("channel.browseChannels", "Browse and manage channel cards")
 								})]
 							})]
 						}),
 						/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => m("/channels/?tab=connections"),
-							className: "flex items-center gap-3 p-3 bg-surface border border-border-subtle rounded-lg hover:bg-action-primary-bg/10 transition-colors text-left",
+							className: "flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left",
 							children: [/* @__PURE__ */ w(h, {
 								size: 16,
 								className: "text-accent-blue shrink-0"
@@ -702,17 +712,17 @@ function A() {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ w("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: A("channel.connections", "Connections")
+									children: j("channel.connections", "Connections")
 								}), /* @__PURE__ */ w("p", {
 									className: "text-xs text-text-secondary truncate",
-									children: A("channel.connectionsSubtitle", "OAuth, API keys & credentials")
+									children: j("channel.connectionsSubtitle", "OAuth, API keys & credentials")
 								})]
 							})]
 						}),
 						/* @__PURE__ */ T("button", {
 							type: "button",
 							onClick: () => m("/channels/?tab=send"),
-							className: "flex items-center gap-3 p-3 bg-surface border border-border-subtle rounded-lg hover:bg-action-primary-bg/10 transition-colors text-left",
+							className: "flex items-center gap-3 p-3 bg-gloss-card border border-border-seam rounded-lg shadow-[var(--shadow-pop)] hover:bg-action-primary-bg/10 transition-colors text-left",
 							children: [/* @__PURE__ */ w(oe, {
 								size: 16,
 								className: "text-accent-violet shrink-0"
@@ -720,10 +730,10 @@ function A() {
 								className: "min-w-0",
 								children: [/* @__PURE__ */ w("p", {
 									className: "text-sm font-medium text-text-primary",
-									children: A("channel.sendMessage", "Send Message")
+									children: j("channel.sendMessage", "Send Message")
 								}), /* @__PURE__ */ w("p", {
 									className: "text-xs text-text-secondary truncate",
-									children: A("channel.sendMessageSubtitle", "Send a test or one-off notification")
+									children: j("channel.sendMessageSubtitle", "Send a test or one-off notification")
 								})]
 							})]
 						})
@@ -734,6 +744,6 @@ function A() {
 	});
 }
 //#endregion
-export { A as ChannelDashboardPage };
+export { j as ChannelDashboardPage };
 
 //# sourceMappingURL=ChannelDashboardPage.js.map