@open-mercato/ui 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3287.1.450f4ffb56

package/src/backend/filters/QuickFilters.tsx

@@ -0,0 +1,62 @@
+// packages/ui/src/backend/filters/QuickFilters.tsx
+'use client'
+import * as React from 'react'
+import { Clock, Filter, type LucideIcon } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { AdvancedFilterTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+
+export type FilterPreset = {
+  id: string
+  labelKey: string
+  iconName?: string
+  requiresUser?: boolean
+  build: (ctx: { userId: string; now: Date }) => AdvancedFilterTree
+}
+
+const ICONS: Record<string, LucideIcon> = { clock: Clock, filter: Filter }
+
+export type QuickFiltersProps = {
+  presets: FilterPreset[]
+  userId: string
+  onApply: (tree: AdvancedFilterTree, preset: FilterPreset) => void
+}
+
+export function QuickFilters({ presets, userId, onApply }: QuickFiltersProps) {
+  const t = useT()
+  const availablePresets = React.useMemo(
+    () => presets.filter((preset) => !preset.requiresUser || userId.trim().length > 0),
+    [presets, userId],
+  )
+  if (!availablePresets.length) return null
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-overline font-medium uppercase tracking-widest text-muted-foreground">
+        {t('ui.advancedFilter.quickFilters.heading', 'Quick filters')}
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {availablePresets.map((p) => {
+          const Icon = p.iconName ? ICONS[p.iconName] ?? Filter : Filter
+          return (
+            <Button
+              key={p.id}
+              type="button"
+              variant="outline"
+              size="sm"
+              className="rounded-full h-8 px-3 gap-1.5"
+              onClick={() => onApply(p.build({ userId, now: new Date() }), p)}
+            >
+              <Icon className="size-3.5 text-muted-foreground" />
+              {t(p.labelKey, p.labelKey)}
+            </Button>
+          )
+        })}
+      </div>
+      {/* Footer hint mirrors the Figma SPEC-048 empty state — explains that
+          presets apply immediately and remain editable. */}
+      <p className="text-xs text-muted-foreground">
+        {t('ui.advancedFilter.quickFilters.hint', 'Click a quick filter to apply it instantly. Editable after applying.')}
+      </p>
+    </div>
+  )
+}

package/src/backend/filters/__tests__/ActiveFilterChips.test.tsx

@@ -0,0 +1,75 @@
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ActiveFilterChips } from '../ActiveFilterChips'
+import type { AdvancedFilterTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+import type { FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'
+
+const fields: FilterFieldDef[] = [
+  { key: 'status', label: 'Status', type: 'select', options: [{ value: 'active', label: 'Active', tone: 'success' }] },
+  { key: 'owner', label: 'Owner', type: 'text' },
+  { key: 'tags', label: 'Tags', type: 'tags', options: [{ value: 't1', label: 'Hot' }, { value: 't2', label: 'Cold' }] },
+]
+
+function tree(...children: any[]): AdvancedFilterTree {
+  return { root: { id: 'r', type: 'group', combinator: 'and', children } }
+}
+
+describe('ActiveFilterChips', () => {
+  it('renders nothing when root has no children', () => {
+    const { container } = render(<ActiveFilterChips tree={tree()} fields={fields} popoverOpen={false} onRemoveNode={() => {}} onOpen={() => {}} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('hides chips when popover is open', () => {
+    const t = tree({ id: 'a', type: 'rule', field: 'status', operator: 'is', value: 'active' })
+    const { container } = render(<ActiveFilterChips tree={t} fields={fields} popoverOpen={true} onRemoveNode={() => {}} onOpen={() => {}} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders one chip per top-level rule with field label and value', () => {
+    const t = tree({ id: 'a', type: 'rule', field: 'status', operator: 'is', value: 'active' })
+    render(<ActiveFilterChips tree={t} fields={fields} popoverOpen={false} onRemoveNode={() => {}} onOpen={() => {}} />)
+    expect(screen.getByText(/Status/)).toBeInTheDocument()
+    expect(screen.getByText(/Active/)).toBeInTheDocument()
+  })
+
+  it('renders multi-value rule with first value + N badge', () => {
+    const t = tree({ id: 'a', type: 'rule', field: 'tags', operator: 'has_any_of', value: ['t1', 't2'] })
+    render(<ActiveFilterChips tree={t} fields={fields} popoverOpen={false} onRemoveNode={() => {}} onOpen={() => {}} />)
+    expect(screen.getByText(/Hot/)).toBeInTheDocument()
+    expect(screen.getByText(/\+1/)).toBeInTheDocument()
+  })
+
+  it('collapses sub-group into one chip with first rule + remaining count', () => {
+    const t = tree({
+      id: 'g1',
+      type: 'group',
+      combinator: 'or',
+      children: [
+        { id: 'r1', type: 'rule', field: 'status', operator: 'is', value: 'active' },
+        { id: 'r2', type: 'rule', field: 'status', operator: 'is', value: 'lead' },
+        { id: 'r3', type: 'rule', field: 'status', operator: 'is', value: 'won' },
+      ],
+    })
+    render(<ActiveFilterChips tree={t} fields={fields} popoverOpen={false} onRemoveNode={() => {}} onOpen={() => {}} />)
+    expect(screen.getByText(/\+2/)).toBeInTheDocument()
+  })
+
+  it('calls onRemoveNode with the rule id when × is clicked', () => {
+    const t = tree({ id: 'a', type: 'rule', field: 'status', operator: 'is', value: 'active' })
+    const onRemoveNode = jest.fn()
+    render(<ActiveFilterChips tree={t} fields={fields} popoverOpen={false} onRemoveNode={onRemoveNode} onOpen={() => {}} />)
+    fireEvent.click(screen.getByLabelText(/remove/i))
+    expect(onRemoveNode).toHaveBeenCalledWith('a')
+  })
+
+  it('truncates long values at 24 chars', () => {
+    const longLabel = 'A'.repeat(40)
+    const t = tree({ id: 'a', type: 'rule', field: 'owner', operator: 'is', value: longLabel })
+    render(<ActiveFilterChips tree={t} fields={fields} popoverOpen={false} onRemoveNode={() => {}} onOpen={() => {}} />)
+    expect(screen.getByText(/A{1,24}…/)).toBeInTheDocument()
+  })
+})

package/src/backend/filters/__tests__/AdvancedFilterBuilder.test.tsx

@@ -0,0 +1,210 @@
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { AdvancedFilterBuilder } from '../AdvancedFilterBuilder'
+import { createEmptyTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+
+const fields = [
+  { key: 'name', label: 'Name', type: 'text' as const, group: 'CRM' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'select' as const,
+    group: 'CRM',
+    options: [{ value: 'a', label: 'Active', tone: 'success' as const }],
+  },
+]
+
+describe('AdvancedFilterBuilder — rewrite', () => {
+  it('renders nothing inside the body when tree has no rules', () => {
+    const tree = createEmptyTree()
+    render(
+      <AdvancedFilterBuilder
+        fields={fields}
+        value={tree}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+      />,
+    )
+    // Empty tree → no group toolbar, no row labels, no connector words.
+    expect(screen.queryByTestId('advanced-filter-combinator-toggle')).not.toBeInTheDocument()
+    expect(screen.queryByText(/^where:?$/i)).not.toBeInTheDocument()
+    expect(screen.queryByText(/^and$/i)).not.toBeInTheDocument()
+    expect(screen.queryByText(/^or$/i)).not.toBeInTheDocument()
+  })
+
+  it('renders the Kendo-style And/Or toggle once the root group has rules — no Where prefix, no row connector words', () => {
+    const tree = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [
+          {
+            id: 'a',
+            type: 'rule' as const,
+            field: 'name',
+            operator: 'contains' as const,
+            value: 'X',
+          } as any,
+          {
+            id: 'b',
+            type: 'rule' as const,
+            field: 'name',
+            operator: 'contains' as const,
+            value: 'Y',
+          } as any,
+        ],
+      },
+    }
+    render(
+      <AdvancedFilterBuilder
+        fields={fields}
+        value={tree}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+      />,
+    )
+    const toggle = screen.getByTestId('advanced-filter-combinator-toggle')
+    expect(toggle).toBeInTheDocument()
+    expect(toggle).toHaveAttribute('data-combinator', 'and')
+    // Toggle exposes both choices as buttons with aria-pressed reflecting selection.
+    const andBtn = screen.getByRole('button', { name: /^And$/, pressed: true })
+    const orBtn = screen.getByRole('button', { name: /^Or$/, pressed: false })
+    expect(andBtn).toBeInTheDocument()
+    expect(orBtn).toBeInTheDocument()
+    // No "Where" prefix and no inline `and` / `or` row words anywhere.
+    expect(screen.queryByText(/^where:?$/i)).not.toBeInTheDocument()
+    expect(screen.queryByText(/^and$/)).not.toBeInTheDocument()
+    expect(screen.queryByText(/^or$/)).not.toBeInTheDocument()
+  })
+
+  it('clicking the unselected side of the toggle dispatches updateGroupCombinator', () => {
+    const onChange = jest.fn()
+    const tree = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [
+          {
+            id: 'a',
+            type: 'rule' as const,
+            field: 'name',
+            operator: 'contains' as const,
+            value: 'X',
+          } as any,
+        ],
+      },
+    }
+    render(
+      <AdvancedFilterBuilder
+        fields={fields}
+        value={tree}
+        onChange={onChange}
+        onApply={() => {}}
+        onClear={() => {}}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /^Or$/, pressed: false }))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const next = onChange.mock.calls[0][0]
+    expect(next.root.combinator).toBe('or')
+  })
+
+  it('renders a nested toolbar for a sub-group with combinator=or', () => {
+    const tree = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [
+          {
+            id: 'g',
+            type: 'group' as const,
+            combinator: 'or' as const,
+            children: [
+              {
+                id: 'a',
+                type: 'rule' as const,
+                field: 'name',
+                operator: 'contains' as const,
+                value: 'X',
+              } as any,
+            ],
+          } as any,
+        ],
+      },
+    }
+    render(
+      <AdvancedFilterBuilder
+        fields={fields}
+        value={tree}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+      />,
+    )
+    const toggles = screen.getAllByTestId('advanced-filter-combinator-toggle')
+    expect(toggles).toHaveLength(2)
+    expect(toggles.map((el) => el.getAttribute('data-combinator')).sort()).toEqual(['and', 'or'])
+  })
+
+  it('Cmd+Enter calls onApply', () => {
+    const onApply = jest.fn()
+    const tree = createEmptyTree()
+    render(
+      <AdvancedFilterBuilder
+        fields={fields}
+        value={tree}
+        onChange={() => {}}
+        onApply={onApply}
+        onClear={() => {}}
+      />,
+    )
+    fireEvent.keyDown(window, { key: 'Enter', metaKey: true })
+    expect(onApply).toHaveBeenCalled()
+  })
+
+  it('renders red ring + translated error message when pendingErrors include the rule', () => {
+    const tree = {
+      root: {
+        id: 'r',
+        type: 'group' as const,
+        combinator: 'and' as const,
+        children: [
+          {
+            id: 'a',
+            type: 'rule' as const,
+            field: 'name',
+            operator: 'contains' as const,
+            value: '',
+          } as any,
+        ],
+      },
+    }
+    const errors = [
+      {
+        ruleId: 'a',
+        messageKey: 'ui.advancedFilter.error.missingValue',
+        message: 'Pick a value',
+      },
+    ]
+    const { container } = render(
+      <AdvancedFilterBuilder
+        fields={fields}
+        value={tree}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+        pendingErrors={errors}
+      />,
+    )
+    expect(container.querySelector('.border-status-error-border')).not.toBeNull()
+    expect(container.textContent).toContain('Pick a value')
+  })
+})

package/src/backend/filters/__tests__/AdvancedFilterPanel.test.tsx

@@ -0,0 +1,212 @@
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string, vars?: Record<string, unknown>) => {
+    if (!vars) return fallback
+    return Object.entries(vars).reduce((s, [k, v]) => s.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v)), fallback)
+  },
+}))
+
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { AdvancedFilterPanel } from '../AdvancedFilterPanel'
+import { createEmptyTree } from '@open-mercato/shared/lib/query/advanced-filter-tree'
+import type { FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'
+
+const fields: FilterFieldDef[] = [{ key: 'name', label: 'Name', type: 'text', group: 'CRM' }]
+const flashMock = jest.fn()
+
+jest.mock('../../FlashMessages', () => ({
+  flash: (...args: unknown[]) => flashMock(...args),
+}))
+
+describe('AdvancedFilterPanel', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+    flashMock.mockReset()
+  })
+
+  it('renders the empty state when tree has no rules and popover is open', () => {
+    render(
+      <AdvancedFilterPanel
+        fields={fields}
+        value={createEmptyTree()}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+        pendingErrors={[]}
+        userId="u1"
+        presets={[]}
+        open
+        onOpenChange={() => {}}
+        triggerRef={{ current: null }}
+      />,
+    )
+    expect(screen.getByText(/no filters applied/i)).toBeInTheDocument()
+  })
+
+  it('shows validation banner when pendingErrors is non-empty', () => {
+    const tree = { root: { id: 'r', type: 'group' as const, combinator: 'and' as const, children: [
+      { id: 'a', type: 'rule' as const, field: 'name', operator: 'contains' as const, value: '' } as any,
+    ] } }
+    render(
+      <AdvancedFilterPanel
+        fields={fields}
+        value={tree}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+        pendingErrors={[{ ruleId: 'a', messageKey: 'ui.advancedFilter.error.missingValue', message: 'Pick a value' }]}
+        userId="u1"
+        presets={[]}
+        open
+        onOpenChange={() => {}}
+        triggerRef={{ current: null }}
+      />,
+    )
+    expect(screen.getByText(/1 filter is incomplete/i)).toBeInTheDocument()
+  })
+
+  it('renders quick filters in empty state when presets provided', () => {
+    const presets = [{ id: 'p1', labelKey: 'p1', build: () => createEmptyTree() }]
+    render(
+      <AdvancedFilterPanel
+        fields={fields}
+        value={createEmptyTree()}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+        pendingErrors={[]}
+        userId="u1"
+        presets={presets}
+        open
+        onOpenChange={() => {}}
+        triggerRef={{ current: null }}
+      />,
+    )
+    expect(screen.getByText(/quick filters/i)).toBeInTheDocument()
+  })
+
+  it('does not render the empty state when tree has rules', () => {
+    const tree = { root: { id: 'r', type: 'group' as const, combinator: 'and' as const, children: [
+      { id: 'a', type: 'rule' as const, field: 'name', operator: 'contains' as const, value: 'X' } as any,
+    ] } }
+    render(
+      <AdvancedFilterPanel
+        fields={fields}
+        value={tree}
+        onChange={() => {}}
+        onApply={() => {}}
+        onClear={() => {}}
+        pendingErrors={[]}
+        userId="u1"
+        presets={[]}
+        open
+        onOpenChange={() => {}}
+        triggerRef={{ current: null }}
+      />,
+    )
+    expect(screen.queryByText(/no filters applied/i)).not.toBeInTheDocument()
+  })
+
+  it('saves filters separately from perspectives', async () => {
+    const tree = { root: { id: 'r', type: 'group' as const, combinator: 'and' as const, children: [
+      { id: 'a', type: 'rule' as const, field: 'name', operator: 'contains' as const, value: 'Alice' } as any,
+    ] } }
+    const originalFetch = globalThis.fetch
+    const fetchMock = jest.fn()
+    ;(globalThis as typeof globalThis & { fetch: typeof fetch }).fetch = fetchMock as unknown as typeof fetch
+
+    try {
+      render(
+        <AdvancedFilterPanel
+          fields={fields}
+          value={tree}
+          onChange={() => {}}
+          onApply={() => {}}
+          onClear={() => {}}
+          pendingErrors={[]}
+          userId="u1"
+          presets={[]}
+          open
+          onOpenChange={() => {}}
+          triggerRef={{ current: null }}
+          savedFilterStorageKey="customers.people.list"
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Save filter' }))
+      fireEvent.change(screen.getByLabelText('Filter name'), { target: { value: 'Owned leads' } })
+      const dialog = screen.getByRole('dialog', { name: 'Save filter' })
+      fireEvent.click(within(dialog).getByRole('button', { name: 'Save filter' }))
+
+      await waitFor(() => expect(flashMock).toHaveBeenCalledWith('Filter saved', 'success'))
+      expect(fetchMock).not.toHaveBeenCalled()
+      const raw = window.localStorage.getItem('open-mercato:advanced-filters:customers.people.list')
+      expect(raw).toBeTruthy()
+      const saved = JSON.parse(String(raw))
+      expect(saved).toEqual({
+        v: 1,
+        filters: [
+          expect.objectContaining({
+            name: 'Owned leads',
+            tree: expect.objectContaining({ v: 2 }),
+          }),
+        ],
+      })
+    } finally {
+      if (originalFetch) {
+        globalThis.fetch = originalFetch
+      } else {
+        delete (globalThis as typeof globalThis & { fetch?: typeof fetch }).fetch
+      }
+    }
+  })
+
+  it('applies a saved filter from the filter panel', async () => {
+    window.localStorage.setItem('open-mercato:advanced-filters:customers.people.list', JSON.stringify([
+      {
+        id: 'saved-1',
+        name: 'Owned leads',
+        tree: {
+          v: 2,
+          root: {
+            id: 'saved-root',
+            type: 'group',
+            combinator: 'and',
+            children: [
+              { id: 'saved-rule', type: 'rule', field: 'name', operator: 'contains', value: 'Alice' },
+            ],
+          },
+        },
+        createdAt: '2026-05-10T00:00:00.000Z',
+        updatedAt: '2026-05-10T00:00:00.000Z',
+      },
+    ]))
+    const onChange = jest.fn()
+    const onOpenChange = jest.fn()
+
+    render(
+      <AdvancedFilterPanel
+        fields={fields}
+        value={createEmptyTree()}
+        onChange={onChange}
+        onApply={() => {}}
+        onClear={() => {}}
+        pendingErrors={[]}
+        userId="u1"
+        presets={[]}
+        open
+        onOpenChange={onOpenChange}
+        triggerRef={{ current: null }}
+        savedFilterStorageKey="customers.people.list"
+      />,
+    )
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Owned leads' }))
+
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+      root: expect.objectContaining({
+        children: [expect.objectContaining({ field: 'name', value: 'Alice' })],
+      }),
+    }))
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+})

package/src/backend/filters/__tests__/FilterEmptyState.test.tsx

@@ -0,0 +1,31 @@
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { FilterEmptyState } from '../FilterEmptyState'
+
+describe('FilterEmptyState', () => {
+  it('renders title, subtitle, and primary "Add condition" button', () => {
+    render(<FilterEmptyState onAddCondition={() => {}} addConditionRef={{ current: null }} />)
+    expect(screen.getByText(/no filters applied/i)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /add condition/i })).toBeInTheDocument()
+  })
+
+  it('calls onAddCondition on click', () => {
+    const onAdd = jest.fn()
+    render(<FilterEmptyState onAddCondition={onAdd} addConditionRef={{ current: null }} />)
+    fireEvent.click(screen.getByRole('button', { name: /add condition/i }))
+    expect(onAdd).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders quickFilters slot when provided', () => {
+    render(<FilterEmptyState onAddCondition={() => {}} addConditionRef={{ current: null }} quickFilters={<div data-testid="qf">qf</div>} />)
+    expect(screen.getByTestId('qf')).toBeInTheDocument()
+  })
+
+  it('renders aiSlot when provided', () => {
+    render(<FilterEmptyState onAddCondition={() => {}} addConditionRef={{ current: null }} aiSlot={<div data-testid="ai">try</div>} />)
+    expect(screen.getByTestId('ai')).toBeInTheDocument()
+  })
+})

package/src/backend/filters/__tests__/FilterFieldPicker.test.tsx

@@ -0,0 +1,61 @@
+// packages/ui/src/backend/filters/__tests__/FilterFieldPicker.test.tsx
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { FilterFieldPicker } from '../FilterFieldPicker'
+import type { FilterFieldDef } from '@open-mercato/shared/lib/query/advanced-filter'
+
+const fields: FilterFieldDef[] = [
+  { key: 'owner', label: 'Owner', type: 'text', group: 'CRM', iconName: 'user-round' },
+  { key: 'status', label: 'Status', type: 'select', group: 'CRM' },
+  { key: 'created_at', label: 'Created date', type: 'date', group: 'Activity' },
+  { key: 'email', label: 'Email', type: 'text', group: 'Contact', iconName: 'mail' },
+]
+
+describe('FilterFieldPicker', () => {
+  it('renders fields grouped by group label', () => {
+    render(<FilterFieldPicker fields={fields} open onSelect={() => {}} onOpenChange={() => {}} triggerRef={{ current: null }} />)
+    expect(screen.getByText('CRM')).toBeInTheDocument()
+    expect(screen.getByText('Activity')).toBeInTheDocument()
+    expect(screen.getByText('Contact')).toBeInTheDocument()
+  })
+
+  it('filters by search input substring (case-insensitive)', () => {
+    render(<FilterFieldPicker fields={fields} open onSelect={() => {}} onOpenChange={() => {}} triggerRef={{ current: null }} />)
+    fireEvent.change(screen.getByPlaceholderText(/search field/i), { target: { value: 'em' } })
+    expect(screen.getByText('Email')).toBeInTheDocument()
+    expect(screen.queryByText('Owner')).not.toBeInTheDocument()
+  })
+
+  it('selects a field on Enter via keyboard', () => {
+    const onSelect = jest.fn()
+    render(<FilterFieldPicker fields={fields} open onSelect={onSelect} onOpenChange={() => {}} triggerRef={{ current: null }} />)
+    fireEvent.change(screen.getByPlaceholderText(/search field/i), { target: { value: 'owner' } })
+    fireEvent.keyDown(window, { key: 'ArrowDown' })
+    fireEvent.keyDown(window, { key: 'Enter' })
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: 'owner' }))
+  })
+
+  it('selects a field on click', () => {
+    const onSelect = jest.fn()
+    render(<FilterFieldPicker fields={fields} open onSelect={onSelect} onOpenChange={() => {}} triggerRef={{ current: null }} />)
+    fireEvent.click(screen.getByText('Status'))
+    expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ key: 'status' }))
+  })
+
+  it('closes on Escape', () => {
+    const onOpenChange = jest.fn()
+    render(<FilterFieldPicker fields={fields} open onSelect={() => {}} onOpenChange={onOpenChange} triggerRef={{ current: null }} />)
+    fireEvent.keyDown(window, { key: 'Escape' })
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('renders explicit iconName when provided', () => {
+    render(<FilterFieldPicker fields={fields} open onSelect={() => {}} onOpenChange={() => {}} triggerRef={{ current: null }} />)
+    // Email has iconName='mail'; row contains a Mail icon (lucide-react renders an svg with class)
+    const emailRow = screen.getByText('Email').closest('button, li, [role="option"]')!
+    expect(emailRow.querySelector('svg')).not.toBeNull()
+  })
+})