@burdenoff/microfe-channel 2026.830.1 → 2026.830.2

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"CreateConnectionPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/CreateConnectionPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAoBH,wBAAgB,oBAAoB,gCA+QnC"}
+{"version":3,"file":"CreateConnectionPage.d.ts","sourceRoot":"","sources":["../../../../../src/channel/modules/channels/pages/CreateConnectionPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAYH,wBAAgB,oBAAoB,gCAiUnC"}

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

@@ -1,65 +1,71 @@
-import { useChannel as e } from "../../../providers/ChannelProvider.js";
-import { useChannel as t, useChannels as n } from "../../../hooks/useChannels.js";
-import { PermissionGuard as r } from "../../../components/PermissionGuard.js";
-import { CHANNEL_PERMISSIONS as i } from "../../../constants/permissions.js";
-import { useMemo as a, useState as o } from "react";
-import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useTr as e } from "../../../hooks/useTr.js";
+import { useChannel as t } from "../../../providers/ChannelProvider.js";
+import { useChannel as n, useChannels as r } from "../../../hooks/useChannels.js";
+import { PermissionGuard as i } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as a } from "../../../constants/permissions.js";
+import { useMemo as o, useState as s } from "react";
 import { AlertCircle as c, ArrowLeft as l, Loader2 as u, Save as d, Shield as f } from "lucide-react";
 import { useNavigate as p, useSearchParams as m } from "react-router";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { EmphasisPanel as v, PagePurpose as y } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/CreateConnectionPage.tsx
-var b = [
-	{
-		value: "OAUTH2",
-		label: "OAuth 2.0",
-		help: "Authorization code flow"
-	},
-	{
-		value: "API_KEY",
-		label: "API Key",
-		help: "Static API key"
-	},
-	{
-		value: "BOT_TOKEN",
-		label: "Bot Token",
-		help: "Slack/Discord/Teams bot token"
-	},
-	{
-		value: "WEBHOOK",
-		label: "Webhook",
-		help: "Shared secret for HMAC verification"
-	},
-	{
-		value: "SMTP_IMAP",
-		label: "SMTP / IMAP",
-		help: "Mail server credentials"
-	}
-];
-function x() {
-	let x = p(), [S] = m(), { organizationId: C } = e(), { channels: w, isLoading: T } = n(), { t: E } = s(), D = (e, t) => {
-		let n = E(e);
-		return n === e ? t : n;
-	}, [O, k] = o(S.get("channelId") ?? ""), { createConnection: A } = t(O), [j, M] = o("OAUTH2"), [N, P] = o(""), [F, I] = o(""), [L, R] = o(""), [z, B] = o(""), [V, H] = o(!1), [U, W] = o(null), G = a(() => w.find((e) => e.id === O) ?? null, [w, O]);
-	return /* @__PURE__ */ g(r, {
-		permission: i.CHANNEL_CONNECTION_CREATE,
+function b() {
+	let b = p(), [x] = m(), { organizationId: S } = t(), { channels: C, isLoading: w } = r(), T = e(), E = o(() => [
+		{
+			value: "OAUTH2",
+			labelKey: "channel.authTypeLabel.oauth2",
+			labelFallback: "OAuth 2.0",
+			helpKey: "channel.authTypeLabel.oauth2Help",
+			helpFallback: "Authorization code flow"
+		},
+		{
+			value: "API_KEY",
+			labelKey: "channel.authTypeLabel.apiKey",
+			labelFallback: "API Key",
+			helpKey: "channel.authTypeLabel.apiKeyHelp",
+			helpFallback: "Static API key"
+		},
+		{
+			value: "BOT_TOKEN",
+			labelKey: "channel.authTypeLabel.botToken",
+			labelFallback: "Bot Token",
+			helpKey: "channel.authTypeLabel.botTokenHelp",
+			helpFallback: "Slack/Discord/Teams bot token"
+		},
+		{
+			value: "WEBHOOK",
+			labelKey: "channel.authTypeLabel.webhook",
+			labelFallback: "Webhook",
+			helpKey: "channel.authTypeLabel.webhookHelp",
+			helpFallback: "Shared secret for HMAC verification"
+		},
+		{
+			value: "SMTP_IMAP",
+			labelKey: "channel.authTypeLabel.smtpImap",
+			labelFallback: "SMTP / IMAP",
+			helpKey: "channel.authTypeLabel.smtpImapHelp",
+			helpFallback: "Mail server credentials"
+		}
+	], []), [D, O] = s(x.get("channelId") ?? ""), { createConnection: k } = n(D), [A, j] = s("OAUTH2"), [M, N] = s(""), [P, F] = s(""), [I, L] = s(""), [R, z] = s(""), [B, V] = s(!1), [H, U] = s(null), W = o(() => C.find((e) => e.id === D) ?? null, [C, D]);
+	return /* @__PURE__ */ g(i, {
+		permission: a.CHANNEL_CONNECTION_CREATE,
 		children: /* @__PURE__ */ _("div", {
 			className: "container mx-auto p-6 max-w-2xl",
 			children: [
 				/* @__PURE__ */ _("button", {
 					type: "button",
-					onClick: () => x(-1),
+					onClick: () => b(-1),
 					className: "flex items-center gap-2 text-fg-muted hover:text-fg mb-6",
-					children: [/* @__PURE__ */ g(l, { className: "size-4 " }), D("common.back", "Back")]
+					children: [/* @__PURE__ */ g(l, { className: "size-4 " }), T("common.back", "Back")]
 				}),
 				/* @__PURE__ */ _("div", {
 					className: "flex items-center gap-3 mb-6",
 					children: [/* @__PURE__ */ g(f, { className: "size-7 text-accent-blue" }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
 						className: "text-2xl font-bold text-fg",
-						children: D("connection.create.title", "Create Connection")
+						children: T("connection.create.title", "Create Connection")
 					}), /* @__PURE__ */ g("p", {
 						className: "text-sm text-fg-muted",
-						children: D("connection.create.subtitle", "Authenticate a channel against its platform provider.")
+						children: T("connection.create.subtitle", "Authenticate a channel against its platform provider.")
 					})] })]
 				}),
 				/* @__PURE__ */ g(y, {
@@ -68,48 +74,48 @@ function x() {
 						"aria-hidden": "true"
 					}),
 					className: "mb-6",
-					children: D("connection.create.purpose", "Authenticate a channel against its provider so it can actually send. Choose the channel, the auth method (OAuth, API key, bot token, webhook secret or mail credentials) and enter the secrets — they are stored encrypted. Do this once per channel; without a connection a channel can't deliver anything.")
+					children: T("connection.create.purpose", "Authenticate a channel against its provider so it can actually send. Choose the channel, the auth method (OAuth, API key, bot token, webhook secret or mail credentials) and enter the secrets — they are stored encrypted. Do this once per channel; without a connection a channel can't deliver anything.")
 				}),
-				U && /* @__PURE__ */ _("div", {
+				H && /* @__PURE__ */ _("div", {
 					className: "bg-status-error-bg-subtle border border-status-error-bg-subtle rounded-lg p-4 mb-6 flex gap-3",
 					children: [/* @__PURE__ */ g(c, { className: "size-5 text-status-error-text shrink-0" }), /* @__PURE__ */ g("p", {
 						className: "text-sm text-status-error-text",
-						children: U
+						children: H
 					})]
 				}),
 				/* @__PURE__ */ g(v, {
 					className: "p-6",
 					children: /* @__PURE__ */ _("form", {
 						onSubmit: async (e) => {
-							if (e.preventDefault(), W(null), !O) {
-								W(D("connection.validation.channelRequired", "Pick a channel to connect"));
+							if (e.preventDefault(), U(null), !D) {
+								U(T("connection.validation.channelRequired", "Pick a channel to connect"));
 								return;
 							}
-							if (!C) {
-								W(D("connection.validation.organizationRequired", "Organization context missing"));
+							if (!S) {
+								U(T("connection.validation.organizationRequired", "Organization context missing"));
 								return;
 							}
 							let t;
-							if (z.trim()) try {
-								t = JSON.parse(z);
+							if (R.trim()) try {
+								t = JSON.parse(R);
 							} catch {
-								W(D("connection.validation.credentialsJson", "Credentials must be valid JSON"));
+								U(T("connection.validation.credentialsJson", "Credentials must be valid JSON"));
 								return;
 							}
-							H(!0);
+							V(!0);
 							try {
-								let e = await A({
-									authType: j,
-									authCode: N.trim() || void 0,
-									apiKey: F.trim() || void 0,
-									redirectUri: L.trim() || void 0,
+								let e = await k({
+									authType: A,
+									authCode: M.trim() || void 0,
+									apiKey: P.trim() || void 0,
+									redirectUri: I.trim() || void 0,
 									credentials: t
 								});
-								e ? x(`../${e.id}`) : W(D("connection.createFailed", "Failed to create connection"));
+								e ? b(`../${e.id}`) : U(T("connection.createFailed", "Failed to create connection"));
 							} catch (e) {
-								W(e instanceof Error ? e.message : D("connection.createFailed", "Failed to create connection"));
+								U(e instanceof Error ? e.message : T("connection.createFailed", "Failed to create connection"));
 							} finally {
-								H(!1);
+								V(!1);
 							}
 						},
 						className: "space-y-6",
@@ -117,18 +123,18 @@ function x() {
 							/* @__PURE__ */ _("div", { children: [
 								/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium text-fg mb-2",
-									children: [D("connection.field.channel", "Channel"), " *"]
+									children: [T("connection.field.channel", "Channel"), " *"]
 								}),
 								/* @__PURE__ */ _("select", {
-									value: O,
-									onChange: (e) => k(e.target.value),
+									value: D,
+									onChange: (e) => O(e.target.value),
 									className: "w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg",
 									required: !0,
-									disabled: T,
+									disabled: w,
 									children: [/* @__PURE__ */ g("option", {
 										value: "",
-										children: T ? D("common.loading", "Loading...") : D("connection.field.channelPlaceholder", "Select a channel")
-									}), w.map((e) => /* @__PURE__ */ _("option", {
+										children: w ? T("common.loading", "Loading...") : T("connection.field.channelPlaceholder", "Select a channel")
+									}), C.map((e) => /* @__PURE__ */ _("option", {
 										value: e.id,
 										children: [
 											e.name,
@@ -138,95 +144,95 @@ function x() {
 										]
 									}, e.id))]
 								}),
-								G && /* @__PURE__ */ _("p", {
+								W && /* @__PURE__ */ g("p", {
 									className: "mt-1 text-xs text-fg-muted",
-									children: [D("connection.field.channelHint", "Adapter: "), G.adapterType ?? "—"]
+									children: T("connection.field.channelHint", "Adapter: {{adapterType}}", { adapterType: W.adapterType ?? "—" })
 								})
 							] }),
 							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 								className: "block text-sm font-medium text-fg mb-2",
-								children: [D("connection.field.authType", "Authentication Type"), " *"]
+								children: [T("connection.field.authType", "Authentication Type"), " *"]
 							}), /* @__PURE__ */ g("select", {
-								value: j,
-								onChange: (e) => M(e.target.value),
+								value: A,
+								onChange: (e) => j(e.target.value),
 								className: "w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg",
 								required: !0,
-								children: b.map((e) => /* @__PURE__ */ _("option", {
+								children: E.map((e) => /* @__PURE__ */ _("option", {
 									value: e.value,
 									children: [
-										e.label,
+										T(e.labelKey, e.labelFallback),
 										": ",
-										e.help
+										T(e.helpKey, e.helpFallback)
 									]
 								}, e.value))
 							})] }),
-							j === "OAUTH2" && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							A === "OAUTH2" && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								htmlFor: "create-conn-auth-code",
 								className: "block text-sm font-medium text-fg mb-2",
-								children: D("connection.field.authCode", "OAuth Authorization Code")
+								children: T("connection.field.authCode", "OAuth Authorization Code")
 							}), /* @__PURE__ */ g("input", {
 								id: "create-conn-auth-code",
-								"aria-label": D("connection.field.authCode", "OAuth Authorization Code"),
+								"aria-label": T("connection.field.authCode", "OAuth Authorization Code"),
 								type: "text",
-								value: N,
-								onChange: (e) => P(e.target.value),
+								value: M,
+								onChange: (e) => N(e.target.value),
 								className: "w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg",
 								autoComplete: "off"
 							})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								htmlFor: "create-conn-redirect-uri",
 								className: "block text-sm font-medium text-fg mb-2",
-								children: D("connection.field.redirectUri", "Redirect URI")
+								children: T("connection.field.redirectUri", "Redirect URI")
 							}), /* @__PURE__ */ g("input", {
 								id: "create-conn-redirect-uri",
-								"aria-label": D("connection.field.redirectUri", "Redirect URI"),
+								"aria-label": T("connection.field.redirectUri", "Redirect URI"),
 								type: "url",
-								value: L,
-								onChange: (e) => R(e.target.value),
+								value: I,
+								onChange: (e) => L(e.target.value),
 								className: "w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg"
 							})] })] }),
-							(j === "API_KEY" || j === "BOT_TOKEN") && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+							(A === "API_KEY" || A === "BOT_TOKEN") && /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								htmlFor: "create-conn-api-key",
 								className: "block text-sm font-medium text-fg mb-2",
-								children: D("connection.field.apiKey", "API Key / Token")
+								children: T("connection.field.apiKey", "API Key / Token")
 							}), /* @__PURE__ */ g("input", {
 								id: "create-conn-api-key",
-								"aria-label": D("connection.field.apiKey", "API Key / Token"),
+								"aria-label": T("connection.field.apiKey", "API Key / Token"),
 								type: "password",
-								value: F,
-								onChange: (e) => I(e.target.value),
+								value: P,
+								onChange: (e) => F(e.target.value),
 								className: "w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg",
 								autoComplete: "new-password"
 							})] }),
 							/* @__PURE__ */ _("div", { children: [
 								/* @__PURE__ */ g("label", {
 									className: "block text-sm font-medium text-fg mb-2",
-									children: D("connection.field.credentials", "Additional Credentials (JSON)")
+									children: T("connection.field.credentials", "Additional Credentials (JSON)")
 								}),
 								/* @__PURE__ */ g("textarea", {
-									"aria-label": "{\"smtpHost\": \"smtp.example.com\"}",
-									value: z,
-									onChange: (e) => B(e.target.value),
+									"aria-label": T("connection.field.credentialsExample", "{\"smtpHost\": \"smtp.example.com\"}"),
+									value: R,
+									onChange: (e) => z(e.target.value),
 									rows: 6,
 									className: "w-full px-3 py-2 bg-bg border border-border-subtle rounded-md font-mono text-sm text-fg",
-									placeholder: "{\"smtpHost\": \"smtp.example.com\"}"
+									placeholder: T("connection.field.credentialsExample", "{\"smtpHost\": \"smtp.example.com\"}")
 								}),
 								/* @__PURE__ */ g("p", {
 									className: "mt-1 text-xs text-fg-muted",
-									children: D("connection.field.credentialsHint", "Encrypted at rest with AES-256-GCM. Never logged in plaintext.")
+									children: T("connection.field.credentialsHint", "Encrypted at rest with AES-256-GCM. Never logged in plaintext.")
 								})
 							] }),
 							/* @__PURE__ */ _("div", {
 								className: "flex gap-3 pt-2",
 								children: [/* @__PURE__ */ _("button", {
 									type: "submit",
-									disabled: V || !O,
+									disabled: B || !D,
 									className: "flex items-center gap-2 px-4 py-2 bg-accent-blue text-fg-on-accent rounded-md disabled:opacity-50",
-									children: [V ? /* @__PURE__ */ g(u, { className: "size-4 animate-spin" }) : /* @__PURE__ */ g(d, { className: "size-4 " }), D("connection.create.submit", "Create Connection")]
+									children: [B ? /* @__PURE__ */ g(u, { className: "size-4 animate-spin" }) : /* @__PURE__ */ g(d, { className: "size-4 " }), T("connection.create.submit", "Create Connection")]
 								}), /* @__PURE__ */ g("button", {
 									type: "button",
-									onClick: () => x(-1),
+									onClick: () => b(-1),
 									className: "px-4 py-2 text-fg border border-border-subtle rounded-md",
-									children: D("common.cancel", "Cancel")
+									children: T("common.cancel", "Cancel")
 								})]
 							})
 						]
@@ -237,6 +243,6 @@ function x() {
 	});
 }
 //#endregion
-export { x as CreateConnectionPage };
+export { b as CreateConnectionPage };
 
 //# sourceMappingURL=CreateConnectionPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CreateConnectionPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/CreateConnectionPage.tsx"],"sourcesContent":["/**\n * Create Connection Page\n *\n * Standalone page mounted at /channels/connections/create.\n * User picks a target channel, then provides auth details.\n *\n * Form fields match CreateConnectionInput exactly (less channelId which is\n * resolved from the selector).\n */\n\nimport { useMemo, useState } from 'react';\nimport { useNavigate, useSearchParams } from 'react-router';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ArrowLeft, Loader2, AlertCircle, Save, Shield } from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { useChannel, useChannels, type ChannelAuthType } from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\nconst AUTH_TYPES: { value: ChannelAuthType; label: string; help: string }[] = [\n  { value: 'OAUTH2', label: 'OAuth 2.0', help: 'Authorization code flow' },\n  { value: 'API_KEY', label: 'API Key', help: 'Static API key' },\n  { value: 'BOT_TOKEN', label: 'Bot Token', help: 'Slack/Discord/Teams bot token' },\n  { value: 'WEBHOOK', label: 'Webhook', help: 'Shared secret for HMAC verification' },\n  { value: 'SMTP_IMAP', label: 'SMTP / IMAP', help: 'Mail server credentials' },\n];\n\nexport function CreateConnectionPage() {\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const { organizationId } = useChannelContext();\n  const { channels, isLoading: channelsLoading } = useChannels();\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  const initialChannelId = searchParams.get('channelId') ?? '';\n  const [selectedChannelId, setSelectedChannelId] = useState<string>(initialChannelId);\n  const { createConnection } = useChannel(selectedChannelId);\n\n  const [authType, setAuthType] = useState<ChannelAuthType>('OAUTH2');\n  const [authCode, setAuthCode] = useState('');\n  const [apiKey, setApiKey] = useState('');\n  const [redirectUri, setRedirectUri] = useState('');\n  const [credentials, setCredentials] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const selectedChannel = useMemo(\n    () => channels.find((c) => c.id === selectedChannelId) ?? null,\n    [channels, selectedChannelId]\n  );\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    if (!selectedChannelId) {\n      setError(tr('connection.validation.channelRequired', 'Pick a channel to connect'));\n      return;\n    }\n    if (!organizationId) {\n      setError(tr('connection.validation.organizationRequired', 'Organization context missing'));\n      return;\n    }\n\n    let parsedCredentials: Record<string, unknown> | undefined;\n    if (credentials.trim()) {\n      try {\n        parsedCredentials = JSON.parse(credentials);\n      } catch {\n        setError(tr('connection.validation.credentialsJson', 'Credentials must be valid JSON'));\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    try {\n      const result = await createConnection({\n        authType,\n        authCode: authCode.trim() || undefined,\n        apiKey: apiKey.trim() || undefined,\n        redirectUri: redirectUri.trim() || undefined,\n        credentials: parsedCredentials,\n      });\n      if (result) {\n        navigate(`../${result.id}`);\n      } else {\n        setError(tr('connection.createFailed', 'Failed to create connection'));\n      }\n    } catch (err: unknown) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('connection.createFailed', 'Failed to create connection')\n      );\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_CONNECTION_CREATE}>\n      <div className=\"container mx-auto p-6 max-w-2xl\">\n        <button\n          type=\"button\"\n          onClick={() => navigate(-1)}\n          className=\"flex items-center gap-2 text-fg-muted hover:text-fg mb-6\"\n        >\n          <ArrowLeft className=\"size-4 \" />\n          {tr('common.back', 'Back')}\n        </button>\n\n        <div className=\"flex items-center gap-3 mb-6\">\n          <Shield className=\"size-7 text-accent-blue\" />\n          <div>\n            <h1 className=\"text-2xl font-bold text-fg\">\n              {tr('connection.create.title', 'Create Connection')}\n            </h1>\n            <p className=\"text-sm text-fg-muted\">\n              {tr(\n                'connection.create.subtitle',\n                'Authenticate a channel against its platform provider.'\n              )}\n            </p>\n          </div>\n        </div>\n\n        <PagePurpose icon={<Shield size={15} aria-hidden=\"true\" />} className=\"mb-6\">\n          {tr(\n            'connection.create.purpose',\n            \"Authenticate a channel against its provider so it can actually send. Choose the channel, the auth method (OAuth, API key, bot token, webhook secret or mail credentials) and enter the secrets — they are stored encrypted. Do this once per channel; without a connection a channel can't deliver anything.\"\n          )}\n        </PagePurpose>\n\n        {error && (\n          <div className=\"bg-status-error-bg-subtle border border-status-error-bg-subtle rounded-lg p-4 mb-6 flex gap-3\">\n            <AlertCircle className=\"size-5 text-status-error-text shrink-0\" />\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n\n        <EmphasisPanel className=\"p-6\">\n          <form onSubmit={handleSubmit} className=\"space-y-6\">\n            <div>\n              <label className=\"block text-sm font-medium text-fg mb-2\">\n                {tr('connection.field.channel', 'Channel')} *\n              </label>\n              <select\n                value={selectedChannelId}\n                onChange={(e) => setSelectedChannelId(e.target.value)}\n                className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                required\n                disabled={channelsLoading}\n              >\n                <option value=\"\">\n                  {channelsLoading\n                    ? tr('common.loading', 'Loading...')\n                    : tr('connection.field.channelPlaceholder', 'Select a channel')}\n                </option>\n                {channels.map((c) => (\n                  <option key={c.id} value={c.id}>\n                    {c.name} ({c.platform})\n                  </option>\n                ))}\n              </select>\n              {selectedChannel && (\n                <p className=\"mt-1 text-xs text-fg-muted\">\n                  {tr('connection.field.channelHint', 'Adapter: ')}\n                  {selectedChannel.adapterType ?? '—'}\n                </p>\n              )}\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-fg mb-2\">\n                {tr('connection.field.authType', 'Authentication Type')} *\n              </label>\n              <select\n                value={authType}\n                onChange={(e) => setAuthType(e.target.value as ChannelAuthType)}\n                className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                required\n              >\n                {AUTH_TYPES.map((a) => (\n                  <option key={a.value} value={a.value}>\n                    {a.label}: {a.help}\n                  </option>\n                ))}\n              </select>\n            </div>\n\n            {authType === 'OAUTH2' && (\n              <>\n                <div>\n                  <label\n                    htmlFor=\"create-conn-auth-code\"\n                    className=\"block text-sm font-medium text-fg mb-2\"\n                  >\n                    {tr('connection.field.authCode', 'OAuth Authorization Code')}\n                  </label>\n                  <input\n                    id=\"create-conn-auth-code\"\n                    aria-label={tr('connection.field.authCode', 'OAuth Authorization Code')}\n                    type=\"text\"\n                    value={authCode}\n                    onChange={(e) => setAuthCode(e.target.value)}\n                    className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                    autoComplete=\"off\"\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"create-conn-redirect-uri\"\n                    className=\"block text-sm font-medium text-fg mb-2\"\n                  >\n                    {tr('connection.field.redirectUri', 'Redirect URI')}\n                  </label>\n                  <input\n                    id=\"create-conn-redirect-uri\"\n                    aria-label={tr('connection.field.redirectUri', 'Redirect URI')}\n                    type=\"url\"\n                    value={redirectUri}\n                    onChange={(e) => setRedirectUri(e.target.value)}\n                    className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                  />\n                </div>\n              </>\n            )}\n\n            {(authType === 'API_KEY' || authType === 'BOT_TOKEN') && (\n              <div>\n                <label\n                  htmlFor=\"create-conn-api-key\"\n                  className=\"block text-sm font-medium text-fg mb-2\"\n                >\n                  {tr('connection.field.apiKey', 'API Key / Token')}\n                </label>\n                <input\n                  id=\"create-conn-api-key\"\n                  aria-label={tr('connection.field.apiKey', 'API Key / Token')}\n                  type=\"password\"\n                  value={apiKey}\n                  onChange={(e) => setApiKey(e.target.value)}\n                  className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                  autoComplete=\"new-password\"\n                />\n              </div>\n            )}\n\n            <div>\n              <label className=\"block text-sm font-medium text-fg mb-2\">\n                {tr('connection.field.credentials', 'Additional Credentials (JSON)')}\n              </label>\n              <textarea\n                aria-label='{\"smtpHost\": \"smtp.example.com\"}'\n                value={credentials}\n                onChange={(e) => setCredentials(e.target.value)}\n                rows={6}\n                className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md font-mono text-sm text-fg\"\n                placeholder='{\"smtpHost\": \"smtp.example.com\"}'\n              />\n              <p className=\"mt-1 text-xs text-fg-muted\">\n                {tr(\n                  'connection.field.credentialsHint',\n                  'Encrypted at rest with AES-256-GCM. Never logged in plaintext.'\n                )}\n              </p>\n            </div>\n\n            <div className=\"flex gap-3 pt-2\">\n              <button\n                type=\"submit\"\n                disabled={isSubmitting || !selectedChannelId}\n                className=\"flex items-center gap-2 px-4 py-2 bg-accent-blue text-fg-on-accent rounded-md disabled:opacity-50\"\n              >\n                {isSubmitting ? (\n                  <Loader2 className=\"size-4 animate-spin\" />\n                ) : (\n                  <Save className=\"size-4 \" />\n                )}\n                {tr('connection.create.submit', 'Create Connection')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => navigate(-1)}\n                className=\"px-4 py-2 text-fg border border-border-subtle rounded-md\"\n              >\n                {tr('common.cancel', 'Cancel')}\n              </button>\n            </div>\n          </form>\n        </EmphasisPanel>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CreateConnectionPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/CreateConnectionPage.tsx"],"sourcesContent":["/**\n * Create Connection Page\n *\n * Standalone page mounted at /channels/connections/create.\n * User picks a target channel, then provides auth details.\n *\n * Form fields match CreateConnectionInput exactly (less channelId which is\n * resolved from the selector).\n */\n\nimport { useMemo, useState } from 'react';\nimport { useNavigate, useSearchParams } from 'react-router';\nimport { useTr } from '../../../hooks/useTr';\nimport { ArrowLeft, Loader2, AlertCircle, Save, Shield } from 'lucide-react';\nimport { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { useChannel, useChannels, type ChannelAuthType } from '../../../hooks/useChannels';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\nexport function CreateConnectionPage() {\n  const navigate = useNavigate();\n  const [searchParams] = useSearchParams();\n  const { organizationId } = useChannelContext();\n  const { channels, isLoading: channelsLoading } = useChannels();\n  const tr = useTr();\n\n  const AUTH_TYPES: {\n    value: ChannelAuthType;\n    labelKey: string;\n    labelFallback: string;\n    helpKey: string;\n    helpFallback: string;\n  }[] = useMemo(\n    () => [\n      {\n        value: 'OAUTH2',\n        labelKey: 'channel.authTypeLabel.oauth2',\n        labelFallback: 'OAuth 2.0',\n        helpKey: 'channel.authTypeLabel.oauth2Help',\n        helpFallback: 'Authorization code flow',\n      },\n      {\n        value: 'API_KEY',\n        labelKey: 'channel.authTypeLabel.apiKey',\n        labelFallback: 'API Key',\n        helpKey: 'channel.authTypeLabel.apiKeyHelp',\n        helpFallback: 'Static API key',\n      },\n      {\n        value: 'BOT_TOKEN',\n        labelKey: 'channel.authTypeLabel.botToken',\n        labelFallback: 'Bot Token',\n        helpKey: 'channel.authTypeLabel.botTokenHelp',\n        helpFallback: 'Slack/Discord/Teams bot token',\n      },\n      {\n        value: 'WEBHOOK',\n        labelKey: 'channel.authTypeLabel.webhook',\n        labelFallback: 'Webhook',\n        helpKey: 'channel.authTypeLabel.webhookHelp',\n        helpFallback: 'Shared secret for HMAC verification',\n      },\n      {\n        value: 'SMTP_IMAP',\n        labelKey: 'channel.authTypeLabel.smtpImap',\n        labelFallback: 'SMTP / IMAP',\n        helpKey: 'channel.authTypeLabel.smtpImapHelp',\n        helpFallback: 'Mail server credentials',\n      },\n    ],\n    []\n  );\n\n  const initialChannelId = searchParams.get('channelId') ?? '';\n  const [selectedChannelId, setSelectedChannelId] = useState<string>(initialChannelId);\n  const { createConnection } = useChannel(selectedChannelId);\n\n  const [authType, setAuthType] = useState<ChannelAuthType>('OAUTH2');\n  const [authCode, setAuthCode] = useState('');\n  const [apiKey, setApiKey] = useState('');\n  const [redirectUri, setRedirectUri] = useState('');\n  const [credentials, setCredentials] = useState('');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const selectedChannel = useMemo(\n    () => channels.find((c) => c.id === selectedChannelId) ?? null,\n    [channels, selectedChannelId]\n  );\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n\n    if (!selectedChannelId) {\n      setError(tr('connection.validation.channelRequired', 'Pick a channel to connect'));\n      return;\n    }\n    if (!organizationId) {\n      setError(tr('connection.validation.organizationRequired', 'Organization context missing'));\n      return;\n    }\n\n    let parsedCredentials: Record<string, unknown> | undefined;\n    if (credentials.trim()) {\n      try {\n        parsedCredentials = JSON.parse(credentials);\n      } catch {\n        setError(tr('connection.validation.credentialsJson', 'Credentials must be valid JSON'));\n        return;\n      }\n    }\n\n    setIsSubmitting(true);\n    try {\n      const result = await createConnection({\n        authType,\n        authCode: authCode.trim() || undefined,\n        apiKey: apiKey.trim() || undefined,\n        redirectUri: redirectUri.trim() || undefined,\n        credentials: parsedCredentials,\n      });\n      if (result) {\n        navigate(`../${result.id}`);\n      } else {\n        setError(tr('connection.createFailed', 'Failed to create connection'));\n      }\n    } catch (err: unknown) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr('connection.createFailed', 'Failed to create connection')\n      );\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_CONNECTION_CREATE}>\n      <div className=\"container mx-auto p-6 max-w-2xl\">\n        <button\n          type=\"button\"\n          onClick={() => navigate(-1)}\n          className=\"flex items-center gap-2 text-fg-muted hover:text-fg mb-6\"\n        >\n          <ArrowLeft className=\"size-4 \" />\n          {tr('common.back', 'Back')}\n        </button>\n\n        <div className=\"flex items-center gap-3 mb-6\">\n          <Shield className=\"size-7 text-accent-blue\" />\n          <div>\n            <h1 className=\"text-2xl font-bold text-fg\">\n              {tr('connection.create.title', 'Create Connection')}\n            </h1>\n            <p className=\"text-sm text-fg-muted\">\n              {tr(\n                'connection.create.subtitle',\n                'Authenticate a channel against its platform provider.'\n              )}\n            </p>\n          </div>\n        </div>\n\n        <PagePurpose icon={<Shield size={15} aria-hidden=\"true\" />} className=\"mb-6\">\n          {tr(\n            'connection.create.purpose',\n            \"Authenticate a channel against its provider so it can actually send. Choose the channel, the auth method (OAuth, API key, bot token, webhook secret or mail credentials) and enter the secrets — they are stored encrypted. Do this once per channel; without a connection a channel can't deliver anything.\"\n          )}\n        </PagePurpose>\n\n        {error && (\n          <div className=\"bg-status-error-bg-subtle border border-status-error-bg-subtle rounded-lg p-4 mb-6 flex gap-3\">\n            <AlertCircle className=\"size-5 text-status-error-text shrink-0\" />\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n          </div>\n        )}\n\n        <EmphasisPanel className=\"p-6\">\n          <form onSubmit={handleSubmit} className=\"space-y-6\">\n            <div>\n              <label className=\"block text-sm font-medium text-fg mb-2\">\n                {tr('connection.field.channel', 'Channel')} *\n              </label>\n              <select\n                value={selectedChannelId}\n                onChange={(e) => setSelectedChannelId(e.target.value)}\n                className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                required\n                disabled={channelsLoading}\n              >\n                <option value=\"\">\n                  {channelsLoading\n                    ? tr('common.loading', 'Loading...')\n                    : tr('connection.field.channelPlaceholder', 'Select a channel')}\n                </option>\n                {channels.map((c) => (\n                  <option key={c.id} value={c.id}>\n                    {c.name} ({c.platform})\n                  </option>\n                ))}\n              </select>\n              {selectedChannel && (\n                <p className=\"mt-1 text-xs text-fg-muted\">\n                  {tr('connection.field.channelHint', 'Adapter: {{adapterType}}', {\n                    adapterType: selectedChannel.adapterType ?? '—',\n                  })}\n                </p>\n              )}\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-fg mb-2\">\n                {tr('connection.field.authType', 'Authentication Type')} *\n              </label>\n              <select\n                value={authType}\n                onChange={(e) => setAuthType(e.target.value as ChannelAuthType)}\n                className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                required\n              >\n                {AUTH_TYPES.map((a) => (\n                  <option key={a.value} value={a.value}>\n                    {tr(a.labelKey, a.labelFallback)}: {tr(a.helpKey, a.helpFallback)}\n                  </option>\n                ))}\n              </select>\n            </div>\n\n            {authType === 'OAUTH2' && (\n              <>\n                <div>\n                  <label\n                    htmlFor=\"create-conn-auth-code\"\n                    className=\"block text-sm font-medium text-fg mb-2\"\n                  >\n                    {tr('connection.field.authCode', 'OAuth Authorization Code')}\n                  </label>\n                  <input\n                    id=\"create-conn-auth-code\"\n                    aria-label={tr('connection.field.authCode', 'OAuth Authorization Code')}\n                    type=\"text\"\n                    value={authCode}\n                    onChange={(e) => setAuthCode(e.target.value)}\n                    className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                    autoComplete=\"off\"\n                  />\n                </div>\n                <div>\n                  <label\n                    htmlFor=\"create-conn-redirect-uri\"\n                    className=\"block text-sm font-medium text-fg mb-2\"\n                  >\n                    {tr('connection.field.redirectUri', 'Redirect URI')}\n                  </label>\n                  <input\n                    id=\"create-conn-redirect-uri\"\n                    aria-label={tr('connection.field.redirectUri', 'Redirect URI')}\n                    type=\"url\"\n                    value={redirectUri}\n                    onChange={(e) => setRedirectUri(e.target.value)}\n                    className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                  />\n                </div>\n              </>\n            )}\n\n            {(authType === 'API_KEY' || authType === 'BOT_TOKEN') && (\n              <div>\n                <label\n                  htmlFor=\"create-conn-api-key\"\n                  className=\"block text-sm font-medium text-fg mb-2\"\n                >\n                  {tr('connection.field.apiKey', 'API Key / Token')}\n                </label>\n                <input\n                  id=\"create-conn-api-key\"\n                  aria-label={tr('connection.field.apiKey', 'API Key / Token')}\n                  type=\"password\"\n                  value={apiKey}\n                  onChange={(e) => setApiKey(e.target.value)}\n                  className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md text-fg\"\n                  autoComplete=\"new-password\"\n                />\n              </div>\n            )}\n\n            <div>\n              <label className=\"block text-sm font-medium text-fg mb-2\">\n                {tr('connection.field.credentials', 'Additional Credentials (JSON)')}\n              </label>\n              <textarea\n                aria-label={tr(\n                  'connection.field.credentialsExample',\n                  '{\"smtpHost\": \"smtp.example.com\"}'\n                )}\n                value={credentials}\n                onChange={(e) => setCredentials(e.target.value)}\n                rows={6}\n                className=\"w-full px-3 py-2 bg-bg border border-border-subtle rounded-md font-mono text-sm text-fg\"\n                placeholder={tr(\n                  'connection.field.credentialsExample',\n                  '{\"smtpHost\": \"smtp.example.com\"}'\n                )}\n              />\n              <p className=\"mt-1 text-xs text-fg-muted\">\n                {tr(\n                  'connection.field.credentialsHint',\n                  'Encrypted at rest with AES-256-GCM. Never logged in plaintext.'\n                )}\n              </p>\n            </div>\n\n            <div className=\"flex gap-3 pt-2\">\n              <button\n                type=\"submit\"\n                disabled={isSubmitting || !selectedChannelId}\n                className=\"flex items-center gap-2 px-4 py-2 bg-accent-blue text-fg-on-accent rounded-md disabled:opacity-50\"\n              >\n                {isSubmitting ? (\n                  <Loader2 className=\"size-4 animate-spin\" />\n                ) : (\n                  <Save className=\"size-4 \" />\n                )}\n                {tr('connection.create.submit', 'Create Connection')}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => navigate(-1)}\n                className=\"px-4 py-2 text-fg border border-border-subtle rounded-md\"\n              >\n                {tr('common.cancel', 'Cancel')}\n              </button>\n            </div>\n          </form>\n        </EmphasisPanel>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}