@open-mercato/core 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/src/modules/dictionaries/fields/dictionary.tsx

@@ -5,6 +5,13 @@ import type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudFo
 import { FieldRegistry } from '@open-mercato/ui/backend/fields/registry'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { DictionarySelectControl } from '../components/DictionarySelectControl'
 import { useDictionaryEntries } from '../components/hooks/useDictionaryEntries'
 
@@ -42,18 +49,21 @@ function DictionaryDefaultSelector({
       <label className="text-xs font-medium text-muted-foreground">
         {t('dictionaries.customFields.defaultValue', 'Default value')}
       </label>
-      <select
-        className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        value={defaultValue}
-        onChange={(event) => onChange(event.target.value)}
+      <Select
+        value={defaultValue || undefined}
+        onValueChange={(next) => onChange(next ?? '')}
       >
-        <option value="">{t('dictionaries.customFields.defaultValueNone', 'No default')}</option>
-        {entries.map((entry) => (
-          <option key={entry.value} value={entry.value}>
-            {entry.label}
-          </option>
-        ))}
-      </select>
+        <SelectTrigger size="sm">
+          <SelectValue placeholder={t('dictionaries.customFields.defaultValueNone', 'No default')} />
+        </SelectTrigger>
+        <SelectContent>
+          {entries.map((entry) => (
+            <SelectItem key={entry.value} value={entry.value}>
+              {entry.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
       {isLoading ? (
         <p className="text-xs text-muted-foreground">
           {t('dictionaries.customFields.loading', 'Loading dictionaries…')}
@@ -126,19 +136,22 @@ function DictionaryFieldDefEditor({ def, onChange }: { def: { configJson?: Dicti
         <label className="text-xs font-medium text-muted-foreground">
           {t('dictionaries.customFields.dictionaryLabel', 'Dictionary source')}
         </label>
-        <select
-          className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          value={selectedId}
-          onChange={(event) => onChange({ dictionaryId: event.target.value || undefined })}
+        <Select
+          value={selectedId || undefined}
+          onValueChange={(next) => onChange({ dictionaryId: next || undefined })}
         >
-          <option value="">{t('dictionaries.customFields.dictionaryPlaceholder', 'Select a dictionary')}</option>
-          {items.map((item) => (
-            <option key={item.id} value={item.id}>
-              {item.name}
-              {item.isActive ? '' : ` (${t('dictionaries.customFields.inactive', 'inactive')})`}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger size="sm">
+            <SelectValue placeholder={t('dictionaries.customFields.dictionaryPlaceholder', 'Select a dictionary')} />
+          </SelectTrigger>
+          <SelectContent>
+            {items.map((item) => (
+              <SelectItem key={item.id} value={item.id}>
+                {item.name}
+                {item.isActive ? '' : ` (${t('dictionaries.customFields.inactive', 'inactive')})`}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         {loading ? (
           <p className="text-xs text-muted-foreground">
             {t('dictionaries.customFields.loading', 'Loading dictionaries…')}

package/src/modules/entities/components/EncryptionManager.tsx

@@ -3,6 +3,13 @@
 import * as React from 'react'
 import { useQuery, useMutation } from '@tanstack/react-query'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -303,32 +310,38 @@ export function EncryptionManager() {
               return (
                 <tr key={row.id} className="border-t">
                   <td className="px-3 py-2 align-top">
-                    <select
-                      className="w-full rounded border bg-background px-3 py-2 text-sm"
-                      value={row.field}
-                      onChange={(event) => updateField(row.id, { field: event.target.value })}
+                    <Select
+                      value={row.field || undefined}
+                      onValueChange={(value) => updateField(row.id, { field: value ?? '' })}
                     >
-                      <option value="">{t('entities.encryption.fields.selectField', 'Select field')}</option>
-                      {fieldOpts.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('entities.encryption.fields.selectField', 'Select field')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {fieldOpts.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </td>
                   <td className="px-3 py-2 align-top">
-                    <select
-                      className="w-full rounded border bg-background px-3 py-2 text-sm"
-                      value={row.hashField || ''}
-                      onChange={(event) => updateField(row.id, { hashField: event.target.value ? event.target.value : null })}
+                    <Select
+                      value={row.hashField || undefined}
+                      onValueChange={(value) => updateField(row.id, { hashField: value || null })}
                     >
-                      <option value="">{t('entities.encryption.fields.selectHash', 'Select hash field (optional)')}</option>
-                      {hashOpts.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('entities.encryption.fields.selectHash', 'Select hash field (optional)')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {hashOpts.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                     <p className="mt-1 text-overline text-muted-foreground">
                       {t('entities.encryption.fields.hashHint', 'Use when lookups must stay deterministic (e.g., login by email).')}
                     </p>
@@ -368,19 +381,22 @@ export function EncryptionManager() {
               <label className="text-xs text-muted-foreground">
                 {t('entities.encryption.selectEntity', 'Choose entity')}
               </label>
-              <select
-                className="mt-1 w-full rounded border px-3 py-2 text-sm"
-                value={selectedEntityId}
-                onChange={(event) => setSelectedEntityId(event.target.value)}
+              <Select
+                value={selectedEntityId || undefined}
+                onValueChange={(value) => setSelectedEntityId(value ?? '')}
                 disabled={loadingEntities || !!entitiesError}
               >
-                {!selectedEntityId ? <option value="">{t('entities.encryption.placeholder', 'Select an entity')}</option> : null}
-                {(entities?.items || []).map((item) => (
-                  <option key={item.entityId} value={item.entityId}>
-                    {item.label || item.entityId} {item.source === 'custom' ? `(${t('entities.encryption.source.custom', 'custom')})` : ''}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder={t('entities.encryption.placeholder', 'Select an entity')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {(entities?.items || []).map((item) => (
+                    <SelectItem key={item.entityId} value={item.entityId}>
+                      {item.label || item.entityId} {item.source === 'custom' ? `(${t('entities.encryption.source.custom', 'custom')})` : ''}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               {entitiesError ? (
                 <p className="mt-1 text-xs text-red-600">
                   {t('entities.encryption.errors.loadEntities', 'Failed to load entities')}

package/src/modules/feature_toggles/components/formConfig.tsx

@@ -1,6 +1,14 @@
 "use client"
 import { CrudFormGroup, CrudCustomFieldRenderProps, CrudField } from "@open-mercato/ui/backend/CrudForm";
 import { JsonBuilder } from "@open-mercato/ui/backend/JsonBuilder";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-mercato/ui/primitives/select";
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
 
@@ -13,15 +21,19 @@ export function renderDefaultValueCreateComponent(props: CrudCustomFieldRenderPr
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.form.fields.defaultValue.boolean.label', 'Default Value (Boolean)')}</label>
-                    <select
+                    <Select
                         value={props.value as string || 'false'}
-                        onChange={(e) => props.setValue(e.target.value === 'true')}
-                        className="w-full h-9 rounded border px-2 text-sm"
+                        onValueChange={(value) => props.setValue(value === 'true')}
                         disabled={props.disabled}
                     >
-                        <option value="true">{t('feature_toggles.values.true', 'True')}</option>
-                        <option value="false">{t('feature_toggles.values.false', 'False')}</option>
-                    </select>
+                        <SelectTrigger>
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="true">{t('feature_toggles.values.true', 'True')}</SelectItem>
+                            <SelectItem value="false">{t('feature_toggles.values.false', 'False')}</SelectItem>
+                        </SelectContent>
+                    </Select>
                 </div>
             );
 
@@ -29,12 +41,11 @@ export function renderDefaultValueCreateComponent(props: CrudCustomFieldRenderPr
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.form.fields.defaultValue.string.label', 'Default Value (String)')}</label>
-                    <input
+                    <Input
                         type="text"
                         value={props.value as string || ''}
                         onChange={(e) => props.setValue(e.target.value)}
                         placeholder={t('feature_toggles.form.fields.defaultValue.string.placeholder', 'Enter default string value')}
-                        className="w-full h-9 rounded border px-2 text-sm"
                         disabled={props.disabled}
                         autoFocus={props.autoFocus}
                     />
@@ -45,11 +56,10 @@ export function renderDefaultValueCreateComponent(props: CrudCustomFieldRenderPr
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.form.fields.defaultValue.number.label', 'Default Value (Number)')}</label>
-                    <input
+                    <Input
                         type="number"
                         value={props.value as number || 0}
                         onChange={(e) => props.setValue(Number(e.target.value) || 0)}
-                        className="w-full h-9 rounded border px-2 text-sm"
                         disabled={props.disabled}
                         autoFocus={props.autoFocus}
                     />

package/src/modules/feature_toggles/components/overrideFormConfig.tsx

@@ -1,6 +1,14 @@
 "use client"
 import { CrudFormGroup, CrudCustomFieldRenderProps, CrudField } from "@open-mercato/ui/backend/CrudForm";
 import { JsonBuilder } from "@open-mercato/ui/backend/JsonBuilder";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-mercato/ui/primitives/select";
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
 export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps) {
@@ -21,15 +29,19 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.override.fields.value.boolean.label', 'Override Value (Boolean)')}</label>
-                    <select
+                    <Select
                         value={props.value as string || 'false'}
-                        onChange={(e) => props.setValue(e.target.value === 'true')}
-                        className="w-full h-9 rounded border px-2 text-sm"
+                        onValueChange={(value) => props.setValue(value === 'true')}
                         disabled={props.disabled}
                     >
-                        <option value="true">{t('feature_toggles.values.true', 'True')}</option>
-                        <option value="false">{t('feature_toggles.values.false', 'False')}</option>
-                    </select>
+                        <SelectTrigger>
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="true">{t('feature_toggles.values.true', 'True')}</SelectItem>
+                            <SelectItem value="false">{t('feature_toggles.values.false', 'False')}</SelectItem>
+                        </SelectContent>
+                    </Select>
                 </div>
             );
 
@@ -37,12 +49,11 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.override.fields.value.string.label', 'Override Value (String)')}</label>
-                    <input
+                    <Input
                         type="text"
                         value={props.value as string || ''}
                         onChange={(e) => props.setValue(e.target.value)}
                         placeholder={t('feature_toggles.override.fields.value.string.placeholder', 'Enter override string value')}
-                        className="w-full h-9 rounded border px-2 text-sm"
                         disabled={props.disabled}
                         autoFocus={props.autoFocus}
                     />
@@ -53,11 +64,10 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.override.fields.value.number.label', 'Override Value (Number)')}</label>
-                    <input
+                    <Input
                         type="number"
                         value={props.value as number || 0}
                         onChange={(e) => props.setValue(Number(e.target.value) || 0)}
-                        className="w-full h-9 rounded border px-2 text-sm"
                         disabled={props.disabled}
                         autoFocus={props.autoFocus}
                     />

package/src/modules/inbox_ops/backend/inbox-ops/settings/page.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import Link from 'next/link'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
@@ -61,8 +68,7 @@ export default function InboxSettingsPage() {
     }
   }, [settings])
 
-  const handleLanguageChange = React.useCallback(async (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const workingLanguage = event.target.value
+  const handleLanguageChange = React.useCallback(async (workingLanguage: string) => {
     setIsSavingLanguage(true)
     const result = await runMutation({
       operation: () => apiCall<{ ok: boolean; settings: { workingLanguage: string } }>('/api/inbox_ops/settings', {
@@ -133,17 +139,20 @@ export default function InboxSettingsPage() {
                 <p className="text-xs text-muted-foreground mt-1">
                   {t('inbox_ops.settings.working_language_hint', 'AI summaries and action descriptions will be generated in this language')}
                 </p>
-                <select
-                  id="working-language"
-                  className="mt-2 block w-full sm:w-[200px] h-11 md:h-9 rounded-md border border-input bg-background px-3 text-sm"
+                <Select
                   value={settings.workingLanguage || 'en'}
-                  onChange={handleLanguageChange}
+                  onValueChange={(value) => handleLanguageChange(value)}
                   disabled={isSavingLanguage}
                 >
-                  {languageOptions.map((opt) => (
-                    <option key={opt.value} value={opt.value}>{opt.label}</option>
-                  ))}
-                </select>
+                  <SelectTrigger id="working-language" className="mt-2 sm:w-[200px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {languageOptions.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
             </div>
           ) : (

package/src/modules/inbox_ops/components/proposals/EditActionDialog.tsx

@@ -2,6 +2,13 @@
 
 import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -130,14 +137,18 @@ function ContactPayloadEditor({
         )}
         <div>
           <Label>{t('inbox_ops.edit_dialog.type', 'Type')}</Label>
-          <select
-            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+          <Select
             value={type}
-            onChange={(event) => updateField('type', event.target.value)}
+            onValueChange={(value) => updateField('type', value)}
           >
-            <option value="person">{t('inbox_ops.contact_type.person', 'Person')}</option>
-            <option value="company">{t('inbox_ops.contact_type.company', 'Company')}</option>
-          </select>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="person">{t('inbox_ops.contact_type.person', 'Person')}</SelectItem>
+              <SelectItem value="company">{t('inbox_ops.contact_type.company', 'Company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
@@ -187,14 +198,18 @@ function LinkContactPayloadEditor({
       <div className="grid grid-cols-2 gap-3">
         <div>
           <Label>{t('inbox_ops.edit_dialog.contact_type', 'Contact Type')}</Label>
-          <select
-            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+          <Select
             value={(payload.contactType as string) || 'person'}
-            onChange={(event) => updateField('contactType', event.target.value)}
+            onValueChange={(value) => updateField('contactType', value)}
           >
-            <option value="person">{t('inbox_ops.contact_type.person', 'Person')}</option>
-            <option value="company">{t('inbox_ops.contact_type.company', 'Company')}</option>
-          </select>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="person">{t('inbox_ops.contact_type.person', 'Person')}</SelectItem>
+              <SelectItem value="company">{t('inbox_ops.contact_type.company', 'Company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div>
           <Label>{t('inbox_ops.edit_dialog.contact_name', 'Contact Name')}</Label>
@@ -366,28 +381,36 @@ function LogActivityPayloadEditor({
         </div>
         <div>
           <Label>{t('inbox_ops.edit_dialog.contact_type', 'Contact Type')}</Label>
-          <select
-            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+          <Select
             value={(payload.contactType as string) || 'person'}
-            onChange={(event) => updateField('contactType', event.target.value)}
+            onValueChange={(value) => updateField('contactType', value)}
           >
-            <option value="person">{t('inbox_ops.contact_type.person', 'Person')}</option>
-            <option value="company">{t('inbox_ops.contact_type.company', 'Company')}</option>
-          </select>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="person">{t('inbox_ops.contact_type.person', 'Person')}</SelectItem>
+              <SelectItem value="company">{t('inbox_ops.contact_type.company', 'Company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
       <div>
         <Label>{t('inbox_ops.edit_dialog.activity_type', 'Activity Type')}</Label>
-        <select
-          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+        <Select
           value={(payload.activityType as string) || 'email'}
-          onChange={(event) => updateField('activityType', event.target.value)}
+          onValueChange={(value) => updateField('activityType', value)}
         >
-          <option value="email">{t('inbox_ops.activity_type.email', 'Email')}</option>
-          <option value="call">{t('inbox_ops.activity_type.call', 'Call')}</option>
-          <option value="meeting">{t('inbox_ops.activity_type.meeting', 'Meeting')}</option>
-          <option value="note">{t('inbox_ops.activity_type.note', 'Note')}</option>
-        </select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="email">{t('inbox_ops.activity_type.email', 'Email')}</SelectItem>
+            <SelectItem value="call">{t('inbox_ops.activity_type.call', 'Call')}</SelectItem>
+            <SelectItem value="meeting">{t('inbox_ops.activity_type.meeting', 'Meeting')}</SelectItem>
+            <SelectItem value="note">{t('inbox_ops.activity_type.note', 'Note')}</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
       <div>
         <Label>{t('inbox_ops.edit_dialog.subject', 'Subject')}</Label>

package/src/modules/integrations/backend/integrations/[id]/page.tsx

@@ -11,6 +11,13 @@ import { FormHeader } from '@open-mercato/ui/backend/forms'
 import { Card, CardHeader, CardTitle, CardContent } from '@open-mercato/ui/primitives/card'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
@@ -1185,18 +1192,20 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
           {showLogsTab ? (
             <TabsContent value="logs" className="mt-0 space-y-4">
             <div className="flex items-center gap-3">
-              <div className="relative inline-flex">
-                <select
-                  className="h-11 min-w-40 appearance-none rounded-xl border border-border bg-card pl-4 pr-11 text-sm font-medium text-foreground shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
-                  value={logLevel}
-                  onChange={(event) => setLogLevel(event.target.value)}
+              <div className="inline-flex">
+                <Select
+                  value={logLevel || undefined}
+                  onValueChange={(value) => setLogLevel(value ?? '')}
                 >
-                  <option value="">{t('integrations.detail.logs.level.all')}</option>
-                  <option value="info">{t('integrations.detail.logs.level.info')}</option>
-                  <option value="warn">{t('integrations.detail.logs.level.warn')}</option>
-                  <option value="error">{t('integrations.detail.logs.level.error')}</option>
-                </select>
-                <ChevronDown className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <SelectTrigger size="lg" className="min-w-40">
+                    <SelectValue placeholder={t('integrations.detail.logs.level.all')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="info">{t('integrations.detail.logs.level.info')}</SelectItem>
+                    <SelectItem value="warn">{t('integrations.detail.logs.level.warn')}</SelectItem>
+                    <SelectItem value="error">{t('integrations.detail.logs.level.error')}</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
             </div>
             {isLoadingLogs ? (

package/src/modules/integrations/backend/integrations/bundle/[id]/page.tsx

@@ -8,6 +8,13 @@ import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -201,16 +208,19 @@ export default function BundleConfigPage({ params }: BundleConfigPageProps) {
                     {field.label}{field.required && <span className="text-red-500 ml-0.5">*</span>}
                   </label>
                   {field.type === 'select' && field.options ? (
-                    <select
-                      className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm"
-                      value={(credValues[field.key] as string) ?? ''}
-                      onChange={(e) => setCredValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    <Select
+                      value={(credValues[field.key] as string) || undefined}
+                      onValueChange={(value) => setCredValues((prev) => ({ ...prev, [field.key]: value ?? '' }))}
                     >
-                      <option value="">—</option>
-                      {field.options.map((opt) => (
-                        <option key={opt.value} value={opt.value}>{opt.label}</option>
-                      ))}
-                    </select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="—" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {field.options.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   ) : field.type === 'boolean' ? (
                     <Switch
                       checked={Boolean(credValues[field.key])}