@burdenoff/microfe-subscriberbot 2026.1023.2 → 2026.1030.1

package/dist/subscriberbot/pages/InboxPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InboxPage.js","names":[],"sources":["../../../src/subscriberbot/pages/InboxPage.tsx"],"sourcesContent":["/**\n * Universal Inbox\n * @module subscriberbot/pages\n *\n * Every merged subscription communication in one timeline, AI-categorized,\n * plus management of the ingest channels that feed it. Filter by category /\n * unread, mark messages read, add & verify channels, and log a test message.\n * Reads `subListInboxMessages` / `subListChannels`; writes `subMarkMessageRead`,\n * `subCreateChannel`, `subVerifyChannel`, `subIngestMessage`.\n */\n\nimport { useState } from 'react';\nimport {\n  Mail,\n  MailOpen,\n  AlertTriangle,\n  Inbox as InboxIcon,\n  Plus,\n  Radio,\n  BadgeCheck,\n  Send,\n  MessageSquare,\n  MessagesSquare,\n  Bell,\n  Webhook,\n  Phone,\n  Hash,\n  ShieldAlert,\n  Sparkles,\n  ChevronRight,\n  MousePointerClick,\n  type LucideIcon,\n} from 'lucide-react';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { StatusBadge } from '../components/StatusBadge';\nimport { EmptyState } from '../components/EmptyState';\nimport { Modal } from '../components/Modal';\nimport { LoadingView, ErrorView, Section } from '../components/StateViews';\nimport { MiniProgress } from '../components/viz';\nimport { useSubscriberBot } from '../context/SubscriberBotContext';\nimport {\n  useInboxMessages,\n  useMarkMessageRead,\n  useChannels,\n  useCreateChannel,\n  useVerifyChannel,\n  useIngestMessage,\n} from '../hooks/useSubscriberBotApi';\nimport { useTr } from '../hooks/useTr';\nimport { cn } from '../utils/cn';\nimport { formatEnumLabel, formatRelativeTime, formatDateTime } from '../utils/formatters';\nimport type {\n  SubChannelType,\n  SubCommunicationChannel,\n  SubInboxMessage,\n  SubMessageCategory,\n} from '../types';\n\nconst PAGE_SIZE = 25;\n\nconst inputCls =\n  'w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]';\nconst labelCls = 'mb-1 block text-xs font-medium text-text-secondary';\n\nconst MESSAGE_CATEGORIES: SubMessageCategory[] = [\n  'BILLING',\n  'RENEWAL',\n  'REQUIRED_ACTION',\n  'SECURITY_ALERT',\n  'PRODUCT_UPDATE',\n  'MARKETING',\n  'OTHER',\n];\n\nconst CHANNEL_TYPES: SubChannelType[] = [\n  'EMAIL',\n  'SMS',\n  'SLACK',\n  'DISCORD',\n  'WHATSAPP',\n  'PUSH',\n  'WEBHOOK',\n];\n\nconst CATEGORY_KEY: Record<SubMessageCategory, string> = {\n  BILLING: 'inbox.categories.billing',\n  RENEWAL: 'inbox.categories.renewal',\n  REQUIRED_ACTION: 'inbox.categories.requiredAction',\n  SECURITY_ALERT: 'inbox.categories.securityAlert',\n  PRODUCT_UPDATE: 'inbox.categories.productUpdate',\n  MARKETING: 'inbox.categories.marketing',\n  OTHER: 'inbox.categories.other',\n};\n\n// Category filter tabs (chips) — the \"All\" pseudo-value plus the real enum.\n// Labels are resolved via useTr inside the page component.\nconst CATEGORY_TAB_VALUES: Array<{\n  value: '' | SubMessageCategory;\n  key: string;\n  fallback: string;\n}> = [\n  { value: '', key: 'inbox.categories.all', fallback: 'All' },\n  { value: 'BILLING', key: CATEGORY_KEY.BILLING, fallback: 'Billing' },\n  { value: 'RENEWAL', key: CATEGORY_KEY.RENEWAL, fallback: 'Renewals' },\n  { value: 'REQUIRED_ACTION', key: CATEGORY_KEY.REQUIRED_ACTION, fallback: 'Required actions' },\n  { value: 'SECURITY_ALERT', key: CATEGORY_KEY.SECURITY_ALERT, fallback: 'Security' },\n  { value: 'PRODUCT_UPDATE', key: CATEGORY_KEY.PRODUCT_UPDATE, fallback: 'Product updates' },\n  { value: 'MARKETING', key: CATEGORY_KEY.MARKETING, fallback: 'Marketing' },\n  { value: 'OTHER', key: CATEGORY_KEY.OTHER, fallback: 'Other' },\n];\n\n// Per-category tag tone — semantic tokens only.\nconst CATEGORY_TONE: Record<SubMessageCategory, string> = {\n  BILLING: 'bg-[var(--color-accent-soft)] text-text-primary',\n  RENEWAL: 'bg-status-success-bg-subtle text-status-success-text',\n  REQUIRED_ACTION: 'bg-status-warning-bg-subtle text-status-warning-text',\n  SECURITY_ALERT: 'bg-status-error-bg-subtle text-status-error-text',\n  PRODUCT_UPDATE: 'bg-[var(--color-accent-soft)] text-text-primary',\n  MARKETING: 'bg-bg-sunken text-text-secondary',\n  OTHER: 'bg-bg-sunken text-text-secondary',\n};\n\nconst CHANNEL_ICON: Record<SubChannelType, LucideIcon> = {\n  EMAIL: Mail,\n  SMS: MessageSquare,\n  SLACK: Hash,\n  DISCORD: MessagesSquare,\n  WHATSAPP: Phone,\n  PUSH: Bell,\n  WEBHOOK: Webhook,\n};\n\nfunction CategoryTag({ category }: { category: SubMessageCategory }) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium',\n        CATEGORY_TONE[category]\n      )}\n    >\n      {formatEnumLabel(category)}\n    </span>\n  );\n}\n\nfunction ActionFlag({ className }: { className?: string }) {\n  const tr = useTr();\n  return (\n    <span\n      title={tr('inbox.message.actionRequiredTitle', 'Action required')}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-[10px] font-medium text-status-warning-text',\n        className\n      )}\n    >\n      <AlertTriangle className=\"h-3 w-3\" /> {tr('inbox.message.actionFlag', 'Action')}\n    </span>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Add channel modal → subCreateChannel\n// ---------------------------------------------------------------------------\n\nfunction AddChannelModal({ onClose }: { onClose: () => void }) {\n  const tr = useTr();\n  const create = useCreateChannel();\n  const [type, setType] = useState<SubChannelType>('EMAIL');\n  const [address, setAddress] = useState('');\n  const [label, setLabel] = useState('');\n  const [ingestEnabled, setIngestEnabled] = useState(true);\n  const [formError, setFormError] = useState<string | null>(null);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setFormError(null);\n    if (!address.trim()) {\n      setFormError(tr('inbox.addChannelModal.addressRequired', 'An address is required.'));\n      return;\n    }\n    create.mutate(\n      {\n        type,\n        address: address.trim(),\n        ingestEnabled,\n        ...(label.trim() ? { label: label.trim() } : {}),\n      },\n      {\n        onSuccess: () => onClose(),\n        onError: (err) =>\n          setFormError(\n            err instanceof Error\n              ? err.message\n              : tr('inbox.addChannelModal.error', 'Could not add channel.')\n          ),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      title={tr('inbox.addChannelModal.title', 'Add channel')}\n      onClose={onClose}\n      maxWidthClassName=\"max-w-xl\"\n    >\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        {formError && (\n          <div className=\"rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text\">\n            {formError}\n          </div>\n        )}\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          <div>\n            <label htmlFor=\"ch-type\" className={labelCls}>\n              {tr('inbox.addChannelModal.typeLabel', 'Type')}\n            </label>\n            <select\n              id=\"ch-type\"\n              value={type}\n              onChange={(e) => setType(e.target.value as SubChannelType)}\n              className={inputCls}\n            >\n              {CHANNEL_TYPES.map((t) => (\n                <option key={t} value={t}>\n                  {formatEnumLabel(t)}\n                </option>\n              ))}\n            </select>\n          </div>\n          <div>\n            <label htmlFor=\"ch-label\" className={labelCls}>\n              {tr('inbox.addChannelModal.labelLabel', 'Label')}\n            </label>\n            <input\n              id=\"ch-label\"\n              type=\"text\"\n              value={label}\n              onChange={(e) => setLabel(e.target.value)}\n              placeholder={tr('inbox.addChannelModal.labelPlaceholder', 'e.g. Billing inbox')}\n              className={inputCls}\n            />\n          </div>\n        </div>\n        <div>\n          <label htmlFor=\"ch-address\" className={labelCls}>\n            {tr('inbox.addChannelModal.addressLabel', 'Address')}{' '}\n            <span className=\"text-status-error-text\">*</span>\n          </label>\n          <input\n            id=\"ch-address\"\n            type=\"text\"\n            value={address}\n            onChange={(e) => setAddress(e.target.value)}\n            placeholder={tr(\n              'inbox.addChannelModal.addressPlaceholder',\n              'e.g. billing@acme.com, +1…, a webhook URL'\n            )}\n            className={inputCls}\n            required\n          />\n        </div>\n        <label className=\"flex items-center gap-2 text-sm text-text-primary\">\n          <input\n            type=\"checkbox\"\n            checked={ingestEnabled}\n            onChange={(e) => setIngestEnabled(e.target.checked)}\n            className=\"size-4 rounded border-border-subtle\"\n          />\n          {tr('inbox.addChannelModal.ingestLabel', 'Ingest messages from this channel')}\n        </label>\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n          >\n            {tr('inbox.addChannelModal.cancel', 'Cancel')}\n          </button>\n          <button\n            type=\"submit\"\n            disabled={create.isPending}\n            className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n          >\n            {create.isPending\n              ? tr('inbox.addChannelModal.adding', 'Adding…')\n              : tr('inbox.addChannelModal.submit', 'Add channel')}\n          </button>\n        </div>\n      </form>\n    </Modal>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Log test message modal → subIngestMessage\n// ---------------------------------------------------------------------------\n\nfunction LogMessageModal({\n  channel,\n  onClose,\n}: {\n  channel: SubCommunicationChannel;\n  onClose: () => void;\n}) {\n  const tr = useTr();\n  const ingest = useIngestMessage();\n  const [subject, setSubject] = useState('');\n  const [preview, setPreview] = useState('');\n  const [category, setCategory] = useState<SubMessageCategory>('OTHER');\n  const [actionRequired, setActionRequired] = useState(false);\n  const [formError, setFormError] = useState<string | null>(null);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setFormError(null);\n    ingest.mutate(\n      {\n        channelId: channel.id,\n        receivedAt: new Date().toISOString(),\n        category,\n        actionRequired,\n        ...(subject.trim() ? { subject: subject.trim() } : {}),\n        ...(preview.trim() ? { preview: preview.trim() } : {}),\n      },\n      {\n        onSuccess: () => onClose(),\n        onError: (err) =>\n          setFormError(\n            err instanceof Error\n              ? err.message\n              : tr('inbox.logMessageModal.error', 'Could not log the message.')\n          ),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      title={tr('inbox.logMessageModal.title', 'Log test message')}\n      description={tr(\n        'inbox.logMessageModal.description',\n        'Simulate an ingested message from {channel}.',\n        { channel: channel.label || channel.address }\n      )}\n      onClose={onClose}\n    >\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        {formError && (\n          <div className=\"rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text\">\n            {formError}\n          </div>\n        )}\n        <div>\n          <label htmlFor=\"msg-subject\" className={labelCls}>\n            {tr('inbox.logMessageModal.subjectLabel', 'Subject')}\n          </label>\n          <input\n            id=\"msg-subject\"\n            type=\"text\"\n            value={subject}\n            onChange={(e) => setSubject(e.target.value)}\n            placeholder={tr(\n              'inbox.logMessageModal.subjectPlaceholder',\n              'e.g. Your plan renews in 3 days'\n            )}\n            className={inputCls}\n          />\n        </div>\n        <div>\n          <label htmlFor=\"msg-preview\" className={labelCls}>\n            {tr('inbox.logMessageModal.previewLabel', 'Preview')}\n          </label>\n          <textarea\n            id=\"msg-preview\"\n            value={preview}\n            onChange={(e) => setPreview(e.target.value)}\n            rows={2}\n            className={inputCls}\n          />\n        </div>\n        <div>\n          <label htmlFor=\"msg-category\" className={labelCls}>\n            {tr('inbox.logMessageModal.categoryLabel', 'Category')}\n          </label>\n          <select\n            id=\"msg-category\"\n            value={category}\n            onChange={(e) => setCategory(e.target.value as SubMessageCategory)}\n            className={inputCls}\n          >\n            {MESSAGE_CATEGORIES.map((c) => (\n              <option key={c} value={c}>\n                {tr(CATEGORY_KEY[c], formatEnumLabel(c))}\n              </option>\n            ))}\n          </select>\n        </div>\n        <label className=\"flex items-center gap-2 text-sm text-text-primary\">\n          <input\n            type=\"checkbox\"\n            checked={actionRequired}\n            onChange={(e) => setActionRequired(e.target.checked)}\n            className=\"size-4 rounded border-border-subtle\"\n          />\n          {tr('inbox.logMessageModal.actionRequired', 'Requires action')}\n        </label>\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n          >\n            {tr('inbox.logMessageModal.cancel', 'Cancel')}\n          </button>\n          <button\n            type=\"submit\"\n            disabled={ingest.isPending}\n            className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n          >\n            {ingest.isPending\n              ? tr('inbox.logMessageModal.logging', 'Logging…')\n              : tr('inbox.logMessageModal.submit', 'Log message')}\n          </button>\n        </div>\n      </form>\n    </Modal>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Channel card → one per ingest source\n// ---------------------------------------------------------------------------\n\nfunction ChannelCard({\n  channel,\n  onVerify,\n  verifying,\n  onLog,\n}: {\n  channel: SubCommunicationChannel;\n  onVerify: (id: string) => void;\n  verifying: boolean;\n  onLog: (ch: SubCommunicationChannel) => void;\n}) {\n  const tr = useTr();\n  const Icon = CHANNEL_ICON[channel.type] ?? Radio;\n  const verified = channel.status === 'VERIFIED';\n  return (\n    <GlassCard treatment=\"metric\" className=\"flex flex-col p-4\">\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex min-w-0 items-center gap-2.5\">\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n            <Icon className=\"h-4 w-4\" />\n          </span>\n          <div className=\"min-w-0\">\n            <p className=\"truncate text-sm font-semibold text-text-primary\">\n              {formatEnumLabel(channel.type)}\n            </p>\n            {channel.label && (\n              <p className=\"truncate text-xs text-text-secondary\">{channel.label}</p>\n            )}\n          </div>\n        </div>\n        <StatusBadge status={channel.status} />\n      </div>\n\n      <div className=\"mt-3 border-t border-border-subtle pt-3\">\n        <p className=\"text-[11px] uppercase tracking-wide text-text-secondary\">\n          {channel.ingestEnabled\n            ? tr('inbox.channels.ingestingFrom', 'Ingesting from')\n            : tr('inbox.channels.ingestPaused', 'Ingest paused')}\n        </p>\n        <p className=\"mt-0.5 truncate text-sm text-text-primary\" title={channel.address}>\n          {channel.address}\n        </p>\n      </div>\n\n      <div className=\"mt-auto flex flex-wrap items-center gap-2 pt-3\">\n        {channel.status === 'PENDING' && (\n          <button\n            type=\"button\"\n            disabled={verifying}\n            onClick={() => onVerify(channel.id)}\n            className=\"inline-flex items-center gap-1 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n          >\n            <BadgeCheck className=\"h-3.5 w-3.5\" /> {tr('inbox.channels.verify', 'Verify')}\n          </button>\n        )}\n        {verified && channel.ingestEnabled && (\n          <button\n            type=\"button\"\n            onClick={() => onLog(channel)}\n            className=\"inline-flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken\"\n          >\n            <Send className=\"h-3.5 w-3.5\" />{' '}\n            {tr('inbox.channels.logTestMessage', 'Log test message')}\n          </button>\n        )}\n        {channel.status === 'DISABLED' && (\n          <span className=\"text-xs text-text-secondary\">\n            {tr('inbox.channels.disabled', 'Channel disabled')}\n          </span>\n        )}\n      </div>\n    </GlassCard>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Channels management panel\n// ---------------------------------------------------------------------------\n\nfunction ChannelsSection() {\n  const tr = useTr();\n  const { data, isLoading, isError, refetch } = useChannels();\n  const verify = useVerifyChannel();\n  const [showAdd, setShowAdd] = useState(false);\n  const [logChannel, setLogChannel] = useState<SubCommunicationChannel | null>(null);\n\n  const channels = data ?? [];\n  const verifiedCount = channels.filter((c) => c.status === 'VERIFIED').length;\n  const pendingCount = channels.filter((c) => c.status === 'PENDING').length;\n\n  return (\n    <Section\n      title={tr('inbox.channels.title', 'Ingest channels')}\n      description={tr(\n        'inbox.channels.description',\n        'The sources the Universal Inbox pulls subscription communication from'\n      )}\n      action={\n        <button\n          type=\"button\"\n          onClick={() => setShowAdd(true)}\n          className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90\"\n        >\n          <Plus className=\"h-3.5 w-3.5\" /> {tr('inbox.channels.add', 'Add channel')}\n        </button>\n      }\n    >\n      {isLoading ? (\n        <LoadingView label={tr('inbox.channels.loading', 'Loading channels…')} />\n      ) : isError ? (\n        <ErrorView\n          message={tr('inbox.channels.error', 'Could not load channels.')}\n          onRetry={() => void refetch()}\n        />\n      ) : channels.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Radio className=\"h-12 w-12\" />}\n          title={tr('inbox.channels.emptyTitle', 'No channels yet')}\n          description={tr(\n            'inbox.channels.emptyDescription',\n            'Add an email, SMS, Slack or webhook channel to start ingesting subscription communication.'\n          )}\n        />\n      ) : (\n        <>\n          {(verifiedCount > 0 || pendingCount > 0) && (\n            <div className=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary\">\n              <span className=\"inline-flex items-center gap-1.5\">\n                <span className=\"size-1.5 rounded-full bg-status-success-text\" aria-hidden />\n                {tr('inbox.channels.verified', '{{count}} verified', { count: verifiedCount })}\n              </span>\n              {pendingCount > 0 && (\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <span className=\"size-1.5 rounded-full bg-status-warning-text\" aria-hidden />\n                  {tr('inbox.channels.pending', '{{count}} pending verification', {\n                    count: pendingCount,\n                  })}\n                </span>\n              )}\n            </div>\n          )}\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {channels.map((ch) => (\n              <ChannelCard\n                key={ch.id}\n                channel={ch}\n                verifying={verify.isPending}\n                onVerify={(id) => verify.mutate(id)}\n                onLog={(c) => setLogChannel(c)}\n              />\n            ))}\n          </div>\n        </>\n      )}\n\n      {showAdd && <AddChannelModal onClose={() => setShowAdd(false)} />}\n      {logChannel && <LogMessageModal channel={logChannel} onClose={() => setLogChannel(null)} />}\n    </Section>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Message row (list)\n// ---------------------------------------------------------------------------\n\nfunction MessageRow({\n  message,\n  active,\n  onSelect,\n  onMarkRead,\n  markPending,\n  onViewRelationship,\n}: {\n  message: SubInboxMessage;\n  active: boolean;\n  onSelect: () => void;\n  onMarkRead: () => void;\n  markPending: boolean;\n  onViewRelationship: (() => void) | null;\n}) {\n  const tr = useTr();\n  const unread = !message.isRead;\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      aria-pressed={active}\n      onClick={onSelect}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onSelect();\n        }\n      }}\n      className={cn(\n        'relative flex cursor-pointer items-start gap-3 p-4 transition-colors',\n        'focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-inset',\n        active ? 'bg-bg-sunken' : unread ? 'bg-accent-wash' : 'hover:bg-bg-sunken/60'\n      )}\n    >\n      {/* unread accent rail */}\n      {unread && <span aria-hidden className=\"absolute inset-y-0 left-0 w-0.5 bg-text-link\" />}\n      <span className=\"mt-0.5 shrink-0 text-text-secondary\">\n        {unread ? <Mail className=\"h-4 w-4 text-text-link\" /> : <MailOpen className=\"h-4 w-4\" />}\n      </span>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2\">\n          {unread && (\n            <span\n              aria-label={tr('inbox.message.unreadAria', 'Unread')}\n              className=\"size-1.5 shrink-0 rounded-full bg-text-link\"\n            />\n          )}\n          <p\n            className={cn(\n              'min-w-0 flex-1 truncate text-sm',\n              unread ? 'font-semibold text-text-primary' : 'font-normal text-text-primary'\n            )}\n          >\n            {message.subject || tr('inbox.message.noSubject', '(no subject)')}\n          </p>\n          <span className=\"shrink-0 text-xs tabular-nums text-text-secondary\">\n            {formatRelativeTime(message.receivedAt)}\n          </span>\n        </div>\n        {message.preview && (\n          <p className=\"mt-0.5 line-clamp-2 text-xs text-text-secondary\">{message.preview}</p>\n        )}\n        <div className=\"mt-1.5 flex flex-wrap items-center gap-2\">\n          <CategoryTag category={message.category} />\n          {message.actionRequired && <ActionFlag />}\n          {onViewRelationship && (\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onViewRelationship();\n              }}\n              className=\"text-xs font-medium text-text-link hover:underline\"\n            >\n              {tr('inbox.message.viewRelationship', 'View relationship')}\n            </button>\n          )}\n          {unread && (\n            <button\n              type=\"button\"\n              disabled={markPending}\n              onClick={(e) => {\n                e.stopPropagation();\n                onMarkRead();\n              }}\n              className=\"ml-auto shrink-0 rounded-lg border border-border-subtle px-2.5 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n            >\n              {tr('inbox.message.markRead', 'Mark read')}\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Reading pane (wide screens)\n// ---------------------------------------------------------------------------\n\nfunction ReadingPane({\n  message,\n  channel,\n  onMarkRead,\n  markPending,\n  onViewRelationship,\n}: {\n  message: SubInboxMessage | null;\n  channel: SubCommunicationChannel | undefined;\n  onMarkRead: () => void;\n  markPending: boolean;\n  onViewRelationship: (() => void) | null;\n}) {\n  const tr = useTr();\n  if (!message) {\n    return (\n      <GlassCard\n        treatment=\"metric\"\n        className=\"flex min-h-[20rem] flex-col items-center justify-center p-8 text-center\"\n      >\n        <MousePointerClick className=\"h-10 w-10 text-text-secondary\" />\n        <p className=\"mt-3 text-sm font-medium text-text-primary\">\n          {tr('inbox.readingPane.selectTitle', 'Select a message')}\n        </p>\n        <p className=\"mt-1 max-w-[16rem] text-xs text-text-secondary\">\n          {tr(\n            'inbox.readingPane.selectDescription',\n            'Pick any message from the list to read the full details here.'\n          )}\n        </p>\n      </GlassCard>\n    );\n  }\n\n  const Icon = channel ? (CHANNEL_ICON[channel.type] ?? Radio) : Radio;\n  const confidencePct =\n    message.categoryConfidence != null\n      ? Math.round(Math.max(0, Math.min(1, message.categoryConfidence)) * 100)\n      : null;\n\n  return (\n    <GlassCard treatment=\"metric\" className=\"flex flex-col p-5\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <h3 className=\"text-base font-semibold text-text-primary\">\n          {message.subject || tr('inbox.message.noSubject', '(no subject)')}\n        </h3>\n        {!message.isRead && (\n          <button\n            type=\"button\"\n            disabled={markPending}\n            onClick={onMarkRead}\n            className=\"shrink-0 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n          >\n            {tr('inbox.message.markRead', 'Mark read')}\n          </button>\n        )}\n      </div>\n\n      {channel && (\n        <div className=\"mt-2 flex items-center gap-2 text-sm\">\n          <Icon className=\"h-4 w-4 shrink-0 text-text-secondary\" />\n          <span className=\"truncate text-text-secondary\" title={channel.address}>\n            {channel.address}\n          </span>\n        </div>\n      )}\n\n      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n        <CategoryTag category={message.category} />\n        {message.actionRequired && <ActionFlag />}\n        <span className=\"text-xs text-text-secondary\">{formatDateTime(message.receivedAt)}</span>\n      </div>\n\n      {confidencePct != null && (\n        <div className=\"mt-4 rounded-lg border border-border-subtle bg-bg-surface p-3\">\n          <div className=\"flex items-center justify-between text-xs\">\n            <span className=\"inline-flex items-center gap-1.5 font-medium text-text-primary\">\n              <Sparkles className=\"h-3.5 w-3.5 text-text-link\" />{' '}\n              {tr('inbox.readingPane.aiCategorization', 'AI categorization')}\n            </span>\n            <span className=\"tabular-nums text-text-secondary\">\n              {tr('inbox.readingPane.confidence', '{{pct}}% confidence', { pct: confidencePct })}\n            </span>\n          </div>\n          <MiniProgress\n            value={confidencePct}\n            max={100}\n            tone={confidencePct >= 66 ? 'positive' : confidencePct >= 33 ? 'accent' : 'warning'}\n            className=\"mt-2\"\n          />\n        </div>\n      )}\n\n      <div className=\"mt-4 border-t border-border-subtle pt-4\">\n        {message.preview ? (\n          <p className=\"whitespace-pre-wrap text-sm leading-relaxed text-text-primary\">\n            {message.preview}\n          </p>\n        ) : (\n          <p className=\"text-sm italic text-text-secondary\">\n            {tr('inbox.readingPane.noPreview', 'No preview available for this message.')}\n          </p>\n        )}\n      </div>\n\n      {message.actionRequired && (\n        <div className=\"mt-4 flex items-start gap-2 rounded-lg border border-status-warning-text/30 bg-status-warning-bg-subtle p-3\">\n          <ShieldAlert className=\"mt-0.5 h-4 w-4 shrink-0 text-status-warning-text\" />\n          <p className=\"text-xs text-status-warning-text\">\n            {tr(\n              'inbox.readingPane.attention',\n              'This message needs your attention — review it before its provider deadline.'\n            )}\n          </p>\n        </div>\n      )}\n\n      {onViewRelationship && (\n        <button\n          type=\"button\"\n          onClick={onViewRelationship}\n          className=\"mt-4 inline-flex items-center gap-1 self-start text-sm font-medium text-text-link hover:underline\"\n        >\n          {tr('inbox.message.viewRelationship', 'View relationship')}{' '}\n          <ChevronRight className=\"h-4 w-4\" />\n        </button>\n      )}\n    </GlassCard>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Filter chip\n// ---------------------------------------------------------------------------\n\nfunction Chip({\n  active,\n  onClick,\n  children,\n  tone = 'default',\n}: {\n  active: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n  tone?: 'default' | 'warning';\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n        active\n          ? tone === 'warning'\n            ? 'border-transparent bg-status-warning-bg-subtle text-status-warning-text'\n            : 'border-transparent bg-action-primary-bg text-action-primary-text'\n          : 'border-border-subtle text-text-secondary hover:bg-bg-sunken hover:text-text-primary'\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function InboxPage() {\n  const tr = useTr();\n  const { navigateTo } = useSubscriberBot();\n  const [page, setPage] = useState(0);\n  const [category, setCategory] = useState<'' | SubMessageCategory>('');\n  const [unreadOnly, setUnreadOnly] = useState(false);\n  const [actionOnly, setActionOnly] = useState(false);\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n\n  const { data, isLoading, isError, refetch, isFetching } = useInboxMessages({\n    category: category || undefined,\n    unreadOnly: unreadOnly || undefined,\n    pagination: { limit: PAGE_SIZE, offset: page * PAGE_SIZE },\n  });\n  const { data: channelsData } = useChannels();\n  const markRead = useMarkMessageRead();\n\n  const items = data?.items ?? [];\n  const hasMore = data?.pageInfo.hasMore ?? false;\n\n  // \"Action required\" is a client-side lens over the current page.\n  const displayed = actionOnly ? items.filter((m) => m.actionRequired) : items;\n\n  // Real, computed page stats.\n  const unreadCount = items.filter((m) => !m.isRead).length;\n  const actionCount = items.filter((m) => m.actionRequired).length;\n\n  const channelMap = new Map((channelsData ?? []).map((c) => [c.id, c]));\n  const selected = displayed.find((m) => m.id === selectedId) ?? null;\n  const selectedChannel = selected ? channelMap.get(selected.channelId) : undefined;\n\n  const resetToFirst = () => {\n    setPage(0);\n    setSelectedId(null);\n  };\n\n  return (\n    <PageLayout\n      title={tr('inbox.title', 'Universal Inbox')}\n      description={tr(\n        'inbox.description',\n        'Every subscription communication, merged and categorized'\n      )}\n    >\n      <PagePurpose className=\"mb-4\">\n        {tr(\n          'inbox.purpose',\n          'Subscription communication is noisy and scattered. The Universal Inbox merges every channel a provider uses and uses AI to categorize each message so you never miss a renewal, required action or security notice.'\n        )}\n      </PagePurpose>\n\n      {/* Category tabs */}\n      <div className=\"-mx-1 flex gap-2 overflow-x-auto px-1 pb-1\">\n        {CATEGORY_TAB_VALUES.map((t) => (\n          <span key={t.value} className=\"shrink-0\">\n            <Chip\n              active={category === t.value}\n              onClick={() => {\n                setCategory(t.value);\n                resetToFirst();\n              }}\n            >\n              {tr(t.key, t.fallback)}\n            </Chip>\n          </span>\n        ))}\n      </div>\n\n      {/* Lenses + stats */}\n      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n        <Chip\n          active={actionOnly}\n          tone=\"warning\"\n          onClick={() => {\n            setActionOnly((v) => !v);\n            setSelectedId(null);\n          }}\n        >\n          <AlertTriangle className=\"h-3.5 w-3.5\" />{' '}\n          {tr('inbox.filters.actionRequired', 'Action required')}\n        </Chip>\n        <Chip\n          active={unreadOnly}\n          onClick={() => {\n            setUnreadOnly((v) => !v);\n            resetToFirst();\n          }}\n        >\n          <Mail className=\"h-3.5 w-3.5\" /> {tr('inbox.filters.unreadOnly', 'Unread only')}\n        </Chip>\n        {!isLoading && !isError && items.length > 0 && (\n          <p className=\"ml-auto text-xs text-text-secondary\">\n            {tr('inbox.filters.unreadCount', '{{count}} unread', { count: unreadCount })}\n            {' · '}\n            {tr('inbox.filters.actionCount', '{{count}} need action', { count: actionCount })}\n            {isFetching ? ` · ${tr('inbox.filters.refreshing', 'refreshing…')}` : ''}\n          </p>\n        )}\n      </div>\n\n      {isLoading ? (\n        <LoadingView label={tr('inbox.loading', 'Loading inbox…')} />\n      ) : isError ? (\n        <ErrorView\n          message={tr('inbox.error', 'Could not load the inbox.')}\n          onRetry={() => void refetch()}\n        />\n      ) : items.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-inbox\"\n            icon={<InboxIcon className=\"h-12 w-12\" />}\n            title={tr('inbox.emptyTitle', 'Inbox is empty')}\n            description={\n              unreadOnly || category\n                ? tr('inbox.emptyDescriptionFiltered', 'No messages match these filters.')\n                : tr(\n                    'inbox.emptyDescription',\n                    'Merged subscription communications will appear here once channels start ingesting.'\n                  )\n            }\n          />\n        </div>\n      ) : (\n        <div className=\"mt-5 grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_380px]\">\n          {/* List */}\n          <div className=\"min-w-0\">\n            {displayed.length === 0 ? (\n              <div className=\"rounded-xl border border-border-subtle bg-bg-surface p-8 text-center\">\n                <AlertTriangle className=\"mx-auto h-8 w-8 text-text-secondary\" />\n                <p className=\"mt-2 text-sm font-medium text-text-primary\">\n                  {tr('inbox.noActionTitle', 'No action-required messages on this page')}\n                </p>\n                <p className=\"mt-1 text-xs text-text-secondary\">\n                  {tr(\n                    'inbox.noActionDescription',\n                    'Turn off the “Action required” lens or move to another page.'\n                  )}\n                </p>\n              </div>\n            ) : (\n              <div className=\"divide-y divide-border-subtle overflow-hidden rounded-xl border border-border-subtle bg-bg-surface\">\n                {displayed.map((m) => (\n                  <MessageRow\n                    key={m.id}\n                    message={m}\n                    active={m.id === selectedId}\n                    onSelect={() => setSelectedId(m.id)}\n                    onMarkRead={() => markRead.mutate(m.id)}\n                    markPending={markRead.isPending}\n                    onViewRelationship={\n                      m.relationshipId\n                        ? () => navigateTo(`/relationships/${m.relationshipId}`)\n                        : null\n                    }\n                  />\n                ))}\n              </div>\n            )}\n\n            <div className=\"mt-4 flex items-center justify-between\">\n              <p className=\"text-xs text-text-secondary\">\n                {tr('inbox.pagination.page', 'Page {{page}}', { page: page + 1 })}\n                {isFetching ? ` · ${tr('inbox.filters.refreshing', 'refreshing…')}` : ''}\n              </p>\n              <div className=\"flex gap-2\">\n                <button\n                  type=\"button\"\n                  disabled={page === 0}\n                  onClick={() => {\n                    setPage((p) => Math.max(0, p - 1));\n                    setSelectedId(null);\n                  }}\n                  className={cn(\n                    'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                    page === 0\n                      ? 'cursor-not-allowed text-text-secondary opacity-50'\n                      : 'text-text-primary hover:bg-bg-sunken'\n                  )}\n                >\n                  {tr('inbox.pagination.previous', 'Previous')}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={!hasMore}\n                  onClick={() => {\n                    setPage((p) => p + 1);\n                    setSelectedId(null);\n                  }}\n                  className={cn(\n                    'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                    !hasMore\n                      ? 'cursor-not-allowed text-text-secondary opacity-50'\n                      : 'text-text-primary hover:bg-bg-sunken'\n                  )}\n                >\n                  {tr('inbox.pagination.next', 'Next')}\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Reading pane — wide screens only */}\n          <aside className=\"hidden lg:block\">\n            <div className=\"lg:sticky lg:top-4\">\n              <ReadingPane\n                message={selected}\n                channel={selectedChannel}\n                onMarkRead={() => selected && markRead.mutate(selected.id)}\n                markPending={markRead.isPending}\n                onViewRelationship={\n                  selected?.relationshipId\n                    ? () => navigateTo(`/relationships/${selected.relationshipId}`)\n                    : null\n                }\n              />\n            </div>\n          </aside>\n        </div>\n      )}\n\n      <ChannelsSection />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"InboxPage.js","names":[],"sources":["../../../src/subscriberbot/pages/InboxPage.tsx"],"sourcesContent":["/**\n * Universal Inbox\n * @module subscriberbot/pages\n *\n * Every merged subscription communication in one timeline, AI-categorized,\n * plus management of the ingest channels that feed it. Filter by category /\n * unread, mark messages read, add & verify channels, and log a test message.\n * Reads `subListInboxMessages` / `subListChannels`; writes `subMarkMessageRead`,\n * `subCreateChannel`, `subVerifyChannel`, `subIngestMessage`.\n */\n\nimport { useState } from 'react';\nimport {\n  Mail,\n  MailOpen,\n  AlertTriangle,\n  Inbox as InboxIcon,\n  Plus,\n  Radio,\n  BadgeCheck,\n  Send,\n  MessageSquare,\n  MessagesSquare,\n  Bell,\n  Webhook,\n  Phone,\n  Hash,\n  ShieldAlert,\n  Sparkles,\n  ChevronRight,\n  MousePointerClick,\n  type LucideIcon,\n} from 'lucide-react';\nimport { PagePurpose, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { StatusBadge } from '../components/StatusBadge';\nimport { EmptyState } from '../components/EmptyState';\nimport { Modal } from '../components/Modal';\nimport { LoadingView, ErrorView, Section } from '../components/StateViews';\nimport { MiniProgress } from '../components/viz';\nimport { useSubscriberBot } from '../context/SubscriberBotContext';\nimport {\n  useInboxMessages,\n  useMarkMessageRead,\n  useChannels,\n  useCreateChannel,\n  useVerifyChannel,\n  useIngestMessage,\n} from '../hooks/useSubscriberBotApi';\nimport { useTr } from '../hooks/useTr';\nimport { useRouteSelection } from '../hooks/useRouteSelection';\nimport { cn } from '../utils/cn';\nimport { formatEnumLabel, formatRelativeTime, formatDateTime } from '../utils/formatters';\nimport type {\n  SubChannelType,\n  SubCommunicationChannel,\n  SubInboxMessage,\n  SubMessageCategory,\n} from '../types';\n\nconst PAGE_SIZE = 25;\n\nconst inputCls =\n  'w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]';\nconst labelCls = 'mb-1 block text-xs font-medium text-text-secondary';\n\nconst MESSAGE_CATEGORIES: SubMessageCategory[] = [\n  'BILLING',\n  'RENEWAL',\n  'REQUIRED_ACTION',\n  'SECURITY_ALERT',\n  'PRODUCT_UPDATE',\n  'MARKETING',\n  'OTHER',\n];\n\nconst CHANNEL_TYPES: SubChannelType[] = [\n  'EMAIL',\n  'SMS',\n  'SLACK',\n  'DISCORD',\n  'WHATSAPP',\n  'PUSH',\n  'WEBHOOK',\n];\n\nconst CATEGORY_KEY: Record<SubMessageCategory, string> = {\n  BILLING: 'inbox.categories.billing',\n  RENEWAL: 'inbox.categories.renewal',\n  REQUIRED_ACTION: 'inbox.categories.requiredAction',\n  SECURITY_ALERT: 'inbox.categories.securityAlert',\n  PRODUCT_UPDATE: 'inbox.categories.productUpdate',\n  MARKETING: 'inbox.categories.marketing',\n  OTHER: 'inbox.categories.other',\n};\n\n// Category filter tabs (chips) — the \"All\" pseudo-value plus the real enum.\n// Labels are resolved via useTr inside the page component.\nconst CATEGORY_TAB_VALUES: Array<{\n  value: '' | SubMessageCategory;\n  key: string;\n  fallback: string;\n}> = [\n  { value: '', key: 'inbox.categories.all', fallback: 'All' },\n  { value: 'BILLING', key: CATEGORY_KEY.BILLING, fallback: 'Billing' },\n  { value: 'RENEWAL', key: CATEGORY_KEY.RENEWAL, fallback: 'Renewals' },\n  { value: 'REQUIRED_ACTION', key: CATEGORY_KEY.REQUIRED_ACTION, fallback: 'Required actions' },\n  { value: 'SECURITY_ALERT', key: CATEGORY_KEY.SECURITY_ALERT, fallback: 'Security' },\n  { value: 'PRODUCT_UPDATE', key: CATEGORY_KEY.PRODUCT_UPDATE, fallback: 'Product updates' },\n  { value: 'MARKETING', key: CATEGORY_KEY.MARKETING, fallback: 'Marketing' },\n  { value: 'OTHER', key: CATEGORY_KEY.OTHER, fallback: 'Other' },\n];\n\n// Per-category tag tone — semantic tokens only.\nconst CATEGORY_TONE: Record<SubMessageCategory, string> = {\n  BILLING: 'bg-[var(--color-accent-soft)] text-text-primary',\n  RENEWAL: 'bg-status-success-bg-subtle text-status-success-text',\n  REQUIRED_ACTION: 'bg-status-warning-bg-subtle text-status-warning-text',\n  SECURITY_ALERT: 'bg-status-error-bg-subtle text-status-error-text',\n  PRODUCT_UPDATE: 'bg-[var(--color-accent-soft)] text-text-primary',\n  MARKETING: 'bg-bg-sunken text-text-secondary',\n  OTHER: 'bg-bg-sunken text-text-secondary',\n};\n\nconst CHANNEL_ICON: Record<SubChannelType, LucideIcon> = {\n  EMAIL: Mail,\n  SMS: MessageSquare,\n  SLACK: Hash,\n  DISCORD: MessagesSquare,\n  WHATSAPP: Phone,\n  PUSH: Bell,\n  WEBHOOK: Webhook,\n};\n\nfunction CategoryTag({ category }: { category: SubMessageCategory }) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium',\n        CATEGORY_TONE[category]\n      )}\n    >\n      {formatEnumLabel(category)}\n    </span>\n  );\n}\n\nfunction ActionFlag({ className }: { className?: string }) {\n  const tr = useTr();\n  return (\n    <span\n      title={tr('inbox.message.actionRequiredTitle', 'Action required')}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full bg-status-warning-bg-subtle px-2 py-0.5 text-[10px] font-medium text-status-warning-text',\n        className\n      )}\n    >\n      <AlertTriangle className=\"h-3 w-3\" /> {tr('inbox.message.actionFlag', 'Action')}\n    </span>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Add channel modal → subCreateChannel\n// ---------------------------------------------------------------------------\n\nfunction AddChannelModal({ onClose }: { onClose: () => void }) {\n  const tr = useTr();\n  const create = useCreateChannel();\n  const [type, setType] = useState<SubChannelType>('EMAIL');\n  const [address, setAddress] = useState('');\n  const [label, setLabel] = useState('');\n  const [ingestEnabled, setIngestEnabled] = useState(true);\n  const [formError, setFormError] = useState<string | null>(null);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setFormError(null);\n    if (!address.trim()) {\n      setFormError(tr('inbox.addChannelModal.addressRequired', 'An address is required.'));\n      return;\n    }\n    create.mutate(\n      {\n        type,\n        address: address.trim(),\n        ingestEnabled,\n        ...(label.trim() ? { label: label.trim() } : {}),\n      },\n      {\n        onSuccess: () => onClose(),\n        onError: (err) =>\n          setFormError(\n            err instanceof Error\n              ? err.message\n              : tr('inbox.addChannelModal.error', 'Could not add channel.')\n          ),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      title={tr('inbox.addChannelModal.title', 'Add channel')}\n      onClose={onClose}\n      maxWidthClassName=\"max-w-xl\"\n    >\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        {formError && (\n          <div className=\"rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text\">\n            {formError}\n          </div>\n        )}\n        <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          <div>\n            <label htmlFor=\"ch-type\" className={labelCls}>\n              {tr('inbox.addChannelModal.typeLabel', 'Type')}\n            </label>\n            <select\n              id=\"ch-type\"\n              value={type}\n              onChange={(e) => setType(e.target.value as SubChannelType)}\n              className={inputCls}\n            >\n              {CHANNEL_TYPES.map((t) => (\n                <option key={t} value={t}>\n                  {formatEnumLabel(t)}\n                </option>\n              ))}\n            </select>\n          </div>\n          <div>\n            <label htmlFor=\"ch-label\" className={labelCls}>\n              {tr('inbox.addChannelModal.labelLabel', 'Label')}\n            </label>\n            <input\n              id=\"ch-label\"\n              type=\"text\"\n              value={label}\n              onChange={(e) => setLabel(e.target.value)}\n              placeholder={tr('inbox.addChannelModal.labelPlaceholder', 'e.g. Billing inbox')}\n              className={inputCls}\n            />\n          </div>\n        </div>\n        <div>\n          <label htmlFor=\"ch-address\" className={labelCls}>\n            {tr('inbox.addChannelModal.addressLabel', 'Address')}{' '}\n            <span className=\"text-status-error-text\">*</span>\n          </label>\n          <input\n            id=\"ch-address\"\n            type=\"text\"\n            value={address}\n            onChange={(e) => setAddress(e.target.value)}\n            placeholder={tr(\n              'inbox.addChannelModal.addressPlaceholder',\n              'e.g. billing@acme.com, +1…, a webhook URL'\n            )}\n            className={inputCls}\n            required\n          />\n        </div>\n        <label className=\"flex items-center gap-2 text-sm text-text-primary\">\n          <input\n            type=\"checkbox\"\n            checked={ingestEnabled}\n            onChange={(e) => setIngestEnabled(e.target.checked)}\n            className=\"size-4 rounded border-border-subtle\"\n          />\n          {tr('inbox.addChannelModal.ingestLabel', 'Ingest messages from this channel')}\n        </label>\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n          >\n            {tr('inbox.addChannelModal.cancel', 'Cancel')}\n          </button>\n          <button\n            type=\"submit\"\n            disabled={create.isPending}\n            className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n          >\n            {create.isPending\n              ? tr('inbox.addChannelModal.adding', 'Adding…')\n              : tr('inbox.addChannelModal.submit', 'Add channel')}\n          </button>\n        </div>\n      </form>\n    </Modal>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Log test message modal → subIngestMessage\n// ---------------------------------------------------------------------------\n\nfunction LogMessageModal({\n  channel,\n  onClose,\n}: {\n  channel: SubCommunicationChannel;\n  onClose: () => void;\n}) {\n  const tr = useTr();\n  const ingest = useIngestMessage();\n  const [subject, setSubject] = useState('');\n  const [preview, setPreview] = useState('');\n  const [category, setCategory] = useState<SubMessageCategory>('OTHER');\n  const [actionRequired, setActionRequired] = useState(false);\n  const [formError, setFormError] = useState<string | null>(null);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setFormError(null);\n    ingest.mutate(\n      {\n        channelId: channel.id,\n        receivedAt: new Date().toISOString(),\n        category,\n        actionRequired,\n        ...(subject.trim() ? { subject: subject.trim() } : {}),\n        ...(preview.trim() ? { preview: preview.trim() } : {}),\n      },\n      {\n        onSuccess: () => onClose(),\n        onError: (err) =>\n          setFormError(\n            err instanceof Error\n              ? err.message\n              : tr('inbox.logMessageModal.error', 'Could not log the message.')\n          ),\n      }\n    );\n  };\n\n  return (\n    <Modal\n      title={tr('inbox.logMessageModal.title', 'Log test message')}\n      description={tr(\n        'inbox.logMessageModal.description',\n        'Simulate an ingested message from {channel}.',\n        { channel: channel.label || channel.address }\n      )}\n      onClose={onClose}\n    >\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        {formError && (\n          <div className=\"rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text\">\n            {formError}\n          </div>\n        )}\n        <div>\n          <label htmlFor=\"msg-subject\" className={labelCls}>\n            {tr('inbox.logMessageModal.subjectLabel', 'Subject')}\n          </label>\n          <input\n            id=\"msg-subject\"\n            type=\"text\"\n            value={subject}\n            onChange={(e) => setSubject(e.target.value)}\n            placeholder={tr(\n              'inbox.logMessageModal.subjectPlaceholder',\n              'e.g. Your plan renews in 3 days'\n            )}\n            className={inputCls}\n          />\n        </div>\n        <div>\n          <label htmlFor=\"msg-preview\" className={labelCls}>\n            {tr('inbox.logMessageModal.previewLabel', 'Preview')}\n          </label>\n          <textarea\n            id=\"msg-preview\"\n            value={preview}\n            onChange={(e) => setPreview(e.target.value)}\n            rows={2}\n            className={inputCls}\n          />\n        </div>\n        <div>\n          <label htmlFor=\"msg-category\" className={labelCls}>\n            {tr('inbox.logMessageModal.categoryLabel', 'Category')}\n          </label>\n          <select\n            id=\"msg-category\"\n            value={category}\n            onChange={(e) => setCategory(e.target.value as SubMessageCategory)}\n            className={inputCls}\n          >\n            {MESSAGE_CATEGORIES.map((c) => (\n              <option key={c} value={c}>\n                {tr(CATEGORY_KEY[c], formatEnumLabel(c))}\n              </option>\n            ))}\n          </select>\n        </div>\n        <label className=\"flex items-center gap-2 text-sm text-text-primary\">\n          <input\n            type=\"checkbox\"\n            checked={actionRequired}\n            onChange={(e) => setActionRequired(e.target.checked)}\n            className=\"size-4 rounded border-border-subtle\"\n          />\n          {tr('inbox.logMessageModal.actionRequired', 'Requires action')}\n        </label>\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken\"\n          >\n            {tr('inbox.logMessageModal.cancel', 'Cancel')}\n          </button>\n          <button\n            type=\"submit\"\n            disabled={ingest.isPending}\n            className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n          >\n            {ingest.isPending\n              ? tr('inbox.logMessageModal.logging', 'Logging…')\n              : tr('inbox.logMessageModal.submit', 'Log message')}\n          </button>\n        </div>\n      </form>\n    </Modal>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Channel card → one per ingest source\n// ---------------------------------------------------------------------------\n\nfunction ChannelCard({\n  channel,\n  onVerify,\n  verifying,\n  onLog,\n}: {\n  channel: SubCommunicationChannel;\n  onVerify: (id: string) => void;\n  verifying: boolean;\n  onLog: (ch: SubCommunicationChannel) => void;\n}) {\n  const tr = useTr();\n  const Icon = CHANNEL_ICON[channel.type] ?? Radio;\n  const verified = channel.status === 'VERIFIED';\n  return (\n    <GlassCard treatment=\"metric\" className=\"flex flex-col p-4\">\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"flex min-w-0 items-center gap-2.5\">\n          <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n            <Icon className=\"h-4 w-4\" />\n          </span>\n          <div className=\"min-w-0\">\n            <p className=\"truncate text-sm font-semibold text-text-primary\">\n              {formatEnumLabel(channel.type)}\n            </p>\n            {channel.label && (\n              <p className=\"truncate text-xs text-text-secondary\">{channel.label}</p>\n            )}\n          </div>\n        </div>\n        <StatusBadge status={channel.status} />\n      </div>\n\n      <div className=\"mt-3 border-t border-border-subtle pt-3\">\n        <p className=\"text-[11px] uppercase tracking-wide text-text-secondary\">\n          {channel.ingestEnabled\n            ? tr('inbox.channels.ingestingFrom', 'Ingesting from')\n            : tr('inbox.channels.ingestPaused', 'Ingest paused')}\n        </p>\n        <p className=\"mt-0.5 truncate text-sm text-text-primary\" title={channel.address}>\n          {channel.address}\n        </p>\n      </div>\n\n      <div className=\"mt-auto flex flex-wrap items-center gap-2 pt-3\">\n        {channel.status === 'PENDING' && (\n          <button\n            type=\"button\"\n            disabled={verifying}\n            onClick={() => onVerify(channel.id)}\n            className=\"inline-flex items-center gap-1 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50\"\n          >\n            <BadgeCheck className=\"h-3.5 w-3.5\" /> {tr('inbox.channels.verify', 'Verify')}\n          </button>\n        )}\n        {verified && channel.ingestEnabled && (\n          <button\n            type=\"button\"\n            onClick={() => onLog(channel)}\n            className=\"inline-flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken\"\n          >\n            <Send className=\"h-3.5 w-3.5\" />{' '}\n            {tr('inbox.channels.logTestMessage', 'Log test message')}\n          </button>\n        )}\n        {channel.status === 'DISABLED' && (\n          <span className=\"text-xs text-text-secondary\">\n            {tr('inbox.channels.disabled', 'Channel disabled')}\n          </span>\n        )}\n      </div>\n    </GlassCard>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Channels management panel\n// ---------------------------------------------------------------------------\n\nfunction ChannelsSection() {\n  const tr = useTr();\n  const { data, isLoading, isError, refetch } = useChannels();\n  const verify = useVerifyChannel();\n  const [showAdd, setShowAdd] = useState(false);\n  const [logChannel, setLogChannel] = useState<SubCommunicationChannel | null>(null);\n\n  const channels = data ?? [];\n  const verifiedCount = channels.filter((c) => c.status === 'VERIFIED').length;\n  const pendingCount = channels.filter((c) => c.status === 'PENDING').length;\n\n  return (\n    <Section\n      title={tr('inbox.channels.title', 'Ingest channels')}\n      description={tr(\n        'inbox.channels.description',\n        'The sources the Universal Inbox pulls subscription communication from'\n      )}\n      action={\n        <button\n          type=\"button\"\n          onClick={() => setShowAdd(true)}\n          className=\"inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:opacity-90\"\n        >\n          <Plus className=\"h-3.5 w-3.5\" /> {tr('inbox.channels.add', 'Add channel')}\n        </button>\n      }\n    >\n      {isLoading ? (\n        <LoadingView label={tr('inbox.channels.loading', 'Loading channels…')} />\n      ) : isError ? (\n        <ErrorView\n          message={tr('inbox.channels.error', 'Could not load channels.')}\n          onRetry={() => void refetch()}\n        />\n      ) : channels.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-data\"\n          icon={<Radio className=\"h-12 w-12\" />}\n          title={tr('inbox.channels.emptyTitle', 'No channels yet')}\n          description={tr(\n            'inbox.channels.emptyDescription',\n            'Add an email, SMS, Slack or webhook channel to start ingesting subscription communication.'\n          )}\n        />\n      ) : (\n        <>\n          {(verifiedCount > 0 || pendingCount > 0) && (\n            <div className=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-text-secondary\">\n              <span className=\"inline-flex items-center gap-1.5\">\n                <span className=\"size-1.5 rounded-full bg-status-success-text\" aria-hidden />\n                {tr('inbox.channels.verified', '{{count}} verified', { count: verifiedCount })}\n              </span>\n              {pendingCount > 0 && (\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <span className=\"size-1.5 rounded-full bg-status-warning-text\" aria-hidden />\n                  {tr('inbox.channels.pending', '{{count}} pending verification', {\n                    count: pendingCount,\n                  })}\n                </span>\n              )}\n            </div>\n          )}\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n            {channels.map((ch) => (\n              <ChannelCard\n                key={ch.id}\n                channel={ch}\n                verifying={verify.isPending}\n                onVerify={(id) => verify.mutate(id)}\n                onLog={(c) => setLogChannel(c)}\n              />\n            ))}\n          </div>\n        </>\n      )}\n\n      {showAdd && <AddChannelModal onClose={() => setShowAdd(false)} />}\n      {logChannel && <LogMessageModal channel={logChannel} onClose={() => setLogChannel(null)} />}\n    </Section>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Message row (list)\n// ---------------------------------------------------------------------------\n\nfunction MessageRow({\n  message,\n  active,\n  onSelect,\n  onMarkRead,\n  markPending,\n  onViewRelationship,\n}: {\n  message: SubInboxMessage;\n  active: boolean;\n  onSelect: () => void;\n  onMarkRead: () => void;\n  markPending: boolean;\n  onViewRelationship: (() => void) | null;\n}) {\n  const tr = useTr();\n  const unread = !message.isRead;\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      aria-pressed={active}\n      onClick={onSelect}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          onSelect();\n        }\n      }}\n      className={cn(\n        'relative flex cursor-pointer items-start gap-3 p-4 transition-colors',\n        'focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-inset',\n        active ? 'bg-bg-sunken' : unread ? 'bg-accent-wash' : 'hover:bg-bg-sunken/60'\n      )}\n    >\n      {/* unread accent rail */}\n      {unread && <span aria-hidden className=\"absolute inset-y-0 left-0 w-0.5 bg-text-link\" />}\n      <span className=\"mt-0.5 shrink-0 text-text-secondary\">\n        {unread ? <Mail className=\"h-4 w-4 text-text-link\" /> : <MailOpen className=\"h-4 w-4\" />}\n      </span>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2\">\n          {unread && (\n            <span\n              aria-label={tr('inbox.message.unreadAria', 'Unread')}\n              className=\"size-1.5 shrink-0 rounded-full bg-text-link\"\n            />\n          )}\n          <p\n            className={cn(\n              'min-w-0 flex-1 truncate text-sm',\n              unread ? 'font-semibold text-text-primary' : 'font-normal text-text-primary'\n            )}\n          >\n            {message.subject || tr('inbox.message.noSubject', '(no subject)')}\n          </p>\n          <span className=\"shrink-0 text-xs tabular-nums text-text-secondary\">\n            {formatRelativeTime(message.receivedAt)}\n          </span>\n        </div>\n        {message.preview && (\n          <p className=\"mt-0.5 line-clamp-2 text-xs text-text-secondary\">{message.preview}</p>\n        )}\n        <div className=\"mt-1.5 flex flex-wrap items-center gap-2\">\n          <CategoryTag category={message.category} />\n          {message.actionRequired && <ActionFlag />}\n          {onViewRelationship && (\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onViewRelationship();\n              }}\n              className=\"text-xs font-medium text-text-link hover:underline\"\n            >\n              {tr('inbox.message.viewRelationship', 'View relationship')}\n            </button>\n          )}\n          {unread && (\n            <button\n              type=\"button\"\n              disabled={markPending}\n              onClick={(e) => {\n                e.stopPropagation();\n                onMarkRead();\n              }}\n              className=\"ml-auto shrink-0 rounded-lg border border-border-subtle px-2.5 py-1 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n            >\n              {tr('inbox.message.markRead', 'Mark read')}\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Reading pane (wide screens)\n// ---------------------------------------------------------------------------\n\nfunction ReadingPane({\n  message,\n  channel,\n  onMarkRead,\n  markPending,\n  onViewRelationship,\n}: {\n  message: SubInboxMessage | null;\n  channel: SubCommunicationChannel | undefined;\n  onMarkRead: () => void;\n  markPending: boolean;\n  onViewRelationship: (() => void) | null;\n}) {\n  const tr = useTr();\n  if (!message) {\n    return (\n      <GlassCard\n        treatment=\"metric\"\n        className=\"flex min-h-[20rem] flex-col items-center justify-center p-8 text-center\"\n      >\n        <MousePointerClick className=\"h-10 w-10 text-text-secondary\" />\n        <p className=\"mt-3 text-sm font-medium text-text-primary\">\n          {tr('inbox.readingPane.selectTitle', 'Select a message')}\n        </p>\n        <p className=\"mt-1 max-w-[16rem] text-xs text-text-secondary\">\n          {tr(\n            'inbox.readingPane.selectDescription',\n            'Pick any message from the list to read the full details here.'\n          )}\n        </p>\n      </GlassCard>\n    );\n  }\n\n  const Icon = channel ? (CHANNEL_ICON[channel.type] ?? Radio) : Radio;\n  const confidencePct =\n    message.categoryConfidence != null\n      ? Math.round(Math.max(0, Math.min(1, message.categoryConfidence)) * 100)\n      : null;\n\n  return (\n    <GlassCard treatment=\"metric\" className=\"flex flex-col p-5\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <h3 className=\"text-base font-semibold text-text-primary\">\n          {message.subject || tr('inbox.message.noSubject', '(no subject)')}\n        </h3>\n        {!message.isRead && (\n          <button\n            type=\"button\"\n            disabled={markPending}\n            onClick={onMarkRead}\n            className=\"shrink-0 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50\"\n          >\n            {tr('inbox.message.markRead', 'Mark read')}\n          </button>\n        )}\n      </div>\n\n      {channel && (\n        <div className=\"mt-2 flex items-center gap-2 text-sm\">\n          <Icon className=\"h-4 w-4 shrink-0 text-text-secondary\" />\n          <span className=\"truncate text-text-secondary\" title={channel.address}>\n            {channel.address}\n          </span>\n        </div>\n      )}\n\n      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n        <CategoryTag category={message.category} />\n        {message.actionRequired && <ActionFlag />}\n        <span className=\"text-xs text-text-secondary\">{formatDateTime(message.receivedAt)}</span>\n      </div>\n\n      {confidencePct != null && (\n        <div className=\"mt-4 rounded-lg border border-border-subtle bg-bg-surface p-3\">\n          <div className=\"flex items-center justify-between text-xs\">\n            <span className=\"inline-flex items-center gap-1.5 font-medium text-text-primary\">\n              <Sparkles className=\"h-3.5 w-3.5 text-text-link\" />{' '}\n              {tr('inbox.readingPane.aiCategorization', 'AI categorization')}\n            </span>\n            <span className=\"tabular-nums text-text-secondary\">\n              {tr('inbox.readingPane.confidence', '{{pct}}% confidence', { pct: confidencePct })}\n            </span>\n          </div>\n          <MiniProgress\n            value={confidencePct}\n            max={100}\n            tone={confidencePct >= 66 ? 'positive' : confidencePct >= 33 ? 'accent' : 'warning'}\n            className=\"mt-2\"\n          />\n        </div>\n      )}\n\n      <div className=\"mt-4 border-t border-border-subtle pt-4\">\n        {message.preview ? (\n          <p className=\"whitespace-pre-wrap text-sm leading-relaxed text-text-primary\">\n            {message.preview}\n          </p>\n        ) : (\n          <p className=\"text-sm italic text-text-secondary\">\n            {tr('inbox.readingPane.noPreview', 'No preview available for this message.')}\n          </p>\n        )}\n      </div>\n\n      {message.actionRequired && (\n        <div className=\"mt-4 flex items-start gap-2 rounded-lg border border-status-warning-text/30 bg-status-warning-bg-subtle p-3\">\n          <ShieldAlert className=\"mt-0.5 h-4 w-4 shrink-0 text-status-warning-text\" />\n          <p className=\"text-xs text-status-warning-text\">\n            {tr(\n              'inbox.readingPane.attention',\n              'This message needs your attention — review it before its provider deadline.'\n            )}\n          </p>\n        </div>\n      )}\n\n      {onViewRelationship && (\n        <button\n          type=\"button\"\n          onClick={onViewRelationship}\n          className=\"mt-4 inline-flex items-center gap-1 self-start text-sm font-medium text-text-link hover:underline\"\n        >\n          {tr('inbox.message.viewRelationship', 'View relationship')}{' '}\n          <ChevronRight className=\"h-4 w-4\" />\n        </button>\n      )}\n    </GlassCard>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Filter chip\n// ---------------------------------------------------------------------------\n\nfunction Chip({\n  active,\n  onClick,\n  children,\n  tone = 'default',\n}: {\n  active: boolean;\n  onClick: () => void;\n  children: React.ReactNode;\n  tone?: 'default' | 'warning';\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n        active\n          ? tone === 'warning'\n            ? 'border-transparent bg-status-warning-bg-subtle text-status-warning-text'\n            : 'border-transparent bg-action-primary-bg text-action-primary-text'\n          : 'border-border-subtle text-text-secondary hover:bg-bg-sunken hover:text-text-primary'\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function InboxPage() {\n  const tr = useTr();\n  const { navigateTo } = useSubscriberBot();\n  const [page, setPage] = useState(0);\n  const [category, setCategory] = useState<'' | SubMessageCategory>('');\n  const [unreadOnly, setUnreadOnly] = useState(false);\n  const [actionOnly, setActionOnly] = useState(false);\n  // The selected message lives in the URL (/inbox/:selectedId) so it can be\n  // deep-linked and the assistant can resolve \"this message\".\n  const [selectedId, setSelectedId] = useRouteSelection('inbox');\n\n  const { data, isLoading, isError, refetch, isFetching } = useInboxMessages({\n    category: category || undefined,\n    unreadOnly: unreadOnly || undefined,\n    pagination: { limit: PAGE_SIZE, offset: page * PAGE_SIZE },\n  });\n  const { data: channelsData } = useChannels();\n  const markRead = useMarkMessageRead();\n\n  const items = data?.items ?? [];\n  const hasMore = data?.pageInfo.hasMore ?? false;\n\n  // \"Action required\" is a client-side lens over the current page.\n  const displayed = actionOnly ? items.filter((m) => m.actionRequired) : items;\n\n  // Real, computed page stats.\n  const unreadCount = items.filter((m) => !m.isRead).length;\n  const actionCount = items.filter((m) => m.actionRequired).length;\n\n  const channelMap = new Map((channelsData ?? []).map((c) => [c.id, c]));\n  const selected = displayed.find((m) => m.id === selectedId) ?? null;\n  const selectedChannel = selected ? channelMap.get(selected.channelId) : undefined;\n\n  const resetToFirst = () => {\n    setPage(0);\n    setSelectedId(null);\n  };\n\n  return (\n    <PageLayout\n      title={tr('inbox.title', 'Universal Inbox')}\n      description={tr(\n        'inbox.description',\n        'Every subscription communication, merged and categorized'\n      )}\n    >\n      <PagePurpose className=\"mb-4\">\n        {tr(\n          'inbox.purpose',\n          'Subscription communication is noisy and scattered. The Universal Inbox merges every channel a provider uses and uses AI to categorize each message so you never miss a renewal, required action or security notice.'\n        )}\n      </PagePurpose>\n\n      {/* Category tabs */}\n      <div className=\"-mx-1 flex gap-2 overflow-x-auto px-1 pb-1\">\n        {CATEGORY_TAB_VALUES.map((t) => (\n          <span key={t.value} className=\"shrink-0\">\n            <Chip\n              active={category === t.value}\n              onClick={() => {\n                setCategory(t.value);\n                resetToFirst();\n              }}\n            >\n              {tr(t.key, t.fallback)}\n            </Chip>\n          </span>\n        ))}\n      </div>\n\n      {/* Lenses + stats */}\n      <div className=\"mt-3 flex flex-wrap items-center gap-2\">\n        <Chip\n          active={actionOnly}\n          tone=\"warning\"\n          onClick={() => {\n            setActionOnly((v) => !v);\n            setSelectedId(null);\n          }}\n        >\n          <AlertTriangle className=\"h-3.5 w-3.5\" />{' '}\n          {tr('inbox.filters.actionRequired', 'Action required')}\n        </Chip>\n        <Chip\n          active={unreadOnly}\n          onClick={() => {\n            setUnreadOnly((v) => !v);\n            resetToFirst();\n          }}\n        >\n          <Mail className=\"h-3.5 w-3.5\" /> {tr('inbox.filters.unreadOnly', 'Unread only')}\n        </Chip>\n        {!isLoading && !isError && items.length > 0 && (\n          <p className=\"ml-auto text-xs text-text-secondary\">\n            {tr('inbox.filters.unreadCount', '{{count}} unread', { count: unreadCount })}\n            {' · '}\n            {tr('inbox.filters.actionCount', '{{count}} need action', { count: actionCount })}\n            {isFetching ? ` · ${tr('inbox.filters.refreshing', 'refreshing…')}` : ''}\n          </p>\n        )}\n      </div>\n\n      {isLoading ? (\n        <LoadingView label={tr('inbox.loading', 'Loading inbox…')} />\n      ) : isError ? (\n        <ErrorView\n          message={tr('inbox.error', 'Could not load the inbox.')}\n          onRetry={() => void refetch()}\n        />\n      ) : items.length === 0 ? (\n        <div className=\"mt-6\">\n          <EmptyState\n            illustration=\"empty-inbox\"\n            icon={<InboxIcon className=\"h-12 w-12\" />}\n            title={tr('inbox.emptyTitle', 'Inbox is empty')}\n            description={\n              unreadOnly || category\n                ? tr('inbox.emptyDescriptionFiltered', 'No messages match these filters.')\n                : tr(\n                    'inbox.emptyDescription',\n                    'Merged subscription communications will appear here once channels start ingesting.'\n                  )\n            }\n          />\n        </div>\n      ) : (\n        <div className=\"mt-5 grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_380px]\">\n          {/* List */}\n          <div className=\"min-w-0\">\n            {displayed.length === 0 ? (\n              <div className=\"rounded-xl border border-border-subtle bg-bg-surface p-8 text-center\">\n                <AlertTriangle className=\"mx-auto h-8 w-8 text-text-secondary\" />\n                <p className=\"mt-2 text-sm font-medium text-text-primary\">\n                  {tr('inbox.noActionTitle', 'No action-required messages on this page')}\n                </p>\n                <p className=\"mt-1 text-xs text-text-secondary\">\n                  {tr(\n                    'inbox.noActionDescription',\n                    'Turn off the “Action required” lens or move to another page.'\n                  )}\n                </p>\n              </div>\n            ) : (\n              <div className=\"divide-y divide-border-subtle overflow-hidden rounded-xl border border-border-subtle bg-bg-surface\">\n                {displayed.map((m) => (\n                  <MessageRow\n                    key={m.id}\n                    message={m}\n                    active={m.id === selectedId}\n                    onSelect={() => setSelectedId(m.id)}\n                    onMarkRead={() => markRead.mutate(m.id)}\n                    markPending={markRead.isPending}\n                    onViewRelationship={\n                      m.relationshipId\n                        ? () => navigateTo(`/relationships/${m.relationshipId}`)\n                        : null\n                    }\n                  />\n                ))}\n              </div>\n            )}\n\n            <div className=\"mt-4 flex items-center justify-between\">\n              <p className=\"text-xs text-text-secondary\">\n                {tr('inbox.pagination.page', 'Page {{page}}', { page: page + 1 })}\n                {isFetching ? ` · ${tr('inbox.filters.refreshing', 'refreshing…')}` : ''}\n              </p>\n              <div className=\"flex gap-2\">\n                <button\n                  type=\"button\"\n                  disabled={page === 0}\n                  onClick={() => {\n                    setPage((p) => Math.max(0, p - 1));\n                    setSelectedId(null);\n                  }}\n                  className={cn(\n                    'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                    page === 0\n                      ? 'cursor-not-allowed text-text-secondary opacity-50'\n                      : 'text-text-primary hover:bg-bg-sunken'\n                  )}\n                >\n                  {tr('inbox.pagination.previous', 'Previous')}\n                </button>\n                <button\n                  type=\"button\"\n                  disabled={!hasMore}\n                  onClick={() => {\n                    setPage((p) => p + 1);\n                    setSelectedId(null);\n                  }}\n                  className={cn(\n                    'rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium',\n                    !hasMore\n                      ? 'cursor-not-allowed text-text-secondary opacity-50'\n                      : 'text-text-primary hover:bg-bg-sunken'\n                  )}\n                >\n                  {tr('inbox.pagination.next', 'Next')}\n                </button>\n              </div>\n            </div>\n          </div>\n\n          {/* Reading pane — wide screens only */}\n          <aside className=\"hidden lg:block\">\n            <div className=\"lg:sticky lg:top-4\">\n              <ReadingPane\n                message={selected}\n                channel={selectedChannel}\n                onMarkRead={() => selected && markRead.mutate(selected.id)}\n                markPending={markRead.isPending}\n                onViewRelationship={\n                  selected?.relationshipId\n                    ? () => navigateTo(`/relationships/${selected.relationshipId}`)\n                    : null\n                }\n              />\n            </div>\n          </aside>\n        </div>\n      )}\n\n      <ChannelsSection />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/subscriberbot/pages/InsightsPage.js

@@ -3,11 +3,11 @@ import { PageLayout as t } from "../components/PageLayout.js";
 import { MetricsCard as n } from "../components/MetricsCard.js";
 import { formatCurrency as r, formatEnumLabel as i } from "../utils/formatters.js";
 import { EmptyState as a } from "../components/EmptyState.js";
-import { ErrorView as o, LoadingView as s, Section as c } from "../components/StateViews.js";
-import { BarList as l, Donut as u, Legend as d, MiniProgress as f } from "../components/viz.js";
+import { useTr as o } from "../hooks/useTr.js";
+import { ErrorView as s, LoadingView as c, Section as l } from "../components/StateViews.js";
+import { BarList as u, Donut as d, Legend as f, MiniProgress as p } from "../components/viz.js";
 import "../components/index.js";
-import { useRelationships as p } from "../hooks/useSubscriberBotApi.js";
-import { useTr as m } from "../hooks/useTr.js";
+import { useRelationships as m } from "../hooks/useSubscriberBotApi.js";
 import { useMemo as h } from "react";
 import { CalendarClock as g, HeartPulse as _, Layers as v, TrendingUp as y, Wallet as b } from "lucide-react";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
@@ -23,7 +23,7 @@ var E = {
 	FREE: 0,
 	USAGE_BASED: 1
 }, D = (e) => e.amount * (E[e.interval] ?? 1), O = (e) => e.status === "ACTIVE", k = () => {
-	let E = p({ pagination: { limit: 100 } }), k = m(), A = h(() => E.data?.items ?? [], [E.data]), j = h(() => {
+	let E = m({ pagination: { limit: 100 } }), k = o(), A = h(() => E.data?.items ?? [], [E.data]), j = h(() => {
 		let e = A.filter(O), t = e[0]?.currency ?? A[0]?.currency ?? "USD", n = e.reduce((e, t) => e + D(t), 0), r = A.filter((e) => e.healthScore != null), a = r.length ? r.reduce((e, t) => e + (t.healthScore ?? 0), 0) / r.length : null, o = /* @__PURE__ */ new Map();
 		for (let e of A) o.set(e.status, (o.get(e.status) ?? 0) + 1);
 		let s = /* @__PURE__ */ new Map();
@@ -67,8 +67,8 @@ var E = {
 			total: A.length
 		};
 	}, [A]);
-	if (E.isLoading) return /* @__PURE__ */ S(s, { label: k("insights.loading", "Crunching your spend insights…") });
-	if (E.isError) return /* @__PURE__ */ S(o, {
+	if (E.isLoading) return /* @__PURE__ */ S(c, { label: k("insights.loading", "Crunching your spend insights…") });
+	if (E.isError) return /* @__PURE__ */ S(s, {
 		message: k("insights.error", "Could not load insights."),
 		onRetry: () => void E.refetch()
 	});
@@ -121,11 +121,11 @@ var E = {
 							children: k("insights.portfolioByStatus", "Portfolio by status")
 						}), /* @__PURE__ */ C("div", {
 							className: "flex flex-col items-center gap-6 sm:flex-row",
-							children: [/* @__PURE__ */ S(u, {
+							children: [/* @__PURE__ */ S(d, {
 								data: j.statusData,
 								centerLabel: String(j.total),
 								centerSub: k("insights.subscriptions", "subscriptions")
-							}), /* @__PURE__ */ S(d, {
+							}), /* @__PURE__ */ S(f, {
 								className: "w-full sm:flex-1",
 								data: j.statusData
 							})]
@@ -137,7 +137,7 @@ var E = {
 						children: [/* @__PURE__ */ S("h3", {
 							className: "mb-4 text-sm font-semibold text-text-primary",
 							children: k("insights.spendByType", "Monthly spend by type")
-						}), j.kindData.length ? /* @__PURE__ */ S(l, {
+						}), j.kindData.length ? /* @__PURE__ */ S(u, {
 							data: j.kindData,
 							valueFormat: M
 						}) : /* @__PURE__ */ S("p", {
@@ -151,7 +151,7 @@ var E = {
 						children: [/* @__PURE__ */ S("h3", {
 							className: "mb-4 text-sm font-semibold text-text-primary",
 							children: k("insights.renewalForecast", "Renewal forecast (6 mo)")
-						}), j.forecast.some((e) => e.value > 0) ? /* @__PURE__ */ S(l, {
+						}), j.forecast.some((e) => e.value > 0) ? /* @__PURE__ */ S(u, {
 							data: j.forecast,
 							valueFormat: M
 						}) : /* @__PURE__ */ S("p", {
@@ -163,7 +163,7 @@ var E = {
 			}),
 			/* @__PURE__ */ C("div", {
 				className: "grid grid-cols-1 gap-4 lg:grid-cols-2",
-				children: [/* @__PURE__ */ S(c, {
+				children: [/* @__PURE__ */ S(l, {
 					title: k("insights.topCosts", "Top monthly costs"),
 					children: /* @__PURE__ */ S(w, {
 						treatment: "plain",
@@ -182,7 +182,7 @@ var E = {
 							})]
 						}, e.id))
 					})
-				}), /* @__PURE__ */ S(c, {
+				}), /* @__PURE__ */ S(l, {
 					title: k("insights.healthWatchlist", "Health watchlist"),
 					children: j.watchlist.length ? /* @__PURE__ */ S(w, {
 						treatment: "plain",
@@ -194,7 +194,7 @@ var E = {
 									className: "w-32 shrink-0 truncate text-sm text-text-primary",
 									children: t.label
 								}),
-								/* @__PURE__ */ S(f, {
+								/* @__PURE__ */ S(p, {
 									className: "flex-1",
 									value: t.healthScore ?? 0,
 									tone: "negative"