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

package/src/ai/__tests__/AiChat.registry.test.tsx

@@ -0,0 +1,213 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// Polyfill what jsdom lacks before AiChat imports pull in anything stream-y.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nodeUtil = require('node:util') as typeof import('node:util')
+if (typeof globalThis.TextEncoder === 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(globalThis as any).TextEncoder = nodeUtil.TextEncoder
+}
+if (typeof globalThis.TextDecoder === 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(globalThis as any).TextDecoder =
+    nodeUtil.TextDecoder as unknown as typeof TextDecoder
+}
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nodeStreamWeb = require('node:stream/web') as typeof import('node:stream/web')
+if (typeof (globalThis as unknown as { ReadableStream?: unknown }).ReadableStream === 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(globalThis as any).ReadableStream = nodeStreamWeb.ReadableStream
+}
+
+import * as React from 'react'
+import { screen, within } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+jest.mock('@open-mercato/ai-assistant/modules/ai_assistant/lib/agent-transport', () => ({
+  createAiAgentTransport: jest.fn(() => ({
+    sendMessages: jest.fn(),
+    reconnectToStream: jest.fn(),
+  })),
+}))
+
+jest.mock('../../backend/utils/api', () => ({
+  apiFetch: jest.fn(),
+}))
+
+import { AiChat } from '../AiChat'
+import {
+  createAiUiPartRegistry,
+  defaultAiUiPartRegistry,
+  resetAiUiPartRegistryForTests,
+} from '../ui-part-registry'
+
+const dict = {
+  'ai_assistant.chat.assistantRoleLabel': 'Assistant',
+  'ai_assistant.chat.cancel': 'Cancel streaming response',
+  'ai_assistant.chat.composerLabel': 'Message composer',
+  'ai_assistant.chat.composerPlaceholder': 'Message the AI agent...',
+  'ai_assistant.chat.debugPanelTitle': 'Debug panel',
+  'ai_assistant.chat.emptyTranscript':
+    'No messages yet. Ask the agent anything to get started.',
+  'ai_assistant.chat.errorTitle': 'Agent dispatch failed',
+  'ai_assistant.chat.regionLabel': 'AI chat',
+  'ai_assistant.chat.send': 'Send message',
+  'ai_assistant.chat.shortcutHint':
+    'Press Cmd/Ctrl+Enter to send, Escape to cancel.',
+  'ai_assistant.chat.thinking': 'Thinking...',
+  'ai_assistant.chat.transcriptLabel': 'Chat transcript',
+  'ai_assistant.chat.pending_phase3.body':
+    'This interactive card will land in Phase 3 of the unified AI framework.',
+  'ai_assistant.chat.pending_phase3.title': 'Mutation approval card pending',
+  'ai_assistant.chat.uiPartPending': 'Pending UI part:',
+  'ai_assistant.chat.userRoleLabel': 'You',
+}
+
+describe('<AiChat> × UI-part registry', () => {
+  beforeEach(() => {
+    resetAiUiPartRegistryForTests()
+  })
+
+  afterAll(() => {
+    resetAiUiPartRegistryForTests()
+  })
+
+  it('renders the Phase 3 placeholder for a reserved id on a scoped registry without live seeding', () => {
+    // Step 5.10 flipped the DEFAULT registry over to live approval cards,
+    // so we use a scoped registry (the placeholder default) to exercise the
+    // pending-chip renderer path.
+    const scoped = createAiUiPartRegistry()
+    renderWithProviders(
+      <AiChat
+        agent="customers.account_assistant"
+        registry={scoped}
+        uiParts={[{ componentId: 'mutation-preview-card', payload: { foo: 1 } }]}
+      />,
+      { dict },
+    )
+    const region = screen.getByRole('region', { name: 'AI chat' })
+    const placeholder = region.querySelector(
+      '[data-ai-ui-part-pending-phase3="mutation-preview-card"]',
+    )
+    expect(placeholder).not.toBeNull()
+    expect(placeholder?.textContent).toContain('Mutation approval card pending')
+  })
+
+  it('renders a registered custom component instead of the placeholder', () => {
+    function RealCard({ componentId }: { componentId: string }) {
+      return (
+        <div data-testid="real-mutation-preview">REAL:{componentId}</div>
+      )
+    }
+    const scoped = createAiUiPartRegistry()
+    scoped.register('mutation-preview-card', RealCard)
+
+    renderWithProviders(
+      <AiChat
+        agent="customers.account_assistant"
+        registry={scoped}
+        uiParts={[{ componentId: 'mutation-preview-card' }]}
+      />,
+      { dict },
+    )
+
+    expect(screen.getByTestId('real-mutation-preview')).toHaveTextContent(
+      'REAL:mutation-preview-card',
+    )
+    // The placeholder is NOT rendered when a real component is registered.
+    expect(
+      document.querySelector(
+        '[data-ai-ui-part-pending-phase3="mutation-preview-card"]',
+      ),
+    ).toBeNull()
+  })
+
+  it('renders the neutral chip (not the Phase 3 placeholder) for unknown non-reserved ids', () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    try {
+      renderWithProviders(
+        <AiChat
+          agent="customers.account_assistant"
+          uiParts={[{ componentId: 'not-a-real-id' }]}
+        />,
+        { dict },
+      )
+
+      expect(
+        document.querySelector('[data-ai-ui-part-placeholder="not-a-real-id"]'),
+      ).not.toBeNull()
+      expect(
+        document.querySelector(
+          '[data-ai-ui-part-pending-phase3="not-a-real-id"]',
+        ),
+      ).toBeNull()
+      expect(warnSpy).toHaveBeenCalled()
+    } finally {
+      warnSpy.mockRestore()
+    }
+  })
+
+  it('two <AiChat> instances with different registries do not leak registrations', () => {
+    function RedCard({ componentId }: { componentId: string }) {
+      return <div data-testid={`red-${componentId}`}>RED</div>
+    }
+    function BlueCard({ componentId }: { componentId: string }) {
+      return <div data-testid={`blue-${componentId}`}>BLUE</div>
+    }
+
+    const registryA = createAiUiPartRegistry()
+    registryA.register('confirmation-card', RedCard)
+    const registryB = createAiUiPartRegistry()
+    registryB.register('confirmation-card', BlueCard)
+
+    const { container } = renderWithProviders(
+      <div>
+        <div data-testid="host-a">
+          <AiChat
+            agent="customers.account_assistant"
+            registry={registryA}
+            uiParts={[{ componentId: 'confirmation-card' }]}
+          />
+        </div>
+        <div data-testid="host-b">
+          <AiChat
+            agent="customers.account_assistant"
+            registry={registryB}
+            uiParts={[{ componentId: 'confirmation-card' }]}
+          />
+        </div>
+      </div>,
+      { dict },
+    )
+
+    const hostA = within(screen.getByTestId('host-a'))
+    const hostB = within(screen.getByTestId('host-b'))
+    expect(hostA.getByTestId('red-confirmation-card')).toBeInTheDocument()
+    expect(hostB.getByTestId('blue-confirmation-card')).toBeInTheDocument()
+    expect(container.querySelectorAll('[data-testid="red-confirmation-card"]')).toHaveLength(1)
+    expect(container.querySelectorAll('[data-testid="blue-confirmation-card"]')).toHaveLength(1)
+
+    // The scoped registries never wrote through to the default registry.
+    expect(defaultAiUiPartRegistry.resolve('confirmation-card')).not.toBe(RedCard)
+    expect(defaultAiUiPartRegistry.resolve('confirmation-card')).not.toBe(BlueCard)
+  })
+
+  it('falls back to the default registry when no registry prop is provided', () => {
+    function GlobalCard() {
+      return <div data-testid="global-card">GLOBAL</div>
+    }
+    defaultAiUiPartRegistry.register('mutation-result-card', GlobalCard)
+
+    renderWithProviders(
+      <AiChat
+        agent="customers.account_assistant"
+        uiParts={[{ componentId: 'mutation-result-card' }]}
+      />,
+      { dict },
+    )
+
+    expect(screen.getByTestId('global-card')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,257 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// jsdom does not ship TextEncoder/TextDecoder/Response globals — polyfill from
+// the Node util + undici modules before any consumer module imports them.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nodeUtil = require('node:util') as typeof import('node:util')
+if (typeof globalThis.TextEncoder === 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(globalThis as any).TextEncoder = nodeUtil.TextEncoder
+}
+if (typeof globalThis.TextDecoder === 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(globalThis as any).TextDecoder = nodeUtil.TextDecoder as unknown as typeof TextDecoder
+}
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nodeStreamWeb = require('node:stream/web') as typeof import('node:stream/web')
+if (typeof (globalThis as unknown as { ReadableStream?: unknown }).ReadableStream === 'undefined') {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(globalThis as any).ReadableStream = nodeStreamWeb.ReadableStream
+}
+
+import * as React from 'react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+jest.mock('@open-mercato/ai-assistant/modules/ai_assistant/lib/agent-transport', () => ({
+  createAiAgentTransport: jest.fn(() => ({
+    sendMessages: jest.fn(),
+    reconnectToStream: jest.fn(),
+  })),
+}))
+
+jest.mock('../../backend/utils/api', () => ({
+  apiFetch: jest.fn(),
+}))
+
+import { apiFetch } from '../../backend/utils/api'
+import { AiChat } from '../AiChat'
+
+const dict = {
+  'ai_assistant.chat.assistantRoleLabel': 'Assistant',
+  'ai_assistant.chat.cancel': 'Cancel streaming response',
+  'ai_assistant.chat.composerLabel': 'Message composer',
+  'ai_assistant.chat.composerPlaceholder': 'Message the AI agent...',
+  'ai_assistant.chat.debugPanelTitle': 'Debug panel',
+  'ai_assistant.chat.emptyTranscript':
+    'No messages yet. Ask the agent anything to get started.',
+  'ai_assistant.chat.errorTitle': 'Agent dispatch failed',
+  'ai_assistant.chat.regionLabel': 'AI chat',
+  'ai_assistant.chat.send': 'Send message',
+  'ai_assistant.chat.shortcutHint':
+    'Press Cmd/Ctrl+Enter to send, Escape to cancel.',
+  'ai_assistant.chat.thinking': 'Thinking...',
+  'ai_assistant.chat.transcriptLabel': 'Chat transcript',
+  'ai_assistant.chat.uiPartPending': 'Pending UI part:',
+  'ai_assistant.chat.userRoleLabel': 'You',
+}
+
+// Minimal Response-like shape honouring only the methods the hook calls:
+// `ok`, `status`, `body`, `clone()`, `json()`, `text()`.
+type ResponseLike = {
+  ok: boolean
+  status: number
+  body: ReadableStream<Uint8Array> | null
+  clone: () => ResponseLike
+  json: () => Promise<unknown>
+  text: () => Promise<string>
+}
+
+function createStreamingResponse(chunks: string[]): ResponseLike {
+  const encoder = new TextEncoder()
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      for (const chunk of chunks) {
+        controller.enqueue(encoder.encode(chunk))
+      }
+      controller.close()
+    },
+  })
+  const raw = chunks.join('')
+  const self: ResponseLike = {
+    ok: true,
+    status: 200,
+    body: stream,
+    clone: () => ({ ...self, body: null }),
+    json: async () => ({}),
+    text: async () => raw,
+  }
+  return self
+}
+
+function createErrorResponse(status: number, payload: Record<string, unknown>): ResponseLike {
+  const jsonText = JSON.stringify(payload)
+  const self: ResponseLike = {
+    ok: false,
+    status,
+    body: null,
+    clone: () => ({ ...self }),
+    json: async () => payload,
+    text: async () => jsonText,
+  }
+  return self
+}
+
+describe('<AiChat>', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the composer with the i18n placeholder and region labels', () => {
+    renderWithProviders(<AiChat agent="customers.account_assistant" />, { dict })
+
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    expect(textarea.placeholder).toBe('Message the AI agent...')
+    expect(screen.getByRole('log', { name: 'Chat transcript' })).toBeInTheDocument()
+    expect(screen.getByRole('region', { name: 'AI chat' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Send message' })).toBeDisabled()
+  })
+
+  it('submits the message on Cmd+Enter and streams assistant text into the transcript', async () => {
+    const fetchMock = apiFetch as unknown as jest.Mock
+    fetchMock.mockResolvedValueOnce(
+      createStreamingResponse(['Hello', ', ', 'world!']),
+    )
+
+    renderWithProviders(<AiChat agent="customers.account_assistant" />, { dict })
+
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'Hi there' } })
+
+    await act(async () => {
+      fireEvent.keyDown(textarea, {
+        key: 'Enter',
+        metaKey: true,
+      })
+    })
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1)
+    })
+    const [url, init] = fetchMock.mock.calls[0]
+    expect(String(url)).toContain('/api/ai_assistant/ai/chat')
+    expect(String(url)).toContain('agent=customers.account_assistant')
+    expect(init.method).toBe('POST')
+    const parsedBody = JSON.parse(init.body as string)
+    expect(parsedBody.messages[0]).toMatchObject({ role: 'user', content: 'Hi there' })
+
+    await waitFor(() => {
+      expect(screen.getByText('Hello, world!')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Hi there')).toBeInTheDocument()
+  })
+
+  it('surfaces dispatcher error envelopes via Alert and onError callback', async () => {
+    const fetchMock = apiFetch as unknown as jest.Mock
+    fetchMock.mockResolvedValueOnce(
+      createErrorResponse(404, {
+        error: 'Unknown agent "bogus.agent"',
+        code: 'agent_unknown',
+      }),
+    )
+
+    const onError = jest.fn()
+    renderWithProviders(
+      <AiChat agent="bogus.agent" onError={onError} />,
+      { dict },
+    )
+
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'test' } })
+    await act(async () => {
+      fireEvent.keyDown(textarea, { key: 'Enter', ctrlKey: true })
+    })
+
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledWith(
+        expect.objectContaining({
+          code: 'agent_unknown',
+          message: expect.stringContaining('Unknown agent'),
+        }),
+      )
+    })
+
+    expect(screen.getByText('Agent dispatch failed')).toBeInTheDocument()
+    expect(screen.getByText(/Unknown agent/)).toBeInTheDocument()
+    expect(screen.getByText('agent_unknown')).toBeInTheDocument()
+  })
+
+  it('Escape aborts an in-flight streaming response', async () => {
+    const fetchMock = apiFetch as unknown as jest.Mock
+    // Build a stream we can keep open until the component aborts it.
+    let streamController: ReadableStreamDefaultController<Uint8Array> | null = null
+    const encoder = new TextEncoder()
+    const pendingStream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        streamController = controller
+        controller.enqueue(encoder.encode('partial'))
+      },
+      cancel() {
+        // no-op; act as if cancellation succeeds
+      },
+    })
+
+    fetchMock.mockImplementationOnce(async (_input: unknown, init: RequestInit) => {
+      const signal = init.signal as AbortSignal | undefined
+      if (signal) {
+        signal.addEventListener('abort', () => {
+          try {
+            streamController?.error(new DOMException('Aborted', 'AbortError'))
+          } catch {
+            // already closed
+          }
+        })
+      }
+      const responseLike: ResponseLike = {
+        ok: true,
+        status: 200,
+        body: pendingStream,
+        clone: () => ({
+          ok: true,
+          status: 200,
+          body: null,
+          clone: () => responseLike,
+          json: async () => ({}),
+          text: async () => '',
+        }),
+        json: async () => ({}),
+        text: async () => '',
+      }
+      return responseLike
+    })
+
+    renderWithProviders(<AiChat agent="customers.account_assistant" />, { dict })
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'stream please' } })
+    await act(async () => {
+      fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true })
+    })
+
+    // Wait for the partial chunk to show up so we are definitely streaming.
+    await waitFor(() => {
+      expect(screen.getByText('partial')).toBeInTheDocument()
+    })
+
+    await act(async () => {
+      fireEvent.keyDown(textarea, { key: 'Escape' })
+    })
+
+    // The assistant message keeps whatever we streamed so far but the thinking
+    // indicator should be gone (status === 'idle').
+    await waitFor(() => {
+      expect(screen.queryByText('Thinking...')).not.toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,124 @@
+/**
+ * @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'
+import { AiChatSessionsProvider } from '../AiChatSessions'
+import { AiDockProvider, useAiDock, type AiDockedAssistant } from '../AiDock'
+
+jest.mock('../AiChat', () => {
+  const ReactModule = require('react') as typeof import('react')
+  return {
+    AiChat: ({ agent }: { agent: string }) =>
+      ReactModule.createElement('div', {
+        'data-testid': 'ai-chat',
+        'data-agent': agent,
+      }),
+  }
+})
+
+const STORAGE_KEY = 'om-ai-dock-v1'
+
+const assistant: AiDockedAssistant = {
+  agent: 'customers.account_assistant',
+  label: 'CRM Assistant',
+  description: 'Customers',
+  pageContext: { view: 'customers.people.list' },
+  placeholder: 'Ask about customers...',
+  welcomeTitle: 'CRM Assistant',
+  welcomeDescription: 'Ask me anything about customers.',
+  suggestions: [
+    {
+      label: 'Summarize selected',
+      prompt: 'Summarize the selected customers.',
+      icon: <span>Icon</span>,
+    },
+  ],
+  contextItems: [{ label: '2 contacts selected' }],
+}
+
+function readStored(): Record<string, unknown> {
+  const raw = window.localStorage.getItem(STORAGE_KEY)
+  return raw ? JSON.parse(raw) as Record<string, unknown> : {}
+}
+
+function readStoredAssistant(): Record<string, unknown> | null {
+  const value = readStored().assistant
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+  return value as Record<string, unknown>
+}
+
+function DockButton() {
+  const dock = useAiDock()
+  return (
+    <button type="button" onClick={() => dock.dock(assistant)}>
+      Dock assistant
+    </button>
+  )
+}
+
+function Harness({ withButton = true }: { withButton?: boolean }) {
+  return (
+    <AiChatSessionsProvider>
+      <AiDockProvider>
+        {withButton ? <DockButton /> : null}
+        <main>Content</main>
+      </AiDockProvider>
+    </AiChatSessionsProvider>
+  )
+}
+
+describe('<AiDockProvider>', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+  })
+
+  afterEach(() => {
+    window.localStorage.clear()
+  })
+
+  it('persists the docked assistant and restores it after remount', async () => {
+    const { unmount } = renderWithProviders(<Harness />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Dock assistant' }))
+
+    expect(document.querySelector('[data-ai-dock-agent="customers.account_assistant"]')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(readStoredAssistant()?.agent).toBe('customers.account_assistant')
+    })
+
+    const storedAssistant = readStoredAssistant()
+    expect(storedAssistant?.label).toBe('CRM Assistant')
+    expect(storedAssistant?.pageContext).toEqual({ view: 'customers.people.list' })
+    expect(storedAssistant?.suggestions).toEqual([
+      { label: 'Summarize selected', prompt: 'Summarize the selected customers.' },
+    ])
+
+    unmount()
+    renderWithProviders(<Harness withButton={false} />)
+
+    await waitFor(() => {
+      expect(document.querySelector('[data-ai-dock-agent="customers.account_assistant"]')).toBeInTheDocument()
+    })
+  })
+
+  it('clears the persisted assistant when the dock is closed', async () => {
+    renderWithProviders(<Harness />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Dock assistant' }))
+    await waitFor(() => {
+      expect(readStoredAssistant()?.agent).toBe('customers.account_assistant')
+    })
+
+    const closeButton = document.querySelector('[data-ai-dock-close=""]')
+    expect(closeButton).toBeInstanceOf(HTMLElement)
+    fireEvent.click(closeButton as HTMLElement)
+
+    await waitFor(() => {
+      expect(readStoredAssistant()).toBeNull()
+    })
+    expect(document.querySelector('[data-ai-dock-panel=""]')).not.toBeInTheDocument()
+  })
+})