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

package/src/ai/parts/types.ts

@@ -0,0 +1,84 @@
+/**
+ * Shared props + payload shapes for the Phase 3 mutation-approval cards
+ * (Step 5.10).
+ *
+ * The cards render the server-emitted `AiPendingAction` row via the
+ * `@open-mercato/ai-assistant` serializer. Re-declared here by structure
+ * rather than imported to keep `packages/ui` free of server-only imports.
+ * The shape mirrors `SerializedPendingAction` from
+ * `@open-mercato/ai-assistant/modules/ai_assistant/lib/pending-action-client`.
+ */
+
+export type AiPendingActionCardStatus =
+  | 'pending'
+  | 'confirmed'
+  | 'cancelled'
+  | 'expired'
+  | 'executing'
+  | 'failed'
+
+export type AiPendingActionCardFieldDiff = {
+  field: string
+  before: unknown
+  after: unknown
+}
+
+export type AiPendingActionCardRecordDiff = {
+  recordId: string
+  entityType: string
+  label: string
+  fieldDiff: AiPendingActionCardFieldDiff[]
+  recordVersion?: string | null
+  attachmentIds?: string[]
+}
+
+export type AiPendingActionCardFailedRecord = {
+  recordId: string
+  error: { code: string; message: string }
+}
+
+export type AiPendingActionCardExecutionErrorDetails = {
+  issues?: Array<{
+    path?: (string | number)[]
+    message?: string
+    code?: string
+    expected?: string
+    received?: string
+  }>
+  fieldErrors?: Record<string, string[]>
+  cause?: unknown
+  [key: string]: unknown
+}
+
+export type AiPendingActionCardExecutionResult = {
+  recordId?: string
+  commandName?: string
+  error?: {
+    code: string
+    message: string
+    name?: string
+    details?: AiPendingActionCardExecutionErrorDetails
+    input?: unknown
+    stack?: string
+  }
+}
+
+export interface AiPendingActionCardAction {
+  id: string
+  agentId: string
+  toolName: string
+  status: AiPendingActionCardStatus
+  fieldDiff: AiPendingActionCardFieldDiff[]
+  records: AiPendingActionCardRecordDiff[] | null
+  failedRecords: AiPendingActionCardFailedRecord[] | null
+  sideEffectsSummary: string | null
+  attachmentIds: string[]
+  targetEntityType: string | null
+  targetRecordId: string | null
+  recordVersion: string | null
+  executionResult: AiPendingActionCardExecutionResult | null
+  createdAt: string
+  expiresAt: string
+  resolvedAt: string | null
+  resolvedByUserId: string | null
+}

package/src/ai/parts/useAiPendingActionPolling.ts

@@ -0,0 +1,210 @@
+"use client"
+
+import * as React from 'react'
+import { apiCallOrThrow } from '../../backend/utils/apiCall'
+import type { AiPendingActionCardAction, AiPendingActionCardStatus } from './types'
+
+/**
+ * Shared polling hook for the Phase 3 mutation-approval cards (Step 5.10).
+ *
+ * Responsibilities:
+ * - Fetch `GET /api/ai_assistant/ai/actions/:id` on mount, even when the
+ *   server previously streamed a preview card. This is the "reconnect" path:
+ *   after a page reload or navigation away+back, the card recovers the
+ *   current pending-action state instead of staying blank.
+ * - Poll every 3 seconds while the status is non-terminal
+ *   (`pending` / `executing`). Terminal states (`confirmed`, `cancelled`,
+ *   `failed`, `expired`) stop polling.
+ * - Expose a `refresh()` force-fetch helper the confirmation card uses after
+ *   a confirm POST races with the polling loop.
+ *
+ * The hook owns a single `setInterval`/`setTimeout` — unmounting clears
+ * every outstanding timer. This is required for the Jest fake-timers
+ * "mount, unmount mid-poll" test contract.
+ */
+
+const TERMINAL_STATUSES: ReadonlyArray<AiPendingActionCardStatus> = [
+  'confirmed',
+  'cancelled',
+  'failed',
+  'expired',
+]
+
+function isTerminal(status: AiPendingActionCardStatus | null): boolean {
+  if (!status) return false
+  return TERMINAL_STATUSES.includes(status)
+}
+
+export interface UseAiPendingActionPollingOptions {
+  pendingActionId: string
+  /**
+   * Poll interval in ms while the status is non-terminal. Defaults to 3000.
+   */
+  intervalMs?: number
+  /**
+   * Endpoint base. Override to point at a mock during tests.
+   */
+  endpoint?: string
+  /**
+   * When true, the hook does NOT schedule any network activity. Used by the
+   * result card which already holds a terminal state and only needs to read
+   * what the preview card fetched.
+   */
+  disabled?: boolean
+}
+
+export interface AiPendingActionFetchResult {
+  pendingAction: AiPendingActionCardAction | null
+  error?: { code?: string; message: string } | null
+}
+
+export interface UseAiPendingActionPollingResult {
+  action: AiPendingActionCardAction | null
+  status: AiPendingActionCardStatus | null
+  isPolling: boolean
+  error: { code?: string; message: string } | null
+  refresh: () => Promise<AiPendingActionCardAction | null>
+}
+
+async function fetchPendingAction(
+  pendingActionId: string,
+  endpoint: string,
+): Promise<AiPendingActionFetchResult> {
+  const url = `${endpoint}/${encodeURIComponent(pendingActionId)}`
+  const call = await apiCallOrThrow<unknown>(url, { method: 'GET' })
+  const body = call.result as
+    | (Partial<AiPendingActionCardAction> & {
+        pendingAction?: AiPendingActionCardAction
+        error?: string
+        code?: string
+      })
+    | null
+    | undefined
+
+  // The GET route returns the bare action object (`serializePendingActionForClient(row)`),
+  // but earlier client code expected it under a `pendingAction` envelope.
+  // Accept BOTH shapes so the cards work whether the dispatcher wraps or
+  // not — bare-object payloads were the actual cause of empty
+  // `fieldDiff` and missing `executionResult.error` displays in
+  // MutationPreviewCard / ConfirmationCard / MutationResultCard.
+  if (body && typeof body === 'object') {
+    if (body.pendingAction) {
+      return { pendingAction: body.pendingAction, error: null }
+    }
+    if (
+      typeof (body as Partial<AiPendingActionCardAction>).id === 'string' &&
+      typeof (body as Partial<AiPendingActionCardAction>).status === 'string'
+    ) {
+      return { pendingAction: body as AiPendingActionCardAction, error: null }
+    }
+    if (body.error) {
+      return {
+        pendingAction: null,
+        error: { message: body.error, code: body.code },
+      }
+    }
+  }
+  return { pendingAction: null, error: null }
+}
+
+export function useAiPendingActionPolling(
+  options: UseAiPendingActionPollingOptions,
+): UseAiPendingActionPollingResult {
+  const {
+    pendingActionId,
+    intervalMs = 3000,
+    endpoint = '/api/ai_assistant/ai/actions',
+    disabled = false,
+  } = options
+
+  const [action, setAction] = React.useState<AiPendingActionCardAction | null>(null)
+  const [error, setError] = React.useState<{ code?: string; message: string } | null>(null)
+  const [isPolling, setIsPolling] = React.useState<boolean>(!disabled)
+
+  const mountedRef = React.useRef(true)
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const statusRef = React.useRef<AiPendingActionCardStatus | null>(null)
+
+  const clearTimer = React.useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+
+  const refresh = React.useCallback(async (): Promise<AiPendingActionCardAction | null> => {
+    if (!pendingActionId) return null
+    try {
+      const result = await fetchPendingAction(pendingActionId, endpoint)
+      if (!mountedRef.current) return result.pendingAction ?? null
+      if (result.error) {
+        setError(result.error)
+      } else {
+        setError(null)
+      }
+      if (result.pendingAction) {
+        setAction(result.pendingAction)
+        statusRef.current = result.pendingAction.status
+      }
+      return result.pendingAction
+    } catch (err) {
+      if (!mountedRef.current) return null
+      const message = err instanceof Error ? err.message : 'Failed to load pending action.'
+      setError({ message })
+      return null
+    }
+  }, [endpoint, pendingActionId])
+
+  const scheduleNext = React.useCallback(() => {
+    clearTimer()
+    if (!mountedRef.current) return
+    if (disabled) {
+      setIsPolling(false)
+      return
+    }
+    if (isTerminal(statusRef.current)) {
+      setIsPolling(false)
+      return
+    }
+    setIsPolling(true)
+    timerRef.current = setTimeout(async () => {
+      await refresh()
+      scheduleNext()
+    }, intervalMs)
+  }, [clearTimer, disabled, intervalMs, refresh])
+
+  React.useEffect(() => {
+    mountedRef.current = true
+    statusRef.current = null
+    if (disabled) {
+      setIsPolling(false)
+      return () => {
+        mountedRef.current = false
+        clearTimer()
+      }
+    }
+    setIsPolling(true)
+    // Always fetch on mount — the "reconnect behavior" guarantee.
+    void refresh().then(() => {
+      if (!mountedRef.current) return
+      scheduleNext()
+    })
+    return () => {
+      mountedRef.current = false
+      clearTimer()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pendingActionId, endpoint, intervalMs, disabled])
+
+  const status = action?.status ?? null
+
+  return {
+    action,
+    status,
+    isPolling: isPolling && !isTerminal(status),
+    error,
+    refresh,
+  }
+}
+
+export default useAiPendingActionPolling

package/src/ai/records/ActivityCard.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from 'react'
+import {
+  Activity as ActivityIcon,
+  CalendarClock,
+  CheckCircle2,
+  ListChecks,
+  Mail,
+  MessageSquare,
+  Phone,
+  StickyNote,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
+import type { ActivityRecordPayload } from './types'
+
+function formatDate(value: string | null | undefined): string | null {
+  if (!value) return null
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return value
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function pickActivityIcon(type: string | null | undefined): LucideIcon {
+  if (!type) return ActivityIcon
+  const t = type.toLowerCase()
+  if (t.includes('call')) return Phone
+  if (t.includes('mail') || t.includes('email')) return Mail
+  if (t.includes('meeting') || t.includes('chat')) return MessageSquare
+  if (t.includes('task') || t.includes('todo')) return ListChecks
+  if (t.includes('note')) return StickyNote
+  if (t.includes('done') || t.includes('complete')) return CheckCircle2
+  return ActivityIcon
+}
+
+export interface ActivityCardProps extends ActivityRecordPayload {}
+
+export function ActivityCard(props: ActivityCardProps) {
+  const t = useT()
+  const Icon = pickActivityIcon(props.type)
+  const status = props.status
+    ? { label: props.status, variant: statusToTagVariant(props.status) }
+    : null
+  const dueDate = formatDate(props.dueDate)
+  const completedAt = formatDate(props.completedAt)
+
+  const items = [
+    props.type ? { label: t('ai_assistant.chat.records.fields.type', 'Type'), value: props.type } : null,
+    dueDate
+      ? {
+          label: t('ai_assistant.chat.records.fields.due', 'Due'),
+          value: (
+            <span className="inline-flex items-center gap-1">
+              <CalendarClock className="size-3 text-muted-foreground" aria-hidden />
+              {dueDate}
+            </span>
+          ),
+        }
+      : null,
+    completedAt
+      ? {
+          label: t('ai_assistant.chat.records.fields.completed', 'Completed'),
+          value: (
+            <span className="inline-flex items-center gap-1">
+              <CheckCircle2 className="size-3 text-status-success-icon" aria-hidden />
+              {completedAt}
+            </span>
+          ),
+        }
+      : null,
+    props.relatedTo ? { label: t('ai_assistant.chat.records.fields.related', 'Related'), value: props.relatedTo } : null,
+    props.ownerName ? { label: t('ai_assistant.chat.records.fields.owner', 'Owner'), value: props.ownerName } : null,
+  ].filter(Boolean) as { label: string; value: React.ReactNode }[]
+
+  const subtitle = [props.type, props.relatedTo].filter(Boolean).join(' • ')
+
+  return (
+    <RecordCardShell
+      kindLabel={t('ai_assistant.chat.records.kinds.activity', 'Activity')}
+      kindIcon={<Icon className="size-4" aria-hidden />}
+      title={props.title}
+      subtitle={subtitle || undefined}
+      status={status}
+      href={props.href}
+      id={props.id}
+      className={props.className}
+      dataKind="activity"
+    >
+      <div className="space-y-2">
+        <KeyValueList items={items} />
+        {props.description ? (
+          <p className="line-clamp-3 text-muted-foreground">{props.description}</p>
+        ) : null}
+        {props.tags && props.tags.length > 0 ? <TagRow tags={props.tags} /> : null}
+      </div>
+    </RecordCardShell>
+  )
+}
+
+export default ActivityCard

package/src/ai/records/CompanyCard.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from 'react'
+import { Building2, Globe, Mail, MapPin, Phone } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar } from '../../primitives/avatar'
+import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
+import type { CompanyRecordPayload } from './types'
+
+export interface CompanyCardProps extends CompanyRecordPayload {}
+
+function normalizeWebsite(value: string): { href: string; label: string } {
+  const trimmed = value.trim()
+  if (/^https?:\/\//i.test(trimmed)) {
+    return { href: trimmed, label: trimmed.replace(/^https?:\/\//i, '') }
+  }
+  return { href: `https://${trimmed}`, label: trimmed }
+}
+
+export function CompanyCard(props: CompanyCardProps) {
+  const t = useT()
+  const status = props.status
+    ? { label: props.status, variant: statusToTagVariant(props.status) }
+    : null
+
+  const websiteEntry = props.website ? normalizeWebsite(props.website) : null
+  const location = [props.city, props.country].filter(Boolean).join(', ')
+
+  const items = [
+    props.industry ? { label: t('ai_assistant.chat.records.fields.industry', 'Industry'), value: props.industry } : null,
+    websiteEntry
+      ? {
+          label: t('ai_assistant.chat.records.fields.website', 'Website'),
+          value: (
+            <a
+              href={websiteEntry.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {websiteEntry.label}
+            </a>
+          ),
+        }
+      : null,
+    props.email
+      ? {
+          label: t('ai_assistant.chat.records.fields.email', 'Email'),
+          value: (
+            <a
+              href={`mailto:${props.email}`}
+              className="text-primary hover:underline"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {props.email}
+            </a>
+          ),
+        }
+      : null,
+    props.phone ? { label: t('ai_assistant.chat.records.fields.phone', 'Phone'), value: props.phone } : null,
+    location ? { label: t('ai_assistant.chat.records.fields.location', 'Location'), value: location } : null,
+    props.ownerName ? { label: t('ai_assistant.chat.records.fields.owner', 'Owner'), value: props.ownerName } : null,
+  ].filter(Boolean) as { label: string; value: React.ReactNode }[]
+
+  return (
+    <RecordCardShell
+      kindLabel={t('ai_assistant.chat.records.kinds.company', 'Company')}
+      kindIcon={<Building2 className="size-4" aria-hidden />}
+      leading={<Avatar label={props.name} src={props.logoUrl ?? undefined} size="md" variant="monochrome" />}
+      title={props.name}
+      subtitle={[props.industry, location].filter(Boolean).join(' • ') || undefined}
+      status={status}
+      href={props.href}
+      id={props.id}
+      className={props.className}
+      dataKind="company"
+    >
+      <div className="space-y-2">
+        <KeyValueList items={items} />
+        {props.tags && props.tags.length > 0 ? <TagRow tags={props.tags} /> : null}
+      </div>
+    </RecordCardShell>
+  )
+}
+
+export default CompanyCard
+
+export { Building2, Globe, Mail, MapPin, Phone }

package/src/ai/records/DealCard.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import * as React from 'react'
+import { Briefcase, Building2, CalendarDays, CircleDollarSign, User } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
+import type { DealRecordPayload } from './types'
+
+function formatAmount(amount: string | number | null | undefined, currency?: string | null): string | null {
+  if (amount === null || amount === undefined || amount === '') return null
+  const value = typeof amount === 'number' ? amount : Number(amount)
+  if (!Number.isFinite(value)) {
+    return typeof amount === 'string' ? amount : null
+  }
+  const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined
+  try {
+    if (code) {
+      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(value)
+    }
+  } catch {
+    // fall through to fallback
+  }
+  const formatted = new Intl.NumberFormat().format(value)
+  return code ? `${formatted} ${code}` : formatted
+}
+
+function formatDate(value: string | null | undefined): string | null {
+  if (!value) return null
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return value
+  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+export interface DealCardProps extends DealRecordPayload {}
+
+export function DealCard(props: DealCardProps) {
+  const t = useT()
+  const status = props.status
+    ? { label: props.status, variant: statusToTagVariant(props.status) }
+    : null
+  const stage = props.stage && props.stage !== props.status ? props.stage : null
+  const amount = formatAmount(props.amount, props.currency)
+  const closeDate = formatDate(props.closeDate)
+
+  const items = [
+    stage ? { label: t('ai_assistant.chat.records.fields.stage', 'Stage'), value: stage } : null,
+    amount ? { label: t('ai_assistant.chat.records.fields.amount', 'Amount'), value: <span className="font-medium">{amount}</span> } : null,
+    closeDate ? { label: t('ai_assistant.chat.records.fields.close', 'Close'), value: closeDate } : null,
+    props.companyName ? { label: t('ai_assistant.chat.records.fields.company', 'Company'), value: props.companyName } : null,
+    props.personName ? { label: t('ai_assistant.chat.records.fields.contact', 'Contact'), value: props.personName } : null,
+    props.ownerName ? { label: t('ai_assistant.chat.records.fields.owner', 'Owner'), value: props.ownerName } : null,
+  ].filter(Boolean) as { label: string; value: React.ReactNode }[]
+
+  const subtitleParts: string[] = []
+  if (props.companyName) subtitleParts.push(props.companyName)
+  if (props.personName && !props.companyName) subtitleParts.push(props.personName)
+  if (amount) subtitleParts.push(amount)
+
+  return (
+    <RecordCardShell
+      kindLabel={t('ai_assistant.chat.records.kinds.deal', 'Deal')}
+      kindIcon={<Briefcase className="size-4" aria-hidden />}
+      title={props.title}
+      subtitle={subtitleParts.join(' • ')}
+      status={status}
+      href={props.href}
+      id={props.id}
+      className={props.className}
+      dataKind="deal"
+    >
+      <div className="space-y-2">
+        <KeyValueList items={items} />
+        {props.description ? (
+          <p className="line-clamp-2 text-muted-foreground">{props.description}</p>
+        ) : null}
+        {props.tags && props.tags.length > 0 ? <TagRow tags={props.tags} /> : null}
+      </div>
+    </RecordCardShell>
+  )
+}
+
+export default DealCard
+
+// Re-export icons consumers may want when extending the layout
+export { Briefcase, Building2, CalendarDays, CircleDollarSign, User }

package/src/ai/records/PersonCard.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from 'react'
+import { Mail, Phone, User as UserIcon } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar } from '../../primitives/avatar'
+import { KeyValueList, RecordCardShell, TagRow, statusToTagVariant } from './RecordCardShell'
+import type { PersonRecordPayload } from './types'
+
+export interface PersonCardProps extends PersonRecordPayload {}
+
+export function PersonCard(props: PersonCardProps) {
+  const t = useT()
+  const status = props.status
+    ? { label: props.status, variant: statusToTagVariant(props.status) }
+    : null
+
+  const items = [
+    props.title ? { label: t('ai_assistant.chat.records.fields.title', 'Title'), value: props.title } : null,
+    props.companyName ? { label: t('ai_assistant.chat.records.fields.company', 'Company'), value: props.companyName } : null,
+    props.email
+      ? {
+          label: t('ai_assistant.chat.records.fields.email', 'Email'),
+          value: (
+            <a
+              href={`mailto:${props.email}`}
+              className="text-primary hover:underline"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {props.email}
+            </a>
+          ),
+        }
+      : null,
+    props.phone
+      ? {
+          label: t('ai_assistant.chat.records.fields.phone', 'Phone'),
+          value: (
+            <a
+              href={`tel:${props.phone.replace(/\s+/g, '')}`}
+              className="text-primary hover:underline"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {props.phone}
+            </a>
+          ),
+        }
+      : null,
+    props.ownerName ? { label: t('ai_assistant.chat.records.fields.owner', 'Owner'), value: props.ownerName } : null,
+  ].filter(Boolean) as { label: string; value: React.ReactNode }[]
+
+  const subtitle = [props.title, props.companyName].filter(Boolean).join(' • ')
+
+  return (
+    <RecordCardShell
+      kindLabel={t('ai_assistant.chat.records.kinds.person', 'Person')}
+      kindIcon={<UserIcon className="size-4" aria-hidden />}
+      leading={<Avatar label={props.name} src={props.avatarUrl ?? undefined} size="md" />}
+      title={props.name}
+      subtitle={subtitle || undefined}
+      status={status}
+      href={props.href}
+      id={props.id}
+      className={props.className}
+      dataKind="person"
+    >
+      <div className="space-y-2">
+        <KeyValueList items={items} />
+        {props.tags && props.tags.length > 0 ? <TagRow tags={props.tags} /> : null}
+      </div>
+    </RecordCardShell>
+  )
+}
+
+export default PersonCard
+
+export { Mail, Phone, UserIcon }