@burdenoff/microfe-channel 2026.525.1 → 2026.527.1

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

@@ -31,27 +31,30 @@ function x() {
 	let { t: w } = a(), T = (e, t) => {
 		let n = w(e);
 		return n === e ? t : n;
-	}, [E, D] = i("all"), [O, k] = i("all"), [A, j] = i(0), M = m.filter((e) => e.connection).map((e) => ({
-		channelId: e.id,
-		channelName: e.name,
-		platform: e.platform,
-		adapterType: e.adapterType,
-		channelStatus: e.status,
-		connectionId: e.connection.id,
-		isActive: e.connection.isActive,
-		isHealthy: e.connection.isHealthy,
-		needsTokenRefresh: e.connection.needsTokenRefresh,
-		lastTestedAt: e.connection.lastTestedAt,
-		authType: e.connection.authType,
-		tagAssignments: e.connection.tagAssignments ?? []
-	})), N = [...new Set(M.map((e) => e.platform))], P = M.filter((e) => !(E === "healthy" && !e.isHealthy || E === "unhealthy" && e.isHealthy || O !== "all" && e.platform !== O)), F = Math.max(1, Math.ceil(P.length / 10)), I = P.slice(A * 10, (A + 1) * 10);
+	}, [E, D] = i("all"), [O, k] = i("all"), [A, j] = i(0), M = m.reduce((e, t) => {
+		let n = t.connection;
+		return n && e.push({
+			channelId: t.id,
+			channelName: t.name,
+			platform: t.platform,
+			adapterType: t.adapterType,
+			channelStatus: t.status,
+			connectionId: n.id,
+			isActive: n.isActive,
+			isHealthy: n.isHealthy,
+			needsTokenRefresh: n.needsTokenRefresh,
+			lastTestedAt: n.lastTestedAt,
+			authType: n.authType,
+			tagAssignments: n.tagAssignments ?? []
+		}), e;
+	}, []), N = [...new Set(M.map((e) => e.platform))], P = M.filter((e) => !(E === "healthy" && !e.isHealthy || E === "unhealthy" && e.isHealthy || O !== "all" && e.platform !== O)), F = Math.max(1, Math.ceil(P.length / 10)), I = P.slice(A * 10, (A + 1) * 10);
 	return x ? /* @__PURE__ */ _("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ _(u, { className: "w-8 h-8 animate-spin text-muted-foreground" })
+		children: /* @__PURE__ */ _(u, { className: "size-8 animate-spin text-muted-foreground" })
 	}) : S ? /* @__PURE__ */ v("div", {
 		className: "flex flex-col items-center justify-center min-h-screen gap-4",
 		children: [
-			/* @__PURE__ */ _(o, { className: "w-12 h-12 text-destructive" }),
+			/* @__PURE__ */ _(o, { className: "size-12 text-destructive" }),
 			/* @__PURE__ */ _("h1", {
 				className: "text-xl font-semibold",
 				children: T("channel.loadConnectionsFailed", "Failed to load connections")
@@ -61,6 +64,7 @@ function x() {
 				children: S
 			}),
 			/* @__PURE__ */ _("button", {
+				type: "button",
 				onClick: () => C(),
 				className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90",
 				children: T("channel.retry", "Retry")
@@ -80,10 +84,11 @@ function x() {
 							children: [/* @__PURE__ */ v("div", {
 								className: "flex items-center gap-4",
 								children: [/* @__PURE__ */ _("button", {
+									type: "button",
 									onClick: () => c("./list"),
 									"aria-label": T("channel.backToChannels", "Back to channels"),
 									className: "p-2 hover:bg-muted rounded-lg transition-colors",
-									children: /* @__PURE__ */ _(s, { className: "w-5 h-5" })
+									children: /* @__PURE__ */ _(s, { className: "size-5 " })
 								}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h1", {
 									className: "text-2xl font-bold",
 									children: T("channel.connections", "Connections")
@@ -96,9 +101,10 @@ function x() {
 									]
 								})] })]
 							}), /* @__PURE__ */ v("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",
-								children: [/* @__PURE__ */ _(d, { className: "w-4 h-4" }), T("channel.newChannel", "New Channel")]
+								children: [/* @__PURE__ */ _(d, { className: "size-4 " }), T("channel.newChannel", "New Channel")]
 							})]
 						})
 					})
@@ -140,11 +146,12 @@ function x() {
 								]
 							}),
 							/* @__PURE__ */ _("button", {
+								type: "button",
 								onClick: () => C(),
 								"aria-label": T("channel.refresh", "Refresh"),
 								className: "p-2 hover:bg-muted rounded-lg transition-colors",
 								children: /* @__PURE__ */ _(f, {
-									className: "w-5 h-5",
+									className: "size-5 ",
 									"aria-hidden": "true"
 								})
 							})
@@ -156,7 +163,7 @@ function x() {
 					children: P.length === 0 ? /* @__PURE__ */ v("div", {
 						className: "text-center py-12",
 						children: [
-							/* @__PURE__ */ _(l, { className: "w-12 h-12 mx-auto text-muted-foreground mb-4" }),
+							/* @__PURE__ */ _(l, { className: "size-12 mx-auto text-muted-foreground mb-4" }),
 							/* @__PURE__ */ _("h2", {
 								className: "text-lg font-semibold mb-2",
 								children: T("channel.noConnectionsFound", "No connections found")
@@ -166,10 +173,12 @@ function x() {
 								children: m.length === 0 ? T("channel.createChannelFirst", "Create a channel first to add connections") : T("channel.noConnectionsMatchFilter", "No connections match your filters")
 							}),
 							m.length === 0 ? /* @__PURE__ */ _("button", {
+								type: "button",
 								onClick: () => c("./create"),
 								className: "px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90",
 								children: T("channel.createChannel", "Create Channel")
 							}) : /* @__PURE__ */ _("button", {
+								type: "button",
 								onClick: () => {
 									D("all"), k("all");
 								},
@@ -182,8 +191,13 @@ function x() {
 						children: I.map((e) => {
 							let t = b[String(e.isHealthy)] || b.false, n = t.icon;
 							return /* @__PURE__ */ _("div", {
+								role: "button",
+								tabIndex: 0,
 								className: "p-4 hover:bg-muted/50 transition-colors cursor-pointer",
 								onClick: () => c(`./${e.channelId}`),
+								onKeyDown: (t) => {
+									(t.key === "Enter" || t.key === " ") && (t.preventDefault(), c(`./${e.channelId}`));
+								},
 								children: /* @__PURE__ */ v("div", {
 									className: "flex items-center justify-between",
 									children: [/* @__PURE__ */ v("div", {
@@ -192,7 +206,7 @@ function x() {
 											className: t.color,
 											"aria-label": t.label,
 											children: /* @__PURE__ */ _(n, {
-												className: "w-5 h-5",
+												className: "size-5 ",
 												"aria-hidden": "true"
 											})
 										}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
@@ -256,12 +270,13 @@ function x() {
 												})]
 											}),
 											/* @__PURE__ */ _("button", {
+												type: "button",
 												onClick: (t) => {
 													t.stopPropagation(), c(`/channels/${e.channelId}`);
 												},
 												"aria-label": T("channel.viewChannelSettings", "View channel settings"),
 												className: "p-2 hover:bg-muted rounded-lg transition-colors",
-												children: /* @__PURE__ */ _(p, { className: "w-4 h-4" })
+												children: /* @__PURE__ */ _(p, { className: "size-4 " })
 											})
 										]
 									})]
@@ -295,6 +310,7 @@ function x() {
 							className: "flex items-center gap-2",
 							children: [
 								/* @__PURE__ */ _("button", {
+									type: "button",
 									onClick: () => j((e) => Math.max(0, e - 1)),
 									disabled: A === 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",
@@ -309,6 +325,7 @@ function x() {
 									]
 								}),
 								/* @__PURE__ */ _("button", {
+									type: "button",
 									onClick: () => j((e) => Math.min(F - 1, e + 1)),
 									disabled: A >= F - 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",

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 { 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 { 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\n  const connections = channels\n    .filter((ch) => ch.connection)\n    .map((ch) => ({\n      channelId: ch.id,\n      channelName: ch.name,\n      platform: ch.platform,\n      adapterType: ch.adapterType,\n      channelStatus: ch.status,\n      connectionId: ch.connection!.id,\n      isActive: ch.connection!.isActive,\n      isHealthy: ch.connection!.isHealthy,\n      needsTokenRefresh: ch.connection!.needsTokenRefresh,\n      lastTestedAt: ch.connection!.lastTestedAt,\n      authType: ch.connection!.authType,\n      tagAssignments: ch.connection!.tagAssignments ?? [],\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=\"w-8 h-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=\"w-12 h-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          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\">\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                  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=\"w-5 h-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              <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=\"w-4 h-4\" />\n                {tr('channel.newChannel', 'New Channel')}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Filters */}\n        <div className=\"container mx-auto px-6 py-4\">\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              onClick={() => refetch()}\n              aria-label={tr('channel.refresh', 'Refresh')}\n              className=\"p-2 hover:bg-muted rounded-lg transition-colors\"\n            >\n              <RefreshCw className=\"w-5 h-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=\"w-12 h-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                <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.createChannel', 'Create Channel')}\n                </button>\n              ) : (\n                <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                      className=\"p-4 hover:bg-muted/50 transition-colors cursor-pointer\"\n                      onClick={() => navigate(`./${conn.channelId}`)}\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=\"w-5 h-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                            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=\"w-4 h-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                      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                      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 { 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 { 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\">\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              <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.newChannel', 'New Channel')}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Filters */}\n        <div className=\"container mx-auto px-6 py-4\">\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                <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.createChannel', 'Create Channel')}\n                </button>\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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"}

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

@@ -155,6 +155,7 @@ function E() {
 					children: /* @__PURE__ */ w("div", {
 						className: "flex items-center gap-3",
 						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",
 							children: /* @__PURE__ */ C(s, { size: 20 })
@@ -238,6 +239,7 @@ function E() {
 											})
 										]
 									}), /* @__PURE__ */ C("input", {
+										"aria-label": m("channel.namePlaceholder", "e.g., Primary Email, SMS Alerts"),
 										type: "text",
 										value: D.name,
 										onChange: (e) => O((t) => ({
@@ -251,6 +253,7 @@ function E() {
 										className: "block text-sm font-medium text-foreground mb-1.5",
 										children: m("channel.description", "Description")
 									}), /* @__PURE__ */ C("textarea", {
+										"aria-label": m("channel.descriptionPlaceholder", "Optional description of this channel's purpose"),
 										value: D.description,
 										onChange: (e) => O((t) => ({
 											...t,
@@ -321,10 +324,13 @@ function E() {
 											})
 										] }), /* @__PURE__ */ w("div", { children: [
 											/* @__PURE__ */ C("label", {
+												htmlFor: "create-channel-priority",
 												className: "block text-sm font-medium text-foreground mb-1.5",
 												children: m("channel.priority", "Priority")
 											}),
 											/* @__PURE__ */ C("input", {
+												id: "create-channel-priority",
+												"aria-label": m("channel.priority", "Priority"),
 												type: "number",
 												value: D.priority,
 												onChange: (e) => O((t) => ({
@@ -411,6 +417,7 @@ function E() {
 										]
 									}),
 									/* @__PURE__ */ C("textarea", {
+										"aria-label": m("channel.platformConfig", "Platform Config"),
 										value: D.platformConfig,
 										onChange: (e) => O((t) => ({
 											...t,

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

@@ -1 +1 @@
-{"version":3,"file":"CreateChannelPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/CreateChannelPage.tsx"],"sourcesContent":["/**\n * Create Channel Page\n *\n * Form fields match the exact CreateChannelInput from global-channel-svc:\n *   name (required), platform (required), organizationId (auto), description,\n *   adapterType, status, priority, platformConfig\n *\n * organizationId is injected from shell context — not shown in form.\n * Credentials belong to createConnection mutation — not part of channel creation.\n */\n\nimport { useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Radio,\n  ArrowLeft,\n  Save,\n  Loader2,\n  AlertCircle,\n  Mail,\n  Smartphone,\n  Bell,\n  Inbox,\n  Globe,\n  Hash,\n  Users,\n  MessageCircle,\n  Send,\n  MessageSquare,\n  CheckCircle2,\n} from 'lucide-react';\nimport { useChannel } from '../../../providers/ChannelProvider';\nimport {\n  useChannels,\n  type ChannelPlatform,\n  type AdapterType,\n  type ChannelStatus,\n  type CreateChannelInput,\n} from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\n// ============================================================================\n// PLATFORM CONFIG\n// ============================================================================\n\n// NOTE: AdapterType values MUST match the backend Prisma schema exactly.\n// See: global-channel-svc/prisma/schema/schema.prisma (enum AdapterType)\nconst PLATFORM_OPTIONS: {\n  value: ChannelPlatform;\n  label: string;\n  description: string;\n  icon: typeof Mail;\n  color: string;\n  adapters: { value: AdapterType; label: string }[];\n}[] = [\n  {\n    value: 'EMAIL',\n    label: 'Email',\n    description: 'Send emails via various providers',\n    icon: Mail,\n    color: 'text-accent-blue bg-accent-blue-subtle border-accent-blue-subtle',\n    adapters: [\n      { value: 'AWS_SES', label: 'AWS SES' },\n      { value: 'AZURE_ACS', label: 'Azure Communication Services' },\n    ],\n  },\n  {\n    value: 'SMS',\n    label: 'SMS',\n    description: 'Send text messages',\n    icon: Smartphone,\n    color: 'text-status-success-text bg-status-success-bg-subtle border-status-success-bg-subtle',\n    adapters: [\n      { value: 'AWS_SNS', label: 'AWS SNS' },\n      { value: 'TWILIO_SMS', label: 'Twilio SMS' },\n    ],\n  },\n  {\n    value: 'PUSH',\n    label: 'Push',\n    description: 'Mobile & web push',\n    icon: Bell,\n    color: 'text-accent-purple bg-accent-purple-subtle border-accent-purple-subtle',\n    adapters: [{ value: 'FCM', label: 'Firebase Cloud Messaging' }],\n  },\n  {\n    value: 'INAPP',\n    label: 'In-App',\n    description: 'In-app notifications',\n    icon: Inbox,\n    color: 'text-accent-indigo bg-accent-indigo-subtle border-accent-indigo-subtle',\n    adapters: [{ value: 'INAPP_NATIVE', label: 'Native In-App' }],\n  },\n  {\n    value: 'SLACK',\n    label: 'Slack',\n    description: 'Workspace notifications',\n    icon: Hash,\n    color: 'text-accent-pink bg-accent-pink-subtle border-accent-pink-subtle',\n    adapters: [{ value: 'SLACK_BOT', label: 'Slack Bot' }],\n  },\n  {\n    value: 'TEAMS',\n    label: 'Teams',\n    description: 'Teams notifications',\n    icon: Users,\n    color: 'text-accent-cyan bg-accent-cyan-subtle border-accent-cyan-subtle',\n    adapters: [{ value: 'TEAMS_BOT', label: 'Teams Bot' }],\n  },\n  {\n    value: 'DISCORD',\n    label: 'Discord',\n    description: 'Server notifications',\n    icon: MessageCircle,\n    color: 'text-accent-violet bg-accent-violet-subtle border-accent-violet-subtle',\n    adapters: [{ value: 'DISCORD_BOT', label: 'Discord Bot' }],\n  },\n  {\n    value: 'WHATSAPP',\n    label: 'WhatsApp',\n    description: 'Business messaging',\n    icon: Send,\n    color: 'text-accent-emerald bg-accent-emerald-subtle border-accent-emerald-subtle',\n    adapters: [\n      { value: 'WHATSAPP_CLOUD', label: 'WhatsApp Cloud API' },\n      { value: 'WHATSAPP_TWILIO', label: 'WhatsApp via Twilio' },\n    ],\n  },\n  {\n    value: 'WEBCHAT',\n    label: 'Webchat',\n    description: 'Chat widgets',\n    icon: MessageSquare,\n    color: 'text-accent-teal bg-accent-teal-subtle border-accent-teal-subtle',\n    adapters: [], // No WEBCHAT adapters in backend Prisma schema yet\n  },\n  {\n    value: 'WEBHOOK',\n    label: 'Webhook',\n    description: 'HTTP webhooks',\n    icon: Globe,\n    color: 'text-accent-orange bg-accent-orange-subtle border-accent-orange-subtle',\n    adapters: [{ value: 'WEBHOOK_HTTP', label: 'HTTP Webhook' }],\n  },\n];\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport function CreateChannelPage() {\n  const navigate = useNavigate();\n  const { organizationId } = useChannel();\n  const { createChannel } = useChannels();\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  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [showAdvanced, setShowAdvanced] = useState(false);\n\n  // Form state — matches CreateChannelInput exactly\n  const [formData, setFormData] = useState<{\n    name: string; // required\n    platform: ChannelPlatform; // required\n    description: string; // optional\n    adapterType: AdapterType | ''; // required (auto-selected based on platform)\n    status: ChannelStatus; // optional — default ACTIVE on server\n    priority: number; // optional — default 100 on server\n    platformConfig: string; // optional — JSON string\n  }>({\n    name: '',\n    platform: 'EMAIL',\n    description: '',\n    adapterType: 'AWS_SES', // Default to AWS SES for Email platform\n    status: 'ACTIVE',\n    priority: 100,\n    platformConfig: '',\n  });\n\n  const availableAdapters =\n    PLATFORM_OPTIONS.find((p) => p.value === formData.platform)?.adapters || [];\n\n  const selectedPlatform = PLATFORM_OPTIONS.find((p) => p.value === formData.platform);\n\n  const handlePlatformChange = (platform: ChannelPlatform) => {\n    setFormData((prev) => ({ ...prev, platform, adapterType: '' }));\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    if (!formData.name.trim()) {\n      setError(tr('channel.validation.nameRequired', 'Channel name is required'));\n      return;\n    }\n\n    if (!organizationId) {\n      setError(\n        tr(\n          'channel.validation.organizationRequired',\n          'Organization context is required. Please ensure an organization is selected.'\n        )\n      );\n      return;\n    }\n\n    // Validate platformConfig JSON if provided\n    let parsedPlatformConfig: Record<string, unknown> | undefined;\n    if (formData.platformConfig.trim()) {\n      try {\n        parsedPlatformConfig = JSON.parse(formData.platformConfig);\n      } catch {\n        setError(tr('channel.validation.platformConfigJson', 'Platform Config must be valid JSON'));\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    try {\n      const input: CreateChannelInput = {\n        name: formData.name.trim(),\n        platform: formData.platform,\n        organizationId,\n        description: formData.description.trim() || undefined,\n        adapterType: (formData.adapterType as AdapterType) || undefined,\n        status: formData.status,\n        priority: formData.priority,\n        platformConfig: parsedPlatformConfig,\n      };\n\n      const result = await createChannel(input);\n      if (result) {\n        navigate(`../${result.id}`);\n      } else {\n        setError(tr('channel.createFailed', 'Failed to create channel'));\n      }\n    } catch (err: unknown) {\n      setError(\n        err instanceof Error ? err.message : tr('channel.createFailed', 'Failed to create channel')\n      );\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  // ── Render ────────────────────────────────────────────────────────────\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_CREATE}>\n      <div className=\"p-3 sm:p-6 space-y-6 max-w-5xl mx-auto\">\n        {/* ── Header ───────────────────────────────────────────────────── */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <button\n              onClick={() => navigate(-1)}\n              className=\"p-2 text-muted-foreground hover:text-foreground hover:bg-surface-hover rounded-lg transition-colors\"\n            >\n              <ArrowLeft size={20} />\n            </button>\n            <div>\n              <h1 className=\"text-xl font-bold text-foreground flex items-center gap-2\">\n                <Radio size={22} className=\"text-accent-primary\" />\n                {tr('channel.createChannel', 'Create Channel')}\n              </h1>\n              <p className=\"text-sm text-muted-foreground mt-0.5\">\n                {tr('channel.createChannelSubtitle', 'Set up a new communication channel')}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* ── Error ────────────────────────────────────────────────────── */}\n        {error && (\n          <div className=\"flex items-center gap-3 p-3 bg-error-500/10 border border-status-error-border/30 rounded-lg\">\n            <AlertCircle size={16} className=\"text-status-error-text shrink-0\" />\n            <p className=\"text-sm text-error-400\">{error}</p>\n          </div>\n        )}\n\n        <form onSubmit={handleSubmit} className=\"space-y-6\">\n          {/* ── Row 1: Name + Description | Status + Provider (2-col) ─── */}\n          <div className=\"grid gap-5 lg:grid-cols-2\">\n            {/* Left: Name & Description */}\n            <div className=\"p-5 bg-surface border border-border rounded-lg space-y-4\">\n              <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n                {tr('channel.basicInformation', 'Basic Information')}\n              </h2>\n\n              <div>\n                <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                  {tr('channel.name', 'Name')} <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  type=\"text\"\n                  value={formData.name}\n                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}\n                  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\"\n                  placeholder={tr('channel.namePlaceholder', 'e.g., Primary Email, SMS Alerts')}\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                  {tr('channel.description', 'Description')}\n                </label>\n                <textarea\n                  value={formData.description}\n                  onChange={(e) =>\n                    setFormData((prev) => ({ ...prev, description: e.target.value }))\n                  }\n                  rows={3}\n                  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\"\n                  placeholder={tr(\n                    'channel.descriptionPlaceholder',\n                    \"Optional description of this channel's purpose\"\n                  )}\n                />\n              </div>\n            </div>\n\n            {/* Right: Status + Provider / Adapter */}\n            <div className=\"p-5 bg-surface border border-border rounded-lg space-y-4\">\n              <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n                {tr('channel.providerStatus', 'Provider & Status')}\n              </h2>\n\n              <div>\n                <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                  {tr('channel.providerAdapter', 'Provider / Adapter')}\n                </label>\n                <select\n                  value={formData.adapterType}\n                  onChange={(e) =>\n                    setFormData((prev) => ({\n                      ...prev,\n                      adapterType: e.target.value as AdapterType | '',\n                    }))\n                  }\n                  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\"\n                >\n                  <option value=\"\">\n                    {tr('channel.selectProvider', 'Select a provider (optional)')}\n                  </option>\n                  {availableAdapters.map((a) => (\n                    <option key={a.value} value={a.value}>\n                      {a.label}\n                    </option>\n                  ))}\n                </select>\n                <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                  {selectedPlatform\n                    ? tr(\n                        'channel.providersAvailableForPlatform',\n                        `${availableAdapters.length} providers available for ${selectedPlatform.label}`\n                      )\n                    : tr('channel.selectPlatformFirst', 'Select a platform first')}\n                </p>\n              </div>\n\n              <div className=\"grid gap-4 sm:grid-cols-2\">\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    {tr('channel.status', 'Status')}\n                  </label>\n                  <select\n                    value={formData.status}\n                    onChange={(e) =>\n                      setFormData((prev) => ({ ...prev, status: e.target.value as ChannelStatus }))\n                    }\n                    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\"\n                  >\n                    <option value=\"ACTIVE\">{tr('channel.status.active', 'Active')}</option>\n                    <option value=\"INACTIVE\">{tr('channel.status.inactive', 'Inactive')}</option>\n                  </select>\n                  <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                    {formData.status === 'ACTIVE'\n                      ? tr('channel.statusHint.active', 'Ready to send immediately')\n                      : tr('channel.statusHint.inactive', 'Configure before activating')}\n                  </p>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    {tr('channel.priority', 'Priority')}\n                  </label>\n                  <input\n                    type=\"number\"\n                    value={formData.priority}\n                    onChange={(e) =>\n                      setFormData((prev) => ({\n                        ...prev,\n                        priority: parseInt(e.target.value) || 0,\n                      }))\n                    }\n                    min={0}\n                    max={100}\n                    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\"\n                  />\n                  <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                    {tr('channel.priorityHint', 'Lower = higher priority (0-100)')}\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* ── Row 2: Platform selection (full width) ─────────────────── */}\n          <div className=\"p-5 bg-surface border border-border rounded-lg space-y-4\">\n            <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n              {tr('channel.platform', 'Platform')} <span className=\"text-status-error-text\">*</span>\n            </h2>\n\n            <div className=\"grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-5\">\n              {PLATFORM_OPTIONS.map((platform) => {\n                const Icon = platform.icon;\n                const isSelected = formData.platform === platform.value;\n                return (\n                  <button\n                    key={platform.value}\n                    type=\"button\"\n                    onClick={() => handlePlatformChange(platform.value)}\n                    className={`relative flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all text-center ${\n                      isSelected\n                        ? `${platform.color} border-current ring-1 ring-current`\n                        : 'border-border hover:bg-surface-hover text-muted-foreground hover:text-foreground'\n                    }`}\n                  >\n                    {isSelected && (\n                      <CheckCircle2 size={14} className=\"absolute top-1.5 right-1.5 text-current\" />\n                    )}\n                    <Icon size={20} />\n                    <span className=\"text-xs font-semibold\">{platform.label}</span>\n                    <span className=\"text-[10px] leading-tight opacity-70\">\n                      {platform.description}\n                    </span>\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* ── Row 3: Advanced (collapsible) — platformConfig */}\n          <div className=\"p-5 bg-surface border border-border rounded-lg\">\n            <button\n              type=\"button\"\n              onClick={() => setShowAdvanced(!showAdvanced)}\n              className=\"w-full flex items-center justify-between text-left\"\n            >\n              <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n                {tr('channel.advancedOptions', 'Advanced Options')}\n              </h2>\n              <span className=\"text-xs text-muted-foreground\">\n                {showAdvanced ? tr('channel.hide', 'Hide') : tr('channel.show', 'Show')}\n              </span>\n            </button>\n\n            {showAdvanced && (\n              <div className=\"mt-4 grid gap-4 lg:grid-cols-2\">\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    {tr('channel.platformConfig', 'Platform Config')}{' '}\n                    <span className=\"text-[10px] text-muted-foreground\">(JSON)</span>\n                  </label>\n                  <textarea\n                    value={formData.platformConfig}\n                    onChange={(e) =>\n                      setFormData((prev) => ({ ...prev, platformConfig: e.target.value }))\n                    }\n                    rows={3}\n                    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\"\n                    placeholder={tr(\n                      'channel.platformConfigPlaceholder',\n                      '{\"fromEmail\": \"noreply@example.com\"}'\n                    )}\n                  />\n                  <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                    {tr('channel.platformConfigHint', 'Platform-specific configuration as JSON')}\n                  </p>\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* ── Actions ────────────────────────────────────────────────── */}\n          <div className=\"flex items-center justify-between pt-2\">\n            <button\n              type=\"button\"\n              onClick={() => navigate('/channels/list')}\n              className=\"px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-surface-hover border border-border rounded-lg transition-colors\"\n            >\n              {tr('channel.cancel', 'Cancel')}\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting || !formData.name.trim()}\n              className=\"inline-flex items-center gap-2 px-5 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              {isSubmitting ? <Loader2 size={16} className=\"animate-spin\" /> : <Save size={16} />}\n              {tr('channel.createChannel', 'Create Channel')}\n            </button>\n          </div>\n        </form>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CreateChannelPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/CreateChannelPage.tsx"],"sourcesContent":["/**\n * Create Channel Page\n *\n * Form fields match the exact CreateChannelInput from global-channel-svc:\n *   name (required), platform (required), organizationId (auto), description,\n *   adapterType, status, priority, platformConfig\n *\n * organizationId is injected from shell context — not shown in form.\n * Credentials belong to createConnection mutation — not part of channel creation.\n */\n\nimport { useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Radio,\n  ArrowLeft,\n  Save,\n  Loader2,\n  AlertCircle,\n  Mail,\n  Smartphone,\n  Bell,\n  Inbox,\n  Globe,\n  Hash,\n  Users,\n  MessageCircle,\n  Send,\n  MessageSquare,\n  CheckCircle2,\n} from 'lucide-react';\nimport { useChannel } from '../../../providers/ChannelProvider';\nimport {\n  useChannels,\n  type ChannelPlatform,\n  type AdapterType,\n  type ChannelStatus,\n  type CreateChannelInput,\n} from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\n// ============================================================================\n// PLATFORM CONFIG\n// ============================================================================\n\n// NOTE: AdapterType values MUST match the backend Prisma schema exactly.\n// See: global-channel-svc/prisma/schema/schema.prisma (enum AdapterType)\nconst PLATFORM_OPTIONS: {\n  value: ChannelPlatform;\n  label: string;\n  description: string;\n  icon: typeof Mail;\n  color: string;\n  adapters: { value: AdapterType; label: string }[];\n}[] = [\n  {\n    value: 'EMAIL',\n    label: 'Email',\n    description: 'Send emails via various providers',\n    icon: Mail,\n    color: 'text-accent-blue bg-accent-blue-subtle border-accent-blue-subtle',\n    adapters: [\n      { value: 'AWS_SES', label: 'AWS SES' },\n      { value: 'AZURE_ACS', label: 'Azure Communication Services' },\n    ],\n  },\n  {\n    value: 'SMS',\n    label: 'SMS',\n    description: 'Send text messages',\n    icon: Smartphone,\n    color: 'text-status-success-text bg-status-success-bg-subtle border-status-success-bg-subtle',\n    adapters: [\n      { value: 'AWS_SNS', label: 'AWS SNS' },\n      { value: 'TWILIO_SMS', label: 'Twilio SMS' },\n    ],\n  },\n  {\n    value: 'PUSH',\n    label: 'Push',\n    description: 'Mobile & web push',\n    icon: Bell,\n    color: 'text-accent-purple bg-accent-purple-subtle border-accent-purple-subtle',\n    adapters: [{ value: 'FCM', label: 'Firebase Cloud Messaging' }],\n  },\n  {\n    value: 'INAPP',\n    label: 'In-App',\n    description: 'In-app notifications',\n    icon: Inbox,\n    color: 'text-accent-indigo bg-accent-indigo-subtle border-accent-indigo-subtle',\n    adapters: [{ value: 'INAPP_NATIVE', label: 'Native In-App' }],\n  },\n  {\n    value: 'SLACK',\n    label: 'Slack',\n    description: 'Workspace notifications',\n    icon: Hash,\n    color: 'text-accent-pink bg-accent-pink-subtle border-accent-pink-subtle',\n    adapters: [{ value: 'SLACK_BOT', label: 'Slack Bot' }],\n  },\n  {\n    value: 'TEAMS',\n    label: 'Teams',\n    description: 'Teams notifications',\n    icon: Users,\n    color: 'text-accent-cyan bg-accent-cyan-subtle border-accent-cyan-subtle',\n    adapters: [{ value: 'TEAMS_BOT', label: 'Teams Bot' }],\n  },\n  {\n    value: 'DISCORD',\n    label: 'Discord',\n    description: 'Server notifications',\n    icon: MessageCircle,\n    color: 'text-accent-violet bg-accent-violet-subtle border-accent-violet-subtle',\n    adapters: [{ value: 'DISCORD_BOT', label: 'Discord Bot' }],\n  },\n  {\n    value: 'WHATSAPP',\n    label: 'WhatsApp',\n    description: 'Business messaging',\n    icon: Send,\n    color: 'text-accent-emerald bg-accent-emerald-subtle border-accent-emerald-subtle',\n    adapters: [\n      { value: 'WHATSAPP_CLOUD', label: 'WhatsApp Cloud API' },\n      { value: 'WHATSAPP_TWILIO', label: 'WhatsApp via Twilio' },\n    ],\n  },\n  {\n    value: 'WEBCHAT',\n    label: 'Webchat',\n    description: 'Chat widgets',\n    icon: MessageSquare,\n    color: 'text-accent-teal bg-accent-teal-subtle border-accent-teal-subtle',\n    adapters: [], // No WEBCHAT adapters in backend Prisma schema yet\n  },\n  {\n    value: 'WEBHOOK',\n    label: 'Webhook',\n    description: 'HTTP webhooks',\n    icon: Globe,\n    color: 'text-accent-orange bg-accent-orange-subtle border-accent-orange-subtle',\n    adapters: [{ value: 'WEBHOOK_HTTP', label: 'HTTP Webhook' }],\n  },\n];\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport function CreateChannelPage() {\n  const navigate = useNavigate();\n  const { organizationId } = useChannel();\n  const { createChannel } = useChannels();\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  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [showAdvanced, setShowAdvanced] = useState(false);\n\n  // Form state — matches CreateChannelInput exactly\n  const [formData, setFormData] = useState<{\n    name: string; // required\n    platform: ChannelPlatform; // required\n    description: string; // optional\n    adapterType: AdapterType | ''; // required (auto-selected based on platform)\n    status: ChannelStatus; // optional — default ACTIVE on server\n    priority: number; // optional — default 100 on server\n    platformConfig: string; // optional — JSON string\n  }>({\n    name: '',\n    platform: 'EMAIL',\n    description: '',\n    adapterType: 'AWS_SES', // Default to AWS SES for Email platform\n    status: 'ACTIVE',\n    priority: 100,\n    platformConfig: '',\n  });\n\n  const availableAdapters =\n    PLATFORM_OPTIONS.find((p) => p.value === formData.platform)?.adapters || [];\n\n  const selectedPlatform = PLATFORM_OPTIONS.find((p) => p.value === formData.platform);\n\n  const handlePlatformChange = (platform: ChannelPlatform) => {\n    setFormData((prev) => ({ ...prev, platform, adapterType: '' }));\n  };\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    if (!formData.name.trim()) {\n      setError(tr('channel.validation.nameRequired', 'Channel name is required'));\n      return;\n    }\n\n    if (!organizationId) {\n      setError(\n        tr(\n          'channel.validation.organizationRequired',\n          'Organization context is required. Please ensure an organization is selected.'\n        )\n      );\n      return;\n    }\n\n    // Validate platformConfig JSON if provided\n    let parsedPlatformConfig: Record<string, unknown> | undefined;\n    if (formData.platformConfig.trim()) {\n      try {\n        parsedPlatformConfig = JSON.parse(formData.platformConfig);\n      } catch {\n        setError(tr('channel.validation.platformConfigJson', 'Platform Config must be valid JSON'));\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    try {\n      const input: CreateChannelInput = {\n        name: formData.name.trim(),\n        platform: formData.platform,\n        organizationId,\n        description: formData.description.trim() || undefined,\n        adapterType: (formData.adapterType as AdapterType) || undefined,\n        status: formData.status,\n        priority: formData.priority,\n        platformConfig: parsedPlatformConfig,\n      };\n\n      const result = await createChannel(input);\n      if (result) {\n        navigate(`../${result.id}`);\n      } else {\n        setError(tr('channel.createFailed', 'Failed to create channel'));\n      }\n    } catch (err: unknown) {\n      setError(\n        err instanceof Error ? err.message : tr('channel.createFailed', 'Failed to create channel')\n      );\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  // ── Render ────────────────────────────────────────────────────────────\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_CREATE}>\n      <div className=\"p-3 sm:p-6 space-y-6 max-w-5xl mx-auto\">\n        {/* ── Header ───────────────────────────────────────────────────── */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <button\n              type=\"button\"\n              onClick={() => navigate(-1)}\n              className=\"p-2 text-muted-foreground hover:text-foreground hover:bg-surface-hover rounded-lg transition-colors\"\n            >\n              <ArrowLeft size={20} />\n            </button>\n            <div>\n              <h1 className=\"text-xl font-bold text-foreground flex items-center gap-2\">\n                <Radio size={22} className=\"text-accent-primary\" />\n                {tr('channel.createChannel', 'Create Channel')}\n              </h1>\n              <p className=\"text-sm text-muted-foreground mt-0.5\">\n                {tr('channel.createChannelSubtitle', 'Set up a new communication channel')}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* ── Error ────────────────────────────────────────────────────── */}\n        {error && (\n          <div className=\"flex items-center gap-3 p-3 bg-error-500/10 border border-status-error-border/30 rounded-lg\">\n            <AlertCircle size={16} className=\"text-status-error-text shrink-0\" />\n            <p className=\"text-sm text-error-400\">{error}</p>\n          </div>\n        )}\n\n        <form onSubmit={handleSubmit} className=\"space-y-6\">\n          {/* ── Row 1: Name + Description | Status + Provider (2-col) ─── */}\n          <div className=\"grid gap-5 lg:grid-cols-2\">\n            {/* Left: Name & Description */}\n            <div className=\"p-5 bg-surface border border-border rounded-lg space-y-4\">\n              <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n                {tr('channel.basicInformation', 'Basic Information')}\n              </h2>\n\n              <div>\n                <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                  {tr('channel.name', 'Name')} <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  aria-label={tr('channel.namePlaceholder', 'e.g., Primary Email, SMS Alerts')}\n                  type=\"text\"\n                  value={formData.name}\n                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}\n                  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\"\n                  placeholder={tr('channel.namePlaceholder', 'e.g., Primary Email, SMS Alerts')}\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                  {tr('channel.description', 'Description')}\n                </label>\n                <textarea\n                  aria-label={tr(\n                    'channel.descriptionPlaceholder',\n                    \"Optional description of this channel's purpose\"\n                  )}\n                  value={formData.description}\n                  onChange={(e) =>\n                    setFormData((prev) => ({ ...prev, description: e.target.value }))\n                  }\n                  rows={3}\n                  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\"\n                  placeholder={tr(\n                    'channel.descriptionPlaceholder',\n                    \"Optional description of this channel's purpose\"\n                  )}\n                />\n              </div>\n            </div>\n\n            {/* Right: Status + Provider / Adapter */}\n            <div className=\"p-5 bg-surface border border-border rounded-lg space-y-4\">\n              <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n                {tr('channel.providerStatus', 'Provider & Status')}\n              </h2>\n\n              <div>\n                <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                  {tr('channel.providerAdapter', 'Provider / Adapter')}\n                </label>\n                <select\n                  value={formData.adapterType}\n                  onChange={(e) =>\n                    setFormData((prev) => ({\n                      ...prev,\n                      adapterType: e.target.value as AdapterType | '',\n                    }))\n                  }\n                  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\"\n                >\n                  <option value=\"\">\n                    {tr('channel.selectProvider', 'Select a provider (optional)')}\n                  </option>\n                  {availableAdapters.map((a) => (\n                    <option key={a.value} value={a.value}>\n                      {a.label}\n                    </option>\n                  ))}\n                </select>\n                <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                  {selectedPlatform\n                    ? tr(\n                        'channel.providersAvailableForPlatform',\n                        `${availableAdapters.length} providers available for ${selectedPlatform.label}`\n                      )\n                    : tr('channel.selectPlatformFirst', 'Select a platform first')}\n                </p>\n              </div>\n\n              <div className=\"grid gap-4 sm:grid-cols-2\">\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    {tr('channel.status', 'Status')}\n                  </label>\n                  <select\n                    value={formData.status}\n                    onChange={(e) =>\n                      setFormData((prev) => ({ ...prev, status: e.target.value as ChannelStatus }))\n                    }\n                    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\"\n                  >\n                    <option value=\"ACTIVE\">{tr('channel.status.active', 'Active')}</option>\n                    <option value=\"INACTIVE\">{tr('channel.status.inactive', 'Inactive')}</option>\n                  </select>\n                  <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                    {formData.status === 'ACTIVE'\n                      ? tr('channel.statusHint.active', 'Ready to send immediately')\n                      : tr('channel.statusHint.inactive', 'Configure before activating')}\n                  </p>\n                </div>\n\n                <div>\n                  <label\n                    htmlFor=\"create-channel-priority\"\n                    className=\"block text-sm font-medium text-foreground mb-1.5\"\n                  >\n                    {tr('channel.priority', 'Priority')}\n                  </label>\n                  <input\n                    id=\"create-channel-priority\"\n                    aria-label={tr('channel.priority', 'Priority')}\n                    type=\"number\"\n                    value={formData.priority}\n                    onChange={(e) =>\n                      setFormData((prev) => ({\n                        ...prev,\n                        priority: parseInt(e.target.value) || 0,\n                      }))\n                    }\n                    min={0}\n                    max={100}\n                    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\"\n                  />\n                  <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                    {tr('channel.priorityHint', 'Lower = higher priority (0-100)')}\n                  </p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* ── Row 2: Platform selection (full width) ─────────────────── */}\n          <div className=\"p-5 bg-surface border border-border rounded-lg space-y-4\">\n            <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n              {tr('channel.platform', 'Platform')} <span className=\"text-status-error-text\">*</span>\n            </h2>\n\n            <div className=\"grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-5\">\n              {PLATFORM_OPTIONS.map((platform) => {\n                const Icon = platform.icon;\n                const isSelected = formData.platform === platform.value;\n                return (\n                  <button\n                    key={platform.value}\n                    type=\"button\"\n                    onClick={() => handlePlatformChange(platform.value)}\n                    className={`relative flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all text-center ${\n                      isSelected\n                        ? `${platform.color} border-current ring-1 ring-current`\n                        : 'border-border hover:bg-surface-hover text-muted-foreground hover:text-foreground'\n                    }`}\n                  >\n                    {isSelected && (\n                      <CheckCircle2 size={14} className=\"absolute top-1.5 right-1.5 text-current\" />\n                    )}\n                    <Icon size={20} />\n                    <span className=\"text-xs font-semibold\">{platform.label}</span>\n                    <span className=\"text-[10px] leading-tight opacity-70\">\n                      {platform.description}\n                    </span>\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* ── Row 3: Advanced (collapsible) — platformConfig */}\n          <div className=\"p-5 bg-surface border border-border rounded-lg\">\n            <button\n              type=\"button\"\n              onClick={() => setShowAdvanced(!showAdvanced)}\n              className=\"w-full flex items-center justify-between text-left\"\n            >\n              <h2 className=\"text-sm font-semibold text-foreground uppercase tracking-wider\">\n                {tr('channel.advancedOptions', 'Advanced Options')}\n              </h2>\n              <span className=\"text-xs text-muted-foreground\">\n                {showAdvanced ? tr('channel.hide', 'Hide') : tr('channel.show', 'Show')}\n              </span>\n            </button>\n\n            {showAdvanced && (\n              <div className=\"mt-4 grid gap-4 lg:grid-cols-2\">\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    {tr('channel.platformConfig', 'Platform Config')}{' '}\n                    <span className=\"text-[10px] text-muted-foreground\">(JSON)</span>\n                  </label>\n                  <textarea\n                    aria-label={tr('channel.platformConfig', 'Platform Config')}\n                    value={formData.platformConfig}\n                    onChange={(e) =>\n                      setFormData((prev) => ({ ...prev, platformConfig: e.target.value }))\n                    }\n                    rows={3}\n                    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\"\n                    placeholder={tr(\n                      'channel.platformConfigPlaceholder',\n                      '{\"fromEmail\": \"noreply@example.com\"}'\n                    )}\n                  />\n                  <p className=\"mt-1 text-[11px] text-muted-foreground\">\n                    {tr('channel.platformConfigHint', 'Platform-specific configuration as JSON')}\n                  </p>\n                </div>\n              </div>\n            )}\n          </div>\n\n          {/* ── Actions ────────────────────────────────────────────────── */}\n          <div className=\"flex items-center justify-between pt-2\">\n            <button\n              type=\"button\"\n              onClick={() => navigate('/channels/list')}\n              className=\"px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-surface-hover border border-border rounded-lg transition-colors\"\n            >\n              {tr('channel.cancel', 'Cancel')}\n            </button>\n            <button\n              type=\"submit\"\n              disabled={isSubmitting || !formData.name.trim()}\n              className=\"inline-flex items-center gap-2 px-5 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              {isSubmitting ? <Loader2 size={16} className=\"animate-spin\" /> : <Save size={16} />}\n              {tr('channel.createChannel', 'Create Channel')}\n            </button>\n          </div>\n        </form>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

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

@@ -46,13 +46,14 @@ function y() {
 			className: "container mx-auto p-6 max-w-2xl",
 			children: [
 				/* @__PURE__ */ _("button", {
+					type: "button",
 					onClick: () => y(-1),
 					className: "flex items-center gap-2 text-fg-muted hover:text-fg mb-6",
-					children: [/* @__PURE__ */ g(l, { className: "w-4 h-4" }), T("common.back", "Back")]
+					children: [/* @__PURE__ */ g(l, { className: "size-4 " }), T("common.back", "Back")]
 				}),
 				/* @__PURE__ */ _("div", {
 					className: "flex items-center gap-3 mb-6",
-					children: [/* @__PURE__ */ g(f, { className: "w-7 h-7 text-accent-blue" }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
+					children: [/* @__PURE__ */ g(f, { className: "size-7 text-accent-blue" }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
 						className: "text-2xl font-bold text-fg",
 						children: T("connection.create.title", "Create Connection")
 					}), /* @__PURE__ */ g("p", {
@@ -62,7 +63,7 @@ function y() {
 				}),
 				V && /* @__PURE__ */ _("div", {
 					className: "bg-status-error-bg-subtle border border-status-error-bg-subtle rounded-lg p-4 mb-6 flex gap-3",
-					children: [/* @__PURE__ */ g(c, { className: "w-5 h-5 text-status-error-text shrink-0" }), /* @__PURE__ */ g("p", {
+					children: [/* @__PURE__ */ g(c, { className: "size-5 text-status-error-text shrink-0" }), /* @__PURE__ */ g("p", {
 						className: "text-sm text-status-error-text",
 						children: V
 					})]
@@ -143,33 +144,42 @@ function y() {
 								value: e.value,
 								children: [
 									e.label,
-									" — ",
+									": ",
 									e.help
 								]
 							}, e.value))
 						})] }),
 						k === "OAUTH2" && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							htmlFor: "create-conn-auth-code",
 							className: "block text-sm font-medium text-fg mb-2",
 							children: T("connection.field.authCode", "OAuth Authorization Code")
 						}), /* @__PURE__ */ g("input", {
+							id: "create-conn-auth-code",
+							"aria-label": T("connection.field.authCode", "OAuth Authorization Code"),
 							type: "text",
 							value: j,
 							onChange: (e) => M(e.target.value),
 							className: "w-full px-3 py-2 bg-bg border border-border rounded-md text-fg",
 							autoComplete: "off"
 						})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							htmlFor: "create-conn-redirect-uri",
 							className: "block text-sm font-medium text-fg mb-2",
 							children: T("connection.field.redirectUri", "Redirect URI")
 						}), /* @__PURE__ */ g("input", {
+							id: "create-conn-redirect-uri",
+							"aria-label": T("connection.field.redirectUri", "Redirect URI"),
 							type: "url",
 							value: F,
 							onChange: (e) => I(e.target.value),
 							className: "w-full px-3 py-2 bg-bg border border-border rounded-md text-fg"
 						})] })] }),
 						(k === "API_KEY" || k === "BOT_TOKEN") && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							htmlFor: "create-conn-api-key",
 							className: "block text-sm font-medium text-fg mb-2",
 							children: T("connection.field.apiKey", "API Key / Token")
 						}), /* @__PURE__ */ g("input", {
+							id: "create-conn-api-key",
+							"aria-label": T("connection.field.apiKey", "API Key / Token"),
 							type: "password",
 							value: N,
 							onChange: (e) => P(e.target.value),
@@ -182,6 +192,7 @@ function y() {
 								children: T("connection.field.credentials", "Additional Credentials (JSON)")
 							}),
 							/* @__PURE__ */ g("textarea", {
+								"aria-label": "{\"smtpHost\": \"smtp.example.com\"}",
 								value: L,
 								onChange: (e) => R(e.target.value),
 								rows: 6,
@@ -199,7 +210,7 @@ function y() {
 								type: "submit",
 								disabled: z || !E,
 								className: "flex items-center gap-2 px-4 py-2 bg-accent-blue text-fg-on-accent rounded-md disabled:opacity-50",
-								children: [z ? /* @__PURE__ */ g(u, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ g(d, { className: "w-4 h-4" }), T("connection.create.submit", "Create Connection")]
+								children: [z ? /* @__PURE__ */ g(u, { className: "size-4 animate-spin" }) : /* @__PURE__ */ g(d, { className: "size-4 " }), T("connection.create.submit", "Create Connection")]
 							}), /* @__PURE__ */ g("button", {
 								type: "button",
 								onClick: () => y(-1),