@open-mercato/ui 0.6.1-develop.3291.1.6fad645fd0 → 0.6.1

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

@@ -93,6 +93,7 @@ const dict = {
   'ai_assistant.chat.emptyTranscript':
     'No messages yet. Ask the agent anything to get started.',
   'ai_assistant.chat.errorTitle': 'Agent dispatch failed',
+  'ai_assistant.chat.agentTasksTitle': 'Agent tasks',
   'ai_assistant.chat.regionLabel': 'AI chat',
   'ai_assistant.chat.send': 'Send message',
   'ai_assistant.chat.shortcutHint':
@@ -109,6 +110,7 @@ type ResponseLike = {
   ok: boolean
   status: number
   body: ReadableStream<Uint8Array> | null
+  headers?: { get: (name: string) => string | null }
   clone: () => ResponseLike
   json: () => Promise<unknown>
   text: () => Promise<string>
@@ -136,6 +138,37 @@ function createStreamingResponse(chunks: string[]): ResponseLike {
   return self
 }
 
+function createUiMessageSseResponse(chunks: Array<Record<string, unknown>>): ResponseLike {
+  const encoder = new TextEncoder()
+  const raw = chunks
+    .map((chunk) => `data: ${JSON.stringify(chunk)}\n\n`)
+    .join('')
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      controller.enqueue(encoder.encode(`${raw}data: [DONE]\n\n`))
+      controller.close()
+    },
+  })
+  const headers = {
+    get: (name: string) => {
+      const normalized = name.toLowerCase()
+      if (normalized === 'content-type') return 'text/event-stream'
+      if (normalized === 'x-vercel-ai-ui-message-stream') return 'v1'
+      return null
+    },
+  }
+  const self: ResponseLike = {
+    ok: true,
+    status: 200,
+    body: stream,
+    headers,
+    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 = {
@@ -166,7 +199,7 @@ describe('<AiChat>', () => {
     expect(screen.getByRole('button', { name: 'Send message' })).toBeDisabled()
   })
 
-  it('replaces a stale stored model picker value with the first available model', async () => {
+  it('clears a stale stored model picker value back to the agent default', async () => {
     const apiCallMock = apiCall as unknown as jest.Mock
     apiCallMock.mockResolvedValueOnce({
       ok: true,
@@ -202,12 +235,64 @@ describe('<AiChat>', () => {
     await waitFor(() => {
       expect(screen.getByRole('button', { name: 'Select AI model' })).toHaveAttribute(
         'title',
-        'OpenAI / GPT-5 Mini',
+        'Default: openai / gpt-5-mini',
       )
     })
-    expect(window.localStorage.getItem('om-ai-model-picker:customers.account_assistant')).toBe(
-      JSON.stringify({ providerId: 'openai', modelId: 'gpt-5-mini' }),
-    )
+    expect(window.localStorage.getItem('om-ai-model-picker:customers.account_assistant')).toBeNull()
+  })
+
+  it('does not send provider or model overrides while the model picker is on Default', async () => {
+    const apiCallMock = apiCall as unknown as jest.Mock
+    apiCallMock.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      result: {
+        agentId: 'customers.deal_analyzer',
+        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 fetchMock = apiFetch as unknown as jest.Mock
+    fetchMock.mockResolvedValueOnce(createStreamingResponse(['Done']))
+
+    renderWithProviders(<AiChat agent="customers.deal_analyzer" />, { dict })
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Select AI model' })).toHaveAttribute(
+        'title',
+        'Default: openai / gpt-5-mini',
+      )
+    })
+
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'Analyze deals' } })
+    await act(async () => {
+      fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true })
+    })
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledTimes(1)
+    })
+    const [url] = fetchMock.mock.calls[0]
+    const parsedUrl = new URL(String(url), 'http://localhost')
+    expect(parsedUrl.searchParams.get('agent')).toBe('customers.deal_analyzer')
+    expect(parsedUrl.searchParams.has('provider')).toBe(false)
+    expect(parsedUrl.searchParams.has('model')).toBe(false)
   })
 
   it('renders a compact footer before a constrained host is measured', async () => {
@@ -334,6 +419,46 @@ describe('<AiChat>', () => {
     expect(screen.getByText('Hi there')).toBeInTheDocument()
   })
 
+  it('renders AI SDK tool-call chunks as tool call rows with display names', async () => {
+    const fetchMock = apiFetch as unknown as jest.Mock
+    fetchMock.mockResolvedValueOnce(
+      createUiMessageSseResponse([
+        {
+          type: 'tool-input-start',
+          toolCallId: 'call-1',
+          toolName: 'customers__analyze_deals',
+        },
+        {
+          type: 'tool-input-available',
+          toolCallId: 'call-1',
+          toolName: 'customers__analyze_deals',
+          input: { dealStageFilter: 'open', daysOfActivityWindow: 30 },
+        },
+        {
+          type: 'tool-output-available',
+          toolCallId: 'call-1',
+          output: { totalAnalyzed: 3, stalledCount: 1 },
+        },
+        { type: 'text-delta', id: 'text-1', delta: 'Analysis complete.' },
+      ]),
+    )
+
+    renderWithProviders(<AiChat agent="customers.account_assistant" />, { dict })
+
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'Analyze deals' } })
+    await act(async () => {
+      fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('customers.analyze_deals')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Agent tasks')).toBeInTheDocument()
+    expect(screen.getByText('Analysis complete.')).toBeInTheDocument()
+    expect(screen.queryByText(/Tool call:/i)).not.toBeInTheDocument()
+  })
+
   it('submits suggested prompts visibly after React StrictMode mount replay', async () => {
     const fetchMock = apiFetch as unknown as jest.Mock
     fetchMock.mockResolvedValueOnce(createStreamingResponse(['Suggested answer']))
@@ -461,4 +586,48 @@ describe('<AiChat>', () => {
       expect(screen.queryByText('Thinking...')).not.toBeInTheDocument()
     })
   })
+
+  it('hides Thinking once visible text has streamed even if the stream remains open', async () => {
+    const fetchMock = apiFetch as unknown as jest.Mock
+    let streamController: ReadableStreamDefaultController<Uint8Array> | null = null
+    const encoder = new TextEncoder()
+    const pendingStream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        streamController = controller
+        controller.enqueue(encoder.encode('partial answer'))
+      },
+    })
+
+    fetchMock.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      body: pendingStream,
+      clone: () => ({
+        ok: true,
+        status: 200,
+        body: null,
+        clone: () => ({}),
+        json: async () => ({}),
+        text: async () => '',
+      }),
+      json: async () => ({}),
+      text: async () => '',
+    } as ResponseLike)
+
+    renderWithProviders(<AiChat agent="catalog.catalog_assistant" />, { dict })
+    const textarea = screen.getByLabelText('Message composer') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: 'Suggest five questions' } })
+    await act(async () => {
+      fireEvent.keyDown(textarea, { key: 'Enter', metaKey: true })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('partial answer')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Thinking...')).not.toBeInTheDocument()
+
+    await act(async () => {
+      streamController?.close()
+    })
+  })
 })

package/src/ai/index.ts

@@ -1,4 +1,5 @@
 export { AiChat, type AiChatProps, type AiChatDebugTool, type AiChatDebugPromptSection } from './AiChat'
+export { AiIcon } from './AiIcon'
 export {
   AiAssistantLauncher,
   AI_ASSISTANT_LAUNCHER_OPEN_EVENT,
@@ -124,3 +125,10 @@ export {
   type AiChatUploadFileState,
   type AiChatUploadFileStatus,
 } from './useAiChatUpload'
+export { LoopDisabledBanner } from './LoopDisabledBanner'
+export {
+  LoopTracePanel,
+  type LoopTracePanelProps,
+  type LoopTracePanelTrace,
+  type LoopTracePanelStepRecord,
+} from './LoopTracePanel'

package/src/ai/parts/ConfirmationCard.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Alert, AlertDescription, AlertTitle } from '../../primitives/alert'
 import { Button } from '../../primitives/button'
@@ -214,7 +214,6 @@ function ConfirmationErrorAlert({
         className="mt-3"
         data-ai-confirmation-error="stale_version"
       >
-        <AlertTriangle className="size-4" aria-hidden />
         <AlertTitle>
           {t(
             'ai_assistant.chat.mutation_cards.confirmation.staleVersionTitle',
@@ -252,7 +251,6 @@ function ConfirmationErrorAlert({
         className="mt-3"
         data-ai-confirmation-error="schema_drift"
       >
-        <AlertTriangle className="size-4" aria-hidden />
         <AlertTitle>
           {t(
             'ai_assistant.chat.mutation_cards.confirmation.schemaDriftTitle',
@@ -276,7 +274,6 @@ function ConfirmationErrorAlert({
         className="mt-3"
         data-ai-confirmation-error="invalid_status"
       >
-        <AlertTriangle className="size-4" aria-hidden />
         <AlertTitle>
           {t(
             'ai_assistant.chat.mutation_cards.confirmation.invalidStatusTitle',
@@ -295,7 +292,6 @@ function ConfirmationErrorAlert({
 
   return (
     <Alert variant="destructive" className="mt-3" data-ai-confirmation-error={code}>
-      <AlertTriangle className="size-4" aria-hidden />
       <AlertTitle>
         {t('ai_assistant.chat.mutation_cards.confirmation.errorTitle', 'Confirm failed')}
       </AlertTitle>

package/src/ai/parts/FieldDiffCard.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from 'react'
-import { Info } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Alert, AlertDescription } from '../../primitives/alert'
 import type {
@@ -129,7 +128,6 @@ export function FieldDiffCard({ fieldDiff, records }: FieldDiffCardProps) {
               />
             ) : (
               <Alert variant="info">
-                <Info className="size-4" aria-hidden />
                 <AlertDescription>
                   {t(
                     'ai_assistant.chat.mutation_cards.diff.empty',
@@ -147,7 +145,6 @@ export function FieldDiffCard({ fieldDiff, records }: FieldDiffCardProps) {
   if (flat.length === 0) {
     return (
       <Alert variant="info" data-ai-field-diff-mode="empty">
-        <Info className="size-4" aria-hidden />
         <AlertDescription>
           {t(
             'ai_assistant.chat.mutation_cards.diff.empty',

package/src/ai/parts/MutationResultCard.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from 'react'
-import { AlertTriangle, CheckCircle2, Wand2, XCircle } from 'lucide-react'
+import { Wand2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Alert, AlertDescription, AlertTitle } from '../../primitives/alert'
 import { Button } from '../../primitives/button'
@@ -80,7 +80,6 @@ export function MutationResultCard(props: MutationResultCardProps) {
   if (isSuccessStatus(status) && failedRecords && failedRecords.length > 0) {
     return (
       <Alert variant="warning" data-ai-mutation-result="partial">
-        <AlertTriangle className="size-4" aria-hidden />
         <AlertTitle>
           {t(
             'ai_assistant.chat.mutation_cards.result.partialTitle',
@@ -118,7 +117,6 @@ export function MutationResultCard(props: MutationResultCardProps) {
     const href = payload.recordHref ?? null
     return (
       <Alert variant="success" data-ai-mutation-result="success">
-        <CheckCircle2 className="size-4" aria-hidden />
         <AlertTitle>
           {t('ai_assistant.chat.mutation_cards.result.successTitle', 'Action applied')}
         </AlertTitle>
@@ -296,7 +294,6 @@ export function MutationResultCard(props: MutationResultCardProps) {
       : []
     return (
       <Alert variant="destructive" data-ai-mutation-result="failure">
-        <XCircle className="size-4" aria-hidden />
         <AlertTitle>
           {t(
             'ai_assistant.chat.mutation_cards.result.failureTitle',

package/src/ai/parts/__tests__/MutationResultCard.test.tsx

@@ -78,6 +78,11 @@ describe('MutationResultCard', () => {
     expect(
       document.querySelector('[data-ai-mutation-result="success"]'),
     ).not.toBeNull()
+    expect(
+      document.querySelectorAll(
+        '[data-ai-mutation-result="success"] [data-slot="alert-icon-badge"]',
+      ),
+    ).toHaveLength(1)
     expect(screen.getByText('Action applied')).toBeInTheDocument()
     const link = document.querySelector('[data-ai-mutation-result-link]') as HTMLAnchorElement
     expect(link).not.toBeNull()

package/src/ai/ui-parts/pending-phase3-placeholder.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from 'react'
-import { Info } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Alert, AlertDescription, AlertTitle } from '../../primitives/alert'
 import type { AiUiPartProps } from '../ui-part-registry'
@@ -27,7 +26,6 @@ export function PendingPhase3Placeholder({ componentId }: AiUiPartProps) {
       variant="info"
       data-ai-ui-part-pending-phase3={componentId}
     >
-      <Info className="size-4" aria-hidden />
       <AlertTitle>
         {t(
           'ai_assistant.chat.pending_phase3.title',

package/src/ai/useAiChat.ts

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { createAiAgentTransport } from '@open-mercato/ai-assistant/modules/ai_assistant/lib/agent-transport'
 import { apiFetch } from '../backend/utils/api'
+import type { LoopTracePanelTrace } from './LoopTracePanel'
 
 /**
  * Chat message shape used by {@link AiChat}. Kept intentionally minimal so the
@@ -102,6 +103,15 @@ export interface UseAiChatResult {
    * given mount (Phase 3 WS-D contract with `prepareMutation`).
    */
   conversationId: string
+  /**
+   * Loop trace from the last completed turn. Populated when the dispatcher
+   * emits a `loop-finish` SSE event at the end of the response stream.
+   * `null` until the first turn completes or when the dispatcher does not
+   * emit trace events (non-debug deployments may omit them).
+   *
+   * Phase 4 of spec `2026-04-28-ai-agents-agentic-loop-controls`.
+   */
+  lastLoopTrace: LoopTracePanelTrace | null
   sendMessage: (input: string, files?: AiChatMessageFile[]) => Promise<void>
   cancel: () => void
   reset: () => void
@@ -432,6 +442,11 @@ function updateToolCall(
   return { ...state, toolCalls: nextCalls }
 }
 
+function displayToolName(toolName: unknown): string | undefined {
+  if (typeof toolName !== 'string') return undefined
+  return toolName.replace(/__/g, '.')
+}
+
 function applyChunk(
   state: AssistantBuilderState,
   chunk: { type: string; [key: string]: unknown },
@@ -455,12 +470,12 @@ function applyChunk(
       return { ...state, reasoningStreaming: false }
     case 'tool-input-start':
       return updateToolCall(state, String(chunk.toolCallId ?? ''), {
-        toolName: typeof chunk.toolName === 'string' ? chunk.toolName : undefined,
+        toolName: displayToolName(chunk.toolName),
         state: 'pending',
       })
     case 'tool-input-available':
       return updateToolCall(state, String(chunk.toolCallId ?? ''), {
-        toolName: typeof chunk.toolName === 'string' ? chunk.toolName : undefined,
+        toolName: displayToolName(chunk.toolName),
         input: chunk.input,
         state: 'pending',
       })
@@ -496,7 +511,7 @@ function applyChunk(
       })
     case 'tool-input-error':
       return updateToolCall(state, String(chunk.toolCallId ?? ''), {
-        toolName: typeof chunk.toolName === 'string' ? chunk.toolName : undefined,
+        toolName: displayToolName(chunk.toolName),
         input: chunk.input,
         state: 'error',
         errorMessage:
@@ -719,6 +734,8 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
     { status: number; text: string } | null
   >(null)
 
+  const [lastLoopTrace, setLastLoopTrace] = React.useState<LoopTracePanelTrace | null>(null)
+
   const abortRef = React.useRef<AbortController | null>(null)
   const onErrorRef = React.useRef(onError)
   React.useEffect(() => {
@@ -752,6 +769,7 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
     setError(null)
     setLastRequestDebug(null)
     setLastResponseDebug(null)
+    setLastLoopTrace(null)
     clearPersistedSession(agent, persistKey)
     mintedConversationIdRef.current = makeConversationId()
   }, [agent, cancel, persistKey, updateMessages])
@@ -857,6 +875,10 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
         return
       }
 
+      // Per-turn loop trace collected from the `loop-finish` SSE event emitted
+      // by the dispatcher at the end of the stream (Phase 4).
+      let pendingLoopTrace: LoopTracePanelTrace | null = null
+
       const headerGet = (name: string): string | null => {
         const headers = (response as { headers?: { get?: (k: string) => string | null } })
           .headers
@@ -886,8 +908,12 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
           if (!data) continue
           if (data === '[DONE]') continue
           try {
-            const parsed = JSON.parse(data) as { type?: string }
-            if (parsed && typeof parsed.type === 'string') {
+            const parsed = JSON.parse(data) as { type?: string; trace?: unknown }
+            if (!parsed || typeof parsed.type !== 'string') continue
+            if (parsed.type === 'loop-finish') {
+              // Capture the loop trace for post-stream state update.
+              pendingLoopTrace = parsed.trace as LoopTracePanelTrace ?? null
+            } else {
               builder = applyChunk(builder, parsed as { type: string })
             }
           } catch {
@@ -946,6 +972,9 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
         )
         if (mountedRef.current) {
           setLastResponseDebug({ status: response.status, text: streamedRaw })
+          if (pendingLoopTrace !== null) {
+            setLastLoopTrace(pendingLoopTrace)
+          }
         }
         const isEmpty =
           !builder.text.trim() && builder.toolCalls.length === 0 && !builder.reasoning
@@ -1047,6 +1076,7 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
     lastRequestDebug,
     lastResponseDebug,
     conversationId: effectiveConversationId,
+    lastLoopTrace,
     sendMessage,
     cancel,
     reset,

package/src/backend/CrudForm.tsx

@@ -407,6 +407,22 @@ function readInitialCustomFieldValue(
   return undefined
 }
 
+function readRenderedFieldValue(
+  source: Record<string, unknown>,
+  fieldId: string,
+): unknown {
+  if (Object.prototype.hasOwnProperty.call(source, fieldId)) {
+    return source[fieldId]
+  }
+  if (fieldId.startsWith('cf_')) {
+    return readInitialCustomFieldValue(source, fieldId.slice(3))
+  }
+  if (fieldId.startsWith('cf:')) {
+    return readInitialCustomFieldValue(source, fieldId.slice(3))
+  }
+  return undefined
+}
+
 function serializeIssuePath(path: ReadonlyArray<string | number | symbol>): string | null {
   if (!Array.isArray(path) || path.length === 0) return null
   const segments = path
@@ -837,9 +853,18 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         if (!target || navigationPromptBypassRef.current || submitNavigationBypassRef.current) {
           return original(data, unused, url)
         }
+        if (!isDirtyRef.current) {
+          return original(data, unused, url)
+        }
         if (shouldBypassUnsavedChangesGuardRef.current?.(target)) {
           return original(data, unused, url)
         }
+        const baselineSnapshot = dirtyBaselineSnapshotRef.current
+        if (baselineSnapshot && JSON.stringify(valuesRef.current) === baselineSnapshot) {
+          isDirtyRef.current = false
+          setHasUnsavedChanges(false)
+          return original(data, unused, url)
+        }
         if (navigationConfirmPendingRef.current) {
           return undefined
         }
@@ -2677,7 +2702,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
             <FieldControl
               key={f.id}
               field={f}
-              value={values[f.id]}
+              value={readRenderedFieldValue(values as Record<string, unknown>, f.id)}
               error={errors[f.id]}
               options={fieldOptionsById.get(f.id) || EMPTY_OPTIONS}
               setValue={setValue}
@@ -4081,9 +4106,11 @@ const FieldControl = React.memo(function FieldControlImpl({
                 : String(value)
           }
           onValueChange={(next) => {
-            // Sentinel maps back to undefined so optional selects can be cleared.
+            // Custom field clears must be explicit nulls; normal optional
+            // fields keep the existing undefined clear semantics.
             if (!next || next === SELECT_CLEAR_SENTINEL) {
-              setValue(field.id, undefined)
+              const isCustomField = field.id.startsWith('cf_') || field.id.startsWith('cf:')
+              setValue(field.id, isCustomField ? null : undefined)
               return
             }
             setValue(field.id, next)

package/src/backend/DataTable.tsx

@@ -1975,7 +1975,7 @@ export function DataTable<T>({
         )).sort((left, right) => left - right)
       : []
     const pageSizeSelect = pageSizeOptions.length > 0 && pagination.onPageSizeChange ? (
-      <span className="inline-flex items-center gap-1.5">
+      <span className="inline-flex flex-none items-center gap-1.5 whitespace-nowrap">
         <Select
           value={String(pagination.pageSize)}
           onValueChange={(value) => {
@@ -1995,7 +1995,7 @@ export function DataTable<T>({
             ))}
           </SelectContent>
         </Select>
-        <span className="text-muted-foreground">{t('ui.dataTable.pagination.perPage', 'per page')}</span>
+        <span className="whitespace-nowrap text-muted-foreground">{t('ui.dataTable.pagination.perPage', 'per page')}</span>
       </span>
     ) : null
 

package/src/backend/__tests__/CrudForm.custom-fields.test.tsx

@@ -204,6 +204,78 @@ describe('CrudForm custom field loading', () => {
     expect(loadOptions).toHaveBeenCalled()
   })
 
+  it('renders custom select values from bare-key initialValues', async () => {
+    buildFormFieldFromCustomFieldDefMock.mockImplementation((definition: any) => ({
+      id: `cf_${definition.key}`,
+      label: definition.label ?? definition.key,
+      type: 'select',
+      options: definition.options,
+    }))
+    fetchCustomFieldFormStructureMock.mockResolvedValue({
+      fields: [],
+      definitions: [
+        {
+          entityId: 'customers:customer_company_profile',
+          key: 'relationship_health',
+          label: 'Relationship health',
+          kind: 'select',
+          options: [
+            { value: 'healthy', label: 'Healthy' },
+            { value: 'monitor', label: 'Monitor' },
+            { value: 'at_risk', label: 'At risk' },
+          ],
+        },
+        {
+          entityId: 'customers:customer_company_profile',
+          key: 'renewal_quarter',
+          label: 'Renewal quarter',
+          kind: 'select',
+          options: [
+            { value: 'Q1', label: 'Q1' },
+            { value: 'Q2', label: 'Q2' },
+            { value: 'Q3', label: 'Q3' },
+            { value: 'Q4', label: 'Q4' },
+          ],
+        },
+      ],
+      metadata: {
+        items: [],
+        fieldsetsByEntity: {},
+        entitySettings: {},
+      },
+    })
+
+    const { container } = renderWithProviders(
+      <CrudForm
+        embedded
+        title="Form"
+        entityId="customers:customer_company_profile"
+        fields={fields}
+        groups={groups}
+        initialValues={{ name: 'Acme', relationship_health: 'healthy', renewal_quarter: 'Q3' }}
+        onSubmit={() => {}}
+      />,
+      {
+        dict: {
+          'ui.forms.actions.save': 'Save',
+          'entities.customFields.manageFieldset': 'Manage fields',
+        },
+      },
+    )
+
+    const getSelectValue = (fieldId: string) =>
+      (container.querySelector(`[data-crud-field-id="${fieldId}"] select`) as HTMLSelectElement | null)?.value
+
+    await waitFor(() => {
+      expect(getSelectValue('cf_relationship_health')).toBe('healthy')
+    })
+    await waitFor(() => {
+      expect(getSelectValue('cf_renewal_quarter')).toBe('Q3')
+    })
+    expect(container.querySelector('[data-crud-field-id="cf_relationship_health"]')?.textContent).toContain('Healthy')
+    expect(container.querySelector('[data-crud-field-id="cf_renewal_quarter"]')?.textContent).toContain('Q3')
+  })
+
   it('opens the field manager without submitting the parent form', async () => {
     const handleSubmit = jest.fn().mockResolvedValue(undefined)