@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3256.1.fe3dec2464

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

@@ -0,0 +1,58 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { apiCall } from '../../backend/utils/apiCall'
+import { AiAssistantLauncher, AI_ASSISTANT_LAUNCHER_OPEN_EVENT } from '../AiAssistantLauncher'
+
+jest.mock('../../backend/utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+const apiCallMock = apiCall as unknown as jest.Mock
+
+describe('<AiAssistantLauncher>', () => {
+  beforeEach(() => {
+    apiCallMock.mockReset()
+    apiCallMock.mockImplementation(async (url: string) => {
+      if (url === '/api/ai_assistant/health') {
+        return { ok: true, result: { healthy: true } }
+      }
+      if (url === '/api/ai_assistant/ai/agents') {
+        return {
+          ok: true,
+          result: {
+            aiConfigured: true,
+            agents: [
+              {
+                id: 'catalog.catalog_assistant',
+                label: 'Catalog Assistant',
+                description: 'Explore catalog data',
+                mutationPolicy: 'read-only',
+              },
+            ],
+          },
+        }
+      }
+      throw new Error(`Unexpected apiCall: ${url}`)
+    })
+  })
+
+  it('opens the assistants picker when the global launcher event is dispatched', async () => {
+    renderWithProviders(<AiAssistantLauncher />)
+
+    await waitFor(() => {
+      expect(screen.getAllByRole('button', { name: 'Open AI assistant' }).length).toBeGreaterThan(0)
+    })
+
+    act(() => {
+      window.dispatchEvent(new CustomEvent(AI_ASSISTANT_LAUNCHER_OPEN_EVENT))
+    })
+
+    expect(await screen.findByRole('dialog', { name: 'AI assistants' })).toBeInTheDocument()
+    expect(screen.getByText('Catalog Assistant')).toBeInTheDocument()
+  })
+})

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

@@ -158,3 +158,19 @@ describe('<AiChat> conversationId threading (Step 5.15)', () => {
     expect(parsedBody.conversationId).toBe('conv-body-xyz')
   })
 })
+
+// <AiChat> mounts useAgentModels (Phase 4b) which hits /api/ai_assistant/ai/agents/<id>/models
+// on first render via apiCall. Stub apiCall with a no-providers response so this files
+// chat-flow assertions remain scoped to the dispatcher mock above.
+jest.mock('../../backend/utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    result: {
+      allowRuntimeModelOverride: false,
+      defaultProviderId: 'openai',
+      defaultModelId: 'gpt-5-mini',
+      providers: [],
+    },
+  })),
+}))

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

@@ -150,3 +150,19 @@ describe('<AiChat> debug panel (Step 4.6)', () => {
     ).toBeInTheDocument()
   })
 })
+
+// <AiChat> mounts useAgentModels (Phase 4b) which hits /api/ai_assistant/ai/agents/<id>/models
+// on first render via apiCall. Stub apiCall with a no-providers response so this files
+// chat-flow assertions remain scoped to the dispatcher mock above.
+jest.mock('../../backend/utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    result: {
+      allowRuntimeModelOverride: false,
+      defaultProviderId: 'openai',
+      defaultModelId: 'gpt-5-mini',
+      providers: [],
+    },
+  })),
+}))

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

@@ -211,3 +211,19 @@ describe('<AiChat> × UI-part registry', () => {
     expect(screen.getByTestId('global-card')).toBeInTheDocument()
   })
 })
+
+// <AiChat> mounts useAgentModels (Phase 4b) which hits /api/ai_assistant/ai/agents/<id>/models
+// on first render via apiCall. Stub apiCall with a no-providers response so this files
+// chat-flow assertions remain scoped to the dispatcher mock above.
+jest.mock('../../backend/utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    result: {
+      allowRuntimeModelOverride: false,
+      defaultProviderId: 'openai',
+      defaultModelId: 'gpt-5-mini',
+      providers: [],
+    },
+  })),
+}))

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

@@ -36,9 +36,54 @@ jest.mock('../../backend/utils/api', () => ({
   apiFetch: jest.fn(),
 }))
 
+// <AiChat> mounts `useAgentModels` (Phase 4b) which calls apiCall against
+// /api/ai_assistant/ai/agents/<id>/models on first render. The chat-flow
+// tests in this file don't exercise the picker, so stub apiCall with a
+// no-providers response — keeps `apiFetch.mock.calls` scoped to the
+// dispatcher and lets the existing `mockResolvedValueOnce` setup drive the
+// assertion path without having to special-case the models endpoint.
+jest.mock('../../backend/utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    result: {
+      agentId: 'customers.account_assistant',
+      allowRuntimeModelOverride: false,
+      defaultProviderId: 'openai',
+      defaultModelId: 'gpt-5-mini',
+      providers: [],
+    },
+  })),
+}))
+
 import { apiFetch } from '../../backend/utils/api'
+import { apiCall } from '../../backend/utils/apiCall'
 import { AiChat } from '../AiChat'
 
+let lastResizeObserver: MockResizeObserver | null = null
+
+class MockResizeObserver {
+  observe = jest.fn()
+  disconnect = jest.fn()
+
+  constructor(
+    private readonly callback: ResizeObserverCallback,
+  ) {
+    lastResizeObserver = this
+  }
+
+  trigger(width: number) {
+    this.callback(
+      [
+        {
+          contentRect: { width },
+        } as ResizeObserverEntry,
+      ],
+      this as unknown as ResizeObserver,
+    )
+  }
+}
+
 const dict = {
   'ai_assistant.chat.assistantRoleLabel': 'Assistant',
   'ai_assistant.chat.cancel': 'Cancel streaming response',
@@ -108,6 +153,7 @@ describe('<AiChat>', () => {
   beforeEach(() => {
     jest.clearAllMocks()
     window.localStorage.clear()
+    lastResizeObserver = null
   })
 
   it('renders the composer with the i18n placeholder and region labels', () => {
@@ -120,6 +166,140 @@ describe('<AiChat>', () => {
     expect(screen.getByRole('button', { name: 'Send message' })).toBeDisabled()
   })
 
+  it('replaces a stale stored model picker value with the first available model', async () => {
+    const apiCallMock = apiCall as unknown as jest.Mock
+    apiCallMock.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      result: {
+        agentId: 'customers.account_assistant',
+        allowRuntimeModelOverride: true,
+        defaultProviderId: 'openai',
+        defaultModelId: 'gpt-5-mini',
+        providers: [
+          {
+            id: 'openai',
+            name: 'OpenAI',
+            isDefault: true,
+            models: [
+              {
+                id: 'gpt-5-mini',
+                name: 'GPT-5 Mini',
+                isDefault: true,
+              },
+            ],
+          },
+        ],
+      },
+    })
+    window.localStorage.setItem(
+      'om-ai-model-picker:customers.account_assistant',
+      JSON.stringify({ providerId: 'openai', modelId: 'gpt-4o' }),
+    )
+
+    renderWithProviders(<AiChat agent="customers.account_assistant" />, { dict })
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Select AI model' })).toHaveAttribute(
+        'title',
+        'OpenAI / GPT-5 Mini',
+      )
+    })
+    expect(window.localStorage.getItem('om-ai-model-picker:customers.account_assistant')).toBe(
+      JSON.stringify({ providerId: 'openai', modelId: 'gpt-5-mini' }),
+    )
+  })
+
+  it('renders a compact footer before a constrained host is measured', async () => {
+    const apiCallMock = apiCall as unknown as jest.Mock
+    apiCallMock.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      result: {
+        agentId: 'customers.account_assistant',
+        allowRuntimeModelOverride: true,
+        defaultProviderId: 'openai',
+        defaultModelId: 'gpt-5-mini',
+        providers: [
+          {
+            id: 'openai',
+            name: 'OpenAI',
+            isDefault: true,
+            models: [
+              {
+                id: 'gpt-5-mini',
+                name: 'GPT-5 Mini',
+                isDefault: true,
+              },
+            ],
+          },
+        ],
+      },
+    })
+
+    renderWithProviders(<AiChat agent="customers.account_assistant" defaultCompactFooter />, { dict })
+
+    const footer = document.querySelector('[data-ai-chat-footer=""]')
+    expect(footer).toHaveAttribute('data-ai-chat-footer-compact', 'true')
+    expect(screen.getByText('Press Cmd/Ctrl+Enter to send, Escape to cancel.')).toHaveClass('hidden')
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Select AI model' })).toHaveClass('w-8')
+    })
+    expect(screen.getByRole('button', { name: 'Send message' })).toHaveClass('w-8')
+  })
+
+  it('lets a default compact footer expand after resize measurement', async () => {
+    const apiCallMock = apiCall as unknown as jest.Mock
+    apiCallMock.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      result: {
+        agentId: 'customers.account_assistant',
+        allowRuntimeModelOverride: true,
+        defaultProviderId: 'openai',
+        defaultModelId: 'gpt-5-mini',
+        providers: [
+          {
+            id: 'openai',
+            name: 'OpenAI',
+            isDefault: true,
+            models: [
+              {
+                id: 'gpt-5-mini',
+                name: 'GPT-5 Mini',
+                isDefault: true,
+              },
+            ],
+          },
+        ],
+      },
+    })
+    const originalResizeObserver = globalThis.ResizeObserver
+    globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver
+
+    try {
+      renderWithProviders(<AiChat agent="customers.account_assistant" defaultCompactFooter />, { dict })
+
+      const footer = document.querySelector('[data-ai-chat-footer=""]')
+      expect(footer).toHaveAttribute('data-ai-chat-footer-compact', 'true')
+
+      await act(async () => {
+        lastResizeObserver?.trigger(720)
+      })
+
+      await waitFor(() => {
+        expect(footer).toHaveAttribute('data-ai-chat-footer-compact', 'false')
+      })
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Select AI model' })).not.toHaveClass('w-8')
+      })
+      expect(screen.getByRole('button', { name: 'Send message' })).not.toHaveClass('w-8')
+    } finally {
+      globalThis.ResizeObserver = originalResizeObserver
+    }
+  })
+
   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(

package/src/ai/__tests__/AiChat.thinking-unmount.test.tsx

@@ -293,3 +293,19 @@ describe('<AiChat> unmount-mid-stream persistence (issue #1816)', () => {
     unmountB()
   })
 })
+
+// <AiChat> mounts useAgentModels (Phase 4b) which hits /api/ai_assistant/ai/agents/<id>/models
+// on first render via apiCall. Stub apiCall with a no-providers response so this files
+// chat-flow assertions remain scoped to the dispatcher mock above.
+jest.mock('../../backend/utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({
+    ok: true,
+    status: 200,
+    result: {
+      allowRuntimeModelOverride: false,
+      defaultProviderId: 'openai',
+      defaultModelId: 'gpt-5-mini',
+      providers: [],
+    },
+  })),
+}))

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

@@ -11,10 +11,11 @@ import { AiDockProvider, useAiDock, type AiDockedAssistant } from '../AiDock'
 jest.mock('../AiChat', () => {
   const ReactModule = require('react') as typeof import('react')
   return {
-    AiChat: ({ agent }: { agent: string }) =>
+    AiChat: ({ agent, defaultCompactFooter }: { agent: string; defaultCompactFooter?: boolean }) =>
       ReactModule.createElement('div', {
         'data-testid': 'ai-chat',
         'data-agent': agent,
+        'data-default-compact-footer': defaultCompactFooter ? 'true' : 'false',
       }),
   }
 })
@@ -121,4 +122,14 @@ describe('<AiDockProvider>', () => {
     })
     expect(document.querySelector('[data-ai-dock-panel=""]')).not.toBeInTheDocument()
   })
+
+  it('starts the chat footer compact inside the dock', async () => {
+    renderWithProviders(<Harness />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Dock assistant' }))
+
+    await waitFor(() => {
+      expect(screen.getByTestId('ai-chat')).toHaveAttribute('data-default-compact-footer', 'true')
+    })
+  })
 })

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

@@ -0,0 +1,252 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { ModelPicker } from '../ModelPicker'
+import type { ModelPickerProvider, ModelPickerValue } from '../ModelPicker'
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (key: string, fallback: string) => fallback,
+}))
+
+jest.mock('@open-mercato/shared/lib/utils', () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(' '),
+}))
+
+const providers: ModelPickerProvider[] = [
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    isDefault: true,
+    models: [
+      { id: 'claude-haiku-4-5', name: 'Claude Haiku 4.5', isDefault: true },
+      { id: 'claude-sonnet-4-5', name: 'Claude Sonnet 4.5', isDefault: false },
+    ],
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    isDefault: false,
+    models: [{ id: 'gpt-4o', name: 'GPT-4o', isDefault: false }],
+  },
+]
+
+function ControlledPicker({
+  initial = null,
+  onChangeSpy,
+}: {
+  initial?: ModelPickerValue | null
+  onChangeSpy?: jest.Mock
+}) {
+  const [value, setValue] = React.useState<ModelPickerValue | null>(initial)
+  const handleChange = React.useCallback(
+    (next: ModelPickerValue | null) => {
+      setValue(next)
+      onChangeSpy?.(next)
+    },
+    [onChangeSpy],
+  )
+  return (
+    <ModelPicker
+      agentId="catalog.merchandising_assistant"
+      value={value}
+      onChange={handleChange}
+      availableProviders={providers}
+    />
+  )
+}
+
+describe('<ModelPicker>', () => {
+  it('renders the trigger button', () => {
+    render(<ControlledPicker />)
+    expect(screen.getByRole('button', { name: 'Select AI model' })).toBeInTheDocument()
+  })
+
+  it('shows the effective default model name when no runtime override is selected', () => {
+    render(
+      <ModelPicker
+        agentId="catalog.merchandising_assistant"
+        value={null}
+        onChange={jest.fn()}
+        availableProviders={providers}
+        defaultLabel="OpenAI / GPT-5 Mini"
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Select AI model' })).toHaveTextContent(
+      'Default: OpenAI / GPT-5 Mini',
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+    expect(screen.getByText('Use agent default: OpenAI / GPT-5 Mini')).toBeInTheDocument()
+  })
+
+  it('does not render when availableProviders is empty', () => {
+    const { container } = render(
+      <ModelPicker
+        agentId="catalog.merchandising_assistant"
+        value={null}
+        onChange={jest.fn()}
+        availableProviders={[]}
+      />,
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('opens the dropdown on trigger click', () => {
+    render(<ControlledPicker />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+  })
+
+  it('closes the dropdown on second trigger click', () => {
+    render(<ControlledPicker />)
+    const trigger = screen.getByRole('button', { name: 'Select AI model' })
+    fireEvent.click(trigger)
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    fireEvent.click(trigger)
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('closes the dropdown when Escape is pressed', () => {
+    render(<ControlledPicker />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('closes the dropdown when clicking outside', () => {
+    render(
+      <div>
+        <ControlledPicker />
+        <button type="button">Outside</button>
+      </div>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+    expect(screen.getByRole('listbox')).toBeInTheDocument()
+    fireEvent.mouseDown(screen.getByRole('button', { name: 'Outside' }))
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('lists all providers and their models', () => {
+    render(<ControlledPicker />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    expect(screen.getByText('Anthropic')).toBeInTheDocument()
+    expect(screen.getByText('Claude Haiku 4.5')).toBeInTheDocument()
+    expect(screen.getByText('Claude Sonnet 4.5')).toBeInTheDocument()
+    expect(screen.getByText('OpenAI')).toBeInTheDocument()
+    expect(screen.getByText('GPT-4o')).toBeInTheDocument()
+  })
+
+  it('calls onChange with the selected model and closes the dropdown', () => {
+    const onChangeSpy = jest.fn()
+    render(<ControlledPicker onChangeSpy={onChangeSpy} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    fireEvent.click(screen.getByText('GPT-4o'))
+
+    expect(onChangeSpy).toHaveBeenCalledWith({ providerId: 'openai', modelId: 'gpt-4o' })
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('calls onChange with null when "Use agent default" is clicked', () => {
+    const onChangeSpy = jest.fn()
+    const initial: ModelPickerValue = { providerId: 'openai', modelId: 'gpt-4o' }
+    render(<ControlledPicker initial={initial} onChangeSpy={onChangeSpy} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    fireEvent.click(screen.getByText('Use agent default'))
+
+    expect(onChangeSpy).toHaveBeenCalledWith(null)
+  })
+
+  it('selects a model via Enter key', () => {
+    const onChangeSpy = jest.fn()
+    render(<ControlledPicker onChangeSpy={onChangeSpy} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    const gpt4oOption = screen.getByText('GPT-4o').closest('[role="option"]') as HTMLElement
+    fireEvent.keyDown(gpt4oOption, { key: 'Enter' })
+
+    expect(onChangeSpy).toHaveBeenCalledWith({ providerId: 'openai', modelId: 'gpt-4o' })
+  })
+
+  it('selects a model via Space key', () => {
+    const onChangeSpy = jest.fn()
+    render(<ControlledPicker onChangeSpy={onChangeSpy} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    const claudeHaikuOption = screen.getByText('Claude Haiku 4.5').closest(
+      '[role="option"]',
+    ) as HTMLElement
+    fireEvent.keyDown(claudeHaikuOption, { key: ' ' })
+
+    expect(onChangeSpy).toHaveBeenCalledWith({
+      providerId: 'anthropic',
+      modelId: 'claude-haiku-4-5',
+    })
+  })
+
+  it('marks the currently selected model with aria-selected', () => {
+    const initial: ModelPickerValue = { providerId: 'anthropic', modelId: 'claude-sonnet-4-5' }
+    render(<ControlledPicker initial={initial} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    const selectedOption = screen
+      .getByText('Claude Sonnet 4.5')
+      .closest('[role="option"]') as HTMLElement
+    expect(selectedOption).toHaveAttribute('aria-selected', 'true')
+
+    const unselectedOption = screen
+      .getByText('Claude Haiku 4.5')
+      .closest('[role="option"]') as HTMLElement
+    expect(unselectedOption).toHaveAttribute('aria-selected', 'false')
+  })
+
+  it('marks the "Use default" option as selected when value is null', () => {
+    render(<ControlledPicker initial={null} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    const defaultOption = screen
+      .getByText('Use agent default')
+      .closest('[role="option"]') as HTMLElement
+    expect(defaultOption).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('does not open when disabled', () => {
+    render(
+      <ModelPicker
+        agentId="test.agent"
+        value={null}
+        onChange={jest.fn()}
+        availableProviders={providers}
+        disabled
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  it('attaches data-ai-model-picker attribute with the agentId', () => {
+    const { container } = render(<ControlledPicker />)
+    const root = container.querySelector(
+      '[data-ai-model-picker="catalog.merchandising_assistant"]',
+    )
+    expect(root).toBeInTheDocument()
+  })
+
+  it('attaches data-ai-model-picker-model attributes', () => {
+    render(<ControlledPicker />)
+    fireEvent.click(screen.getByRole('button', { name: 'Select AI model' }))
+
+    expect(
+      document.querySelector('[data-ai-model-picker-model="anthropic:claude-haiku-4-5"]'),
+    ).toBeInTheDocument()
+    expect(
+      document.querySelector('[data-ai-model-picker-model="openai:gpt-4o"]'),
+    ).toBeInTheDocument()
+  })
+})

package/src/ai/index.ts

@@ -1,6 +1,7 @@
 export { AiChat, type AiChatProps, type AiChatDebugTool, type AiChatDebugPromptSection } from './AiChat'
 export {
   AiAssistantLauncher,
+  AI_ASSISTANT_LAUNCHER_OPEN_EVENT,
   type AiAssistantLauncherAgent,
   type AiAssistantLauncherProps,
 } from './AiAssistantLauncher'