@burdenoff/microfe-botmanor 2026.813.1

package/dist/botlit/pages/ChannelDetailPage.js

@@ -0,0 +1,955 @@
+import { useBotlit as e } from "../providers/BotlitProvider.js";
+import { useBots as t } from "../hooks/useBots.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 ee } from "../components/Badge.js";
+import { isNative as te, nativeImpact as ne, nativeNotify as re } from "../../utils/nativeBridge.js";
+import { EmptyState as d } from "../components/EmptyState.js";
+import { FormField as f, Input as p, Textarea as m } from "../components/Input.js";
+import { WIDGET_METADATA_KEY as ie, readWidgetConfig as h, routeMetadataString as g, useChannelConnector as ae, useChannelRoutes as oe, useCreateChannelConnector as se, useCreateChannelRoute as ce, useDeleteChannelConnector as le, useUpdateChannelConnector as ue } from "../hooks/useChannels.js";
+import { toUnion as _ } from "../utils/unions.js";
+import { useInitiateSlackConnect as de, useLinkIntegrationConnection as fe, useMyUserPlatformConnection as pe, useRevokeSlackConnection as me, useToggleSlackNotifications as he } from "../hooks/useUserPlatformConnection.js";
+import "../hooks/index.js";
+import { useEffect as ge, useRef as _e, useState as v } from "react";
+import { GlassCard as ve, NextSteps as ye, PagePurpose as be } from "@burdenoff/fe-libs/ui";
+import { Fragment as xe, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useParams as Se, useSearchParams as Ce } from "react-router";
+import { ArrowLeft as we, Bell as Te, BellOff as Ee, CheckCircle2 as De, Edit as Oe, ExternalLink as ke, Globe as x, Hash as S, Loader2 as Ae, MessageSquare as C, Palette as je, Plus as w, Radio as T, Save as E, Settings as D, Shield as Me, Slack as O, Trash2 as Ne, Unlink as Pe, X as k } from "lucide-react";
+import { toast as A } from "sonner";
+//#region src/botlit/pages/ChannelDetailPage.tsx
+var j = [
+	"WEB_WIDGET",
+	"SLACK",
+	"TEAMS",
+	"DISCORD",
+	"WHATSAPP",
+	"WEBHOOK",
+	"CUSTOM"
+], Fe = [
+	"PRIVATE",
+	"WORKSPACE",
+	"PUBLIC"
+];
+function M(e) {
+	return e.split(",").map((e) => e.trim()).filter(Boolean);
+}
+var N = ({ type: e }) => {
+	switch (e) {
+		case "SLACK": return /* @__PURE__ */ y(S, { size: 18 });
+		case "WEB_WIDGET": return /* @__PURE__ */ y(x, { size: 18 });
+		case "TEAMS": return /* @__PURE__ */ y(C, { size: 18 });
+		default: return /* @__PURE__ */ y(T, { size: 18 });
+	}
+}, P = ({ isNew: x }) => {
+	let { connectorId: S } = Se(), { navigateTo: P } = e(), [F, I] = Ce(), { data: L, loading: Ie } = ae(x ? void 0 : S), { data: Le, refetch: Re } = oe(S), { data: R } = t(), [ze, Be] = se(), [Ve, He] = ue(), [Ue, We] = le(), [Ge, Ke] = ce(), z = L?.type === "SLACK" && L?.credentialsRefId ? L.credentialsRefId : void 0, { data: B, loading: qe, refetch: V } = pe(z), { initiate: Je } = de(), { link: Ye, loading: Xe } = fe(), { toggle: Ze, loading: Qe } = he(), { revoke: $e, loading: et } = me(), [tt, H] = v(null), nt = _e(!1);
+	ge(() => {
+		if (nt.current) return;
+		let e = F.get("integrationConnectionId"), t = F.get("channelId");
+		if (!e || !t) return;
+		nt.current = !0;
+		let n = new URLSearchParams(F);
+		n.delete("integrationConnectionId"), n.delete("channelId"), I(n, { replace: !0 }), H(null), Ye(e, t).then((e) => {
+			e ? V() : H("Failed to link Slack connection. Please try again.");
+		});
+	}, [
+		F,
+		I,
+		Ye,
+		V
+	]);
+	let rt = () => {
+		z && Je(z, `${window.location.origin}${window.location.pathname}`);
+	}, it = async () => {
+		B && await Ze(B.id, !B.notificationsEnabled) && await V();
+	}, at = async () => {
+		B && await $e(B.id) && await V();
+	}, [ot, U] = v(!1), [st, ct] = v(!1), [lt, W] = v(!1), [G, K] = v({
+		locationId: "",
+		locationName: "",
+		botId: ""
+	}), [q, J] = v({
+		name: "",
+		description: "",
+		type: "WEB_WIDGET",
+		visibility: "PRIVATE",
+		credentialsRefId: ""
+	}), [Y, X] = v({
+		allowedOrigins: "",
+		primaryColor: "#3b82f6",
+		fontFamily: "Inter, sans-serif",
+		starterPrompts: ""
+	}), ut = () => {
+		if (q.type === "WEB_WIDGET") return { [ie]: {
+			allowedOrigins: M(Y.allowedOrigins),
+			primaryColor: Y.primaryColor,
+			fontFamily: Y.fontFamily,
+			starterPrompts: M(Y.starterPrompts)
+		} };
+	}, dt = async () => {
+		if (q.name) try {
+			let e = await ze({
+				name: q.name,
+				type: q.type,
+				description: q.description || void 0,
+				visibility: q.visibility,
+				credentialsRefId: q.credentialsRefId || void 0,
+				metadata: ut()
+			});
+			A.success(`Channel "${e.name}" created`), P(`channels/${e.id}`);
+		} catch (e) {
+			A.error(e instanceof Error ? e.message : "Failed to create channel connector");
+		}
+	}, ft = async () => {
+		if (!(!S || !q.name)) try {
+			await Ve({
+				connectorId: S,
+				input: {
+					name: q.name,
+					description: q.description || void 0,
+					visibility: q.visibility,
+					credentialsRefId: q.credentialsRefId || void 0,
+					metadata: ut()
+				}
+			}), A.success("Channel updated"), U(!1);
+		} catch (e) {
+			A.error(e instanceof Error ? e.message : "Failed to update channel connector");
+		}
+	}, pt = async () => {
+		if (S) try {
+			await Ue(S), te() && re("success"), P("channels");
+		} catch (e) {
+			throw te() && re("error"), e;
+		}
+	}, mt = async () => {
+		if (!S || !G.locationId || !G.botId) return;
+		let e = R?.find((e) => e.id === G.botId);
+		try {
+			await Ge({
+				connectorId: S,
+				locationId: G.locationId,
+				appId: G.botId,
+				metadata: {
+					locationName: G.locationName || G.locationId,
+					appName: e?.name
+				}
+			});
+		} catch (e) {
+			A.error(e instanceof Error ? e.message : "Failed to create route");
+			return;
+		}
+		A.success("Route created"), Re(), K({
+			locationId: "",
+			locationName: "",
+			botId: ""
+		}), W(!1);
+	}, ht = () => {
+		if (!L) return;
+		J({
+			name: L.name,
+			description: L.description || "",
+			type: _(L.type, j, "CUSTOM"),
+			visibility: _(L.visibility, Fe, "PRIVATE"),
+			credentialsRefId: L.credentialsRefId || ""
+		});
+		let e = h(L);
+		e && X({
+			allowedOrigins: e.allowedOrigins.join(", "),
+			primaryColor: e.primaryColor,
+			fontFamily: e.fontFamily,
+			starterPrompts: e.starterPrompts.join(", ")
+		}), U(!0);
+	};
+	if (x) return /* @__PURE__ */ y(r, {
+		title: "Create Channel Connector",
+		description: "Set up a new channel for your AI agents",
+		actions: /* @__PURE__ */ b("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ y(l, {
+				variant: "outline",
+				onClick: () => P("channels"),
+				children: "Cancel"
+			}), /* @__PURE__ */ y(l, {
+				leftIcon: /* @__PURE__ */ y(E, { size: 16 }),
+				onClick: dt,
+				isLoading: Be.loading || He.loading,
+				disabled: !q.name,
+				children: "Create"
+			})]
+		}),
+		children: /* @__PURE__ */ b("div", {
+			className: "max-w-2xl space-y-6",
+			children: [/* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y(s, { children: /* @__PURE__ */ y(c, { children: "Basic Information" }) }), /* @__PURE__ */ b(a, {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ y(f, {
+						label: "Connector Name",
+						required: !0,
+						children: /* @__PURE__ */ y(p, {
+							placeholder: "e.g., Production Web Widget",
+							value: q.name,
+							onChange: (e) => J({
+								...q,
+								name: e.target.value
+							})
+						})
+					}),
+					/* @__PURE__ */ y(f, {
+						label: "Description",
+						children: /* @__PURE__ */ y(m, {
+							placeholder: "What is this channel connector for?",
+							value: q.description,
+							onChange: (e) => J({
+								...q,
+								description: e.target.value
+							}),
+							rows: 3
+						})
+					}),
+					/* @__PURE__ */ b("div", {
+						className: "grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ y(f, {
+							label: "Channel Type",
+							required: !0,
+							children: /* @__PURE__ */ b("select", {
+								className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+								value: q.type,
+								onChange: (e) => J({
+									...q,
+									type: e.target.value
+								}),
+								children: [
+									/* @__PURE__ */ y("option", {
+										value: "WEB_WIDGET",
+										children: "Web Widget"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "SLACK",
+										children: "Slack"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "TEAMS",
+										children: "Microsoft Teams"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "DISCORD",
+										children: "Discord"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "WHATSAPP",
+										children: "WhatsApp"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "WEBHOOK",
+										children: "Webhook"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "CUSTOM",
+										children: "Custom"
+									})
+								]
+							})
+						}), /* @__PURE__ */ y(f, {
+							label: "Visibility",
+							children: /* @__PURE__ */ b("select", {
+								className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+								value: q.visibility,
+								onChange: (e) => J({
+									...q,
+									visibility: e.target.value
+								}),
+								children: [
+									/* @__PURE__ */ y("option", {
+										value: "PRIVATE",
+										children: "Private"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "WORKSPACE",
+										children: "Workspace"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "PUBLIC",
+										children: "Public"
+									})
+								]
+							})
+						})]
+					}),
+					q.type !== "WEB_WIDGET" && /* @__PURE__ */ y(f, {
+						label: "Credentials Reference",
+						children: /* @__PURE__ */ y(p, {
+							placeholder: "e.g., secret-slack-token",
+							value: q.credentialsRefId,
+							onChange: (e) => J({
+								...q,
+								credentialsRefId: e.target.value
+							})
+						})
+					})
+				]
+			})] }), q.type === "WEB_WIDGET" && /* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y(s, { children: /* @__PURE__ */ b(c, {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ y(je, { size: 18 }), "Widget Configuration"]
+			}) }), /* @__PURE__ */ b(a, {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ y(f, {
+						label: "Allowed Origins",
+						description: "Comma-separated list of domains",
+						children: /* @__PURE__ */ y(p, {
+							placeholder: "e.g., https://example.com, https://app.example.com",
+							value: Y.allowedOrigins,
+							onChange: (e) => X({
+								...Y,
+								allowedOrigins: e.target.value
+							})
+						})
+					}),
+					/* @__PURE__ */ b("div", {
+						className: "grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ y(f, {
+							label: "Primary Color",
+							children: /* @__PURE__ */ b("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ y("input", {
+									type: "color",
+									value: Y.primaryColor,
+									onChange: (e) => X({
+										...Y,
+										primaryColor: e.target.value
+									}),
+									className: "h-10 w-16 rounded border border-border-default"
+								}), /* @__PURE__ */ y(p, {
+									value: Y.primaryColor,
+									onChange: (e) => X({
+										...Y,
+										primaryColor: e.target.value
+									})
+								})]
+							})
+						}), /* @__PURE__ */ y(f, {
+							label: "Font Family",
+							children: /* @__PURE__ */ y(p, {
+								value: Y.fontFamily,
+								onChange: (e) => X({
+									...Y,
+									fontFamily: e.target.value
+								})
+							})
+						})]
+					}),
+					/* @__PURE__ */ y(f, {
+						label: "Starter Prompts",
+						description: "One per line",
+						children: /* @__PURE__ */ y(m, {
+							placeholder: "What can you help me with?",
+							value: Y.starterPrompts,
+							onChange: (e) => X({
+								...Y,
+								starterPrompts: e.target.value
+							}),
+							rows: 3
+						})
+					})
+				]
+			})] })]
+		})
+	});
+	if (Ie) return /* @__PURE__ */ y(r, {
+		title: "Loading...",
+		children: /* @__PURE__ */ y("div", { className: "h-96 bg-bg-sunken motion-safe:animate-vc-shimmer rounded-lg" })
+	});
+	if (!L) return /* @__PURE__ */ y(r, {
+		title: "Connector Not Found",
+		children: /* @__PURE__ */ y(d, {
+			illustration: "empty-notifications",
+			title: "Connector Not Found",
+			description: "This channel connector doesn't exist.",
+			action: /* @__PURE__ */ y(l, {
+				onClick: () => P("channels"),
+				children: "Back to Channels"
+			})
+		})
+	});
+	let Z = Le?.filter((e) => e.connectorId === L.id) || [], Q = _(L.type, j, "CUSTOM"), $ = h(L);
+	return /* @__PURE__ */ y(r, {
+		title: /* @__PURE__ */ b("div", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ y(l, {
+					variant: "ghost",
+					size: "icon",
+					onClick: () => P("channels"),
+					children: /* @__PURE__ */ y(we, { size: 20 })
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "p-2 rounded-lg bg-action-primary-bg/10",
+					children: /* @__PURE__ */ y(N, { type: Q })
+				}),
+				/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ y("span", { children: L.name }), /* @__PURE__ */ y(ee, { status: L.status })]
+				}), /* @__PURE__ */ y("p", {
+					className: "text-sm font-normal text-text-secondary",
+					children: L.description
+				})] })
+			]
+		}),
+		actions: /* @__PURE__ */ b("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ y(l, {
+				variant: "outline",
+				leftIcon: /* @__PURE__ */ y(w, { size: 16 }),
+				onClick: () => W(!0),
+				children: "Add Route"
+			}), ot ? /* @__PURE__ */ b(xe, { children: [/* @__PURE__ */ y(l, {
+				variant: "outline",
+				onClick: () => U(!1),
+				children: "Cancel"
+			}), /* @__PURE__ */ y(l, {
+				leftIcon: /* @__PURE__ */ y(E, { size: 16 }),
+				onClick: ft,
+				isLoading: He.loading,
+				children: "Save"
+			})] }) : /* @__PURE__ */ b(xe, { children: [/* @__PURE__ */ y(l, {
+				variant: "outline",
+				leftIcon: /* @__PURE__ */ y(Oe, { size: 16 }),
+				onClick: ht,
+				children: "Edit"
+			}), st ? /* @__PURE__ */ b("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ y(l, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => ct(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ y(l, {
+					variant: "destructive",
+					size: "sm",
+					onClick: () => {
+						ne("medium"), pt();
+					},
+					isLoading: We.loading,
+					children: "Confirm"
+				})]
+			}) : /* @__PURE__ */ y(l, {
+				variant: "destructive",
+				leftIcon: /* @__PURE__ */ y(Ne, { size: 16 }),
+				onClick: () => ct(!0),
+				children: "Delete"
+			})] })]
+		}),
+		children: /* @__PURE__ */ b("div", {
+			className: "space-y-6",
+			children: [
+				/* @__PURE__ */ y(be, {
+					icon: /* @__PURE__ */ y(T, { size: 18 }),
+					children: "This connector links Botlit to one messaging platform. From here you add routes — each mapping a specific location on the channel (a Slack channel, a widget, a number) to the bot that should answer there — tweak the connector’s settings, and manage its connection. Set up at least one route so messages on this channel reach a bot."
+				}),
+				/* @__PURE__ */ y(ye, {
+					storageKey: `botlit-channel-${L.id}`,
+					steps: [
+						{
+							id: "route",
+							label: "Add a route",
+							description: "Point an incoming location on this channel at one of your bots.",
+							icon: /* @__PURE__ */ y(w, { size: 16 }),
+							onClick: () => W(!0),
+							done: Z.length > 0
+						},
+						{
+							id: "edit",
+							label: "Review connector settings",
+							description: "Confirm the name, visibility and channel-specific configuration.",
+							icon: /* @__PURE__ */ y(D, { size: 16 }),
+							onClick: ht
+						},
+						{
+							id: "bots",
+							label: "Check your bots",
+							description: "Make sure the bot you are routing to is active and configured.",
+							icon: /* @__PURE__ */ y(C, { size: 16 }),
+							onClick: () => P("bots")
+						}
+					]
+				}),
+				lt && /* @__PURE__ */ b(i, { children: [/* @__PURE__ */ b(s, {
+					className: "flex flex-row items-center justify-between",
+					children: [/* @__PURE__ */ y(c, { children: "Add Route" }), /* @__PURE__ */ y(l, {
+						variant: "ghost",
+						size: "icon",
+						onClick: () => W(!1),
+						children: /* @__PURE__ */ y(k, { size: 16 })
+					})]
+				}), /* @__PURE__ */ b(a, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ b("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ y(f, {
+								label: "Location ID",
+								required: !0,
+								children: /* @__PURE__ */ y(p, {
+									placeholder: "e.g., #general or channel ID",
+									value: G.locationId,
+									onChange: (e) => K({
+										...G,
+										locationId: e.target.value
+									})
+								})
+							}), /* @__PURE__ */ y(f, {
+								label: "Location Name",
+								children: /* @__PURE__ */ y(p, {
+									placeholder: "Friendly name (optional)",
+									value: G.locationName,
+									onChange: (e) => K({
+										...G,
+										locationName: e.target.value
+									})
+								})
+							})]
+						}),
+						/* @__PURE__ */ y(f, {
+							label: "Connect to Bot",
+							required: !0,
+							children: /* @__PURE__ */ b("select", {
+								className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+								value: G.botId,
+								onChange: (e) => K({
+									...G,
+									botId: e.target.value
+								}),
+								children: [/* @__PURE__ */ y("option", {
+									value: "",
+									children: "Select a bot..."
+								}), R?.map((e) => /* @__PURE__ */ y("option", {
+									value: e.id,
+									children: e.name
+								}, e.id))]
+							})
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "flex justify-end gap-2",
+							children: [/* @__PURE__ */ y(l, {
+								variant: "outline",
+								onClick: () => W(!1),
+								children: "Cancel"
+							}), /* @__PURE__ */ y(l, {
+								onClick: mt,
+								isLoading: Ke.loading,
+								disabled: !G.locationId || !G.botId,
+								children: "Add Route"
+							})]
+						})
+					]
+				})] }),
+				ot && /* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y(s, { children: /* @__PURE__ */ y(c, { children: "Edit Channel" }) }), /* @__PURE__ */ b(a, {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ y(f, {
+							label: "Connector Name",
+							required: !0,
+							children: /* @__PURE__ */ y(p, {
+								value: q.name,
+								onChange: (e) => J({
+									...q,
+									name: e.target.value
+								})
+							})
+						}),
+						/* @__PURE__ */ y(f, {
+							label: "Description",
+							children: /* @__PURE__ */ y(m, {
+								value: q.description,
+								onChange: (e) => J({
+									...q,
+									description: e.target.value
+								}),
+								rows: 2
+							})
+						}),
+						/* @__PURE__ */ y(f, {
+							label: "Visibility",
+							children: /* @__PURE__ */ b("select", {
+								className: "flex h-10 w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm",
+								value: q.visibility,
+								onChange: (e) => J({
+									...q,
+									visibility: e.target.value
+								}),
+								children: [
+									/* @__PURE__ */ y("option", {
+										value: "PRIVATE",
+										children: "Private"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "WORKSPACE",
+										children: "Workspace"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "PUBLIC",
+										children: "Public"
+									})
+								]
+							})
+						})
+					]
+				})] }),
+				/* @__PURE__ */ b("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+					children: [
+						/* @__PURE__ */ y(i, { children: /* @__PURE__ */ b(a, {
+							className: "pt-6 text-center",
+							children: [
+								/* @__PURE__ */ y("div", {
+									className: "p-3 rounded-full bg-action-primary-bg/10 w-fit mx-auto mb-2",
+									children: /* @__PURE__ */ y(N, { type: Q })
+								}),
+								/* @__PURE__ */ y("p", {
+									className: "text-lg font-bold capitalize",
+									children: L.type.toLowerCase().replace("_", " ")
+								}),
+								/* @__PURE__ */ y("p", {
+									className: "text-sm text-text-secondary",
+									children: "Channel Type"
+								})
+							]
+						}) }),
+						/* @__PURE__ */ b(ve, {
+							treatment: "glass",
+							glow: !0,
+							className: "p-6 text-center",
+							children: [/* @__PURE__ */ y("p", {
+								className: "text-3xl font-bold tabular-nums text-text-primary",
+								children: Z.length
+							}), /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "Active Routes"
+							})]
+						}),
+						/* @__PURE__ */ y(i, { children: /* @__PURE__ */ b(a, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ y("p", {
+								className: "text-3xl font-bold text-text-primary capitalize",
+								children: L.visibility.toLowerCase()
+							}), /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "Visibility"
+							})]
+						}) }),
+						/* @__PURE__ */ y(i, { children: /* @__PURE__ */ b(a, {
+							className: "pt-6 text-center",
+							children: [/* @__PURE__ */ y("p", {
+								className: "text-3xl font-bold text-text-primary",
+								children: L.revision
+							}), /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "Revision"
+							})]
+						}) })
+					]
+				}),
+				$ && /* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y(s, { children: /* @__PURE__ */ b(c, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ y(je, { size: 18 }), "Widget Configuration"]
+				}) }), /* @__PURE__ */ b(a, { children: [/* @__PURE__ */ b("div", {
+					className: "grid grid-cols-2 md:grid-cols-3 gap-6",
+					children: [
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-sm text-text-secondary",
+							children: "Allowed Origins"
+						}), $.allowedOrigins.length > 0 ? /* @__PURE__ */ y("div", {
+							className: "flex flex-wrap gap-1 mt-1",
+							children: $.allowedOrigins.map((e) => /* @__PURE__ */ y(u, {
+								variant: "outline",
+								className: "font-mono text-xs",
+								children: e
+							}, e))
+						}) : /* @__PURE__ */ y("p", {
+							className: "font-medium",
+							children: "Any origin"
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-sm text-text-secondary",
+							children: "Theme"
+						}), /* @__PURE__ */ b("div", {
+							className: "flex items-center gap-2 mt-1",
+							children: [/* @__PURE__ */ y("div", {
+								className: "w-6 h-6 rounded border border-border-subtle",
+								style: { backgroundColor: $.primaryColor }
+							}), /* @__PURE__ */ y("span", {
+								className: "font-mono text-sm",
+								children: $.primaryColor
+							})]
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-sm text-text-secondary",
+							children: "Font Family"
+						}), /* @__PURE__ */ y("p", {
+							className: "font-medium",
+							children: $.fontFamily
+						})] })
+					]
+				}), $.starterPrompts.length > 0 && /* @__PURE__ */ b("div", {
+					className: "mt-4 pt-4 border-t border-border-subtle",
+					children: [/* @__PURE__ */ y("p", {
+						className: "text-sm text-text-secondary mb-2",
+						children: "Starter Prompts"
+					}), /* @__PURE__ */ y("div", {
+						className: "flex flex-wrap gap-2",
+						children: $.starterPrompts.map((e, t) => /* @__PURE__ */ y(u, {
+							variant: "secondary",
+							children: e
+						}, t))
+					})]
+				})] })] }),
+				/* @__PURE__ */ b(i, { children: [/* @__PURE__ */ b(s, {
+					className: "flex flex-row items-center justify-between",
+					children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y(c, { children: "Routes" }), /* @__PURE__ */ y(o, { children: "Routes connect this channel to your bots" })] }), /* @__PURE__ */ y(l, {
+						variant: "outline",
+						size: "sm",
+						leftIcon: /* @__PURE__ */ y(w, { size: 14 }),
+						onClick: () => W(!0),
+						children: "Add Route"
+					})]
+				}), /* @__PURE__ */ y(a, { children: Z.length > 0 ? /* @__PURE__ */ y("div", {
+					className: "space-y-3",
+					children: Z.map((e) => /* @__PURE__ */ b("div", {
+						className: "flex items-center justify-between p-4 border border-border-subtle rounded-lg",
+						children: [/* @__PURE__ */ b("div", {
+							className: "flex items-center gap-4",
+							children: [/* @__PURE__ */ y("div", {
+								className: "p-2 rounded-lg bg-bg-sunken",
+								children: /* @__PURE__ */ y(C, {
+									size: 18,
+									className: "text-text-secondary"
+								})
+							}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+								className: "font-medium",
+								children: g(e, "locationName") ?? e.locationId
+							}), /* @__PURE__ */ b("p", {
+								className: "text-sm text-text-secondary",
+								children: ["Connected to: ", g(e, "appName") ?? e.appId]
+							})] })]
+						}), /* @__PURE__ */ b("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ b(u, {
+								variant: "outline",
+								children: ["Rev ", e.revision]
+							}), /* @__PURE__ */ y(l, {
+								variant: "ghost",
+								size: "sm",
+								children: /* @__PURE__ */ y(ke, { size: 14 })
+							})]
+						})]
+					}, e.id))
+				}) : /* @__PURE__ */ y(d, {
+					illustration: "empty-data",
+					title: "No routes configured",
+					description: "Add a route to connect this channel to a bot.",
+					action: /* @__PURE__ */ y(l, {
+						leftIcon: /* @__PURE__ */ y(w, { size: 16 }),
+						onClick: () => W(!0),
+						children: "Add Route"
+					})
+				}) })] }),
+				L.type === "SLACK" && L.credentialsRefId && /* @__PURE__ */ b(i, { children: [/* @__PURE__ */ b(s, { children: [/* @__PURE__ */ b(c, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ y(O, { size: 18 }), "Your Slack Account"]
+				}), /* @__PURE__ */ y(o, { children: "Connect your personal Slack account to receive direct messages from this bot" })] }), /* @__PURE__ */ b(a, { children: [tt && /* @__PURE__ */ b("div", {
+					className: "mb-4 flex items-start gap-2 rounded-lg border border-status-error-border/40 bg-status-error-bg/10 px-3 py-2 text-sm text-status-error-text",
+					children: [/* @__PURE__ */ y("span", { children: tt }), /* @__PURE__ */ y("button", {
+						onClick: () => H(null),
+						className: "ml-auto cursor-pointer text-status-error-text/70 hover:text-status-error-text",
+						children: /* @__PURE__ */ y(k, { size: 14 })
+					})]
+				}), Xe ? /* @__PURE__ */ b("div", {
+					className: "flex items-center gap-2 py-4 text-text-secondary",
+					children: [/* @__PURE__ */ y(Ae, {
+						size: 16,
+						className: "animate-spin"
+					}), /* @__PURE__ */ y("span", {
+						className: "text-sm",
+						children: "Linking Slack connection..."
+					})]
+				}) : qe ? /* @__PURE__ */ b("div", {
+					className: "flex items-center gap-2 py-4 text-text-secondary",
+					children: [/* @__PURE__ */ y(Ae, {
+						size: 16,
+						className: "animate-spin"
+					}), /* @__PURE__ */ y("span", {
+						className: "text-sm",
+						children: "Checking connection..."
+					})]
+				}) : B && B.dmAllowed ? /* @__PURE__ */ b("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ b("div", {
+							className: "flex items-center gap-3 p-3 rounded-lg bg-bg-sunken",
+							children: [
+								/* @__PURE__ */ y(De, {
+									size: 20,
+									className: "text-green-600 shrink-0"
+								}),
+								/* @__PURE__ */ b("div", {
+									className: "min-w-0 flex-1",
+									children: [
+										/* @__PURE__ */ y("p", {
+											className: "font-medium text-sm",
+											children: B.externalDisplayName || B.externalUsername || B.externalUserId
+										}),
+										B.externalUsername && B.externalDisplayName && /* @__PURE__ */ b("p", {
+											className: "text-xs text-text-secondary",
+											children: ["@", B.externalUsername]
+										}),
+										B.connectedAt && /* @__PURE__ */ b("p", {
+											className: "text-xs text-text-secondary",
+											children: ["Connected ", new Date(B.connectedAt).toLocaleDateString()]
+										})
+									]
+								}),
+								/* @__PURE__ */ y("div", {
+									className: "flex items-center gap-1",
+									children: B.isTokenExpired && /* @__PURE__ */ y(u, {
+										variant: "outline",
+										className: "text-xs text-amber-600 border-amber-400",
+										children: "Token expired"
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "flex items-center justify-between p-3 border border-border-subtle rounded-lg",
+							children: [/* @__PURE__ */ b("div", {
+								className: "flex items-center gap-2",
+								children: [B.notificationsEnabled ? /* @__PURE__ */ y(Te, {
+									size: 16,
+									className: "text-primary"
+								}) : /* @__PURE__ */ y(Ee, {
+									size: 16,
+									className: "text-text-secondary"
+								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+									className: "text-sm font-medium",
+									children: "DM Notifications"
+								}), /* @__PURE__ */ y("p", {
+									className: "text-xs text-text-secondary",
+									children: B.notificationsEnabled ? "You will receive bot DMs" : "DM notifications are paused"
+								})] })]
+							}), /* @__PURE__ */ y(l, {
+								variant: "outline",
+								size: "sm",
+								onClick: it,
+								isLoading: Qe,
+								children: B.notificationsEnabled ? "Disable" : "Enable"
+							})]
+						}),
+						/* @__PURE__ */ b("div", {
+							className: "flex gap-2 justify-end pt-2",
+							children: [B.isTokenExpired && /* @__PURE__ */ y(l, {
+								variant: "outline",
+								size: "sm",
+								leftIcon: /* @__PURE__ */ y(O, { size: 14 }),
+								onClick: rt,
+								children: "Reconnect"
+							}), /* @__PURE__ */ y(l, {
+								variant: "destructive",
+								size: "sm",
+								leftIcon: /* @__PURE__ */ y(Pe, { size: 14 }),
+								onClick: at,
+								isLoading: et,
+								children: "Disconnect"
+							})]
+						})
+					]
+				}) : /* @__PURE__ */ b("div", {
+					className: "flex flex-col items-center gap-4 py-8 text-center",
+					children: [
+						/* @__PURE__ */ y("div", {
+							className: "p-4 rounded-full bg-bg-sunken",
+							children: /* @__PURE__ */ y(O, {
+								size: 32,
+								className: "text-text-secondary"
+							})
+						}),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "font-medium",
+							children: "No personal account connected"
+						}), /* @__PURE__ */ y("p", {
+							className: "text-sm text-text-secondary mt-1",
+							children: "Connect your Slack account so the bot can send you direct messages"
+						})] }),
+						/* @__PURE__ */ y(l, {
+							leftIcon: /* @__PURE__ */ y(O, { size: 16 }),
+							onClick: rt,
+							children: "Connect with Slack"
+						})
+					]
+				})] })] }),
+				L.defaultPolicyBindings && /* @__PURE__ */ b(i, { children: [/* @__PURE__ */ b(s, { children: [/* @__PURE__ */ b(c, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ y(Me, { size: 18 }), "Default Policy Bindings"]
+				}), /* @__PURE__ */ y(o, { children: "Default policies applied to all routes on this connector" })] }), /* @__PURE__ */ y(a, { children: /* @__PURE__ */ y("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-4",
+					children: Object.entries(L.defaultPolicyBindings).map(([e, t]) => t ? /* @__PURE__ */ b("div", {
+						className: "p-3 bg-bg-sunken rounded-lg",
+						children: [/* @__PURE__ */ y("p", {
+							className: "text-xs text-text-secondary capitalize",
+							children: e.replace("PolicyId", "").replace(/([A-Z])/g, " $1")
+						}), /* @__PURE__ */ y("p", {
+							className: "font-medium text-sm truncate",
+							children: String(t)
+						})]
+					}, e) : null)
+				}) })] }),
+				/* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y(s, { children: /* @__PURE__ */ b(c, {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ y(D, { size: 18 }), "Metadata"]
+				}) }), /* @__PURE__ */ y(a, { children: /* @__PURE__ */ b("div", {
+					className: "grid grid-cols-2 md:grid-cols-4 gap-6 text-sm",
+					children: [
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-secondary",
+							children: "Created"
+						}), /* @__PURE__ */ y("p", {
+							className: "font-medium",
+							children: n(L.createdAt)
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-secondary",
+							children: "Updated"
+						}), /* @__PURE__ */ y("p", {
+							className: "font-medium",
+							children: n(L.updatedAt)
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-secondary",
+							children: "Credentials"
+						}), /* @__PURE__ */ y("p", {
+							className: "font-medium",
+							children: L.credentialsRefId || "Not configured"
+						})] }),
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+							className: "text-text-secondary",
+							children: "Tags"
+						}), /* @__PURE__ */ y("div", {
+							className: "flex gap-1",
+							children: L.tags.length > 0 ? L.tags.map((e) => /* @__PURE__ */ y(u, {
+								variant: "secondary",
+								className: "text-xs",
+								children: e
+							}, e)) : /* @__PURE__ */ y("span", {
+								className: "text-text-secondary",
+								children: "None"
+							})
+						})] })
+					]
+				}) })] })
+			]
+		})
+	});
+};
+//#endregion
+export { P as ChannelDetailPage };
+
+//# sourceMappingURL=ChannelDetailPage.js.map