@open-mercato/ui 0.5.1-develop.3036.f02c281f23 → 0.5.1-develop.3045.b4b3320cc2

package/src/ai/parts/MutationResultCard.tsx

@@ -0,0 +1,360 @@
+"use client"
+
+import * as React from 'react'
+import { AlertTriangle, CheckCircle2, Wand2, XCircle } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Alert, AlertDescription, AlertTitle } from '../../primitives/alert'
+import { Button } from '../../primitives/button'
+import type { AiUiPartProps } from '../ui-part-registry'
+import { useAiPendingActionPolling } from './useAiPendingActionPolling'
+import type { AiPendingActionCardAction, AiPendingActionCardStatus } from './types'
+
+/** Custom DOM event the failure card dispatches when the operator clicks
+ * "Fix with AI". `<AiChat>` listens for this and sends a follow-up user
+ * message asking the agent to diagnose and retry the failed call. */
+export const AI_CHAT_FIX_REQUEST_EVENT = 'om-ai-chat-fix-request'
+
+export interface AiChatFixRequestDetail {
+  message: string
+  toolName?: string
+  pendingActionId?: string
+}
+
+function dispatchFixRequest(detail: AiChatFixRequestDetail): void {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent<AiChatFixRequestDetail>(AI_CHAT_FIX_REQUEST_EVENT, { detail }))
+}
+
+/**
+ * Terminal-state card that renders the `executionResult` of a pending
+ * action. Success → `Alert variant="success"` with a record link; partial
+ * success (batch `failedRecords[]`) → `variant="warning"` with the list;
+ * failure → `variant="destructive"` with the error code + message.
+ *
+ * Reads the pending action via the shared polling hook so page reloads
+ * still recover state. The hook short-circuits once the row is terminal
+ * (spec's reconnect behavior), which is always the case for this card.
+ */
+export interface MutationResultCardPayload {
+  /** Server-serialized pending action snapshot (optional — the hook refetches). */
+  pendingAction?: AiPendingActionCardAction
+  /** Optional link target for the success record. */
+  recordHref?: string
+}
+
+export interface MutationResultCardProps extends AiUiPartProps {
+  /** Optional injected action for tests — bypasses the polling fetch. */
+  initialAction?: AiPendingActionCardAction
+  /** Poll endpoint override for tests. */
+  endpoint?: string
+}
+
+function isSuccessStatus(status: AiPendingActionCardStatus | null): boolean {
+  return status === 'confirmed'
+}
+
+function isFailureStatus(status: AiPendingActionCardStatus | null): boolean {
+  return status === 'failed' || status === 'cancelled' || status === 'expired'
+}
+
+export function MutationResultCard(props: MutationResultCardProps) {
+  const t = useT()
+  const pendingActionId = props.pendingActionId ?? ''
+  const payload = (props.payload as MutationResultCardPayload | undefined) ?? {}
+  const injected = props.initialAction ?? payload.pendingAction ?? null
+
+  const { action: polled } = useAiPendingActionPolling({
+    pendingActionId,
+    endpoint: props.endpoint,
+    disabled: !pendingActionId || Boolean(injected),
+  })
+  const action = injected ?? polled
+  const status = action?.status ?? null
+  const failedRecords = action?.failedRecords ?? null
+  const result = action?.executionResult ?? null
+
+  if (!action) {
+    return null
+  }
+
+  if (isSuccessStatus(status) && failedRecords && failedRecords.length > 0) {
+    return (
+      <Alert variant="warning" data-ai-mutation-result="partial">
+        <AlertTriangle className="size-4" aria-hidden />
+        <AlertTitle>
+          {t(
+            'ai_assistant.chat.mutation_cards.result.partialTitle',
+            'Action applied with failures',
+          )}
+        </AlertTitle>
+        <div className="text-sm leading-relaxed">
+          <p>
+            {t(
+              'ai_assistant.chat.mutation_cards.result.partialBody',
+              'Some records could not be updated.',
+            )}
+          </p>
+          <ul
+            className="mt-2 list-disc space-y-1 pl-5 text-xs"
+            data-ai-mutation-failed-records
+          >
+            {failedRecords.map((record) => (
+              <li key={record.recordId} data-ai-mutation-failed-record={record.recordId}>
+                <span className="font-mono">{record.recordId}</span>
+                <span className="mx-1 text-muted-foreground">•</span>
+                <span className="font-mono">{record.error.code}</span>
+                <span className="mx-1 text-muted-foreground">—</span>
+                <span>{record.error.message}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Alert>
+    )
+  }
+
+  if (isSuccessStatus(status)) {
+    const recordId = result?.recordId ?? action.targetRecordId ?? null
+    const href = payload.recordHref ?? null
+    return (
+      <Alert variant="success" data-ai-mutation-result="success">
+        <CheckCircle2 className="size-4" aria-hidden />
+        <AlertTitle>
+          {t('ai_assistant.chat.mutation_cards.result.successTitle', 'Action applied')}
+        </AlertTitle>
+        <div className="text-sm leading-relaxed">
+          <p>
+            {result?.commandName
+              ? t(
+                  'ai_assistant.chat.mutation_cards.result.successWithCommand',
+                  'Completed',
+                ) + `: ${result.commandName}`
+              : t(
+                  'ai_assistant.chat.mutation_cards.result.successBody',
+                  'The mutation completed successfully.',
+                )}
+          </p>
+          {recordId ? (
+            <p className="mt-1 text-xs">
+              {href ? (
+                <a
+                  className="font-mono text-primary underline"
+                  href={href}
+                  data-ai-mutation-result-link
+                >
+                  {t(
+                    'ai_assistant.chat.mutation_cards.result.viewRecord',
+                    'View record',
+                  )}
+                  : {recordId}
+                </a>
+              ) : (
+                <span className="font-mono" data-ai-mutation-result-record-id>
+                  {recordId}
+                </span>
+              )}
+            </p>
+          ) : null}
+        </div>
+      </Alert>
+    )
+  }
+
+  // Render the failure alert when the action is in a failure status OR when
+  // the dispatcher already captured an `executionResult.error` (the row may
+  // not yet have transitioned out of `executing` in the polling snapshot,
+  // but the handler error is authoritative — surface it immediately so the
+  // operator never sees a stuck "applying…" state silently masking a real
+  // failure).
+  if (isFailureStatus(status) || result?.error) {
+    const code = result?.error?.code ?? status ?? 'failed'
+    const message =
+      result?.error?.message ??
+      t(
+        'ai_assistant.chat.mutation_cards.result.failureBody',
+        'The mutation could not be applied.',
+      )
+    const errorObj = result?.error
+    const errorDetails = errorObj?.details
+    const errorInput = errorObj?.input
+    const errorName = errorObj?.name
+    const onFixWithAi = () => {
+      // Build a structured prompt that gives the agent enough context to
+      // diagnose and retry without copy/paste from the operator. Keeping
+      // it explicit ("retry with corrected arguments") nudges the model
+      // away from re-issuing the same args (which would just hit the
+      // same error). The repository's idempotency check only dedupes
+      // active `pending` rows, so a fresh prepareMutation call after a
+      // terminal failure always produces a new pending action — the
+      // retry is never silently collapsed.
+      //
+      // The prompt now embeds the full structured failure context the
+      // server captured (Zod issues / fieldErrors, original arguments,
+      // failedRecords for batch tools, error name + cause). Without this
+      // the operator routinely saw "Invalid input" with no field path —
+      // the model literally could not fix what it could not see.
+      const promptLines: string[] = [
+        `The previous call to tool "${action.toolName}" failed.`,
+        `Error: ${code} — ${message}.`,
+      ]
+      if (errorName && errorName !== 'Error') {
+        promptLines.push(`Error class: ${errorName}.`)
+      }
+      if (action.targetEntityType || action.targetRecordId) {
+        promptLines.push(
+          `Target: ${action.targetEntityType ?? '?'}${action.targetRecordId ? ' / ' + action.targetRecordId : ''}.`,
+        )
+      }
+
+      // Field-level validation issues (Zod, custom). Render as a bulleted
+      // list of `path: message` so the model can locate the offender by
+      // schema path instead of guessing from a generic message.
+      const issues = errorDetails?.issues ?? []
+      if (Array.isArray(issues) && issues.length > 0) {
+        promptLines.push('', 'Validation issues:')
+        for (const issue of issues) {
+          const path = Array.isArray(issue?.path) && issue.path.length > 0
+            ? issue.path.join('.')
+            : '(root)'
+          const msg = issue?.message ?? '(no message)'
+          const codeHint = issue?.code ? ` [${issue.code}]` : ''
+          const expHint =
+            issue?.expected || issue?.received
+              ? ` (expected ${issue?.expected ?? '?'}, got ${issue?.received ?? '?'})`
+              : ''
+          promptLines.push(`- ${path}: ${msg}${codeHint}${expHint}`)
+        }
+      } else if (errorDetails?.fieldErrors && typeof errorDetails.fieldErrors === 'object') {
+        const entries = Object.entries(errorDetails.fieldErrors)
+        if (entries.length > 0) {
+          promptLines.push('', 'Field errors:')
+          for (const [path, msgs] of entries) {
+            const list = Array.isArray(msgs) ? msgs.join('; ') : String(msgs)
+            promptLines.push(`- ${path}: ${list}`)
+          }
+        }
+      }
+
+      // Echo the arguments the handler was invoked with so the model can
+      // see exactly what it sent and change at least one parameter on
+      // retry. JSON-stringified inline for compactness; non-serializable
+      // values are dropped on the server side already.
+      if (errorInput !== undefined) {
+        try {
+          const json = JSON.stringify(errorInput, null, 2)
+          if (json && json !== '{}' && json.length <= 4000) {
+            promptLines.push('', 'Arguments you sent:', '```json', json, '```')
+          } else if (json && json.length > 4000) {
+            promptLines.push(
+              '',
+              'Arguments you sent (truncated):',
+              '```json',
+              json.slice(0, 4000) + '\n… [truncated]',
+              '```',
+            )
+          }
+        } catch {
+          // ignore
+        }
+      }
+
+      // Surface root-cause when the handler nested another error inside.
+      if (errorDetails?.cause !== undefined) {
+        try {
+          const causeJson = JSON.stringify(errorDetails.cause, null, 2)
+          if (causeJson && causeJson !== '{}' && causeJson.length <= 1500) {
+            promptLines.push('', 'Underlying cause:', '```json', causeJson, '```')
+          }
+        } catch {
+          // ignore
+        }
+      }
+
+      // Per-record failures from batch tools (Step 5.14). These usually
+      // carry the most actionable information for partial-success cases.
+      if (failedRecords && failedRecords.length > 0) {
+        promptLines.push('', 'Records that failed:')
+        for (const rec of failedRecords) {
+          promptLines.push(
+            `- ${rec.recordId} → ${rec.error.code}: ${rec.error.message}`,
+          )
+        }
+      }
+
+      promptLines.push(
+        '',
+        'Diagnose what went wrong using the validation issues / cause / arguments above, correct the arguments, and call the tool again. If the failure indicates missing prerequisites (e.g. a deal needs a linked person/company before commenting), tell me what to fix on the platform side instead of retrying blindly. Do not repeat the exact same arguments — you must change at least one parameter or stop and explain.',
+      )
+      dispatchFixRequest({
+        message: promptLines.join('\n'),
+        toolName: action.toolName,
+        pendingActionId: action.id,
+      })
+    }
+    const visibleIssues = Array.isArray(errorDetails?.issues)
+      ? errorDetails!.issues!.filter((entry) => entry && (entry.message || entry.path))
+      : []
+    return (
+      <Alert variant="destructive" data-ai-mutation-result="failure">
+        <XCircle className="size-4" aria-hidden />
+        <AlertTitle>
+          {t(
+            'ai_assistant.chat.mutation_cards.result.failureTitle',
+            'Action failed',
+          )}
+        </AlertTitle>
+        <div className="text-sm leading-relaxed">
+          <div>
+            <span className="mr-2 font-mono text-xs" data-ai-mutation-result-code>
+              {code}
+            </span>
+            <span>{message}</span>
+          </div>
+          {visibleIssues.length > 0 ? (
+            <ul
+              className="mt-2 list-disc space-y-0.5 pl-5 text-xs"
+              data-ai-mutation-result-issues
+            >
+              {visibleIssues.map((issue, index) => {
+                const path =
+                  Array.isArray(issue?.path) && issue.path.length > 0
+                    ? issue.path.join('.')
+                    : null
+                return (
+                  <li key={index}>
+                    {path ? (
+                      <span className="font-mono">{path}</span>
+                    ) : null}
+                    {path && issue?.message ? <span className="mx-1">—</span> : null}
+                    {issue?.message ? <span>{issue.message}</span> : null}
+                  </li>
+                )
+              })}
+            </ul>
+          ) : null}
+          <div className="mt-2 flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={onFixWithAi}
+              data-ai-mutation-result-fix
+            >
+              <Wand2 className="size-4" aria-hidden />
+              <span>
+                {t(
+                  'ai_assistant.chat.mutation_cards.result.fixWithAi',
+                  'Fix with AI',
+                )}
+              </span>
+            </Button>
+          </div>
+        </div>
+      </Alert>
+    )
+  }
+
+  return null
+}
+
+export default MutationResultCard

package/src/ai/parts/__tests__/ConfirmationCard.test.tsx

@@ -0,0 +1,169 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+jest.mock('../useAiPendingActionPolling', () => ({
+  useAiPendingActionPolling: jest.fn(),
+}))
+
+jest.mock('../pending-action-api', () => ({
+  confirmPendingAction: jest.fn(),
+  cancelPendingAction: jest.fn(),
+}))
+
+import { useAiPendingActionPolling } from '../useAiPendingActionPolling'
+import { cancelPendingAction } from '../pending-action-api'
+import { ConfirmationCard } from '../ConfirmationCard'
+import type { AiPendingActionCardAction } from '../types'
+
+const dict = {
+  'ai_assistant.chat.mutation_cards.confirmation.title': 'Applying action...',
+  'ai_assistant.chat.mutation_cards.confirmation.cancel': 'Cancel',
+  'ai_assistant.chat.mutation_cards.confirmation.defaultSummary': 'Applying the requested changes...',
+  'ai_assistant.chat.mutation_cards.confirmation.staleVersionTitle': 'Re-propose required',
+  'ai_assistant.chat.mutation_cards.confirmation.staleVersionBody':
+    'One or more records changed since this preview was generated. Ask the assistant to re-propose the change.',
+  'ai_assistant.chat.mutation_cards.confirmation.schemaDriftTitle': 'Schema changed',
+  'ai_assistant.chat.mutation_cards.confirmation.schemaDriftBody':
+    'The tool signature changed since this preview was generated. Ask the assistant to re-propose the change.',
+  'ai_assistant.chat.mutation_cards.confirmation.invalidStatusTitle': 'Action already resolved',
+  'ai_assistant.chat.mutation_cards.confirmation.invalidStatusBody':
+    'This action has already been confirmed, cancelled, or executed.',
+  'ai_assistant.chat.mutation_cards.confirmation.errorTitle': 'Confirm failed',
+  'ui.spinner.ariaLabel': 'Loading',
+}
+
+function baseAction(
+  overrides: Partial<AiPendingActionCardAction> = {},
+): AiPendingActionCardAction {
+  return {
+    id: 'pa-1',
+    agentId: 'customers.account_assistant',
+    toolName: 'customers.update_person',
+    status: 'pending',
+    fieldDiff: [],
+    records: null,
+    failedRecords: null,
+    sideEffectsSummary: 'Rename Alice to Alicia',
+    attachmentIds: [],
+    targetEntityType: 'customers.person',
+    targetRecordId: 'p-1',
+    recordVersion: '1',
+    executionResult: null,
+    createdAt: new Date().toISOString(),
+    expiresAt: new Date(Date.now() + 10_000).toISOString(),
+    resolvedAt: null,
+    resolvedByUserId: null,
+    ...overrides,
+  }
+}
+
+function installPollingMock(action: AiPendingActionCardAction | null) {
+  ;(useAiPendingActionPolling as jest.Mock).mockReturnValue({
+    action,
+    status: action?.status ?? null,
+    isPolling: action?.status === 'pending' || action?.status === 'executing',
+    error: null,
+    refresh: jest.fn().mockResolvedValue(action),
+  })
+}
+
+describe('ConfirmationCard', () => {
+  beforeEach(() => {
+    ;(useAiPendingActionPolling as jest.Mock).mockReset()
+    ;(cancelPendingAction as jest.Mock).mockReset()
+    ;(cancelPendingAction as jest.Mock).mockResolvedValue({
+      ok: true,
+      data: { ok: true, pendingAction: baseAction({ status: 'cancelled' }) },
+    })
+  })
+
+  it('renders spinner + side effects copy in pending state', () => {
+    installPollingMock(baseAction({ status: 'pending' }))
+    renderWithProviders(
+      <ConfirmationCard componentId="confirmation-card" pendingActionId="pa-1" />,
+      { dict },
+    )
+    expect(screen.getByText('Applying action...')).toBeInTheDocument()
+    expect(screen.getByText('Rename Alice to Alicia')).toBeInTheDocument()
+    // The cancel button must be enabled while status is pending.
+    const cancelButton = document.querySelector(
+      '[data-ai-confirmation-cancel]',
+    ) as HTMLButtonElement
+    expect(cancelButton.disabled).toBe(false)
+  })
+
+  it('disables Cancel once the server flips status to executing', () => {
+    installPollingMock(baseAction({ status: 'executing' }))
+    renderWithProviders(
+      <ConfirmationCard componentId="confirmation-card" pendingActionId="pa-1" />,
+      { dict },
+    )
+    const cancelButton = document.querySelector(
+      '[data-ai-confirmation-cancel]',
+    ) as HTMLButtonElement
+    expect(cancelButton.disabled).toBe(true)
+  })
+
+  it('renders the stale_version "Re-propose required" alert with failed record ids', () => {
+    installPollingMock(baseAction({ status: 'pending' }))
+    renderWithProviders(
+      <ConfirmationCard
+        componentId="confirmation-card"
+        pendingActionId="pa-1"
+        payload={{
+          confirmError: {
+            status: 412,
+            code: 'stale_version',
+            message: 'Record version changed since preview.',
+            extra: { failedRecords: [{ recordId: 'r-1' }, { recordId: 'r-2' }] },
+          },
+        }}
+      />,
+      { dict },
+    )
+    expect(
+      document.querySelector('[data-ai-confirmation-error="stale_version"]'),
+    ).not.toBeNull()
+    expect(screen.getByText('Re-propose required')).toBeInTheDocument()
+    expect(
+      document.querySelectorAll('[data-ai-confirmation-stale-record]').length,
+    ).toBe(2)
+  })
+
+  it('renders the schema_drift "Schema changed" alert', () => {
+    installPollingMock(baseAction({ status: 'pending' }))
+    renderWithProviders(
+      <ConfirmationCard
+        componentId="confirmation-card"
+        pendingActionId="pa-1"
+        payload={{
+          confirmError: {
+            status: 412,
+            code: 'schema_drift',
+            message: 'Tool schema changed.',
+          },
+        }}
+      />,
+      { dict },
+    )
+    expect(
+      document.querySelector('[data-ai-confirmation-error="schema_drift"]'),
+    ).not.toBeNull()
+    expect(screen.getByText('Schema changed')).toBeInTheDocument()
+  })
+
+  it('dispatches cancelPendingAction on Cancel click', async () => {
+    installPollingMock(baseAction({ status: 'pending' }))
+    renderWithProviders(
+      <ConfirmationCard componentId="confirmation-card" pendingActionId="pa-1" />,
+      { dict },
+    )
+    fireEvent.click(document.querySelector('[data-ai-confirmation-cancel]')!)
+    await waitFor(() => expect(cancelPendingAction).toHaveBeenCalledWith('pa-1', expect.any(Object)))
+  })
+})

package/src/ai/parts/__tests__/FieldDiffCard.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { screen } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { FieldDiffCard } from '../FieldDiffCard'
+
+const dict = {
+  'ai_assistant.chat.mutation_cards.diff.fieldHeader': 'Field',
+  'ai_assistant.chat.mutation_cards.diff.beforeHeader': 'Before',
+  'ai_assistant.chat.mutation_cards.diff.afterHeader': 'After',
+  'ai_assistant.chat.mutation_cards.diff.empty': 'No field changes for this record.',
+}
+
+describe('FieldDiffCard', () => {
+  it('renders before/after cells using semantic token classes', () => {
+    renderWithProviders(
+      <FieldDiffCard
+        fieldDiff={[
+          { field: 'name', before: 'Alice', after: 'Alicia' },
+          { field: 'stage', before: 'prospect', after: 'qualified' },
+        ]}
+      />,
+      { dict },
+    )
+
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+    expect(screen.getByText('Alicia')).toBeInTheDocument()
+    expect(screen.getByText('prospect')).toBeInTheDocument()
+    expect(screen.getByText('qualified')).toBeInTheDocument()
+
+    const before = screen.getAllByText('Alice')[0].closest('[data-ai-field-diff-before]')
+    expect(before?.className).toContain('text-status-warning-text')
+    const after = screen.getAllByText('Alicia')[0].closest('[data-ai-field-diff-after]')
+    expect(after?.className).toContain('text-status-success-text')
+  })
+
+  it('renders an info placeholder when fieldDiff is empty (single-record mode)', () => {
+    renderWithProviders(<FieldDiffCard fieldDiff={[]} />, { dict })
+    expect(
+      screen.getByText('No field changes for this record.'),
+    ).toBeInTheDocument()
+    // No table must be rendered in the empty state.
+    expect(document.querySelector('[data-ai-field-diff-table]')).toBeNull()
+  })
+
+  it('renders batch records[] mode with one section per record', () => {
+    renderWithProviders(
+      <FieldDiffCard
+        records={[
+          {
+            recordId: 'r-1',
+            entityType: 'customers.person',
+            label: 'Alice',
+            fieldDiff: [{ field: 'name', before: 'Alice', after: 'Al' }],
+          },
+          {
+            recordId: 'r-2',
+            entityType: 'customers.person',
+            label: 'Bob',
+            fieldDiff: [{ field: 'name', before: 'Bob', after: 'Robert' }],
+          },
+        ]}
+      />,
+      { dict },
+    )
+    expect(document.querySelectorAll('[data-ai-field-diff-record]').length).toBe(2)
+    expect(document.querySelectorAll('h4')[0].textContent).toBe('Alice')
+    expect(document.querySelectorAll('h4')[1].textContent).toBe('Bob')
+    expect(screen.getByText('Robert')).toBeInTheDocument()
+  })
+})