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

package/src/ai/__tests__/useAiChatUpload.test.tsx

@@ -0,0 +1,163 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, render } from '@testing-library/react'
+import { useAiChatUpload, type UseAiChatUploadState } from '../useAiChatUpload'
+
+function jsonResponse(status: number, body: unknown): Response {
+  const payload = typeof body === 'string' ? body : JSON.stringify(body)
+  return new Response(payload, {
+    status,
+    headers: { 'content-type': 'application/json' },
+  })
+}
+
+function makeFile(name: string, content = 'hello', type = 'text/plain'): File {
+  return new File([content], name, { type })
+}
+
+interface HarnessProps {
+  fetchImpl: typeof fetch
+  signal?: AbortSignal
+  onState?: (state: UseAiChatUploadState) => void
+}
+
+function HookHarness({ fetchImpl, signal, onState }: HarnessProps) {
+  const state = useAiChatUpload({ fetchImpl, signal })
+  React.useEffect(() => {
+    onState?.(state)
+  })
+  return null
+}
+
+describe('useAiChatUpload', () => {
+  it('toggles busy and writes per-file done status on success', async () => {
+    const fetchImpl = jest.fn(async (_input: RequestInfo | URL, init?: RequestInit) => {
+      const form = init?.body as FormData
+      const file = form.get('file') as File
+      return jsonResponse(200, {
+        ok: true,
+        item: {
+          id: `att_${file.name}`,
+          fileName: file.name,
+          fileSize: file.size,
+          mimeType: file.type || 'text/plain',
+        },
+      })
+    }) as unknown as typeof fetch
+
+    const snapshots: UseAiChatUploadState[] = []
+    render(<HookHarness fetchImpl={fetchImpl} onState={(s) => snapshots.push(s)} />)
+    const latest = () => snapshots[snapshots.length - 1]
+
+    await act(async () => {
+      await latest().upload([makeFile('a.txt'), makeFile('b.txt')])
+    })
+
+    const final = latest()
+    expect(final.busy).toBe(false)
+    expect(final.files).toHaveLength(2)
+    expect(final.files.every((entry) => entry.status === 'done')).toBe(true)
+    expect(final.files.map((entry) => entry.attachmentId)).toEqual(['att_a.txt', 'att_b.txt'])
+    expect(final.overallProgress).toBe(1)
+  })
+
+  it('averages overallProgress across files', async () => {
+    const fetchImpl = jest.fn(async (_input: RequestInfo | URL, init?: RequestInit) => {
+      const form = init?.body as FormData
+      const file = form.get('file') as File
+      if (file.name === 'fail.txt') {
+        return jsonResponse(413, { error: 'Attachment exceeds the maximum upload size.' })
+      }
+      return jsonResponse(200, {
+        ok: true,
+        item: {
+          id: `att_${file.name}`,
+          fileName: file.name,
+          fileSize: file.size,
+          mimeType: 'text/plain',
+        },
+      })
+    }) as unknown as typeof fetch
+
+    const snapshots: UseAiChatUploadState[] = []
+    render(<HookHarness fetchImpl={fetchImpl} onState={(s) => snapshots.push(s)} />)
+    const latest = () => snapshots[snapshots.length - 1]
+
+    await act(async () => {
+      await latest().upload([makeFile('ok.txt'), makeFile('fail.txt')])
+    })
+
+    const final = latest()
+    // One done at 1.0, one error at 0.0 → average 0.5.
+    expect(final.overallProgress).toBeCloseTo(0.5, 5)
+    expect(final.files[0].status).toBe('done')
+    expect(final.files[1].status).toBe('error')
+    expect(final.files[1].reason).toBe('size_exceeded')
+  })
+
+  it('reset() clears state', async () => {
+    const fetchImpl = jest.fn(async (_input: RequestInfo | URL, init?: RequestInit) => {
+      const form = init?.body as FormData
+      const file = form.get('file') as File
+      return jsonResponse(200, {
+        ok: true,
+        item: {
+          id: `att_${file.name}`,
+          fileName: file.name,
+          fileSize: file.size,
+          mimeType: 'text/plain',
+        },
+      })
+    }) as unknown as typeof fetch
+
+    const snapshots: UseAiChatUploadState[] = []
+    render(<HookHarness fetchImpl={fetchImpl} onState={(s) => snapshots.push(s)} />)
+    const latest = () => snapshots[snapshots.length - 1]
+
+    await act(async () => {
+      await latest().upload([makeFile('a.txt')])
+    })
+    expect(latest().files).toHaveLength(1)
+
+    act(() => {
+      latest().reset()
+    })
+
+    const final = latest()
+    expect(final.files).toEqual([])
+    expect(final.busy).toBe(false)
+    expect(final.overallProgress).toBe(0)
+  })
+
+  it('propagates AbortSignal into per-file aborted status', async () => {
+    const controller = new AbortController()
+    const fetchImpl = jest.fn(async () => {
+      controller.abort()
+      const error = new Error('aborted') as Error & { name: string }
+      error.name = 'AbortError'
+      throw error
+    }) as unknown as typeof fetch
+
+    const snapshots: UseAiChatUploadState[] = []
+    render(
+      <HookHarness
+        fetchImpl={fetchImpl}
+        signal={controller.signal}
+        onState={(s) => snapshots.push(s)}
+      />,
+    )
+    const latest = () => snapshots[snapshots.length - 1]
+
+    await act(async () => {
+      await latest().upload([makeFile('a.txt'), makeFile('b.txt')])
+    })
+
+    const final = latest()
+    expect(final.busy).toBe(false)
+    expect(final.files.every((entry) => entry.status === 'error')).toBe(true)
+    expect(final.files.every((entry) => entry.reason === 'aborted')).toBe(true)
+  })
+})

package/src/ai/__tests__/useAiShortcuts.test.tsx

@@ -0,0 +1,100 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useAiShortcuts } from '../useAiShortcuts'
+
+function Harness({
+  onSubmit,
+  onCancel,
+  enabled,
+}: {
+  onSubmit?: () => void
+  onCancel?: () => void
+  enabled?: boolean
+}) {
+  const { handleKeyDown } = useAiShortcuts({ onSubmit, onCancel, enabled })
+  return (
+    <textarea aria-label="shortcuts harness" onKeyDown={handleKeyDown} />
+  )
+}
+
+describe('useAiShortcuts', () => {
+  it('calls onSubmit on plain Enter and prevents default', () => {
+    const onSubmit = jest.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    const textarea = screen.getByLabelText('shortcuts harness')
+
+    const result = fireEvent.keyDown(textarea, { key: 'Enter' })
+    // `fireEvent.keyDown` returns `false` when the handler called preventDefault.
+    expect(result).toBe(false)
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onSubmit on Cmd+Enter (still works for power users)', () => {
+    const onSubmit = jest.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    fireEvent.keyDown(screen.getByLabelText('shortcuts harness'), {
+      key: 'Enter',
+      metaKey: true,
+    })
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onSubmit on Ctrl+Enter (still works for power users)', () => {
+    const onSubmit = jest.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    fireEvent.keyDown(screen.getByLabelText('shortcuts harness'), {
+      key: 'Enter',
+      ctrlKey: true,
+    })
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire submit on Shift+Enter (native newline behavior preserved)', () => {
+    const onSubmit = jest.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    fireEvent.keyDown(screen.getByLabelText('shortcuts harness'), {
+      key: 'Enter',
+      shiftKey: true,
+    })
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('calls onCancel on Escape', () => {
+    const onCancel = jest.fn()
+    render(<Harness onCancel={onCancel} />)
+    fireEvent.keyDown(screen.getByLabelText('shortcuts harness'), { key: 'Escape' })
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire when disabled', () => {
+    const onSubmit = jest.fn()
+    const onCancel = jest.fn()
+    render(<Harness onSubmit={onSubmit} onCancel={onCancel} enabled={false} />)
+    const textarea = screen.getByLabelText('shortcuts harness')
+    fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true })
+    fireEvent.keyDown(textarea, { key: 'Escape' })
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(onCancel).not.toHaveBeenCalled()
+  })
+
+  it('does not swallow Escape when no onCancel is bound', () => {
+    render(<Harness />)
+    const textarea = screen.getByLabelText('shortcuts harness')
+    const result = fireEvent.keyDown(textarea, { key: 'Escape' })
+    // preventDefault NOT called — native Escape bubbles.
+    expect(result).toBe(true)
+  })
+
+  it('does not double-fire when keyDown is dispatched twice', () => {
+    const onSubmit = jest.fn()
+    render(<Harness onSubmit={onSubmit} />)
+    const textarea = screen.getByLabelText('shortcuts harness')
+    fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true })
+    fireEvent.keyDown(textarea, { key: 'a' })
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+  })
+})

package/src/ai/index.ts

@@ -0,0 +1,125 @@
+export { AiChat, type AiChatProps, type AiChatDebugTool, type AiChatDebugPromptSection } from './AiChat'
+export {
+  AiAssistantLauncher,
+  type AiAssistantLauncherAgent,
+  type AiAssistantLauncherProps,
+} from './AiAssistantLauncher'
+export {
+  AiDockProvider,
+  useAiDock,
+  type AiDockedAssistant,
+} from './AiDock'
+export {
+  AiChatSessionsProvider,
+  useAiChatSessions,
+  defaultSessionLabel,
+  type AiChatSession,
+} from './AiChatSessions'
+export { ChatPaneTabs } from './ChatPaneTabs'
+export {
+  useAiChat,
+  type AiChatMessage,
+  type AiChatToolCallSnapshot,
+  type AiChatMessageFile,
+  type AiChatErrorEnvelope,
+  type UseAiChatInput,
+  type UseAiChatResult,
+} from './useAiChat'
+export {
+  useAiShortcuts,
+  type UseAiShortcutsOptions,
+  type UseAiShortcutsResult,
+} from './useAiShortcuts'
+export {
+  registerAiUiPart,
+  resolveAiUiPart,
+  unregisterAiUiPart,
+  resetAiUiPartRegistryForTests,
+  listAiUiParts,
+  createAiUiPartRegistry,
+  defaultAiUiPartRegistry,
+  RESERVED_AI_UI_PART_IDS,
+  isReservedAiUiPartId,
+  type AiUiPartComponent,
+  type AiUiPartComponentId,
+  type AiUiPartProps,
+  type AiUiPartRegistry,
+  type AiUiPartRegistryEntry,
+  type CreateAiUiPartRegistryOptions,
+  type ReservedAiUiPartId,
+} from './ui-part-registry'
+export { PendingPhase3Placeholder } from './ui-parts/pending-phase3-placeholder'
+export {
+  MutationPreviewCard,
+  FieldDiffCard,
+  ConfirmationCard,
+  MutationResultCard,
+  AI_MUTATION_APPROVAL_CARDS,
+  useAiPendingActionPolling,
+  confirmPendingAction,
+  cancelPendingAction,
+  type UseAiPendingActionPollingOptions,
+  type UseAiPendingActionPollingResult,
+  type PendingActionMutationOk,
+  type PendingActionMutationError,
+  type PendingActionMutationResult,
+  type AiPendingActionCardAction,
+  type AiPendingActionCardStatus,
+  type AiPendingActionCardFieldDiff,
+  type AiPendingActionCardRecordDiff,
+  type AiPendingActionCardFailedRecord,
+  type AiPendingActionCardExecutionResult,
+} from './parts'
+export {
+  uploadAttachmentsForChat,
+  type UploadAttachmentsForChatOptions,
+  type UploadAttachmentsForChatResult,
+  type UploadedAttachment,
+  type UploadFailure,
+  type UploadFailureReason,
+} from './upload-adapter'
+export {
+  RecordCard,
+  DealCard,
+  PersonCard,
+  CompanyCard,
+  ProductCard,
+  ActivityCard,
+  RecordCardShell,
+  KeyValueList,
+  TagRow,
+  statusToTagVariant,
+  type RecordCardProps,
+  type RecordCardShellProps,
+  type KeyValueListItem,
+  type DealCardProps,
+  type PersonCardProps,
+  type CompanyCardProps,
+  type ProductCardProps,
+  type ActivityCardProps,
+  type RecordCardKind,
+  type RecordCardPayload,
+  type RecordCardBaseProps,
+  type DealRecordPayload,
+  type PersonRecordPayload,
+  type CompanyRecordPayload,
+  type ProductRecordPayload,
+  type ActivityRecordPayload,
+  registerRecordCardUiParts,
+  RECORD_CARD_COMPONENT_IDS,
+  type RecordCardComponentId,
+} from './records'
+export {
+  AiMessageContent,
+  parseAiContentSegments,
+  RECORD_CARD_FENCE_INFO_PREFIX,
+  type AiMessageContentSegment,
+  type AiMessageContentProps,
+} from './AiMessageContent'
+export {
+  useAiChatUpload,
+  type UseAiChatUploadOptions,
+  type UseAiChatUploadState,
+  type AiChatUploadFileState,
+  type AiChatUploadFileStatus,
+} from './useAiChatUpload'

package/src/ai/parts/ConfirmationCard.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import * as React from 'react'
+import { AlertTriangle, Loader2 } 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 { Spinner } from '../../primitives/spinner'
+import { useAiShortcuts } from '../useAiShortcuts'
+import type { AiUiPartProps } from '../ui-part-registry'
+import { cancelPendingAction } from './pending-action-api'
+import { useAiPendingActionPolling } from './useAiPendingActionPolling'
+import { MutationResultCard } from './MutationResultCard'
+import type { AiPendingActionCardAction } from './types'
+
+/**
+ * Confirmation / in-flight card rendered after the user clicks `Confirm` on
+ * the preview card. Shows a spinner + the side-effects summary while the
+ * server runs the re-check contract and executes the wrapped tool.
+ *
+ * The user can race the confirm by clicking Cancel — but only while the
+ * server has not yet flipped the row to `executing`. The polling hook
+ * drives the disable logic.
+ *
+ * Surfaces structured error envelopes from the confirm route: 412
+ * `stale_version` (records changed since preview) and 412 `schema_drift`
+ * (tool input schema changed) render targeted alerts with the specific
+ * recovery copy. Keyboard: `Escape` triggers Cancel; `Cmd/Ctrl+Enter` is
+ * intentionally inert (the user already confirmed).
+ *
+ * Terminal states flip this card into a {@link MutationResultCard} render
+ * so the chat transcript does not need two separate cards for confirmed
+ * vs pending.
+ */
+export interface ConfirmationCardPayload {
+  sideEffectsSummary?: string | null
+  pendingAction?: AiPendingActionCardAction
+  confirmError?: {
+    status: number
+    code?: string
+    message: string
+    extra?: Record<string, unknown>
+  }
+}
+
+export interface ConfirmationCardProps extends AiUiPartProps {
+  /** Optional override for tests — bypasses the polling fetch. */
+  initialAction?: AiPendingActionCardAction
+  /** Endpoint override (tests). */
+  endpoint?: string
+  /** Optional cancel handler override (tests). */
+  onCancel?: () => Promise<void> | void
+}
+
+export function ConfirmationCard(props: ConfirmationCardProps) {
+  const t = useT()
+  const pendingActionId = props.pendingActionId ?? ''
+  const payload = (props.payload as ConfirmationCardPayload | undefined) ?? {}
+  const injected = props.initialAction ?? payload.pendingAction ?? null
+
+  const { action, status, refresh } = useAiPendingActionPolling({
+    pendingActionId,
+    endpoint: props.endpoint,
+    disabled: !pendingActionId,
+  })
+
+  const effectiveAction = action ?? injected ?? null
+  const effectiveStatus = effectiveAction?.status ?? status
+
+  const [isCancelling, setIsCancelling] = React.useState(false)
+  const [localError, setLocalError] = React.useState<{
+    code?: string
+    message: string
+    extra?: Record<string, unknown>
+  } | null>(
+    payload.confirmError
+      ? { code: payload.confirmError.code, message: payload.confirmError.message, extra: payload.confirmError.extra }
+      : null,
+  )
+
+  const canCancel =
+    !isCancelling &&
+    (effectiveStatus === 'pending' || effectiveStatus === 'confirmed' || effectiveStatus == null)
+
+  const handleCancel = React.useCallback(async () => {
+    if (!canCancel) return
+    if (props.onCancel) {
+      await props.onCancel()
+      return
+    }
+    if (!pendingActionId) return
+    setIsCancelling(true)
+    try {
+      const result = await cancelPendingAction(pendingActionId, {
+        endpoint: props.endpoint,
+      })
+      if (!result.ok) {
+        setLocalError({
+          code: result.error.code,
+          message: result.error.message,
+          extra: result.error.extra,
+        })
+      }
+      await refresh()
+    } finally {
+      setIsCancelling(false)
+    }
+  }, [canCancel, pendingActionId, props, refresh])
+
+  const { handleKeyDown } = useAiShortcuts({
+    onCancel: () => {
+      void handleCancel()
+    },
+    enabled: canCancel,
+  })
+
+  // Terminal states — hand off to the result card renderer. Also short-
+  // circuit when the dispatcher has already populated an
+  // `executionResult.error`: the row may not have transitioned out of
+  // `executing` in the latest polling snapshot, but the handler error is
+  // authoritative, and leaving the spinner up while a known error is
+  // available is exactly the "stalled at processing" symptom the user
+  // reported. Surface the error card immediately.
+  const executionError = effectiveAction?.executionResult?.error
+  if (
+    effectiveStatus === 'confirmed' ||
+    effectiveStatus === 'failed' ||
+    effectiveStatus === 'cancelled' ||
+    effectiveStatus === 'expired' ||
+    executionError
+  ) {
+    return (
+      <MutationResultCard
+        componentId="mutation-result-card"
+        pendingActionId={pendingActionId}
+        initialAction={effectiveAction ?? undefined}
+        endpoint={props.endpoint}
+      />
+    )
+  }
+
+  const summary =
+    effectiveAction?.sideEffectsSummary ??
+    payload.sideEffectsSummary ??
+    t(
+      'ai_assistant.chat.mutation_cards.confirmation.defaultSummary',
+      'Applying the requested changes...',
+    )
+
+  return (
+    <section
+      className="rounded-md border border-border bg-muted/30 p-4 text-sm outline-none"
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      data-ai-confirmation-card
+      data-ai-confirmation-status={effectiveStatus ?? 'pending'}
+      aria-busy
+    >
+      <div className="flex items-start gap-3">
+        <Spinner size="sm" className="mt-0.5" />
+        <div className="flex-1">
+          <h4 className="text-sm font-semibold">
+            {t(
+              'ai_assistant.chat.mutation_cards.confirmation.title',
+              'Applying action...',
+            )}
+          </h4>
+          <p className="mt-1 text-sm text-muted-foreground">{summary}</p>
+        </div>
+      </div>
+
+      {localError ? (
+        <ConfirmationErrorAlert error={localError} />
+      ) : null}
+
+      <div className="mt-3 flex items-center justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            void handleCancel()
+          }}
+          disabled={!canCancel}
+          data-ai-confirmation-cancel
+        >
+          {isCancelling ? (
+            <Loader2 className="size-4 animate-spin" aria-hidden />
+          ) : null}
+          <span>
+            {t('ai_assistant.chat.mutation_cards.confirmation.cancel', 'Cancel')}
+          </span>
+        </Button>
+      </div>
+    </section>
+  )
+}
+
+function ConfirmationErrorAlert({
+  error,
+}: {
+  error: { code?: string; message: string; extra?: Record<string, unknown> }
+}) {
+  const t = useT()
+  const code = error.code ?? 'unknown'
+
+  if (code === 'stale_version') {
+    const failedRecords = Array.isArray(error.extra?.failedRecords)
+      ? (error.extra?.failedRecords as Array<{ recordId?: string }>)
+      : []
+    return (
+      <Alert
+        variant="warning"
+        className="mt-3"
+        data-ai-confirmation-error="stale_version"
+      >
+        <AlertTriangle className="size-4" aria-hidden />
+        <AlertTitle>
+          {t(
+            'ai_assistant.chat.mutation_cards.confirmation.staleVersionTitle',
+            'Re-propose required',
+          )}
+        </AlertTitle>
+        <AlertDescription>
+          <p>
+            {t(
+              '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.',
+            )}
+          </p>
+          {failedRecords.length > 0 ? (
+            <ul className="mt-2 list-disc pl-5 text-xs">
+              {failedRecords.map((record, idx) => (
+                <li
+                  key={`${record.recordId ?? idx}`}
+                  data-ai-confirmation-stale-record={record.recordId ?? ''}
+                >
+                  <span className="font-mono">{record.recordId ?? '—'}</span>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (code === 'schema_drift') {
+    return (
+      <Alert
+        variant="warning"
+        className="mt-3"
+        data-ai-confirmation-error="schema_drift"
+      >
+        <AlertTriangle className="size-4" aria-hidden />
+        <AlertTitle>
+          {t(
+            'ai_assistant.chat.mutation_cards.confirmation.schemaDriftTitle',
+            'Schema changed',
+          )}
+        </AlertTitle>
+        <AlertDescription>
+          {t(
+            'ai_assistant.chat.mutation_cards.confirmation.schemaDriftBody',
+            'The tool signature changed since this preview was generated. Ask the assistant to re-propose the change.',
+          )}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (code === 'invalid_status') {
+    return (
+      <Alert
+        variant="warning"
+        className="mt-3"
+        data-ai-confirmation-error="invalid_status"
+      >
+        <AlertTriangle className="size-4" aria-hidden />
+        <AlertTitle>
+          {t(
+            'ai_assistant.chat.mutation_cards.confirmation.invalidStatusTitle',
+            'Action already resolved',
+          )}
+        </AlertTitle>
+        <AlertDescription>
+          {t(
+            'ai_assistant.chat.mutation_cards.confirmation.invalidStatusBody',
+            'This action has already been confirmed, cancelled, or executed.',
+          )}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  return (
+    <Alert variant="destructive" className="mt-3" data-ai-confirmation-error={code}>
+      <AlertTriangle className="size-4" aria-hidden />
+      <AlertTitle>
+        {t('ai_assistant.chat.mutation_cards.confirmation.errorTitle', 'Confirm failed')}
+      </AlertTitle>
+      <AlertDescription>
+        <span className="mr-2 font-mono text-xs">{code}</span>
+        <span>{error.message}</span>
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+export default ConfirmationCard