@jingyi0605/codingns4dsh 0.2.1-beta.9 → 0.2.1-rc.3

package/data/build/dist/client/cli-slots.js

@@ -1,10 +1,12 @@
 import { watchAdapterCatalog, subscribeAdapterCatalogChanged } from './adapter-catalog-watch.js';
-import { createElement, useEffect, useRef, useState } from 'react';
+import { createElement, useEffect, useId, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
 import { useDismissOnOutsidePointer } from './popup-dismiss.js';
 import { Switch } from '@deepseek-ai/dsh-client-ui-primitives';
 import { adapterCatalogWithDsh, adapterDetectionLabel, callCliRpc, findModel, firstModel } from './cli-catalog.js';
 import { activeServiceTier, canSelectServiceTier, carriedServiceTierId, isServiceTierEnabled, modelServiceTiers, needsServiceTierRevalidation, toggledServiceTierId, } from './service-tier.js';
-import { resolveDataIcon } from '../dsh-capabilities/client/primitives-adapter.js';
+import { DshInput, rankModelByName, resolveAssistantControlIcon, resolveCloseFillIcon, resolveDataIcon } from '../dsh-capabilities/client/primitives-adapter.js';
+import { composerSlotSelector } from '../dsh-capabilities/client/composer-slot-selectors.js';
 import { providerIconUrl } from './provider-icons.js';
 import { publishSessionSelection } from './session-adapter-cache.js';
 import { getModelCatalogCache, invalidateModelCatalogCache, loadModelCatalog, shouldRevalidateModelCatalog, } from './model-catalog-cache.js';
@@ -12,7 +14,12 @@ import { dshPopupSurfaceStyle, dshThemeColor } from './theme.js';
 import { useCodingNsTranslator } from './locale.js';
 import { loadCliSessionConfig, rememberCliSessionConfig } from './cli-session-config-cache.js';
 import { uiFontSize } from './font-scale.js';
-import { isSessionTranslationAdapter } from '../shared/contracts/session-translation.js';
+import { DSH_NATIVE_SESSION_ADAPTER_ID, supportsSessionTranslation } from '../shared/contracts/session-translation.js';
+import { readNativeTranslationDefault, subscribeNativeTranslationDefault } from './native-translation-default.js';
+import { watchNativeModelMenu } from './native-model-translation-menu.js';
+import { MagpieModelTag } from './magpie-model-tag.js';
+import { ConversationTranslationSettings } from './conversation-translation-settings.js';
+import { settingsIconButtonStyle } from './settings-controls.js';
 const CLI_STYLE_ID = 'codingns4dsh-cli-composer-style';
 const CIRCULAR_PROVIDER_ICON_IDS = new Set(['gemini', 'grok']);
 function installComposerStyles() {
@@ -21,9 +28,11 @@ function installComposerStyles() {
     const style = document.createElement('style');
     style.dataset.plugin = 'codingns4dsh';
     style.dataset.pluginCss = CLI_STYLE_ID;
+    const modelSlot = composerSlotSelector('conversation.input.model');
+    const rightSlot = composerSlotSelector('conversation.input.right');
     style.textContent = [
         // 每个输入框只读取自己的适配器；主会话与右侧子会话可以同时使用不同 Agent。
-        '[data-composer-card]:has([data-codingns-agent]:not([data-codingns-agent="dsh"])) [data-slot="conversation.input.model"]{display:none!important}',
+        `[data-composer-card]:has([data-codingns-agent]:not([data-codingns-agent="dsh"])) ${modelSlot}{display:none!important}`,
         // DSH 在控制行放不下时给行加 data-model-compact，原生模型席位据此把文本收成图标。
         // 这里不再强制工具行 nowrap：保留原生 flex-wrap 语义，DSH 的测量口径才能反映真实占用，
         // 放不下时先收起模型，而不是把左侧工具组（权限/规划组）压到内容溢出与相邻按钮重叠。
@@ -32,10 +41,10 @@ function installComposerStyles() {
         '[data-composer-card] [data-model-compact] .codingns4dsh-model-root .codingns4dsh-model-name,',
         '[data-composer-card] [data-model-compact] .codingns4dsh-model-root .codingns4dsh-model-effort{display:none!important}',
         '[data-composer-card] [data-model-compact] .codingns4dsh-model-root .codingns4dsh-model-icon{display:block!important;flex:none}',
-        '[data-composer-card] > div:has([data-slot="conversation.input.right"]) > div:has(> [data-slot="conversation.input.right"]){min-width:0;width:0;flex:1 1 0}',
-        '[data-composer-card] > div:has([data-slot="conversation.input.right"]) [data-slot="conversation.input.right"] > .codingns4dsh-model-root{min-width:0;max-width:min(360px,45cqw);flex:1 1 min(360px,45cqw)}',
-        '[data-composer-card] > div:has([data-slot="conversation.input.right"]) [data-slot="conversation.input.model"] > select{width:100%;min-width:0;max-width:min(150px,45cqw);flex:1 1 min(150px,45cqw);overflow:hidden;white-space:nowrap}',
-        '[data-composer-card] > div:has([data-slot="conversation.input.right"]) [data-slot="conversation.input.model"] > button{width:100%;min-width:0;max-width:min(360px,45cqw);overflow:hidden;white-space:nowrap}',
+        `[data-composer-card] > div:has(${rightSlot}) > div:has(> ${rightSlot}){min-width:0;width:0;flex:1 1 0}`,
+        `[data-composer-card] > div:has(${rightSlot}) ${rightSlot} > .codingns4dsh-model-root{min-width:0;max-width:min(360px,45cqw);flex:1 1 min(360px,45cqw)}`,
+        `[data-composer-card] > div:has(${rightSlot}) ${modelSlot} > select{width:100%;min-width:0;max-width:min(150px,45cqw);flex:1 1 min(150px,45cqw);overflow:hidden;white-space:nowrap}`,
+        `[data-composer-card] > div:has(${rightSlot}) ${modelSlot} > button{width:100%;min-width:0;max-width:min(360px,45cqw);overflow:hidden;white-space:nowrap}`,
         // 与 DSH 原生同类控件一致（权限选择器 460px、预设标签 540px 都用容器查询）：
         // composer 控制行收窄到 650px 以内时，适配器按钮让出名称与右侧状态图标（下拉箭头/锁形），
         // 只保留适配器图标；行宽恢复后名称自动回来。这是纯 CSS 判定，不随任何折叠状态摆动。
@@ -44,7 +53,7 @@ function installComposerStyles() {
         '@container (width<=650px){[data-composer-card] .codingns4dsh-agent-trigger > .codingns4dsh-agent-label{display:none}[data-composer-card] .codingns4dsh-agent-trigger > svg{display:none!important}[data-composer-card] .codingns4dsh-agent-trigger{padding-left:4px;padding-right:4px;gap:0}}',
         // 移动端工具栏空间有限，收掉控件组自身的间距；控件组按 CSS Modules 本地名匹配，
         // 不绑定构建哈希（npm 分发的 Web 构建是 uV2eYG_*，Desktop 内嵌构建是 yhfFVG_*）。
-        '@media (max-width: 768px){[data-composer-card] > div:has([data-slot="conversation.input.right"]) > div:has(> [data-slot="conversation.input.right"]),[data-composer-card] [data-slot="conversation.input.right"],[data-composer-card] [class*="_standardControls"],[data-composer-card] [class*="_trailing"]{gap:0!important;column-gap:0!important}}',
+        `@media (max-width: 768px){[data-composer-card] > div:has(${rightSlot}) > div:has(> ${rightSlot}),[data-composer-card] ${rightSlot},[data-composer-card] [class*="_standardControls"],[data-composer-card] [class*="_trailing"]{gap:0!important;column-gap:0!important}}`,
         // ContextMeter 在 pressure 尚未合并时会暂时返回 null；dock 保留同样的行高，数值回来时只更新内容。
         '[data-composer-card] + div{box-sizing:border-box;min-height:26px;align-items:center}',
         '[data-composer-card] + div svg[viewBox="0 0 14 14"] circle:last-child{transition:stroke-dasharray .18s ease,stroke .18s ease}',
@@ -55,6 +64,19 @@ function installComposerStyles() {
         '.codingns4dsh-agent-trigger:hover:not(:disabled){background:color-mix(in srgb,currentColor 7%,transparent)}',
         '.codingns4dsh-agent-option:hover:not(:disabled){background:color-mix(in srgb,currentColor 7%,transparent)!important}',
         '.codingns4dsh-agent-option[data-selected="true"]{background:color-mix(in srgb,currentColor 10%,transparent)!important}',
+        // 模型搜索与内置 DSH 模型选择器（ui-model-selection 的 ModelSelect）使用同一套
+        // 结构与令牌：固定在菜单顶部、透明无边框的 12px 输入框，右侧 24px 圆形清除按钮，
+        // 下方模型分组独立滚动。内联样式无法表达 :hover/:focus-within，因此放在这里。
+        '.codingns4dsh-model-search-row{flex:none;margin:2px 0 3px;position:relative}',
+        '.codingns4dsh-model-search-row .codingns4dsh-model-search{border-radius:var(--dsw-radius-md,8px);background:transparent;border:0 solid transparent;height:auto;padding:5px 7px;display:flex}',
+        '.codingns4dsh-model-search-row .codingns4dsh-model-search-with-query{padding-right:34px}',
+        `.codingns4dsh-model-search-row .codingns4dsh-model-search input{padding:0;font-size:${uiFontSize(12)};line-height:normal}`,
+        '.codingns4dsh-model-search-row .codingns4dsh-model-search input::placeholder{color:var(--dsw-alias-label-caption,GrayText)}',
+        '.codingns4dsh-model-search-row .codingns4dsh-model-search:focus-within{border-color:transparent}',
+        '.codingns4dsh-model-search-clear{corner-shape:round;width:24px;height:24px;color:var(--dsw-alias-label-secondary,GrayText);cursor:pointer;background:transparent;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;top:50%;right:4px;transform:translateY(-50%)}',
+        '.codingns4dsh-model-search-clear:hover,.codingns4dsh-model-search-clear:focus-visible{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08));outline:none}',
+        '.codingns4dsh-model-groups{min-height:0;overflow-y:auto}',
+        '.codingns4dsh-model-option[data-highlighted="true"]{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08))}',
         '@media (prefers-reduced-motion:reduce){.codingns4dsh-cli-spinner{animation-duration:1.6s}.codingns4dsh-model-name[data-overflow="true"]>span{animation:none;transform:translateX(0)}}',
     ].join('');
     document.head.appendChild(style);
@@ -86,6 +108,17 @@ export async function waitForCliSessionSelection(sessionId) {
 export function cliSessionSelectionRevision(sessionId) {
     return selectionRevisions.get(sessionId) ?? 0;
 }
+/** Share the model menu's effective translation switch with pending message actions. */
+export function useCliSessionTranslationEnabled(sessionId, rpc) {
+    return useCliSessionTranslationState(sessionId, rpc).enabled;
+}
+export function useCliSessionTranslationState(sessionId, rpc) {
+    const [selection] = useSelection(sessionId, rpc);
+    const nativeDefault = useSyncExternalStore(subscribeNativeTranslationDefault, readNativeTranslationDefault, readNativeTranslationDefault);
+    const enabled = supportsSessionTranslation(selection.adapterId)
+        && (selection.translationEnabled ?? (selection.adapterId === DSH_NATIVE_SESSION_ADAPTER_ID && nativeDefault === true));
+    return { adapterId: selection.adapterId, enabled };
+}
 /** 在 Agent 和模型两个 Slot 之间共享当前会话选择。 */
 function useSelection(sessionId, rpc) {
     const [selection, setSelection] = useState(() => sessionId ? selections.get(sessionId) ?? DEFAULT_SELECTION : DEFAULT_SELECTION);
@@ -108,6 +141,8 @@ function useSelection(sessionId, rpc) {
         selectionListeners.set(sessionId, listeners);
         const listener = () => setSelection(selections.get(sessionId) ?? DEFAULT_SELECTION);
         listeners.add(listener);
+        // 同一 Slot 可切换会话；缓存命中时 session/get 不再发布，需先同步当前会话。
+        listener();
         return () => {
             active = false;
             listeners.delete(listener);
@@ -128,19 +163,25 @@ function useSelection(sessionId, rpc) {
     }, [rpc, sessionId]);
     const update = (next) => {
         if (sessionId === undefined || sessionId.trim() === '')
-            return;
+            return Promise.resolve(false);
+        const previous = selections.get(sessionId) ?? selection;
         publishSelection(sessionId, next);
         const revision = (selectionRevisions.get(sessionId) ?? 0) + 1;
         selectionRevisions.set(sessionId, revision);
         const promise = callCliRpc(rpc, 'session/set', { sessionId, ...next });
         selectionUpdates.set(sessionId, { revision, promise });
-        void promise
+        return promise
             .then((normalized) => {
             rememberCliSessionConfig(rpc, sessionId, normalized);
             if (selectionUpdates.get(sessionId)?.revision === revision)
                 publishSelection(sessionId, normalized);
+            return true;
+        })
+            .catch(() => {
+            if (selectionUpdates.get(sessionId)?.revision === revision)
+                publishSelection(sessionId, previous);
+            return false;
         })
-            .catch(() => undefined)
             .finally(() => {
             if (selectionUpdates.get(sessionId)?.revision === revision)
                 selectionUpdates.delete(sessionId);
@@ -162,8 +203,13 @@ function publishSelection(sessionId, next) {
     for (const listener of selectionListeners.get(sessionId) ?? [])
         listener();
 }
-/** 把 Agent 与模型选择器注册到同一工具栏，使用顺序保证 Agent 始终位于模型左侧。 */
-export function registerCliConversationSlots(slots, rpc, locale) {
+/**
+ * 把 Agent 与模型选择器注册到同一工具栏，使用顺序保证 Agent 始终位于模型左侧。
+ *
+ * `readNativeTranslationEnabled` 提供「DSH 原生会话未单独设置翻译开关时是否跟随总开关」
+ * 的当前值；原生会话的翻译开关与外部 Agent 共用模型菜单里的同一行开关。
+ */
+export function registerCliConversationSlots(slots, rpc, locale, readNativeTranslationEnabled, settings) {
     installComposerStyles();
     const t = locale.bind('codingns');
     const disposeAgent = slots.inject('conversation.input.right', () => slots.register({
@@ -178,7 +224,13 @@ export function registerCliConversationSlots(slots, rpc, locale) {
         id: 'codingns4dsh-model',
         order: -10,
         label: t('cli.modelSelector'),
-        inject: (sessionId) => ({ rpc, sessionId, locale }),
+        inject: (sessionId) => ({
+            rpc,
+            sessionId,
+            locale,
+            settings,
+            ...(readNativeTranslationEnabled === undefined ? {} : { readNativeTranslationEnabled }),
+        }),
     }, ModelSlot));
     return () => {
         disposeModel();
@@ -191,13 +243,18 @@ function AgentSlot(props) {
     const sessionId = props.sessionId ?? session?.sessionId;
     const [selection, update] = useSelection(sessionId, props.rpc);
     const [agents, setAgents] = useState([{ id: 'dsh', name: 'DeepSeek Harness', installed: true, enabled: true, version: null, command: null }]);
+    const [catalogFailed, setCatalogFailed] = useState(false);
+    const [catalogRetry, setCatalogRetry] = useState(0);
     const [open, setOpen] = useState(false);
     const rootRef = useRef(null);
     const locked = isSessionLocked(session);
     useDismissOnOutsidePointer(rootRef, open, () => setOpen(false));
     useEffect(() => {
-        return watchAdapterCatalog(props.rpc, sessionId, (value) => setAgents(adapterCatalogWithDsh(value)));
-    }, [props.rpc, sessionId]);
+        return watchAdapterCatalog(props.rpc, sessionId, (value) => {
+            setAgents(adapterCatalogWithDsh(value));
+            setCatalogFailed(false);
+        }, () => setCatalogFailed(true));
+    }, [props.rpc, sessionId, catalogRetry]);
     useEffect(() => { if (locked)
         setOpen(false); }, [locked]);
     const current = agents.find((agent) => agent.id === selection.adapterId) ?? agents[0];
@@ -210,7 +267,10 @@ function AgentSlot(props) {
     const currentIcon = providerIconUrl(current.id);
     return createElement('div', { ref: rootRef, style: agentRootStyle, 'data-codingns-agent': selection.adapterId }, createElement('button', { type: 'button', className: 'codingns4dsh-agent-trigger', disabled: locked, onClick: () => setOpen((value) => !value), 'aria-label': t('cli.currentAgent', { name: current.name, locked: locked ? t('cli.locked') : '' }), 'aria-haspopup': 'menu', 'aria-expanded': open, style: { ...agentTriggerStyle, cursor: locked ? 'default' : 'pointer', opacity: locked ? 0.7 : 1 } }, currentIcon === undefined
         ? createElement(ProviderIconFallback, { name: current.name, size: 20 })
-        : createElement('img', { src: currentIcon, alt: '', 'aria-hidden': true, style: applyProviderIconShape(current.id, agentTriggerIconStyle) }), createElement('span', { className: 'codingns4dsh-agent-label', style: agentTriggerLabelStyle }, current.name), createElement(NativeDropdownChevron, { open, locked })), open && !locked && createElement('div', { role: 'menu', 'aria-label': t('cli.selectAgent'), style: agentMenuStyle }, ...agents.map((agent) => {
+        : createElement('img', { src: currentIcon, alt: '', 'aria-hidden': true, style: applyProviderIconShape(current.id, agentTriggerIconStyle) }), createElement('span', { className: 'codingns4dsh-agent-label', style: agentTriggerLabelStyle }, current.name), createElement(NativeDropdownChevron, { open, locked })), open && !locked && createElement('div', { role: 'menu', 'aria-label': t('cli.selectAgent'), style: agentMenuStyle }, catalogFailed && createElement('div', { role: 'alert', style: { padding: 8, fontSize: uiFontSize(13) } }, createElement('div', null, t('cli.catalogLoadFailed')), createElement('button', {
+        type: 'button', role: 'menuitem', style: { ...agentOptionStyle, minHeight: 30 },
+        onClick: () => { setCatalogFailed(false); setCatalogRetry((value) => value + 1); },
+    }, t('cli.retryCatalog'))), ...agents.map((agent) => {
         const selected = agent.id === selection.adapterId;
         const available = agent.installed && agent.enabled;
         const icon = providerIconUrl(agent.id);
@@ -219,6 +279,26 @@ function AgentSlot(props) {
             : createElement('img', { src: icon, alt: '', 'aria-hidden': true, style: applyProviderIconShape(agent.id, agentOptionIconStyle) }), createElement('span', { style: agentOptionLabelStyle }, agent.name), (!agent.installed || agent.detectionState === 'error' || agent.runtimeState === 'installed') && createElement('span', { style: agentStatusStyle }, t(adapterDetectionLabel(agent))), agent.installed && !agent.enabled && createElement('span', { style: agentStatusStyle }, t('cli.disabled')));
     })));
 }
+/**
+ * 模型菜单里的「翻译对话」开关行。
+ *
+ * 外部 Agent 与 DSH 原生会话共用同一份样式与交互：外部会话的开关只在会话级
+ * 生效，原生会话的开关写回适配器偏好；两者都复用模型菜单的行样式。
+ */
+function TranslationToggleRow(props) {
+    return createElement('div', { className: 'codingns4dsh-translation-toggle', style: serviceTierRowStyle }, createElement('span', { style: { ...serviceTierLabelStyle, flex: '1 1 auto', whiteSpace: 'normal' } }, props.label), createElement('button', {
+        type: 'button',
+        'aria-label': props.settingsLabel,
+        title: props.settingsLabel,
+        'aria-haspopup': 'dialog',
+        onClick: props.onSettings,
+        style: { ...settingsIconButtonStyle, flexBasis: 24, width: 24, height: 28 },
+    }, createElement(resolveAssistantControlIcon('settings'), { size: 16 })), createElement(Switch, {
+        checked: props.checked,
+        onChange: props.onChange,
+        label: props.toggleLabel,
+    }));
+}
 function ProviderIconFallback(props) {
     return createElement('span', { 'aria-hidden': true, style: { ...agentFallbackIconStyle, width: props.size, height: props.size, flexBasis: props.size } }, props.name.trim().charAt(0).toUpperCase() || '?');
 }
@@ -304,19 +384,54 @@ function ModelSlot(props) {
     const [catalogRetry, setCatalogRetry] = useState(0);
     const [open, setOpen] = useState(false);
     const [pane, setPane] = useState('root');
+    const [translationSettingsOpen, setTranslationSettingsOpen] = useState(false);
+    const [modelQuery, setModelQuery] = useState('');
+    const [highlightedModelIndex, setHighlightedModelIndex] = useState(null);
+    const modelSearchRef = useRef(null);
+    const modelOptionRefs = useRef([]);
+    const modelGroupsId = useId();
     const rootRef = useRef(null);
-    useDismissOnOutsidePointer(rootRef, open, () => { setOpen(false); setPane('root'); });
+    const nativeMagpieModelsRef = useRef([]);
+    // 模型列表与思考档位和内置选择器一样没有返回按钮：Escape 只退出当前子面板，
+    // 回到根菜单；根菜单再按 Escape 才关闭整个弹层。
+    useDismissOnOutsidePointer(rootRef, open, () => { setOpen(false); setPane('root'); }, { escape: pane === 'root' });
+    const nativeDefault = useSyncExternalStore(subscribeNativeTranslationDefault, () => props.readNativeTranslationEnabled?.(), () => props.readNativeTranslationEnabled?.());
+    const nativeAvailable = nativeDefault !== undefined;
+    const [nativeMenu, setNativeMenu] = useState(null);
     const catalog = catalogState?.adapterId === selection.adapterId && catalogState.sessionId === sessionId ? catalogState.value : null;
-    // 目录必须和当前会话、适配器绑定；跨 Host 切换时不能短暂展示上一会话的目录。
-    const loading = selection.adapterId !== 'dsh'
-        // 有 stale 目录时直接可用，后台刷新不应阻塞模型/思考强度选择。
-        && catalog === null
-        && refreshingAdapterId === selection.adapterId;
+    const nativeModels = selection.adapterId === DSH_NATIVE_SESSION_ADAPTER_ID
+        ? (catalog?.groups ?? []).flatMap((group) => group.models.map(({ id, name, source }) => ({ id, name, ...(source === 'magpie' ? { source } : {}) })))
+        : [];
+    nativeMagpieModelsRef.current = nativeModels;
+    const nativeMagpieModelRevision = JSON.stringify(nativeModels);
     useEffect(() => {
-        if (selection.adapterId === 'dsh') {
-            setCatalogState(null);
-            setRefreshingAdapterId(null);
+        setNativeMenu(null);
+        if (selection.adapterId !== DSH_NATIVE_SESSION_ADAPTER_ID || rootRef.current === null)
             return;
+        return watchNativeModelMenu(rootRef.current, setNativeMenu, () => nativeMagpieModelsRef.current, nativeAvailable);
+    }, [selection.adapterId, sessionId, nativeAvailable, nativeMagpieModelRevision]);
+    // 目录必须和当前会话、适配器绑定；跨 Host 切换时不能短暂展示上一会话的目录。
+    // 有 stale 目录时直接可用，后台刷新不应阻塞模型/思考强度选择。
+    const loading = catalog === null && refreshingAdapterId === selection.adapterId;
+    // 超过 4 个可选模型才出现搜索框，目录较少时保持原来的直接选择体验。
+    const modelChoiceCount = (catalog?.groups ?? []).reduce((count, group) => count + group.models.length, 0);
+    const showModelSearch = modelChoiceCount > 4;
+    useEffect(() => {
+        if (selection.adapterId === DSH_NATIVE_SESSION_ADAPTER_ID) {
+            let active = true;
+            const adapterId = selection.adapterId;
+            const cached = getModelCatalogCache(props.rpc, sessionId).get(adapterId);
+            if (cached !== undefined)
+                setCatalogState({ sessionId, adapterId, value: cached });
+            void loadModelCatalog(props.rpc, adapterId, sessionId)
+                .then((value) => { if (active)
+                setCatalogState({ sessionId, adapterId, value }); })
+                .catch(() => {
+                if (active && getModelCatalogCache(props.rpc, sessionId).get(adapterId) === undefined) {
+                    setCatalogState({ sessionId, adapterId, value: { groups: [], currentModel: null, currentEffort: null } });
+                }
+            });
+            return () => { active = false; };
         }
         let active = true;
         const adapterId = selection.adapterId;
@@ -344,7 +459,9 @@ function ModelSlot(props) {
                     : selections.get(sessionId) ?? selection;
                 if (currentSelection.adapterId !== adapterId)
                     return;
-                const model = findModel(value, currentSelection.modelId) ?? firstModel(value);
+                const model = currentSelection.modelId === undefined
+                    ? firstModel(value)
+                    : findModel(value, currentSelection.modelId);
                 if (model === undefined)
                     return;
                 const effort = model.efforts.includes(currentSelection.effortId ?? '') ? currentSelection.effortId : defaultEffort(model.efforts);
@@ -388,13 +505,67 @@ function ModelSlot(props) {
             active = false;
         };
     }, [props.rpc, selection.adapterId, sessionId, catalogRetry]);
+    useEffect(() => {
+        setPane('root');
+    }, [sessionId, selection.adapterId]);
     // 手动重新检测后刷新目录；日常读取沿用缓存，不定时重启探测。
-    useEffect(() => subscribeAdapterCatalogChanged(props.rpc, () => setCatalogRetry((value) => value + 1)), [props.rpc]);
+    useEffect(() => subscribeAdapterCatalogChanged(props.rpc, (change) => {
+        if (change.kind === 'models' && change.adapterId !== selection.adapterId)
+            return;
+        setCatalogRetry((value) => value + 1);
+    }), [props.rpc, selection.adapterId]);
     useEffect(() => { if (selection.adapterId === 'dsh')
         setOpen(false); }, [selection.adapterId]);
-    if (selection.adapterId === 'dsh')
-        return null;
-    const model = catalog === null ? undefined : findModel(catalog, selection.modelId) ?? firstModel(catalog);
+    // 进入模型列表、目录从少变多或重新打开菜单时，把焦点交给搜索框（与内置选择器一致）。
+    useEffect(() => {
+        if (!open || pane !== 'model' || !showModelSearch)
+            return;
+        modelSearchRef.current?.focus();
+    }, [open, pane, showModelSearch]);
+    // 离开模型列表、搜索被关闭或关闭菜单后清空查询，下一次打开从完整目录开始。
+    useEffect(() => {
+        if (open && pane === 'model' && showModelSearch)
+            return;
+        setModelQuery('');
+        setHighlightedModelIndex(null);
+    }, [open, pane, showModelSearch]);
+    // 模型列表与思考档位不再提供返回按钮：Escape 退回根菜单。
+    useEffect(() => {
+        if (!open || pane === 'root' || typeof document === 'undefined')
+            return;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            setPane('root');
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+    }, [open, pane]);
+    // 所有 Hooks 都先执行；原生与外部适配器切换不能改变 Hook 调用顺序。
+    const translationSettings = translationSettingsOpen && props.settings !== undefined
+        ? createElement(ConversationTranslationSettings, {
+            key: selection.adapterId, adapterId: selection.adapterId,
+            settings: props.settings, t, onClose: () => setTranslationSettingsOpen(false),
+        })
+        : null;
+    const openTranslationSettings = () => {
+        setOpen(false);
+        setTranslationSettingsOpen(true);
+    };
+    if (selection.adapterId === DSH_NATIVE_SESSION_ADAPTER_ID) {
+        return createElement('div', { ref: rootRef, hidden: true }, nativeMenu !== null && nativeAvailable ? createPortal(createElement(TranslationToggleRow, {
+            checked: selection.translationEnabled ?? nativeDefault === true,
+            label: t('cli.translationConversation'),
+            toggleLabel: t('cli.translationConversationToggle'),
+            onChange: (next) => update({ ...selection, translationEnabled: next }),
+            settingsLabel: t('cli.translationSettings'),
+            onSettings: openTranslationSettings,
+        }), nativeMenu) : null, translationSettings);
+    }
+    const model = (catalog === null ? undefined : findModel(catalog, selection.modelId))
+        ?? (selection.modelId ? { id: selection.modelId, name: selection.modelId, efforts: [] } : catalog === null ? undefined : firstModel(catalog));
     const efforts = model?.efforts ?? [];
     // 目录已经加载、但当前模型不声明该档位时不能再沿用旧值：切到 Claude 这类没有
     // 思考档位的模型后，残留的 Gemini 档位既会显示错，也会被下发成 `--effort`，
@@ -451,7 +622,7 @@ function ModelSlot(props) {
             return;
         update({ adapterId: selection.adapterId, modelId: model.id, ...(selection.effortId ? { effortId: selection.effortId } : {}), serviceTierId, translationEnabled: selection.translationEnabled === true });
     };
-    const translationAvailable = isSessionTranslationAdapter(selection.adapterId);
+    const translationAvailable = supportsSessionTranslation(selection.adapterId);
     const toggleTranslation = (next) => {
         if (model === undefined)
             return;
@@ -463,6 +634,49 @@ function ModelSlot(props) {
             translationEnabled: next,
         });
     };
+    const modelGroups = catalog?.groups ?? [];
+    // 搜索只在模型较多时启用；过滤按 Provider 分组进行，空分组直接隐藏，
+    // 与内置模型选择器的 rankByName 分组结果一致。
+    const modelQueryText = showModelSearch ? modelQuery.trim() : '';
+    const visibleModelGroups = modelQueryText === ''
+        ? modelGroups
+        : modelGroups
+            .map((group) => ({ ...group, models: rankModelByName(group.models, modelQueryText) }))
+            .filter((group) => group.models.length > 0);
+    const visibleModels = visibleModelGroups.flatMap((group) => group.models);
+    const currentVisibleModelIndex = visibleModels.findIndex((item) => item.id === model?.id);
+    const activeModelIndex = visibleModels.length === 0
+        ? -1
+        : Math.min(highlightedModelIndex ?? Math.max(0, currentVisibleModelIndex), visibleModels.length - 1);
+    // 每次渲染重建可见模型的可聚焦引用，键盘高亮移动时把目标滚入可视区。
+    modelOptionRefs.current = [];
+    let modelOptionIndex = 0;
+    const changeModelQuery = (next) => {
+        setModelQuery(next);
+        setHighlightedModelIndex(0);
+    };
+    const moveModelHighlight = (offset) => {
+        if (visibleModels.length === 0)
+            return;
+        const next = (activeModelIndex + offset + visibleModels.length) % visibleModels.length;
+        setHighlightedModelIndex(next);
+        modelOptionRefs.current[next]?.scrollIntoView?.({ block: 'nearest' });
+    };
+    // 搜索框聚焦时 ↑/↓ 在可见模型间移动高亮，Enter 直接选中；与内置选择器同一套键盘路径。
+    const onModelSearchKeyDown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            moveModelHighlight(event.key === 'ArrowDown' ? 1 : -1);
+            return;
+        }
+        if (event.key !== 'Enter')
+            return;
+        const highlighted = visibleModels[activeModelIndex];
+        if (highlighted === undefined)
+            return;
+        event.preventDefault();
+        chooseModel(highlighted);
+    };
     const menu = loading
         ? [
             createElement('div', { key: 'loading', role: 'status', 'aria-live': 'polite', style: modelLoadingMenuStyle }, createElement('span', { className: 'codingns4dsh-cli-spinner', 'aria-hidden': true, style: modelSpinnerStyle }), createElement('span', undefined, t('cli.loadingModel'))),
@@ -470,11 +684,15 @@ function ModelSlot(props) {
         : pane === 'root'
             ? [
                 ...(translationAvailable
-                    ? [createElement('div', { key: 'translation', className: 'codingns4dsh-translation-toggle', style: serviceTierRowStyle }, createElement('span', { style: serviceTierLabelStyle }, t('cli.translationConversation')), createElement(Switch, {
+                    ? [createElement(TranslationToggleRow, {
+                            key: 'translation',
                             checked: selection.translationEnabled === true,
+                            label: t('cli.translationConversation'),
+                            toggleLabel: t('cli.translationConversationToggle'),
                             onChange: toggleTranslation,
-                            label: t('cli.translationConversationToggle'),
-                        }))]
+                            settingsLabel: t('cli.translationSettings'),
+                            onSettings: openTranslationSettings,
+                        })]
                     : []),
                 // 档位开关固定在「模型」行上方，与模型/思考等级同处一个弹层。
                 ...(serviceTierAvailable
@@ -489,15 +707,53 @@ function ModelSlot(props) {
             ]
             : pane === 'model'
                 ? [
-                    createElement('button', { key: 'back', type: 'button', onClick: () => setPane('root'), style: nativeBackStyle }, t('cli.back')),
-                    ...((catalog?.groups ?? []).map((group) => createElement('section', { key: group.id, role: 'group', 'aria-label': group.name, style: { marginTop: 4 } }, createElement('div', { style: nativeGroupTitleStyle }, group.name), ...group.models.map((item) => createElement('button', { key: `${group.id}:${item.id}`, type: 'button', role: 'menuitemradio', 'aria-checked': item.id === model?.id, onClick: () => chooseModel(item), style: nativeOptionStyle }, createElement('span', { style: { flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, item.name), item.id === model?.id && createElement('span', { 'aria-hidden': true }, '✓'))))))
+                    // 与内置模型选择器一致：搜索行就是子面板第一项，上方不放返回按钮；
+                    // 返回根菜单由 Escape 完成。
+                    // 搜索行固定在菜单顶部，模型分组在下方独立滚动，与内置选择器结构一致。
+                    showModelSearch && createElement('div', { key: 'model-search', className: 'codingns4dsh-model-search-row' }, createElement(DshInput, {
+                        ref: modelSearchRef,
+                        className: `codingns4dsh-model-search${modelQuery !== '' ? ' codingns4dsh-model-search-with-query' : ''}`,
+                        type: 'text',
+                        role: 'searchbox',
+                        'aria-label': t('cli.modelSearch'),
+                        'aria-controls': modelGroupsId,
+                        'aria-activedescendant': activeModelIndex < 0 ? undefined : `${modelGroupsId}-${String(activeModelIndex)}`,
+                        placeholder: t('cli.modelSearch'),
+                        value: modelQuery,
+                        onChange: (event) => changeModelQuery(event.currentTarget.value),
+                        onKeyDown: onModelSearchKeyDown,
+                    }), modelQuery !== '' && createElement('button', {
+                        key: 'clear',
+                        type: 'button',
+                        className: 'codingns4dsh-model-search-clear',
+                        'aria-label': t('cli.modelSearchClear'),
+                        onClick: () => { changeModelQuery(''); modelSearchRef.current?.focus(); },
+                    }, createElement(resolveCloseFillIcon(), {}))),
+                    createElement('div', { key: 'model-groups', id: modelGroupsId, className: 'codingns4dsh-model-groups' }, ...visibleModelGroups.map((group) => createElement('section', { key: group.id, role: 'group', 'aria-label': group.name, style: { marginTop: 4 } }, createElement('div', { style: nativeGroupTitleStyle }, group.name), ...group.models.map((item) => {
+                        const index = modelOptionIndex++;
+                        return createElement('button', {
+                            key: `${group.id}:${item.id}`,
+                            ref: (element) => { modelOptionRefs.current[index] = element; },
+                            id: `${modelGroupsId}-${String(index)}`,
+                            type: 'button',
+                            role: 'menuitemradio',
+                            'aria-checked': item.id === model?.id,
+                            'data-highlighted': showModelSearch && index === activeModelIndex ? 'true' : undefined,
+                            tabIndex: showModelSearch ? -1 : undefined,
+                            className: 'codingns4dsh-model-option',
+                            onMouseMove: () => { if (showModelSearch && index !== activeModelIndex)
+                                setHighlightedModelIndex(index); },
+                            onClick: () => chooseModel(item),
+                            style: nativeOptionStyle,
+                        }, createElement('span', { style: { flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, item.name), item.id === model?.id && createElement('span', { 'aria-hidden': true }, '✓'), item.source === 'magpie' && createElement(MagpieModelTag, {}));
+                    }))), visibleModelGroups.length === 0 && createElement('div', { key: 'model-empty', role: 'status', style: modelSearchEmptyStyle }, t(modelGroups.length === 0 ? 'cli.noModelsAvailable' : 'cli.modelSearchEmpty'))),
                 ]
                 : [
-                    createElement('button', { key: 'back', type: 'button', onClick: () => setPane('root'), style: nativeBackStyle }, t('cli.back')),
+                    // 思考档位同样是原生式下钻面板，没有返回按钮；Escape 回到根菜单。
                     createElement('div', { key: 'title', style: nativeGroupTitleStyle }, t('cli.thinkingLevelTitle', { model: modelLabel })),
                     ...(efforts.length > 0 ? efforts : ['default']).map((effort) => createElement('button', { key: effort, type: 'button', role: 'menuitemradio', 'aria-checked': effort === effortValue, onClick: () => chooseEffort(effort), style: nativeOptionStyle }, createElement('span', { style: { flex: '1 1 auto' } }, effortDisplayName(model, effort, t('cli.defaultEffort'))), effort === effortValue && createElement('span', { 'aria-hidden': true }, '✓'))),
                 ];
-    return createElement('div', { ref: rootRef, className: 'codingns4dsh-model-root', style: { position: 'relative', minWidth: 0, maxWidth: '100%', flex: '1 1 min(360px, 45cqw)', display: 'inline-flex' } }, createElement('button', { type: 'button', disabled: triggerDisabled, 'aria-label': t('cli.chooseModel', { model: modelLabel, effort: effortLabel }), 'aria-busy': loading, 'aria-haspopup': 'menu', 'aria-expanded': open, onClick: () => { setPane('root'); setOpen((value) => !value); }, style: nativeTriggerStyle }, !loading && createElement(resolveDataIcon(), { className: 'codingns4dsh-model-icon', size: 16 }), loading && createElement('span', { className: 'codingns4dsh-cli-spinner', 'aria-hidden': true, style: modelSpinnerStyle }), createElement(ModelName, { label: modelLabel, loading }), !loading && createElement('span', { className: 'codingns4dsh-model-effort', style: { color: dshThemeColor.labelCaption, whiteSpace: 'nowrap' } }, effortLabel), !loading && createElement(NativeDropdownChevron, { open })), open && createElement('div', { role: 'menu', 'aria-label': t('cli.chooseModelMenu'), style: nativeMenuStyle }, ...menu));
+    return createElement('div', { ref: rootRef, className: 'codingns4dsh-model-root', style: { position: 'relative', minWidth: 0, maxWidth: '100%', flex: '1 1 min(360px, 45cqw)', display: 'inline-flex' } }, createElement('button', { type: 'button', disabled: triggerDisabled, 'aria-label': t('cli.chooseModel', { model: modelLabel, effort: effortLabel }), 'aria-busy': loading, 'aria-haspopup': 'menu', 'aria-expanded': open, onClick: () => { setPane('root'); setOpen((value) => !value); }, style: nativeTriggerStyle }, !loading && createElement(resolveDataIcon(), { className: 'codingns4dsh-model-icon', size: 16 }), loading && createElement('span', { className: 'codingns4dsh-cli-spinner', 'aria-hidden': true, style: modelSpinnerStyle }), createElement(ModelName, { label: modelLabel, loading }), !loading && createElement('span', { className: 'codingns4dsh-model-effort', style: { color: dshThemeColor.labelCaption, whiteSpace: 'nowrap' } }, effortLabel), !loading && createElement(NativeDropdownChevron, { open })), open && createElement('div', { role: 'menu', 'aria-label': t('cli.chooseModelMenu'), style: pane === 'model' ? nativeModelMenuStyle : nativeMenuStyle }, ...menu), translationSettings);
 }
 function effortDisplayName(model, effort, defaultLabel) {
     if (effort === 'default')
@@ -507,6 +763,9 @@ function effortDisplayName(model, effort, defaultLabel) {
 const nativeTriggerStyle = { width: '100%', minWidth: 0, maxWidth: 'min(360px, 45cqw)', height: 28, color: dshThemeColor.labelSecondary, cursor: 'pointer', background: 'transparent', border: 0, borderRadius: 24, padding: '0 4px 0 8px', display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: uiFontSize(13), lineHeight: '20px' };
 const modelNameStyle = { minWidth: 0, maxWidth: 150, flex: '0 1 150px', display: 'block', overflow: 'hidden', whiteSpace: 'nowrap' };
 const nativeMenuStyle = { ...dshPopupSurfaceStyle, position: 'absolute', zIndex: 1100, right: 0, bottom: 'calc(100% + 8px)', minWidth: 240, maxWidth: 'min(420px, calc(100vw - 32px))', maxHeight: 'min(360px, calc(100vh - 96px))', overflowX: 'hidden', overflowY: 'auto', padding: 4, border: 0, borderRadius: 20 };
+// 模型列表菜单改为列布局：搜索行固定在顶部，只有模型分组区域滚动，
+// 与内置模型选择器的 MenuSurface + groups 结构一致。
+const nativeModelMenuStyle = { ...nativeMenuStyle, display: 'flex', flexDirection: 'column', overflowY: 'hidden' };
 // 菜单行同时用于 <button> 和 <div>：button 由 DSH 全局样式给了 border-box，
 // div 没有，若只写 width:100%+padding，div 会按 content-box 多出左右各 10px，
 // 把整行撑出面板并触发横向滚动条（档位开关因此被推到贴住右边缘）。
@@ -518,11 +777,11 @@ const serviceTierLabelStyle = { flex: 'none', whiteSpace: 'nowrap' };
 const nativeMenuLabelStyle = { flex: 'none', whiteSpace: 'nowrap' };
 const nativeMenuValueStyle = { flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'right', color: dshThemeColor.labelTertiary };
 const nativeChevronStyle = { flex: 'none', color: dshThemeColor.labelTertiary, fontSize: uiFontSize(20), lineHeight: 1 };
-const nativeBackStyle = { width: '100%', height: 30, color: dshThemeColor.labelSecondary, cursor: 'pointer', textAlign: 'left', background: 'transparent', border: 0, borderRadius: 8, padding: '0 8px', fontSize: uiFontSize(13) };
 const nativeGroupTitleStyle = { position: 'sticky', top: 0, zIndex: 1, padding: '5px 8px 3px', color: dshThemeColor.labelTertiary, background: dshThemeColor.menuBackground, fontSize: uiFontSize(12), fontWeight: 500, lineHeight: '18px' };
 const nativeOptionStyle = { width: '100%', minHeight: 38, color: 'inherit', cursor: 'pointer', textAlign: 'left', background: 'transparent', border: 0, borderRadius: 10, padding: '6px 8px', display: 'flex', alignItems: 'center', gap: 8, fontSize: uiFontSize(14), lineHeight: '20px' };
 const modelSpinnerStyle = { width: 12, height: 12, flex: '0 0 12px', boxSizing: 'border-box', border: '2px solid currentColor', borderRightColor: 'transparent', borderRadius: '50%' };
 const modelLoadingMenuStyle = { minHeight: 56, padding: '0 12px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: dshThemeColor.labelTertiary, fontSize: uiFontSize(13) };
+const modelSearchEmptyStyle = { margin: 0, padding: 8, color: dshThemeColor.labelTertiary, fontSize: uiFontSize(12), lineHeight: '18px' };
 function defaultEffort(efforts) {
     if (efforts.length === 0)
         return undefined;