@burdenoff/microfe-channel 2026.608.1 → 2026.624.2

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

@@ -51,33 +51,33 @@ function S() {
 	}, []), I = [...new Set(F.map((e) => e.platform))], L = F.filter((e) => !(k === "healthy" && !e.isHealthy || k === "unhealthy" && e.isHealthy || j !== "all" && e.platform !== j)), R = Math.max(1, Math.ceil(L.length / 10)), z = L.slice(N * 10, (N + 1) * 10);
 	return w ? /* @__PURE__ */ v("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ v(u, { className: "size-8 animate-spin text-muted-foreground" })
+		children: /* @__PURE__ */ v(u, { className: "size-8 animate-spin text-text-secondary" })
 	}) : T ? /* @__PURE__ */ y("div", {
 		className: "flex flex-col items-center justify-center min-h-screen gap-4",
 		children: [
-			/* @__PURE__ */ v(o, { className: "size-12 text-destructive" }),
+			/* @__PURE__ */ v(o, { className: "size-12 text-status-error-text" }),
 			/* @__PURE__ */ v("h1", {
 				className: "text-xl font-semibold",
 				children: O("channel.loadConnectionsFailed", "Failed to load connections")
 			}),
 			/* @__PURE__ */ v("p", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: T
 			}),
 			/* @__PURE__ */ v("button", {
 				type: "button",
 				onClick: () => E(),
-				className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90",
+				className: "px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90",
 				children: O("channel.retry", "Retry")
 			})
 		]
 	}) : /* @__PURE__ */ v(t, {
 		permission: n.CHANNEL_CONNECTION_READ,
 		children: /* @__PURE__ */ y("div", {
-			className: "min-h-screen bg-background",
+			className: "min-h-screen bg-bg-surface",
 			children: [
 				/* @__PURE__ */ v("div", {
-					className: "border-b bg-card",
+					className: "border-b bg-bg-surface",
 					"data-tour": "channels-connections-header",
 					children: /* @__PURE__ */ v("div", {
 						className: "container mx-auto px-6 py-4",
@@ -89,13 +89,13 @@ function S() {
 									type: "button",
 									onClick: () => c("./list"),
 									"aria-label": O("channel.backToChannels", "Back to channels"),
-									className: "p-2 hover:bg-muted rounded-lg transition-colors",
+									className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
 									children: /* @__PURE__ */ v(s, { className: "size-5 " })
 								}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
 									className: "text-2xl font-bold",
 									children: O("channel.connections", "Connections")
 								}), /* @__PURE__ */ y("p", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: [
 										L.length,
 										" connection",
@@ -105,7 +105,7 @@ function S() {
 							}), S && /* @__PURE__ */ y("button", {
 								type: "button",
 								onClick: () => c("./create"),
-								className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-2",
+								className: "px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90 transition-colors flex items-center gap-2",
 								children: [/* @__PURE__ */ v(d, { className: "size-4 " }), O("channel.newConnection", "New Connection")]
 							})]
 						})
@@ -120,7 +120,7 @@ function S() {
 							/* @__PURE__ */ y("select", {
 								value: j,
 								onChange: (e) => M(e.target.value),
-								className: "px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary",
+								className: "px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary",
 								children: [/* @__PURE__ */ v("option", {
 									value: "all",
 									children: O("channel.allPlatforms", "All Platforms")
@@ -132,7 +132,7 @@ function S() {
 							/* @__PURE__ */ y("select", {
 								value: k,
 								onChange: (e) => A(e.target.value),
-								className: "px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary",
+								className: "px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary",
 								children: [
 									/* @__PURE__ */ v("option", {
 										value: "all",
@@ -152,7 +152,7 @@ function S() {
 								type: "button",
 								onClick: () => E(),
 								"aria-label": O("channel.refresh", "Refresh"),
-								className: "p-2 hover:bg-muted rounded-lg transition-colors",
+								className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
 								children: /* @__PURE__ */ v(f, {
 									className: "size-5 ",
 									"aria-hidden": "true"
@@ -166,26 +166,26 @@ function S() {
 					children: L.length === 0 ? /* @__PURE__ */ y("div", {
 						className: "text-center py-12",
 						children: [
-							/* @__PURE__ */ v(l, { className: "size-12 mx-auto text-muted-foreground mb-4" }),
+							/* @__PURE__ */ v(l, { className: "size-12 mx-auto text-text-secondary mb-4" }),
 							/* @__PURE__ */ v("h2", {
 								className: "text-lg font-semibold mb-2",
 								children: O("channel.noConnectionsFound", "No connections found")
 							}),
 							/* @__PURE__ */ v("p", {
-								className: "text-sm text-muted-foreground mb-4",
+								className: "text-sm text-text-secondary mb-4",
 								children: C.length === 0 ? O("channel.createChannelFirst", "Create a channel first to add connections") : O("channel.noConnectionsMatchFilter", "No connections match your filters")
 							}),
 							C.length === 0 ? S ? /* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => c("./create"),
-								className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90",
+								className: "px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90",
 								children: O("channel.createConnection", "Create Connection")
 							}) : null : /* @__PURE__ */ v("button", {
 								type: "button",
 								onClick: () => {
 									A("all"), M("all");
 								},
-								className: "px-4 py-2 rounded-lg border hover:bg-muted",
+								className: "px-4 py-2 rounded-lg border hover:bg-bg-sunken",
 								children: O("channel.clearFilters", "Clear Filters")
 							})
 						]
@@ -196,7 +196,7 @@ function S() {
 							return /* @__PURE__ */ v("div", {
 								role: "button",
 								tabIndex: 0,
-								className: "p-4 hover:bg-muted/50 transition-colors cursor-pointer",
+								className: "p-4 hover:bg-bg-sunken/50 transition-colors cursor-pointer",
 								onClick: () => c(`./${e.channelId}`),
 								onKeyDown: (t) => {
 									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), c(`./${e.channelId}`));
@@ -216,7 +216,7 @@ function S() {
 											className: "font-medium",
 											children: e.channelName
 										}), /* @__PURE__ */ y("p", {
-											className: "text-sm text-muted-foreground",
+											className: "text-sm text-text-secondary",
 											children: [
 												e.platform,
 												" • ",
@@ -236,7 +236,7 @@ function S() {
 														className: "text-status-success-text",
 														children: O("channel.activeStatus", "Active")
 													}) : e.channelStatus === "INACTIVE" ? /* @__PURE__ */ v("span", {
-														className: "text-muted-foreground",
+														className: "text-text-secondary",
 														children: O("channel.inactiveStatus", "Inactive")
 													}) : e.channelStatus === "ERROR" ? /* @__PURE__ */ v("span", {
 														className: "text-status-error-text",
@@ -245,14 +245,14 @@ function S() {
 														className: "text-status-warning-text",
 														children: O("channel.suspendedStatus", "Suspended")
 													}) : e.channelStatus === "ARCHIVED" ? /* @__PURE__ */ v("span", {
-														className: "text-muted-foreground",
+														className: "text-text-secondary",
 														children: O("channel.archivedStatus", "Archived")
 													}) : /* @__PURE__ */ v("span", {
-														className: "text-muted-foreground",
+														className: "text-text-secondary",
 														children: O("channel.inactiveStatus", "Inactive")
 													})
 												}), e.lastTestedAt && /* @__PURE__ */ y("p", {
-													className: "text-xs text-muted-foreground",
+													className: "text-xs text-text-secondary",
 													children: ["Last tested: ", new Date(e.lastTestedAt).toLocaleDateString()]
 												})]
 											}),
@@ -268,7 +268,7 @@ function S() {
 													label: e.tagId,
 													size: "sm"
 												}, e.id)), e.tagAssignments.length > 3 && /* @__PURE__ */ y("span", {
-													className: "text-xs text-muted-foreground",
+													className: "text-xs text-text-secondary",
 													children: ["+", e.tagAssignments.length - 3]
 												})]
 											}),
@@ -278,7 +278,7 @@ function S() {
 													t.stopPropagation(), c(`/channels/${e.channelId}`);
 												},
 												"aria-label": O("channel.viewChannelSettings", "View channel settings"),
-												className: "p-2 hover:bg-muted rounded-lg transition-colors",
+												className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
 												children: /* @__PURE__ */ v(p, { className: "size-4 " })
 											})
 										]
@@ -287,9 +287,9 @@ function S() {
 							}, e.connectionId);
 						})
 					}), L.length > 10 && /* @__PURE__ */ y("div", {
-						className: "flex items-center justify-between px-4 py-3 border border-border rounded-lg mt-3",
+						className: "flex items-center justify-between px-4 py-3 border border-border-subtle rounded-lg mt-3",
 						children: [/* @__PURE__ */ y("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: [
 								O("channel.showing", "Showing"),
 								" ",
@@ -316,11 +316,11 @@ function S() {
 									type: "button",
 									onClick: () => P((e) => Math.max(0, e - 1)),
 									disabled: N === 0,
-									className: "px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+									className: "px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
 									children: O("channel.previous", "Previous")
 								}),
 								/* @__PURE__ */ y("span", {
-									className: "text-sm text-muted-foreground",
+									className: "text-sm text-text-secondary",
 									children: [
 										N + 1,
 										" / ",
@@ -331,7 +331,7 @@ function S() {
 									type: "button",
 									onClick: () => P((e) => Math.min(R - 1, e + 1)),
 									disabled: N >= R - 1,
-									className: "px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+									className: "px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
 									children: O("channel.next", "Next")
 								})
 							]

package/dist/channel/modules/channels/pages/ConnectionsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionsListPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ConnectionsListPage.tsx"],"sourcesContent":["/**\n * Connections List Page\n *\n * Displays all connections across channels with their status.\n */\n\nimport { useState, useEffect } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { TagBadge } from '@burdenoff/fe-libs/tag';\nimport {\n  ArrowLeft,\n  Plus,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n  XCircle,\n  RefreshCw,\n  Settings,\n  Link,\n} from 'lucide-react';\nimport { useChannels } from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\nconst HEALTH_CONFIG: Record<string, { icon: typeof CheckCircle2; color: string; label: string }> = {\n  true: { icon: CheckCircle2, color: 'text-status-success-text', label: 'Healthy' },\n  false: { icon: XCircle, color: 'text-status-error-text', label: 'Unhealthy' },\n};\n\nexport function ConnectionsListPage() {\n  const navigate = useNavigate();\n  const { hasPermission } = usePermissions();\n  // Creating connections is admin-only (channel-connection:create) — hide otherwise.\n  const canConnectionCreate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_CONNECTION_CREATE);\n  const { channels, isLoading, error, refetch } = useChannels();\n\n  // Poll for connection status updates every 60 s.\n  // connectionStatusChanged subscription is scoped to a single channelId;\n  // this page shows all connections, so polling is used instead.\n  useEffect(() => {\n    const timer = setInterval(() => {\n      void refetch();\n    }, 60_000);\n    return () => clearInterval(timer);\n  }, [refetch]);\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  // Filter state\n  const [healthFilter, setHealthFilter] = useState<string>('all');\n  const [platformFilter, setPlatformFilter] = useState<string>('all');\n  const pageSize = 10;\n  const [currentPage, setCurrentPage] = useState(0);\n\n  // Get all connections from channels (single-pass; avoids filter().map() double traversal)\n  const connections = channels.reduce<\n    Array<{\n      channelId: string;\n      channelName: string;\n      platform: (typeof channels)[number]['platform'];\n      adapterType: (typeof channels)[number]['adapterType'];\n      channelStatus: (typeof channels)[number]['status'];\n      connectionId: string;\n      isActive: boolean;\n      isHealthy: boolean;\n      needsTokenRefresh: boolean;\n      lastTestedAt: string | null | undefined;\n      authType: NonNullable<(typeof channels)[number]['connection']>['authType'];\n      tagAssignments: NonNullable<\n        NonNullable<(typeof channels)[number]['connection']>['tagAssignments']\n      >;\n    }>\n  >((acc, ch) => {\n    const conn = ch.connection;\n    if (!conn) return acc;\n    acc.push({\n      channelId: ch.id,\n      channelName: ch.name,\n      platform: ch.platform,\n      adapterType: ch.adapterType,\n      channelStatus: ch.status,\n      connectionId: conn.id,\n      isActive: conn.isActive,\n      isHealthy: conn.isHealthy,\n      needsTokenRefresh: conn.needsTokenRefresh,\n      lastTestedAt: conn.lastTestedAt,\n      authType: conn.authType,\n      tagAssignments: conn.tagAssignments ?? [],\n    });\n    return acc;\n  }, []);\n\n  // Get unique platforms\n  const platforms = [...new Set(connections.map((c) => c.platform))];\n\n  // Apply filters\n  const filteredConnections = connections.filter((conn) => {\n    if (healthFilter === 'healthy' && !conn.isHealthy) return false;\n    if (healthFilter === 'unhealthy' && conn.isHealthy) return false;\n    if (platformFilter !== 'all' && conn.platform !== platformFilter) return false;\n    return true;\n  });\n\n  const totalPages = Math.max(1, Math.ceil(filteredConnections.length / pageSize));\n  const pagedConnections = filteredConnections.slice(\n    currentPage * pageSize,\n    (currentPage + 1) * pageSize\n  );\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 className=\"size-8 animate-spin text-muted-foreground\" />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"flex flex-col items-center justify-center min-h-screen gap-4\">\n        <AlertCircle className=\"size-12 text-destructive\" />\n        <h1 className=\"text-xl font-semibold\">\n          {tr('channel.loadConnectionsFailed', 'Failed to load connections')}\n        </h1>\n        <p className=\"text-sm text-muted-foreground\">{error}</p>\n        <button\n          type=\"button\"\n          onClick={() => refetch()}\n          className=\"px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90\"\n        >\n          {tr('channel.retry', 'Retry')}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_CONNECTION_READ}>\n      <div className=\"min-h-screen bg-background\">\n        {/* Header */}\n        <div className=\"border-b bg-card\" data-tour=\"channels-connections-header\">\n          <div className=\"container mx-auto px-6 py-4\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigate('./list')}\n                  aria-label={tr('channel.backToChannels', 'Back to channels')}\n                  className=\"p-2 hover:bg-muted rounded-lg transition-colors\"\n                >\n                  <ArrowLeft className=\"size-5 \" />\n                </button>\n                <div>\n                  <h1 className=\"text-2xl font-bold\">{tr('channel.connections', 'Connections')}</h1>\n                  <p className=\"text-sm text-muted-foreground\">\n                    {filteredConnections.length} connection\n                    {filteredConnections.length !== 1 ? 's' : ''}\n                  </p>\n                </div>\n              </div>\n              {canConnectionCreate && (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate('./create')}\n                  className=\"px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-2\"\n                >\n                  <Plus className=\"size-4 \" />\n                  {tr('channel.newConnection', 'New Connection')}\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Filters */}\n        <div className=\"container mx-auto px-6 py-4\" data-tour=\"channels-connections-filters\">\n          <div className=\"flex items-center gap-4\">\n            <select\n              value={platformFilter}\n              onChange={(e) => setPlatformFilter(e.target.value)}\n              className=\"px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"all\">{tr('channel.allPlatforms', 'All Platforms')}</option>\n              {platforms.map((p) => (\n                <option key={p} value={p}>\n                  {p}\n                </option>\n              ))}\n            </select>\n\n            <select\n              value={healthFilter}\n              onChange={(e) => setHealthFilter(e.target.value)}\n              className=\"px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"all\">{tr('channel.allStatus', 'All Status')}</option>\n              <option value=\"healthy\">{tr('channel.healthy', 'Healthy')}</option>\n              <option value=\"unhealthy\">{tr('channel.unhealthy', 'Unhealthy')}</option>\n            </select>\n\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              aria-label={tr('channel.refresh', 'Refresh')}\n              className=\"p-2 hover:bg-muted rounded-lg transition-colors\"\n            >\n              <RefreshCw className=\"size-5 \" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n\n        {/* Connections List */}\n        <div className=\"container mx-auto px-6 pb-8\">\n          {filteredConnections.length === 0 ? (\n            <div className=\"text-center py-12\">\n              <Link className=\"size-12 mx-auto text-muted-foreground mb-4\" />\n              <h2 className=\"text-lg font-semibold mb-2\">\n                {tr('channel.noConnectionsFound', 'No connections found')}\n              </h2>\n              <p className=\"text-sm text-muted-foreground mb-4\">\n                {channels.length === 0\n                  ? tr('channel.createChannelFirst', 'Create a channel first to add connections')\n                  : tr('channel.noConnectionsMatchFilter', 'No connections match your filters')}\n              </p>\n              {channels.length === 0 ? (\n                canConnectionCreate ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => navigate('./create')}\n                    className=\"px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90\"\n                  >\n                    {tr('channel.createConnection', 'Create Connection')}\n                  </button>\n                ) : null\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setHealthFilter('all');\n                    setPlatformFilter('all');\n                  }}\n                  className=\"px-4 py-2 rounded-lg border hover:bg-muted\"\n                >\n                  {tr('channel.clearFilters', 'Clear Filters')}\n                </button>\n              )}\n            </div>\n          ) : (\n            <>\n              <div className=\"border rounded-lg divide-y\">\n                {pagedConnections.map((conn) => {\n                  const health = HEALTH_CONFIG[String(conn.isHealthy)] || HEALTH_CONFIG.false;\n                  const HealthIcon = health.icon;\n\n                  return (\n                    <div\n                      key={conn.connectionId}\n                      role=\"button\"\n                      tabIndex={0}\n                      className=\"p-4 hover:bg-muted/50 transition-colors cursor-pointer\"\n                      onClick={() => navigate(`./${conn.channelId}`)}\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter' || e.key === ' ') {\n                          e.preventDefault();\n                          navigate(`./${conn.channelId}`);\n                        }\n                      }}\n                    >\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"flex items-center gap-4\">\n                          <div className={health.color} aria-label={health.label}>\n                            <HealthIcon className=\"size-5 \" aria-hidden=\"true\" />\n                          </div>\n                          <div>\n                            <p className=\"font-medium\">{conn.channelName}</p>\n                            <p className=\"text-sm text-muted-foreground\">\n                              {conn.platform} • {conn.adapterType} • {conn.authType}\n                            </p>\n                          </div>\n                        </div>\n\n                        <div className=\"flex items-center gap-4\">\n                          <div className=\"text-right\">\n                            <p className=\"text-sm\">\n                              {conn.channelStatus === 'ACTIVE' ? (\n                                <span className=\"text-status-success-text\">\n                                  {tr('channel.activeStatus', 'Active')}\n                                </span>\n                              ) : conn.channelStatus === 'INACTIVE' ? (\n                                <span className=\"text-muted-foreground\">\n                                  {tr('channel.inactiveStatus', 'Inactive')}\n                                </span>\n                              ) : conn.channelStatus === 'ERROR' ? (\n                                <span className=\"text-status-error-text\">\n                                  {tr('channel.errorStatus', 'Error')}\n                                </span>\n                              ) : conn.channelStatus === 'SUSPENDED' ? (\n                                <span className=\"text-status-warning-text\">\n                                  {tr('channel.suspendedStatus', 'Suspended')}\n                                </span>\n                              ) : conn.channelStatus === 'ARCHIVED' ? (\n                                <span className=\"text-muted-foreground\">\n                                  {tr('channel.archivedStatus', 'Archived')}\n                                </span>\n                              ) : (\n                                <span className=\"text-muted-foreground\">\n                                  {tr('channel.inactiveStatus', 'Inactive')}\n                                </span>\n                              )}\n                            </p>\n                            {conn.lastTestedAt && (\n                              <p className=\"text-xs text-muted-foreground\">\n                                Last tested: {new Date(conn.lastTestedAt).toLocaleDateString()}\n                              </p>\n                            )}\n                          </div>\n\n                          {conn.needsTokenRefresh && (\n                            <span className=\"px-2 py-1 text-xs bg-status-warning-bg-subtle text-status-warning-text rounded\">\n                              Token Expires\n                            </span>\n                          )}\n\n                          {conn.tagAssignments.length > 0 && (\n                            <div className=\"flex flex-wrap gap-1\" aria-label=\"Connection tags\">\n                              {conn.tagAssignments.slice(0, 3).map((a) => (\n                                <TagBadge key={a.id} id={a.tagId} label={a.tagId} size=\"sm\" />\n                              ))}\n                              {conn.tagAssignments.length > 3 && (\n                                <span className=\"text-xs text-muted-foreground\">\n                                  +{conn.tagAssignments.length - 3}\n                                </span>\n                              )}\n                            </div>\n                          )}\n\n                          <button\n                            type=\"button\"\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              navigate(`/channels/${conn.channelId}`);\n                            }}\n                            aria-label={tr('channel.viewChannelSettings', 'View channel settings')}\n                            className=\"p-2 hover:bg-muted rounded-lg transition-colors\"\n                          >\n                            <Settings className=\"size-4 \" />\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n              {/* Pagination */}\n              {filteredConnections.length > pageSize && (\n                <div className=\"flex items-center justify-between px-4 py-3 border border-border rounded-lg mt-3\">\n                  <p className=\"text-sm text-muted-foreground\">\n                    {tr('channel.showing', 'Showing')}{' '}\n                    <span className=\"font-medium\">\n                      {currentPage * pageSize + 1}–\n                      {Math.min((currentPage + 1) * pageSize, filteredConnections.length)}\n                    </span>{' '}\n                    {tr('channel.of', 'of')}{' '}\n                    <span className=\"font-medium\">{filteredConnections.length}</span>\n                  </p>\n                  <div className=\"flex items-center gap-2\">\n                    <button\n                      type=\"button\"\n                      onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}\n                      disabled={currentPage === 0}\n                      className=\"px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n                    >\n                      {tr('channel.previous', 'Previous')}\n                    </button>\n                    <span className=\"text-sm text-muted-foreground\">\n                      {currentPage + 1} / {totalPages}\n                    </span>\n                    <button\n                      type=\"button\"\n                      onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}\n                      disabled={currentPage >= totalPages - 1}\n                      className=\"px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n                    >\n                      {tr('channel.next', 'Next')}\n                    </button>\n                  </div>\n                </div>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ConnectionsListPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/ConnectionsListPage.tsx"],"sourcesContent":["/**\n * Connections List Page\n *\n * Displays all connections across channels with their status.\n */\n\nimport { useState, useEffect } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { TagBadge } from '@burdenoff/fe-libs/tag';\nimport {\n  ArrowLeft,\n  Plus,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n  XCircle,\n  RefreshCw,\n  Settings,\n  Link,\n} from 'lucide-react';\nimport { useChannels } from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\nconst HEALTH_CONFIG: Record<string, { icon: typeof CheckCircle2; color: string; label: string }> = {\n  true: { icon: CheckCircle2, color: 'text-status-success-text', label: 'Healthy' },\n  false: { icon: XCircle, color: 'text-status-error-text', label: 'Unhealthy' },\n};\n\nexport function ConnectionsListPage() {\n  const navigate = useNavigate();\n  const { hasPermission } = usePermissions();\n  // Creating connections is admin-only (channel-connection:create) — hide otherwise.\n  const canConnectionCreate = hasPermission(CHANNEL_PERMISSIONS.CHANNEL_CONNECTION_CREATE);\n  const { channels, isLoading, error, refetch } = useChannels();\n\n  // Poll for connection status updates every 60 s.\n  // connectionStatusChanged subscription is scoped to a single channelId;\n  // this page shows all connections, so polling is used instead.\n  useEffect(() => {\n    const timer = setInterval(() => {\n      void refetch();\n    }, 60_000);\n    return () => clearInterval(timer);\n  }, [refetch]);\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  // Filter state\n  const [healthFilter, setHealthFilter] = useState<string>('all');\n  const [platformFilter, setPlatformFilter] = useState<string>('all');\n  const pageSize = 10;\n  const [currentPage, setCurrentPage] = useState(0);\n\n  // Get all connections from channels (single-pass; avoids filter().map() double traversal)\n  const connections = channels.reduce<\n    Array<{\n      channelId: string;\n      channelName: string;\n      platform: (typeof channels)[number]['platform'];\n      adapterType: (typeof channels)[number]['adapterType'];\n      channelStatus: (typeof channels)[number]['status'];\n      connectionId: string;\n      isActive: boolean;\n      isHealthy: boolean;\n      needsTokenRefresh: boolean;\n      lastTestedAt: string | null | undefined;\n      authType: NonNullable<(typeof channels)[number]['connection']>['authType'];\n      tagAssignments: NonNullable<\n        NonNullable<(typeof channels)[number]['connection']>['tagAssignments']\n      >;\n    }>\n  >((acc, ch) => {\n    const conn = ch.connection;\n    if (!conn) return acc;\n    acc.push({\n      channelId: ch.id,\n      channelName: ch.name,\n      platform: ch.platform,\n      adapterType: ch.adapterType,\n      channelStatus: ch.status,\n      connectionId: conn.id,\n      isActive: conn.isActive,\n      isHealthy: conn.isHealthy,\n      needsTokenRefresh: conn.needsTokenRefresh,\n      lastTestedAt: conn.lastTestedAt,\n      authType: conn.authType,\n      tagAssignments: conn.tagAssignments ?? [],\n    });\n    return acc;\n  }, []);\n\n  // Get unique platforms\n  const platforms = [...new Set(connections.map((c) => c.platform))];\n\n  // Apply filters\n  const filteredConnections = connections.filter((conn) => {\n    if (healthFilter === 'healthy' && !conn.isHealthy) return false;\n    if (healthFilter === 'unhealthy' && conn.isHealthy) return false;\n    if (platformFilter !== 'all' && conn.platform !== platformFilter) return false;\n    return true;\n  });\n\n  const totalPages = Math.max(1, Math.ceil(filteredConnections.length / pageSize));\n  const pagedConnections = filteredConnections.slice(\n    currentPage * pageSize,\n    (currentPage + 1) * pageSize\n  );\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 className=\"size-8 animate-spin text-text-secondary\" />\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"flex flex-col items-center justify-center min-h-screen gap-4\">\n        <AlertCircle className=\"size-12 text-status-error-text\" />\n        <h1 className=\"text-xl font-semibold\">\n          {tr('channel.loadConnectionsFailed', 'Failed to load connections')}\n        </h1>\n        <p className=\"text-sm text-text-secondary\">{error}</p>\n        <button\n          type=\"button\"\n          onClick={() => refetch()}\n          className=\"px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90\"\n        >\n          {tr('channel.retry', 'Retry')}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_CONNECTION_READ}>\n      <div className=\"min-h-screen bg-bg-surface\">\n        {/* Header */}\n        <div className=\"border-b bg-bg-surface\" data-tour=\"channels-connections-header\">\n          <div className=\"container mx-auto px-6 py-4\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-4\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigate('./list')}\n                  aria-label={tr('channel.backToChannels', 'Back to channels')}\n                  className=\"p-2 hover:bg-bg-sunken rounded-lg transition-colors\"\n                >\n                  <ArrowLeft className=\"size-5 \" />\n                </button>\n                <div>\n                  <h1 className=\"text-2xl font-bold\">{tr('channel.connections', 'Connections')}</h1>\n                  <p className=\"text-sm text-text-secondary\">\n                    {filteredConnections.length} connection\n                    {filteredConnections.length !== 1 ? 's' : ''}\n                  </p>\n                </div>\n              </div>\n              {canConnectionCreate && (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate('./create')}\n                  className=\"px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90 transition-colors flex items-center gap-2\"\n                >\n                  <Plus className=\"size-4 \" />\n                  {tr('channel.newConnection', 'New Connection')}\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Filters */}\n        <div className=\"container mx-auto px-6 py-4\" data-tour=\"channels-connections-filters\">\n          <div className=\"flex items-center gap-4\">\n            <select\n              value={platformFilter}\n              onChange={(e) => setPlatformFilter(e.target.value)}\n              className=\"px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"all\">{tr('channel.allPlatforms', 'All Platforms')}</option>\n              {platforms.map((p) => (\n                <option key={p} value={p}>\n                  {p}\n                </option>\n              ))}\n            </select>\n\n            <select\n              value={healthFilter}\n              onChange={(e) => setHealthFilter(e.target.value)}\n              className=\"px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n            >\n              <option value=\"all\">{tr('channel.allStatus', 'All Status')}</option>\n              <option value=\"healthy\">{tr('channel.healthy', 'Healthy')}</option>\n              <option value=\"unhealthy\">{tr('channel.unhealthy', 'Unhealthy')}</option>\n            </select>\n\n            <button\n              type=\"button\"\n              onClick={() => refetch()}\n              aria-label={tr('channel.refresh', 'Refresh')}\n              className=\"p-2 hover:bg-bg-sunken rounded-lg transition-colors\"\n            >\n              <RefreshCw className=\"size-5 \" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n\n        {/* Connections List */}\n        <div className=\"container mx-auto px-6 pb-8\">\n          {filteredConnections.length === 0 ? (\n            <div className=\"text-center py-12\">\n              <Link className=\"size-12 mx-auto text-text-secondary mb-4\" />\n              <h2 className=\"text-lg font-semibold mb-2\">\n                {tr('channel.noConnectionsFound', 'No connections found')}\n              </h2>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {channels.length === 0\n                  ? tr('channel.createChannelFirst', 'Create a channel first to add connections')\n                  : tr('channel.noConnectionsMatchFilter', 'No connections match your filters')}\n              </p>\n              {channels.length === 0 ? (\n                canConnectionCreate ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => navigate('./create')}\n                    className=\"px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90\"\n                  >\n                    {tr('channel.createConnection', 'Create Connection')}\n                  </button>\n                ) : null\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setHealthFilter('all');\n                    setPlatformFilter('all');\n                  }}\n                  className=\"px-4 py-2 rounded-lg border hover:bg-bg-sunken\"\n                >\n                  {tr('channel.clearFilters', 'Clear Filters')}\n                </button>\n              )}\n            </div>\n          ) : (\n            <>\n              <div className=\"border rounded-lg divide-y\">\n                {pagedConnections.map((conn) => {\n                  const health = HEALTH_CONFIG[String(conn.isHealthy)] || HEALTH_CONFIG.false;\n                  const HealthIcon = health.icon;\n\n                  return (\n                    <div\n                      key={conn.connectionId}\n                      role=\"button\"\n                      tabIndex={0}\n                      className=\"p-4 hover:bg-bg-sunken/50 transition-colors cursor-pointer\"\n                      onClick={() => navigate(`./${conn.channelId}`)}\n                      onKeyDown={(e) => {\n                        if (e.key === 'Enter' || e.key === ' ') {\n                          e.preventDefault();\n                          navigate(`./${conn.channelId}`);\n                        }\n                      }}\n                    >\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"flex items-center gap-4\">\n                          <div className={health.color} aria-label={health.label}>\n                            <HealthIcon className=\"size-5 \" aria-hidden=\"true\" />\n                          </div>\n                          <div>\n                            <p className=\"font-medium\">{conn.channelName}</p>\n                            <p className=\"text-sm text-text-secondary\">\n                              {conn.platform} • {conn.adapterType} • {conn.authType}\n                            </p>\n                          </div>\n                        </div>\n\n                        <div className=\"flex items-center gap-4\">\n                          <div className=\"text-right\">\n                            <p className=\"text-sm\">\n                              {conn.channelStatus === 'ACTIVE' ? (\n                                <span className=\"text-status-success-text\">\n                                  {tr('channel.activeStatus', 'Active')}\n                                </span>\n                              ) : conn.channelStatus === 'INACTIVE' ? (\n                                <span className=\"text-text-secondary\">\n                                  {tr('channel.inactiveStatus', 'Inactive')}\n                                </span>\n                              ) : conn.channelStatus === 'ERROR' ? (\n                                <span className=\"text-status-error-text\">\n                                  {tr('channel.errorStatus', 'Error')}\n                                </span>\n                              ) : conn.channelStatus === 'SUSPENDED' ? (\n                                <span className=\"text-status-warning-text\">\n                                  {tr('channel.suspendedStatus', 'Suspended')}\n                                </span>\n                              ) : conn.channelStatus === 'ARCHIVED' ? (\n                                <span className=\"text-text-secondary\">\n                                  {tr('channel.archivedStatus', 'Archived')}\n                                </span>\n                              ) : (\n                                <span className=\"text-text-secondary\">\n                                  {tr('channel.inactiveStatus', 'Inactive')}\n                                </span>\n                              )}\n                            </p>\n                            {conn.lastTestedAt && (\n                              <p className=\"text-xs text-text-secondary\">\n                                Last tested: {new Date(conn.lastTestedAt).toLocaleDateString()}\n                              </p>\n                            )}\n                          </div>\n\n                          {conn.needsTokenRefresh && (\n                            <span className=\"px-2 py-1 text-xs bg-status-warning-bg-subtle text-status-warning-text rounded\">\n                              Token Expires\n                            </span>\n                          )}\n\n                          {conn.tagAssignments.length > 0 && (\n                            <div className=\"flex flex-wrap gap-1\" aria-label=\"Connection tags\">\n                              {conn.tagAssignments.slice(0, 3).map((a) => (\n                                <TagBadge key={a.id} id={a.tagId} label={a.tagId} size=\"sm\" />\n                              ))}\n                              {conn.tagAssignments.length > 3 && (\n                                <span className=\"text-xs text-text-secondary\">\n                                  +{conn.tagAssignments.length - 3}\n                                </span>\n                              )}\n                            </div>\n                          )}\n\n                          <button\n                            type=\"button\"\n                            onClick={(e) => {\n                              e.stopPropagation();\n                              navigate(`/channels/${conn.channelId}`);\n                            }}\n                            aria-label={tr('channel.viewChannelSettings', 'View channel settings')}\n                            className=\"p-2 hover:bg-bg-sunken rounded-lg transition-colors\"\n                          >\n                            <Settings className=\"size-4 \" />\n                          </button>\n                        </div>\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n              {/* Pagination */}\n              {filteredConnections.length > pageSize && (\n                <div className=\"flex items-center justify-between px-4 py-3 border border-border-subtle rounded-lg mt-3\">\n                  <p className=\"text-sm text-text-secondary\">\n                    {tr('channel.showing', 'Showing')}{' '}\n                    <span className=\"font-medium\">\n                      {currentPage * pageSize + 1}–\n                      {Math.min((currentPage + 1) * pageSize, filteredConnections.length)}\n                    </span>{' '}\n                    {tr('channel.of', 'of')}{' '}\n                    <span className=\"font-medium\">{filteredConnections.length}</span>\n                  </p>\n                  <div className=\"flex items-center gap-2\">\n                    <button\n                      type=\"button\"\n                      onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}\n                      disabled={currentPage === 0}\n                      className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n                    >\n                      {tr('channel.previous', 'Previous')}\n                    </button>\n                    <span className=\"text-sm text-text-secondary\">\n                      {currentPage + 1} / {totalPages}\n                    </span>\n                    <button\n                      type=\"button\"\n                      onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}\n                      disabled={currentPage >= totalPages - 1}\n                      className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n                    >\n                      {tr('channel.next', 'Next')}\n                    </button>\n                  </div>\n                </div>\n              )}\n            </>\n          )}\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

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

@@ -158,16 +158,16 @@ function D() {
 						children: [/* @__PURE__ */ C("button", {
 							type: "button",
 							onClick: () => c(-1),
-							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-surface-hover rounded-lg transition-colors",
+							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-surface-hover rounded-lg transition-colors",
 							children: /* @__PURE__ */ C(s, { size: 20 })
 						}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("h1", {
-							className: "text-xl font-bold text-foreground flex items-center gap-2",
+							className: "text-xl font-bold text-text-primary flex items-center gap-2",
 							children: [/* @__PURE__ */ C(_, {
 								size: 22,
 								className: "text-accent-primary"
 							}), m("channel.createChannel", "Create Channel")]
 						}), /* @__PURE__ */ C("p", {
-							className: "text-sm text-muted-foreground mt-0.5",
+							className: "text-sm text-text-secondary mt-0.5",
 							children: m("channel.createChannelSubtitle", "Set up a new communication channel")
 						})] })]
 					})
@@ -223,14 +223,14 @@ function D() {
 						/* @__PURE__ */ w("div", {
 							className: "grid gap-5 lg:grid-cols-2",
 							children: [/* @__PURE__ */ w("div", {
-								className: "p-5 bg-surface border border-border rounded-lg space-y-4",
+								className: "p-5 bg-surface border border-border-subtle rounded-lg space-y-4",
 								children: [
 									/* @__PURE__ */ C("h2", {
-										className: "text-sm font-semibold text-foreground uppercase tracking-wider",
+										className: "text-sm font-semibold text-text-primary uppercase tracking-wider",
 										children: m("channel.basicInformation", "Basic Information")
 									}),
 									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: [
 											m("channel.name", "Name"),
 											" ",
@@ -247,11 +247,11 @@ function D() {
 											...t,
 											name: e.target.value
 										})),
-										className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 placeholder:text-muted-foreground",
+										className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 placeholder:text-text-secondary",
 										placeholder: m("channel.namePlaceholder", "e.g., Primary Email, SMS Alerts")
 									})] }),
 									/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: m("channel.description", "Description")
 									}), /* @__PURE__ */ C("textarea", {
 										"aria-label": m("channel.descriptionPlaceholder", "Optional description of this channel's purpose"),
@@ -261,20 +261,20 @@ function D() {
 											description: e.target.value
 										})),
 										rows: 3,
-										className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 resize-none placeholder:text-muted-foreground",
+										className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 resize-none placeholder:text-text-secondary",
 										placeholder: m("channel.descriptionPlaceholder", "Optional description of this channel's purpose")
 									})] })
 								]
 							}), /* @__PURE__ */ w("div", {
-								className: "p-5 bg-surface border border-border rounded-lg space-y-4",
+								className: "p-5 bg-surface border border-border-subtle rounded-lg space-y-4",
 								children: [
 									/* @__PURE__ */ C("h2", {
-										className: "text-sm font-semibold text-foreground uppercase tracking-wider",
+										className: "text-sm font-semibold text-text-primary uppercase tracking-wider",
 										children: m("channel.providerStatus", "Provider & Status")
 									}),
 									/* @__PURE__ */ w("div", { children: [
 										/* @__PURE__ */ C("label", {
-											className: "block text-sm font-medium text-foreground mb-1.5",
+											className: "block text-sm font-medium text-text-primary mb-1.5",
 											children: m("channel.providerAdapter", "Provider / Adapter")
 										}),
 										/* @__PURE__ */ w("select", {
@@ -283,7 +283,7 @@ function D() {
 												...t,
 												adapterType: e.target.value
 											})),
-											className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-foreground",
+											className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
 											children: [/* @__PURE__ */ C("option", {
 												value: "",
 												children: m("channel.selectProvider", "Select a provider (optional)")
@@ -293,7 +293,7 @@ function D() {
 											}, e.value))]
 										}),
 										/* @__PURE__ */ C("p", {
-											className: "mt-1 text-[11px] text-muted-foreground",
+											className: "mt-1 text-[11px] text-text-secondary",
 											children: k ? m("channel.providersAvailableForPlatform", `${O.length} providers available for ${k.label}`) : m("channel.selectPlatformFirst", "Select a platform first")
 										})
 									] }),
@@ -301,7 +301,7 @@ function D() {
 										className: "grid gap-4 sm:grid-cols-2",
 										children: [/* @__PURE__ */ w("div", { children: [
 											/* @__PURE__ */ C("label", {
-												className: "block text-sm font-medium text-foreground mb-1.5",
+												className: "block text-sm font-medium text-text-primary mb-1.5",
 												children: m("channel.status", "Status")
 											}),
 											/* @__PURE__ */ w("select", {
@@ -310,7 +310,7 @@ function D() {
 													...t,
 													status: e.target.value
 												})),
-												className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-foreground",
+												className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-text-primary",
 												children: [/* @__PURE__ */ C("option", {
 													value: "ACTIVE",
 													children: m("channel.status.active", "Active")
@@ -320,13 +320,13 @@ function D() {
 												})]
 											}),
 											/* @__PURE__ */ C("p", {
-												className: "mt-1 text-[11px] text-muted-foreground",
+												className: "mt-1 text-[11px] text-text-secondary",
 												children: x.status === "ACTIVE" ? m("channel.statusHint.active", "Ready to send immediately") : m("channel.statusHint.inactive", "Configure before activating")
 											})
 										] }), /* @__PURE__ */ w("div", { children: [
 											/* @__PURE__ */ C("label", {
 												htmlFor: "create-channel-priority",
-												className: "block text-sm font-medium text-foreground mb-1.5",
+												className: "block text-sm font-medium text-text-primary mb-1.5",
 												children: m("channel.priority", "Priority")
 											}),
 											/* @__PURE__ */ C("input", {
@@ -340,10 +340,10 @@ function D() {
 												})),
 												min: 0,
 												max: 100,
-												className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50"
+												className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50"
 											}),
 											/* @__PURE__ */ C("p", {
-												className: "mt-1 text-[11px] text-muted-foreground",
+												className: "mt-1 text-[11px] text-text-secondary",
 												children: m("channel.priorityHint", "Lower = higher priority (0-100)")
 											})
 										] })]
@@ -352,9 +352,9 @@ function D() {
 							})]
 						}),
 						/* @__PURE__ */ w("div", {
-							className: "p-5 bg-surface border border-border rounded-lg space-y-4",
+							className: "p-5 bg-surface border border-border-subtle rounded-lg space-y-4",
 							children: [/* @__PURE__ */ w("h2", {
-								className: "text-sm font-semibold text-foreground uppercase tracking-wider",
+								className: "text-sm font-semibold text-text-primary uppercase tracking-wider",
 								children: [
 									m("channel.platform", "Platform"),
 									" ",
@@ -370,7 +370,7 @@ function D() {
 									return /* @__PURE__ */ w("button", {
 										type: "button",
 										onClick: () => A(e.value),
-										className: `relative flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all text-center ${n ? `${e.color} border-current ring-1 ring-current` : "border-border hover:bg-surface-hover text-muted-foreground hover:text-foreground"}`,
+										className: `relative flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all text-center ${n ? `${e.color} border-current ring-1 ring-current` : "border-border-subtle hover:bg-surface-hover text-text-secondary hover:text-text-primary"}`,
 										children: [
 											n && /* @__PURE__ */ C(l, {
 												size: 14,
@@ -396,12 +396,12 @@ function D() {
 								className: "grid gap-4 lg:grid-cols-2",
 								children: /* @__PURE__ */ w("div", { children: [
 									/* @__PURE__ */ w("label", {
-										className: "block text-sm font-medium text-foreground mb-1.5",
+										className: "block text-sm font-medium text-text-primary mb-1.5",
 										children: [
 											m("channel.platformConfig", "Platform Config"),
 											" ",
 											/* @__PURE__ */ C("span", {
-												className: "text-[10px] text-muted-foreground",
+												className: "text-[10px] text-text-secondary",
 												children: "(JSON)"
 											})
 										]
@@ -414,11 +414,11 @@ function D() {
 											platformConfig: e.target.value
 										})),
 										rows: 3,
-										className: "w-full px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 resize-none font-mono placeholder:text-muted-foreground",
+										className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 resize-none font-mono placeholder:text-text-secondary",
 										placeholder: m("channel.platformConfigPlaceholder", "{\"fromEmail\": \"noreply@example.com\"}")
 									}),
 									/* @__PURE__ */ C("p", {
-										className: "mt-1 text-[11px] text-muted-foreground",
+										className: "mt-1 text-[11px] text-text-secondary",
 										children: m("channel.platformConfigHint", "Platform-specific configuration as JSON")
 									})
 								] })
@@ -429,7 +429,7 @@ function D() {
 							children: [/* @__PURE__ */ C("button", {
 								type: "button",
 								onClick: () => c("/channels/list"),
-								className: "px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-surface-hover border border-border rounded-lg transition-colors",
+								className: "px-4 py-2 text-sm text-text-secondary hover:text-text-primary hover:bg-surface-hover border border-border-subtle rounded-lg transition-colors",
 								children: m("channel.cancel", "Cancel")
 							}), /* @__PURE__ */ w("button", {
 								type: "submit",