@open-mercato/core 0.4.5-develop-811deeb983 → 0.4.5-develop-3d8e759e45

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

@@ -7,9 +7,10 @@ import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
-import { LoadingMessage } from '@open-mercato/ui/backend/detail'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
 import { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'
 import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import {
   ArrowLeft,
   CheckCircle,
@@ -24,7 +25,8 @@ import {
 } from 'lucide-react'
 import type { ProposalTranslationEntry } from '../../../../data/entities'
 import type { ProposalDetail, ActionDetail, DiscrepancyDetail, EmailDetail } from '../../../../components/proposals/types'
-import { ActionCard, ConfidenceBadge, useActionTypeLabels } from '../../../../components/proposals/ActionCard'
+import { ActionCard, ConfidenceBadge, useActionTypeLabels, useDiscrepancyDescriptions } from '../../../../components/proposals/ActionCard'
+import { hasContactNameIssue } from '../../../../lib/contactValidation'
 import { EditActionDialog } from '../../../../components/proposals/EditActionDialog'
 
 function EmailThreadViewer({ email }: { email: EmailDetail | null }) {
@@ -75,10 +77,15 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
   const [discrepancies, setDiscrepancies] = React.useState<DiscrepancyDetail[]>([])
   const [email, setEmail] = React.useState<EmailDetail | null>(null)
   const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
   const [isProcessing, setIsProcessing] = React.useState(false)
 
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const { runMutation } = useGuardedMutation<Record<string, unknown>>({
+    contextId: 'inbox-ops-proposal-detail',
+  })
   const actionTypeLabels = useActionTypeLabels()
+  const resolveDiscrepancyDescription = useDiscrepancyDescriptions()
   const [editingAction, setEditingAction] = React.useState<ActionDetail | null>(null)
   const [sendingReplyId, setSendingReplyId] = React.useState<string | null>(null)
 
@@ -122,45 +129,59 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
   const handleTranslate = React.useCallback(async () => {
     if (!proposalId) return
     setIsTranslating(true)
-    const result = await apiCall<{ translation: ProposalTranslationEntry; cached: boolean }>(
-      `/api/inbox_ops/proposals/${proposalId}/translate`,
-      { method: 'POST', body: JSON.stringify({ targetLocale: locale }) },
-    )
+    const result = await runMutation({
+      operation: () => apiCall<{ translation: ProposalTranslationEntry; cached: boolean }>(
+        `/api/inbox_ops/proposals/${proposalId}/translate`,
+        { method: 'POST', body: JSON.stringify({ targetLocale: locale }) },
+      ),
+      context: {},
+    })
     if (result?.ok && result.result?.translation) {
       setTranslation(result.result.translation)
       setShowTranslation(true)
     } else {
-      flash(t('inbox_ops.translate.failed', 'Translation failed'), 'error')
+      const detail = (result?.result as Record<string, unknown> | null)?.error
+      flash(detail ? `${t('inbox_ops.translate.failed', 'Translation failed')}: ${detail}` : t('inbox_ops.translate.failed', 'Translation failed'), 'error')
     }
     setIsTranslating(false)
-  }, [proposalId, locale, t])
+  }, [proposalId, locale, t, runMutation])
 
   const loadData = React.useCallback(async () => {
     if (!proposalId) return
     setIsLoading(true)
-    const result = await apiCall<{
-      proposal: ProposalDetail
-      actions: ActionDetail[]
-      discrepancies: DiscrepancyDetail[]
-      email: EmailDetail
-    }>(`/api/inbox_ops/proposals/${proposalId}`)
-    if (result?.ok && result.result) {
-      setProposal(result.result.proposal)
-      setActions(result.result.actions || [])
-      setDiscrepancies(result.result.discrepancies || [])
-      setEmail(result.result.email)
+    setError(null)
+    try {
+      const result = await apiCall<{
+        proposal: ProposalDetail
+        actions: ActionDetail[]
+        discrepancies: DiscrepancyDetail[]
+        email: EmailDetail
+      }>(`/api/inbox_ops/proposals/${proposalId}`)
+      if (result?.ok && result.result) {
+        setProposal(result.result.proposal)
+        setActions(result.result.actions || [])
+        setDiscrepancies(result.result.discrepancies || [])
+        setEmail(result.result.email)
+      } else {
+        setError(t('inbox_ops.flash.load_failed', 'Failed to load proposal'))
+      }
+    } catch {
+      setError(t('inbox_ops.flash.load_failed', 'Failed to load proposal'))
     }
     setIsLoading(false)
-  }, [proposalId])
+  }, [proposalId, t])
 
   React.useEffect(() => { loadData() }, [loadData])
 
   const handleAcceptAction = React.useCallback(async (actionId: string) => {
     setIsProcessing(true)
-    const result = await apiCall<{ ok: boolean; error?: string }>(
-      `/api/inbox_ops/proposals/${proposalId}/actions/${actionId}/accept`,
-      { method: 'POST' },
-    )
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean; error?: string }>(
+        `/api/inbox_ops/proposals/${proposalId}/actions/${actionId}/accept`,
+        { method: 'POST' },
+      ),
+      context: {},
+    })
     if (result?.ok && result.result?.ok) {
       flash(t('inbox_ops.flash.action_executed', 'Action executed'), 'success')
       await loadData()
@@ -168,14 +189,17 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
       flash(result?.result?.error || t('inbox_ops.flash.action_execute_failed', 'Failed to execute action'), 'error')
     }
     setIsProcessing(false)
-  }, [proposalId, loadData, t])
+  }, [proposalId, loadData, t, runMutation])
 
   const handleRejectAction = React.useCallback(async (actionId: string) => {
     setIsProcessing(true)
-    const result = await apiCall<{ ok: boolean }>(
-      `/api/inbox_ops/proposals/${proposalId}/actions/${actionId}/reject`,
-      { method: 'POST' },
-    )
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean }>(
+        `/api/inbox_ops/proposals/${proposalId}/actions/${actionId}/reject`,
+        { method: 'POST' },
+      ),
+      context: {},
+    })
     if (result?.ok && result.result?.ok) {
       flash(t('inbox_ops.flash.action_rejected', 'Action rejected'), 'success')
       await loadData()
@@ -183,31 +207,47 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
       flash(t('inbox_ops.flash.action_reject_failed', 'Failed to reject action'), 'error')
     }
     setIsProcessing(false)
-  }, [proposalId, loadData])
+  }, [proposalId, loadData, runMutation])
 
   const handleAcceptAll = React.useCallback(async () => {
-    const pendingCount = actions.filter((a) => a.status === 'pending').length
+    const pendingActions = actions.filter((a) => a.status === 'pending')
+    const pendingCount = pendingActions.length
+    const nameIssueCount = pendingActions.filter((a) => hasContactNameIssue(a)).length
+
+    const confirmText = nameIssueCount > 0
+      ? t('inbox_ops.action.accept_all_confirm_with_skip', 'Execute {count} pending actions? {skipCount} contact actions will be skipped due to missing names.')
+        .replace('{count}', String(pendingCount))
+        .replace('{skipCount}', String(nameIssueCount))
+      : t('inbox_ops.action.accept_all_confirm', 'Execute {count} pending actions?').replace('{count}', String(pendingCount))
+
     const confirmed = await confirm({
       title: t('inbox_ops.action.accept_all', 'Accept All'),
-      text: t('inbox_ops.action.accept_all_confirm', `Execute ${pendingCount} pending actions?`).replace('{count}', String(pendingCount)),
+      text: confirmText,
     })
     if (!confirmed) return
 
     setIsProcessing(true)
-    const result = await apiCall<{ ok: boolean; succeeded: number; failed: number }>(
-      `/api/inbox_ops/proposals/${proposalId}/accept-all`,
-      { method: 'POST' },
-    )
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean; succeeded: number; failed: number }>(
+        `/api/inbox_ops/proposals/${proposalId}/accept-all`,
+        { method: 'POST' },
+      ),
+      context: {},
+    })
     if (result?.ok && result.result?.ok) {
-      flash(t('inbox_ops.flash.accept_all_success', '{succeeded} actions executed')
-        .replace('{succeeded}', String(result.result.succeeded))
-        + (result.result.failed > 0 ? `, ${result.result.failed} failed` : ''), 'success')
+      const msg = result.result.failed > 0
+        ? t('inbox_ops.flash.accept_all_partial', '{succeeded} actions executed, {failed} failed')
+          .replace('{succeeded}', String(result.result.succeeded))
+          .replace('{failed}', String(result.result.failed))
+        : t('inbox_ops.flash.accept_all_success', '{succeeded} actions executed')
+          .replace('{succeeded}', String(result.result.succeeded))
+      flash(msg, 'success')
       await loadData()
     } else {
       flash(t('inbox_ops.flash.accept_all_failed', 'Failed to accept all actions'), 'error')
     }
     setIsProcessing(false)
-  }, [proposalId, actions, confirm, t, loadData])
+  }, [proposalId, actions, confirm, t, loadData, runMutation])
 
   const handleRejectAll = React.useCallback(async () => {
     const confirmed = await confirm({
@@ -217,37 +257,46 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
     if (!confirmed) return
 
     setIsProcessing(true)
-    const result = await apiCall<{ ok: boolean }>(
-      `/api/inbox_ops/proposals/${proposalId}/reject`,
-      { method: 'POST' },
-    )
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean }>(
+        `/api/inbox_ops/proposals/${proposalId}/reject`,
+        { method: 'POST' },
+      ),
+      context: {},
+    })
     if (result?.ok && result.result?.ok) {
       flash(t('inbox_ops.action.proposal_rejected', 'Proposal rejected'), 'success')
       await loadData()
     }
     setIsProcessing(false)
-  }, [proposalId, confirm, t, loadData])
+  }, [proposalId, confirm, t, loadData, runMutation])
 
   const handleRetryExtraction = React.useCallback(async () => {
     if (!email) return
     setIsProcessing(true)
-    const result = await apiCall<{ ok: boolean }>(
-      `/api/inbox_ops/emails/${email.id}/reprocess`,
-      { method: 'POST' },
-    )
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean }>(
+        `/api/inbox_ops/emails/${email.id}/reprocess`,
+        { method: 'POST' },
+      ),
+      context: {},
+    })
     if (result?.ok && result.result?.ok) {
       flash(t('inbox_ops.flash.reprocessing_started', 'Reprocessing started'), 'success')
       await loadData()
     }
     setIsProcessing(false)
-  }, [email, loadData])
+  }, [email, loadData, runMutation])
 
   const handleSendReply = React.useCallback(async (actionId: string) => {
     setSendingReplyId(actionId)
-    const result = await apiCall<{ ok: boolean; error?: string }>(
-      `/api/inbox_ops/proposals/${proposalId}/replies/${actionId}/send`,
-      { method: 'POST' },
-    )
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean; error?: string }>(
+        `/api/inbox_ops/proposals/${proposalId}/replies/${actionId}/send`,
+        { method: 'POST' },
+      ),
+      context: {},
+    })
     if (result?.ok && result.result?.ok) {
       flash(t('inbox_ops.reply.sent_success', 'Reply sent successfully'), 'success')
       await loadData()
@@ -255,9 +304,10 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
       flash(result?.result?.error || t('inbox_ops.flash.send_reply_failed', 'Failed to send reply'), 'error')
     }
     setSendingReplyId(null)
-  }, [proposalId, t, loadData])
+  }, [proposalId, t, loadData, runMutation])
 
   if (isLoading) return <LoadingMessage label={t('inbox_ops.loading_proposal', 'Loading proposal...')} />
+  if (error) return <ErrorMessage label={error} />
 
   const pendingActions = actions.filter((a) => a.status === 'pending')
   const emailIsProcessing = email?.status === 'processing'
@@ -275,23 +325,24 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
         />
       )}
 
-      <div className="flex items-center justify-between px-3 py-3 md:px-6 md:py-4 border-b">
-        <div className="flex items-center gap-3">
+      <div className="flex items-center justify-between px-4 py-3 md:px-6 md:py-4 border-b bg-background">
+        <div className="flex items-center gap-2 md:gap-3 min-w-0">
           <Link href="/backend/inbox-ops">
-            <Button variant="ghost" size="sm">
+            <Button type="button" variant="ghost" size="sm">
               <ArrowLeft className="h-4 w-4" />
             </Button>
           </Link>
-          <div className="min-w-0">
-            <h1 className="text-lg font-semibold truncate">{email?.subject || t('inbox_ops.proposal', 'Proposal')}</h1>
-            <p className="text-xs text-muted-foreground">
+          <div className="min-w-0 flex-1">
+            <h1 className="text-base md:text-lg font-semibold truncate">{email?.subject || t('inbox_ops.proposal', 'Proposal')}</h1>
+            <p className="text-xs text-muted-foreground truncate">
               {email?.forwardedByName || email?.forwardedByAddress} · {email?.receivedAt && new Date(email.receivedAt).toLocaleString()}
             </p>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-shrink-0">
           {pendingActions.length > 0 && (
             <Button
+              type="button"
               variant="outline"
               size="sm"
               className="h-11 md:h-9 text-destructive border-destructive/30 hover:bg-destructive/10"
@@ -303,7 +354,7 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
             </Button>
           )}
           {pendingActions.length > 1 && (
-            <Button size="sm" className="h-11 md:h-9" onClick={handleAcceptAll} disabled={isProcessing}>
+            <Button type="button" size="sm" className="h-11 md:h-9" onClick={handleAcceptAll} disabled={isProcessing}>
               {isProcessing ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <CheckCheck className="h-4 w-4 mr-1" />}
               <span className="hidden md:inline">{t('inbox_ops.action.accept_all', 'Accept All')}</span>
             </Button>
@@ -334,7 +385,7 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                 {email?.processingError && (
                   <p className="text-xs text-red-600 mb-3">{email.processingError}</p>
                 )}
-                <Button size="sm" variant="outline" onClick={handleRetryExtraction} disabled={isProcessing}>
+                <Button type="button" size="sm" variant="outline" onClick={handleRetryExtraction} disabled={isProcessing}>
                   <RefreshCw className="h-4 w-4 mr-1" />
                   {t('inbox_ops.action.retry', 'Retry')}
                 </Button>
@@ -345,8 +396,9 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                 <div className="border rounded-lg p-3 md:p-4">
                   <div className="flex items-center justify-between mb-2">
                     <h3 className="font-semibold text-sm">{t('inbox_ops.summary', 'Summary')}</h3>
-                    {proposal.workingLanguage && proposal.workingLanguage !== locale && (
+                    {(proposal.workingLanguage || 'en') !== locale && (
                       <Button
+                        type="button"
                         variant="ghost"
                         size="sm"
                         className="h-8 text-xs"
@@ -418,12 +470,12 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                           }`}>
                             <AlertTriangle className="h-3 w-3 mt-0.5 flex-shrink-0" />
                             <div>
-                              <span>{d.description}</span>
+                              <span>{resolveDiscrepancyDescription(d.description, d.foundValue)}</span>
                               {(d.expectedValue || d.foundValue) && (
                                 <div className="mt-0.5 text-[11px] opacity-80">
-                                  {d.expectedValue && <span>Expected: {d.expectedValue}</span>}
+                                  {d.expectedValue && <span>{t('inbox_ops.discrepancy.expected', 'Expected')}: {d.expectedValue}</span>}
                                   {d.expectedValue && d.foundValue && <span> · </span>}
-                                  {d.foundValue && <span>Found: {d.foundValue}</span>}
+                                  {d.foundValue && <span>{t('inbox_ops.discrepancy.found', 'Found')}: {d.foundValue}</span>}
                                 </div>
                               )}
                             </div>
@@ -452,10 +504,12 @@ export default function ProposalDetailPage({ params }: { params?: { id?: string
                             onRetry={handleAcceptAction}
                             onEdit={handleEditAction}
                             translatedDescription={showTranslation ? translation?.actions[action.id] : undefined}
+                            resolveDiscrepancyDescription={resolveDiscrepancyDescription}
                           />
                           {action.actionType === 'draft_reply' && (action.status === 'executed' || action.status === 'accepted') && (
                             <div className="mt-2 pl-7">
                               <Button
+                                type="button"
                                 size="sm"
                                 variant="outline"
                                 className="h-11 md:h-9"

package/src/modules/inbox_ops/backend/inbox-ops/settings/page.meta.ts

@@ -3,11 +3,11 @@ export const metadata = {
   requireFeatures: ['inbox_ops.settings.manage'],
   pageTitle: 'Inbox Settings',
   pageTitleKey: 'inbox_ops.nav.settings',
-  pageGroup: 'InboxOps',
+  pageGroup: 'AI Inbox Actions',
   pageGroupKey: 'inbox_ops.nav.group',
   navHidden: true,
   breadcrumb: [
-    { label: 'InboxOps', labelKey: 'inbox_ops.nav.group', href: '/backend/inbox-ops' },
+    { label: 'AI Inbox Actions', labelKey: 'inbox_ops.nav.group', href: '/backend/inbox-ops' },
     { label: 'Settings', labelKey: 'inbox_ops.nav.settings' },
   ],
 }

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

@@ -6,13 +6,18 @@ import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { ArrowLeft, Copy, CheckCircle } from 'lucide-react'
 
 const LANGUAGE_KEYS = ['en', 'de', 'es', 'pl'] as const
 
 export default function InboxSettingsPage() {
   const t = useT()
+  const { runMutation } = useGuardedMutation<Record<string, unknown>>({
+    contextId: 'inbox-ops-settings',
+  })
 
   const languageOptions = LANGUAGE_KEYS.map((key) => ({
     value: key,
@@ -20,18 +25,33 @@ export default function InboxSettingsPage() {
   }))
   const [settings, setSettings] = React.useState<{ inboxAddress?: string; isActive?: boolean; workingLanguage?: string } | null>(null)
   const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
   const [copied, setCopied] = React.useState(false)
   const [isSavingLanguage, setIsSavingLanguage] = React.useState(false)
 
   React.useEffect(() => {
+    let cancelled = false
     async function load() {
       setIsLoading(true)
-      const result = await apiCall<{ settings: { inboxAddress?: string; isActive?: boolean; workingLanguage?: string } | null }>('/api/inbox_ops/settings')
-      if (result?.ok && result.result?.settings) setSettings(result.result.settings)
-      setIsLoading(false)
+      setError(null)
+      try {
+        const result = await apiCall<{ settings: { inboxAddress?: string; isActive?: boolean; workingLanguage?: string } | null }>('/api/inbox_ops/settings')
+        if (!cancelled) {
+          if (result?.ok && result.result?.settings) {
+            setSettings(result.result.settings)
+          } else {
+            setError(t('inbox_ops.settings.load_failed', 'Failed to load settings'))
+          }
+        }
+      } catch {
+        if (!cancelled) setError(t('inbox_ops.settings.load_failed', 'Failed to load settings'))
+      } finally {
+        if (!cancelled) setIsLoading(false)
+      }
     }
     load()
-  }, [])
+    return () => { cancelled = true }
+  }, [t])
 
   const handleCopy = React.useCallback(() => {
     if (settings?.inboxAddress) {
@@ -44,9 +64,12 @@ export default function InboxSettingsPage() {
   const handleLanguageChange = React.useCallback(async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const workingLanguage = event.target.value
     setIsSavingLanguage(true)
-    const result = await apiCall<{ ok: boolean; settings: { workingLanguage: string } }>('/api/inbox_ops/settings', {
-      method: 'PATCH',
-      body: JSON.stringify({ workingLanguage }),
+    const result = await runMutation({
+      operation: () => apiCall<{ ok: boolean; settings: { workingLanguage: string } }>('/api/inbox_ops/settings', {
+        method: 'PATCH',
+        body: JSON.stringify({ workingLanguage }),
+      }),
+      context: {},
     })
     if (result?.ok && result.result?.ok) {
       setSettings((prev) => prev ? { ...prev, workingLanguage: result.result!.settings.workingLanguage } : prev)
@@ -55,13 +78,13 @@ export default function InboxSettingsPage() {
       flash(t('inbox_ops.settings.language_save_failed', 'Failed to update working language'), 'error')
     }
     setIsSavingLanguage(false)
-  }, [t])
+  }, [t, runMutation])
 
   return (
     <Page>
       <div className="flex items-center gap-3 px-3 py-3 md:px-6 md:py-4">
         <Link href="/backend/inbox-ops">
-          <Button variant="ghost" size="sm"><ArrowLeft className="h-4 w-4" /></Button>
+          <Button type="button" variant="ghost" size="sm"><ArrowLeft className="h-4 w-4" /></Button>
         </Link>
         <h1 className="text-lg font-semibold">{t('inbox_ops.settings.title', 'Inbox Settings')}</h1>
       </div>
@@ -69,10 +92,9 @@ export default function InboxSettingsPage() {
       <PageBody>
         <div className="max-w-lg">
           {isLoading ? (
-            <div className="animate-pulse space-y-4">
-              <div className="h-6 bg-muted rounded w-1/3" />
-              <div className="h-12 bg-muted rounded" />
-            </div>
+            <LoadingMessage label={t('inbox_ops.settings.loading', 'Loading settings...')} />
+          ) : error ? (
+            <ErrorMessage label={error} />
           ) : settings ? (
             <div className="space-y-6">
               <div>
@@ -86,7 +108,7 @@ export default function InboxSettingsPage() {
                   <div className="flex-1 bg-muted rounded-lg px-4 py-3">
                     <code className="text-sm font-mono">{settings.inboxAddress}</code>
                   </div>
-                  <Button variant="outline" size="sm" className="h-11 md:h-9" onClick={handleCopy}>
+                  <Button type="button" variant="outline" size="sm" className="h-11 md:h-9" onClick={handleCopy}>
                     {copied ? <CheckCircle className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
                     <span className="ml-1">{copied ? t('inbox_ops.settings.copied', 'Copied') : t('inbox_ops.settings.copy', 'Copy')}</span>
                   </Button>