@open-mercato/core 0.4.8-develop-641703d2a6 → 0.4.8-develop-bc5be31b5c

package/src/modules/inbox_ops/api/proposals/[id]/replies/[replyId]/send/route.ts

@@ -6,6 +6,7 @@ import { findOneWithDecryption } from '@open-mercato/shared/lib/encryption/find'
 import { InboxProposalAction, InboxEmail } from '../../../../../../data/entities'
 import { draftReplyPayloadSchema } from '../../../../../../data/validators'
 import { emitInboxOpsEvent } from '../../../../../../events'
+import { createMessageRecordForReply } from '../../../../../../lib/messagesIntegration'
 import {
   resolveRequestContext,
   resolveProposal,
@@ -20,18 +21,6 @@ export const metadata = {
 
 export async function POST(req: Request) {
   try {
-    const apiKey = process.env.RESEND_API_KEY
-    if (!apiKey) {
-      return NextResponse.json({ error: 'Email service not configured' }, { status: 503 })
-    }
-
-    const emailDisabled =
-      parseBooleanWithDefault(process.env.OM_DISABLE_EMAIL_DELIVERY, false) ||
-      parseBooleanWithDefault(process.env.OM_TEST_MODE, false)
-    if (emailDisabled) {
-      return NextResponse.json({ error: 'Email delivery is disabled' }, { status: 503 })
-    }
-
     const ctx = await resolveRequestContext(req)
     const url = new URL(req.url)
     const proposal = await resolveProposal(url, ctx)
@@ -80,8 +69,21 @@ export async function POST(req: Request) {
     if (!payloadResult.success) {
       return NextResponse.json({ error: 'Reply payload missing required fields (to, subject, body)' }, { status: 400 })
     }
-    const { to: toAddress, subject, body, inReplyToMessageId, references: payloadReferences } = payloadResult.data
+    const { to: toAddress, toName, subject, body } = payloadResult.data
 
+    const apiKey = process.env.RESEND_API_KEY
+    if (!apiKey) {
+      return NextResponse.json({ error: 'Email service not configured' }, { status: 503 })
+    }
+
+    const emailDisabled =
+      parseBooleanWithDefault(process.env.OM_DISABLE_EMAIL_DELIVERY, false) ||
+      parseBooleanWithDefault(process.env.OM_TEST_MODE, false)
+    if (emailDisabled) {
+      return NextResponse.json({ error: 'Email delivery is disabled' }, { status: 503 })
+    }
+
+    const { inReplyToMessageId, references: payloadReferences } = payloadResult.data
     const fromAddress = process.env.EMAIL_FROM || `inbox@${process.env.INBOX_OPS_DOMAIN || 'inbox.mercato.local'}`
 
     const headers: Record<string, string> = {}
@@ -109,11 +111,24 @@ export async function POST(req: Request) {
     }
 
     const sentMessageId = sendData?.id || null
+    const messagesResult = await createMessageRecordForReply(
+      { to: toAddress, toName, subject, body },
+      proposal.inboxEmailId,
+      {
+        container: ctx.container,
+        scope: {
+          tenantId: ctx.tenantId,
+          organizationId: ctx.organizationId,
+          userId: ctx.userId,
+        },
+      },
+    )
 
     action.metadata = {
       ...(action.metadata && typeof action.metadata === 'object' ? action.metadata : {}),
       replySentAt: new Date().toISOString(),
       sentMessageId,
+      ...(messagesResult ? { messageRecordId: messagesResult.messageId } : {}),
     }
     await ctx.em.flush()
 
@@ -125,12 +140,17 @@ export async function POST(req: Request) {
         organizationId: ctx.organizationId,
         toAddress,
         sentMessageId,
+        messageRecordId: messagesResult?.messageId ?? null,
       })
     } catch (eventError) {
       console.error('[inbox_ops:reply:send] Failed to emit event:', eventError)
     }
 
-    return NextResponse.json({ ok: true, sentMessageId })
+    return NextResponse.json({
+      ok: true,
+      sentMessageId,
+      ...(messagesResult ? { messageRecordId: messagesResult.messageId } : {}),
+    })
   } catch (err) {
     return handleRouteError(err, 'send reply')
   }
@@ -141,8 +161,8 @@ export const openApi: OpenApiRouteDoc = {
   summary: 'Send draft reply',
   methods: {
     POST: {
-      summary: 'Send a draft reply email via the configured email provider',
-      description: 'Sends the draft_reply action payload as an email. Sets In-Reply-To and References headers for threading.',
+      summary: 'Send a draft reply email and register it in messages when available',
+      description: 'Sends the draft_reply action payload via the configured email provider. When the messages module is available, also records the sent reply as an internal message record. Sets In-Reply-To and References headers for threading.',
       responses: [
         { status: 200, description: 'Reply sent successfully' },
         { status: 400, description: 'Missing required payload fields' },

package/src/modules/inbox_ops/api/proposals/counts/route.ts

@@ -1,7 +1,15 @@
 import { NextResponse } from 'next/server'
 import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
+import { runWithCacheTenant } from '@open-mercato/cache'
 import { InboxProposal } from '../../../data/entities'
+import { ALL_CATEGORIES } from '../../../data/validators'
 import { resolveRequestContext, UnauthorizedError } from '../../routeHelpers'
+import {
+  resolveCache,
+  createCountsCacheKey,
+  createCountsCacheTag,
+  COUNTS_CACHE_TTL_MS,
+} from '../../../lib/cache'
 
 export const metadata = {
   GET: { requireAuth: true, requireFeatures: ['inbox_ops.proposals.view'] },
@@ -10,6 +18,15 @@ export const metadata = {
 export async function GET(req: Request) {
   try {
     const ctx = await resolveRequestContext(req)
+    const cache = resolveCache(ctx.container)
+
+    if (cache) {
+      const cacheKey = createCountsCacheKey(ctx.tenantId)
+      const cached = await runWithCacheTenant(ctx.tenantId, () => cache.get(cacheKey))
+      if (cached) {
+        return NextResponse.json(cached)
+      }
+    }
 
     const scope = {
       organizationId: ctx.organizationId,
@@ -19,7 +36,7 @@ export async function GET(req: Request) {
     }
 
     // em.count() is safe here — filter fields (status, organizationId, tenantId,
-    // deletedAt, isActive) are not encrypted, so decryption helpers are not needed.
+    // deletedAt, isActive, category) are not encrypted, so decryption helpers are not needed.
     const [pending, partial, accepted, rejected] = await Promise.all([
       ctx.em.count(InboxProposal, { ...scope, status: 'pending' }),
       ctx.em.count(InboxProposal, { ...scope, status: 'partial' }),
@@ -27,7 +44,45 @@ export async function GET(req: Request) {
       ctx.em.count(InboxProposal, { ...scope, status: 'rejected' }),
     ])
 
-    return NextResponse.json({ pending, partial, accepted, rejected })
+    // Single GROUP BY query for category counts — O(1) queries
+    const knex = ctx.em.getKnex()
+    const categoryRows = await knex('inbox_proposals')
+      .select('category')
+      .count('* as count')
+      .where({
+        organization_id: ctx.organizationId,
+        tenant_id: ctx.tenantId,
+        is_active: true,
+      })
+      .whereNull('deleted_at')
+      .groupBy('category')
+
+    const byCategory: Record<string, number> = {}
+    for (const cat of ALL_CATEGORIES) {
+      byCategory[cat] = 0
+    }
+    for (const row of categoryRows) {
+      const cat = row.category as string | null
+      if (cat && cat in byCategory) {
+        byCategory[cat] = Number(row.count)
+      }
+    }
+
+    const responseBody = { pending, partial, accepted, rejected, byCategory }
+
+    if (cache) {
+      const cacheKey = createCountsCacheKey(ctx.tenantId)
+      const tag = createCountsCacheTag(ctx.tenantId)
+      try {
+        await runWithCacheTenant(ctx.tenantId, () =>
+          cache.set(cacheKey, responseBody, { ttl: COUNTS_CACHE_TTL_MS, tags: [tag] }),
+        )
+      } catch (err) {
+        console.warn('[inbox_ops:proposals:counts] Failed to set cache', err)
+      }
+    }
+
+    return NextResponse.json(responseBody)
   } catch (err) {
     if (err instanceof UnauthorizedError) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
@@ -42,10 +97,10 @@ export const openApi: OpenApiRouteDoc = {
   summary: 'Proposal counts',
   methods: {
     GET: {
-      summary: 'Get proposal status counts',
-      description: 'Returns counts by status for tab badges',
+      summary: 'Get proposal status and category counts',
+      description: 'Returns counts by status and by category for tab badges and filter dropdowns',
       responses: [
-        { status: 200, description: 'Status counts object' },
+        { status: 200, description: 'Status and category counts object' },
       ],
     },
   },

package/src/modules/inbox_ops/api/proposals/route.ts

@@ -1,9 +1,10 @@
 import { NextResponse } from 'next/server'
+import { ZodError } from 'zod'
 import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
 import type { FilterQuery } from '@mikro-orm/postgresql'
 import { findAndCountWithDecryption, findWithDecryption } from '@open-mercato/shared/lib/encryption/find'
 import { escapeLikePattern } from '@open-mercato/shared/lib/db/escapeLikePattern'
-import { InboxProposal, InboxEmail, InboxProposalAction, InboxDiscrepancy } from '../../data/entities'
+import { InboxProposal, InboxEmail, InboxProposalAction, InboxDiscrepancy, type InboxProposalCategory } from '../../data/entities'
 import { proposalListQuerySchema } from '../../data/validators'
 import { resolveRequestContext, UnauthorizedError } from '../routeHelpers'
 
@@ -16,6 +17,7 @@ export async function GET(req: Request) {
     const url = new URL(req.url)
     const query = proposalListQuerySchema.parse({
       status: url.searchParams.get('status') || undefined,
+      category: url.searchParams.get('category') || undefined,
       search: url.searchParams.get('search') || undefined,
       page: url.searchParams.get('page') || undefined,
       pageSize: url.searchParams.get('pageSize') || undefined,
@@ -33,6 +35,14 @@ export async function GET(req: Request) {
     if (query.status) {
       where.status = query.status
     }
+    if (query.category) {
+      const categories = query.category.split(',').map((c) => c.trim()).filter(Boolean) as InboxProposalCategory[]
+      if (categories.length === 1) {
+        where.category = categories[0]
+      } else if (categories.length > 1) {
+        where.category = { $in: categories }
+      }
+    }
     if (query.search) {
       where.summary = { $ilike: `%${escapeLikePattern(query.search)}%` }
     }
@@ -93,6 +103,9 @@ export async function GET(req: Request) {
       totalPages: Math.ceil(total / query.pageSize),
     })
   } catch (err) {
+    if (err instanceof ZodError) {
+      return NextResponse.json({ error: 'Invalid query parameters' }, { status: 400 })
+    }
     if (err instanceof UnauthorizedError) {
       return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
     }

package/src/modules/inbox_ops/api/settings/route.ts

@@ -1,9 +1,17 @@
 import { NextResponse } from 'next/server'
 import type { OpenApiRouteDoc } from '@open-mercato/shared/lib/openapi'
+import { runWithCacheTenant } from '@open-mercato/cache'
 import { findOneWithDecryption } from '@open-mercato/shared/lib/encryption/find'
 import { InboxSettings } from '../../data/entities'
 import { updateSettingsSchema } from '../../data/validators'
 import { resolveRequestContext, handleRouteError } from '../routeHelpers'
+import {
+  resolveCache,
+  createSettingsCacheKey,
+  createSettingsCacheTag,
+  invalidateSettingsCache,
+  SETTINGS_CACHE_TTL_MS,
+} from '../../lib/cache'
 
 export const metadata = {
   GET: { requireAuth: true, requireFeatures: ['inbox_ops.settings.manage'] },
@@ -13,6 +21,15 @@ export const metadata = {
 export async function GET(req: Request) {
   try {
     const ctx = await resolveRequestContext(req)
+    const cache = resolveCache(ctx.container)
+
+    if (cache) {
+      const cacheKey = createSettingsCacheKey(ctx.tenantId)
+      const cached = await runWithCacheTenant(ctx.tenantId, () => cache.get(cacheKey))
+      if (cached) {
+        return NextResponse.json(cached)
+      }
+    }
 
     const settings = await findOneWithDecryption(
       ctx.em,
@@ -26,14 +43,28 @@ export async function GET(req: Request) {
       ctx.scope,
     )
 
-    return NextResponse.json({
+    const responseBody = {
       settings: settings ? {
         id: settings.id,
         inboxAddress: settings.inboxAddress,
         isActive: settings.isActive,
         workingLanguage: settings.workingLanguage,
       } : null,
-    })
+    }
+
+    if (cache) {
+      const cacheKey = createSettingsCacheKey(ctx.tenantId)
+      const tag = createSettingsCacheTag(ctx.tenantId)
+      try {
+        await runWithCacheTenant(ctx.tenantId, () =>
+          cache.set(cacheKey, responseBody, { ttl: SETTINGS_CACHE_TTL_MS, tags: [tag] }),
+        )
+      } catch (err) {
+        console.warn('[inbox_ops:settings] Failed to set cache', err)
+      }
+    }
+
+    return NextResponse.json(responseBody)
   } catch (err) {
     return handleRouteError(err, 'load settings')
   }
@@ -74,6 +105,9 @@ export async function PATCH(req: Request) {
 
     await ctx.em.flush()
 
+    const cache = resolveCache(ctx.container)
+    await runWithCacheTenant(ctx.tenantId, () => invalidateSettingsCache(cache, ctx.tenantId))
+
     return NextResponse.json({
       ok: true,
       settings: {

package/src/modules/inbox_ops/backend/inbox-ops/page.tsx

@@ -17,12 +17,14 @@ import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { ErrorMessage } from '@open-mercato/ui/backend/detail'
 import { Settings, Inbox, Copy } from 'lucide-react'
+import { CategoryBadge, useCategoryLabels } from '../../components/proposals/CategoryBadge'
 
 type ProposalRow = {
   id: string
   summary: string
   confidence: string
   status: string
+  category?: string | null
   inboxEmailId: string
   createdAt: string
   participants?: { name: string; email: string }[]
@@ -46,6 +48,7 @@ type StatusCounts = {
   partial: number
   accepted: number
   rejected: number
+  byCategory?: Record<string, number>
 }
 
 const STATUS_COLORS: Record<string, string> = {
@@ -99,6 +102,7 @@ export default function InboxOpsProposalsPage() {
   const [copied, setCopied] = React.useState(false)
 
   const statusFilter = typeof filterValues.status === 'string' ? filterValues.status : undefined
+  const categoryFilter = typeof filterValues.category === 'string' ? filterValues.category : undefined
 
   const loadProposals = React.useCallback(async () => {
     setIsLoading(true)
@@ -107,6 +111,7 @@ export default function InboxOpsProposalsPage() {
     params.set('page', String(page))
     params.set('pageSize', String(pageSize))
     if (statusFilter) params.set('status', statusFilter)
+    if (categoryFilter) params.set('category', categoryFilter)
     if (search.trim()) params.set('search', search.trim())
 
     try {
@@ -121,7 +126,7 @@ export default function InboxOpsProposalsPage() {
       setError(t('inbox_ops.flash.load_failed', 'Failed to load proposals'))
     }
     setIsLoading(false)
-  }, [page, pageSize, statusFilter, search, scopeVersion, t])
+  }, [page, pageSize, statusFilter, categoryFilter, search, scopeVersion, t])
 
   const loadCounts = React.useCallback(async () => {
     const result = await apiCall<StatusCounts>('/api/inbox_ops/proposals/counts')
@@ -141,7 +146,7 @@ export default function InboxOpsProposalsPage() {
 
   React.useEffect(() => {
     if (initialLoadComplete) loadProposals()
-  }, [page, statusFilter, search, scopeVersion]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [page, statusFilter, categoryFilter, search, scopeVersion]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleCopyAddress = React.useCallback(() => {
     if (settings?.inboxAddress) {
@@ -189,6 +194,9 @@ export default function InboxOpsProposalsPage() {
     }
   }, [confirm, t, loadProposals, loadCounts, runMutation])
 
+  const categoryLabels = useCategoryLabels()
+  const byCategory = counts.byCategory || {}
+
   const filters = React.useMemo<FilterDef[]>(() => [
     {
       id: 'status',
@@ -201,7 +209,22 @@ export default function InboxOpsProposalsPage() {
         { value: 'rejected', label: `${t('inbox_ops.status.rejected', 'Rejected')} (${counts.rejected})` },
       ],
     },
-  ], [t, counts])
+    {
+      id: 'category',
+      label: t('inbox_ops.category', 'Category'),
+      type: 'select',
+      options: [
+        { value: 'rfq', label: `${categoryLabels.rfq} (${byCategory.rfq || 0})` },
+        { value: 'order', label: `${categoryLabels.order} (${byCategory.order || 0})` },
+        { value: 'order_update', label: `${categoryLabels.order_update} (${byCategory.order_update || 0})` },
+        { value: 'complaint', label: `${categoryLabels.complaint} (${byCategory.complaint || 0})` },
+        { value: 'shipping_update', label: `${categoryLabels.shipping_update} (${byCategory.shipping_update || 0})` },
+        { value: 'inquiry', label: `${categoryLabels.inquiry} (${byCategory.inquiry || 0})` },
+        { value: 'payment', label: `${categoryLabels.payment} (${byCategory.payment || 0})` },
+        { value: 'other', label: `${categoryLabels.other} (${byCategory.other || 0})` },
+      ],
+    },
+  ], [t, counts, categoryLabels, byCategory])
 
   const columns: ColumnDef<ProposalRow>[] = React.useMemo(() => [
     {
@@ -226,6 +249,11 @@ export default function InboxOpsProposalsPage() {
       header: t('inbox_ops.list.status', 'Status'),
       cell: ({ row }) => <StatusBadge status={row.original.status} />,
     },
+    {
+      accessorKey: 'category',
+      header: t('inbox_ops.category', 'Category'),
+      cell: ({ row }) => <CategoryBadge category={row.original.category} />,
+    },
     {
       id: 'actions_count',
       header: t('inbox_ops.list.progress', 'Progress'),

package/src/modules/inbox_ops/backend/inbox-ops/proposals/[id]/page.tsx

@@ -22,10 +22,12 @@ import {
   RefreshCw,
   Users,
   Languages,
+  Pencil,
 } from 'lucide-react'
 import type { ProposalTranslationEntry } from '../../../../data/entities'
 import type { ProposalDetail, ActionDetail, DiscrepancyDetail, EmailDetail } from '../../../../components/proposals/types'
 import { ActionCard, ConfidenceBadge, useActionTypeLabels, useDiscrepancyDescriptions } from '../../../../components/proposals/ActionCard'
+import { CategoryBadge, CATEGORY_CONFIG, ALL_CATEGORIES, useCategoryLabels } from '../../../../components/proposals/CategoryBadge'
 import { hasContactNameIssue } from '../../../../lib/contactValidation'
 import { EditActionDialog } from '../../../../components/proposals/EditActionDialog'
 
@@ -66,6 +68,82 @@ function EmailThreadViewer({ email }: { email: EmailDetail | null }) {
   )
 }
 
+function CategoryEditDropdown({
+  currentCategory,
+  onSelect,
+  disabled,
+}: {
+  currentCategory: string | null | undefined
+  onSelect: (category: string) => void
+  disabled: boolean
+}) {
+  const t = useT()
+  const labels = useCategoryLabels()
+  const [isOpen, setIsOpen] = React.useState(false)
+  const dropdownRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') setIsOpen(false)
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      document.addEventListener('keydown', handleEscape)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen])
+
+  return (
+    <div className="relative inline-block" ref={dropdownRef}>
+      <div className="flex items-center gap-1">
+        <CategoryBadge category={currentCategory} />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-6 w-6 p-0"
+          onClick={() => setIsOpen(!isOpen)}
+          disabled={disabled}
+          title={t('inbox_ops.recategorize', 'Change Category')}
+        >
+          <Pencil className="h-3 w-3" />
+        </Button>
+      </div>
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 z-50 w-48 rounded-md border bg-popover shadow-md">
+          <div className="p-1">
+            {ALL_CATEGORIES.map((cat) => {
+              const config = CATEGORY_CONFIG[cat]
+              const { Icon } = config
+              return (
+                <Button
+                  key={cat}
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className={`flex items-center gap-2 w-full justify-start rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground ${currentCategory === cat ? 'bg-accent' : ''}`}
+                  onClick={() => { onSelect(cat); setIsOpen(false) }}
+                >
+                  <Icon className="h-3.5 w-3.5" />
+                  {labels[cat] || cat}
+                </Button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default function ProposalDetailPage({ params }: { params?: { id?: string } }) {
   const t = useT()
   const locale = useLocale()
@@ -146,6 +224,22 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
     setIsTranslating(false)
   }, [proposalId, locale, t, runMutation])
 
+  const handleCategorize = React.useCallback(async (category: string) => {
+    if (!proposalId) return
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean; category: string; previousCategory: string | null }>(
+        `/api/inbox_ops/proposals/${proposalId}/categorize`,
+        { method: 'POST', body: JSON.stringify({ category }) },
+      ),
+      context: {},
+    })
+    if (result?.ok && result.result?.ok) {
+      setProposal((prev) => prev ? { ...prev, category: result.result!.category } : prev)
+    } else {
+      flash(t('inbox_ops.flash.save_failed', 'Failed to save'), 'error')
+    }
+  }, [proposalId, t, runMutation])
+
   const loadData = React.useCallback(async () => {
     if (!proposalId) return
     setIsLoading(true)
@@ -420,11 +514,19 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                     {showTranslation && translation ? translation.summary : proposal.summary}
                   </p>
 
-                  <div className="flex items-center gap-4 mb-3">
+                  <div className="flex items-center gap-4 mb-3 flex-wrap">
                     <div>
                       <span className="text-xs text-muted-foreground">{t('inbox_ops.confidence', 'Confidence')}</span>
                       <ConfidenceBadge value={proposal.confidence} />
                     </div>
+                    <div>
+                      <span className="text-xs text-muted-foreground block">{t('inbox_ops.category', 'Category')}</span>
+                      <CategoryEditDropdown
+                        currentCategory={proposal.category}
+                        onSelect={handleCategorize}
+                        disabled={isProcessing}
+                      />
+                    </div>
                   </div>
 
                   {proposal.possiblyIncomplete && (

package/src/modules/inbox_ops/components/messages/InboxEmailContent.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { MessageContentProps } from '@open-mercato/shared/modules/messages/types'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+export function InboxEmailContent({ message }: MessageContentProps) {
+  const t = useT()
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Badge variant="outline" className="text-xs">
+          {t('inbox_ops.title', 'AI Inbox Actions')}
+        </Badge>
+        {message.senderName ? (
+          <span className="text-sm text-muted-foreground">
+            {message.senderName}
+          </span>
+        ) : null}
+      </div>
+
+      <div>
+        <h3 className="text-base font-semibold">{message.subject}</h3>
+        {message.sentAt ? (
+          <p className="text-xs text-muted-foreground">
+            {new Date(message.sentAt).toLocaleString()}
+          </p>
+        ) : null}
+      </div>
+
+      {message.body ? (
+        <pre className="whitespace-pre-wrap break-words rounded-md bg-muted/30 p-4 text-sm leading-relaxed">
+          {message.body}
+        </pre>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          {t('inbox_ops.no_email_content', 'No email content available')}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default InboxEmailContent

package/src/modules/inbox_ops/components/messages/InboxEmailPreview.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Mail } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { ObjectPreviewProps } from '@open-mercato/shared/modules/messages/types'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+
+export function InboxEmailPreview({
+  previewData,
+  actionRequired,
+  actionLabel,
+}: ObjectPreviewProps) {
+  const t = useT()
+
+  return (
+    <div className="flex items-start gap-3 rounded-md border bg-muted/20 p-3">
+      <Mail className="mt-0.5 h-4 w-4 text-muted-foreground" />
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex items-center gap-2">
+          <p className="truncate text-sm font-medium">
+            {previewData?.title || t('inbox_ops.title', 'AI Inbox Actions')}
+          </p>
+          {actionRequired ? (
+            <Badge variant="secondary" className="text-xs">
+              {actionLabel || t('messages.composer.objectActionRequired', 'Action required')}
+            </Badge>
+          ) : null}
+        </div>
+        {previewData?.subtitle ? (
+          <p className="truncate text-xs text-muted-foreground">{previewData.subtitle}</p>
+        ) : null}
+        {previewData?.status ? (
+          <Badge variant="outline" className="text-xs">{previewData.status}</Badge>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default InboxEmailPreview