@burdenoff/microfe-channel 2026.510.112

package/README.md

@@ -0,0 +1,147 @@
+# @burdenoff/microfe-channel
+
+Channel microfrontend for multi-channel communication management.
+
+## Features
+
+- **Channel Management (CRUDL)**: Create, Read, Update, Delete, and List communication channels
+- **Connection Management (CRUDL)**: Manage channel connections with encrypted credential storage
+- **Message Delivery**: Send messages through configured channels
+- **Multi-Platform Support**: Email, SMS, Push, Slack, Teams, Discord, WhatsApp, and more
+- **Health Monitoring**: Real-time channel health checks and status monitoring
+- **Failover Support**: Priority-based failover chains for reliability
+
+## Supported Platforms
+
+### Communication Channels
+- **Email**: AWS SES, Azure ACS, SendGrid, Mailgun, SMTP, and more
+- **SMS**: Twilio, AWS SNS, Vonage, Plivo, and more
+- **Push Notifications**: FCM, APNS, OneSignal, Expo, and more
+- **Messaging Platforms**: Slack, Microsoft Teams, Discord, WhatsApp
+- **In-App**: Native in-app notifications
+- **Webhooks**: Custom HTTP webhooks
+
+## Installation
+
+```bash
+bun add @burdenoff/microfe-channel
+```
+
+## Usage
+
+### Integration with Host Application
+
+```tsx
+import { ChannelRoot, type ChannelRootProps } from '@burdenoff/microfe-channel';
+
+function App() {
+  const props: ChannelRootProps = {
+    basePath: '/channels',
+    navigate: (path) => router.push(path),
+    currentUser: { id: '1', email: 'user@example.com', firstName: 'John', lastName: 'Doe' },
+    workspaceId: 'ws-123',
+    organizationId: 'org-123',
+    apiGatewayUrl: 'https://api.example.com/graphql',
+    authToken: 'your-auth-token',
+    registerNavItems: (items) => { /* register nav items */ return () => {}; },
+  };
+
+  return <ChannelRoot {...props} />;
+}
+```
+
+### Standalone Development
+
+```bash
+# Install dependencies
+bun install
+
+# Start development server
+bun dev
+
+# Build for production
+bun run build
+
+# Run linter
+bun run lint
+
+# Format code
+bun run format
+
+# Type check
+bun run type:check
+
+# Run all checks
+bun run sanity
+```
+
+## Routes
+
+- `/dashboard` - Channel overview dashboard
+- `/channels` - List all channels
+- `/channels/create` - Create new channel
+- `/channels/:id` - Channel details
+- `/channels/:id/edit` - Edit channel
+- `/connections` - List all connections
+- `/connections/create` - Create new connection
+- `/connections/:id` - Connection details
+- `/connections/:id/edit` - Edit connection
+- `/send` - Send message interface
+- `/settings` - Channel settings
+
+## GraphQL Operations
+
+The microfe uses GraphQL for all API communication. After adding or modifying operations:
+
+```bash
+# Generate TypeScript types from GraphQL operations
+bun run codegen
+```
+
+## Architecture
+
+### Directory Structure
+
+```
+src/
+├── channel/
+│   ├── modules/          # Feature modules
+│   │   ├── channels/     # Channel CRUDL
+│   │   ├── connections/  # Connection CRUDL
+│   │   ├── dashboard/    # Overview dashboard
+│   │   └── triggers/     # Message sending
+│   ├── shared/           # Shared components
+│   │   ├── components/
+│   │   ├── types/
+│   │   └── utils/
+│   ├── hooks/            # Custom React hooks
+│   ├── providers/        # Context providers
+│   ├── ChannelRoot.tsx   # Root component
+│   ├── ChannelRoutes.tsx # Routing configuration
+│   └── index.ts          # Public exports
+├── dev/                  # Development setup
+└── index.ts              # Package entry point
+```
+
+### State Management
+
+- **Apollo Client**: Server state and GraphQL operations
+- **Zustand**: Local UI state (optional, for complex UI state)
+- **React Context**: Dependency injection and configuration
+
+## Environment Variables (Development)
+
+Create a `.env.local` file for local development:
+
+```env
+VITE_API_GATEWAY_URL=http://localhost:4000/graphql
+VITE_AUTH_TOKEN=your-dev-token
+```
+
+## License
+
+MIT
+
+## Author
+
+Burdenoff

package/dist/channel/ChannelRoot.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { ChannelRootProps } from './types';
+
+/**
+ * Root component for the Channel microfrontend.
+ *
+ * This is the main entry point that host applications import and render.
+ * It sets up the necessary providers and renders the internal routing.
+ * Automatically registers navigation items with the shell if registration functions are provided.
+ *
+ * @example
+ * ```tsx
+ * import { ChannelRoot, type ChannelRootProps } from '@burdenoff/microfe-channel';
+ *
+ * function App() {
+ *   const props: ChannelRootProps = {
+ *     basePath: '/channels',
+ *     navigate: (path) => router.push(path),
+ *     currentUser: { id: '1', email: 'user@example.com', firstName: 'John', lastName: 'Doe' },
+ *     workspaceId: 'ws-123',
+ *     organizationId: 'org-123',
+ *     apiGatewayUrl: 'https://api.example.com/workspaces/graphql',
+ *     authToken: 'token',
+ *     registerNavItems: (items) => { return () => {}; },
+ *   };
+ *
+ *   return <ChannelRoot {...props} />;
+ * }
+ * ```
+ */
+export declare const ChannelRoot: FC<ChannelRootProps>;
+//# sourceMappingURL=ChannelRoot.d.ts.map

package/dist/channel/ChannelRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelRoot.d.ts","sourceRoot":"","sources":["../../src/channel/ChannelRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,OAAO,KAAK,EAAW,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAiG5C,CAAC"}

package/dist/channel/ChannelRoot.js

@@ -0,0 +1,81 @@
+import { ChannelProvider as e } from "./providers/ChannelProvider.js";
+import { ChannelRoutes as t } from "./ChannelRoutes.js";
+import { useCallback as n, useEffect as r } from "react";
+import { ErrorBoundary as i } from "@burdenoff/fe-libs/shared/components";
+import { useI18n as a } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Cable as o, Radio as s, Send as c, Settings as l } from "lucide-react";
+import { jsx as u } from "react/jsx-runtime";
+import { FeatureFlagProvider as d } from "@burdenoff/fe-libs/shared/feature-flags";
+//#region src/channel/ChannelRoot.tsx
+var f = (f) => {
+	let { registerNavItems: p, registerFooterItems: m, basePath: h = "/" } = f, { t: g } = a(), _ = n((e, t) => {
+		let n = g(e);
+		return n === e ? t : n;
+	}, [g]), v = (e, t) => (e.endsWith("/") ? e.slice(0, -1) : e) + (t.startsWith("/") ? t : `/${t}`);
+	return r(() => {
+		if (p) return p([
+			{
+				id: "channel-channels",
+				label: _("channel.channels", "Channels"),
+				path: h === "/" ? "/" : v(h, "list"),
+				icon: /* @__PURE__ */ u(s, { size: 20 }),
+				order: 100,
+				group: "channel"
+			},
+			{
+				id: "channel-connections",
+				label: _("channel.connections", "Connections"),
+				path: v(h, "connections"),
+				icon: /* @__PURE__ */ u(o, { size: 20 }),
+				order: 110,
+				group: "channel"
+			},
+			{
+				id: "channel-send",
+				label: _("channel.sendMessage", "Send Message"),
+				path: v(h, "send"),
+				icon: /* @__PURE__ */ u(c, { size: 20 }),
+				order: 120,
+				group: "channel"
+			},
+			{
+				id: "channel-settings",
+				label: _("channel.settings", "Settings"),
+				path: v(h, "settings"),
+				icon: /* @__PURE__ */ u(l, { size: 20 }),
+				order: 130,
+				group: "channel"
+			}
+		]);
+	}, [
+		p,
+		h,
+		_
+	]), r(() => {
+		if (m) return m([{
+			id: "channel-status",
+			label: _("channel.channelsReady", "Channels Ready"),
+			type: "status",
+			order: 10,
+			section: "left"
+		}]);
+	}, [m, _]), /* @__PURE__ */ u(i, {
+		fallback: /* @__PURE__ */ u("div", {
+			className: "p-6 text-center text-text-secondary",
+			children: "Something went wrong loading this module. Please refresh the page."
+		}),
+		children: /* @__PURE__ */ u(d, {
+			workspaceId: null,
+			gateway: "global",
+			defaultEnabled: !0,
+			children: /* @__PURE__ */ u(e, {
+				...f,
+				children: /* @__PURE__ */ u(t, {})
+			})
+		})
+	});
+};
+//#endregion
+export { f as ChannelRoot };
+
+//# sourceMappingURL=ChannelRoot.js.map

package/dist/channel/ChannelRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelRoot.js","names":[],"sources":["../../src/channel/ChannelRoot.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useEffect, useCallback } from 'react';\nimport { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Radio, Cable, Send, Settings } from 'lucide-react';\nimport { ChannelProvider } from './providers/ChannelProvider';\nimport { FeatureFlagProvider } from '@burdenoff/fe-libs/shared/feature-flags';\nimport type { NavItem, ChannelRootProps } from './types';\nimport { ChannelRoutes } from './ChannelRoutes';\n\n/**\n * Root component for the Channel microfrontend.\n *\n * This is the main entry point that host applications import and render.\n * It sets up the necessary providers and renders the internal routing.\n * Automatically registers navigation items with the shell if registration functions are provided.\n *\n * @example\n * ```tsx\n * import { ChannelRoot, type ChannelRootProps } from '@burdenoff/microfe-channel';\n *\n * function App() {\n *   const props: ChannelRootProps = {\n *     basePath: '/channels',\n *     navigate: (path) => router.push(path),\n *     currentUser: { id: '1', email: 'user@example.com', firstName: 'John', lastName: 'Doe' },\n *     workspaceId: 'ws-123',\n *     organizationId: 'org-123',\n *     apiGatewayUrl: 'https://api.example.com/workspaces/graphql',\n *     authToken: 'token',\n *     registerNavItems: (items) => { return () => {}; },\n *   };\n *\n *   return <ChannelRoot {...props} />;\n * }\n * ```\n */\nexport const ChannelRoot: FC<ChannelRootProps> = (props) => {\n  const { registerNavItems, registerFooterItems, basePath = '/' } = props;\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  // Helper to join paths correctly, avoiding double slashes\n  const joinPath = (base: string, path: string): string => {\n    const cleanBase = base.endsWith('/') ? base.slice(0, -1) : base;\n    const cleanPath = path.startsWith('/') ? path : `/${path}`;\n    return cleanBase + cleanPath;\n  };\n\n  // Register navigation items with the shell\n  useEffect(() => {\n    if (!registerNavItems) return;\n\n    const navItems: NavItem[] = [\n      {\n        id: 'channel-channels',\n        label: tr('channel.channels', 'Channels'),\n        path: basePath === '/' ? '/' : joinPath(basePath, 'list'),\n        icon: <Radio size={20} />,\n        order: 100,\n        group: 'channel',\n      },\n      {\n        id: 'channel-connections',\n        label: tr('channel.connections', 'Connections'),\n        path: joinPath(basePath, 'connections'),\n        icon: <Cable size={20} />,\n        order: 110,\n        group: 'channel',\n      },\n      {\n        id: 'channel-send',\n        label: tr('channel.sendMessage', 'Send Message'),\n        path: joinPath(basePath, 'send'),\n        icon: <Send size={20} />,\n        order: 120,\n        group: 'channel',\n      },\n      {\n        id: 'channel-settings',\n        label: tr('channel.settings', 'Settings'),\n        path: joinPath(basePath, 'settings'),\n        icon: <Settings size={20} />,\n        order: 130,\n        group: 'channel',\n      },\n    ];\n\n    // Register and get cleanup function\n    const cleanup = registerNavItems(navItems);\n\n    // Return cleanup function to unregister on unmount\n    return cleanup;\n  }, [registerNavItems, basePath, tr]);\n\n  // Register footer items (example: Channel status indicator in left section)\n  useEffect(() => {\n    if (!registerFooterItems) return;\n\n    const footerItems = [\n      {\n        id: 'channel-status',\n        label: tr('channel.channelsReady', 'Channels Ready'),\n        type: 'status' as const,\n        order: 10,\n        section: 'left' as const,\n      },\n    ];\n\n    const cleanup = registerFooterItems(footerItems);\n    return cleanup;\n  }, [registerFooterItems, tr]);\n\n  return (\n    <ErrorBoundary\n      fallback={\n        <div className=\"p-6 text-center text-text-secondary\">\n          Something went wrong loading this module. Please refresh the page.\n        </div>\n      }\n    >\n      <FeatureFlagProvider workspaceId={null} gateway=\"global\" defaultEnabled={true}>\n        <ChannelProvider {...props}>\n          <ChannelRoutes />\n        </ChannelProvider>\n      </FeatureFlagProvider>\n    </ErrorBoundary>\n  );\n};\n"],"mappings":";;;;;;;;;AAqCA,IAAa,KAAqC,MAAU;CAC1D,IAAM,EAAE,qBAAkB,wBAAqB,cAAW,QAAQ,GAC5D,EAAE,SAAM,GAAS,EACjB,IAAK,GACR,GAAa,MAA6B;EACzC,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEpC,CAAC,EAAE,CACJ,EAGK,KAAY,GAAc,OACZ,EAAK,SAAS,IAAI,GAAG,EAAK,MAAM,GAAG,GAAG,GAAG,MACzC,EAAK,WAAW,IAAI,GAAG,IAAO,IAAI;AAoEtD,QA/DA,QAAgB;AACT,QAyCL,QAHgB,EApCY;GAC1B;IACE,IAAI;IACJ,OAAO,EAAG,oBAAoB,WAAW;IACzC,MAAM,MAAa,MAAM,MAAM,EAAS,GAAU,OAAO;IACzD,MAAM,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;IACzB,OAAO;IACP,OAAO;IACR;GACD;IACE,IAAI;IACJ,OAAO,EAAG,uBAAuB,cAAc;IAC/C,MAAM,EAAS,GAAU,cAAc;IACvC,MAAM,kBAAC,GAAD,EAAO,MAAM,IAAM,CAAA;IACzB,OAAO;IACP,OAAO;IACR;GACD;IACE,IAAI;IACJ,OAAO,EAAG,uBAAuB,eAAe;IAChD,MAAM,EAAS,GAAU,OAAO;IAChC,MAAM,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA;IACxB,OAAO;IACP,OAAO;IACR;GACD;IACE,IAAI;IACJ,OAAO,EAAG,oBAAoB,WAAW;IACzC,MAAM,EAAS,GAAU,WAAW;IACpC,MAAM,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;IAC5B,OAAO;IACP,OAAO;IACR;GACF,CAGyC;IAIzC;EAAC;EAAkB;EAAU;EAAG,CAAC,EAGpC,QAAgB;AACT,QAaL,QADgB,EAVI,CAClB;GACE,IAAI;GACJ,OAAO,EAAG,yBAAyB,iBAAiB;GACpD,MAAM;GACN,OAAO;GACP,SAAS;GACV,CACF,CAE+C;IAE/C,CAAC,GAAqB,EAAG,CAAC,EAG3B,kBAAC,GAAD;EACE,UACE,kBAAC,OAAD;GAAK,WAAU;aAAsC;GAE/C,CAAA;YAGR,kBAAC,GAAD;GAAqB,aAAa;GAAM,SAAQ;GAAS,gBAAgB;aACvE,kBAAC,GAAD;IAAiB,GAAI;cACnB,kBAAC,GAAD,EAAiB,CAAA;IACD,CAAA;GACE,CAAA;EACR,CAAA"}

package/dist/channel/ChannelRoutes.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Internal router for the Channel microfrontend.
+ *
+ * The shell mounts this at /channels/* so all paths here are relative to /channels/.
+ * Every concrete route is wrapped with a FeatureGate so individual surfaces can
+ * be rolled out or kill-switched independently. Flag names follow
+ * `channels.<route-name>` (see vibecontrols-channel-stability tracker).
+ */
+export declare function ChannelRoutes(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChannelRoutes.d.ts.map

package/dist/channel/ChannelRoutes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelRoutes.d.ts","sourceRoot":"","sources":["../../src/channel/ChannelRoutes.tsx"],"names":[],"mappings":"AAmCA;;;;;;;GAOG;AACH,wBAAgB,aAAa,4CAoD5B"}

package/dist/channel/ChannelRoutes.js

@@ -0,0 +1,104 @@
+import { ChannelDashboardPage as e } from "./modules/channels/pages/ChannelDashboardPage.js";
+import { ChannelsListPage as t } from "./modules/channels/pages/ChannelsListPage.js";
+import { ChannelDetailsPage as n } from "./modules/channels/pages/ChannelDetailsPage.js";
+import { CreateChannelPage as r } from "./modules/channels/pages/CreateChannelPage.js";
+import { EditChannelPage as i } from "./modules/channels/pages/EditChannelPage.js";
+import { SendMessagePage as a } from "./modules/channels/pages/SendMessagePage.js";
+import { ConnectionsListPage as o } from "./modules/channels/pages/ConnectionsListPage.js";
+import { ConnectionDetailsPage as s } from "./modules/channels/pages/ConnectionDetailsPage.js";
+import { CreateConnectionPage as c } from "./modules/channels/pages/CreateConnectionPage.js";
+import { EditConnectionPage as l } from "./modules/channels/pages/EditConnectionPage.js";
+import { ChannelSettingsPage as u } from "./modules/channels/pages/ChannelSettingsPage.js";
+import { DeliveryHistoryPage as d } from "./modules/channels/pages/DeliveryHistoryPage.js";
+import { WebhookEventsPage as f } from "./modules/channels/pages/WebhookEventsPage.js";
+import { ChannelUsersPage as p } from "./modules/channels/pages/ChannelUsersPage.js";
+import "./modules/channels/pages/index.js";
+import { ChannelLandingPage as m } from "./pages/ChannelLandingPage.js";
+import { FeatureNotEnabled as h } from "./components/FeatureNotEnabled.js";
+import { Navigate as g, Route as _, Routes as v } from "react-router-dom";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { FeatureGate as x } from "@burdenoff/fe-libs/shared/feature-flags";
+//#region src/channel/ChannelRoutes.tsx
+function S(e, t) {
+	return /* @__PURE__ */ y(x, {
+		flag: e,
+		defaultValue: !1,
+		fallback: /* @__PURE__ */ y(h, { flag: e }),
+		children: t
+	});
+}
+function C() {
+	return /* @__PURE__ */ b(v, { children: [
+		/* @__PURE__ */ y(_, {
+			index: !0,
+			element: S("channels.dashboard", /* @__PURE__ */ y(m, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "dashboard",
+			element: S("channels.dashboard", /* @__PURE__ */ y(e, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "list",
+			element: S("channels.list", /* @__PURE__ */ y(t, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "create",
+			element: S("channels.create", /* @__PURE__ */ y(r, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: ":channelId",
+			element: S("channels.detail", /* @__PURE__ */ y(n, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: ":channelId/edit",
+			element: S("channels.edit", /* @__PURE__ */ y(i, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: ":channelId/deliveries",
+			element: S("channels.deliveries", /* @__PURE__ */ y(d, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: ":channelId/webhooks",
+			element: S("channels.webhooks", /* @__PURE__ */ y(f, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: ":channelId/users",
+			element: S("channels.users", /* @__PURE__ */ y(p, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "connections",
+			element: S("channels.connections.list", /* @__PURE__ */ y(o, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "connections/create",
+			element: S("channels.connections.create", /* @__PURE__ */ y(c, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "connections/:connectionId",
+			element: S("channels.connections.detail", /* @__PURE__ */ y(s, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "connections/:connectionId/edit",
+			element: S("channels.connections.edit", /* @__PURE__ */ y(l, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "send",
+			element: S("channels.send", /* @__PURE__ */ y(a, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "settings",
+			element: S("channels.settings", /* @__PURE__ */ y(u, {}))
+		}),
+		/* @__PURE__ */ y(_, {
+			path: "*",
+			element: /* @__PURE__ */ y(g, {
+				to: "dashboard",
+				replace: !0
+			})
+		})
+	] });
+}
+//#endregion
+export { C as ChannelRoutes };
+
+//# sourceMappingURL=ChannelRoutes.js.map

package/dist/channel/ChannelRoutes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelRoutes.js","names":[],"sources":["../../src/channel/ChannelRoutes.tsx"],"sourcesContent":["import { Navigate, Route, Routes } from 'react-router-dom';\nimport { FeatureGate } from '@burdenoff/fe-libs/shared/feature-flags';\nimport {\n  ChannelDashboardPage,\n  ChannelsListPage,\n  ChannelDetailsPage,\n  CreateChannelPage,\n  EditChannelPage,\n  SendMessagePage,\n  ConnectionsListPage,\n  ConnectionDetailsPage,\n  CreateConnectionPage,\n  EditConnectionPage,\n  ChannelSettingsPage,\n  DeliveryHistoryPage,\n  WebhookEventsPage,\n  ChannelUsersPage,\n} from './modules/channels/pages';\nimport { ChannelLandingPage } from './pages/ChannelLandingPage';\nimport { FeatureNotEnabled } from './components/FeatureNotEnabled';\nimport type { ReactNode } from 'react';\n\n/**\n * Wraps a route element in a FeatureGate. Unknown / absent flags default to\n * disabled (defaultValue=false) so a not-yet-rolled-out flag is treated as\n * off — the user sees a soft \"Feature not enabled\" panel, not a 500.\n */\nfunction gated(flag: string, element: ReactNode): ReactNode {\n  return (\n    <FeatureGate flag={flag} defaultValue={false} fallback={<FeatureNotEnabled flag={flag} />}>\n      {element}\n    </FeatureGate>\n  );\n}\n\n/**\n * Internal router for the Channel microfrontend.\n *\n * The shell mounts this at /channels/* so all paths here are relative to /channels/.\n * Every concrete route is wrapped with a FeatureGate so individual surfaces can\n * be rolled out or kill-switched independently. Flag names follow\n * `channels.<route-name>` (see vibecontrols-channel-stability tracker).\n */\nexport function ChannelRoutes() {\n  return (\n    <Routes>\n      {/* Tabbed landing — gated under the dashboard flag */}\n      <Route index element={gated('channels.dashboard', <ChannelLandingPage />)} />\n\n      {/* Dashboard */}\n      <Route path=\"dashboard\" element={gated('channels.dashboard', <ChannelDashboardPage />)} />\n\n      {/* Channel CRUD — flat under /channels/ */}\n      <Route path=\"list\" element={gated('channels.list', <ChannelsListPage />)} />\n      <Route path=\"create\" element={gated('channels.create', <CreateChannelPage />)} />\n      <Route path=\":channelId\" element={gated('channels.detail', <ChannelDetailsPage />)} />\n      <Route path=\":channelId/edit\" element={gated('channels.edit', <EditChannelPage />)} />\n      <Route\n        path=\":channelId/deliveries\"\n        element={gated('channels.deliveries', <DeliveryHistoryPage />)}\n      />\n      <Route\n        path=\":channelId/webhooks\"\n        element={gated('channels.webhooks', <WebhookEventsPage />)}\n      />\n      <Route path=\":channelId/users\" element={gated('channels.users', <ChannelUsersPage />)} />\n\n      {/* Connections */}\n      <Route\n        path=\"connections\"\n        element={gated('channels.connections.list', <ConnectionsListPage />)}\n      />\n      <Route\n        path=\"connections/create\"\n        element={gated('channels.connections.create', <CreateConnectionPage />)}\n      />\n      <Route\n        path=\"connections/:connectionId\"\n        element={gated('channels.connections.detail', <ConnectionDetailsPage />)}\n      />\n      <Route\n        path=\"connections/:connectionId/edit\"\n        element={gated('channels.connections.edit', <EditConnectionPage />)}\n      />\n\n      {/* Send Message */}\n      <Route path=\"send\" element={gated('channels.send', <SendMessagePage />)} />\n\n      {/* Settings */}\n      <Route path=\"settings\" element={gated('channels.settings', <ChannelSettingsPage />)} />\n\n      {/* Catch-all → dashboard */}\n      <Route path=\"*\" element={<Navigate to=\"dashboard\" replace />} />\n    </Routes>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,SAAS,EAAM,GAAc,GAA+B;AAC1D,QACE,kBAAC,GAAD;EAAmB;EAAM,cAAc;EAAO,UAAU,kBAAC,GAAD,EAAyB,SAAQ,CAAA;YACtF;EACW,CAAA;;AAYlB,SAAgB,IAAgB;AAC9B,QACE,kBAAC,GAAD,EAAA,UAAA;EAEE,kBAAC,GAAD;GAAO,OAAA;GAAM,SAAS,EAAM,sBAAsB,kBAAC,GAAD,EAAsB,CAAA,CAAC;GAAI,CAAA;EAG7E,kBAAC,GAAD;GAAO,MAAK;GAAY,SAAS,EAAM,sBAAsB,kBAAC,GAAD,EAAwB,CAAA,CAAC;GAAI,CAAA;EAG1F,kBAAC,GAAD;GAAO,MAAK;GAAO,SAAS,EAAM,iBAAiB,kBAAC,GAAD,EAAoB,CAAA,CAAC;GAAI,CAAA;EAC5E,kBAAC,GAAD;GAAO,MAAK;GAAS,SAAS,EAAM,mBAAmB,kBAAC,GAAD,EAAqB,CAAA,CAAC;GAAI,CAAA;EACjF,kBAAC,GAAD;GAAO,MAAK;GAAa,SAAS,EAAM,mBAAmB,kBAAC,GAAD,EAAsB,CAAA,CAAC;GAAI,CAAA;EACtF,kBAAC,GAAD;GAAO,MAAK;GAAkB,SAAS,EAAM,iBAAiB,kBAAC,GAAD,EAAmB,CAAA,CAAC;GAAI,CAAA;EACtF,kBAAC,GAAD;GACE,MAAK;GACL,SAAS,EAAM,uBAAuB,kBAAC,GAAD,EAAuB,CAAA,CAAC;GAC9D,CAAA;EACF,kBAAC,GAAD;GACE,MAAK;GACL,SAAS,EAAM,qBAAqB,kBAAC,GAAD,EAAqB,CAAA,CAAC;GAC1D,CAAA;EACF,kBAAC,GAAD;GAAO,MAAK;GAAmB,SAAS,EAAM,kBAAkB,kBAAC,GAAD,EAAoB,CAAA,CAAC;GAAI,CAAA;EAGzF,kBAAC,GAAD;GACE,MAAK;GACL,SAAS,EAAM,6BAA6B,kBAAC,GAAD,EAAuB,CAAA,CAAC;GACpE,CAAA;EACF,kBAAC,GAAD;GACE,MAAK;GACL,SAAS,EAAM,+BAA+B,kBAAC,GAAD,EAAwB,CAAA,CAAC;GACvE,CAAA;EACF,kBAAC,GAAD;GACE,MAAK;GACL,SAAS,EAAM,+BAA+B,kBAAC,GAAD,EAAyB,CAAA,CAAC;GACxE,CAAA;EACF,kBAAC,GAAD;GACE,MAAK;GACL,SAAS,EAAM,6BAA6B,kBAAC,GAAD,EAAsB,CAAA,CAAC;GACnE,CAAA;EAGF,kBAAC,GAAD;GAAO,MAAK;GAAO,SAAS,EAAM,iBAAiB,kBAAC,GAAD,EAAmB,CAAA,CAAC;GAAI,CAAA;EAG3E,kBAAC,GAAD;GAAO,MAAK;GAAW,SAAS,EAAM,qBAAqB,kBAAC,GAAD,EAAuB,CAAA,CAAC;GAAI,CAAA;EAGvF,kBAAC,GAAD;GAAO,MAAK;GAAI,SAAS,kBAAC,GAAD;IAAU,IAAG;IAAY,SAAA;IAAU,CAAA;GAAI,CAAA;EACzD,EAAA,CAAA"}

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

@@ -0,0 +1,20 @@
+import { AdapterType } from '../hooks/useChannels';
+
+interface AdapterCredentialsFormProps {
+    adapterType: AdapterType | undefined;
+    credentials: Record<string, unknown>;
+    onChange: (credentials: Record<string, unknown>) => void;
+    onValidationChange?: (isValid: boolean, errors: string[]) => void;
+    disabled?: boolean;
+    showPlatformMetadata?: boolean;
+}
+export declare function AdapterCredentialsForm({ adapterType, credentials, onChange, onValidationChange, disabled, showPlatformMetadata, }: AdapterCredentialsFormProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compact validation status indicator
+ */
+export declare function CredentialValidationStatus({ adapterType, credentials, }: {
+    adapterType: AdapterType | undefined;
+    credentials: Record<string, unknown>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=AdapterCredentialsForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AdapterCredentialsForm.d.ts","sourceRoot":"","sources":["../../../src/channel/components/AdapterCredentialsForm.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAQxD,UAAU,2BAA2B;IACnC,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACzD,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,QAAgB,EAChB,oBAA2B,GAC5B,EAAE,2BAA2B,2CA0O7B;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,WAAW,EACX,WAAW,GACZ,EAAE;IACD,WAAW,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC,kDA8BA"}

package/dist/channel/components/AdapterCredentialsForm.js

@@ -0,0 +1,230 @@
+import { getAdapterCredentialSchema as e, getDefaultCredentials as t, validateCredentials as n } from "../config/adapterCredentials.js";
+import { useEffect as r, useState as i } from "react";
+import { useI18n as a } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as o, CheckCircle2 as s, ExternalLink as c, Eye as l, EyeOff as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/channel/components/AdapterCredentialsForm.tsx
+function m({ adapterType: s, credentials: m, onChange: h, onValidationChange: g, disabled: _ = !1, showPlatformMetadata: v = !0 }) {
+	let { t: y } = a(), b = (e, t) => {
+		let n = y(e);
+		return n === e ? t : n;
+	}, [x, S] = i({}), [C, w] = i({}), T = e(s);
+	if (r(() => {
+		if (s) {
+			let e = {
+				...t(s),
+				...m
+			};
+			JSON.stringify(e) !== JSON.stringify(m) && h(e);
+		}
+	}, [s]), r(() => {
+		if (g && s) {
+			let { valid: e, errors: t } = n(s, m);
+			g(e, t);
+		}
+	}, [
+		m,
+		s,
+		g
+	]), !s) return /* @__PURE__ */ f("div", {
+		className: "text-center py-6 text-muted-foreground",
+		children: /* @__PURE__ */ f("p", {
+			className: "text-sm",
+			children: b("channel.selectAdapterType", "Select an adapter type to configure credentials")
+		})
+	});
+	if (!T) return /* @__PURE__ */ f("div", {
+		className: "p-4 bg-warning-100 border border-warning-300 rounded-lg",
+		children: /* @__PURE__ */ p("div", {
+			className: "flex items-start gap-2",
+			children: [/* @__PURE__ */ f(o, {
+				size: 16,
+				className: "text-warning-500 mt-0.5"
+			}), /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("p", {
+				className: "text-sm font-medium text-warning-700",
+				children: [
+					b("channel.noCredentialSchema", "No credential schema defined for"),
+					" ",
+					s
+				]
+			}), /* @__PURE__ */ f("p", {
+				className: "text-xs text-warning-600 mt-1",
+				children: b("channel.enterCredentialsAsJson", "You can still enter credentials as JSON in the raw format below.")
+			})] })]
+		})
+	});
+	let E = (e, t) => {
+		h({
+			...m,
+			[e]: t
+		});
+	}, D = (e) => {
+		w((t) => ({
+			...t,
+			[e]: !0
+		}));
+	}, O = (e) => {
+		S((t) => ({
+			...t,
+			[e]: !t[e]
+		}));
+	}, k = (e) => {
+		let t = m[e.key], n = C[e.key] && e.required && !t, r = `w-full px-3 py-2 text-sm bg-surface border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary disabled:opacity-50 disabled:cursor-not-allowed ${n ? "border-error-500" : "border-border"}`;
+		return /* @__PURE__ */ p("div", { children: [
+			/* @__PURE__ */ p("label", {
+				className: "block text-sm font-medium text-foreground mb-1.5",
+				children: [e.displayName, e.required && /* @__PURE__ */ f("span", {
+					className: "text-error-500 ml-1",
+					children: "*"
+				})]
+			}),
+			e.type === "text" && /* @__PURE__ */ f("input", {
+				type: "text",
+				value: t || "",
+				onChange: (t) => E(e.key, t.target.value),
+				onBlur: () => D(e.key),
+				disabled: _,
+				placeholder: e.placeholder,
+				className: r
+			}),
+			e.type === "password" && /* @__PURE__ */ p("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ f("input", {
+					type: x[e.key] ? "text" : "password",
+					value: t || "",
+					onChange: (t) => E(e.key, t.target.value),
+					onBlur: () => D(e.key),
+					disabled: _,
+					placeholder: e.placeholder,
+					className: `${r} pr-10`
+				}), /* @__PURE__ */ f("button", {
+					type: "button",
+					onClick: () => O(e.key),
+					className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground",
+					tabIndex: -1,
+					children: x[e.key] ? /* @__PURE__ */ f(u, { size: 16 }) : /* @__PURE__ */ f(l, { size: 16 })
+				})]
+			}),
+			e.type === "textarea" && /* @__PURE__ */ f("textarea", {
+				value: t || "",
+				onChange: (t) => E(e.key, t.target.value),
+				onBlur: () => D(e.key),
+				disabled: _,
+				placeholder: e.placeholder,
+				rows: 4,
+				className: `${r} resize-none font-mono text-xs`
+			}),
+			e.type === "number" && /* @__PURE__ */ f("input", {
+				type: "number",
+				value: t ?? e.defaultValue ?? "",
+				onChange: (t) => E(e.key, t.target.value ? Number(t.target.value) : void 0),
+				onBlur: () => D(e.key),
+				disabled: _,
+				placeholder: e.placeholder,
+				className: r
+			}),
+			e.type === "boolean" && /* @__PURE__ */ p("label", {
+				className: "flex items-center gap-2 cursor-pointer",
+				children: [/* @__PURE__ */ f("input", {
+					type: "checkbox",
+					checked: t ?? e.defaultValue ?? !1,
+					onChange: (t) => E(e.key, t.target.checked),
+					disabled: _,
+					className: "w-4 h-4 rounded border-border text-accent-primary focus:ring-accent-primary"
+				}), /* @__PURE__ */ f("span", {
+					className: "text-sm text-muted-foreground",
+					children: e.description
+				})]
+			}),
+			e.type === "select" && e.options && /* @__PURE__ */ p("select", {
+				value: t ?? e.defaultValue ?? "",
+				onChange: (t) => E(e.key, t.target.value),
+				onBlur: () => D(e.key),
+				disabled: _,
+				className: `${r} bg-bg-surface`,
+				children: [/* @__PURE__ */ p("option", {
+					value: "",
+					children: [
+						b("channel.select", "Select"),
+						" ",
+						e.displayName.toLowerCase()
+					]
+				}), e.options.map((e) => /* @__PURE__ */ f("option", {
+					value: e.value,
+					children: e.label
+				}, e.value))]
+			}),
+			e.type !== "boolean" && /* @__PURE__ */ f("p", {
+				className: "mt-1 text-xs text-muted-foreground",
+				children: e.description
+			}),
+			n && /* @__PURE__ */ f("p", {
+				className: "mt-1 text-xs text-error-500",
+				children: b("channel.fieldRequired", "This field is required")
+			})
+		] }, e.key);
+	};
+	return /* @__PURE__ */ p("div", {
+		className: "space-y-5",
+		children: [/* @__PURE__ */ p("div", {
+			className: "flex items-start justify-between",
+			children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h3", {
+				className: "text-sm font-semibold text-foreground",
+				children: T.displayName
+			}), /* @__PURE__ */ f("p", {
+				className: "text-xs text-muted-foreground mt-0.5",
+				children: T.description
+			})] }), T.docUrl && /* @__PURE__ */ p("a", {
+				href: T.docUrl,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: "flex items-center gap-1 text-xs text-accent-primary hover:text-accent-primary-hover",
+				children: [/* @__PURE__ */ f("span", { children: b("channel.docs", "Docs") }), /* @__PURE__ */ f(c, { size: 12 })]
+			})]
+		}), /* @__PURE__ */ p("div", {
+			className: "space-y-4",
+			children: [T.credentials.length > 0 && /* @__PURE__ */ f("div", {
+				className: "space-y-4",
+				children: T.credentials.map(k)
+			}), v && T.platformMetadata && T.platformMetadata.length > 0 && /* @__PURE__ */ f(d, { children: /* @__PURE__ */ p("div", {
+				className: "border-t border-border pt-4 mt-4",
+				children: [/* @__PURE__ */ f("p", {
+					className: "text-xs font-medium text-muted-foreground mb-3",
+					children: b("channel.optionalSettings", "Optional Settings")
+				}), /* @__PURE__ */ f("div", {
+					className: "space-y-4",
+					children: T.platformMetadata.map(k)
+				})]
+			}) })]
+		})]
+	});
+}
+function h({ adapterType: e, credentials: t }) {
+	let { t: r } = a(), i = (e, t) => {
+		let n = r(e);
+		return n === e ? t : n;
+	};
+	if (!e) return null;
+	let { valid: c, errors: l } = n(e, t);
+	return c ? /* @__PURE__ */ p("div", {
+		className: "flex items-center gap-1.5 text-success-500",
+		children: [/* @__PURE__ */ f(s, { size: 14 }), /* @__PURE__ */ f("span", {
+			className: "text-xs",
+			children: i("channel.allRequiredFieldsFilled", "All required fields filled")
+		})]
+	}) : /* @__PURE__ */ p("div", {
+		className: "flex items-center gap-1.5 text-warning-500",
+		children: [/* @__PURE__ */ f(o, { size: 14 }), /* @__PURE__ */ p("span", {
+			className: "text-xs",
+			children: [
+				l.length,
+				" ",
+				i("channel.fieldsNeedAttention", "field(s) need attention")
+			]
+		})]
+	});
+}
+//#endregion
+export { m as AdapterCredentialsForm, h as CredentialValidationStatus };
+
+//# sourceMappingURL=AdapterCredentialsForm.js.map