diff --git a/openless-all/app/src/pages/settings/CodingAgentSection.tsx b/openless-all/app/src/pages/settings/CodingAgentSection.tsx
index 0414a04e..90d8c474 100644
--- a/openless-all/app/src/pages/settings/CodingAgentSection.tsx
+++ b/openless-all/app/src/pages/settings/CodingAgentSection.tsx
@@ -8,6 +8,7 @@ import { detectOS } from '../../components/WindowChrome'
 import { codingAgentDetectOpencode, type OpenCodeDetection } from '../../lib/ipc'
 import type { CodingAgentPermissionMode, CodingAgentProviderId } from '../../lib/types'
 import { useHotkeySettings } from '../../state/HotkeySettingsContext'
+import { SelectLite } from '../../components/ui/SelectLite'
 import { Card } from '../_atoms'
 import { SectionDesc, SectionTitle, SettingRow, Toggle, inputStyle } from './shared'
 
@@ -69,19 +70,16 @@ export function CodingAgentSection() {
         <>
           {/* 「按住说话键」配置已挪到 通用 → 快捷键，避免和这里重复。本区只留后端/模型等高级项。 */}
           <SettingRow label={t('settings.codingAgent.provider')}>
-            <select
+            <SelectLite
               value={prefs.codingAgentProvider}
-              onChange={e =>
-                void savePrefs({
-                  ...prefs,
-                  codingAgentProvider: e.target.value as CodingAgentProviderId,
-                })
-              }
-              style={{ ...inputStyle, maxWidth: 240, cursor: 'pointer' }}
-            >
-              <option value="claude-code-cli">Claude Code</option>
-              <option value="opencode-cli">OpenCode</option>
-            </select>
+              onChange={v => void savePrefs({ ...prefs, codingAgentProvider: v as CodingAgentProviderId })}
+              options={[
+                { value: 'claude-code-cli', label: 'Claude Code' },
+                { value: 'opencode-cli', label: 'OpenCode' },
+              ]}
+              ariaLabel={t('settings.codingAgent.provider')}
+              style={{ ...inputStyle, maxWidth: 240 }}
+            />
           </SettingRow>
 
           {/* OpenCode 后端：提示安装/登录状态。issue #579。 */}
@@ -101,38 +99,32 @@ export function CodingAgentSection() {
           )}
 
           <SettingRow label={t('settings.codingConsole.permissionMode')}>
-            <select
+            <SelectLite
               value={prefs.codingAgentPermissionMode}
-              onChange={e =>
-                void savePrefs({
-                  ...prefs,
-                  codingAgentPermissionMode: e.target.value as CodingAgentPermissionMode,
-                })
-              }
-              style={{ ...inputStyle, maxWidth: 240, cursor: 'pointer' }}
-            >
-              {PERMISSION_MODES.map(m => (
-                <option key={m} value={m}>
-                  {t(`settings.codingConsole.mode.${m}`)}
-                </option>
-              ))}
-            </select>
+              onChange={v => void savePrefs({ ...prefs, codingAgentPermissionMode: v as CodingAgentPermissionMode })}
+              options={PERMISSION_MODES.map(m => ({
+                value: m,
+                label: t(`settings.codingConsole.mode.${m}`),
+              }))}
+              ariaLabel={t('settings.codingConsole.permissionMode')}
+              style={{ ...inputStyle, maxWidth: 240 }}
+            />
           </SettingRow>
 
           <SettingRow label={t('settings.codingAgent.model')} desc={t('settings.codingAgent.modelHint')}>
-            <select
+            <SelectLite
               value={prefs.codingAgentModel ?? ''}
-              onChange={e => {
-                const v = e.target.value
-                void savePrefs({ ...prefs, codingAgentModel: v === '' ? null : v })
-              }}
-              style={{ ...inputStyle, maxWidth: 240, cursor: 'pointer' }}
-            >
-              <option value="">{t('settings.codingAgent.modelDefault')}</option>
-              <option value="haiku">Haiku</option>
-              <option value="sonnet">Sonnet</option>
-              <option value="opus">Opus</option>
-            </select>
+              onChange={v => void savePrefs({ ...prefs, codingAgentModel: v === '' ? null : v })}
+              options={[
+                // 空值 = 使用 CLI 默认模型；放回选项里，避免选了具体模型后回不去默认。
+                { value: '', label: t('settings.codingAgent.modelDefault') },
+                { value: 'haiku', label: 'Haiku' },
+                { value: 'sonnet', label: 'Sonnet' },
+                { value: 'opus', label: 'Opus' },
+              ]}
+              ariaLabel={t('settings.codingAgent.model')}
+              style={{ ...inputStyle, maxWidth: 240 }}
+            />
           </SettingRow>
 
           <SettingRow label={t('settings.codingConsole.workdir')} desc={t('settings.codingConsole.workdirDesc')}>