@burdenoff/microfe-channel 2026.715.2 → 2026.731.1

package/dist/channel/components/MarkdownEditor.d.ts

@@ -0,0 +1,23 @@
+interface MarkdownEditorProps {
+    /** Current markdown value. */
+    value: string;
+    /** Called whenever the markdown value changes. */
+    onChange: (value: string) => void;
+    /** Optional visible label. */
+    label?: string;
+    /** Placeholder for the write tab textarea. */
+    placeholder?: string;
+    /** Approximate visible rows for the textarea. */
+    rows?: number;
+    /** Accessible label for the textarea (used when no visible label). */
+    'aria-label'?: string;
+    /** Additional classes for the outer container. */
+    className?: string;
+    /** Additional classes for the textarea. */
+    textareaClassName?: string;
+    /** Unique id, forwarded to the textarea. */
+    id?: string;
+}
+export declare function MarkdownEditor({ value, onChange, label, placeholder, rows, 'aria-label': ariaLabel, className, textareaClassName, id, }: MarkdownEditorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MarkdownEditor.d.ts.map

package/dist/channel/components/MarkdownEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../src/channel/components/MarkdownEditor.tsx"],"names":[],"mappings":"AAQA,UAAU,mBAAmB;IAC3B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAkED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,IAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAc,EACd,iBAAsB,EACtB,EAAE,GACH,EAAE,mBAAmB,+BAgKrB"}

package/dist/channel/components/MarkdownEditor.js

@@ -0,0 +1,172 @@
+import { useRef as e, useState as t } from "react";
+import { Bold as n, Code as r, Italic as i, Link as a, List as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Markdown as l } from "@burdenoff/fe-libs/shared/components/Markdown";
+//#region src/channel/components/MarkdownEditor.tsx
+var u = (e, t, n) => (r, i, a) => {
+	let o = r.slice(0, i), s = r.slice(i, a), c = r.slice(a);
+	if (s.length === 0) {
+		let r = `${e}${n}${t}`, a = i + e.length, s = a + n.length;
+		return {
+			nextValue: `${o}${r}${c}`,
+			cursorStart: a,
+			cursorEnd: s
+		};
+	}
+	let l = `${e}${s}${t}`, u = i + l.length;
+	return {
+		nextValue: `${o}${l}${c}`,
+		cursorStart: u,
+		cursorEnd: u
+	};
+}, d = (e, t, n) => {
+	let r = e.slice(0, t), i = e.slice(t, n), a = e.slice(n), o = `[${i.length > 0 ? i : "text"}](https://example.com)`, s = t + o.length - 1, c = s + 1;
+	return {
+		nextValue: `${r}${o}${a}`,
+		cursorStart: s,
+		cursorEnd: c
+	};
+}, f = (e, t, n) => {
+	let r = e.slice(0, t), i = e.slice(t, n), a = e.slice(n);
+	if (i.length === 0) {
+		let e = t + 2;
+		return {
+			nextValue: `${r}- ${a}`,
+			cursorStart: e,
+			cursorEnd: e
+		};
+	}
+	let o = i.split("\n").map((e) => e.startsWith("- ") ? e : `- ${e}`).join("\n");
+	return {
+		nextValue: `${r}${o}${a}`,
+		cursorStart: t,
+		cursorEnd: t + o.length
+	};
+};
+function p({ value: p, onChange: m, label: h, placeholder: g, rows: _ = 5, "aria-label": v, className: y = "", textareaClassName: b = "", id: x }) {
+	let [S, C] = t("write"), w = e(null), T = (e) => {
+		let t = w.current;
+		if (!t) return;
+		let { nextValue: n, cursorStart: r, cursorEnd: i } = e(p, t.selectionStart ?? 0, t.selectionEnd ?? 0);
+		m(n), requestAnimationFrame(() => {
+			t.focus(), t.setSelectionRange(r, i);
+		});
+	}, E = (e) => {
+		switch (e) {
+			case "bold":
+				T(u("**", "**", "bold text"));
+				break;
+			case "italic":
+				T(u("*", "*", "italic text"));
+				break;
+			case "link":
+				T(d);
+				break;
+			case "code":
+				T(u("`", "`", "code"));
+				break;
+			case "list":
+				T(f);
+				break;
+		}
+	};
+	return /* @__PURE__ */ c("div", {
+		className: "space-y-2",
+		children: [h && /* @__PURE__ */ s("label", {
+			htmlFor: x,
+			className: "text-sm font-medium text-text-primary",
+			children: h
+		}), /* @__PURE__ */ c("div", {
+			className: `border border-border-subtle rounded-lg overflow-hidden bg-bg-surface focus-within:ring-2 focus-within:ring-primary ${y}`,
+			children: [/* @__PURE__ */ c("div", {
+				className: "flex items-center justify-between border-b border-border-subtle bg-bg-sunken px-2 py-1",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							onClick: () => E("bold"),
+							"aria-label": "Bold",
+							title: "Bold",
+							className: "p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors",
+							children: /* @__PURE__ */ s(n, { className: "size-4" })
+						}),
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							onClick: () => E("italic"),
+							"aria-label": "Italic",
+							title: "Italic",
+							className: "p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors",
+							children: /* @__PURE__ */ s(i, { className: "size-4" })
+						}),
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							onClick: () => E("link"),
+							"aria-label": "Link",
+							title: "Link",
+							className: "p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors",
+							children: /* @__PURE__ */ s(a, { className: "size-4" })
+						}),
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							onClick: () => E("code"),
+							"aria-label": "Code",
+							title: "Code",
+							className: "p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors",
+							children: /* @__PURE__ */ s(r, { className: "size-4" })
+						}),
+						/* @__PURE__ */ s("button", {
+							type: "button",
+							onClick: () => E("list"),
+							"aria-label": "Bullet list",
+							title: "Bullet list",
+							className: "p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors",
+							children: /* @__PURE__ */ s(o, { className: "size-4" })
+						})
+					]
+				}), /* @__PURE__ */ c("div", {
+					className: "flex items-center gap-1",
+					role: "tablist",
+					"aria-label": "Markdown editor tabs",
+					children: [/* @__PURE__ */ s("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": S === "write",
+						onClick: () => C("write"),
+						className: `px-3 py-1 text-xs font-medium rounded-md transition-colors ${S === "write" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface"}`,
+						children: "Write"
+					}), /* @__PURE__ */ s("button", {
+						type: "button",
+						role: "tab",
+						"aria-selected": S === "preview",
+						onClick: () => C("preview"),
+						className: `px-3 py-1 text-xs font-medium rounded-md transition-colors ${S === "preview" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface"}`,
+						children: "Preview"
+					})]
+				})]
+			}), /* @__PURE__ */ s("div", {
+				className: "relative",
+				children: S === "write" ? /* @__PURE__ */ s("textarea", {
+					ref: w,
+					id: x,
+					"aria-label": v,
+					value: p,
+					onChange: (e) => m(e.target.value),
+					placeholder: g,
+					rows: _,
+					className: `w-full px-4 py-2 bg-bg-surface text-text-primary placeholder:text-text-secondary resize-none focus:outline-none ${b}`
+				}) : /* @__PURE__ */ s("div", {
+					className: "min-h-[theme(spacing.32)] max-h-96 overflow-auto px-4 py-2 text-sm text-text-primary",
+					children: p.trim() ? /* @__PURE__ */ s(l, { children: p }) : /* @__PURE__ */ s("p", {
+						className: "text-text-secondary italic",
+						children: g || "Nothing to preview yet."
+					})
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { p as MarkdownEditor };
+
+//# sourceMappingURL=MarkdownEditor.js.map

package/dist/channel/components/MarkdownEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.js","names":[],"sources":["../../../src/channel/components/MarkdownEditor.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { Bold, Italic, Link, Code, List } from 'lucide-react';\nimport { Markdown } from '@burdenoff/fe-libs/shared/components/Markdown';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface MarkdownEditorProps {\n  /** Current markdown value. */\n  value: string;\n  /** Called whenever the markdown value changes. */\n  onChange: (value: string) => void;\n  /** Optional visible label. */\n  label?: string;\n  /** Placeholder for the write tab textarea. */\n  placeholder?: string;\n  /** Approximate visible rows for the textarea. */\n  rows?: number;\n  /** Accessible label for the textarea (used when no visible label). */\n  'aria-label'?: string;\n  /** Additional classes for the outer container. */\n  className?: string;\n  /** Additional classes for the textarea. */\n  textareaClassName?: string;\n  /** Unique id, forwarded to the textarea. */\n  id?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\ntype InsertAction = (\n  value: string,\n  selectionStart: number,\n  selectionEnd: number\n) => { nextValue: string; cursorStart: number; cursorEnd: number };\n\nconst wrapWith = (prefix: string, suffix: string, fallback: string): InsertAction => {\n  return (value, start, end) => {\n    const before = value.slice(0, start);\n    const selected = value.slice(start, end);\n    const after = value.slice(end);\n\n    if (selected.length === 0) {\n      const insertion = `${prefix}${fallback}${suffix}`;\n      const cursorStart = start + prefix.length;\n      const cursorEnd = cursorStart + fallback.length;\n      return { nextValue: `${before}${insertion}${after}`, cursorStart, cursorEnd };\n    }\n\n    const wrapped = `${prefix}${selected}${suffix}`;\n    const cursorStart = start + wrapped.length;\n    return { nextValue: `${before}${wrapped}${after}`, cursorStart, cursorEnd: cursorStart };\n  };\n};\n\nconst insertLink: InsertAction = (value, start, end) => {\n  const before = value.slice(0, start);\n  const selected = value.slice(start, end);\n  const after = value.slice(end);\n\n  const linkText = selected.length > 0 ? selected : 'text';\n  const insertion = `[${linkText}](https://example.com)`;\n  const cursorStart = start + insertion.length - 1;\n  const cursorEnd = cursorStart + 1;\n  return { nextValue: `${before}${insertion}${after}`, cursorStart, cursorEnd };\n};\n\nconst insertList: InsertAction = (value, start, end) => {\n  const before = value.slice(0, start);\n  const selected = value.slice(start, end);\n  const after = value.slice(end);\n\n  if (selected.length === 0) {\n    const insertion = '- ';\n    const cursorStart = start + insertion.length;\n    return { nextValue: `${before}${insertion}${after}`, cursorStart, cursorEnd: cursorStart };\n  }\n\n  const lines = selected.split('\\n');\n  const listified = lines.map((line) => (line.startsWith('- ') ? line : `- ${line}`)).join('\\n');\n  const nextValue = `${before}${listified}${after}`;\n  const cursorStart = start;\n  const cursorEnd = start + listified.length;\n  return { nextValue, cursorStart, cursorEnd };\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport function MarkdownEditor({\n  value,\n  onChange,\n  label,\n  placeholder,\n  rows = 5,\n  'aria-label': ariaLabel,\n  className = '',\n  textareaClassName = '',\n  id,\n}: MarkdownEditorProps) {\n  const [activeTab, setActiveTab] = useState<'write' | 'preview'>('write');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const apply = (action: InsertAction) => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n\n    const start = textarea.selectionStart ?? 0;\n    const end = textarea.selectionEnd ?? 0;\n    const { nextValue, cursorStart, cursorEnd } = action(value, start, end);\n\n    onChange(nextValue);\n\n    // Re-focus and restore selection after the next render has applied the value.\n    requestAnimationFrame(() => {\n      textarea.focus();\n      textarea.setSelectionRange(cursorStart, cursorEnd);\n    });\n  };\n\n  const handleToolbarAction = (action: 'bold' | 'italic' | 'link' | 'code' | 'list') => {\n    switch (action) {\n      case 'bold':\n        apply(wrapWith('**', '**', 'bold text'));\n        break;\n      case 'italic':\n        apply(wrapWith('*', '*', 'italic text'));\n        break;\n      case 'link':\n        apply(insertLink);\n        break;\n      case 'code':\n        apply(wrapWith('`', '`', 'code'));\n        break;\n      case 'list':\n        apply(insertList);\n        break;\n    }\n  };\n\n  const containerBase =\n    'border border-border-subtle rounded-lg overflow-hidden bg-bg-surface focus-within:ring-2 focus-within:ring-primary';\n  const textareaBase =\n    'w-full px-4 py-2 bg-bg-surface text-text-primary placeholder:text-text-secondary resize-none focus:outline-none';\n\n  return (\n    <div className=\"space-y-2\">\n      {label && (\n        <label htmlFor={id} className=\"text-sm font-medium text-text-primary\">\n          {label}\n        </label>\n      )}\n      <div className={`${containerBase} ${className}`}>\n        <div className=\"flex items-center justify-between border-b border-border-subtle bg-bg-sunken px-2 py-1\">\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => handleToolbarAction('bold')}\n              aria-label=\"Bold\"\n              title=\"Bold\"\n              className=\"p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors\"\n            >\n              <Bold className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => handleToolbarAction('italic')}\n              aria-label=\"Italic\"\n              title=\"Italic\"\n              className=\"p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors\"\n            >\n              <Italic className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => handleToolbarAction('link')}\n              aria-label=\"Link\"\n              title=\"Link\"\n              className=\"p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors\"\n            >\n              <Link className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => handleToolbarAction('code')}\n              aria-label=\"Code\"\n              title=\"Code\"\n              className=\"p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors\"\n            >\n              <Code className=\"size-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => handleToolbarAction('list')}\n              aria-label=\"Bullet list\"\n              title=\"Bullet list\"\n              className=\"p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-bg-surface transition-colors\"\n            >\n              <List className=\"size-4\" />\n            </button>\n          </div>\n\n          <div className=\"flex items-center gap-1\" role=\"tablist\" aria-label=\"Markdown editor tabs\">\n            <button\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={activeTab === 'write'}\n              onClick={() => setActiveTab('write')}\n              className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${\n                activeTab === 'write'\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary hover:bg-bg-surface'\n              }`}\n            >\n              Write\n            </button>\n            <button\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={activeTab === 'preview'}\n              onClick={() => setActiveTab('preview')}\n              className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${\n                activeTab === 'preview'\n                  ? 'bg-bg-surface text-text-primary shadow-sm'\n                  : 'text-text-secondary hover:text-text-primary hover:bg-bg-surface'\n              }`}\n            >\n              Preview\n            </button>\n          </div>\n        </div>\n\n        <div className=\"relative\">\n          {activeTab === 'write' ? (\n            <textarea\n              ref={textareaRef}\n              id={id}\n              aria-label={ariaLabel}\n              value={value}\n              onChange={(e) => onChange(e.target.value)}\n              placeholder={placeholder}\n              rows={rows}\n              className={`${textareaBase} ${textareaClassName}`}\n            />\n          ) : (\n            <div className=\"min-h-[theme(spacing.32)] max-h-96 overflow-auto px-4 py-2 text-sm text-text-primary\">\n              {value.trim() ? (\n                <Markdown>{value}</Markdown>\n              ) : (\n                <p className=\"text-text-secondary italic\">\n                  {placeholder || 'Nothing to preview yet.'}\n                </p>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/channel/modules/channels/pages/ChannelDetailsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelDetailsPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ChannelDetailsPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAgIH,wBAAgB,kBAAkB,gCA6lCjC"}
+{"version":3,"file":"ChannelDetailsPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/ChannelDetailsPage.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAiIH,wBAAgB,kBAAkB,gCA+lCjC"}

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

@@ -12,6 +12,7 @@ import { usePermissions as we } from "@burdenoff/fe-libs/shared/providers/shell"
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
 import { CTAOverflowMenu as Te, EmphasisPanel as Ee, GlassCard as C, NextSteps as De, PagePurpose as Oe, ResponsiveDialog as ke, ResponsiveDialogContent as Ae, ResponsiveDialogHeader as je, ResponsiveDialogTitle as Me } from "@burdenoff/fe-libs/ui";
 import { TagBadge as Ne } from "@burdenoff/fe-libs/tag";
+import { Markdown as Pe } from "@burdenoff/fe-libs/shared/components/Markdown";
 //#region src/channel/modules/channels/pages/ChannelDetailsPage.tsx
 var w = {
 	EMAIL: {
@@ -103,42 +104,42 @@ var w = {
 	}
 };
 function D() {
-	let { channelId: c } = Ce(), f = Se(), D = xe(), { hasPermission: O } = we(), k = O(i.CHANNEL_UPDATE), A = O(i.CHANNEL_EXECUTE), Pe = O(i.CHANNEL_CONNECTION_CREATE), Fe = O(i.CHANNEL_CONNECTION_UPDATE), { t: Ie } = se(), j = (e, t) => {
-		let n = Ie(e);
+	let { channelId: c } = Ce(), f = Se(), D = xe(), { hasPermission: O } = we(), k = O(i.CHANNEL_UPDATE), A = O(i.CHANNEL_EXECUTE), Fe = O(i.CHANNEL_CONNECTION_CREATE), Ie = O(i.CHANNEL_CONNECTION_UPDATE), { t: Le } = se(), j = (e, t) => {
+		let n = Le(e);
 		return n === e ? t : n;
-	}, M = D.state, [N, P] = o(null), [F, I] = o(M?.showCredentialsForm || !1), [L, R] = o(M?.pendingCredentials || {}), [Le, z] = o(!1), [B, V] = o(null), [Re, H] = o(!1), [U, W] = o(""), [G, ze] = o(() => j("channel.testNotificationSubject", "Test Notification")), [K, Be] = o(() => j("channel.testNotificationBody", "This is a test notification from Burdenoff Channel Service.")), [q, J] = o(null);
+	}, M = D.state, [N, P] = o(null), [F, I] = o(M?.showCredentialsForm || !1), [L, R] = o(M?.pendingCredentials || {}), [Re, z] = o(!1), [B, V] = o(null), [ze, H] = o(!1), [U, W] = o(""), [G, Be] = o(() => j("channel.testNotificationSubject", "Test Notification")), [K, Ve] = o(() => j("channel.testNotificationBody", "This is a test notification from Burdenoff Channel Service.")), [q, J] = o(null);
 	oe(() => {
 		(M?.pendingCredentials || M?.showCredentialsForm) && f(D.pathname, {
 			replace: !0,
 			state: null
 		});
 	}, []);
-	let { channel: Y, isLoading: Ve, error: X, updateChannel: He, runHealthCheck: Ue, createConnection: We, updateConnection: Ge, deleteConnection: Ke, testConnection: qe, sendTestNotification: Je } = n(c), Ye = async () => {
+	let { channel: Y, isLoading: He, error: X, updateChannel: Ue, runHealthCheck: We, createConnection: Ge, updateConnection: Ke, deleteConnection: qe, testConnection: Je, sendTestNotification: Ye } = n(c), Xe = async () => {
 		P("health");
 		try {
-			await Ue();
+			await We();
 		} catch (e) {
 			console.error("[channel] Failed to run health check", e);
 		} finally {
 			P(null);
 		}
-	}, Xe = async () => {
+	}, Ze = async () => {
 		if (Y) {
 			P("status");
 			try {
-				await He({ status: Y.status === "ACTIVE" ? "INACTIVE" : "ACTIVE" });
+				await Ue({ status: Y.status === "ACTIVE" ? "INACTIVE" : "ACTIVE" });
 			} catch (e) {
 				console.error("[channel] Failed to toggle channel status", e);
 			} finally {
 				P(null);
 			}
 		}
-	}, Ze = async () => {
+	}, Qe = async () => {
 		if (Y) {
 			P("connection");
 			try {
 				let e = "API_KEY", t = Y.adapterType;
-				t?.includes("BOT") ? e = "BOT_TOKEN" : t?.includes("WEBHOOK") ? e = "WEBHOOK" : t === "SMTP" && (e = "SMTP_IMAP"), await We({
+				t?.includes("BOT") ? e = "BOT_TOKEN" : t?.includes("WEBHOOK") ? e = "WEBHOOK" : t === "SMTP" && (e = "SMTP_IMAP"), await Ge({
 					authType: e,
 					credentials: L
 				}), I(!1), R({}), z(!1);
@@ -148,28 +149,28 @@ function D() {
 				P(null);
 			}
 		}
-	}, Qe = async (e) => {
+	}, $e = async (e) => {
 		P("connection");
 		try {
-			await Ge(e, { credentials: L }), I(!1), R({}), z(!1);
+			await Ke(e, { credentials: L }), I(!1), R({}), z(!1);
 		} catch (e) {
 			console.error("[channel] Failed to update connection", e);
 		} finally {
 			P(null);
 		}
-	}, $e = async (n) => {
+	}, et = async (n) => {
 		e("medium"), P("delete-connection");
 		try {
-			await Ke(n), t("success");
+			await qe(n), t("success");
 		} catch (e) {
 			t("error"), console.error("[channel] Failed to delete connection", e);
 		} finally {
 			P(null);
 		}
-	}, et = async (e) => {
+	}, tt = async (e) => {
 		P("test"), V(null);
 		try {
-			let t = await qe(e);
+			let t = await Je(e);
 			t && V({
 				success: t.success,
 				message: t.message || (t.success ? j("channel.connectionTestSuccess", "Connection successful!") : j("channel.connectionTestFailed", "Connection failed"))
@@ -182,14 +183,14 @@ function D() {
 		} finally {
 			P(null);
 		}
-	}, tt = async () => {
+	}, nt = async () => {
 		if (U.trim()) {
 			P("send-test"), J(null);
 			try {
 				let e = Y?.platform === "EMAIL" ? {
 					subject: G,
 					html: `<p>${K}</p>`
-				} : void 0, t = await Je(U.trim(), K, e);
+				} : void 0, t = await Ye(U.trim(), K, e);
 				t && J({
 					success: t.success,
 					messageId: t.messageId,
@@ -216,7 +217,7 @@ function D() {
 				P(null);
 			}
 		}
-	}, nt = (e) => {
+	}, rt = (e) => {
 		switch (e) {
 			case "EMAIL": return j("channel.recipientPlaceholder.email", "email@example.com");
 			case "SMS": return j("channel.recipientPlaceholder.phone", "+1234567890");
@@ -227,7 +228,7 @@ function D() {
 			case "WHATSAPP": return j("channel.recipientPlaceholder.phone", "+1234567890");
 			default: return j("channel.recipientPlaceholder.default", "Recipient");
 		}
-	}, rt = (e) => {
+	}, it = (e) => {
 		switch (e) {
 			case "EMAIL": return j("channel.recipientLabel.email", "Email Address");
 			case "SMS":
@@ -238,20 +239,20 @@ function D() {
 			case "DISCORD": return j("channel.recipientLabel.channelOrUserId", "Channel/User ID");
 			default: return j("channel.recipientLabel.default", "Recipient");
 		}
-	}, it = (e) => ({
+	}, at = (e) => ({
 		...w[e] || {
 			label: e,
 			color: "bg-bg-sunken text-text-secondary"
 		},
 		label: a(e, ne, j)
-	}), at = (e) => ({
+	}), ot = (e) => ({
 		...T[e] || T.INACTIVE,
 		label: a(e, re, j)
-	}), ot = (e) => ({
+	}), st = (e) => ({
 		...E[e] || E.UNKNOWN,
 		label: a(e, te, j)
 	});
-	if (Ve) return /* @__PURE__ */ x("div", {
+	if (He) return /* @__PURE__ */ x("div", {
 		className: "flex items-center justify-center min-h-screen",
 		children: /* @__PURE__ */ x(p, {
 			size: 32,
@@ -280,7 +281,7 @@ function D() {
 			]
 		})
 	});
-	let st = it(Y.platform), Z = at(Y.status), Q = ot(Y.connectionHealth), ct = Z.icon, lt = Q.icon, $ = Y.connection;
+	let ct = at(Y.platform), Z = ot(Y.status), Q = st(Y.connectionHealth), lt = Z.icon, ut = Q.icon, $ = Y.connection;
 	return /* @__PURE__ */ x(r, {
 		permission: i.CHANNEL_READ,
 		children: /* @__PURE__ */ S("div", {
@@ -304,9 +305,9 @@ function D() {
 								className: "text-xl sm:text-2xl font-bold text-text-primary",
 								children: Y.name
 							})]
-						}), Y.description && /* @__PURE__ */ x("p", {
+						}), Y.description && /* @__PURE__ */ x("div", {
 							className: "text-sm text-text-secondary mt-1",
-							children: Y.description
+							children: /* @__PURE__ */ x(Pe, { children: Y.description })
 						})] })]
 					}), /* @__PURE__ */ x(Te, {
 						primary: k ? {
@@ -329,7 +330,7 @@ function D() {
 									"aria-hidden": "true"
 								}),
 								disabled: N === "health",
-								onSelect: () => void Ye()
+								onSelect: () => void Xe()
 							}] : [],
 							...k ? [{
 								label: Y.status === "ACTIVE" ? j("channel.deactivate", "Deactivate") : j("channel.activate", "Activate"),
@@ -345,7 +346,7 @@ function D() {
 									"aria-hidden": "true"
 								}),
 								disabled: N === "status",
-								onSelect: () => void Xe()
+								onSelect: () => void Ze()
 							}] : [],
 							{
 								label: j("channel.testChannel", "Test Channel"),
@@ -379,7 +380,7 @@ function D() {
 								size: 16,
 								"aria-hidden": "true"
 							}),
-							onClick: () => void Ye()
+							onClick: () => void Xe()
 						}] : [] : [{
 							id: "connect",
 							label: j("channel.nextAddConnection", "Add a connection"),
@@ -425,8 +426,8 @@ function D() {
 								className: "text-xs text-text-secondary mb-1",
 								children: j("channel.platform", "Platform")
 							}), /* @__PURE__ */ x("span", {
-								className: `inline-flex px-2 py-1 text-sm font-semibold rounded-full ${st.color}`,
-								children: st.label
+								className: `inline-flex px-2 py-1 text-sm font-semibold rounded-full ${ct.color}`,
+								children: ct.label
 							})]
 						}),
 						/* @__PURE__ */ S(C, {
@@ -437,7 +438,7 @@ function D() {
 								children: j("channel.status", "Status")
 							}), /* @__PURE__ */ S("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ x(ct, {
+								children: [/* @__PURE__ */ x(lt, {
 									size: 16,
 									className: Z.color.split(" ")[0]
 								}), /* @__PURE__ */ x("span", {
@@ -456,7 +457,7 @@ function D() {
 								}),
 								/* @__PURE__ */ S("div", {
 									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ x(lt, {
+									children: [/* @__PURE__ */ x(ut, {
 										size: 16,
 										className: Q.color
 									}), /* @__PURE__ */ x("span", {
@@ -679,7 +680,7 @@ function D() {
 									className: "text-lg font-semibold text-text-primary",
 									children: j("channel.connectionAndCredentials", "Connection & Credentials")
 								})]
-							}), Pe && !$ && !F && /* @__PURE__ */ S("button", {
+							}), Fe && !$ && !F && /* @__PURE__ */ S("button", {
 								type: "button",
 								onClick: () => I(!0),
 								className: "flex items-center gap-2 px-3 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
@@ -770,7 +771,7 @@ function D() {
 											permission: i.CHANNEL_CONNECTION_UPDATE,
 											children: /* @__PURE__ */ S("button", {
 												type: "button",
-												onClick: () => et($.id),
+												onClick: () => tt($.id),
 												disabled: N === "test",
 												className: "flex items-center gap-2 px-3 py-2 text-sm text-status-info-text hover:bg-status-info-bg-subtle rounded-lg transition-colors disabled:opacity-50",
 												children: [N === "test" ? /* @__PURE__ */ x(p, {
@@ -779,7 +780,7 @@ function D() {
 												}) : /* @__PURE__ */ x(me, { size: 16 }), j("channel.testConnection", "Test Connection")]
 											})
 										}),
-										Fe && /* @__PURE__ */ S("button", {
+										Ie && /* @__PURE__ */ S("button", {
 											type: "button",
 											onClick: () => {
 												I(!0), R($?.platformMetadata ?? {});
@@ -791,7 +792,7 @@ function D() {
 											permission: i.CHANNEL_CONNECTION_DELETE,
 											children: /* @__PURE__ */ S("button", {
 												type: "button",
-												onClick: () => $e($.id),
+												onClick: () => et($.id),
 												disabled: N === "delete-connection",
 												className: "flex items-center gap-2 px-3 py-2 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded-lg transition-colors disabled:opacity-50",
 												children: [N === "delete-connection" ? /* @__PURE__ */ x(p, {
@@ -861,9 +862,9 @@ function D() {
 										children: /* @__PURE__ */ S("button", {
 											type: "button",
 											onClick: () => {
-												$ ? Qe($.id) : Ze();
+												$ ? $e($.id) : Qe();
 											},
-											disabled: N === "connection" || !Le && !!Y.adapterType,
+											disabled: N === "connection" || !Re && !!Y.adapterType,
 											className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 											children: [N === "connection" ? /* @__PURE__ */ x(p, {
 												size: 16,
@@ -884,7 +885,7 @@ function D() {
 					]
 				}),
 				/* @__PURE__ */ x(ke, {
-					open: Re,
+					open: ze,
 					onOpenChange: (e) => {
 						e || H(!1);
 					},
@@ -907,7 +908,7 @@ function D() {
 								/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ S("label", {
 									className: "block text-sm font-medium text-text-primary mb-1.5",
 									children: [
-										rt(Y.platform),
+										it(Y.platform),
 										" ",
 										/* @__PURE__ */ x("span", {
 											className: "text-status-error-text",
@@ -917,11 +918,11 @@ function D() {
 								}), /* @__PURE__ */ S("div", {
 									className: "relative",
 									children: [/* @__PURE__ */ x("input", {
-										"aria-label": nt(Y.platform),
+										"aria-label": rt(Y.platform),
 										type: "text",
 										value: U,
 										onChange: (e) => W(e.target.value),
-										placeholder: nt(Y.platform),
+										placeholder: rt(Y.platform),
 										className: "w-full pl-9 pr-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
 									}), /* @__PURE__ */ x("div", {
 										className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary",
@@ -937,7 +938,7 @@ function D() {
 									"aria-label": "Email subject",
 									type: "text",
 									value: G,
-									onChange: (e) => ze(e.target.value),
+									onChange: (e) => Be(e.target.value),
 									placeholder: "Email subject",
 									className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
 								})] }),
@@ -949,7 +950,7 @@ function D() {
 									id: "channel-details-test-message",
 									"aria-label": "Test message content",
 									value: K,
-									onChange: (e) => Be(e.target.value),
+									onChange: (e) => Ve(e.target.value),
 									placeholder: "Test message content",
 									rows: 3,
 									className: "w-full px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none"
@@ -1004,7 +1005,7 @@ function D() {
 										permission: i.CHANNEL_DELIVERY_SEND,
 										children: /* @__PURE__ */ S("button", {
 											type: "button",
-											onClick: tt,
+											onClick: nt,
 											disabled: N === "send-test" || !U.trim(),
 											className: "flex-1 flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 											children: [N === "send-test" ? /* @__PURE__ */ x(p, {