@burdenoff/microfe-channel 2026.530.2 → 2026.624.1

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

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

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

@@ -12,7 +12,7 @@ import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 var w = {
 	PENDING: {
 		label: "Pending",
-		color: "text-muted-foreground bg-muted",
+		color: "text-text-secondary bg-bg-sunken",
 		icon: f
 	},
 	QUEUED: {
@@ -183,16 +183,16 @@ function T() {
 							type: "button",
 							onClick: () => f(`/channels/${d}`),
 							"aria-label": T("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__ */ S(u, {
 								size: 20,
 								"aria-hidden": "true"
 							})
 						}), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("h1", {
-							className: "text-xl sm:text-2xl font-bold text-foreground",
+							className: "text-xl sm:text-2xl font-bold text-text-primary",
 							children: T("channel.deliveryHistory", "Delivery History")
 						}), /* @__PURE__ */ C("p", {
-							className: "text-sm text-muted-foreground mt-1",
+							className: "text-sm text-text-secondary mt-1",
 							children: [G.name, " - Message deliveries"]
 						})] })]
 					}), /* @__PURE__ */ C("div", {
@@ -201,7 +201,7 @@ function T() {
 							/* @__PURE__ */ C("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__ */ S("option", {
 										value: 10,
@@ -225,7 +225,7 @@ function T() {
 								type: "button",
 								onClick: () => void X(V[U]),
 								disabled: k,
-								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__ */ S(h, {
 									size: 16,
 									className: k ? "animate-spin" : ""
@@ -237,7 +237,7 @@ function T() {
 									type: "button",
 									onClick: () => void re(),
 									disabled: D,
-									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: T("channel.exportCSV", "Export to CSV"),
 									children: [D ? /* @__PURE__ */ S(m, {
 										size: 16,
@@ -278,43 +278,43 @@ function T() {
 					]
 				}),
 				/* @__PURE__ */ S("div", {
-					className: "p-4 bg-surface border border-border rounded-lg",
+					className: "p-4 bg-surface border border-border-subtle rounded-lg",
 					children: /* @__PURE__ */ S("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: "Delivery history shows all message attempts sent through this channel. Data is retained for 7 days. Click retry on a failed delivery to attempt sending again."
 					})
 				}),
 				/* @__PURE__ */ S("div", {
-					className: "bg-surface border border-border rounded-lg overflow-hidden",
+					className: "bg-surface border border-border-subtle rounded-lg overflow-hidden",
 					children: /* @__PURE__ */ S("div", {
 						className: "overflow-x-auto min-w-full",
 						children: /* @__PURE__ */ C("table", {
 							className: "w-full min-w-[700px]",
 							children: [/* @__PURE__ */ S("thead", {
-								className: "bg-muted/50 border-b border-border",
+								className: "bg-bg-sunken/50 border-b border-border-subtle",
 								children: /* @__PURE__ */ C("tr", { children: [
 									/* @__PURE__ */ S("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: T("channel.status", "Status")
 									}),
 									/* @__PURE__ */ S("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: T("channel.content", "Content")
 									}),
 									/* @__PURE__ */ S("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: T("channel.sentAt", "Sent At")
 									}),
 									/* @__PURE__ */ S("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: T("channel.retries", "Retries")
 									}),
 									/* @__PURE__ */ S("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: T("channel.error", "Error")
 									}),
 									/* @__PURE__ */ S("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: T("channel.actions", "Actions")
 									})
 								] })
@@ -327,7 +327,7 @@ function T() {
 										size: 24,
 										className: "animate-spin text-accent-primary mx-auto"
 									}), /* @__PURE__ */ S("p", {
-										className: "text-sm text-muted-foreground mt-2",
+										className: "text-sm text-text-secondary mt-2",
 										children: "Loading delivery attempts…"
 									})]
 								}) }) : j.length === 0 ? /* @__PURE__ */ S("tr", { children: /* @__PURE__ */ S("td", {
@@ -338,14 +338,14 @@ function T() {
 										children: [
 											/* @__PURE__ */ S(_, {
 												size: 32,
-												className: "text-muted-foreground"
+												className: "text-text-secondary"
 											}),
 											/* @__PURE__ */ S("p", {
-												className: "text-sm font-medium text-foreground",
+												className: "text-sm font-medium text-text-primary",
 												children: T("channel.noDeliveryAttempts", "No delivery attempts yet")
 											}),
 											/* @__PURE__ */ S("p", {
-												className: "text-xs text-muted-foreground",
+												className: "text-xs text-text-secondary",
 												children: T("channel.sendMessageToSeeHistory", "Send a message through this channel to see delivery history")
 											})
 										]
@@ -353,7 +353,7 @@ function T() {
 								}) }) : j.map((e) => {
 									let t = le(e.status), i = t.icon, a = e.status === "FAILED" || e.status === "BOUNCED" || e.status === "REJECTED";
 									return /* @__PURE__ */ C("tr", {
-										className: "hover:bg-muted/30 transition-colors",
+										className: "hover:bg-bg-sunken/30 transition-colors",
 										children: [
 											/* @__PURE__ */ S("td", {
 												className: "px-4 py-3",
@@ -369,15 +369,15 @@ function T() {
 												})
 											}),
 											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3 text-sm text-foreground truncate max-w-xs",
+												className: "px-4 py-3 text-sm text-text-primary truncate max-w-xs",
 												children: e.content
 											}),
 											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3 text-sm text-muted-foreground",
+												className: "px-4 py-3 text-sm text-text-secondary",
 												children: e.sentAt ? new Date(e.sentAt).toLocaleString() : "-"
 											}),
 											/* @__PURE__ */ S("td", {
-												className: "px-4 py-3 text-sm text-muted-foreground",
+												className: "px-4 py-3 text-sm text-text-secondary",
 												children: e.retryCount
 											}),
 											/* @__PURE__ */ S("td", {
@@ -411,7 +411,7 @@ function T() {
 				/* @__PURE__ */ C("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ S("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: z > 0 && /* @__PURE__ */ C(x, { children: [
 							T("channel.page", "Page"),
 							" ",
@@ -433,13 +433,13 @@ function T() {
 							type: "button",
 							onClick: ae,
 							disabled: !se || k,
-							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__ */ S(te, { size: 16 }), T("channel.previous", "Previous")]
 						}), /* @__PURE__ */ C("button", {
 							type: "button",
 							onClick: () => void ie(),
 							disabled: !oe || k,
-							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: [T("channel.next", "Next"), /* @__PURE__ */ S(ne, { size: 16 })]
 						})]
 					})]

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

@@ -1 +1 @@
-{"version":3,"file":"DeliveryHistoryPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/DeliveryHistoryPage.tsx"],"sourcesContent":["/**\n * Delivery History Page\n *\n * Displays message delivery attempts for a specific channel with retry capability\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  Send,\n  RotateCcw,\n  Download,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-react';\nimport { useChannel, type DeliveryStatus, type DeliveryAttempt } from '../../../hooks/useChannels';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { useExportDeliveryAttempts } from '../hooks/useExport';\n\nconst STATUS_CONFIG: Record<\n  DeliveryStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  PENDING: { label: 'Pending', color: 'text-muted-foreground bg-muted', icon: Clock },\n  QUEUED: { label: 'Queued', color: 'text-accent-primary bg-accent-primary-subtle', icon: Clock },\n  SENDING: { label: 'Sending', color: 'text-accent-primary bg-accent-primary/10', icon: Send },\n  SENT: {\n    label: 'Sent',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  DELIVERED: {\n    label: 'Delivered',\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  BOUNCED: {\n    label: 'Bounced',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: AlertCircle,\n  },\n  REJECTED: {\n    label: 'Rejected',\n    color: 'text-status-error-text bg-status-error-bg-subtle',\n    icon: XCircle,\n  },\n  RATE_LIMITED: {\n    label: 'Rate Limited',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: Clock,\n  },\n  RETRYING: {\n    label: 'Retrying',\n    color: 'text-accent-primary bg-accent-primary/10',\n    icon: RefreshCw,\n  },\n  OPENED: {\n    label: 'Opened',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  CLICKED: {\n    label: 'Clicked',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n};\n\nexport function DeliveryHistoryPage() {\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: exportDeliveries,\n    isExporting: isExportingDeliveries,\n    exportError: exportDeliveriesError,\n  } = useExportDeliveryAttempts(organizationId ?? undefined, channelId);\n  const [isLoadingAttempts, setIsLoadingAttempts] = useState(true);\n  const [attempts, setAttempts] = useState<DeliveryAttempt[]>([]);\n  const [retryingId, setRetryingId] = useState<string | null>(null);\n  const [retryError, setRetryError] = useState<string | null>(null);\n  const [limit, setLimit] = useState(25);\n  const [total, setTotal] = useState(0);\n  // Cursor stack: index 0 is always undefined (first page), subsequent entries are cursors\n  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([undefined]);\n  const [currentPageIdx, setCurrentPageIdx] = useState(0);\n\n  const { channel, isLoading, error, fetchDeliveryAttempts, retryDelivery } = useChannel(channelId);\n\n  const loadAttempts = useCallback(\n    async (cursor?: string) => {\n      if (!channelId) return;\n      setIsLoadingAttempts(true);\n      setRetryError(null);\n      try {\n        const result = await fetchDeliveryAttempts(limit, cursor);\n        setAttempts(result.items);\n        setTotal(result.total);\n        return result.nextCursor;\n      } finally {\n        setIsLoadingAttempts(false);\n      }\n    },\n    [channelId, fetchDeliveryAttempts, limit]\n  );\n\n  const loadAttemptsRef = useRef(loadAttempts);\n  const cursorStackRef = useRef(cursorStack);\n  useEffect(() => {\n    loadAttemptsRef.current = loadAttempts;\n    cursorStackRef.current = cursorStack;\n  });\n  const isFirstPageRender = useRef(true);\n\n  useEffect(() => {\n    void Promise.resolve().then(() => {\n      setCursorStack([undefined]);\n      setCurrentPageIdx(0);\n      void loadAttemptsRef.current(undefined);\n    });\n  }, [limit]);\n\n  useEffect(() => {\n    if (isFirstPageRender.current) {\n      isFirstPageRender.current = false;\n      return;\n    }\n    void Promise.resolve().then(() =>\n      loadAttemptsRef.current(cursorStackRef.current[currentPageIdx])\n    );\n  }, [currentPageIdx]);\n\n  // Poll for delivery attempt updates every 60 s on first page only\n  useEffect(() => {\n    if (!channelId || currentPageIdx !== 0) return;\n    const timer = setInterval(() => {\n      void loadAttempts(undefined);\n    }, 60_000);\n    return () => clearInterval(timer);\n  }, [channelId, currentPageIdx, loadAttempts]);\n\n  const handleNextPage = useCallback(async () => {\n    const nextCursor = await loadAttempts(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, loadAttempts]);\n\n  const handlePrevPage = useCallback(() => {\n    const prevIdx = currentPageIdx - 1;\n    setCurrentPageIdx(prevIdx);\n    void loadAttempts(cursorStack[prevIdx]);\n  }, [cursorStack, currentPageIdx, loadAttempts]);\n\n  const hasNextPage = attempts.length === limit;\n  const hasPrevPage = currentPageIdx > 0;\n\n  const handleRetry = async (attemptId: string) => {\n    setRetryingId(attemptId);\n    setRetryError(null);\n    try {\n      const result = await retryDelivery(attemptId);\n      if (!result.success) {\n        setRetryError(result.error || 'Retry failed');\n      } else {\n        await loadAttempts(cursorStack[currentPageIdx]);\n      }\n    } finally {\n      setRetryingId(null);\n    }\n  };\n\n  const getStatusConfig = (status: DeliveryStatus) => {\n    return STATUS_CONFIG[status] || STATUS_CONFIG.PENDING;\n  };\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <output\n        className=\"flex items-center justify-center min-h-screen\"\n        aria-label={tr('channel.loading', 'Loading')}\n      >\n        <Loader2 size={32} className=\"animate-spin text-accent-primary\" aria-hidden=\"true\" />\n      </output>\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_DELIVERY_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.deliveryHistory', 'Delivery History')}\n              </h1>\n              <p className=\"text-sm text-muted-foreground mt-1\">\n                {channel.name} - Message deliveries\n              </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 loadAttempts(cursorStack[currentPageIdx])}\n              disabled={isLoadingAttempts}\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={isLoadingAttempts ? 'animate-spin' : ''} />\n              {tr('channel.refresh', 'Refresh')}\n            </button>\n            <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_EXPORT}>\n              <button\n                type=\"button\"\n                onClick={() => void exportDeliveries()}\n                disabled={isExportingDeliveries}\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                {isExportingDeliveries ? (\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        {exportDeliveriesError && (\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\">{exportDeliveriesError}</p>\n          </div>\n        )}\n\n        {/* Error Banner */}\n        {retryError && (\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\">{retryError}</p>\n            <button\n              type=\"button\"\n              onClick={() => setRetryError(null)}\n              className=\"text-status-error-text hover:text-status-error-text\"\n            >\n              {tr('channel.dismiss', 'Dismiss')}\n            </button>\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            Delivery history shows all message attempts sent through this channel. Data is retained\n            for 7 days. Click retry on a failed delivery to attempt sending again.\n          </p>\n        </div>\n\n        {/* Deliveries 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-[700px]\">\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.content', 'Content')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n                    {tr('channel.sentAt', 'Sent 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.retries', 'Retries')}\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                {isLoadingAttempts ? (\n                  <tr>\n                    <td colSpan={6} className=\"px-4 py-12 text-center\">\n                      <Loader2 size={24} className=\"animate-spin text-accent-primary mx-auto\" />\n                      <p className=\"text-sm text-muted-foreground mt-2\">\n                        Loading delivery attempts…\n                      </p>\n                    </td>\n                  </tr>\n                ) : attempts.length === 0 ? (\n                  <tr>\n                    <td colSpan={6} className=\"px-4 py-12 text-center\">\n                      <div className=\"flex flex-col items-center gap-2\">\n                        <Send size={32} className=\"text-muted-foreground\" />\n                        <p className=\"text-sm font-medium text-foreground\">\n                          {tr('channel.noDeliveryAttempts', 'No delivery attempts yet')}\n                        </p>\n                        <p className=\"text-xs text-muted-foreground\">\n                          {tr(\n                            'channel.sendMessageToSeeHistory',\n                            'Send a message through this channel to see delivery history'\n                          )}\n                        </p>\n                      </div>\n                    </td>\n                  </tr>\n                ) : (\n                  attempts.map((delivery) => {\n                    const statusConfig = getStatusConfig(delivery.status as DeliveryStatus);\n                    const StatusIcon = statusConfig.icon;\n                    const canRetry =\n                      delivery.status === 'FAILED' ||\n                      delivery.status === 'BOUNCED' ||\n                      delivery.status === 'REJECTED';\n                    return (\n                      <tr key={delivery.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 text-foreground truncate max-w-xs\">\n                          {delivery.content}\n                        </td>\n                        <td className=\"px-4 py-3 text-sm text-muted-foreground\">\n                          {delivery.sentAt ? new Date(delivery.sentAt).toLocaleString() : '-'}\n                        </td>\n                        <td className=\"px-4 py-3 text-sm text-muted-foreground\">\n                          {delivery.retryCount}\n                        </td>\n                        <td className=\"px-4 py-3 text-sm text-status-error-text max-w-xs truncate\">\n                          {delivery.errorMessage || '-'}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          {canRetry && (\n                            <PermissionGuard\n                              permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_EXECUTE}\n                            >\n                              <button\n                                type=\"button\"\n                                onClick={() => handleRetry(delivery.id)}\n                                disabled={retryingId === delivery.id}\n                                className=\"flex items-center gap-1 px-2 py-1 text-xs font-medium text-accent-primary hover:bg-accent-primary/10 rounded transition-colors disabled:opacity-50\"\n                                title={tr('channel.retryDelivery', 'Retry this delivery')}\n                              >\n                                <RotateCcw\n                                  size={12}\n                                  className={retryingId === delivery.id ? 'animate-spin' : ''}\n                                />\n                                {retryingId === delivery.id\n                                  ? tr('channel.retrying', 'Retrying...')\n                                  : tr('channel.retry', 'Retry')}\n                              </button>\n                            </PermissionGuard>\n                          )}\n                        </td>\n                      </tr>\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 || isLoadingAttempts}\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 || isLoadingAttempts}\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":"DeliveryHistoryPage.js","names":[],"sources":["../../../../../src/channel/modules/channels/pages/DeliveryHistoryPage.tsx"],"sourcesContent":["/**\n * Delivery History Page\n *\n * Displays message delivery attempts for a specific channel with retry capability\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  Send,\n  RotateCcw,\n  Download,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-react';\nimport { useChannel, type DeliveryStatus, type DeliveryAttempt } from '../../../hooks/useChannels';\nimport { useChannel as useChannelContext } from '../../../providers/ChannelProvider';\nimport { PermissionGuard } from '../../../components/PermissionGuard';\nimport { CHANNEL_PERMISSIONS } from '../../../constants/permissions';\nimport { useExportDeliveryAttempts } from '../hooks/useExport';\n\nconst STATUS_CONFIG: Record<\n  DeliveryStatus,\n  { label: string; color: string; icon: typeof CheckCircle2 }\n> = {\n  PENDING: { label: 'Pending', color: 'text-text-secondary bg-bg-sunken', icon: Clock },\n  QUEUED: { label: 'Queued', color: 'text-accent-primary bg-accent-primary-subtle', icon: Clock },\n  SENDING: { label: 'Sending', color: 'text-accent-primary bg-accent-primary/10', icon: Send },\n  SENT: {\n    label: 'Sent',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  DELIVERED: {\n    label: 'Delivered',\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  BOUNCED: {\n    label: 'Bounced',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: AlertCircle,\n  },\n  REJECTED: {\n    label: 'Rejected',\n    color: 'text-status-error-text bg-status-error-bg-subtle',\n    icon: XCircle,\n  },\n  RATE_LIMITED: {\n    label: 'Rate Limited',\n    color: 'text-status-warning-text bg-status-warning-bg-subtle',\n    icon: Clock,\n  },\n  RETRYING: {\n    label: 'Retrying',\n    color: 'text-accent-primary bg-accent-primary/10',\n    icon: RefreshCw,\n  },\n  OPENED: {\n    label: 'Opened',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n  CLICKED: {\n    label: 'Clicked',\n    color: 'text-status-success-text bg-status-success-bg-subtle',\n    icon: CheckCircle2,\n  },\n};\n\nexport function DeliveryHistoryPage() {\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: exportDeliveries,\n    isExporting: isExportingDeliveries,\n    exportError: exportDeliveriesError,\n  } = useExportDeliveryAttempts(organizationId ?? undefined, channelId);\n  const [isLoadingAttempts, setIsLoadingAttempts] = useState(true);\n  const [attempts, setAttempts] = useState<DeliveryAttempt[]>([]);\n  const [retryingId, setRetryingId] = useState<string | null>(null);\n  const [retryError, setRetryError] = useState<string | null>(null);\n  const [limit, setLimit] = useState(25);\n  const [total, setTotal] = useState(0);\n  // Cursor stack: index 0 is always undefined (first page), subsequent entries are cursors\n  const [cursorStack, setCursorStack] = useState<(string | undefined)[]>([undefined]);\n  const [currentPageIdx, setCurrentPageIdx] = useState(0);\n\n  const { channel, isLoading, error, fetchDeliveryAttempts, retryDelivery } = useChannel(channelId);\n\n  const loadAttempts = useCallback(\n    async (cursor?: string) => {\n      if (!channelId) return;\n      setIsLoadingAttempts(true);\n      setRetryError(null);\n      try {\n        const result = await fetchDeliveryAttempts(limit, cursor);\n        setAttempts(result.items);\n        setTotal(result.total);\n        return result.nextCursor;\n      } finally {\n        setIsLoadingAttempts(false);\n      }\n    },\n    [channelId, fetchDeliveryAttempts, limit]\n  );\n\n  const loadAttemptsRef = useRef(loadAttempts);\n  const cursorStackRef = useRef(cursorStack);\n  useEffect(() => {\n    loadAttemptsRef.current = loadAttempts;\n    cursorStackRef.current = cursorStack;\n  });\n  const isFirstPageRender = useRef(true);\n\n  useEffect(() => {\n    void Promise.resolve().then(() => {\n      setCursorStack([undefined]);\n      setCurrentPageIdx(0);\n      void loadAttemptsRef.current(undefined);\n    });\n  }, [limit]);\n\n  useEffect(() => {\n    if (isFirstPageRender.current) {\n      isFirstPageRender.current = false;\n      return;\n    }\n    void Promise.resolve().then(() =>\n      loadAttemptsRef.current(cursorStackRef.current[currentPageIdx])\n    );\n  }, [currentPageIdx]);\n\n  // Poll for delivery attempt updates every 60 s on first page only\n  useEffect(() => {\n    if (!channelId || currentPageIdx !== 0) return;\n    const timer = setInterval(() => {\n      void loadAttempts(undefined);\n    }, 60_000);\n    return () => clearInterval(timer);\n  }, [channelId, currentPageIdx, loadAttempts]);\n\n  const handleNextPage = useCallback(async () => {\n    const nextCursor = await loadAttempts(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, loadAttempts]);\n\n  const handlePrevPage = useCallback(() => {\n    const prevIdx = currentPageIdx - 1;\n    setCurrentPageIdx(prevIdx);\n    void loadAttempts(cursorStack[prevIdx]);\n  }, [cursorStack, currentPageIdx, loadAttempts]);\n\n  const hasNextPage = attempts.length === limit;\n  const hasPrevPage = currentPageIdx > 0;\n\n  const handleRetry = async (attemptId: string) => {\n    setRetryingId(attemptId);\n    setRetryError(null);\n    try {\n      const result = await retryDelivery(attemptId);\n      if (!result.success) {\n        setRetryError(result.error || 'Retry failed');\n      } else {\n        await loadAttempts(cursorStack[currentPageIdx]);\n      }\n    } finally {\n      setRetryingId(null);\n    }\n  };\n\n  const getStatusConfig = (status: DeliveryStatus) => {\n    return STATUS_CONFIG[status] || STATUS_CONFIG.PENDING;\n  };\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <output\n        className=\"flex items-center justify-center min-h-screen\"\n        aria-label={tr('channel.loading', 'Loading')}\n      >\n        <Loader2 size={32} className=\"animate-spin text-accent-primary\" aria-hidden=\"true\" />\n      </output>\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_DELIVERY_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.deliveryHistory', 'Delivery History')}\n              </h1>\n              <p className=\"text-sm text-text-secondary mt-1\">\n                {channel.name} - Message deliveries\n              </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 loadAttempts(cursorStack[currentPageIdx])}\n              disabled={isLoadingAttempts}\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={isLoadingAttempts ? 'animate-spin' : ''} />\n              {tr('channel.refresh', 'Refresh')}\n            </button>\n            <PermissionGuard permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_EXPORT}>\n              <button\n                type=\"button\"\n                onClick={() => void exportDeliveries()}\n                disabled={isExportingDeliveries}\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                {isExportingDeliveries ? (\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        {exportDeliveriesError && (\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\">{exportDeliveriesError}</p>\n          </div>\n        )}\n\n        {/* Error Banner */}\n        {retryError && (\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\">{retryError}</p>\n            <button\n              type=\"button\"\n              onClick={() => setRetryError(null)}\n              className=\"text-status-error-text hover:text-status-error-text\"\n            >\n              {tr('channel.dismiss', 'Dismiss')}\n            </button>\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            Delivery history shows all message attempts sent through this channel. Data is retained\n            for 7 days. Click retry on a failed delivery to attempt sending again.\n          </p>\n        </div>\n\n        {/* Deliveries 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-[700px]\">\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.content', 'Content')}\n                  </th>\n                  <th className=\"px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase tracking-wider\">\n                    {tr('channel.sentAt', 'Sent 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.retries', 'Retries')}\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                {isLoadingAttempts ? (\n                  <tr>\n                    <td colSpan={6} className=\"px-4 py-12 text-center\">\n                      <Loader2 size={24} className=\"animate-spin text-accent-primary mx-auto\" />\n                      <p className=\"text-sm text-text-secondary mt-2\">\n                        Loading delivery attempts…\n                      </p>\n                    </td>\n                  </tr>\n                ) : attempts.length === 0 ? (\n                  <tr>\n                    <td colSpan={6} className=\"px-4 py-12 text-center\">\n                      <div className=\"flex flex-col items-center gap-2\">\n                        <Send size={32} className=\"text-text-secondary\" />\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {tr('channel.noDeliveryAttempts', 'No delivery attempts yet')}\n                        </p>\n                        <p className=\"text-xs text-text-secondary\">\n                          {tr(\n                            'channel.sendMessageToSeeHistory',\n                            'Send a message through this channel to see delivery history'\n                          )}\n                        </p>\n                      </div>\n                    </td>\n                  </tr>\n                ) : (\n                  attempts.map((delivery) => {\n                    const statusConfig = getStatusConfig(delivery.status as DeliveryStatus);\n                    const StatusIcon = statusConfig.icon;\n                    const canRetry =\n                      delivery.status === 'FAILED' ||\n                      delivery.status === 'BOUNCED' ||\n                      delivery.status === 'REJECTED';\n                    return (\n                      <tr key={delivery.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 text-text-primary truncate max-w-xs\">\n                          {delivery.content}\n                        </td>\n                        <td className=\"px-4 py-3 text-sm text-text-secondary\">\n                          {delivery.sentAt ? new Date(delivery.sentAt).toLocaleString() : '-'}\n                        </td>\n                        <td className=\"px-4 py-3 text-sm text-text-secondary\">\n                          {delivery.retryCount}\n                        </td>\n                        <td className=\"px-4 py-3 text-sm text-status-error-text max-w-xs truncate\">\n                          {delivery.errorMessage || '-'}\n                        </td>\n                        <td className=\"px-4 py-3\">\n                          {canRetry && (\n                            <PermissionGuard\n                              permission={CHANNEL_PERMISSIONS.CHANNEL_DELIVERY_EXECUTE}\n                            >\n                              <button\n                                type=\"button\"\n                                onClick={() => handleRetry(delivery.id)}\n                                disabled={retryingId === delivery.id}\n                                className=\"flex items-center gap-1 px-2 py-1 text-xs font-medium text-accent-primary hover:bg-accent-primary/10 rounded transition-colors disabled:opacity-50\"\n                                title={tr('channel.retryDelivery', 'Retry this delivery')}\n                              >\n                                <RotateCcw\n                                  size={12}\n                                  className={retryingId === delivery.id ? 'animate-spin' : ''}\n                                />\n                                {retryingId === delivery.id\n                                  ? tr('channel.retrying', 'Retrying...')\n                                  : tr('channel.retry', 'Retry')}\n                              </button>\n                            </PermissionGuard>\n                          )}\n                        </td>\n                      </tr>\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 || isLoadingAttempts}\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 || isLoadingAttempts}\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/dist/channel/modules/channels/pages/EditChannelPage.js

@@ -178,7 +178,7 @@ var k = [
 		label: "Webhook",
 		description: "Generic HTTP webhook",
 		icon: b,
-		color: "text-muted-foreground bg-muted/50 border-border",
+		color: "text-text-secondary bg-bg-sunken/50 border-border-subtle",
 		adapters: [{
 			value: "WEBHOOK_HTTP",
 			label: "HTTP Webhook"
@@ -219,11 +219,11 @@ function j() {
 	let X = m?.platform || "EMAIL", Z = k.find((e) => e.value === X);
 	return g ? /* @__PURE__ */ D("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ D(h, { className: "size-8 animate-spin text-muted-foreground" })
+		children: /* @__PURE__ */ D(h, { className: "size-8 animate-spin text-text-secondary" })
 	}) : _ || !m ? /* @__PURE__ */ O("div", {
 		className: "flex flex-col items-center justify-center min-h-screen gap-4",
 		children: [
-			/* @__PURE__ */ D(u, { className: "size-12 text-destructive" }),
+			/* @__PURE__ */ D(u, { className: "size-12 text-status-error-text" }),
 			/* @__PURE__ */ D("h1", {
 				className: "text-xl font-semibold",
 				children: C("channel.channelNotFound", "Channel not found")
@@ -238,9 +238,9 @@ function j() {
 	}) : /* @__PURE__ */ D(i, {
 		permission: a.CHANNEL_UPDATE,
 		children: /* @__PURE__ */ O("div", {
-			className: "min-h-screen bg-background",
+			className: "min-h-screen bg-bg-surface",
 			children: [/* @__PURE__ */ D("div", {
-				className: "border-b bg-card",
+				className: "border-b bg-bg-surface",
 				children: /* @__PURE__ */ D("div", {
 					className: "container mx-auto px-6 py-4",
 					children: /* @__PURE__ */ O("div", {
@@ -248,13 +248,13 @@ function j() {
 						children: [/* @__PURE__ */ D("button", {
 							type: "button",
 							onClick: () => f(`/channels/${p}`),
-							className: "p-2 hover:bg-muted rounded-lg transition-colors",
+							className: "p-2 hover:bg-bg-sunken rounded-lg transition-colors",
 							children: /* @__PURE__ */ D(d, { className: "size-5 " })
 						}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("h1", {
 							className: "text-2xl font-bold",
 							children: C("channel.editChannel", "Edit Channel")
 						}), /* @__PURE__ */ D("p", {
-							className: "text-sm text-muted-foreground",
+							className: "text-sm text-text-secondary",
 							children: C("channel.updateChannelConfig", "Update channel configuration")
 						})] })]
 					})
@@ -265,25 +265,25 @@ function j() {
 					className: "space-y-6",
 					children: [
 						G && /* @__PURE__ */ O("div", {
-							className: "p-4 rounded-lg bg-destructive/10 border border-destructive/20 flex items-center gap-3",
-							children: [/* @__PURE__ */ D(u, { className: "size-5 text-destructive shrink-0" }), /* @__PURE__ */ D("p", {
-								className: "text-sm text-destructive",
+							className: "p-4 rounded-lg bg-status-error-bg/10 border border-status-error-border/20 flex items-center gap-3",
+							children: [/* @__PURE__ */ D(u, { className: "size-5 text-status-error-text shrink-0" }), /* @__PURE__ */ D("p", {
+								className: "text-sm text-status-error-text",
 								children: G
 							})]
 						}),
 						/* @__PURE__ */ O("div", {
-							className: "p-4 rounded-lg bg-muted/50 border space-y-2",
+							className: "p-4 rounded-lg bg-bg-sunken/50 border space-y-2",
 							children: [/* @__PURE__ */ D("div", {
 								className: "flex items-center gap-2",
 								children: Z && /* @__PURE__ */ O(E, { children: [(() => {
 									let e = Z.icon;
-									return /* @__PURE__ */ D(e, { className: "size-5 text-muted-foreground" });
+									return /* @__PURE__ */ D(e, { className: "size-5 text-text-secondary" });
 								})(), /* @__PURE__ */ D("span", {
 									className: "font-medium",
 									children: X
 								})] })
 							}), /* @__PURE__ */ D("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: C("channel.platformLockedHint", "Platform cannot be changed after channel creation. Create a new channel to use a different platform.")
 							})]
 						}),
@@ -298,7 +298,7 @@ function j() {
 								value: j,
 								onChange: (e) => M(e.target.value),
 								placeholder: C("channel.editNamePlaceholder", "e.g., Production Email, Customer SMS"),
-								className: "w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary"
+								className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary"
 							})]
 						}),
 						/* @__PURE__ */ O("div", {
@@ -312,7 +312,7 @@ function j() {
 								onChange: (e) => P(e.target.value),
 								placeholder: C("channel.editDescriptionPlaceholder", "Optional description for this channel"),
 								rows: 3,
-								className: "w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+								className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary resize-none"
 							})]
 						}),
 						Z && /* @__PURE__ */ O("div", {
@@ -323,7 +323,7 @@ function j() {
 							}), /* @__PURE__ */ D("select", {
 								value: F,
 								onChange: (e) => I(e.target.value),
-								className: "w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary",
+								className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary",
 								children: Z.adapters.map((e) => /* @__PURE__ */ D("option", {
 									value: e.value,
 									children: e.label
@@ -342,14 +342,14 @@ function j() {
 									/* @__PURE__ */ D("select", {
 										value: L,
 										onChange: (e) => R(Number(e.target.value)),
-										className: "w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary",
+										className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary",
 										children: A.map((e) => /* @__PURE__ */ D("option", {
 											value: e.value,
 											children: e.label
 										}, e.value))
 									}),
 									/* @__PURE__ */ D("p", {
-										className: "text-xs text-muted-foreground",
+										className: "text-xs text-text-secondary",
 										children: C("channel.priorityFailoverHint", "Higher priority channels are used first in failover")
 									})
 								]
@@ -361,7 +361,7 @@ function j() {
 								}), /* @__PURE__ */ O("select", {
 									value: z,
 									onChange: (e) => B(e.target.value),
-									className: "w-full px-4 py-2 rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-primary",
+									className: "w-full px-4 py-2 rounded-lg border bg-bg-surface focus:outline-none focus:ring-2 focus:ring-primary",
 									children: [
 										/* @__PURE__ */ D("option", {
 											value: "INACTIVE",
@@ -385,7 +385,7 @@ function j() {
 								className: "flex items-center gap-2",
 								children: [
 									/* @__PURE__ */ D("span", {
-										className: "text-sm text-muted-foreground",
+										className: "text-sm text-text-secondary",
 										children: C("channel.confirmDelete", "Confirm delete?")
 									}),
 									/* @__PURE__ */ O("button", {
@@ -401,13 +401,13 @@ function j() {
 											}
 										},
 										disabled: U,
-										className: "px-4 py-2 text-sm bg-destructive text-destructive-foreground rounded-lg hover:bg-destructive/90 transition-colors flex items-center gap-2",
+										className: "px-4 py-2 text-sm bg-status-error-bg text-status-error-text rounded-lg hover:bg-status-error-bg/90 transition-colors flex items-center gap-2",
 										children: [U ? /* @__PURE__ */ D(h, { className: "size-4 animate-spin" }) : /* @__PURE__ */ D(S, { className: "size-4 " }), C("channel.delete", "Delete")]
 									}),
 									/* @__PURE__ */ D("button", {
 										type: "button",
 										onClick: () => J(!1),
-										className: "px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg transition-colors",
+										className: "px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors",
 										children: C("channel.cancel", "Cancel")
 									})
 								]
@@ -416,7 +416,7 @@ function j() {
 								children: /* @__PURE__ */ O("button", {
 									type: "button",
 									onClick: () => J(!0),
-									className: "px-4 py-2 text-sm text-destructive hover:bg-destructive/10 rounded-lg transition-colors flex items-center gap-2",
+									className: "px-4 py-2 text-sm text-status-error-text hover:bg-status-error-bg/10 rounded-lg transition-colors flex items-center gap-2",
 									children: [/* @__PURE__ */ D(S, { className: "size-4 " }), C("channel.deleteChannel", "Delete Channel")]
 								})
 							}) }), /* @__PURE__ */ O("div", {
@@ -424,7 +424,7 @@ function j() {
 								children: [/* @__PURE__ */ D("button", {
 									type: "button",
 									onClick: () => f(`/channels/${p}`),
-									className: "px-4 py-2 text-sm text-muted-foreground hover:bg-muted rounded-lg transition-colors",
+									className: "px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors",
 									children: C("channel.cancel", "Cancel")
 								}), /* @__PURE__ */ O("button", {
 									type: "button",
@@ -451,7 +451,7 @@ function j() {
 										}
 									},
 									disabled: V || !j.trim(),
-									className: "px-6 py-2 text-sm bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 disabled:opacity-50",
+									className: "px-6 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-lg hover:bg-action-primary-bg/90 transition-colors flex items-center gap-2 disabled:opacity-50",
 									children: [V ? /* @__PURE__ */ D(h, { className: "size-4 animate-spin" }) : /* @__PURE__ */ D(y, { className: "size-4 " }), C("channel.saveChanges", "Save Changes")]
 								})]
 							})]