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

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'

package/src/ai/useAiChat.ts

@@ -70,6 +70,18 @@ export interface UseAiChatInput {
    * props at any time to reset the conversation.
    */
   conversationId?: string
+  /**
+   * Runtime provider override (4b.2). Forwarded as `?provider=` query param
+   * on every POST to the dispatcher. Undefined/null means use the agent's
+   * configured default (no override sent).
+   */
+  providerOverride?: string | null
+  /**
+   * Runtime model override (4b.2). Forwarded as `?model=` query param
+   * on every POST to the dispatcher. Undefined/null means use the agent's
+   * configured default (no override sent).
+   */
+  modelOverride?: string | null
 }
 
 export interface AiChatErrorEnvelope {
@@ -238,7 +250,12 @@ function clearPersistedSession(agent: string, conversationId?: string | null): v
   }
 }
 
-function getTransportEndpoint(agent: string, apiPath?: string): string {
+function getTransportEndpoint(
+  agent: string,
+  apiPath?: string,
+  providerOverride?: string | null,
+  modelOverride?: string | null,
+): string {
   // Reuse the transport factory so UI consumers share the dispatcher URL
   // convention with server-side callers (e.g. runAiAgentText / Playwright
   // fixtures). The factory returns a ChatTransport<UI_MESSAGE> whose internal
@@ -252,7 +269,14 @@ function getTransportEndpoint(agent: string, apiPath?: string): string {
   void transport
   const base = apiPath && apiPath.length > 0 ? apiPath : '/api/ai_assistant/ai/chat'
   const separator = base.includes('?') ? '&' : '?'
-  return `${base}${separator}agent=${encodeURIComponent(agent)}`
+  let url = `${base}${separator}agent=${encodeURIComponent(agent)}`
+  if (providerOverride) {
+    url += `&provider=${encodeURIComponent(providerOverride)}`
+  }
+  if (modelOverride) {
+    url += `&model=${encodeURIComponent(modelOverride)}`
+  }
+  return url
 }
 
 interface AssistantBuilderState {
@@ -549,7 +573,7 @@ async function readErrorEnvelope(response: Response): Promise<AiChatErrorEnvelop
 }
 
 export function useAiChat(input: UseAiChatInput): UseAiChatResult {
-  const { agent, apiPath, pageContext, attachmentIds, debug, initialMessages, onError, conversationId: conversationIdInput } = input
+  const { agent, apiPath, pageContext, attachmentIds, debug, initialMessages, onError, conversationId: conversationIdInput, providerOverride, modelOverride } = input
 
   // Minted once on mount when the caller does not supply a conversationId.
   // The ref keeps the id stable across re-renders and is reused for every
@@ -763,7 +787,7 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
       const controller = new AbortController()
       abortRef.current = controller
 
-      const url = getTransportEndpoint(agent, apiPath)
+      const url = getTransportEndpoint(agent, apiPath, providerOverride, modelOverride)
       const body = {
         messages: outgoingHistory.map((message) => ({
           role: message.role,
@@ -966,18 +990,7 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
         setStatus('idle')
       }
     },
-    [
-      agent,
-      apiPath,
-      attachmentIds,
-      debug,
-      effectiveConversationId,
-      emitError,
-      pageContext,
-      sessionStorageKey,
-      setStatus,
-      updateMessages,
-    ],
+    [agent, apiPath, attachmentIds, debug, effectiveConversationId, emitError, messages, modelOverride, pageContext, providerOverride],
   )
 
   React.useEffect(() => {

package/src/backend/CrudForm.tsx

@@ -101,7 +101,7 @@ import { InjectedField } from './injection/InjectedField'
 import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/shared/modules/widgets/injection'
 import { evaluateInjectedVisibility } from './injection/visibility-utils'
 import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
-import { sanitizeHtmlRichText, sanitizeRichTextHref, sanitizeRichTextPasteContent } from './utils/richTextSanitizer'
+import { RichEditor, type RichEditorLabels } from '../primitives/rich-editor'
 
 // Stable empty options array to avoid creating a new [] every render
 const EMPTY_OPTIONS: CrudFieldOption[] = []
@@ -216,6 +216,13 @@ export type CrudBuiltinField = CrudFieldBase & {
   suggestions?: string[]
   // for combobox fields; allow custom values or restrict to suggestions only
   allowCustomValues?: boolean
+  // for combobox fields; hydrate the option map up front so a pre-selected value
+  // (typically an FK whose row is not on the first page of `loadOptions`) renders
+  // its label without requiring the user to focus the field
+  seedOptions?: CrudFieldOption[]
+  // for combobox fields; resolve a pre-selected value to its display label when it
+  // is not covered by `options`/`seedOptions`/`loadOptions` results (may be async)
+  resolveLabel?: (value: string) => string | Promise<string>
   // for text/textarea fields; HTML maxLength + (textarea only) char counter when showCount=true
   maxLength?: number
   // for textarea fields; show character counter (requires maxLength)
@@ -3620,106 +3627,33 @@ const MarkdownEditor = React.memo(function MarkdownEditor({ value = '', onChange
   )
 }, (prev, next) => prev.value === next.value)
 
-// HTML Rich Text editor (contentEditable) with shortcuts; returns HTML string
-type HtmlRTProps = { value?: string; onChange: (html: string) => void }
-const HtmlRichTextEditor = React.memo(function HtmlRichTextEditor({ value = '', onChange }: HtmlRTProps) {
+// HTML Rich Text editor wrapper for the CrudForm builtin `editor: 'html'`.
+// Maps the existing `ui.forms.richtext.*` i18n keys onto the `RichEditor`
+// `labels` contract and pins the `standard` toolbar variant — heading
+// dropdown + B/I/U + lists + link, matching the legacy behaviour plus
+// the Figma `164611:20259` heading selector.
+type HtmlRichEditorFieldProps = { value?: string; onChange: (html: string) => void }
+const HtmlRichEditorField = React.memo(function HtmlRichEditorField({ value = '', onChange }: HtmlRichEditorFieldProps) {
   const t = useT()
-  const boldLabel = t('ui.forms.richtext.bold')
-  const italicLabel = t('ui.forms.richtext.italic')
-  const underlineLabel = t('ui.forms.richtext.underline')
-  const listLabel = t('ui.forms.richtext.list')
-  const heading3Label = t('ui.forms.richtext.heading3')
-  const linkLabel = t('ui.forms.richtext.link')
-  const linkUrlPrompt = t('ui.forms.richtext.linkUrlPrompt')
-  const ref = React.useRef<HTMLDivElement | null>(null)
-  const applyingExternal = React.useRef(false)
-  const typingRef = React.useRef(false)
-
-  React.useEffect(() => {
-    const el = ref.current
-    if (!el) return
-    const current = el.innerHTML
-    const sanitizedValue = sanitizeHtmlRichText(value)
-    if (!typingRef.current && current !== sanitizedValue) {
-      applyingExternal.current = true
-      el.innerHTML = sanitizedValue
-      requestAnimationFrame(() => { applyingExternal.current = false })
-    }
-  }, [value])
-
-  const exec = (cmd: string, arg?: string) => {
-    const el = ref.current
-    if (!el) return
-    el.focus()
-    try {
-      document.execCommand(cmd, false, arg)
-    } catch {
-      // ignore execCommand failures
-    }
-  }
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    const isMod = e.metaKey || e.ctrlKey
-    if (!isMod) return
-    const k = e.key.toLowerCase()
-    if (k === 'b') { e.preventDefault(); exec('bold') }
-    if (k === 'i') { e.preventDefault(); exec('italic') }
-    if (k === 'u') { e.preventDefault(); exec('underline') }
-  }
-
-  const onPaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
-    const html = e.clipboardData.getData('text/html')
-    const text = e.clipboardData.getData('text/plain')
-    const sanitizedPaste = sanitizeRichTextPasteContent(html, text)
-    if (!sanitizedPaste) return
-
-    e.preventDefault()
-    exec(sanitizedPaste.command, sanitizedPaste.value)
-  }
-
-  return (
-    <div className="w-full rounded border">
-      <div className="flex items-center gap-1 px-2 py-1 border-b">
-        <Button variant="ghost" size="sm" className="h-auto px-2 py-0.5 text-xs" onMouseDown={(e) => e.preventDefault()} onClick={() => exec('bold')}>{boldLabel}</Button>
-        <Button variant="ghost" size="sm" className="h-auto px-2 py-0.5 text-xs" onMouseDown={(e) => e.preventDefault()} onClick={() => exec('italic')}>{italicLabel}</Button>
-        <Button variant="ghost" size="sm" className="h-auto px-2 py-0.5 text-xs" onMouseDown={(e) => e.preventDefault()} onClick={() => exec('underline')}>{underlineLabel}</Button>
-        <span className="mx-2 text-muted-foreground">|</span>
-        <Button variant="ghost" size="sm" className="h-auto px-2 py-0.5 text-xs" onMouseDown={(e) => e.preventDefault()} onClick={() => exec('insertUnorderedList')}>• {listLabel}</Button>
-        <Button variant="ghost" size="sm" className="h-auto px-2 py-0.5 text-xs" onMouseDown={(e) => e.preventDefault()} onClick={() => exec('formatBlock', '<h3>')}>{heading3Label}</Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-auto px-2 py-0.5 text-xs"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={() => {
-            const url = sanitizeRichTextHref(window.prompt(linkUrlPrompt))
-            if (url) exec('createLink', url)
-          }}
-        >{linkLabel}</Button>
-      </div>
-      <div
-        ref={ref}
-        className="w-full px-2 py-2 min-h-[100px] sm:min-h-[160px] focus-visible:outline-none prose prose-sm max-w-none"
-        contentEditable
-        suppressContentEditableWarning
-        onKeyDown={onKeyDown}
-        onPaste={onPaste}
-        onInput={() => { if (!applyingExternal.current) typingRef.current = true }}
-        onBlur={() => {
-          const el = ref.current
-          if (!el) return
-          typingRef.current = false
-          const sanitizedValue = sanitizeHtmlRichText(el.innerHTML)
-          if (el.innerHTML !== sanitizedValue) {
-            applyingExternal.current = true
-            el.innerHTML = sanitizedValue
-            requestAnimationFrame(() => { applyingExternal.current = false })
-          }
-          onChange(sanitizedValue)
-        }}
-      />
-    </div>
-  )
+  const labels = React.useMemo<Partial<RichEditorLabels>>(() => ({
+    bold: t('ui.forms.richtext.bold'),
+    italic: t('ui.forms.richtext.italic'),
+    underline: t('ui.forms.richtext.underline'),
+    unorderedList: t('ui.forms.richtext.list'),
+    orderedList: t('ui.forms.richtext.orderedList', 'Numbered list'),
+    heading: t('ui.forms.richtext.heading', 'Heading'),
+    heading1: t('ui.forms.richtext.heading1', 'Heading 1'),
+    heading2: t('ui.forms.richtext.heading2', 'Heading 2'),
+    heading3: t('ui.forms.richtext.heading3'),
+    paragraph: t('ui.forms.richtext.paragraph', 'Paragraph'),
+    link: t('ui.forms.richtext.link'),
+    linkUrlPrompt: t('ui.forms.richtext.linkUrlPrompt'),
+    placeholder: t('ui.forms.richtext.placeholder'),
+    comment: t('ui.forms.richtext.comment', 'Add comment'),
+    mention: t('ui.forms.richtext.mention', 'Mention'),
+    more: t('ui.forms.richtext.more', 'More'),
+  }), [t])
+  return <RichEditor value={value} onChange={onChange} variant="full" labels={labels} />
 }, (prev, next) => prev.value === next.value)
 
 // Very simple markdown editor with Bold/Italic/Underline + shortcuts.
@@ -3970,23 +3904,31 @@ const FieldControl = React.memo(function FieldControlImpl({
         />
       )}
       {field.type === 'date' && (
-        <Input
-          type="date"
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => setValue(field.id, e.target.value || undefined)}
-          autoFocus={autoFocusField}
-          data-crud-focus-target=""
+        <DatePicker
+          value={typeof value === 'string' && value ? parseISO(value) : value instanceof Date ? value : null}
+          onChange={(date) => setValue(field.id, date ? format(date, 'yyyy-MM-dd') : undefined)}
           disabled={disabled}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          minDate={builtin?.minDate}
+          maxDate={builtin?.maxDate}
+          displayFormat={builtin?.displayFormat}
+          closeOnSelect={builtin?.closeOnSelect}
+          locale={builtin?.locale}
         />
       )}
       {field.type === 'datetime-local' && (
-        <Input
-          type="datetime-local"
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => setValue(field.id, e.target.value || undefined)}
-          autoFocus={autoFocusField}
-          data-crud-focus-target=""
+        <DateTimePicker
+          value={typeof value === 'string' && value ? new Date(value) : value instanceof Date ? value : null}
+          onChange={(date) => setValue(field.id, date ? format(date, "yyyy-MM-dd'T'HH:mm") : undefined)}
           disabled={disabled}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          minuteStep={builtin?.minuteStep}
+          minDate={builtin?.minDate}
+          maxDate={builtin?.maxDate}
+          displayFormat={builtin?.displayFormat}
+          locale={builtin?.locale}
         />
       )}
       {field.type === 'datepicker' && (
@@ -4043,7 +3985,7 @@ const FieldControl = React.memo(function FieldControlImpl({
         <SimpleMarkdownEditor value={String(value ?? '')} onChange={fieldSetValue} />
       )}
       {field.type === 'richtext' && builtin?.editor === 'html' && (
-        <HtmlRichTextEditor value={String(value ?? '')} onChange={fieldSetValue} />
+        <HtmlRichEditorField value={String(value ?? '')} onChange={fieldSetValue} />
       )}
       {field.type === 'richtext' && (!builtin?.editor || (builtin.editor !== 'simple' && builtin.editor !== 'html')) && (
         <MarkdownEditor value={String(value ?? '')} onChange={fieldSetValue} />
@@ -4077,6 +4019,12 @@ const FieldControl = React.memo(function FieldControlImpl({
               ? builtin.suggestions
               : options.map((opt) => ({ value: opt.value, label: opt.label }))
           }
+          seedOptions={
+            builtin?.seedOptions
+              ? builtin.seedOptions.map((opt) => ({ value: opt.value, label: opt.label }))
+              : undefined
+          }
+          resolveLabel={builtin?.resolveLabel}
           loadSuggestions={
             typeof builtin?.loadOptions === 'function'
               ? async (query?: string) => {

package/src/backend/DataTable.tsx

@@ -14,7 +14,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '../primitives/select'
+import { CompactSelectTrigger } from '../primitives/compact-select'
 import { Spinner } from '../primitives/spinner'
+import { EmptyState } from '../primitives/empty-state'
 import { TooltipProvider } from '../primitives/tooltip'
 import { TruncatedCell } from './TruncatedCell'
 import { FilterBar, type FilterDef, type FilterValues } from './FilterBar'
@@ -1787,13 +1789,12 @@ export function DataTable<T>({
             scrollTableIntoView()
           }}
         >
-          <SelectTrigger
-            size="sm"
+          <CompactSelectTrigger
             className="min-w-[4rem]"
             aria-label={t('ui.dataTable.pagination.rowsPerPage', 'Rows per page')}
           >
             <SelectValue />
-          </SelectTrigger>
+          </CompactSelectTrigger>
           <SelectContent>
             {pageSizeOptions.map((size) => (
               <SelectItem key={size} value={String(size)}>{size}</SelectItem>
@@ -2612,8 +2613,19 @@ export function DataTable<T>({
               </>
             ) : (
               <TableRow>
-                <TableCell colSpan={mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0)} className="h-24 text-center text-muted-foreground">
-                  {emptyState ?? t('ui.dataTable.emptyState.default', 'No results.')}
+                <TableCell colSpan={mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0)} className="py-6">
+                  {emptyState && typeof emptyState !== 'string' ? (
+                    emptyState
+                  ) : (
+                    <EmptyState
+                      size="sm"
+                      title={
+                        typeof emptyState === 'string'
+                          ? emptyState
+                          : t('ui.dataTable.emptyState.default', 'No results.')
+                      }
+                    />
+                  )}
                 </TableCell>
               </TableRow>
             )}