@burdenoff/microfe-botmanor 2026.821.1 → 2026.925.1

package/dist/botlit/pages/ChannelsPage.js

@@ -1,292 +1,299 @@
-import { useBotlit as e } from "../providers/BotlitProvider.js";
-import { formatRelativeTime as t } from "../utils/formatters.js";
-import { PageLayout as n } from "../components/PageLayout.js";
-import { Card as r, CardContent as i, CardDescription as a, CardHeader as o, CardTitle as s } from "../components/Card.js";
-import { Button as c } from "../components/Button.js";
-import { Badge as l, StatusBadge as u } from "../components/Badge.js";
-import { EmptyState as d } from "../components/EmptyState.js";
-import { Input as f } from "../components/Input.js";
-import { ErrorState as p } from "../components/ErrorState.js";
-import { routeMetadataString as m, useChannelConnectors as h, useChannelRoutes as g } from "../hooks/useChannels.js";
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useBotlit as t } from "../providers/BotlitProvider.js";
+import { formatRelativeTime as n } from "../utils/formatters.js";
+import { PageLayout as r } from "../components/PageLayout.js";
+import { Card as i, CardContent as a, CardDescription as o, CardHeader as s, CardTitle as c } from "../components/Card.js";
+import { Button as l } from "../components/Button.js";
+import { Badge as u, StatusBadge as d } from "../components/Badge.js";
+import { EmptyState as f } from "../components/EmptyState.js";
+import { Input as p } from "../components/Input.js";
+import { ErrorState as m } from "../components/ErrorState.js";
+import { routeMetadataString as h, useChannelConnectors as g, useChannelRoutes as _ } from "../hooks/useChannels.js";
 import "../hooks/index.js";
-import { useMemo as _, useState as v } from "react";
-import { GlassCard as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { Link as w } from "react-router";
-import { ArrowRight as T, Filter as E, Globe as D, Hash as O, MessageSquare as k, Plus as A, Search as j, Settings as M, Slack as N, Webhook as P } from "lucide-react";
+import { useMemo as v, useState as y } from "react";
+import { GlassCard as b, PagePurpose as x } from "@burdenoff/fe-libs/ui";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { Link as T } from "react-router";
+import { ArrowRight as E, Filter as D, Globe as O, Hash as k, MessageSquare as A, Plus as j, Search as M, Settings as N, Slack as P, Webhook as F } from "lucide-react";
 //#region src/botlit/pages/ChannelsPage.tsx
-var F = ({ type: e, className: t }) => {
+var I = ({ type: e, className: t }) => {
 	switch (e) {
-		case "SLACK": return /* @__PURE__ */ S(N, { className: t });
-		case "DISCORD": return /* @__PURE__ */ S(O, { className: t });
-		case "TEAMS": return /* @__PURE__ */ S(k, { className: t });
-		case "WEB_WIDGET": return /* @__PURE__ */ S(D, { className: t });
-		case "WEBHOOK": return /* @__PURE__ */ S(P, { className: t });
-		default: return /* @__PURE__ */ S(k, { className: t });
+		case "SLACK": return /* @__PURE__ */ C(P, { className: t });
+		case "DISCORD": return /* @__PURE__ */ C(k, { className: t });
+		case "TEAMS": return /* @__PURE__ */ C(A, { className: t });
+		case "WEB_WIDGET": return /* @__PURE__ */ C(O, { className: t });
+		case "WEBHOOK": return /* @__PURE__ */ C(F, { className: t });
+		default: return /* @__PURE__ */ C(A, { className: t });
 	}
-}, I = () => {
-	let { getPath: D } = e(), [O, N] = v(""), [P, I] = v("connectors"), { data: L, loading: R, error: z, refetch: B } = h(_(() => ({ search: O }), [O])), { data: V, loading: H, error: U, refetch: W } = g(), G = _(() => {
+}, L = () => {
+	let O = e(), { getPath: k } = t(), [P, F] = y(""), [L, R] = y("connectors"), { data: z, loading: B, error: V, refetch: H } = g(v(() => ({ search: P }), [P])), { data: U, loading: W, error: G, refetch: K } = _(), q = v(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of V) e.set(t.connectorId, (e.get(t.connectorId) ?? 0) + 1);
+		for (let t of U) e.set(t.connectorId, (e.get(t.connectorId) ?? 0) + 1);
 		return e;
-	}, [V]);
-	return /* @__PURE__ */ S(n, {
-		title: "Channels",
-		description: "Connect agents to messaging platforms and configure routing",
-		actions: /* @__PURE__ */ C("div", {
+	}, [U]);
+	return /* @__PURE__ */ C(r, {
+		title: O("botlit.channels.title", "Channels"),
+		description: O("botlit.channels.description", "Connect agents to messaging platforms and configure routing"),
+		actions: /* @__PURE__ */ w("div", {
 			className: "flex gap-2",
-			children: [/* @__PURE__ */ S(c, {
+			children: [/* @__PURE__ */ C(l, {
 				variant: "outline",
-				children: /* @__PURE__ */ S(w, {
-					to: D("channels/routes"),
-					children: "View Routes"
+				children: /* @__PURE__ */ C(T, {
+					to: k("channels/routes"),
+					children: O("botlit.channels.actions.viewRoutes", "View Routes")
 				})
-			}), /* @__PURE__ */ S(c, {
-				leftIcon: /* @__PURE__ */ S(A, { size: 16 }),
-				children: /* @__PURE__ */ S(w, {
-					to: D("channels/new"),
-					children: "Add Channel"
+			}), /* @__PURE__ */ C(l, {
+				leftIcon: /* @__PURE__ */ C(j, { size: 16 }),
+				children: /* @__PURE__ */ C(T, {
+					to: k("channels/new"),
+					children: O("botlit.channels.actions.addChannel", "Add Channel")
 				})
 			})]
 		}),
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "space-y-6",
 			children: [
-				/* @__PURE__ */ S(b, {
-					icon: /* @__PURE__ */ S(k, { size: 18 }),
-					children: "Channels are where your bots actually talk to people. Connect a messaging platform — a website chat widget, Slack, Microsoft Teams, Discord, WhatsApp or a custom webhook — then add a route that points an incoming location at the bot that should answer. Use this page to manage those connectors and routing rules in one place."
+				/* @__PURE__ */ C(x, {
+					icon: /* @__PURE__ */ C(A, { size: 18 }),
+					children: O("botlit.channels.purpose", "Channels are where your bots actually talk to people. Connect a messaging platform — a website chat widget, Slack, Microsoft Teams, Discord, WhatsApp or a custom webhook — then add a route that points an incoming location at the bot that should answer. Use this page to manage those connectors and routing rules in one place.")
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ w("div", {
 					className: "flex gap-1 border-b border-border-subtle",
-					children: [/* @__PURE__ */ C("button", {
-						onClick: () => I("connectors"),
-						className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${P === "connectors" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+					children: [/* @__PURE__ */ w("button", {
+						onClick: () => R("connectors"),
+						className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${L === "connectors" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
 						children: [
-							"Connectors (",
-							L.length,
+							O("botlit.channels.tabs.connectors", "Connectors"),
+							" (",
+							z.length,
 							")"
 						]
-					}), /* @__PURE__ */ C("button", {
-						onClick: () => I("routes"),
-						className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${P === "routes" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+					}), /* @__PURE__ */ w("button", {
+						onClick: () => R("routes"),
+						className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${L === "routes" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
 						children: [
-							"Routes (",
-							V.length,
+							O("botlit.channels.tabs.routes", "Routes"),
+							" (",
+							U.length,
 							")"
 						]
 					})]
 				}),
-				/* @__PURE__ */ C("div", {
+				/* @__PURE__ */ w("div", {
 					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ w("div", {
 						className: "relative flex-1 max-w-md",
-						children: [/* @__PURE__ */ S(j, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ S(f, {
-							placeholder: `Search ${P}...`,
-							value: O,
-							onChange: (e) => N(e.target.value),
+						children: [/* @__PURE__ */ C(M, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ C(p, {
+							placeholder: O("botlit.channels.searchPlaceholder", "Search {{tab}}...", { tab: L }),
+							value: P,
+							onChange: (e) => F(e.target.value),
 							className: "pl-9"
 						})]
-					}), /* @__PURE__ */ S(c, {
+					}), /* @__PURE__ */ C(l, {
 						variant: "outline",
-						leftIcon: /* @__PURE__ */ S(E, { size: 16 }),
-						children: "Filters"
+						leftIcon: /* @__PURE__ */ C(D, { size: 16 }),
+						children: O("botlit.channels.filters.filters", "Filters")
 					})]
 				}),
-				P === "connectors" && /* @__PURE__ */ S(x, { children: R ? /* @__PURE__ */ S("div", {
+				L === "connectors" && /* @__PURE__ */ C(S, { children: B ? /* @__PURE__ */ C("div", {
 					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
 					children: [
 						1,
 						2,
 						3
-					].map((e) => /* @__PURE__ */ S("div", { className: "h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
-				}) : z ? /* @__PURE__ */ S(p, {
+					].map((e) => /* @__PURE__ */ C("div", { className: "h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : V ? /* @__PURE__ */ C(m, {
 					resource: "channel connectors",
-					error: z,
-					onRetry: () => void B()
-				}) : L.length > 0 ? /* @__PURE__ */ S("div", {
+					error: V,
+					onRetry: () => void H()
+				}) : z.length > 0 ? /* @__PURE__ */ C("div", {
 					className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
-					children: L.map((e) => /* @__PURE__ */ S(w, {
-						to: D(`channels/${e.id}`),
-						children: /* @__PURE__ */ C(r, {
+					children: z.map((e) => /* @__PURE__ */ C(T, {
+						to: k(`channels/${e.id}`),
+						children: /* @__PURE__ */ w(i, {
 							className: "h-full hover:border-primary/50 transition-colors cursor-pointer",
-							children: [/* @__PURE__ */ S(o, { children: /* @__PURE__ */ C("div", {
+							children: [/* @__PURE__ */ C(s, { children: /* @__PURE__ */ w("div", {
 								className: "flex items-start justify-between",
-								children: [/* @__PURE__ */ C("div", {
+								children: [/* @__PURE__ */ w("div", {
 									className: "flex items-center gap-3",
-									children: [/* @__PURE__ */ S("div", {
+									children: [/* @__PURE__ */ C("div", {
 										className: "p-2 bg-action-primary-bg/10 rounded-lg",
-										children: /* @__PURE__ */ S(F, {
+										children: /* @__PURE__ */ C(I, {
 											type: e.type,
 											className: "h-5 w-5 text-primary"
 										})
-									}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S(s, {
+									}), /* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C(c, {
 										className: "text-base",
 										children: e.name
-									}), /* @__PURE__ */ S(a, {
+									}), /* @__PURE__ */ C(o, {
 										className: "text-xs",
 										children: e.description
 									})] })]
-								}), /* @__PURE__ */ S(u, { status: e.status })]
-							}) }), /* @__PURE__ */ S(i, { children: /* @__PURE__ */ C("div", {
+								}), /* @__PURE__ */ C(d, { status: e.status })]
+							}) }), /* @__PURE__ */ C(a, { children: /* @__PURE__ */ w("div", {
 								className: "space-y-3",
 								children: [
-									/* @__PURE__ */ C("div", {
+									/* @__PURE__ */ w("div", {
 										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ S("span", {
+										children: [/* @__PURE__ */ C("span", {
 											className: "text-sm text-text-secondary",
-											children: "Type"
-										}), /* @__PURE__ */ S(l, {
+											children: O("botlit.channels.list.type", "Type")
+										}), /* @__PURE__ */ C(u, {
 											variant: "outline",
 											className: "capitalize",
 											children: e.type.toLowerCase().replace("_", " ")
 										})]
 									}),
-									/* @__PURE__ */ C("div", {
+									/* @__PURE__ */ w("div", {
 										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ S("span", {
+										children: [/* @__PURE__ */ C("span", {
 											className: "text-sm text-text-secondary",
-											children: "Active Routes"
-										}), /* @__PURE__ */ S(l, {
+											children: O("botlit.channels.list.activeRoutes", "Active Routes")
+										}), /* @__PURE__ */ C(u, {
 											variant: "secondary",
-											children: G.get(e.id) ?? 0
+											children: q.get(e.id) ?? 0
 										})]
 									}),
-									/* @__PURE__ */ C("div", {
+									/* @__PURE__ */ w("div", {
 										className: "pt-3 border-t border-border-subtle text-xs text-text-secondary",
-										children: ["Created ", t(e.createdAt)]
+										children: [
+											O("botlit.botsList.createdLabel", "Created"),
+											" ",
+											n(e.createdAt)
+										]
 									})
 								]
 							}) })]
 						})
 					}, e.id))
-				}) : /* @__PURE__ */ S(d, {
+				}) : /* @__PURE__ */ C(f, {
 					illustration: "empty-notifications",
-					title: "No channel connectors",
-					description: "Connect messaging platforms to deploy agents across multiple channels.",
-					action: /* @__PURE__ */ S(c, {
-						leftIcon: /* @__PURE__ */ S(A, { size: 16 }),
-						children: /* @__PURE__ */ S(w, {
-							to: D("channels/new"),
-							children: "Add Channel"
+					title: O("botlit.channels.empty.connectors.title", "No channel connectors"),
+					description: O("botlit.channels.empty.connectors.description", "Connect messaging platforms to deploy agents across multiple channels."),
+					action: /* @__PURE__ */ C(l, {
+						leftIcon: /* @__PURE__ */ C(j, { size: 16 }),
+						children: /* @__PURE__ */ C(T, {
+							to: k("channels/new"),
+							children: O("botlit.channels.actions.addChannel", "Add Channel")
 						})
 					})
 				}) }),
-				P === "routes" && /* @__PURE__ */ S(x, { children: H ? /* @__PURE__ */ S("div", {
+				L === "routes" && /* @__PURE__ */ C(S, { children: W ? /* @__PURE__ */ C("div", {
 					className: "space-y-4",
 					children: [
 						1,
 						2,
 						3
-					].map((e) => /* @__PURE__ */ S("div", { className: "h-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
-				}) : U ? /* @__PURE__ */ S(p, {
+					].map((e) => /* @__PURE__ */ C("div", { className: "h-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" }, e))
+				}) : G ? /* @__PURE__ */ C(m, {
 					resource: "channel routes",
-					error: U,
-					onRetry: () => void W()
-				}) : V.length > 0 ? /* @__PURE__ */ S("div", {
+					error: G,
+					onRetry: () => void K()
+				}) : U.length > 0 ? /* @__PURE__ */ C("div", {
 					className: "space-y-4",
-					children: V.map((e) => /* @__PURE__ */ S(r, { children: /* @__PURE__ */ S(i, {
+					children: U.map((e) => /* @__PURE__ */ C(i, { children: /* @__PURE__ */ C(a, {
 						className: "py-4",
-						children: /* @__PURE__ */ C("div", {
+						children: /* @__PURE__ */ w("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ S("div", {
+							children: [/* @__PURE__ */ C("div", {
 								className: "flex items-center gap-4",
-								children: /* @__PURE__ */ C("div", {
+								children: /* @__PURE__ */ w("div", {
 									className: "flex items-center gap-2 text-sm",
 									children: [
-										/* @__PURE__ */ S(l, {
+										/* @__PURE__ */ C(u, {
 											variant: "outline",
-											children: m(e, "locationName") ?? e.locationId
+											children: h(e, "locationName") ?? e.locationId
 										}),
-										/* @__PURE__ */ S(T, {
+										/* @__PURE__ */ C(E, {
 											size: 16,
 											className: "text-text-secondary"
 										}),
-										/* @__PURE__ */ S(l, {
+										/* @__PURE__ */ C(u, {
 											variant: "secondary",
-											children: m(e, "appName") ?? e.appId ?? "—"
+											children: h(e, "appName") ?? e.appId ?? "—"
 										})
 									]
 								})
-							}), /* @__PURE__ */ C("div", {
+							}), /* @__PURE__ */ w("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ S("span", {
+								children: [/* @__PURE__ */ C("span", {
 									className: "text-xs text-text-secondary",
-									children: t(e.createdAt)
-								}), /* @__PURE__ */ S(c, {
+									children: n(e.createdAt)
+								}), /* @__PURE__ */ C(l, {
 									variant: "ghost",
 									size: "icon",
-									children: /* @__PURE__ */ S(M, { size: 16 })
+									children: /* @__PURE__ */ C(N, { size: 16 })
 								})]
 							})]
 						})
 					}) }, e.id))
-				}) : /* @__PURE__ */ S(d, {
+				}) : /* @__PURE__ */ C(f, {
 					illustration: "empty-search",
-					title: "No routes configured",
-					description: "Create routes to connect channel locations to specific bots.",
-					action: /* @__PURE__ */ S(c, {
-						leftIcon: /* @__PURE__ */ S(A, { size: 16 }),
-						children: "Create Route"
+					title: O("botlit.channels.empty.routes.title", "No routes configured"),
+					description: O("botlit.channels.empty.routes.description", "Create routes to connect channel locations to specific bots."),
+					action: /* @__PURE__ */ C(l, {
+						leftIcon: /* @__PURE__ */ C(j, { size: 16 }),
+						children: O("botlit.channels.actions.createRoute", "Create Route")
 					})
 				}) }),
-				/* @__PURE__ */ C(y, {
+				/* @__PURE__ */ w(b, {
 					treatment: "glass",
 					glow: !0,
 					className: "p-6",
-					children: [/* @__PURE__ */ C("div", {
+					children: [/* @__PURE__ */ w("div", {
 						className: "mb-4",
-						children: [/* @__PURE__ */ S("h2", {
+						children: [/* @__PURE__ */ C("h2", {
 							className: "text-lg font-semibold tracking-tight text-text-primary",
-							children: "Available Integrations"
-						}), /* @__PURE__ */ S("p", {
+							children: O("botlit.channels.integrations.title", "Available Integrations")
+						}), /* @__PURE__ */ C("p", {
 							className: "text-sm text-text-secondary",
-							children: "Connect to popular messaging platforms"
+							children: O("botlit.channels.integrations.description", "Connect to popular messaging platforms")
 						})]
-					}), /* @__PURE__ */ S("div", {
+					}), /* @__PURE__ */ C("div", {
 						className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4",
 						children: [
 							{
 								type: "WEB_WIDGET",
-								name: "Web Widget",
-								desc: "Embed on websites"
+								name: O("botlit.channels.integrations.webWidget", "Web Widget"),
+								desc: O("botlit.channels.integrations.webWidgetDesc", "Embed on websites")
 							},
 							{
 								type: "SLACK",
-								name: "Slack",
-								desc: "Workspace integration"
+								name: O("botlit.channels.integrations.slack", "Slack"),
+								desc: O("botlit.channels.integrations.slackDesc", "Workspace integration")
 							},
 							{
 								type: "TEAMS",
-								name: "MS Teams",
-								desc: "Teams app"
+								name: O("botlit.channels.integrations.teams", "MS Teams"),
+								desc: O("botlit.channels.integrations.teamsDesc", "Teams app")
 							},
 							{
 								type: "DISCORD",
-								name: "Discord",
-								desc: "Bot integration"
+								name: O("botlit.channels.integrations.discord", "Discord"),
+								desc: O("botlit.channels.integrations.discordDesc", "Bot integration")
 							},
 							{
 								type: "WHATSAPP",
-								name: "WhatsApp",
-								desc: "Business API"
+								name: O("botlit.channels.integrations.whatsapp", "WhatsApp"),
+								desc: O("botlit.channels.integrations.whatsappDesc", "Business API")
 							},
 							{
 								type: "WEBHOOK",
-								name: "Webhook",
-								desc: "Custom integration"
+								name: O("botlit.channels.integrations.webhook", "Webhook"),
+								desc: O("botlit.channels.integrations.webhookDesc", "Custom integration")
 							}
-						].map((e) => /* @__PURE__ */ C("button", {
+						].map((e) => /* @__PURE__ */ w("button", {
 							className: "p-4 text-center border border-border-subtle rounded-lg hover:bg-accent transition-colors",
 							children: [
-								/* @__PURE__ */ S(F, {
+								/* @__PURE__ */ C(I, {
 									type: e.type,
 									className: "h-8 w-8 mx-auto text-text-secondary"
 								}),
-								/* @__PURE__ */ S("p", {
+								/* @__PURE__ */ C("p", {
 									className: "mt-2 font-medium text-sm",
 									children: e.name
 								}),
-								/* @__PURE__ */ S("p", {
+								/* @__PURE__ */ C("p", {
 									className: "text-xs text-text-secondary",
 									children: e.desc
 								})
@@ -299,6 +306,6 @@ var F = ({ type: e, className: t }) => {
 	});
 };
 //#endregion
-export { I as ChannelsPage };
+export { L as ChannelsPage };
 
 //# sourceMappingURL=ChannelsPage.js.map

package/dist/botlit/pages/ChannelsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelsPage.js","names":[],"sources":["../../../src/botlit/pages/ChannelsPage.tsx"],"sourcesContent":["/**\n * Channels Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { Link } from 'react-router';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  Plus,\n  Search as SearchIcon,\n  Filter,\n  MessageSquare,\n  Globe,\n  Slack,\n  Hash,\n  Webhook,\n  ArrowRight,\n  Settings,\n} from 'lucide-react';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input } from '../components/Input';\nimport { Badge, StatusBadge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport {\n  useChannelConnectors,\n  useChannelRoutes,\n  routeMetadataString,\n  type ChannelConnectorRecord,\n  type ChannelRouteRecord,\n} from '../hooks';\nimport { formatRelativeTime, MISSING_VALUE } from '../utils/formatters';\nimport type { ChannelType } from '../types';\n\nconst ChannelIcon: FC<{ type: string; className?: string }> = ({ type, className }) => {\n  switch (type) {\n    case 'SLACK':\n      return <Slack className={className} />;\n    case 'DISCORD':\n      return <Hash className={className} />;\n    case 'TEAMS':\n      return <MessageSquare className={className} />;\n    case 'WEB_WIDGET':\n      return <Globe className={className} />;\n    case 'WEBHOOK':\n      return <Webhook className={className} />;\n    default:\n      return <MessageSquare className={className} />;\n  }\n};\n\nexport const ChannelsPage: FC = () => {\n  const { getPath } = useBotlit();\n  const [search, setSearch] = useState('');\n  const [activeTab, setActiveTab] = useState<'connectors' | 'routes'>('connectors');\n  const connectorFilter = useMemo(() => ({ search }), [search]);\n  const {\n    data: connectors,\n    loading: loadingConnectors,\n    error: connectorsError,\n    refetch: refetchConnectors,\n  } = useChannelConnectors(connectorFilter);\n  const {\n    data: routes,\n    loading: loadingRoutes,\n    error: routesError,\n    refetch: refetchRoutes,\n  } = useChannelRoutes();\n\n  // Routes are keyed by connector, so the per-connector count is derived here\n  // rather than assuming a field the service does not return.\n  const routeCountByConnector = useMemo(() => {\n    const counts = new Map<string, number>();\n    for (const route of routes) {\n      counts.set(route.connectorId, (counts.get(route.connectorId) ?? 0) + 1);\n    }\n    return counts;\n  }, [routes]);\n\n  return (\n    <PageLayout\n      title=\"Channels\"\n      description=\"Connect agents to messaging platforms and configure routing\"\n      actions={\n        <div className=\"flex gap-2\">\n          <Button variant=\"outline\">\n            <Link to={getPath('channels/routes')}>View Routes</Link>\n          </Button>\n          <Button leftIcon={<Plus size={16} />}>\n            <Link to={getPath('channels/new')}>Add Channel</Link>\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<MessageSquare size={18} />}>\n          Channels are where your bots actually talk to people. Connect a messaging platform — a\n          website chat widget, Slack, Microsoft Teams, Discord, WhatsApp or a custom webhook — then\n          add a route that points an incoming location at the bot that should answer. Use this page\n          to manage those connectors and routing rules in one place.\n        </PagePurpose>\n\n        {/* Tabs */}\n        <div className=\"flex gap-1 border-b border-border-subtle\">\n          <button\n            onClick={() => setActiveTab('connectors')}\n            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${\n              activeTab === 'connectors'\n                ? 'border-primary text-primary'\n                : 'border-transparent text-text-secondary hover:text-text-primary'\n            }`}\n          >\n            Connectors ({connectors.length})\n          </button>\n          <button\n            onClick={() => setActiveTab('routes')}\n            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${\n              activeTab === 'routes'\n                ? 'border-primary text-primary'\n                : 'border-transparent text-text-secondary hover:text-text-primary'\n            }`}\n          >\n            Routes ({routes.length})\n          </button>\n        </div>\n\n        {/* Search */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"relative flex-1 max-w-md\">\n            <SearchIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n            <Input\n              placeholder={`Search ${activeTab}...`}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9\"\n            />\n          </div>\n          <Button variant=\"outline\" leftIcon={<Filter size={16} />}>\n            Filters\n          </Button>\n        </div>\n\n        {/* Connectors Tab */}\n        {activeTab === 'connectors' && (\n          <>\n            {loadingConnectors ? (\n              <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {[1, 2, 3].map((i) => (\n                  <div\n                    key={i}\n                    className=\"h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n                  />\n                ))}\n              </div>\n            ) : connectorsError ? (\n              <ErrorState\n                resource=\"channel connectors\"\n                error={connectorsError}\n                onRetry={() => void refetchConnectors()}\n              />\n            ) : connectors.length > 0 ? (\n              <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {connectors.map((connector: ChannelConnectorRecord) => (\n                  <Link key={connector.id} to={getPath(`channels/${connector.id}`)}>\n                    <Card className=\"h-full hover:border-primary/50 transition-colors cursor-pointer\">\n                      <CardHeader>\n                        <div className=\"flex items-start justify-between\">\n                          <div className=\"flex items-center gap-3\">\n                            <div className=\"p-2 bg-action-primary-bg/10 rounded-lg\">\n                              <ChannelIcon type={connector.type} className=\"h-5 w-5 text-primary\" />\n                            </div>\n                            <div>\n                              <CardTitle className=\"text-base\">{connector.name}</CardTitle>\n                              <CardDescription className=\"text-xs\">\n                                {connector.description}\n                              </CardDescription>\n                            </div>\n                          </div>\n                          <StatusBadge status={connector.status} />\n                        </div>\n                      </CardHeader>\n                      <CardContent>\n                        <div className=\"space-y-3\">\n                          {/* Type */}\n                          <div className=\"flex items-center justify-between\">\n                            <span className=\"text-sm text-text-secondary\">Type</span>\n                            <Badge variant=\"outline\" className=\"capitalize\">\n                              {connector.type.toLowerCase().replace('_', ' ')}\n                            </Badge>\n                          </div>\n\n                          {/* Routes */}\n                          <div className=\"flex items-center justify-between\">\n                            <span className=\"text-sm text-text-secondary\">Active Routes</span>\n                            <Badge variant=\"secondary\">\n                              {routeCountByConnector.get(connector.id) ?? 0}\n                            </Badge>\n                          </div>\n\n                          {/* Footer */}\n                          <div className=\"pt-3 border-t border-border-subtle text-xs text-text-secondary\">\n                            Created {formatRelativeTime(connector.createdAt)}\n                          </div>\n                        </div>\n                      </CardContent>\n                    </Card>\n                  </Link>\n                ))}\n              </div>\n            ) : (\n              <EmptyState\n                illustration=\"empty-notifications\"\n                title=\"No channel connectors\"\n                description=\"Connect messaging platforms to deploy agents across multiple channels.\"\n                action={\n                  <Button leftIcon={<Plus size={16} />}>\n                    <Link to={getPath('channels/new')}>Add Channel</Link>\n                  </Button>\n                }\n              />\n            )}\n          </>\n        )}\n\n        {/* Routes Tab */}\n        {activeTab === 'routes' && (\n          <>\n            {loadingRoutes ? (\n              <div className=\"space-y-4\">\n                {[1, 2, 3].map((i) => (\n                  <div\n                    key={i}\n                    className=\"h-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n                  />\n                ))}\n              </div>\n            ) : routesError ? (\n              <ErrorState\n                resource=\"channel routes\"\n                error={routesError}\n                onRetry={() => void refetchRoutes()}\n              />\n            ) : routes.length > 0 ? (\n              <div className=\"space-y-4\">\n                {routes.map((route: ChannelRouteRecord) => (\n                  <Card key={route.id}>\n                    <CardContent className=\"py-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"flex items-center gap-4\">\n                          <div className=\"flex items-center gap-2 text-sm\">\n                            <Badge variant=\"outline\">\n                              {routeMetadataString(route, 'locationName') ?? route.locationId}\n                            </Badge>\n                            <ArrowRight size={16} className=\"text-text-secondary\" />\n                            <Badge variant=\"secondary\">\n                              {routeMetadataString(route, 'appName') ??\n                                route.appId ??\n                                MISSING_VALUE}\n                            </Badge>\n                          </div>\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-xs text-text-secondary\">\n                            {formatRelativeTime(route.createdAt)}\n                          </span>\n                          <Button variant=\"ghost\" size=\"icon\">\n                            <Settings size={16} />\n                          </Button>\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n                ))}\n              </div>\n            ) : (\n              <EmptyState\n                illustration=\"empty-search\"\n                title=\"No routes configured\"\n                description=\"Create routes to connect channel locations to specific bots.\"\n                action={<Button leftIcon={<Plus size={16} />}>Create Route</Button>}\n              />\n            )}\n          </>\n        )}\n\n        {/* Available Integrations */}\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"mb-4\">\n            <h2 className=\"text-lg font-semibold tracking-tight text-text-primary\">\n              Available Integrations\n            </h2>\n            <p className=\"text-sm text-text-secondary\">Connect to popular messaging platforms</p>\n          </div>\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4\">\n            {[\n              {\n                type: 'WEB_WIDGET' as ChannelType,\n                name: 'Web Widget',\n                desc: 'Embed on websites',\n              },\n              { type: 'SLACK' as ChannelType, name: 'Slack', desc: 'Workspace integration' },\n              { type: 'TEAMS' as ChannelType, name: 'MS Teams', desc: 'Teams app' },\n              { type: 'DISCORD' as ChannelType, name: 'Discord', desc: 'Bot integration' },\n              { type: 'WHATSAPP' as ChannelType, name: 'WhatsApp', desc: 'Business API' },\n              { type: 'WEBHOOK' as ChannelType, name: 'Webhook', desc: 'Custom integration' },\n            ].map((integration) => (\n              <button\n                key={integration.type}\n                className=\"p-4 text-center border border-border-subtle rounded-lg hover:bg-accent transition-colors\"\n              >\n                <ChannelIcon\n                  type={integration.type}\n                  className=\"h-8 w-8 mx-auto text-text-secondary\"\n                />\n                <p className=\"mt-2 font-medium text-sm\">{integration.name}</p>\n                <p className=\"text-xs text-text-secondary\">{integration.desc}</p>\n              </button>\n            ))}\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChannelsPage.js","names":[],"sources":["../../../src/botlit/pages/ChannelsPage.tsx"],"sourcesContent":["/**\n * Channels Page\n * @module botlit/pages\n */\n\nimport type { FC } from 'react';\nimport { useMemo, useState } from 'react';\nimport { Link } from 'react-router';\nimport { useBotlit } from '../providers/BotlitProvider';\nimport {\n  Plus,\n  Search as SearchIcon,\n  Filter,\n  MessageSquare,\n  Globe,\n  Slack,\n  Hash,\n  Webhook,\n  ArrowRight,\n  Settings,\n} from 'lucide-react';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { Card, CardHeader, CardTitle, CardContent, CardDescription } from '../components/Card';\nimport { Button } from '../components/Button';\nimport { Input } from '../components/Input';\nimport { Badge, StatusBadge } from '../components/Badge';\nimport { EmptyState } from '../components/EmptyState';\nimport { ErrorState } from '../components/ErrorState';\nimport {\n  useChannelConnectors,\n  useChannelRoutes,\n  routeMetadataString,\n  type ChannelConnectorRecord,\n  type ChannelRouteRecord,\n} from '../hooks';\nimport { formatRelativeTime, MISSING_VALUE } from '../utils/formatters';\nimport type { ChannelType } from '../types';\n\nconst ChannelIcon: FC<{ type: string; className?: string }> = ({ type, className }) => {\n  switch (type) {\n    case 'SLACK':\n      return <Slack className={className} />;\n    case 'DISCORD':\n      return <Hash className={className} />;\n    case 'TEAMS':\n      return <MessageSquare className={className} />;\n    case 'WEB_WIDGET':\n      return <Globe className={className} />;\n    case 'WEBHOOK':\n      return <Webhook className={className} />;\n    default:\n      return <MessageSquare className={className} />;\n  }\n};\n\nexport const ChannelsPage: FC = () => {\n  const t = useTr();\n  const { getPath } = useBotlit();\n  const [search, setSearch] = useState('');\n  const [activeTab, setActiveTab] = useState<'connectors' | 'routes'>('connectors');\n  const connectorFilter = useMemo(() => ({ search }), [search]);\n  const {\n    data: connectors,\n    loading: loadingConnectors,\n    error: connectorsError,\n    refetch: refetchConnectors,\n  } = useChannelConnectors(connectorFilter);\n  const {\n    data: routes,\n    loading: loadingRoutes,\n    error: routesError,\n    refetch: refetchRoutes,\n  } = useChannelRoutes();\n\n  // Routes are keyed by connector, so the per-connector count is derived here\n  // rather than assuming a field the service does not return.\n  const routeCountByConnector = useMemo(() => {\n    const counts = new Map<string, number>();\n    for (const route of routes) {\n      counts.set(route.connectorId, (counts.get(route.connectorId) ?? 0) + 1);\n    }\n    return counts;\n  }, [routes]);\n\n  return (\n    <PageLayout\n      title={t('botlit.channels.title', 'Channels')}\n      description={t(\n        'botlit.channels.description',\n        'Connect agents to messaging platforms and configure routing'\n      )}\n      actions={\n        <div className=\"flex gap-2\">\n          <Button variant=\"outline\">\n            <Link to={getPath('channels/routes')}>\n              {t('botlit.channels.actions.viewRoutes', 'View Routes')}\n            </Link>\n          </Button>\n          <Button leftIcon={<Plus size={16} />}>\n            <Link to={getPath('channels/new')}>\n              {t('botlit.channels.actions.addChannel', 'Add Channel')}\n            </Link>\n          </Button>\n        </div>\n      }\n    >\n      <div className=\"space-y-6\">\n        <PagePurpose icon={<MessageSquare size={18} />}>\n          {t(\n            'botlit.channels.purpose',\n            'Channels are where your bots actually talk to people. Connect a messaging platform — a website chat widget, Slack, Microsoft Teams, Discord, WhatsApp or a custom webhook — then add a route that points an incoming location at the bot that should answer. Use this page to manage those connectors and routing rules in one place.'\n          )}\n        </PagePurpose>\n\n        {/* Tabs */}\n        <div className=\"flex gap-1 border-b border-border-subtle\">\n          <button\n            onClick={() => setActiveTab('connectors')}\n            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${\n              activeTab === 'connectors'\n                ? 'border-primary text-primary'\n                : 'border-transparent text-text-secondary hover:text-text-primary'\n            }`}\n          >\n            {t('botlit.channels.tabs.connectors', 'Connectors')} ({connectors.length})\n          </button>\n          <button\n            onClick={() => setActiveTab('routes')}\n            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${\n              activeTab === 'routes'\n                ? 'border-primary text-primary'\n                : 'border-transparent text-text-secondary hover:text-text-primary'\n            }`}\n          >\n            {t('botlit.channels.tabs.routes', 'Routes')} ({routes.length})\n          </button>\n        </div>\n\n        {/* Search */}\n        <div className=\"flex items-center gap-4\">\n          <div className=\"relative flex-1 max-w-md\">\n            <SearchIcon className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n            <Input\n              placeholder={t('botlit.channels.searchPlaceholder', 'Search {{tab}}...', {\n                tab: activeTab,\n              })}\n              value={search}\n              onChange={(e) => setSearch(e.target.value)}\n              className=\"pl-9\"\n            />\n          </div>\n          <Button variant=\"outline\" leftIcon={<Filter size={16} />}>\n            {t('botlit.channels.filters.filters', 'Filters')}\n          </Button>\n        </div>\n\n        {/* Connectors Tab */}\n        {activeTab === 'connectors' && (\n          <>\n            {loadingConnectors ? (\n              <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {[1, 2, 3].map((i) => (\n                  <div\n                    key={i}\n                    className=\"h-48 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n                  />\n                ))}\n              </div>\n            ) : connectorsError ? (\n              <ErrorState\n                resource=\"channel connectors\"\n                error={connectorsError}\n                onRetry={() => void refetchConnectors()}\n              />\n            ) : connectors.length > 0 ? (\n              <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {connectors.map((connector: ChannelConnectorRecord) => (\n                  <Link key={connector.id} to={getPath(`channels/${connector.id}`)}>\n                    <Card className=\"h-full hover:border-primary/50 transition-colors cursor-pointer\">\n                      <CardHeader>\n                        <div className=\"flex items-start justify-between\">\n                          <div className=\"flex items-center gap-3\">\n                            <div className=\"p-2 bg-action-primary-bg/10 rounded-lg\">\n                              <ChannelIcon type={connector.type} className=\"h-5 w-5 text-primary\" />\n                            </div>\n                            <div>\n                              <CardTitle className=\"text-base\">{connector.name}</CardTitle>\n                              <CardDescription className=\"text-xs\">\n                                {connector.description}\n                              </CardDescription>\n                            </div>\n                          </div>\n                          <StatusBadge status={connector.status} />\n                        </div>\n                      </CardHeader>\n                      <CardContent>\n                        <div className=\"space-y-3\">\n                          {/* Type */}\n                          <div className=\"flex items-center justify-between\">\n                            <span className=\"text-sm text-text-secondary\">\n                              {t('botlit.channels.list.type', 'Type')}\n                            </span>\n                            <Badge variant=\"outline\" className=\"capitalize\">\n                              {connector.type.toLowerCase().replace('_', ' ')}\n                            </Badge>\n                          </div>\n\n                          {/* Routes */}\n                          <div className=\"flex items-center justify-between\">\n                            <span className=\"text-sm text-text-secondary\">\n                              {t('botlit.channels.list.activeRoutes', 'Active Routes')}\n                            </span>\n                            <Badge variant=\"secondary\">\n                              {routeCountByConnector.get(connector.id) ?? 0}\n                            </Badge>\n                          </div>\n\n                          {/* Footer */}\n                          <div className=\"pt-3 border-t border-border-subtle text-xs text-text-secondary\">\n                            {t('botlit.botsList.createdLabel', 'Created')}{' '}\n                            {formatRelativeTime(connector.createdAt)}\n                          </div>\n                        </div>\n                      </CardContent>\n                    </Card>\n                  </Link>\n                ))}\n              </div>\n            ) : (\n              <EmptyState\n                illustration=\"empty-notifications\"\n                title={t('botlit.channels.empty.connectors.title', 'No channel connectors')}\n                description={t(\n                  'botlit.channels.empty.connectors.description',\n                  'Connect messaging platforms to deploy agents across multiple channels.'\n                )}\n                action={\n                  <Button leftIcon={<Plus size={16} />}>\n                    <Link to={getPath('channels/new')}>\n                      {t('botlit.channels.actions.addChannel', 'Add Channel')}\n                    </Link>\n                  </Button>\n                }\n              />\n            )}\n          </>\n        )}\n\n        {/* Routes Tab */}\n        {activeTab === 'routes' && (\n          <>\n            {loadingRoutes ? (\n              <div className=\"space-y-4\">\n                {[1, 2, 3].map((i) => (\n                  <div\n                    key={i}\n                    className=\"h-20 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg\"\n                  />\n                ))}\n              </div>\n            ) : routesError ? (\n              <ErrorState\n                resource=\"channel routes\"\n                error={routesError}\n                onRetry={() => void refetchRoutes()}\n              />\n            ) : routes.length > 0 ? (\n              <div className=\"space-y-4\">\n                {routes.map((route: ChannelRouteRecord) => (\n                  <Card key={route.id}>\n                    <CardContent className=\"py-4\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"flex items-center gap-4\">\n                          <div className=\"flex items-center gap-2 text-sm\">\n                            <Badge variant=\"outline\">\n                              {routeMetadataString(route, 'locationName') ?? route.locationId}\n                            </Badge>\n                            <ArrowRight size={16} className=\"text-text-secondary\" />\n                            <Badge variant=\"secondary\">\n                              {routeMetadataString(route, 'appName') ??\n                                route.appId ??\n                                MISSING_VALUE}\n                            </Badge>\n                          </div>\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-xs text-text-secondary\">\n                            {formatRelativeTime(route.createdAt)}\n                          </span>\n                          <Button variant=\"ghost\" size=\"icon\">\n                            <Settings size={16} />\n                          </Button>\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n                ))}\n              </div>\n            ) : (\n              <EmptyState\n                illustration=\"empty-search\"\n                title={t('botlit.channels.empty.routes.title', 'No routes configured')}\n                description={t(\n                  'botlit.channels.empty.routes.description',\n                  'Create routes to connect channel locations to specific bots.'\n                )}\n                action={\n                  <Button leftIcon={<Plus size={16} />}>\n                    {t('botlit.channels.actions.createRoute', 'Create Route')}\n                  </Button>\n                }\n              />\n            )}\n          </>\n        )}\n\n        {/* Available Integrations */}\n        <GlassCard treatment=\"glass\" glow className=\"p-6\">\n          <div className=\"mb-4\">\n            <h2 className=\"text-lg font-semibold tracking-tight text-text-primary\">\n              {t('botlit.channels.integrations.title', 'Available Integrations')}\n            </h2>\n            <p className=\"text-sm text-text-secondary\">\n              {t(\n                'botlit.channels.integrations.description',\n                'Connect to popular messaging platforms'\n              )}\n            </p>\n          </div>\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4\">\n            {[\n              {\n                type: 'WEB_WIDGET' as ChannelType,\n                name: t('botlit.channels.integrations.webWidget', 'Web Widget'),\n                desc: t('botlit.channels.integrations.webWidgetDesc', 'Embed on websites'),\n              },\n              {\n                type: 'SLACK' as ChannelType,\n                name: t('botlit.channels.integrations.slack', 'Slack'),\n                desc: t('botlit.channels.integrations.slackDesc', 'Workspace integration'),\n              },\n              {\n                type: 'TEAMS' as ChannelType,\n                name: t('botlit.channels.integrations.teams', 'MS Teams'),\n                desc: t('botlit.channels.integrations.teamsDesc', 'Teams app'),\n              },\n              {\n                type: 'DISCORD' as ChannelType,\n                name: t('botlit.channels.integrations.discord', 'Discord'),\n                desc: t('botlit.channels.integrations.discordDesc', 'Bot integration'),\n              },\n              {\n                type: 'WHATSAPP' as ChannelType,\n                name: t('botlit.channels.integrations.whatsapp', 'WhatsApp'),\n                desc: t('botlit.channels.integrations.whatsappDesc', 'Business API'),\n              },\n              {\n                type: 'WEBHOOK' as ChannelType,\n                name: t('botlit.channels.integrations.webhook', 'Webhook'),\n                desc: t('botlit.channels.integrations.webhookDesc', 'Custom integration'),\n              },\n            ].map((integration) => (\n              <button\n                key={integration.type}\n                className=\"p-4 text-center border border-border-subtle rounded-lg hover:bg-accent transition-colors\"\n              >\n                <ChannelIcon\n                  type={integration.type}\n                  className=\"h-8 w-8 mx-auto text-text-secondary\"\n                />\n                <p className=\"mt-2 font-medium text-sm\">{integration.name}</p>\n                <p className=\"text-xs text-text-secondary\">{integration.desc}</p>\n              </button>\n            ))}\n          </div>\n        </GlassCard>\n      </div>\n    </PageLayout>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwCA,IAAM,KAAyD,EAAE,SAAM,mBAAgB;AACrF,SAAQ,GAAR;EACE,KAAK,QACH,QAAO,kBAAC,GAAD,EAAkB,cAAa,CAAA;EACxC,KAAK,UACH,QAAO,kBAAC,GAAD,EAAiB,cAAa,CAAA;EACvC,KAAK,QACH,QAAO,kBAAC,GAAD,EAA0B,cAAa,CAAA;EAChD,KAAK,aACH,QAAO,kBAAC,GAAD,EAAkB,cAAa,CAAA;EACxC,KAAK,UACH,QAAO,kBAAC,GAAD,EAAoB,cAAa,CAAA;EAC1C,QACE,QAAO,kBAAC,GAAD,EAA0B,cAAa,CAAA;;GAIvC,UAAyB;CACpC,IAAM,IAAI,GAAO,EACX,EAAE,eAAY,GAAW,EACzB,CAAC,GAAQ,KAAa,EAAS,GAAG,EAClC,CAAC,GAAW,KAAgB,EAAkC,aAAa,EAE3E,EACJ,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,MACP,EANoB,SAAe,EAAE,WAAQ,GAAG,CAAC,EAAO,CAAC,CAMpB,EACnC,EACJ,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,MACP,GAAkB,EAIhB,IAAwB,QAAc;EAC1C,IAAM,oBAAS,IAAI,KAAqB;AACxC,OAAK,IAAM,KAAS,EAClB,GAAO,IAAI,EAAM,cAAc,EAAO,IAAI,EAAM,YAAY,IAAI,KAAK,EAAE;AAEzE,SAAO;IACN,CAAC,EAAO,CAAC;AAEZ,QACE,kBAAC,GAAD;EACE,OAAO,EAAE,yBAAyB,WAAW;EAC7C,aAAa,EACX,+BACA,8DACD;EACD,SACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IAAQ,SAAQ;cACd,kBAAC,GAAD;KAAM,IAAI,EAAQ,kBAAkB;eACjC,EAAE,sCAAsC,cAAc;KAClD,CAAA;IACA,CAAA,EACT,kBAAC,GAAD;IAAQ,UAAU,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;cAClC,kBAAC,GAAD;KAAM,IAAI,EAAQ,eAAe;eAC9B,EAAE,sCAAsC,cAAc;KAClD,CAAA;IACA,CAAA,CACL;;YAGR,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KAAa,MAAM,kBAAC,GAAD,EAAe,MAAM,IAAM,CAAA;eAC3C,EACC,2BACA,wUACD;KACW,CAAA;IAGd,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,eAAe,EAAa,aAAa;MACzC,WAAW,8DACT,MAAc,eACV,gCACA;gBALR;OAQG,EAAE,mCAAmC,aAAa;OAAC;OAAG,EAAW;OAAO;OAClE;SACT,kBAAC,UAAD;MACE,eAAe,EAAa,SAAS;MACrC,WAAW,8DACT,MAAc,WACV,gCACA;gBALR;OAQG,EAAE,+BAA+B,SAAS;OAAC;OAAG,EAAO;OAAO;OACtD;QACL;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAY,WAAU,wEAAyE,CAAA,EAC/F,kBAAC,GAAD;OACE,aAAa,EAAE,qCAAqC,qBAAqB,EACvE,KAAK,GACN,CAAC;OACF,OAAO;OACP,WAAW,MAAM,EAAU,EAAE,OAAO,MAAM;OAC1C,WAAU;OACV,CAAA,CACE;SACN,kBAAC,GAAD;MAAQ,SAAQ;MAAU,UAAU,kBAAC,GAAD,EAAQ,MAAM,IAAM,CAAA;gBACrD,EAAE,mCAAmC,UAAU;MACzC,CAAA,CACL;;IAGL,MAAc,gBACb,kBAAA,GAAA,EAAA,UACG,IACC,kBAAC,OAAD;KAAK,WAAU;eACZ;MAAC;MAAG;MAAG;MAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAEE,WAAU,+DACV,EAFK,EAEL,CACF;KACE,CAAA,GACJ,IACF,kBAAC,GAAD;KACE,UAAS;KACT,OAAO;KACP,eAAe,KAAK,GAAmB;KACvC,CAAA,GACA,EAAW,SAAS,IACtB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAW,KAAK,MACf,kBAAC,GAAD;MAAyB,IAAI,EAAQ,YAAY,EAAU,KAAK;gBAC9D,kBAAC,GAAD;OAAM,WAAU;iBAAhB,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD;WAAa,MAAM,EAAU;WAAM,WAAU;WAAyB,CAAA;UAClE,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;UAAW,WAAU;oBAAa,EAAU;UAAiB,CAAA,EAC7D,kBAAC,GAAD;UAAiB,WAAU;oBACxB,EAAU;UACK,CAAA,CACd,EAAA,CAAA,CACF;YACN,kBAAC,GAAD,EAAa,QAAQ,EAAU,QAAU,CAAA,CACrC;WACK,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAE,6BAA6B,OAAO;WAClC,CAAA,EACP,kBAAC,GAAD;WAAO,SAAQ;WAAU,WAAU;qBAChC,EAAU,KAAK,aAAa,CAAC,QAAQ,KAAK,IAAI;WACzC,CAAA,CACJ;;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAE,qCAAqC,gBAAgB;WACnD,CAAA,EACP,kBAAC,GAAD;WAAO,SAAQ;qBACZ,EAAsB,IAAI,EAAU,GAAG,IAAI;WACtC,CAAA,CACJ;;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACG,EAAE,gCAAgC,UAAU;WAAE;WAC9C,EAAmB,EAAU,UAAU;WACpC;;SACF;WACM,CAAA,CACT;;MACF,EAhDI,EAAU,GAgDd,CACP;KACE,CAAA,GAEN,kBAAC,GAAD;KACE,cAAa;KACb,OAAO,EAAE,0CAA0C,wBAAwB;KAC3E,aAAa,EACX,gDACA,yEACD;KACD,QACE,kBAAC,GAAD;MAAQ,UAAU,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;gBAClC,kBAAC,GAAD;OAAM,IAAI,EAAQ,eAAe;iBAC9B,EAAE,sCAAsC,cAAc;OAClD,CAAA;MACA,CAAA;KAEX,CAAA,EAEH,CAAA;IAIJ,MAAc,YACb,kBAAA,GAAA,EAAA,UACG,IACC,kBAAC,OAAD;KAAK,WAAU;eACZ;MAAC;MAAG;MAAG;MAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAEE,WAAU,+DACV,EAFK,EAEL,CACF;KACE,CAAA,GACJ,IACF,kBAAC,GAAD;KACE,UAAS;KACT,OAAO;KACP,eAAe,KAAK,GAAe;KACnC,CAAA,GACA,EAAO,SAAS,IAClB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAO,KAAK,MACX,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBACrB,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,GAAD;WAAO,SAAQ;qBACZ,EAAoB,GAAO,eAAe,IAAI,EAAM;WAC/C,CAAA;UACR,kBAAC,GAAD;WAAY,MAAM;WAAI,WAAU;WAAwB,CAAA;UACxD,kBAAC,GAAD;WAAO,SAAQ;qBACZ,EAAoB,GAAO,UAAU,IACpC,EAAM,SAAA;WAEF,CAAA;UACJ;;QACF,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAmB,EAAM,UAAU;SAC/B,CAAA,EACP,kBAAC,GAAD;SAAQ,SAAQ;SAAQ,MAAK;mBAC3B,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;SACf,CAAA,CACL;UACF;;MACM,CAAA,EACT,EA1BI,EAAM,GA0BV,CACP;KACE,CAAA,GAEN,kBAAC,GAAD;KACE,cAAa;KACb,OAAO,EAAE,sCAAsC,uBAAuB;KACtE,aAAa,EACX,4CACA,+DACD;KACD,QACE,kBAAC,GAAD;MAAQ,UAAU,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;gBACjC,EAAE,uCAAuC,eAAe;MAClD,CAAA;KAEX,CAAA,EAEH,CAAA;IAIL,kBAAC,GAAD;KAAW,WAAU;KAAQ,MAAA;KAAK,WAAU;eAA5C,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAE,sCAAsC,yBAAyB;OAC/D,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,4CACA,yCACD;OACC,CAAA,CACA;SACN,kBAAC,OAAD;MAAK,WAAU;gBACZ;OACC;QACE,MAAM;QACN,MAAM,EAAE,0CAA0C,aAAa;QAC/D,MAAM,EAAE,8CAA8C,oBAAoB;QAC3E;OACD;QACE,MAAM;QACN,MAAM,EAAE,sCAAsC,QAAQ;QACtD,MAAM,EAAE,0CAA0C,wBAAwB;QAC3E;OACD;QACE,MAAM;QACN,MAAM,EAAE,sCAAsC,WAAW;QACzD,MAAM,EAAE,0CAA0C,YAAY;QAC/D;OACD;QACE,MAAM;QACN,MAAM,EAAE,wCAAwC,UAAU;QAC1D,MAAM,EAAE,4CAA4C,kBAAkB;QACvE;OACD;QACE,MAAM;QACN,MAAM,EAAE,yCAAyC,WAAW;QAC5D,MAAM,EAAE,6CAA6C,eAAe;QACrE;OACD;QACE,MAAM;QACN,MAAM,EAAE,wCAAwC,UAAU;QAC1D,MAAM,EAAE,4CAA4C,qBAAqB;QAC1E;OACF,CAAC,KAAK,MACL,kBAAC,UAAD;OAEE,WAAU;iBAFZ;QAIE,kBAAC,GAAD;SACE,MAAM,EAAY;SAClB,WAAU;SACV,CAAA;QACF,kBAAC,KAAD;SAAG,WAAU;mBAA4B,EAAY;SAAS,CAAA;QAC9D,kBAAC,KAAD;SAAG,WAAU;mBAA+B,EAAY;SAAS,CAAA;QAC1D;SATF,EAAY,KASV,CACT;MACE,CAAA,CACI;;IACR;;EACK,CAAA"}