dsh-model-groups 0.3.3 → 0.3.4

package/README.md

@@ -1,153 +1,117 @@
 # DSH Model Groups
 
-给 DeepSeek Harness 的模型选择菜单增加分层折叠，并在自定义模型 API 中管理多份密钥配置。
+为 DeepSeek Harness 网页端提供分层模型菜单与多密钥管理。同一供应商共用 Provider ID、API 地址和协议，各配置分别设置名称、密钥与模型列表。
 
-- 按“供应商 → 密钥配置 → 模型”展开和选择。
-- 同一供应商的多份配置可以使用相同的模型 ID，选择时分别使用对应密钥。
-- 支持名称搜索、全部展开、全部收起，以及折叠状态记忆。
-- 模型和密钥由用户手动选择，不自动轮换或切换配置。
+## 功能
 
-## 适用范围
+- 按“供应商 → 密钥配置 → 模型”浏览和选择。
+- 支持原地折叠、侧边面板、名称搜索、全部展开与收起。
+- 记住各级折叠状态；搜索时临时展开匹配项。
+- 不同密钥配置可使用相同模型 ID，选择时使用对应配置的密钥。
+- 手动选择配置，不自动轮换密钥或切换到其他配置。
 
-**当前版本仅支持 DSH `0.2.2-rc.1` 的 Harness 网页界面，安装脚本需要 Node.js 22 或更新版本。**
+## 环境要求
 
-在 dsh-go 手机上使用时，功能出现在对应的 Harness 网页中。dsh-go 原生聊天界面的模型菜单不在本插件的修改范围内。
+- DeepSeek Harness **0.2.2-rc.1**。
+- Node.js **22 或以上**。
+- Harness 网页界面；在 dsh-go 中使用时，功能出现在对应网页，不影响 App 原生模型菜单。
+- DSH 安装目录可写，且目标程序文件符合支持的版本与哈希。
 
-完整安装包括两部分：**注册客户端插件**，以及**应用五项 DSH 兼容补丁**。只安装 npm 包不会自动应用补丁。补丁用于让模型设置、模型发现和请求发送共同识别每份密钥配置。
+**本插件包含宿主兼容补丁。** 插件加载时会检查并备份原文件，自动应用五项补丁；不修改现有供应商、密钥或会话配置。版本或文件内容不受支持时会停止应用，不强制覆盖。
 
-## 交给 AI 安装
+## 安装
 
-把下面整段复制给能够访问 DSH 安装环境的 AI。这是一项安装任务，不是文档审阅任务。
-
-```text
-请帮我安装 dsh-model-groups，并完成安装后的验证。
-
-官方说明：
-https://github.com/betsunninda9-lgtm/dsh-model-groups
-
-请实际执行安装，不要只评价文档或给出命令建议：
-1. 确认当前使用的 DSH 主机、profile 和界面。该插件仅支持
-   DSH 0.2.2-rc.1 的 Harness 网页界面；版本不符就停止并说明。
-2. 阅读仓库当前 README，使用 npm 官方源下载当前版本，
-   解压到长期保留的插件目录。不要修改供应商、密钥或模型配置。
-3. 找到正在使用的 DSH 实际安装目录，核对包名与版本。
-   不要把插件目录当成 DSH 目录，也不要猜测安装路径。
-4. 在解压后的插件目录执行 native-patches.mjs 的 --check，
-   显式传入 --dsh-root。遇到哈希或版本不符就停止，不强制覆盖。
-5. 用 dsh plugin --profile <当前profile> add <插件绝对路径>
-   注册插件。只有当前实例使用 web profile 时才填写 web。
-6. 在合适的停机窗口应用兼容补丁；如果当前对话依赖这个引擎，
-   先完成可在线执行的步骤，再告诉我如何停止、应用补丁和重启。
-   不要直接中断正在进行的对话。
-7. 重启原来使用的 DSH 服务并刷新原网页，核对模型菜单分组和
-   设置页“多密钥配置”开关。不要启动另一个服务代替原服务。
-8. 报告安装版本、插件目录、补丁检查结果，以及是否仍需我重启。
-   不要把下载成功或插件注册成功当成整项安装已完成。
-```
-
-## 手动安装
-
-以下命令适用于 Bash 环境。先确认 DSH 版本，再执行。
-
-### 1. 下载并解压
+在目标设备的 DSH 环境中执行：
 
 ```bash
-PLUGIN_DIR="${DSH_HOME:-$HOME/.dsh}/local-plugins/dsh-model-groups-0.3.3"
-mkdir -p "$PLUGIN_DIR"
-cd "$PLUGIN_DIR"
-npm pack dsh-model-groups@0.3.3 --registry=https://registry.npmjs.org/
-tar -xzf dsh-model-groups-0.3.3.tgz --strip-components=1
+dsh plugin --profile web add dsh-model-groups@0.3.4 --registry=https://registry.npmjs.org/
 ```
 
-这一步只准备插件文件。请保留该目录，后续注册与补丁回退都需要使用它。
-
-### 2. 确认 DSH 目录并检查补丁
-
-`DSH_ROOT` 是正在使用的 DSH 安装目录：该目录本身或其 `node_modules/@deepseek-ai/dsh` 下的包应为 `@deepseek-ai/dsh@0.2.2-rc.1`，且该目录下包含补丁要修改的 `node_modules/@deepseek-ai/` 文件。它不是插件目录、profile 目录或项目工作目录。
+安装包：[npm](https://www.npmjs.com/package/dsh-model-groups) · [GitHub 发布页](https://github.com/betsunninda9-lgtm/dsh-model-groups/releases/tag/v0.3.4)。`web` 为 dsh-go 本机常用 profile，其他环境请使用实际 profile。
 
-下面会询问实际路径，不要直接填写示例路径：
-
-```bash
-read -r -p '请输入实际 DSH 安装目录：' DSH_ROOT
-node scripts/native-patches.mjs --dsh-root "$DSH_ROOT" --check
-```
+插件加载并提示“补丁已自动安装”后，保存草稿，**重启原 DSH 引擎并刷新网页**。无需先停止引擎，也不需要外部终端手工打补丁。
 
-成功时会列出五个目标文件。`pristine` 表示尚未应用，`patched` 表示已应用本插件对应的补丁。版本、内容或路径不匹配时，脚本报错并停止；请先解决原因。
+如果安装后插件尚未加载，先启动或重启引擎；若此次启动才应用补丁，再重启一次以载入新模块。补丁已在磁盘就绪时，后续加载不会重复写入。
 
-### 3. 注册插件
+当前正式版为 `0.3.4`，包含已验证的自动补丁安装与侧边面板修复。
 
-以下以 `web` profile 为例；其他实例请填写其实际 profile 名称：
+### 交给 AI 安装
 
-```bash
-dsh plugin --profile web add "$PLUGIN_DIR"
+```text
+请按 https://github.com/betsunninda9-lgtm/dsh-model-groups 的安装说明，
+使用 npm 正式版安装到当前 DSH profile。
+我允许插件自动校验、备份并应用宿主补丁；保留现有配置。
+检查加载日志，成功后提醒我重启原引擎并刷新网页；遇到不兼容就停止报告。
 ```
 
-注册成功仍不代表兼容补丁已经生效。
+## 使用
 
-### 4. 应用补丁并重启
+1. 打开 **设置 → 模型**，新增或编辑自定义模型 API。
+2. 填写供应商公共的 Provider ID、API 地址和协议。
+3. 开启 **多密钥配置**，为每份配置填写名称、密钥和模型列表，点击“应用”。
+4. 在会话模型菜单中展开供应商和配置，选择需要的模型。
 
-保存正在编辑的内容，停止正在使用的 DSH 服务。在外部终端回到步骤 1 的插件目录，使用步骤 2 确认的 DSH 路径执行：
-
-```bash
-read -r -p '请输入实际 DSH 安装目录：' DSH_ROOT
-node scripts/native-patches.mjs --dsh-root "$DSH_ROOT" --apply
+```text
+示例供应商 A
+  配置 A
+    示例模型
+  配置 B
+    示例模型
+示例供应商 B
+  示例模型
 ```
 
-补丁脚本会校验版本与文件哈希，备份原文件后写入变更。已经应用的补丁会跳过；脚本不会启动或停止 DSH。
+已有单密钥配置与旧会话选择会保留。开启多密钥后，可在模型菜单手动选择新配置；插件不会自动合并已有供应商或迁移会话选择。
 
-用原来的方式启动 DSH，然后刷新原网页。dsh-go 本机环境中，先准备好外部终端的执行方式，再停止引擎；停止后当前 AI 对话无法继续替你执行命令。
+关闭多密钥配置会保留已保存的配置与凭据，删除配置也不会同时删除凭据。有尚未保存的密钥输入时，需要先保存或清空，才能确认关闭。
 
-### 5. 确认安装结果
+窄屏侧边面板会根据可用空间调整各级宽度；三级并列时，较长名称可能截断。
 
-- 会话中的模型菜单按供应商分组，能够展开和收起。
-- 在“设置 → 模型”编辑支持的自定义模型 API，可以看到“多密钥配置”开关。
-- 开启并保存多份配置后，模型菜单出现对应的配置层级。
+## 更新
 
-只有客户端分组出现、设置页没有新开关时，请检查五项补丁是否全部应用，以及原 DSH 服务是否已重启。
+使用对应发布版本的安装命令更新，随后按加载日志提示重启引擎并刷新网页。兼容补丁已经存在且未变化时，不会重复应用。
 
-## 使用方法
+DSH 升级前请确认插件兼容范围。新版本或未知文件会被拒绝，需要等待对应适配，不能强制套用旧补丁。
 
-在“设置 → 模型”新增或编辑自定义模型 API，填写公共的 Provider ID、API 地址和协议。开启“多密钥配置”，为每份配置填写名称、密钥和模型列表，点击“应用”保存。
+DSHMarket 的收录需经过社区审核。普通插件的市场更新跟随 npm `latest`，不会自动跟随 GitHub 发布包或 npm `beta` 标签。
 
-例如，两个配置都提供同一模型时，菜单中会分别显示：
+## 安装诊断
 
-```text
-示例供应商 A
-  配置 A
-    示例模型
-  配置 B
-    示例模型
-示例供应商 B
-  示例模型
+没有出现“多密钥配置”开关时，先确认原引擎已在自动补丁后重启，并刷新原网页。仍未恢复，可在已安装插件目录执行：
+
+```bash
+node scripts/doctor.mjs --dsh-root /opt/dsh --json
 ```
 
-选择哪个配置，就使用哪份配置的密钥。搜索供应商、配置或模型名称时，匹配路径会临时展开；清空搜索后恢复原来的折叠状态。
+`/opt/dsh` 请替换为实际 DSH 安装目录。五项文件应为 `patched`。该命令只读检查程序文件，不读取密钥；磁盘状态正常不代表运行中的模块已刷新。
 
-已有的单密钥配置会保留。旧会话仍使用原来的选择，需要时可手动切换到新配置。关闭多密钥配置会保留已保存的配置和凭据；删除某份配置也不会同时删除凭据。存在未保存的密钥输入时，需要先保存或清空输入，才能确认关闭。
+自动安装日志位于原引擎日志中。遇到文件不受支持、目录布局不兼容或权限不足时，请提供程序包版本与文件 SHA-256，勿提供密钥。
 
-插件不会自动合并已有供应商，也不会替用户迁移密钥。API 地址不同的服务应分别配置。
+原文件备份保存在 `DSH_HOME/dsh-model-groups/<安装目录指纹>/backups`，不会随插件包更新丢失。安装意外中断可能留下 `patch.lock`；确认没有安装进程后再处理，不要并发重试。
 
-## 升级与卸载
+## 卸载与还原
 
-**DSH 升级后，请先确认插件支持的新版本，不能把本版补丁强行应用到其他 DSH 版本。**
+移除插件不会自动还原宿主补丁或删除凭据。完整还原前，请先：
 
-仅停用或移除客户端插件不会还原 DSH 兼容补丁。完整卸载前：
+1. 将相关会话和子代理切换回普通单密钥模型。
+2. 关闭多密钥配置，备份配置并清理原版 DSH 不支持的 `multiKey`、`keyEntries` 字段，保留仍需使用的凭据。
+3. 在独立维护目录保留插件包，确保卸载后仍能运行还原脚本。
 
-1. 在相关会话和子代理配置中切换回普通单密钥模型，确认不再使用带 `@dsh-key/` 前缀的选择。
-2. 关闭各供应商的多密钥配置并应用。备份 DSH 配置后，清理原版 DSH 不支持的 `multiKey`、`keyEntries` 配置字段；保留仍需使用的单密钥配置和凭据。
-3. 停止 DSH，在保留的插件目录中执行下面命令，再启动原服务。
+先停用或移除插件，避免其再次加载时重新应用补丁：
 
 ```bash
-read -r -p '请输入实际 DSH 安装目录：' DSH_ROOT
-node scripts/native-patches.mjs --dsh-root "$DSH_ROOT" --revert
 dsh plugin --profile web remove dsh-model-groups
 ```
 
-其他 profile 请替换 `web`。还原脚本只恢复代码，不会替用户修改会话、配置或凭据；仍引用多密钥模型的会话在还原后将无法继续使用该选择。
+随后安排维护窗口，停止原服务，在保留的插件目录执行：
 
-## 开发
+```bash
+node scripts/native-patches.mjs --dsh-root /opt/dsh --revert
+```
+
+完成后启动原服务并刷新网页。还原脚本按校验过的文件版本恢复代码，不修改会话或凭据。仍引用 `@dsh-key/` 模型的会话在还原后无法继续使用该选择。
 
-从 GitHub 获取源码后，运行：
+## 开发
 
 ```bash
 npm run build
@@ -155,6 +119,8 @@ npm test
 npm run check:build
 ```
 
-需要检查真实 DSH 目标文件时，可设置 `DSH_ROOT` 后运行测试。测试覆盖层级、折叠状态、选择器交互和补丁安装器；真实网页中的安装验收仍需按上文完成。
+设置 `DSH_ROOT` 可启用依赖对应 DSH 程序文件的回归测试。源码包含层级、选择器交互、面板布局及补丁安装与恢复测试。
+
+## 许可证
 
-本项目采用 MIT 许可证。客户端选择器包含改编自 DeepSeek Harness 的代码，保留原版权声明。
+[MIT](LICENSE)。包含改编自 DeepSeek Harness 的代码，保留原版权声明。

package/lib/client.js

@@ -294,6 +294,29 @@ const MEASURE_STYLE = {
 * store/verbs) + the standard locale seat.
 * @returns the trigger and, while open, the two-level menu.
 */
+// Lay out the entire cascade together: positioning a child alone can put it
+// over an ancestor when neither side has room for another full-size card.
+function layoutModelFlyouts(rect, viewportWidth, viewportHeight, count) {
+ const margin = Math.min(12, Math.max(0, viewportWidth / 8));
+ const available = Math.max(1, viewportWidth - margin * 2);
+ const preferredWidth = rect.width > 0 ? rect.width : 280;
+ const width = Math.min(preferredWidth, available / count);
+ const height = Math.min(rect.height > 0 ? rect.height : 360, Math.max(1, viewportHeight - margin * 2));
+ const leftRoom = rect.left - margin;
+ const rightRoom = viewportWidth - margin - (rect.left + preferredWidth);
+ const direction = leftRoom >= width * (count - 1) ? -1
+  : rightRoom >= width * (count - 1) ? 1 : leftRoom >= rightRoom ? -1 : 1;
+ const desiredLeft = direction < 0 ? rect.left - width * (count - 1) : rect.left;
+ const start = Math.max(margin, Math.min(desiredLeft, viewportWidth - margin - width * count));
+ const top = Math.max(margin, Math.min(rect.top, viewportHeight - margin - height));
+ return Array.from({ length: count }, (_, index) => ({
+  left: start + width * (direction < 0 ? count - 1 - index : index),
+  top, width, height,
+  // Override the native menu's intrinsic minimum and maximum at narrow widths.
+  minWidth: 0, maxWidth: width, maxHeight: height,
+ }));
+}
+
 function ModelSelect({ locked, available, directory, load, select, t, renderSlot, providersForm }) {
 	const preferences = react.useSyncExternalStore(groupPreferences.subscribe, groupPreferences.getSnapshot);
 	const configuration = react.useSyncExternalStore(listener => providersForm?.subscribe(listener) ?? (() => {}), () => providersForm?.getSnapshot() ?? EMPTY_PROVIDERS_SNAPSHOT);
@@ -332,75 +355,18 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 		}
 	};
 
-	// 完全读取并匹配官方原版主卡片尺寸（宽、高严格保持与主卡片完全一致）
 	const triggerFlyout = (entry, anchorEl) => {
 		clearFlyoutTimer();
 		if (activeFlyout?.key === entry.key) return;
 		setActiveSubFlyout(null);
-		const menuEl = menuRef.current;
-		const menuRect = menuEl ? menuEl.getBoundingClientRect() : anchorEl.getBoundingClientRect();
-		const margin = 12;
-		const winW = window.innerWidth;
-		const winH = window.innerHeight;
-		// 直接读取官方主卡片的实际渲染宽度与高度
-		const panelW = menuRect.width > 0 ? menuRect.width : 280;
-		const panelH = menuRect.height > 0 ? menuRect.height : 360;
-
-		// 紧靠主卡片左侧，0px 缝隙严丝合缝
-		let left = menuRect.left - panelW;
-		if (left < margin) {
-			if (winW - menuRect.right >= panelW + margin) {
-				left = menuRect.right;
-			} else {
-				left = Math.max(margin, Math.min(menuRect.left, winW - panelW - margin));
-			}
-		}
-
-		// 顶部与官方主卡片绝对平齐，高度与官方主卡片 1:1 等高
-		let top = menuRect.top;
-		setActiveFlyout({
-			key: entry.key,
-			entry,
-			pos: {
-				left: Math.round(left),
-				top: Math.round(top),
-				width: Math.round(panelW),
-				height: Math.round(panelH)
-			}
-		});
+		const rect = activeFlyout?.anchorRect ?? (menuRef.current ?? anchorEl).getBoundingClientRect();
+		setActiveFlyout({ key: entry.key, entry, anchorRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height } });
 	};
 
-	const triggerSubFlyout = (childGroup, anchorEl) => {
+	const triggerSubFlyout = (childGroup) => {
 		clearFlyoutTimer();
 		if (activeSubFlyout?.key === childGroup.key) return;
-		const flyoutEl = flyoutRef.current;
-		const flyoutRect = flyoutEl ? flyoutEl.getBoundingClientRect() : anchorEl.getBoundingClientRect();
-		const margin = 12;
-		const winW = window.innerWidth;
-		const winH = window.innerHeight;
-		const panelW = flyoutRect.width > 0 ? flyoutRect.width : 280;
-		const panelH = flyoutRect.height > 0 ? flyoutRect.height : 360;
-
-		let left = flyoutRect.left - panelW;
-		if (left < margin) {
-			if (winW - flyoutRect.right >= panelW + margin) {
-				left = flyoutRect.right;
-			} else {
-				left = Math.max(margin, Math.min(flyoutRect.left, winW - panelW - margin));
-			}
-		}
-
-		let top = flyoutRect.top;
-		setActiveSubFlyout({
-			key: childGroup.key,
-			childGroup,
-			pos: {
-				left: Math.round(left),
-				top: Math.round(top),
-				width: Math.round(panelW),
-				height: Math.round(panelH)
-			}
-		});
+		setActiveSubFlyout({ key: childGroup.key, childGroup });
 	};
 
 	const scheduleCloseFlyout = (delay = 240) => {
@@ -412,11 +378,14 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 	};
 
 	const scheduleCloseSubFlyout = (delay = 240) => {
-		if (subFlyoutTimerRef.current !== null) clearTimeout(subFlyoutTimerRef.current);
+		// Leaving the key panel must not let an older parent-leave timer
+		// destroy both the provider and key panels.
+		clearFlyoutTimer();
 		subFlyoutTimerRef.current = setTimeout(() => {
 			setActiveSubFlyout(null);
 		}, delay);
 	};
+	(0, react.useEffect)(() => () => clearFlyoutTimer(), []);
 	const [toast, setToast] = (0, react.useState)(null);
 	const toastSeq = (0, react.useRef)(0);
 	const rootRef = (0, react.useRef)(null);
@@ -590,6 +559,9 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 		state,
 		query
 	]);
+	const cascade = open && pane === "model" && menuMode === "panel" && !searching && activeFlyout
+		? layoutModelFlyouts({ ...activeFlyout.anchorRect, ...(menuPos ?? {}) }, window.innerWidth, window.innerHeight, activeSubFlyout ? 3 : 2)
+		: null;
 	if (!available) return null;
 	const show = () => {
 		setSelectionFocus(false);
@@ -853,7 +825,7 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 						title: searching ? text('搜索时自动展开，清空搜索后恢复', 'Expanded during search; clearing restores your groups') : entry.id || entry.name,
 						onClick: (e) => {
 							if (isFlyoutMode) {
-								if (isFlyoutActive) setActiveFlyout(null);
+								if (isFlyoutActive) { clearFlyoutTimer(); setActiveFlyout(null); setActiveSubFlyout(null); }
 								else triggerFlyout(entry, e.currentTarget);
 							} else {
 								setHighlightedIndex(null);
@@ -936,8 +908,9 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 			open && (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 				ref: menuRef,
 				id: `${id}-menu`,
-				className: ModelSelect_module_css_default.menu,
-				style: menuPos ?? MEASURE_STYLE,
+				className: clsx(ModelSelect_module_css_default.menu, cascade && "dsh-mg-cascade-panel"),
+				"data-flyout-level": cascade ? "0" : undefined,
+				style: cascade?.[0] ?? menuPos ?? MEASURE_STYLE,
 				role: pane === "model" ? "group" : "menu",
 				"aria-label": t("menu.aria"),
 				"aria-busy": state.status === "loading" || busy,
@@ -1126,18 +1099,12 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 					}, level.key))] })
 				]
 			}), document.body),
-			open && pane === "model" && menuMode === "panel" && activeFlyout !== null && (0, react_dom.createPortal)(
+			cascade !== null && activeFlyout !== null && (0, react_dom.createPortal)(
 				react_jsx_runtime.jsx(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 					ref: flyoutRef,
-					className: ModelSelect_module_css_default.menu,
-					style: {
-						left: activeFlyout.pos.left,
-						top: activeFlyout.pos.top,
-						width: activeFlyout.pos.width,
-						height: activeFlyout.pos.height,
-						position: "fixed",
-						margin: 0
-					},
+					className: clsx(ModelSelect_module_css_default.menu, "dsh-mg-cascade-panel"),
+					"data-flyout-level": "1",
+					style: { ...cascade[1], position: "fixed", margin: 0 },
 					onMouseEnter: clearFlyoutTimer,
 					onMouseLeave: () => scheduleCloseFlyout(200),
 					onMouseDown: (e) => {
@@ -1176,18 +1143,12 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 				}),
 				document.body
 			),
-			open && pane === "model" && menuMode === "panel" && activeSubFlyout !== null && (0, react_dom.createPortal)(
+			cascade !== null && activeSubFlyout !== null && (0, react_dom.createPortal)(
 				react_jsx_runtime.jsx(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 					ref: subFlyoutRef,
-					className: ModelSelect_module_css_default.menu,
-					style: {
-						left: activeSubFlyout.pos.left,
-						top: activeSubFlyout.pos.top,
-						width: activeSubFlyout.pos.width,
-						height: activeSubFlyout.pos.height,
-						position: "fixed",
-						margin: 0
-					},
+					className: clsx(ModelSelect_module_css_default.menu, "dsh-mg-cascade-panel"),
+					"data-flyout-level": "2",
+					style: { ...cascade[2], position: "fixed", margin: 0 },
 					onMouseEnter: clearFlyoutTimer,
 					onMouseLeave: () => scheduleCloseSubFlyout(200),
 					onMouseDown: (e) => {
@@ -1286,7 +1247,7 @@ class ModelSeatBoundary extends react.Component {
 }
 
 
-const MODEL_GROUPS_CSS = "/* DSH Model Groups: 100% native token-compatible styling */\n\n.dsh-mg-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  flex-shrink: 0;\n  margin: 2px 0 4px;\n  padding: 0 4px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dsh-mg-summary {\n  flex: 1;\n  min-width: 0;\n  padding: 0 2px;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 16px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dsh-mg-toolbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex: none;\n}\n\n.dsh-mg-toolbar button {\n  flex: none;\n  height: 22px;\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--dsw-radius-sm);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  font: inherit;\n  font-size: 11px;\n  line-height: 22px;\n  cursor: pointer;\n  transition: background .12s, color .12s;\n}\n\n.dsh-mg-toolbar button:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-primary);\n}\n\n.dsh-mg-toolbar button:disabled {\n  color: var(--dsw-alias-label-dimmed);\n  cursor: default;\n}\n\n.dsh-mg-groupStart {\n  display: block;\n  height: 0;\n  pointer-events: none;\n}\n\n.dsh-mg-groupHeading {\n  border-radius: var(--dsw-radius-md);\n  margin: 1px 0;\n}\n\n.dsh-mg-majorHeading {\n  position: static;\n}\n\n.dsh-mg-minorHeading {\n  position: relative;\n}\n\n.dsh-mg-majorContent {\n  margin-left: 6px;\n  padding-left: 6px;\n  border-left: 1px solid var(--dsw-alias-border-l1);\n}\n\n.dsh-mg-minorContent {\n  margin-left: 6px;\n  padding-left: 6px;\n  border-left: 1px solid var(--dsw-alias-border-l1);\n}\n\n.dsh-mg-source {\n  display: block;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 16px;\n}\n\n.dsh-mg-triggerSource {\n  color: var(--dsw-alias-label-caption);\n  font-size: 13px;\n}\n\n.dsh-mg-groupHeading button {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 32px;\n  padding: 4px 7px;\n  border: 0;\n  border-radius: var(--dsw-radius-md);\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 18px;\n  text-align: left;\n  cursor: pointer;\n  transition: background .12s;\n}\n\n.dsh-mg-groupHeading button:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.dsh-mg-groupHeading button:disabled {\n  cursor: default;\n}\n\n.dsh-mg-groupHeading button:focus-visible,\n.dsh-mg-toolbar button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n}\n\n.dsh-mg-groupArrow {\n  flex: none;\n  width: 14px;\n  height: 14px;\n  color: var(--dsw-alias-label-caption);\n  transition: transform .12s;\n}\n\n.dsh-mg-groupArrowOpen {\n  transform: rotate(90deg);\n}\n\n.dsh-mg-groupName {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dsh-mg-groupCount {\n  flex: none;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.dsh-mg-currentBadge {\n  flex: none;\n  color: var(--dsw-alias-state-business-primary);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.dsh-mg-groups {\n  min-height: 0;\n}\n\n.dsh-mg-groups [hidden] {\n  display: none !important;\n}\n\n/* ── 飞出卡片：与官方原版菜单 100% 结构一致，剔除 header 伪分层与白色叠加 ── */\n.dsh-mg-flyout-subgroup-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.dsh-mg-subgroup-item {\n  box-sizing: border-box;\n  border-radius: var(--dsw-radius-md);\n  width: auto;\n  min-width: 100%;\n  min-height: 34px;\n  color: var(--dsw-alias-label-primary);\n  text-align: left;\n  cursor: pointer;\n  background: 0 0;\n  border: none;\n  outline: none;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 7px;\n  display: flex;\n  font: inherit;\n  font-size: 13px;\n  line-height: 18px;\n  transition: background .12s;\n}\n\n.dsh-mg-subgroup-item:hover,\n.dsh-mg-subgroup-item[data-active=\"true\"] {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.dsh-mg-subgroup-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dsh-mg-subgroup-count {\n  flex: none;\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dsh-mg-subgroup-arrow {\n  flex: none;\n  color: var(--dsw-alias-menu-icon, var(--dsw-alias-label-caption));\n}\n\n.dsh-mg-active-heading {\n  background: var(--dsw-alias-interactive-bg-hover) !important;\n}\n\n/* ── 底部模式切换：原生轻量化，无突兀高饱和蓝块 ── */\n.dsh-mg-modebar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 2px;\n  margin-top: 3px;\n  border-top: 1px solid var(--dsw-alias-border-l1);\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dsh-mg-mode-btn {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  font: inherit;\n  font-size: 11px;\n  padding: 2px 6px;\n  border-radius: var(--dsw-radius-sm);\n  cursor: pointer;\n  transition: background .12s, color .12s;\n}\n\n.dsh-mg-mode-btn:hover {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-primary);\n}\n\n.dsh-mg-mode-btn[data-active=\"true\"] {\n  background: var(--dsw-alias-interactive-bg-active, rgba(255, 255, 255, 0.1));\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n@media (pointer: coarse) {\n  .dsh-mg-groupHeading button { min-height: 36px; }\n  .dsh-mg-toolbar button { height: 26px; }\n  .dsh-mg-mode-btn { min-height: 24px; padding: 2px 8px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsh-mg-groupArrow { transition: none; }\n}\n\n";
+const MODEL_GROUPS_CSS = "/* DSH Model Groups: 100% native token-compatible styling */\n\n.dsh-mg-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  flex-shrink: 0;\n  margin: 2px 0 4px;\n  padding: 0 4px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dsh-mg-summary {\n  flex: 1;\n  min-width: 0;\n  padding: 0 2px;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 16px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dsh-mg-toolbar-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex: none;\n}\n\n.dsh-mg-toolbar button {\n  flex: none;\n  height: 22px;\n  padding: 0 6px;\n  border: 0;\n  border-radius: var(--dsw-radius-sm);\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  font: inherit;\n  font-size: 11px;\n  line-height: 22px;\n  cursor: pointer;\n  transition: background .12s, color .12s;\n}\n\n.dsh-mg-toolbar button:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-primary);\n}\n\n.dsh-mg-toolbar button:disabled {\n  color: var(--dsw-alias-label-dimmed);\n  cursor: default;\n}\n\n.dsh-mg-groupStart {\n  display: block;\n  height: 0;\n  pointer-events: none;\n}\n\n.dsh-mg-groupHeading {\n  border-radius: var(--dsw-radius-md);\n  margin: 1px 0;\n}\n\n.dsh-mg-majorHeading {\n  position: static;\n}\n\n.dsh-mg-minorHeading {\n  position: relative;\n}\n\n.dsh-mg-majorContent {\n  margin-left: 6px;\n  padding-left: 6px;\n  border-left: 1px solid var(--dsw-alias-border-l1);\n}\n\n.dsh-mg-minorContent {\n  margin-left: 6px;\n  padding-left: 6px;\n  border-left: 1px solid var(--dsw-alias-border-l1);\n}\n\n.dsh-mg-source {\n  display: block;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 16px;\n}\n\n.dsh-mg-triggerSource {\n  color: var(--dsw-alias-label-caption);\n  font-size: 13px;\n}\n\n.dsh-mg-groupHeading button {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  min-height: 32px;\n  padding: 4px 7px;\n  border: 0;\n  border-radius: var(--dsw-radius-md);\n  background: transparent;\n  color: var(--dsw-alias-label-primary);\n  font: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 18px;\n  text-align: left;\n  cursor: pointer;\n  transition: background .12s;\n}\n\n.dsh-mg-groupHeading button:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.dsh-mg-groupHeading button:disabled {\n  cursor: default;\n}\n\n.dsh-mg-groupHeading button:focus-visible,\n.dsh-mg-toolbar button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n}\n\n.dsh-mg-groupArrow {\n  flex: none;\n  width: 14px;\n  height: 14px;\n  color: var(--dsw-alias-label-caption);\n  transition: transform .12s;\n}\n\n.dsh-mg-groupArrowOpen {\n  transform: rotate(90deg);\n}\n\n.dsh-mg-groupName {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dsh-mg-groupCount {\n  flex: none;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 16px;\n}\n\n.dsh-mg-currentBadge {\n  flex: none;\n  color: var(--dsw-alias-state-business-primary);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.dsh-mg-groups {\n  min-height: 0;\n}\n\n.dsh-mg-groups [hidden] {\n  display: none !important;\n}\n\n/* ── 飞出卡片：与官方原版菜单 100% 结构一致，剔除 header 伪分层与白色叠加 ── */\n.dsh-mg-flyout-subgroup-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.dsh-mg-subgroup-item {\n  box-sizing: border-box;\n  border-radius: var(--dsw-radius-md);\n  width: auto;\n  min-width: 100%;\n  min-height: 34px;\n  color: var(--dsw-alias-label-primary);\n  text-align: left;\n  cursor: pointer;\n  background: 0 0;\n  border: none;\n  outline: none;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 7px;\n  display: flex;\n  font: inherit;\n  font-size: 13px;\n  line-height: 18px;\n  transition: background .12s;\n}\n\n.dsh-mg-subgroup-item:hover,\n.dsh-mg-subgroup-item[data-active=\"true\"] {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.dsh-mg-subgroup-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dsh-mg-subgroup-count {\n  flex: none;\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dsh-mg-subgroup-arrow {\n  flex: none;\n  color: var(--dsw-alias-menu-icon, var(--dsw-alias-label-caption));\n}\n\n.dsh-mg-active-heading {\n  background: var(--dsw-alias-interactive-bg-hover) !important;\n}\n\n/* ── 底部模式切换：原生轻量化，无突兀高饱和蓝块 ── */\n.dsh-mg-modebar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 6px 2px;\n  margin-top: 3px;\n  border-top: 1px solid var(--dsw-alias-border-l1);\n  font-size: 11px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dsh-mg-mode-btn {\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-secondary);\n  font: inherit;\n  font-size: 11px;\n  padding: 2px 6px;\n  border-radius: var(--dsw-radius-sm);\n  cursor: pointer;\n  transition: background .12s, color .12s;\n}\n\n.dsh-mg-mode-btn:hover {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-primary);\n}\n\n.dsh-mg-mode-btn[data-active=\"true\"] {\n  background: var(--dsw-alias-interactive-bg-active, rgba(255, 255, 255, 0.1));\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n@media (pointer: coarse) {\n  .dsh-mg-groupHeading button { min-height: 36px; }\n  .dsh-mg-toolbar button { height: 26px; }\n  .dsh-mg-mode-btn { min-height: 24px; padding: 2px 8px; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsh-mg-groupArrow { transition: none; }\n}\n\n\n/* Cascade columns share the viewport rather than covering their ancestors. */\n.dsh-mg-cascade-panel {\n  box-sizing: border-box;\n  min-width: 0;\n}\n.dsh-mg-cascade-panel button,\n.dsh-mg-cascade-panel [role=\"menu\"],\n.dsh-mg-cascade-panel .dsh-mg-modebar,\n.dsh-mg-cascade-panel .dsh-mg-toolbar {\n  min-width: 0;\n}\n.dsh-mg-cascade-panel .dsh-mg-toolbar,\n.dsh-mg-cascade-panel .dsh-mg-modebar,\n.dsh-mg-cascade-panel .dsh-mg-toolbar-actions {\n  flex-wrap: wrap;\n}\n.dsh-mg-cascade-panel .dsh-mg-summary {\n  white-space: normal;\n}\n";
 function installModelGroupsStyles() {
   const tagId = 'dsh-model-groups/groups.css';
   if (document.querySelector('style[data-plugin-css="' + tagId + '"]') !== null) return;
@@ -1305,6 +1266,22 @@ function apply(ctx) {
   installModelSelectStyles();
   installModelGroupsStyles();
   const providersForm = ctx.configForms?.get('llm-pi-ai');
+  let statusDisposed = false;
+  let statusNotice;
+  if (typeof fetch === 'function') Promise.resolve().then(() => fetch('/dsh-model-groups/status', { credentials: 'same-origin', cache: 'no-store' }))
+    .then(response => { if (!response.ok) throw new Error('status unavailable'); return response.json(); })
+    .then(status => {
+      if (statusDisposed || (!status.restartRequired && !status.failed)) return;
+      statusNotice = document.createElement('div');
+      statusNotice.dataset.plugin = 'dsh-model-groups';
+      statusNotice.setAttribute('role', 'alertdialog');
+      statusNotice.style.cssText = 'position:fixed;inset:0;z-index:2147483647;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#222);display:grid;place-items:center;padding:24px;box-sizing:border-box;';
+      statusNotice.textContent = status.failed
+        ? '多密钥自动补丁未完成。请回到 App 对话查看引擎日志或运行安装诊断，勿强制覆盖。当前网页暂不可用于编辑模型配置。'
+        : '多密钥补丁已自动安装。请先保存其他页面的草稿，再到 App 重启原引擎并刷新此网页。当前网页暂停操作，避免新旧模块混用。';
+      document.body.appendChild(statusNotice);
+    }).catch(() => {});
+  ctx.on('dispose', () => { statusDisposed = true; statusNotice?.remove(); });
   const onStorage = event => {
     if (event.key === STORAGE_KEY || event.key === null) groupPreferences.sync(event.key === null ? null : event.newValue);
   };

package/native/pi-ai.patch.json

@@ -4,6 +4,18 @@
   "target": "node_modules/@deepseek-ai/dsh-llm-pi-ai/lib/index.js",
   "baseSha256": "070c839e2c00e2d5f7c5d82307ca3d84dbb2323e46979daf265908751bbe8ae8",
   "resultSha256": "a2b3bcda38015026ed58074cef0d508bbd2d7cb1423c00331651fcbd1a9f6b55",
+  "variants": [
+    {
+      "source": "0.2.2-rc.1 with tool lookup optimization and credential cancellation",
+      "baseSha256": "0a99a2fc903a4285044b09114b3bd20ee1e612f39aa381e4a71b10d48ee9e9f7",
+      "resultSha256": "c87f965d9fcc5bbcd386e98ea3b292b05ec7a55d80df1266e18234031b80990e"
+    },
+    {
+      "source": "npm official 0.2.2-rc.1",
+      "baseSha256": "1a3ae58f9b4493e15459cc5000ec80f21b5d3f4a9dea6ffb6bc28e5b8817ae8a",
+      "resultSha256": "b9416207cc7c27aff40cb2b877c9176e53809eb2f6dc741828c2ed6f6bdf541b"
+    }
+  ],
   "replacements": [
     {
       "before": "\t...modelFields\n});\n/** A {@link modelProfile} whose id lives in the `modelOverrides` dict key. */\nconst modelOverride = z.object(modelFields);\nconst profile = z.object({\n\tapiKeyEnv: z.string().role(\"credential-ref\"),\n\tdisplayName: z.string(),\n\tapi: z.union(supportedProtocols()),\n\tbaseURL: z.string(),\n",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-model-groups",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "DSH 网页模型选择器：供应商与密钥配置分层折叠、多密钥手动选择。支持 DSH 0.2.2-rc.1。",
   "type": "module",
   "license": "MIT",
@@ -61,6 +61,7 @@
     "test": "node --test test/*.test.mjs",
     "test:ui": "node --test test/picker-ui.test.mjs",
     "native:check": "node scripts/native-patches.mjs --check",
+    "doctor": "node scripts/doctor.mjs",
     "prepack": "npm run build && npm run check:build"
   }
 }

package/scripts/doctor.mjs

@@ -0,0 +1,39 @@
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { planPatches } from './native-patches.mjs';
+
+const args = process.argv.slice(2);
+if (args.includes('--help')) {
+  console.log('Usage: node scripts/doctor.mjs --dsh-root <DSH installation directory> [--json]\nRead-only installation check. Does not read credentials or change DSH.');
+} else {
+  try {
+    const i = args.indexOf('--dsh-root');
+    if (i < 0 || !args[i + 1] || args.some((arg, index) => index !== i + 1 && !['--dsh-root', '--json'].includes(arg))) {
+      throw new Error('请用 --dsh-root 指定正在使用的 DSH 安装目录。');
+    }
+    const pkg = JSON.parse(fs.readFileSync(fileURLToPath(new URL('../package.json', import.meta.url)), 'utf8'));
+    const plans = planPatches(args[i + 1], 'check');
+    const missing = plans.filter(plan => plan.state !== 'patched');
+    const report = {
+      plugin: pkg.name,
+      version: pkg.version,
+      supportedDsh: pkg.engines.dsh,
+      diskPatchesReady: missing.length === 0,
+      runtimeVerified: false,
+      files: plans.map(plan => ({ target: plan.artifact.target, state: plan.state })),
+      next: missing.length > 0
+        ? '多密钥安装尚未完成：需要按 README 应用尚未安装的兼容补丁，再重启原 DSH 服务并刷新网页。'
+        : '磁盘补丁齐全。请确认原 DSH 服务已在应用补丁后重启，并刷新网页；本检查不能确认运行中的模块或浏览器缓存。',
+    };
+    if (args.includes('--json')) console.log(JSON.stringify(report, null, 2));
+    else {
+      console.log(`${report.plugin} ${report.version} · DSH ${report.supportedDsh}`);
+      for (const item of report.files) console.log(`${item.state}: ${item.target}`);
+      console.log(report.next);
+    }
+    if (missing.length) process.exitCode = 2;
+  } catch (error) {
+    console.error(`无法确认多密钥安装状态：${error.message}`);
+    process.exitCode = 1;
+  }
+}

package/scripts/native-patches.mjs

@@ -32,7 +32,7 @@ export function planPatches(dshRoot, mode = 'check', artifactDirectory = path.jo
   if (dsh.name !== '@deepseek-ai/dsh' || dsh.version !== '0.2.2-rc.1') throw new Error('This patch supports only @deepseek-ai/dsh 0.2.2-rc.1');
   const seen = new Set();
   return ARTIFACTS.map(name => {
-    const artifact = JSON.parse(fs.readFileSync(path.join(artifactDirectory, name), 'utf8'));
+    let artifact = JSON.parse(fs.readFileSync(path.join(artifactDirectory, name), 'utf8'));
     if (artifact.version !== '0.2.2-rc.1' || !/^@deepseek-ai\/dsh-[a-z-]+$/.test(artifact.packageName)) throw new Error('Unsupported patch package/version');
     if (!Array.isArray(artifact.replacements) || artifact.replacements.length === 0 || !/^[0-9a-f]{64}$/.test(artifact.baseSha256) || !/^[0-9a-f]{64}$/.test(artifact.resultSha256)) throw new Error('Invalid patch manifest');
     const prefix = `node_modules/${artifact.packageName}/`;
@@ -44,6 +44,13 @@ export function planPatches(dshRoot, mode = 'check', artifactDirectory = path.jo
     if (pkg.name !== artifact.packageName || pkg.version !== artifact.version) throw new Error('Installed native package version mismatch');
     const source = fs.readFileSync(file, 'utf8');
     const hash = sha256(source);
+    if (artifact.variants !== undefined) {
+      if (!Array.isArray(artifact.variants) || artifact.variants.some(variant => !/^[0-9a-f]{64}$/.test(variant.baseSha256) || !/^[0-9a-f]{64}$/.test(variant.resultSha256))) throw new Error('Invalid patch variants');
+      const candidates = [artifact, ...artifact.variants];
+      const matched = candidates.filter(variant => hash === variant.baseSha256 || hash === variant.resultSha256);
+      if (matched.length > 1) throw new Error('Ambiguous patch variant');
+      if (matched.length === 1) artifact = { ...artifact, baseSha256: matched[0].baseSha256, resultSha256: matched[0].resultSha256 };
+    }
     const state = hash === artifact.baseSha256 ? 'pristine' : hash === artifact.resultSha256 ? 'patched' : 'modified';
     if (state === 'modified') throw new Error(`Refusing unrecognized content: ${artifact.target}`);
     // A no-op still verifies both directions to detect a broken manifest.

package/scripts/setup.mjs

@@ -0,0 +1,40 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawnSync } from 'node:child_process';
+import { planPatches, applyPlan } from './native-patches.mjs';
+
+const args = process.argv.slice(2);
+try {
+  if (args.includes('--help')) {
+    console.log('Usage: node scripts/setup.mjs --dsh-root <directory> --profile <profile> [--apply --service-stopped]\nDefault: read-only compatibility check. Apply registers the plugin and patches DSH. Stop the original DSH service first; restart it afterwards.');
+  } else {
+    const values = {};
+    let apply = false, stopped = false;
+    for (let i = 0; i < args.length; i++) {
+      const arg = args[i];
+      if (arg === '--apply') apply = true;
+      else if (arg === '--service-stopped') stopped = true;
+      else if (['--dsh-root', '--profile'].includes(arg) && args[i + 1] && !args[i + 1].startsWith('--')) values[arg] = args[++i];
+      else throw new Error(`未知或不完整的参数：${arg}`);
+    }
+    const root = values['--dsh-root'];
+    const profile = values['--profile'];
+    if (!root || !profile || !/^[A-Za-z0-9_-]+$/.test(profile)) throw new Error('请提供 --dsh-root 和有效的 --profile。');
+    if (apply && !stopped) throw new Error('应用前请停止原 DSH 服务，再提供 --apply --service-stopped。该参数由你确认停机，不会自动检测或停止服务。');
+    const plans = planPatches(root, 'check');
+    for (const plan of plans) console.log(`${plan.state}: ${plan.artifact.target}`);
+    if (!apply) {
+      console.log('兼容检查通过，尚未注册插件或应用补丁。停止原服务后，用相同命令加 --apply --service-stopped 完成安装。');
+    } else {
+      const pluginRoot = fileURLToPath(new URL('../', import.meta.url));
+      const registered = spawnSync('dsh', ['plugin', '--profile', profile, 'add', path.resolve(pluginRoot)], { stdio: 'inherit' });
+      if (registered.error || registered.status !== 0) throw new Error('插件注册失败，未应用补丁。请检查上方安装输出。');
+      const count = applyPlan(planPatches(root, 'apply'));
+      if (!planPatches(root, 'check').every(plan => plan.state === 'patched')) throw new Error('补丁复查未通过。插件可能已注册，请检查磁盘状态后再启动服务。');
+      console.log(`插件已注册，${count} 个宿主文件已更新，五项磁盘补丁全部就绪。请启动原 DSH 服务并刷新原网页；当前尚未验证运行中的功能。`);
+    }
+  }
+} catch (error) {
+  console.error(`安装停止：${error.message}`);
+  process.exitCode = 1;
+}

package/src/auto-patch.js

@@ -0,0 +1,45 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import { planPatches, applyPlan, sha256 } from '../scripts/native-patches.mjs';
+
+export function findDshRoot(entry = process.argv[1]) {
+  if (!entry) throw new Error('无法确定 DSH 进程入口。');
+  const require = createRequire(fs.realpathSync(entry));
+  const pkg = require.resolve('@deepseek-ai/dsh-llm-pi-ai/package.json');
+  const resolved = fs.realpathSync(pkg);
+  let dir = path.dirname(resolved);
+  while (true) {
+    const candidate = path.join(dir, 'node_modules/@deepseek-ai/dsh-llm-pi-ai/package.json');
+    if (fs.existsSync(candidate) && fs.realpathSync(candidate) === resolved) {
+      // Full patch planning validates the DSH package/version and every target.
+      planPatches(dir, 'check');
+      return dir;
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  throw new Error('未找到与当前 DSH 进程一致且可安全修改的安装目录。');
+}
+
+export function autoPatch(root, home = process.env.DSH_HOME || path.join(os.homedir(), '.dsh')) {
+  const plans = planPatches(root, 'apply');
+  const pending = plans.some(plan => plan.source !== plan.result);
+  if (!pending) return { state: 'disk-ready', changed: 0, runtimeVerified: false };
+  const storage = path.join(home, 'dsh-model-groups', sha256(fs.realpathSync(root)).slice(0, 16));
+  fs.mkdirSync(storage, { recursive: true, mode: 0o700 });
+  const lock = path.join(storage, 'patch.lock');
+  try { fs.mkdirSync(lock, { mode: 0o700 }); }
+  catch { throw new Error('补丁安装已被锁定；可能有另一进程正在安装。确认没有安装任务后再处理锁目录，勿并发重试。'); }
+  try {
+    const changed = applyPlan(planPatches(root, 'apply'), path.join(storage, 'backups'));
+    if (!planPatches(root, 'check').every(plan => plan.state === 'patched')) throw new Error('自动补丁复查失败。');
+    return { state: changed ? 'restart-required' : 'disk-ready', changed, runtimeVerified: false };
+  } finally {
+    if (path.dirname(lock) !== storage || fs.realpathSync(lock) !== lock || !fs.lstatSync(lock).isDirectory()) throw new Error('补丁锁路径异常。');
+    fs.rmdirSync(lock);
+  }
+}

package/src/client.js

@@ -6,6 +6,22 @@ export function apply(ctx) {
   installModelSelectStyles();
   installModelGroupsStyles();
   const providersForm = ctx.configForms?.get('llm-pi-ai');
+  let statusDisposed = false;
+  let statusNotice;
+  if (typeof fetch === 'function') Promise.resolve().then(() => fetch('/dsh-model-groups/status', { credentials: 'same-origin', cache: 'no-store' }))
+    .then(response => { if (!response.ok) throw new Error('status unavailable'); return response.json(); })
+    .then(status => {
+      if (statusDisposed || (!status.restartRequired && !status.failed)) return;
+      statusNotice = document.createElement('div');
+      statusNotice.dataset.plugin = 'dsh-model-groups';
+      statusNotice.setAttribute('role', 'alertdialog');
+      statusNotice.style.cssText = 'position:fixed;inset:0;z-index:2147483647;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#222);display:grid;place-items:center;padding:24px;box-sizing:border-box;';
+      statusNotice.textContent = status.failed
+        ? '多密钥自动补丁未完成。请回到 App 对话查看引擎日志或运行安装诊断，勿强制覆盖。当前网页暂不可用于编辑模型配置。'
+        : '多密钥补丁已自动安装。请先保存其他页面的草稿，再到 App 重启原引擎并刷新此网页。当前网页暂停操作，避免新旧模块混用。';
+      document.body.appendChild(statusNotice);
+    }).catch(() => {});
+  ctx.on('dispose', () => { statusDisposed = true; statusNotice?.remove(); });
   const onStorage = event => {
     if (event.key === STORAGE_KEY || event.key === null) groupPreferences.sync(event.key === null ? null : event.newValue);
   };

package/src/groups.css

@@ -278,3 +278,23 @@
   .dsh-mg-groupArrow { transition: none; }
 }
 
+
+/* Cascade columns share the viewport rather than covering their ancestors. */
+.dsh-mg-cascade-panel {
+  box-sizing: border-box;
+  min-width: 0;
+}
+.dsh-mg-cascade-panel button,
+.dsh-mg-cascade-panel [role="menu"],
+.dsh-mg-cascade-panel .dsh-mg-modebar,
+.dsh-mg-cascade-panel .dsh-mg-toolbar {
+  min-width: 0;
+}
+.dsh-mg-cascade-panel .dsh-mg-toolbar,
+.dsh-mg-cascade-panel .dsh-mg-modebar,
+.dsh-mg-cascade-panel .dsh-mg-toolbar-actions {
+  flex-wrap: wrap;
+}
+.dsh-mg-cascade-panel .dsh-mg-summary {
+  white-space: normal;
+}

package/src/index.js

@@ -1,4 +1,29 @@
-// Client-only picker. Native multi-key support is installed explicitly via
-// scripts/native-patches.mjs, never by mutating runtime code during apply.
-// This plugin owns no provider credentials or independent grouping settings.
-export function apply() {}
+import { findDshRoot, autoPatch } from './auto-patch.js';
+
+// Explicit patch distribution: installation/loading validates and updates the
+// known DSH disk files. It never forces module reload, restart or config changes.
+export function apply(ctx) {
+  const key = Symbol.for('dsh-model-groups.patch-state');
+  const state = globalThis[key] ??= { restartRequired: false, error: null };
+  ctx.inject(['webserver'], child => {
+    child.effect(() => child.webserver.register({
+      kind: 'exact', path: '/dsh-model-groups/status',
+      handler(req, res) {
+        res.writeHead(200, { 'content-type': 'application/json', 'cache-control': 'no-store' });
+        res.end(JSON.stringify({ restartRequired: state.restartRequired, failed: state.error !== null }));
+      },
+    }));
+  });
+  try {
+    const result = autoPatch(findDshRoot());
+    if (result.state === 'restart-required') {
+      state.restartRequired = true;
+      ctx.logger.warn(`多密钥兼容补丁已自动安装（${result.changed} 项）。请保存草稿，在 App 重启原引擎并刷新原网页；当前进程尚未验证生效。`);
+    } else {
+      ctx.logger.info('多密钥磁盘补丁已就绪。若本次进程尚未在打补丁后重启，请重启原引擎并刷新网页。');
+    }
+  } catch (error) {
+    state.error = error.message;
+    ctx.logger.error(`多密钥自动安装未完成：${error.message}。未强制覆盖未知文件，请运行安装诊断；不要把模型分组出现视为多密钥已就绪。`);
+  }
+}

package/src/model-select.js

@@ -111,6 +111,29 @@ const MEASURE_STYLE = {
 * store/verbs) + the standard locale seat.
 * @returns the trigger and, while open, the two-level menu.
 */
+// Lay out the entire cascade together: positioning a child alone can put it
+// over an ancestor when neither side has room for another full-size card.
+function layoutModelFlyouts(rect, viewportWidth, viewportHeight, count) {
+ const margin = Math.min(12, Math.max(0, viewportWidth / 8));
+ const available = Math.max(1, viewportWidth - margin * 2);
+ const preferredWidth = rect.width > 0 ? rect.width : 280;
+ const width = Math.min(preferredWidth, available / count);
+ const height = Math.min(rect.height > 0 ? rect.height : 360, Math.max(1, viewportHeight - margin * 2));
+ const leftRoom = rect.left - margin;
+ const rightRoom = viewportWidth - margin - (rect.left + preferredWidth);
+ const direction = leftRoom >= width * (count - 1) ? -1
+  : rightRoom >= width * (count - 1) ? 1 : leftRoom >= rightRoom ? -1 : 1;
+ const desiredLeft = direction < 0 ? rect.left - width * (count - 1) : rect.left;
+ const start = Math.max(margin, Math.min(desiredLeft, viewportWidth - margin - width * count));
+ const top = Math.max(margin, Math.min(rect.top, viewportHeight - margin - height));
+ return Array.from({ length: count }, (_, index) => ({
+  left: start + width * (direction < 0 ? count - 1 - index : index),
+  top, width, height,
+  // Override the native menu's intrinsic minimum and maximum at narrow widths.
+  minWidth: 0, maxWidth: width, maxHeight: height,
+ }));
+}
+
 function ModelSelect({ locked, available, directory, load, select, t, renderSlot, providersForm }) {
 	const preferences = react.useSyncExternalStore(groupPreferences.subscribe, groupPreferences.getSnapshot);
 	const configuration = react.useSyncExternalStore(listener => providersForm?.subscribe(listener) ?? (() => {}), () => providersForm?.getSnapshot() ?? EMPTY_PROVIDERS_SNAPSHOT);
@@ -149,75 +172,18 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 		}
 	};
 
-	// 完全读取并匹配官方原版主卡片尺寸（宽、高严格保持与主卡片完全一致）
 	const triggerFlyout = (entry, anchorEl) => {
 		clearFlyoutTimer();
 		if (activeFlyout?.key === entry.key) return;
 		setActiveSubFlyout(null);
-		const menuEl = menuRef.current;
-		const menuRect = menuEl ? menuEl.getBoundingClientRect() : anchorEl.getBoundingClientRect();
-		const margin = 12;
-		const winW = window.innerWidth;
-		const winH = window.innerHeight;
-		// 直接读取官方主卡片的实际渲染宽度与高度
-		const panelW = menuRect.width > 0 ? menuRect.width : 280;
-		const panelH = menuRect.height > 0 ? menuRect.height : 360;
-
-		// 紧靠主卡片左侧，0px 缝隙严丝合缝
-		let left = menuRect.left - panelW;
-		if (left < margin) {
-			if (winW - menuRect.right >= panelW + margin) {
-				left = menuRect.right;
-			} else {
-				left = Math.max(margin, Math.min(menuRect.left, winW - panelW - margin));
-			}
-		}
-
-		// 顶部与官方主卡片绝对平齐，高度与官方主卡片 1:1 等高
-		let top = menuRect.top;
-		setActiveFlyout({
-			key: entry.key,
-			entry,
-			pos: {
-				left: Math.round(left),
-				top: Math.round(top),
-				width: Math.round(panelW),
-				height: Math.round(panelH)
-			}
-		});
+		const rect = activeFlyout?.anchorRect ?? (menuRef.current ?? anchorEl).getBoundingClientRect();
+		setActiveFlyout({ key: entry.key, entry, anchorRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height } });
 	};
 
-	const triggerSubFlyout = (childGroup, anchorEl) => {
+	const triggerSubFlyout = (childGroup) => {
 		clearFlyoutTimer();
 		if (activeSubFlyout?.key === childGroup.key) return;
-		const flyoutEl = flyoutRef.current;
-		const flyoutRect = flyoutEl ? flyoutEl.getBoundingClientRect() : anchorEl.getBoundingClientRect();
-		const margin = 12;
-		const winW = window.innerWidth;
-		const winH = window.innerHeight;
-		const panelW = flyoutRect.width > 0 ? flyoutRect.width : 280;
-		const panelH = flyoutRect.height > 0 ? flyoutRect.height : 360;
-
-		let left = flyoutRect.left - panelW;
-		if (left < margin) {
-			if (winW - flyoutRect.right >= panelW + margin) {
-				left = flyoutRect.right;
-			} else {
-				left = Math.max(margin, Math.min(flyoutRect.left, winW - panelW - margin));
-			}
-		}
-
-		let top = flyoutRect.top;
-		setActiveSubFlyout({
-			key: childGroup.key,
-			childGroup,
-			pos: {
-				left: Math.round(left),
-				top: Math.round(top),
-				width: Math.round(panelW),
-				height: Math.round(panelH)
-			}
-		});
+		setActiveSubFlyout({ key: childGroup.key, childGroup });
 	};
 
 	const scheduleCloseFlyout = (delay = 240) => {
@@ -229,11 +195,14 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 	};
 
 	const scheduleCloseSubFlyout = (delay = 240) => {
-		if (subFlyoutTimerRef.current !== null) clearTimeout(subFlyoutTimerRef.current);
+		// Leaving the key panel must not let an older parent-leave timer
+		// destroy both the provider and key panels.
+		clearFlyoutTimer();
 		subFlyoutTimerRef.current = setTimeout(() => {
 			setActiveSubFlyout(null);
 		}, delay);
 	};
+	(0, react.useEffect)(() => () => clearFlyoutTimer(), []);
 	const [toast, setToast] = (0, react.useState)(null);
 	const toastSeq = (0, react.useRef)(0);
 	const rootRef = (0, react.useRef)(null);
@@ -407,6 +376,9 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 		state,
 		query
 	]);
+	const cascade = open && pane === "model" && menuMode === "panel" && !searching && activeFlyout
+		? layoutModelFlyouts({ ...activeFlyout.anchorRect, ...(menuPos ?? {}) }, window.innerWidth, window.innerHeight, activeSubFlyout ? 3 : 2)
+		: null;
 	if (!available) return null;
 	const show = () => {
 		setSelectionFocus(false);
@@ -670,7 +642,7 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 						title: searching ? text('搜索时自动展开，清空搜索后恢复', 'Expanded during search; clearing restores your groups') : entry.id || entry.name,
 						onClick: (e) => {
 							if (isFlyoutMode) {
-								if (isFlyoutActive) setActiveFlyout(null);
+								if (isFlyoutActive) { clearFlyoutTimer(); setActiveFlyout(null); setActiveSubFlyout(null); }
 								else triggerFlyout(entry, e.currentTarget);
 							} else {
 								setHighlightedIndex(null);
@@ -753,8 +725,9 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 			open && (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 				ref: menuRef,
 				id: `${id}-menu`,
-				className: ModelSelect_module_css_default.menu,
-				style: menuPos ?? MEASURE_STYLE,
+				className: clsx(ModelSelect_module_css_default.menu, cascade && "dsh-mg-cascade-panel"),
+				"data-flyout-level": cascade ? "0" : undefined,
+				style: cascade?.[0] ?? menuPos ?? MEASURE_STYLE,
 				role: pane === "model" ? "group" : "menu",
 				"aria-label": t("menu.aria"),
 				"aria-busy": state.status === "loading" || busy,
@@ -943,18 +916,12 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 					}, level.key))] })
 				]
 			}), document.body),
-			open && pane === "model" && menuMode === "panel" && activeFlyout !== null && (0, react_dom.createPortal)(
+			cascade !== null && activeFlyout !== null && (0, react_dom.createPortal)(
 				react_jsx_runtime.jsx(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 					ref: flyoutRef,
-					className: ModelSelect_module_css_default.menu,
-					style: {
-						left: activeFlyout.pos.left,
-						top: activeFlyout.pos.top,
-						width: activeFlyout.pos.width,
-						height: activeFlyout.pos.height,
-						position: "fixed",
-						margin: 0
-					},
+					className: clsx(ModelSelect_module_css_default.menu, "dsh-mg-cascade-panel"),
+					"data-flyout-level": "1",
+					style: { ...cascade[1], position: "fixed", margin: 0 },
 					onMouseEnter: clearFlyoutTimer,
 					onMouseLeave: () => scheduleCloseFlyout(200),
 					onMouseDown: (e) => {
@@ -993,18 +960,12 @@ function ModelSelect({ locked, available, directory, load, select, t, renderSlot
 				}),
 				document.body
 			),
-			open && pane === "model" && menuMode === "panel" && activeSubFlyout !== null && (0, react_dom.createPortal)(
+			cascade !== null && activeSubFlyout !== null && (0, react_dom.createPortal)(
 				react_jsx_runtime.jsx(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 					ref: subFlyoutRef,
-					className: ModelSelect_module_css_default.menu,
-					style: {
-						left: activeSubFlyout.pos.left,
-						top: activeSubFlyout.pos.top,
-						width: activeSubFlyout.pos.width,
-						height: activeSubFlyout.pos.height,
-						position: "fixed",
-						margin: 0
-					},
+					className: clsx(ModelSelect_module_css_default.menu, "dsh-mg-cascade-panel"),
+					"data-flyout-level": "2",
+					style: { ...cascade[2], position: "fixed", margin: 0 },
 					onMouseEnter: clearFlyoutTimer,
 					onMouseLeave: () => scheduleCloseSubFlyout(200),
 					onMouseDown: (e) => {