@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/ai/ModelPicker.tsx

@@ -0,0 +1,248 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronDown, Cpu } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '../primitives/button'
+
+export interface ModelPickerProviderModel {
+  id: string
+  name: string
+  contextWindow?: number | null
+  tags?: string[]
+  isDefault: boolean
+}
+
+export interface ModelPickerProvider {
+  id: string
+  name: string
+  isDefault: boolean
+  models: ModelPickerProviderModel[]
+}
+
+export interface ModelPickerValue {
+  providerId: string
+  modelId: string
+  baseURL?: string | null
+}
+
+export interface ModelPickerProps {
+  agentId: string
+  value: ModelPickerValue | null
+  onChange: (value: ModelPickerValue | null) => void
+  availableProviders: ModelPickerProvider[]
+  disabled?: boolean
+  compact?: boolean
+  defaultLabel?: string | null
+  className?: string
+}
+
+/**
+ * Stateless dropdown for selecting a provider + model override in the chat UI.
+ *
+ * - Renders provider name + model id + "(default)" badge for the agent's resolved default.
+ * - Keyboard-accessible: trigger opens a floating list, arrow keys navigate, Enter selects,
+ *   Escape closes.
+ * - Does NOT expose a baseURL input (R6 mitigation: only provider+model selection from the
+ *   curated catalog is exposed to end users).
+ * - localStorage persistence keyed by agentId is handled by the consumer (AiChat / 4b.2).
+ * - When allowRuntimeModelOverride is false the consumer should not render this component
+ *   at all; this component itself does no gating.
+ */
+export function ModelPicker({
+  agentId,
+  value,
+  onChange,
+  availableProviders,
+  disabled,
+  compact = false,
+  defaultLabel,
+  className,
+}: ModelPickerProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  const selectedLabel = React.useMemo(() => {
+    if (!value) {
+      return defaultLabel
+        ? t('ai_assistant.modelPicker.defaultWithModelLabel', 'Default: {{model}}').replace('{{model}}', defaultLabel)
+        : t('ai_assistant.modelPicker.defaultLabel', 'Model: Default')
+    }
+    const provider = availableProviders.find((p) => p.id === value.providerId)
+    const model = provider?.models.find((m) => m.id === value.modelId)
+    const modelLabel = model?.name ?? value.modelId
+    const providerLabel = provider?.name ?? value.providerId
+    return `${providerLabel} / ${modelLabel}`
+  }, [value, availableProviders, defaultLabel, t])
+
+  const handleToggle = React.useCallback(() => {
+    if (disabled) return
+    setOpen((prev) => !prev)
+  }, [disabled])
+
+  const handleSelect = React.useCallback(
+    (providerId: string, modelId: string) => {
+      onChange({ providerId, modelId })
+      setOpen(false)
+      triggerRef.current?.focus()
+    },
+    [onChange],
+  )
+
+  const handleClearDefault = React.useCallback(() => {
+    onChange(null)
+    setOpen(false)
+    triggerRef.current?.focus()
+  }, [onChange])
+
+  React.useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false)
+        triggerRef.current?.focus()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open])
+
+  React.useEffect(() => {
+    if (!open) return
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  if (availableProviders.length === 0) return null
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)} data-ai-model-picker={agentId}>
+      <Button
+        ref={triggerRef}
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={disabled}
+        onClick={handleToggle}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={t('ai_assistant.modelPicker.triggerAriaLabel', 'Select AI model')}
+        title={selectedLabel}
+        data-ai-model-picker-trigger
+        className={cn(
+          'font-normal',
+          compact ? 'w-8 gap-0 px-0' : 'gap-1.5 px-2.5',
+        )}
+      >
+        <Cpu className="size-3.5 shrink-0" aria-hidden />
+        {!compact ? (
+          <span className="max-w-36 truncate text-xs">{selectedLabel}</span>
+        ) : null}
+        <ChevronDown
+          className={cn(
+            'size-3 shrink-0 transition-transform',
+            compact && 'hidden',
+            open && 'rotate-180',
+          )}
+          aria-hidden
+        />
+      </Button>
+
+      {open ? (
+        <div
+          role="listbox"
+          aria-label={t('ai_assistant.modelPicker.listAriaLabel', 'Available models')}
+          className={cn(
+            'absolute bottom-full left-0 z-50 mb-1 max-h-72 min-w-56 overflow-y-auto',
+            'rounded-md border border-border bg-popover shadow-md',
+          )}
+          data-ai-model-picker-dropdown
+        >
+          <div
+            role="option"
+            aria-selected={value === null}
+            tabIndex={0}
+            className={cn(
+              'cursor-pointer px-3 py-2 text-xs hover:bg-accent hover:text-accent-foreground',
+              'flex items-center gap-2',
+              value === null && 'bg-accent/50',
+            )}
+            onClick={handleClearDefault}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                handleClearDefault()
+              }
+            }}
+            data-ai-model-picker-default-option
+          >
+            <span className="flex-1">
+              {defaultLabel
+                ? t('ai_assistant.modelPicker.useDefaultWithModel', 'Use agent default: {{model}}').replace('{{model}}', defaultLabel)
+                : t('ai_assistant.modelPicker.useDefault', 'Use agent default')}
+            </span>
+            {value === null ? (
+              <span className="rounded bg-primary/10 px-1 py-0.5 text-overline font-medium text-primary">
+                {t('ai_assistant.modelPicker.activeBadge', 'active')}
+              </span>
+            ) : null}
+          </div>
+          {availableProviders.map((provider) => (
+            <div key={provider.id} data-ai-model-picker-provider={provider.id}>
+              <div className="px-3 py-1.5 text-overline font-semibold uppercase tracking-wider text-muted-foreground">
+                {provider.name}
+              </div>
+              {provider.models.map((model) => {
+                const isSelected =
+                  value?.providerId === provider.id && value?.modelId === model.id
+                return (
+                  <div
+                    key={model.id}
+                    role="option"
+                    aria-selected={isSelected}
+                    tabIndex={0}
+                    className={cn(
+                      'cursor-pointer px-3 py-2 text-xs hover:bg-accent hover:text-accent-foreground',
+                      'flex items-center gap-2 pl-5',
+                      isSelected && 'bg-accent/50',
+                    )}
+                    onClick={() => handleSelect(provider.id, model.id)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault()
+                        handleSelect(provider.id, model.id)
+                      }
+                    }}
+                    data-ai-model-picker-model={`${provider.id}:${model.id}`}
+                  >
+                    <span className="flex-1 truncate">{model.name}</span>
+                    {model.isDefault ? (
+                      <span className="shrink-0 rounded bg-muted px-1 py-0.5 text-overline text-muted-foreground">
+                        {t('ai_assistant.modelPicker.defaultBadge', 'default')}
+                      </span>
+                    ) : null}
+                    {isSelected ? (
+                      <span className="shrink-0 rounded bg-primary/10 px-1 py-0.5 text-overline font-medium text-primary">
+                        {t('ai_assistant.modelPicker.activeBadge', 'active')}
+                      </span>
+                    ) : null}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default ModelPicker

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')
+    })
+  })
 })