@burdenoff/microfe-channel 2026.530.2 → 2026.624.1

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

@@ -1 +1 @@
-{"version":3,"file":"SendMessagePage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/SendMessagePage.tsx"],"sourcesContent":["/**\n * Send Message Page\n *\n * UI for sending notifications/messages through channels.\n * Supports single and bulk delivery with recipient management.\n */\n\nimport { useState, useCallback, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  ArrowLeft,\n  Send,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n  XCircle,\n  Plus,\n  X,\n  Mail,\n  Smartphone,\n  Bell,\n  MessageSquare,\n  Hash,\n  Users,\n  MessageCircle,\n} from 'lucide-react';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { useChannels } from '../../../hooks/useChannels';\nimport { getGlobalChannelClient } from '../../../graphql/global-client';\nimport { useSendNotificationMutation } from '../../../../generated/global-operations';\nimport {\n  ChannelPlatform,\n  NotificationChannel,\n  NotificationPriority,\n  RecipientInput,\n  TriggerNotificationInput,\n} from '../../../../generated/global-types';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface Recipient {\n  id: string;\n  address: string;\n  name?: string;\n}\n\ninterface DeliveryResult {\n  recipientId: string;\n  success: boolean;\n  messageId?: string;\n  error?: string;\n}\n\n// ============================================================================\n// PLATFORM CONFIG\n// ============================================================================\n\nconst PLATFORM_ICONS: Record<string, typeof Mail> = {\n  EMAIL: Mail,\n  SMS: Smartphone,\n  PUSH: Bell,\n  WHATSAPP: MessageSquare,\n  SLACK: Hash,\n  TEAMS: Users,\n  DISCORD: MessageCircle,\n  INAPP: Bell,\n  WEBCHAT: MessageSquare,\n  WEBHOOK: Send,\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport function SendMessagePage() {\n  const navigate = useNavigate();\n  const { channels } = useChannels();\n  const { organizationId, authToken, apiGatewayUrl } = useChannelContext();\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  // Get Apollo client for notification mutations\n  const client = getGlobalChannelClient(apiGatewayUrl, authToken, organizationId);\n\n  // Send notification via notification-svc (which calls channel-svc with service actor)\n  const [sendNotification, { loading: isSending }] = useSendNotificationMutation({ client });\n\n  // Channel selection\n  const [selectedChannelId, setSelectedChannelId] = useState('');\n  const [platform, setPlatform] = useState<ChannelPlatform>('EMAIL' as ChannelPlatform);\n\n  // Recipients\n  const [recipients, setRecipients] = useState<Recipient[]>([]);\n  const recipientIdCounter = useRef(0);\n  const [newAddress, setNewAddress] = useState('');\n  const [newName, setNewName] = useState('');\n\n  // Message content\n  const [subject, setSubject] = useState('');\n  const [body, setBody] = useState('');\n  const [priority, setPriority] = useState<NotificationPriority>(NotificationPriority.Medium);\n\n  // UI state\n  const [results, setResults] = useState<DeliveryResult[] | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  // Filter channels by platform\n  const filteredChannels = channels.filter((ch) => ch.platform === platform);\n\n  // Add recipient\n  const addRecipient = useCallback(() => {\n    if (!newAddress.trim()) return;\n\n    const recipient: Recipient = {\n      id: `r-${++recipientIdCounter.current}`,\n      address: newAddress.trim(),\n      name: newName.trim() || undefined,\n    };\n\n    setRecipients((prev) => [...prev, recipient]);\n    setNewAddress('');\n    setNewName('');\n  }, [newAddress, newName]);\n\n  // Remove recipient\n  const removeRecipient = useCallback((id: string) => {\n    setRecipients((prev) => prev.filter((r) => r.id !== id));\n  }, []);\n\n  // Clear results and reset\n  const handleReset = useCallback(() => {\n    setResults(null);\n    setError(null);\n    setSubject('');\n    setBody('');\n    setRecipients([]);\n  }, []);\n\n  // Send message via notification-svc (which handles service actor auth to channel-svc)\n  const handleSend = async () => {\n    if (!selectedChannelId) {\n      setError(tr('channel.validation.selectChannel', 'Please select a channel'));\n      return;\n    }\n\n    if (recipients.length === 0) {\n      setError(tr('channel.validation.addRecipient', 'Please add at least one recipient'));\n      return;\n    }\n\n    if (!body.trim()) {\n      setError(tr('channel.validation.enterMessage', 'Please enter a message'));\n      return;\n    }\n\n    setError(null);\n    setResults(null);\n\n    try {\n      // Find the selected channel to get platform and connection info\n      const selectedChannel = channels.find((ch) => ch.id === selectedChannelId);\n      if (!selectedChannel) {\n        setError(tr('channel.error.channelNotFound', 'Selected channel not found'));\n        return;\n      }\n\n      // Map ChannelPlatform to NotificationChannel\n      // Most platforms have the same name (EMAIL, SMS, PUSH, etc.)\n      // ChannelPlatform uses 'INAPP' but there's no INAPP in ChannelPlatform enum\n      // (only in PLATFORM_ICONS). We check using string literal.\n      const platformStr = platform as string;\n      const notificationChannel =\n        platformStr === 'INAPP'\n          ? NotificationChannel.InApp\n          : (platform as unknown as NotificationChannel);\n\n      // Send to each recipient in parallel via notification-svc\n      const deliveryResults: DeliveryResult[] = await Promise.all(\n        recipients.map(async (recipient): Promise<DeliveryResult> => {\n          // Build recipient input for notification-svc\n          const recipientInput: RecipientInput = {};\n          switch (platform) {\n            case 'EMAIL':\n              recipientInput.email = recipient.address;\n              break;\n            case 'SMS':\n            case 'WHATSAPP':\n              recipientInput.phoneNumber = recipient.address;\n              break;\n            case 'PUSH':\n              recipientInput.pushToken = recipient.address;\n              break;\n            case 'SLACK':\n              recipientInput.slackUserId = recipient.address;\n              break;\n            case 'TEAMS':\n              recipientInput.teamsUserId = recipient.address;\n              break;\n            case 'WEBHOOK':\n              recipientInput.webhookUrl = recipient.address;\n              break;\n            default:\n              recipientInput.email = recipient.address;\n          }\n\n          // Build TriggerNotificationInput - creates notification AND triggers delivery\n          const triggerInput: TriggerNotificationInput = {\n            channelId: selectedChannel.id,\n            platform: notificationChannel,\n            notification: {\n              body: body,\n              channel: notificationChannel,\n              recipient: recipientInput,\n              subject: platform === 'EMAIL' ? subject : undefined,\n              priority: priority,\n            },\n          };\n\n          try {\n            const result = await sendNotification({ variables: { input: triggerInput } });\n\n            if (result.data?.triggerNotification) {\n              const notification = result.data.triggerNotification;\n              // deliveryStatus is null at trigger time (async delivery hasn't completed yet).\n              // Use triggerStatus + status to determine immediate send success.\n              const failed =\n                notification.status === 'FAILED' || notification.triggerStatus === 'FAILED';\n              const errorDetail = notification.errorMessage || notification.errorCode;\n              return {\n                recipientId: recipient.id,\n                success: !failed,\n                messageId: notification.id,\n                error: failed\n                  ? errorDetail\n                    ? `Delivery failed: ${errorDetail}`\n                    : 'Delivery failed'\n                  : undefined,\n              };\n            }\n            return {\n              recipientId: recipient.id,\n              success: false,\n              error: result.error?.message || 'Failed to send notification',\n            };\n          } catch (err: unknown) {\n            return {\n              recipientId: recipient.id,\n              success: false,\n              error: err instanceof Error ? err.message : 'Failed to send notification',\n            };\n          }\n        })\n      );\n\n      setResults(deliveryResults);\n    } catch (err: unknown) {\n      const message = err instanceof Error ? err.message : 'Failed to send message';\n      setError(message);\n    }\n  };\n\n  const successCount = results?.filter((r) => r.success).length ?? 0;\n  const failCount = results?.filter((r) => !r.success).length ?? 0;\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_SEND}>\n      <div className=\"min-h-screen bg-background\">\n        {/* Header */}\n        <div className=\"border-b bg-card\">\n          <div className=\"container mx-auto px-6 py-4\">\n            <div className=\"flex items-center gap-4\">\n              <button\n                type=\"button\"\n                onClick={() => navigate('/channels/list')}\n                className=\"p-2 hover:bg-muted rounded-lg transition-colors\"\n              >\n                <ArrowLeft className=\"size-5 \" />\n              </button>\n              <div>\n                <h1 className=\"text-2xl font-bold\">{tr('channel.sendMessage', 'Send Message')}</h1>\n                <p className=\"text-sm text-muted-foreground\">\n                  {tr(\n                    'channel.sendMessageSubtitle',\n                    'Send notifications through configured channels'\n                  )}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"container mx-auto px-6 py-8 max-w-3xl\">\n          {results === null ? (\n            <div className=\"space-y-6\">\n              {/* Error Alert */}\n              {error && (\n                <div className=\"p-4 rounded-lg bg-destructive/10 border border-destructive/20 flex items-center gap-3\">\n                  <AlertCircle className=\"size-5 text-destructive shrink-0\" />\n                  <p className=\"text-sm text-destructive\">{error}</p>\n                </div>\n              )}\n\n              {/* Platform Selection */}\n              <div className=\"space-y-3\">\n                <label className=\"text-sm font-medium\">{tr('channel.platform', 'Platform')}</label>\n                <div className=\"flex flex-wrap gap-2\">\n                  {(\n                    [\n                      'EMAIL',\n                      'SMS',\n                      'PUSH',\n                      'WHATSAPP',\n                      'SLACK',\n                      'TEAMS',\n                      'WEBHOOK',\n                    ] as ChannelPlatform[]\n                  ).map((p) => {\n                    const Icon = PLATFORM_ICONS[p] || Send;\n                    const isSelected = platform === p;\n                    return (\n                      <button\n                        type=\"button\"\n                        key={p}\n                        onClick={() => {\n                          setPlatform(p);\n                          setSelectedChannelId('');\n                        }}\n                        className={`px-4 py-2 rounded-lg border flex items-center gap-2 transition-all ${\n                          isSelected\n                            ? 'bg-primary text-primary-foreground border-primary'\n                            : 'bg-card hover:bg-muted border-border'\n                        }`}\n                      >\n                        <Icon className=\"size-4 \" />\n                        <span className=\"text-sm\">{p}</span>\n                      </button>\n                    );\n                  })}\n                </div>\n              </div>\n\n              {/* Channel Selection */}\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">{tr('channel.channel', 'Channel')} *</label>\n                {filteredChannels.length === 0 ? (\n                  <div className=\"p-4 rounded-lg border border-dashed text-center\">\n                    <p className=\"text-sm text-muted-foreground\">\n                      No {platform} channels configured.\n                      <button\n                        type=\"button\"\n                        onClick={() => navigate('./create')}\n                        className=\"text-primary hover:underline ml-1\"\n                      >\n                        Create one\n                      </button>\n                    </p>\n                  </div>\n                ) : (\n                  <select\n                    value={selectedChannelId}\n                    onChange={(e) => setSelectedChannelId(e.target.value)}\n                    className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                  >\n                    <option value=\"\">{tr('channel.selectChannel', 'Select a channel...')}</option>\n                    {filteredChannels.map((ch) => (\n                      <option key={ch.id} value={ch.id}>\n                        {ch.name} ({ch.adapterType})\n                      </option>\n                    ))}\n                  </select>\n                )}\n              </div>\n\n              {/* Recipients */}\n              <div className=\"space-y-3\">\n                <label className=\"text-sm font-medium\">\n                  {tr('channel.recipients', 'Recipients')}\n                </label>\n\n                {/* Add recipient form */}\n                <div className=\"flex gap-2\">\n                  <input\n                    aria-label={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n                    type=\"text\"\n                    value={newAddress}\n                    onChange={(e) => setNewAddress(e.target.value)}\n                    placeholder={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n                    className=\"flex-1 px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                  <input\n                    aria-label={tr('channel.nameOptional', 'Name (optional)')}\n                    type=\"text\"\n                    value={newName}\n                    onChange={(e) => setNewName(e.target.value)}\n                    placeholder={tr('channel.nameOptional', 'Name (optional)')}\n                    className=\"w-full sm:w-48 px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={addRecipient}\n                    disabled={!newAddress.trim()}\n                    className=\"px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 flex items-center gap-2\"\n                  >\n                    <Plus className=\"size-4 \" />\n                    {tr('channel.add', 'Add')}\n                  </button>\n                </div>\n\n                {/* recipient list */}\n                {recipients.length > 0 ? (\n                  <div className=\"border rounded-lg divide-y\">\n                    {recipients.map((r) => (\n                      <div key={r.id} className=\"p-3 flex items-center justify-between\">\n                        <div>\n                          <p className=\"text-sm font-medium\">{r.address}</p>\n                          {r.name && <p className=\"text-xs text-muted-foreground\">{r.name}</p>}\n                        </div>\n                        <button\n                          type=\"button\"\n                          onClick={() => removeRecipient(r.id)}\n                          className=\"p-1 hover:bg-muted rounded transition-colors\"\n                        >\n                          <X className=\"size-4 text-muted-foreground\" />\n                        </button>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <p className=\"text-sm text-muted-foreground text-center py-4\">\n                    {tr('channel.noRecipientsYet', 'No recipients added yet')}\n                  </p>\n                )}\n              </div>\n\n              {/* Message Content */}\n              <div className=\"space-y-3\">\n                <label className=\"text-sm font-medium\">\n                  {tr('channel.messageContent', 'Message Content')} *\n                </label>\n\n                {platform === 'EMAIL' && (\n                  <input\n                    aria-label=\"Subject\"\n                    type=\"text\"\n                    value={subject}\n                    onChange={(e) => setSubject(e.target.value)}\n                    placeholder=\"Subject\"\n                    className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                )}\n\n                <textarea\n                  aria-label=\"Enter your message...\"\n                  value={body}\n                  onChange={(e) => setBody(e.target.value)}\n                  placeholder=\"Enter your message...\"\n                  rows={6}\n                  className=\"w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-none\"\n                />\n              </div>\n\n              {/* Priority */}\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">{tr('channel.priority', 'Priority')}</label>\n                <div className=\"flex gap-2\">\n                  {(\n                    [\n                      NotificationPriority.Low,\n                      NotificationPriority.Medium,\n                      NotificationPriority.High,\n                      NotificationPriority.Urgent,\n                    ] as const\n                  ).map((p) => (\n                    <button\n                      type=\"button\"\n                      key={p}\n                      onClick={() => setPriority(p)}\n                      className={`px-4 py-2 rounded-lg border text-sm transition-all ${\n                        priority === p\n                          ? 'bg-primary text-primary-foreground border-primary'\n                          : 'bg-card hover:bg-muted border-border'\n                      }`}\n                    >\n                      {p}\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Send Button */}\n              <div className=\"flex justify-end pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={handleSend}\n                  disabled={\n                    isSending || !selectedChannelId || recipients.length === 0 || !body.trim()\n                  }\n                  className=\"px-6 py-3 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 flex items-center gap-2\"\n                >\n                  {isSending ? (\n                    <>\n                      <Loader2 className=\"size-5 animate-spin\" />\n                      {tr('channel.sending', 'Sending...')}\n                    </>\n                  ) : (\n                    <>\n                      <Send className=\"size-5 \" />\n                      {tr('channel.sendTo', 'Send to')} {recipients.length}{' '}\n                      {recipients.length !== 1\n                        ? tr('channel.recipients', 'recipients')\n                        : tr('channel.recipient', 'recipient')}\n                    </>\n                  )}\n                </button>\n              </div>\n            </div>\n          ) : (\n            /* Results View */\n            <div className=\"space-y-6\">\n              {/* Summary */}\n              <div className=\"p-4 rounded-lg border flex items-center justify-between\">\n                <div className=\"flex items-center gap-4\">\n                  {failCount === 0 ? (\n                    <CheckCircle2 className=\"size-8 text-status-success-text\" />\n                  ) : (\n                    <AlertCircle className=\"size-8 text-status-warning-text\" />\n                  )}\n                  <div>\n                    <h2 className=\"text-lg font-semibold\">\n                      {failCount === 0\n                        ? tr('channel.allMessagesSent', 'All messages sent!')\n                        : `${successCount} of ${recipients.length} sent`}\n                    </h2>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {successCount} {tr('channel.successful', 'successful')}, {failCount}{' '}\n                      {tr('channel.failed', 'failed')}\n                    </p>\n                  </div>\n                </div>\n                <button\n                  type=\"button\"\n                  onClick={handleReset}\n                  className=\"px-4 py-2 rounded-lg border hover:bg-muted transition-colors\"\n                >\n                  {tr('channel.sendAnother', 'Send Another')}\n                </button>\n              </div>\n\n              {/* Results List */}\n              <div className=\"border rounded-lg divide-y\">\n                {results.map((result) => {\n                  const recipient = recipients.find((r) => r.id === result.recipientId);\n                  return (\n                    <div key={result.recipientId} className=\"p-4 flex items-center justify-between\">\n                      <div>\n                        <p className=\"text-sm font-medium\">{recipient?.address}</p>\n                        {recipient?.name && (\n                          <p className=\"text-xs text-muted-foreground\">{recipient.name}</p>\n                        )}\n                        {result.messageId && (\n                          <p className=\"text-xs text-muted-foreground font-mono\">\n                            {result.messageId}\n                          </p>\n                        )}\n                        {result.error && <p className=\"text-xs text-destructive\">{result.error}</p>}\n                      </div>\n                      {result.success ? (\n                        <CheckCircle2 className=\"size-5 text-status-success-text\" />\n                      ) : (\n                        <XCircle className=\"size-5 text-destructive\" />\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SendMessagePage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/SendMessagePage.tsx"],"sourcesContent":["/**\n * Send Message Page\n *\n * UI for sending notifications/messages through channels.\n * Supports single and bulk delivery with recipient management.\n */\n\nimport { useState, useCallback, useRef } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  ArrowLeft,\n  Send,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n  XCircle,\n  Plus,\n  X,\n  Mail,\n  Smartphone,\n  Bell,\n  MessageSquare,\n  Hash,\n  Users,\n  MessageCircle,\n} from 'lucide-react';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { useChannels } from '../../../hooks/useChannels';\nimport { getGlobalChannelClient } from '../../../graphql/global-client';\nimport { useSendNotificationMutation } from '../../../../generated/global-operations';\nimport {\n  ChannelPlatform,\n  NotificationChannel,\n  NotificationPriority,\n  RecipientInput,\n  TriggerNotificationInput,\n} from '../../../../generated/global-types';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface Recipient {\n  id: string;\n  address: string;\n  name?: string;\n}\n\ninterface DeliveryResult {\n  recipientId: string;\n  success: boolean;\n  messageId?: string;\n  error?: string;\n}\n\n// ============================================================================\n// PLATFORM CONFIG\n// ============================================================================\n\nconst PLATFORM_ICONS: Record<string, typeof Mail> = {\n  EMAIL: Mail,\n  SMS: Smartphone,\n  PUSH: Bell,\n  WHATSAPP: MessageSquare,\n  SLACK: Hash,\n  TEAMS: Users,\n  DISCORD: MessageCircle,\n  INAPP: Bell,\n  WEBCHAT: MessageSquare,\n  WEBHOOK: Send,\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport function SendMessagePage() {\n  const navigate = useNavigate();\n  const { channels } = useChannels();\n  const { organizationId, authToken, apiGatewayUrl } = useChannelContext();\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  // Get Apollo client for notification mutations\n  const client = getGlobalChannelClient(apiGatewayUrl, authToken, organizationId);\n\n  // Send notification via notification-svc (which calls channel-svc with service actor)\n  const [sendNotification, { loading: isSending }] = useSendNotificationMutation({ client });\n\n  // Channel selection\n  const [selectedChannelId, setSelectedChannelId] = useState('');\n  const [platform, setPlatform] = useState<ChannelPlatform>('EMAIL' as ChannelPlatform);\n\n  // Recipients\n  const [recipients, setRecipients] = useState<Recipient[]>([]);\n  const recipientIdCounter = useRef(0);\n  const [newAddress, setNewAddress] = useState('');\n  const [newName, setNewName] = useState('');\n\n  // Message content\n  const [subject, setSubject] = useState('');\n  const [body, setBody] = useState('');\n  const [priority, setPriority] = useState<NotificationPriority>(NotificationPriority.Medium);\n\n  // UI state\n  const [results, setResults] = useState<DeliveryResult[] | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  // Filter channels by platform\n  const filteredChannels = channels.filter((ch) => ch.platform === platform);\n\n  // Add recipient\n  const addRecipient = useCallback(() => {\n    if (!newAddress.trim()) return;\n\n    const recipient: Recipient = {\n      id: `r-${++recipientIdCounter.current}`,\n      address: newAddress.trim(),\n      name: newName.trim() || undefined,\n    };\n\n    setRecipients((prev) => [...prev, recipient]);\n    setNewAddress('');\n    setNewName('');\n  }, [newAddress, newName]);\n\n  // Remove recipient\n  const removeRecipient = useCallback((id: string) => {\n    setRecipients((prev) => prev.filter((r) => r.id !== id));\n  }, []);\n\n  // Clear results and reset\n  const handleReset = useCallback(() => {\n    setResults(null);\n    setError(null);\n    setSubject('');\n    setBody('');\n    setRecipients([]);\n  }, []);\n\n  // Send message via notification-svc (which handles service actor auth to channel-svc)\n  const handleSend = async () => {\n    if (!selectedChannelId) {\n      setError(tr('channel.validation.selectChannel', 'Please select a channel'));\n      return;\n    }\n\n    if (recipients.length === 0) {\n      setError(tr('channel.validation.addRecipient', 'Please add at least one recipient'));\n      return;\n    }\n\n    if (!body.trim()) {\n      setError(tr('channel.validation.enterMessage', 'Please enter a message'));\n      return;\n    }\n\n    setError(null);\n    setResults(null);\n\n    try {\n      // Find the selected channel to get platform and connection info\n      const selectedChannel = channels.find((ch) => ch.id === selectedChannelId);\n      if (!selectedChannel) {\n        setError(tr('channel.error.channelNotFound', 'Selected channel not found'));\n        return;\n      }\n\n      // Map ChannelPlatform to NotificationChannel\n      // Most platforms have the same name (EMAIL, SMS, PUSH, etc.)\n      // ChannelPlatform uses 'INAPP' but there's no INAPP in ChannelPlatform enum\n      // (only in PLATFORM_ICONS). We check using string literal.\n      const platformStr = platform as string;\n      const notificationChannel =\n        platformStr === 'INAPP'\n          ? NotificationChannel.InApp\n          : (platform as unknown as NotificationChannel);\n\n      // Send to each recipient in parallel via notification-svc\n      const deliveryResults: DeliveryResult[] = await Promise.all(\n        recipients.map(async (recipient): Promise<DeliveryResult> => {\n          // Build recipient input for notification-svc\n          const recipientInput: RecipientInput = {};\n          switch (platform) {\n            case 'EMAIL':\n              recipientInput.email = recipient.address;\n              break;\n            case 'SMS':\n            case 'WHATSAPP':\n              recipientInput.phoneNumber = recipient.address;\n              break;\n            case 'PUSH':\n              recipientInput.pushToken = recipient.address;\n              break;\n            case 'SLACK':\n              recipientInput.slackUserId = recipient.address;\n              break;\n            case 'TEAMS':\n              recipientInput.teamsUserId = recipient.address;\n              break;\n            case 'WEBHOOK':\n              recipientInput.webhookUrl = recipient.address;\n              break;\n            default:\n              recipientInput.email = recipient.address;\n          }\n\n          // Build TriggerNotificationInput - creates notification AND triggers delivery\n          const triggerInput: TriggerNotificationInput = {\n            channelId: selectedChannel.id,\n            platform: notificationChannel,\n            notification: {\n              body: body,\n              channel: notificationChannel,\n              recipient: recipientInput,\n              subject: platform === 'EMAIL' ? subject : undefined,\n              priority: priority,\n            },\n          };\n\n          try {\n            const result = await sendNotification({ variables: { input: triggerInput } });\n\n            if (result.data?.triggerNotification) {\n              const notification = result.data.triggerNotification;\n              // deliveryStatus is null at trigger time (async delivery hasn't completed yet).\n              // Use triggerStatus + status to determine immediate send success.\n              const failed =\n                notification.status === 'FAILED' || notification.triggerStatus === 'FAILED';\n              const errorDetail = notification.errorMessage || notification.errorCode;\n              return {\n                recipientId: recipient.id,\n                success: !failed,\n                messageId: notification.id,\n                error: failed\n                  ? errorDetail\n                    ? `Delivery failed: ${errorDetail}`\n                    : 'Delivery failed'\n                  : undefined,\n              };\n            }\n            return {\n              recipientId: recipient.id,\n              success: false,\n              error: result.error?.message || 'Failed to send notification',\n            };\n          } catch (err: unknown) {\n            return {\n              recipientId: recipient.id,\n              success: false,\n              error: err instanceof Error ? err.message : 'Failed to send notification',\n            };\n          }\n        })\n      );\n\n      setResults(deliveryResults);\n    } catch (err: unknown) {\n      const message = err instanceof Error ? err.message : 'Failed to send message';\n      setError(message);\n    }\n  };\n\n  const successCount = results?.filter((r) => r.success).length ?? 0;\n  const failCount = results?.filter((r) => !r.success).length ?? 0;\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_SEND}>\n      <div className=\"min-h-screen bg-bg-surface\">\n        {/* Header */}\n        <div className=\"border-b bg-bg-surface\">\n          <div className=\"container mx-auto px-6 py-4\">\n            <div className=\"flex items-center gap-4\">\n              <button\n                type=\"button\"\n                onClick={() => navigate('/channels/list')}\n                className=\"p-2 hover:bg-bg-sunken rounded-lg transition-colors\"\n              >\n                <ArrowLeft className=\"size-5 \" />\n              </button>\n              <div>\n                <h1 className=\"text-2xl font-bold\">{tr('channel.sendMessage', 'Send Message')}</h1>\n                <p className=\"text-sm text-text-secondary\">\n                  {tr(\n                    'channel.sendMessageSubtitle',\n                    'Send notifications through configured channels'\n                  )}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"container mx-auto px-6 py-8 max-w-3xl\">\n          {results === null ? (\n            <div className=\"space-y-6\">\n              {/* Error Alert */}\n              {error && (\n                <div className=\"p-4 rounded-lg bg-status-error-bg/10 border border-status-error-border/20 flex items-center 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              {/* Platform Selection */}\n              <div className=\"space-y-3\">\n                <label className=\"text-sm font-medium\">{tr('channel.platform', 'Platform')}</label>\n                <div className=\"flex flex-wrap gap-2\">\n                  {(\n                    [\n                      'EMAIL',\n                      'SMS',\n                      'PUSH',\n                      'WHATSAPP',\n                      'SLACK',\n                      'TEAMS',\n                      'WEBHOOK',\n                    ] as ChannelPlatform[]\n                  ).map((p) => {\n                    const Icon = PLATFORM_ICONS[p] || Send;\n                    const isSelected = platform === p;\n                    return (\n                      <button\n                        type=\"button\"\n                        key={p}\n                        onClick={() => {\n                          setPlatform(p);\n                          setSelectedChannelId('');\n                        }}\n                        className={`px-4 py-2 rounded-lg border flex items-center gap-2 transition-all ${\n                          isSelected\n                            ? 'bg-action-primary-bg text-action-primary-text border-primary'\n                            : 'bg-bg-surface hover:bg-bg-sunken border-border-subtle'\n                        }`}\n                      >\n                        <Icon className=\"size-4 \" />\n                        <span className=\"text-sm\">{p}</span>\n                      </button>\n                    );\n                  })}\n                </div>\n              </div>\n\n              {/* Channel Selection */}\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">{tr('channel.channel', 'Channel')} *</label>\n                {filteredChannels.length === 0 ? (\n                  <div className=\"p-4 rounded-lg border border-dashed text-center\">\n                    <p className=\"text-sm text-text-secondary\">\n                      No {platform} channels configured.\n                      <button\n                        type=\"button\"\n                        onClick={() => navigate('./create')}\n                        className=\"text-primary hover:underline ml-1\"\n                      >\n                        Create one\n                      </button>\n                    </p>\n                  </div>\n                ) : (\n                  <select\n                    value={selectedChannelId}\n                    onChange={(e) => setSelectedChannelId(e.target.value)}\n                    className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n                  >\n                    <option value=\"\">{tr('channel.selectChannel', 'Select a channel...')}</option>\n                    {filteredChannels.map((ch) => (\n                      <option key={ch.id} value={ch.id}>\n                        {ch.name} ({ch.adapterType})\n                      </option>\n                    ))}\n                  </select>\n                )}\n              </div>\n\n              {/* Recipients */}\n              <div className=\"space-y-3\">\n                <label className=\"text-sm font-medium\">\n                  {tr('channel.recipients', 'Recipients')}\n                </label>\n\n                {/* Add recipient form */}\n                <div className=\"flex gap-2\">\n                  <input\n                    aria-label={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n                    type=\"text\"\n                    value={newAddress}\n                    onChange={(e) => setNewAddress(e.target.value)}\n                    placeholder={platform === 'EMAIL' ? 'email@example.com' : '+1234567890'}\n                    className=\"flex-1 px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                  <input\n                    aria-label={tr('channel.nameOptional', 'Name (optional)')}\n                    type=\"text\"\n                    value={newName}\n                    onChange={(e) => setNewName(e.target.value)}\n                    placeholder={tr('channel.nameOptional', 'Name (optional)')}\n                    className=\"w-full sm:w-48 px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                  <button\n                    type=\"button\"\n                    onClick={addRecipient}\n                    disabled={!newAddress.trim()}\n                    className=\"px-4 py-2 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 flex items-center gap-2\"\n                  >\n                    <Plus className=\"size-4 \" />\n                    {tr('channel.add', 'Add')}\n                  </button>\n                </div>\n\n                {/* recipient list */}\n                {recipients.length > 0 ? (\n                  <div className=\"border rounded-lg divide-y\">\n                    {recipients.map((r) => (\n                      <div key={r.id} className=\"p-3 flex items-center justify-between\">\n                        <div>\n                          <p className=\"text-sm font-medium\">{r.address}</p>\n                          {r.name && <p className=\"text-xs text-text-secondary\">{r.name}</p>}\n                        </div>\n                        <button\n                          type=\"button\"\n                          onClick={() => removeRecipient(r.id)}\n                          className=\"p-1 hover:bg-bg-sunken rounded transition-colors\"\n                        >\n                          <X className=\"size-4 text-text-secondary\" />\n                        </button>\n                      </div>\n                    ))}\n                  </div>\n                ) : (\n                  <p className=\"text-sm text-text-secondary text-center py-4\">\n                    {tr('channel.noRecipientsYet', 'No recipients added yet')}\n                  </p>\n                )}\n              </div>\n\n              {/* Message Content */}\n              <div className=\"space-y-3\">\n                <label className=\"text-sm font-medium\">\n                  {tr('channel.messageContent', 'Message Content')} *\n                </label>\n\n                {platform === 'EMAIL' && (\n                  <input\n                    aria-label=\"Subject\"\n                    type=\"text\"\n                    value={subject}\n                    onChange={(e) => setSubject(e.target.value)}\n                    placeholder=\"Subject\"\n                    className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary\"\n                  />\n                )}\n\n                <textarea\n                  aria-label=\"Enter your message...\"\n                  value={body}\n                  onChange={(e) => setBody(e.target.value)}\n                  placeholder=\"Enter your message...\"\n                  rows={6}\n                  className=\"w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary resize-none\"\n                />\n              </div>\n\n              {/* Priority */}\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">{tr('channel.priority', 'Priority')}</label>\n                <div className=\"flex gap-2\">\n                  {(\n                    [\n                      NotificationPriority.Low,\n                      NotificationPriority.Medium,\n                      NotificationPriority.High,\n                      NotificationPriority.Urgent,\n                    ] as const\n                  ).map((p) => (\n                    <button\n                      type=\"button\"\n                      key={p}\n                      onClick={() => setPriority(p)}\n                      className={`px-4 py-2 rounded-lg border text-sm transition-all ${\n                        priority === p\n                          ? 'bg-action-primary-bg text-action-primary-text border-primary'\n                          : 'bg-bg-surface hover:bg-bg-sunken border-border-subtle'\n                      }`}\n                    >\n                      {p}\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Send Button */}\n              <div className=\"flex justify-end pt-4\">\n                <button\n                  type=\"button\"\n                  onClick={handleSend}\n                  disabled={\n                    isSending || !selectedChannelId || recipients.length === 0 || !body.trim()\n                  }\n                  className=\"px-6 py-3 rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg/90 transition-colors disabled:opacity-50 flex items-center gap-2\"\n                >\n                  {isSending ? (\n                    <>\n                      <Loader2 className=\"size-5 animate-spin\" />\n                      {tr('channel.sending', 'Sending...')}\n                    </>\n                  ) : (\n                    <>\n                      <Send className=\"size-5 \" />\n                      {tr('channel.sendTo', 'Send to')} {recipients.length}{' '}\n                      {recipients.length !== 1\n                        ? tr('channel.recipients', 'recipients')\n                        : tr('channel.recipient', 'recipient')}\n                    </>\n                  )}\n                </button>\n              </div>\n            </div>\n          ) : (\n            /* Results View */\n            <div className=\"space-y-6\">\n              {/* Summary */}\n              <div className=\"p-4 rounded-lg border flex items-center justify-between\">\n                <div className=\"flex items-center gap-4\">\n                  {failCount === 0 ? (\n                    <CheckCircle2 className=\"size-8 text-status-success-text\" />\n                  ) : (\n                    <AlertCircle className=\"size-8 text-status-warning-text\" />\n                  )}\n                  <div>\n                    <h2 className=\"text-lg font-semibold\">\n                      {failCount === 0\n                        ? tr('channel.allMessagesSent', 'All messages sent!')\n                        : `${successCount} of ${recipients.length} sent`}\n                    </h2>\n                    <p className=\"text-sm text-text-secondary\">\n                      {successCount} {tr('channel.successful', 'successful')}, {failCount}{' '}\n                      {tr('channel.failed', 'failed')}\n                    </p>\n                  </div>\n                </div>\n                <button\n                  type=\"button\"\n                  onClick={handleReset}\n                  className=\"px-4 py-2 rounded-lg border hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr('channel.sendAnother', 'Send Another')}\n                </button>\n              </div>\n\n              {/* Results List */}\n              <div className=\"border rounded-lg divide-y\">\n                {results.map((result) => {\n                  const recipient = recipients.find((r) => r.id === result.recipientId);\n                  return (\n                    <div key={result.recipientId} className=\"p-4 flex items-center justify-between\">\n                      <div>\n                        <p className=\"text-sm font-medium\">{recipient?.address}</p>\n                        {recipient?.name && (\n                          <p className=\"text-xs text-text-secondary\">{recipient.name}</p>\n                        )}\n                        {result.messageId && (\n                          <p className=\"text-xs text-text-secondary font-mono\">\n                            {result.messageId}\n                          </p>\n                        )}\n                        {result.error && <p className=\"text-xs text-status-error-text\">{result.error}</p>}\n                      </div>\n                      {result.success ? (\n                        <CheckCircle2 className=\"size-5 text-status-success-text\" />\n                      ) : (\n                        <XCircle className=\"size-5 text-status-error-text\" />\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

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

@@ -14,7 +14,7 @@ import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
 var D = {
 	PENDING: {
 		label: "Pending",
-		color: "text-muted-foreground bg-muted",
+		color: "text-text-secondary bg-bg-sunken",
 		icon: _
 	},
 	PROCESSING: {
@@ -144,16 +144,16 @@ function O() {
 							type: "button",
 							onClick: () => _(`/channels/${h}`),
 							"aria-label": O("channel.backToChannel", "Back to channel"),
-							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
+							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors",
 							children: /* @__PURE__ */ T(m, {
 								size: 20,
 								"aria-hidden": "true"
 							})
 						}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h1", {
-							className: "text-xl sm:text-2xl font-bold text-foreground",
+							className: "text-xl sm:text-2xl font-bold text-text-primary",
 							children: O("channel.webhookEvents", "Webhook Events")
 						}), /* @__PURE__ */ E("p", {
-							className: "text-sm text-muted-foreground mt-1",
+							className: "text-sm text-text-secondary mt-1",
 							children: [G.name, " - Event history"]
 						})] })]
 					}), /* @__PURE__ */ E("div", {
@@ -162,7 +162,7 @@ function O() {
 							/* @__PURE__ */ E("select", {
 								value: L,
 								onChange: (e) => R(Number(e.target.value)),
-								className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-foreground",
+								className: "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",
 								children: [
 									/* @__PURE__ */ T("option", {
 										value: 10,
@@ -186,7 +186,7 @@ function O() {
 								type: "button",
 								onClick: () => void Y(V[U]),
 								disabled: N,
-								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50",
+								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50",
 								children: [/* @__PURE__ */ T(S, {
 									size: 16,
 									className: N ? "animate-spin" : ""
@@ -198,7 +198,7 @@ function O() {
 									type: "button",
 									onClick: () => void A(),
 									disabled: j,
-									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border-subtle hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 									title: O("channel.exportCSV", "Export to CSV"),
 									children: [j ? /* @__PURE__ */ T(x, {
 										size: 16,
@@ -220,43 +220,43 @@ function O() {
 					})]
 				}),
 				/* @__PURE__ */ T("div", {
-					className: "p-4 bg-surface border border-border rounded-lg",
+					className: "p-4 bg-surface border border-border-subtle rounded-lg",
 					children: /* @__PURE__ */ T("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: "Webhook events show all incoming webhooks received by this channel. Data is retained for 7 days."
 					})
 				}),
 				/* @__PURE__ */ T("div", {
-					className: "bg-surface border border-border rounded-lg overflow-hidden",
+					className: "bg-surface border border-border-subtle rounded-lg overflow-hidden",
 					children: /* @__PURE__ */ T("div", {
 						className: "overflow-x-auto min-w-full",
 						children: /* @__PURE__ */ E("table", {
 							className: "w-full min-w-[600px]",
 							children: [/* @__PURE__ */ T("thead", {
-								className: "bg-muted/50 border-b border-border",
+								className: "bg-bg-sunken/50 border-b border-border-subtle",
 								children: /* @__PURE__ */ E("tr", { children: [
 									/* @__PURE__ */ T("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: O("channel.status", "Status")
 									}),
 									/* @__PURE__ */ T("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: O("channel.eventType", "Event Type")
 									}),
 									/* @__PURE__ */ T("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: O("channel.duplicate", "Duplicate")
 									}),
 									/* @__PURE__ */ T("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: O("channel.processedAt", "Processed At")
 									}),
 									/* @__PURE__ */ T("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: O("channel.error", "Error")
 									}),
 									/* @__PURE__ */ T("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
+										className: "px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider",
 										children: O("channel.actions", "Actions")
 									})
 								] })
@@ -264,12 +264,12 @@ function O() {
 								className: "divide-y divide-border",
 								children: F.length === 0 ? /* @__PURE__ */ T("tr", { children: /* @__PURE__ */ T("td", {
 									colSpan: 6,
-									className: "px-4 py-8 text-center text-muted-foreground",
+									className: "px-4 py-8 text-center text-text-secondary",
 									children: O("channel.noWebhookEventsFound", "No webhook events found")
 								}) }) : F.map((e) => {
 									let t = le(e.status), n = t.icon, r = re === e.id;
 									return /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ E("tr", {
-										className: "hover:bg-muted/30 transition-colors",
+										className: "hover:bg-bg-sunken/30 transition-colors",
 										children: [
 											/* @__PURE__ */ T("td", {
 												className: "px-4 py-3",
@@ -285,7 +285,7 @@ function O() {
 												})
 											}),
 											/* @__PURE__ */ T("td", {
-												className: "px-4 py-3 text-sm font-mono text-foreground",
+												className: "px-4 py-3 text-sm font-mono text-text-primary",
 												children: e.eventType
 											}),
 											/* @__PURE__ */ T("td", {
@@ -294,12 +294,12 @@ function O() {
 													className: "text-xs text-status-warning-text bg-status-warning-bg-subtle px-2 py-1 rounded",
 													children: "Duplicate"
 												}) : /* @__PURE__ */ T("span", {
-													className: "text-xs text-muted-foreground",
+													className: "text-xs text-text-secondary",
 													children: "No"
 												})
 											}),
 											/* @__PURE__ */ T("td", {
-												className: "px-4 py-3 text-sm text-muted-foreground",
+												className: "px-4 py-3 text-sm text-text-secondary",
 												children: e.processedAt ? new Date(e.processedAt).toLocaleString() : "-"
 											}),
 											/* @__PURE__ */ T("td", {
@@ -313,7 +313,7 @@ function O() {
 													onClick: () => ie(r ? null : e.id),
 													"aria-label": r ? O("channel.hidePayload", "Hide payload") : O("channel.viewPayload", "View payload"),
 													"aria-expanded": r,
-													className: "p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors",
+													className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded transition-colors",
 													children: T(r ? b : y, {
 														size: 16,
 														"aria-hidden": "true"
@@ -323,14 +323,14 @@ function O() {
 										]
 									}, e.id), r && /* @__PURE__ */ T("tr", { children: /* @__PURE__ */ T("td", {
 										colSpan: 6,
-										className: "px-4 py-3 bg-muted/30",
+										className: "px-4 py-3 bg-bg-sunken/30",
 										children: /* @__PURE__ */ E("div", {
 											className: "text-xs",
 											children: [/* @__PURE__ */ E("p", {
-												className: "text-muted-foreground mb-1",
+												className: "text-text-secondary mb-1",
 												children: [O("channel.payload", "Payload"), ":"]
 											}), /* @__PURE__ */ T("pre", {
-												className: "bg-surface p-2 rounded border border-border overflow-auto",
+												className: "bg-surface p-2 rounded border border-border-subtle overflow-auto",
 												children: JSON.stringify(e.payload, null, 2)
 											})]
 										})
@@ -343,7 +343,7 @@ function O() {
 				/* @__PURE__ */ E("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ T("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: z > 0 && /* @__PURE__ */ E(w, { children: [
 							O("channel.page", "Page"),
 							" ",
@@ -365,13 +365,13 @@ function O() {
 							type: "button",
 							onClick: oe,
 							disabled: !ce || N,
-							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
 							children: [/* @__PURE__ */ T(g, { size: 16 }), O("channel.previous", "Previous")]
 						}), /* @__PURE__ */ E("button", {
 							type: "button",
 							onClick: () => void ae(),
 							disabled: !se || N,
-							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+							className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
 							children: [O("channel.next", "Next"), /* @__PURE__ */ T(ee, { size: 16 })]
 						})]
 					})]

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

@@ -1 +1 @@
-{"version":3,"file":"WebhookEventsPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/WebhookEventsPage.tsx"],"sourcesContent":["/**\n * Webhook Events Page\n *\n * Displays webhook event history for a specific channel\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  ArrowLeft,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n  XCircle,\n  Clock,\n  RefreshCw,\n  Eye,\n  EyeOff,\n  Download,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-react';\nimport { useChannel, type WebhookEvent as WebhookEventType } from '../../../hooks/useChannels';\nimport type { WebhookProcessingStatus } from '../../../hooks/useChannels';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { emitShellEvent } from '../../../utils/shellBridge';\nimport {\n  WEBHOOK_RECEIVED_SUBSCRIPTION,\n  useChannelSubscription,\n} from '../../../hooks/useChannelSubscription';\nimport { useExportWebhookEvents } from '../hooks/useExport';\n\nconst STATUS_CONFIG: Record<\n  WebhookProcessingStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  PENDING: { label: 'Pending', color: 'text-muted-foreground bg-muted', icon: Clock },\n  PROCESSING: {\n    label: 'Processing',\n    color: 'text-accent-primary bg-accent-primary/10',\n    icon: RefreshCw,\n  },\n  COMPLETED: {\n    label: 'Completed',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  FAILED: {\n    label: 'Failed',\n    color: 'text-status-error-text bg-status-error-bg-subtle',\n    icon: XCircle,\n  },\n  IGNORED: {\n    label: 'Ignored',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: EyeOff,\n  },\n};\n\nexport function WebhookEventsPage() {\n  const { channelId } = useParams<{ channelId: string }>();\n  const navigate = useNavigate();\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  const { organizationId } = useChannelContext();\n  const {\n    triggerExport: exportWebhooks,\n    isExporting: isExportingWebhooks,\n    exportError: exportWebhooksError,\n  } = useExportWebhookEvents(organizationId ?? undefined, channelId);\n  const [isLoadingEvents, setIsLoadingEvents] = useState(true);\n  const [events, setEvents] = useState<WebhookEventType[]>([]);\n  const [expandedEvent, setExpandedEvent] = useState<string | null>(null);\n  const [limit, setLimit] = useState(25);\n  const [total, setTotal] = useState(0);\n  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([undefined]);\n  const [currentPageIdx, setCurrentPageIdx] = useState(0);\n\n  const { channel, isLoading, error, fetchWebhookEvents } = useChannel(channelId);\n\n  const loadEvents = useCallback(\n    async (cursor?: string) => {\n      if (!channelId) return;\n      setIsLoadingEvents(true);\n      try {\n        const result = await fetchWebhookEvents(limit, cursor);\n        setEvents(result.items);\n        setTotal(result.total);\n        return result.nextCursor;\n      } finally {\n        setIsLoadingEvents(false);\n      }\n    },\n    [channelId, fetchWebhookEvents, limit]\n  );\n\n  // Keep refs current after every render so pagination and subscription callbacks\n  // always call the latest function/value without those variables in deps.\n  const loadEventsRef = useRef(loadEvents);\n  const cursorStackRef = useRef(cursorStack);\n  const currentPageIdxRef = useRef(currentPageIdx);\n  useEffect(() => {\n    loadEventsRef.current = loadEvents;\n    cursorStackRef.current = cursorStack;\n    currentPageIdxRef.current = currentPageIdx;\n  });\n  // Tracks whether the [limit] effect has already fired on mount so the\n  // [currentPageIdx] effect skips its first run (avoiding a double load).\n  const isFirstPageRender = useRef(true);\n\n  // Reset cursor stack and reload whenever page size changes (also fires on mount).\n  useEffect(() => {\n    void Promise.resolve().then(() => {\n      setCursorStack([undefined]);\n      setCurrentPageIdx(0);\n      void loadEventsRef.current(undefined);\n    });\n  }, [limit]);\n\n  // Navigate to a specific page; skip the very first render to avoid\n  // a duplicate load alongside the [limit] effect above.\n  useEffect(() => {\n    if (isFirstPageRender.current) {\n      isFirstPageRender.current = false;\n      return;\n    }\n    void Promise.resolve().then(() =>\n      loadEventsRef.current(cursorStackRef.current[currentPageIdx])\n    );\n  }, [currentPageIdx]);\n\n  const handleNextPage = useCallback(async () => {\n    const nextCursor = await loadEvents(cursorStack[currentPageIdx]);\n    if (nextCursor) {\n      setCursorStack((prev) => {\n        const next = [...prev];\n        if (!next[currentPageIdx + 1]) {\n          next[currentPageIdx + 1] = nextCursor;\n        }\n        return next;\n      });\n    }\n    setCurrentPageIdx((p) => p + 1);\n  }, [cursorStack, currentPageIdx, loadEvents]);\n\n  const handlePrevPage = useCallback(() => {\n    const prevIdx = currentPageIdx - 1;\n    setCurrentPageIdx(prevIdx);\n    void loadEvents(cursorStack[prevIdx]);\n  }, [cursorStack, currentPageIdx, loadEvents]);\n\n  const hasNextPage = events.length === limit;\n  const hasPrevPage = currentPageIdx > 0;\n\n  // Real-time webhook stream. Subscribes when the gateway exposes\n  // `webhookReceived`; otherwise polls every 60s as a graceful fallback.\n  useChannelSubscription({\n    query: WEBHOOK_RECEIVED_SUBSCRIPTION,\n    variables: { channelId },\n    operationName: 'WebhookReceived',\n    enabled: Boolean(channelId),\n    onData: useCallback(() => {\n      emitShellEvent('webhook.received', { channelId });\n      void loadEventsRef.current(cursorStackRef.current[currentPageIdxRef.current]);\n    }, [channelId]),\n    pollFn: useCallback(() => {\n      void loadEventsRef.current(cursorStackRef.current[currentPageIdxRef.current]);\n    }, []),\n    pollIntervalMs: 60_000,\n  });\n\n  const getStatusConfig = (status: WebhookProcessingStatus) => {\n    return STATUS_CONFIG[status] || STATUS_CONFIG.PENDING;\n  };\n\n  // Loading state (only show full-screen for initial channel load)\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 size={32} className=\"animate-spin text-accent-primary\" />\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !channel) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg\">\n          <AlertCircle size={20} className=\"text-status-error-text\" />\n          <div>\n            <p className=\"text-sm font-medium text-status-error-text\">\n              {error || 'Channel not found'}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => navigate(`/channels/${channelId}`)}\n            className=\"ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n          >\n            Go Back\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_WEBHOOK_READ}>\n      <div className=\"space-y-6 p-3 sm:p-6\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <button\n              type=\"button\"\n              onClick={() => navigate(`/channels/${channelId}`)}\n              aria-label={tr('channel.backToChannel', 'Back to channel')}\n              className=\"p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors\"\n            >\n              <ArrowLeft size={20} aria-hidden=\"true\" />\n            </button>\n            <div>\n              <h1 className=\"text-xl sm:text-2xl font-bold text-foreground\">\n                {tr('channel.webhookEvents', 'Webhook Events')}\n              </h1>\n              <p className=\"text-sm text-muted-foreground mt-1\">{channel.name} - Event history</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <select\n              value={limit}\n              onChange={(e) => setLimit(Number(e.target.value))}\n              className=\"px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg/50 text-foreground\"\n            >\n              <option value={10}>10 results</option>\n              <option value={25}>25 results</option>\n              <option value={50}>50 results</option>\n              <option value={100}>100 results</option>\n            </select>\n            <button\n              type=\"button\"\n              onClick={() => void loadEvents(cursorStack[currentPageIdx])}\n              disabled={isLoadingEvents}\n              className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50\"\n            >\n              <RefreshCw size={16} className={isLoadingEvents ? 'animate-spin' : ''} />\n              {tr('channel.refresh', 'Refresh')}\n            </button>\n            <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_WEBHOOK_EXPORT}>\n              <button\n                type=\"button\"\n                onClick={() => void exportWebhooks()}\n                disabled={isExportingWebhooks}\n                className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                title={tr('channel.exportCSV', 'Export to CSV')}\n              >\n                {isExportingWebhooks ? (\n                  <Loader2 size={16} className=\"animate-spin\" />\n                ) : (\n                  <Download size={16} />\n                )}\n                {tr('channel.export', 'Export')}\n              </button>\n            </PermissionGuard>\n          </div>\n        </div>\n\n        {/* Export Error Banner */}\n        {exportWebhooksError && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <p className=\"text-sm text-status-error-text flex-1\">{exportWebhooksError}</p>\n          </div>\n        )}\n\n        {/* Info Banner */}\n        <div className=\"p-4 bg-surface border border-border rounded-lg\">\n          <p className=\"text-sm text-muted-foreground\">\n            Webhook events show all incoming webhooks received by this channel. Data is retained for\n            7 days.\n          </p>\n        </div>\n\n        {/* Events List */}\n        <div className=\"bg-surface border border-border rounded-lg overflow-hidden\">\n          <div className=\"overflow-x-auto min-w-full\">\n            <table className=\"w-full min-w-[600px]\">\n              <thead className=\"bg-muted/50 border-b border-border\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.status', 'Status')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.eventType', 'Event Type')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.duplicate', 'Duplicate')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.processedAt', 'Processed At')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.error', 'Error')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.actions', 'Actions')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {events.length === 0 ? (\n                  <tr>\n                    <td colSpan={6} className=\"px-4 py-8 text-center text-muted-foreground\">\n                      {tr('channel.noWebhookEventsFound', 'No webhook events found')}\n                    </td>\n                  </tr>\n                ) : (\n                  events.map((event) => {\n                    const statusConfig = getStatusConfig(event.status as WebhookProcessingStatus);\n                    const StatusIcon = statusConfig.icon;\n                    const isExpanded = expandedEvent === event.id;\n                    return (\n                      <>\n                        <tr key={event.id} className=\"hover:bg-muted/30 transition-colors\">\n                          <td className=\"px-4 py-3\">\n                            <div className=\"flex items-center gap-2\">\n                              <StatusIcon size={14} className={statusConfig.color.split(' ')[0]} />\n                              <span className={`text-sm font-medium ${statusConfig.color}`}>\n                                {statusConfig.label}\n                              </span>\n                            </div>\n                          </td>\n                          <td className=\"px-4 py-3 text-sm font-mono text-foreground\">\n                            {event.eventType}\n                          </td>\n                          <td className=\"px-4 py-3\">\n                            {event.isDuplicate ? (\n                              <span className=\"text-xs text-status-warning-text bg-status-warning-bg-subtle px-2 py-1 rounded\">\n                                Duplicate\n                              </span>\n                            ) : (\n                              <span className=\"text-xs text-muted-foreground\">No</span>\n                            )}\n                          </td>\n                          <td className=\"px-4 py-3 text-sm text-muted-foreground\">\n                            {event.processedAt ? new Date(event.processedAt).toLocaleString() : '-'}\n                          </td>\n                          <td className=\"px-4 py-3 text-sm text-status-error-text max-w-xs truncate\">\n                            {event.errorMessage || '-'}\n                          </td>\n                          <td className=\"px-4 py-3\">\n                            <button\n                              type=\"button\"\n                              onClick={() => setExpandedEvent(isExpanded ? null : event.id)}\n                              aria-label={\n                                isExpanded\n                                  ? tr('channel.hidePayload', 'Hide payload')\n                                  : tr('channel.viewPayload', 'View payload')\n                              }\n                              aria-expanded={isExpanded}\n                              className=\"p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors\"\n                            >\n                              {isExpanded ? (\n                                <EyeOff size={16} aria-hidden=\"true\" />\n                              ) : (\n                                <Eye size={16} aria-hidden=\"true\" />\n                              )}\n                            </button>\n                          </td>\n                        </tr>\n                        {isExpanded && (\n                          <tr key={`${event.id}-payload`}>\n                            <td colSpan={6} className=\"px-4 py-3 bg-muted/30\">\n                              <div className=\"text-xs\">\n                                <p className=\"text-muted-foreground mb-1\">\n                                  {tr('channel.payload', 'Payload')}:\n                                </p>\n                                <pre className=\"bg-surface p-2 rounded border border-border overflow-auto\">\n                                  {JSON.stringify(event.payload, null, 2)}\n                                </pre>\n                              </div>\n                            </td>\n                          </tr>\n                        )}\n                      </>\n                    );\n                  })\n                )}\n              </tbody>\n            </table>\n          </div>\n        </div>\n\n        {/* Pagination footer */}\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-sm text-muted-foreground\">\n            {total > 0 && (\n              <>\n                {tr('channel.page', 'Page')}{' '}\n                <span className=\"font-medium\">{currentPageIdx + 1}</span>\n                {' · '}\n                {tr('channel.totalRecords', 'Total')}: <span className=\"font-medium\">{total}</span>\n              </>\n            )}\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={handlePrevPage}\n              disabled={!hasPrevPage || isLoadingEvents}\n              className=\"flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n            >\n              <ChevronLeft size={16} />\n              {tr('channel.previous', 'Previous')}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => void handleNextPage()}\n              disabled={!hasNextPage || isLoadingEvents}\n              className=\"flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n            >\n              {tr('channel.next', 'Next')}\n              <ChevronRight size={16} />\n            </button>\n          </div>\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"WebhookEventsPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/WebhookEventsPage.tsx"],"sourcesContent":["/**\n * Webhook Events Page\n *\n * Displays webhook event history for a specific channel\n */\n\nimport { useState, useEffect, useCallback, useRef } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  ArrowLeft,\n  Loader2,\n  AlertCircle,\n  CheckCircle2,\n  XCircle,\n  Clock,\n  RefreshCw,\n  Eye,\n  EyeOff,\n  Download,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-react';\nimport { useChannel, type WebhookEvent as WebhookEventType } from '../../../hooks/useChannels';\nimport type { WebhookProcessingStatus } from '../../../hooks/useChannels';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { emitShellEvent } from '../../../utils/shellBridge';\nimport {\n  WEBHOOK_RECEIVED_SUBSCRIPTION,\n  useChannelSubscription,\n} from '../../../hooks/useChannelSubscription';\nimport { useExportWebhookEvents } from '../hooks/useExport';\n\nconst STATUS_CONFIG: Record<\n  WebhookProcessingStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  PENDING: { label: 'Pending', color: 'text-text-secondary bg-bg-sunken', icon: Clock },\n  PROCESSING: {\n    label: 'Processing',\n    color: 'text-accent-primary bg-accent-primary/10',\n    icon: RefreshCw,\n  },\n  COMPLETED: {\n    label: 'Completed',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  FAILED: {\n    label: 'Failed',\n    color: 'text-status-error-text bg-status-error-bg-subtle',\n    icon: XCircle,\n  },\n  IGNORED: {\n    label: 'Ignored',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: EyeOff,\n  },\n};\n\nexport function WebhookEventsPage() {\n  const { channelId } = useParams<{ channelId: string }>();\n  const navigate = useNavigate();\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  const { organizationId } = useChannelContext();\n  const {\n    triggerExport: exportWebhooks,\n    isExporting: isExportingWebhooks,\n    exportError: exportWebhooksError,\n  } = useExportWebhookEvents(organizationId ?? undefined, channelId);\n  const [isLoadingEvents, setIsLoadingEvents] = useState(true);\n  const [events, setEvents] = useState<WebhookEventType[]>([]);\n  const [expandedEvent, setExpandedEvent] = useState<string | null>(null);\n  const [limit, setLimit] = useState(25);\n  const [total, setTotal] = useState(0);\n  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([undefined]);\n  const [currentPageIdx, setCurrentPageIdx] = useState(0);\n\n  const { channel, isLoading, error, fetchWebhookEvents } = useChannel(channelId);\n\n  const loadEvents = useCallback(\n    async (cursor?: string) => {\n      if (!channelId) return;\n      setIsLoadingEvents(true);\n      try {\n        const result = await fetchWebhookEvents(limit, cursor);\n        setEvents(result.items);\n        setTotal(result.total);\n        return result.nextCursor;\n      } finally {\n        setIsLoadingEvents(false);\n      }\n    },\n    [channelId, fetchWebhookEvents, limit]\n  );\n\n  // Keep refs current after every render so pagination and subscription callbacks\n  // always call the latest function/value without those variables in deps.\n  const loadEventsRef = useRef(loadEvents);\n  const cursorStackRef = useRef(cursorStack);\n  const currentPageIdxRef = useRef(currentPageIdx);\n  useEffect(() => {\n    loadEventsRef.current = loadEvents;\n    cursorStackRef.current = cursorStack;\n    currentPageIdxRef.current = currentPageIdx;\n  });\n  // Tracks whether the [limit] effect has already fired on mount so the\n  // [currentPageIdx] effect skips its first run (avoiding a double load).\n  const isFirstPageRender = useRef(true);\n\n  // Reset cursor stack and reload whenever page size changes (also fires on mount).\n  useEffect(() => {\n    void Promise.resolve().then(() => {\n      setCursorStack([undefined]);\n      setCurrentPageIdx(0);\n      void loadEventsRef.current(undefined);\n    });\n  }, [limit]);\n\n  // Navigate to a specific page; skip the very first render to avoid\n  // a duplicate load alongside the [limit] effect above.\n  useEffect(() => {\n    if (isFirstPageRender.current) {\n      isFirstPageRender.current = false;\n      return;\n    }\n    void Promise.resolve().then(() =>\n      loadEventsRef.current(cursorStackRef.current[currentPageIdx])\n    );\n  }, [currentPageIdx]);\n\n  const handleNextPage = useCallback(async () => {\n    const nextCursor = await loadEvents(cursorStack[currentPageIdx]);\n    if (nextCursor) {\n      setCursorStack((prev) => {\n        const next = [...prev];\n        if (!next[currentPageIdx + 1]) {\n          next[currentPageIdx + 1] = nextCursor;\n        }\n        return next;\n      });\n    }\n    setCurrentPageIdx((p) => p + 1);\n  }, [cursorStack, currentPageIdx, loadEvents]);\n\n  const handlePrevPage = useCallback(() => {\n    const prevIdx = currentPageIdx - 1;\n    setCurrentPageIdx(prevIdx);\n    void loadEvents(cursorStack[prevIdx]);\n  }, [cursorStack, currentPageIdx, loadEvents]);\n\n  const hasNextPage = events.length === limit;\n  const hasPrevPage = currentPageIdx > 0;\n\n  // Real-time webhook stream. Subscribes when the gateway exposes\n  // `webhookReceived`; otherwise polls every 60s as a graceful fallback.\n  useChannelSubscription({\n    query: WEBHOOK_RECEIVED_SUBSCRIPTION,\n    variables: { channelId },\n    operationName: 'WebhookReceived',\n    enabled: Boolean(channelId),\n    onData: useCallback(() => {\n      emitShellEvent('webhook.received', { channelId });\n      void loadEventsRef.current(cursorStackRef.current[currentPageIdxRef.current]);\n    }, [channelId]),\n    pollFn: useCallback(() => {\n      void loadEventsRef.current(cursorStackRef.current[currentPageIdxRef.current]);\n    }, []),\n    pollIntervalMs: 60_000,\n  });\n\n  const getStatusConfig = (status: WebhookProcessingStatus) => {\n    return STATUS_CONFIG[status] || STATUS_CONFIG.PENDING;\n  };\n\n  // Loading state (only show full-screen for initial channel load)\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <Loader2 size={32} className=\"animate-spin text-accent-primary\" />\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !channel) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg\">\n          <AlertCircle size={20} className=\"text-status-error-text\" />\n          <div>\n            <p className=\"text-sm font-medium text-status-error-text\">\n              {error || 'Channel not found'}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => navigate(`/channels/${channelId}`)}\n            className=\"ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors\"\n          >\n            Go Back\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_WEBHOOK_READ}>\n      <div className=\"space-y-6 p-3 sm:p-6\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-3\">\n            <button\n              type=\"button\"\n              onClick={() => navigate(`/channels/${channelId}`)}\n              aria-label={tr('channel.backToChannel', 'Back to channel')}\n              className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors\"\n            >\n              <ArrowLeft size={20} aria-hidden=\"true\" />\n            </button>\n            <div>\n              <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">\n                {tr('channel.webhookEvents', 'Webhook Events')}\n              </h1>\n              <p className=\"text-sm text-text-secondary mt-1\">{channel.name} - Event history</p>\n            </div>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <select\n              value={limit}\n              onChange={(e) => setLimit(Number(e.target.value))}\n              className=\"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={10}>10 results</option>\n              <option value={25}>25 results</option>\n              <option value={50}>50 results</option>\n              <option value={100}>100 results</option>\n            </select>\n            <button\n              type=\"button\"\n              onClick={() => void loadEvents(cursorStack[currentPageIdx])}\n              disabled={isLoadingEvents}\n              className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50\"\n            >\n              <RefreshCw size={16} className={isLoadingEvents ? 'animate-spin' : ''} />\n              {tr('channel.refresh', 'Refresh')}\n            </button>\n            <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_WEBHOOK_EXPORT}>\n              <button\n                type=\"button\"\n                onClick={() => void exportWebhooks()}\n                disabled={isExportingWebhooks}\n                className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border-subtle hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                title={tr('channel.exportCSV', 'Export to CSV')}\n              >\n                {isExportingWebhooks ? (\n                  <Loader2 size={16} className=\"animate-spin\" />\n                ) : (\n                  <Download size={16} />\n                )}\n                {tr('channel.export', 'Export')}\n              </button>\n            </PermissionGuard>\n          </div>\n        </div>\n\n        {/* Export Error Banner */}\n        {exportWebhooksError && (\n          <div className=\"p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3\">\n            <AlertCircle size={20} className=\"text-status-error-text\" />\n            <p className=\"text-sm text-status-error-text flex-1\">{exportWebhooksError}</p>\n          </div>\n        )}\n\n        {/* Info Banner */}\n        <div className=\"p-4 bg-surface border border-border-subtle rounded-lg\">\n          <p className=\"text-sm text-text-secondary\">\n            Webhook events show all incoming webhooks received by this channel. Data is retained for\n            7 days.\n          </p>\n        </div>\n\n        {/* Events List */}\n        <div className=\"bg-surface border border-border-subtle rounded-lg overflow-hidden\">\n          <div className=\"overflow-x-auto min-w-full\">\n            <table className=\"w-full min-w-[600px]\">\n              <thead className=\"bg-bg-sunken/50 border-b border-border-subtle\">\n                <tr>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.status', 'Status')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.eventType', 'Event Type')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.duplicate', 'Duplicate')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.processedAt', 'Processed At')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.error', 'Error')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.actions', 'Actions')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody className=\"divide-y divide-border\">\n                {events.length === 0 ? (\n                  <tr>\n                    <td colSpan={6} className=\"px-4 py-8 text-center text-text-secondary\">\n                      {tr('channel.noWebhookEventsFound', 'No webhook events found')}\n                    </td>\n                  </tr>\n                ) : (\n                  events.map((event) => {\n                    const statusConfig = getStatusConfig(event.status as WebhookProcessingStatus);\n                    const StatusIcon = statusConfig.icon;\n                    const isExpanded = expandedEvent === event.id;\n                    return (\n                      <>\n                        <tr key={event.id} className=\"hover:bg-bg-sunken/30 transition-colors\">\n                          <td className=\"px-4 py-3\">\n                            <div className=\"flex items-center gap-2\">\n                              <StatusIcon size={14} className={statusConfig.color.split(' ')[0]} />\n                              <span className={`text-sm font-medium ${statusConfig.color}`}>\n                                {statusConfig.label}\n                              </span>\n                            </div>\n                          </td>\n                          <td className=\"px-4 py-3 text-sm font-mono text-text-primary\">\n                            {event.eventType}\n                          </td>\n                          <td className=\"px-4 py-3\">\n                            {event.isDuplicate ? (\n                              <span className=\"text-xs text-status-warning-text bg-status-warning-bg-subtle px-2 py-1 rounded\">\n                                Duplicate\n                              </span>\n                            ) : (\n                              <span className=\"text-xs text-text-secondary\">No</span>\n                            )}\n                          </td>\n                          <td className=\"px-4 py-3 text-sm text-text-secondary\">\n                            {event.processedAt ? new Date(event.processedAt).toLocaleString() : '-'}\n                          </td>\n                          <td className=\"px-4 py-3 text-sm text-status-error-text max-w-xs truncate\">\n                            {event.errorMessage || '-'}\n                          </td>\n                          <td className=\"px-4 py-3\">\n                            <button\n                              type=\"button\"\n                              onClick={() => setExpandedEvent(isExpanded ? null : event.id)}\n                              aria-label={\n                                isExpanded\n                                  ? tr('channel.hidePayload', 'Hide payload')\n                                  : tr('channel.viewPayload', 'View payload')\n                              }\n                              aria-expanded={isExpanded}\n                              className=\"p-1 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded transition-colors\"\n                            >\n                              {isExpanded ? (\n                                <EyeOff size={16} aria-hidden=\"true\" />\n                              ) : (\n                                <Eye size={16} aria-hidden=\"true\" />\n                              )}\n                            </button>\n                          </td>\n                        </tr>\n                        {isExpanded && (\n                          <tr key={`${event.id}-payload`}>\n                            <td colSpan={6} className=\"px-4 py-3 bg-bg-sunken/30\">\n                              <div className=\"text-xs\">\n                                <p className=\"text-text-secondary mb-1\">\n                                  {tr('channel.payload', 'Payload')}:\n                                </p>\n                                <pre className=\"bg-surface p-2 rounded border border-border-subtle overflow-auto\">\n                                  {JSON.stringify(event.payload, null, 2)}\n                                </pre>\n                              </div>\n                            </td>\n                          </tr>\n                        )}\n                      </>\n                    );\n                  })\n                )}\n              </tbody>\n            </table>\n          </div>\n        </div>\n\n        {/* Pagination footer */}\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-sm text-text-secondary\">\n            {total > 0 && (\n              <>\n                {tr('channel.page', 'Page')}{' '}\n                <span className=\"font-medium\">{currentPageIdx + 1}</span>\n                {' · '}\n                {tr('channel.totalRecords', 'Total')}: <span className=\"font-medium\">{total}</span>\n              </>\n            )}\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <button\n              type=\"button\"\n              onClick={handlePrevPage}\n              disabled={!hasPrevPage || isLoadingEvents}\n              className=\"flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n            >\n              <ChevronLeft size={16} />\n              {tr('channel.previous', 'Previous')}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => void handleNextPage()}\n              disabled={!hasNextPage || isLoadingEvents}\n              className=\"flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed\"\n            >\n              {tr('channel.next', 'Next')}\n              <ChevronRight size={16} />\n            </button>\n          </div>\n        </div>\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-channel",
-  "version": "2026.530.2",
+  "version": "2026.624.1",
   "description": "Channel microfrontend for multi-channel communication management",
   "type": "module",
   "imports": {