dsh-model-groups 0.3.2 → 0.3.4

package/README.md

@@ -1,127 +1,126 @@
-# dsh-model-groups 0.3.2（0.2.2-rc.1 移植版）
+# DSH Model Groups
 
-在 DSH 原生「自定义模型 API」卡片内管理**同一个供应商的多个密钥配置**，并把会话模型菜单显示为「供应商 → 密钥配置 → 模型」。这不是密钥轮换器，也不是另建一页大、小分组配置。
+为 DeepSeek Harness 网页端提供分层模型菜单与多密钥管理。同一供应商共用 Provider ID、API 地址和协议，各配置分别设置名称、密钥与模型列表。
 
-## 使用方式
+## 功能
 
-1. 打开 **设置 → 模型**，新增或编辑原生的**自定义模型 API**。
-2. Provider ID、API 地址、协议只填写一次，所有密钥配置共享这些设置。
-3. 打开卡片内的 **多密钥配置** 开关，按需点击 **添加密钥配置**。每个配置分别填写配置名称、API 密钥、模型列表，然后应用。
-4. 在会话模型菜单中展开供应商，再展开需要的密钥配置，选择模型。
+- 按“供应商 → 密钥配置 → 模型”浏览和选择。
+- 支持原地折叠、侧边面板、名称搜索、全部展开与收起。
+- 记住各级折叠状态；搜索时临时展开匹配项。
+- 不同密钥配置可使用相同模型 ID，选择时使用对应配置的密钥。
+- 手动选择配置，不自动轮换密钥或切换到其他配置。
 
-```text
-示例供应商 A（同一个 Provider ID / API 地址）
-  配置 A（独立密钥）
-    示例模型
-  配置 B（另一份密钥）
-    示例模型
-示例供应商 B
-  示例模型
-```
+## 环境要求
 
-- **未开启多密钥配置的供应商保留原来的折叠方式**，不会平铺全部模型。
-- 供应商和密钥配置独立折叠；收起父级不清除子级折叠状态。
-- 配置数量按需增删，不设置固定的数量上限。名称去除首尾空格，长度为 1–120 个字符；保存时每个配置至少包含一个模型。
-- 相同模型 ID 可以同时出现在不同配置中；选择保留精确配置身份，不因同名而合并。
-- 只使用手动选中的配置。密钥缺失、配置移除或多密钥配置关闭时，旧配置选择会失败或从菜单移除，**不会改用其他密钥、轮换或自动故障切换**。
-- 保存前可用输入的 API 密钥获取模型；已保存的配置按其精确标识在宿主查询。不会默默改用供应商原来的密钥。
-- API 密钥使用原生的只写输入与凭据服务，不会回显已保存的明文。留空保留原凭据；替换共享引用的密钥需要明确确认。
+- DeepSeek Harness **0.2.2-rc.1**。
+- Node.js **22 或以上**。
+- Harness 网页界面；在 dsh-go 中使用时，功能出现在对应网页，不影响 App 原生模型菜单。
+- DSH 安装目录可写，且目标程序文件符合支持的版本与哈希。
 
-### 界面与关闭保护
+**本插件包含宿主兼容补丁。** 插件加载时会检查并备份原文件，自动应用五项补丁；不修改现有供应商、密钥或会话配置。版本或文件内容不受支持时会停止应用，不强制覆盖。
 
-- 「多密钥配置」使用原版开关组件与表单字体；标题与开关左右对齐。
-- 配置名称位于卡片内部的标题栏，移除按钮在标题栏右侧；不再使用挂在边框上的图例标题。长名称与凭据引用允许换行。
-- 支持多密钥的已有自定义供应商先显示「公共设置」，再显示密钥配置；其他供应商保持原有表单顺序与折叠状态。
-- 点击关闭不会立即停用，先显示原生确认弹窗。取消、关闭按钮、Escape 或遮罩关闭只取消确认，不会改变开关或丢弃输入；确认后仍须点击「应用」才改变运行配置。
-- **有尚未保存的 API 密钥输入时禁止确认关闭**，只提供「返回密钥配置」。输入仅为空格也触发保护；凭据保存失败留下的输入同样受保护。先保存成功，或明确清空不需要的输入，再关闭。
+## 安装
 
-## 兼容与数据保全
+在目标设备的 DSH 环境中执行：
 
-开启已有供应商的多密钥配置时，首个配置从原单密钥配置复制**密钥引用和模型配置**，不读取密钥值。原单密钥配置仍保留，用于关闭多密钥配置及已有旧会话。
+```bash
+dsh plugin --profile web add dsh-model-groups@0.3.4 --registry=https://registry.npmjs.org/
+```
 
-旧会话中未带配置标识的模型继续使用原来的密钥，不会按同名模型猜测新配置。会话当前仍选用旧模型时，菜单会显示「原单密钥（兼容旧会话）」子项供辨认；其他旧模型不会混入多密钥配置的可选项。切换到新配置需要主动选择。
+安装包：[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。
 
-关闭并应用会保留所有已保存的密钥配置与凭据，并恢复原单密钥模式；重新开启并应用后可再次使用这些配置。正在使用密钥配置的会话需要重新开启，或手动选择单密钥模型，不会自动换用其他密钥。移除配置也不删除已存储的凭据；需要清理时请单独使用原生凭据管理。
+插件加载并提示“补丁已自动安装”后，保存草稿，**重启原 DSH 引擎并刷新网页**。无需先停止引擎，也不需要外部终端手工打补丁。
 
-**不会自动合并以前分别建立的供应商。** 特别是 API 地址不同的渠道不能直接合并；迁移须由使用者确认共享地址、密钥和模型归属后手动完成。此次实现不改既有真实密钥、接口地址或模型列表。
+如果安装后插件尚未加载，先启动或重启引擎；若此次启动才应用补丁，再重启一次以载入新模块。补丁已在磁盘就绪时，后续加载不会重复写入。
 
-上一版独立的「模型分组」页脚与 `providerGroups` 显示配置已撤回；本版直接使用原生 `llm-pi-ai.providers` 下的 `multiKey`、`keyEntries`。折叠状态继续使用本机 `localStorage` 的 `dsh:model-groups:v1`；原 Provider ID 的记录仍然有效，密钥配置子项使用独立键。
+当前正式版为 `0.3.4`，包含已验证的自动补丁安装与侧边面板修复。
 
-## 搜索与键盘
+### 交给 AI 安装
 
-- 搜索支持供应商、密钥配置及模型名称；搜索时临时展开匹配路径，清空后恢复原有折叠状态。
-- 全部展开 / 全部收起同时作用于供应商和密钥配置。
-- `↑` / `↓` 在工具条、标题和可见模型间移动；标题上的 `←` / `→` 收起 / 展开，`Enter` / 空格切换。
-- 搜索框内 `↑` / `↓` 移动高亮，`Enter` / `Tab` 选择；`Esc` 返回上一层或关闭菜单。
-- 保留官方模型目录、推理等级、加载重试、标签插槽、锁定和错误提示。渲染异常时使用同样校验配置有效性的简化菜单。
+```text
+请按 https://github.com/betsunninda9-lgtm/dsh-model-groups 的安装说明，
+使用 npm 正式版安装到当前 DSH profile。
+我允许插件自动校验、备份并应用宿主补丁；保留现有配置。
+检查加载日志，成功后提醒我重启原引擎并刷新网页；遇到不兼容就停止报告。
+```
 
-## 安装与生效边界
+## 使用
 
-本版包括客户端插件与**原生兼容补丁**。仅安装插件不能使宿主识别同 Provider 的多个密钥；纯前端分组不能保证实际请求用对密钥。
+1. 打开 **设置 → 模型**，新增或编辑自定义模型 API。
+2. 填写供应商公共的 Provider ID、API 地址和协议。
+3. 开启 **多密钥配置**，为每份配置填写名称、密钥和模型列表，点击“应用”。
+4. 在会话模型菜单中展开供应商和配置，选择需要的模型。
 
-原生补丁仅适配 **DSH 0.2.2-rc.1**，同时校验包名、版本和目标文件 SHA-256。它扩展原生 pi-ai 适配器、模型设置卡片，以及宿主 / 客户端 / 浏览器内嵌的模型发现编解码。补丁不复制凭据库，不创建重复的 Provider，不启动第二个服务。
+```text
+示例供应商 A
+  配置 A
+    示例模型
+  配置 B
+    示例模型
+示例供应商 B
+  示例模型
+```
 
-本插件用于 Harness Web 界面；在 dsh-go 中请打开对应的 Harness 网页界面使用。它不向 Flutter 原生模型选择器注入界面。
+已有单密钥配置与旧会话选择会保留。开启多密钥后，可在模型菜单手动选择新配置；插件不会自动合并已有供应商或迁移会话选择。
 
-从 npm 获取可检查的插件目录（发布后可用）：
+关闭多密钥配置会保留已保存的配置与凭据，删除配置也不会同时删除凭据。有尚未保存的密钥输入时，需要先保存或清空，才能确认关闭。
 
-```bash
-npm pack dsh-model-groups@0.3.2 --registry=https://registry.npmjs.org
-mkdir dsh-model-groups
-tar -xzf dsh-model-groups-0.3.2.tgz -C dsh-model-groups --strip-components=1
-cd dsh-model-groups
-```
+窄屏侧边面板会根据可用空间调整各级宽度；三级并列时，较长名称可能截断。
 
-请保留该目录，安装会引用它。安装过程不会自动执行宿主补丁。
+## 更新
 
-```bash
-# 在插件目录操作；路径必须是实际安装的 DSH 根目录
-node scripts/native-patches.mjs --dsh-root /实际安装的DSH根目录 --check
+使用对应发布版本的安装命令更新，随后按加载日志提示重启引擎并刷新网页。兼容补丁已经存在且未变化时，不会重复应用。
+
+DSH 升级前请确认插件兼容范围。新版本或未知文件会被拒绝，需要等待对应适配，不能强制套用旧补丁。
+
+DSHMarket 的收录需经过社区审核。普通插件的市场更新跟随 npm `latest`，不会自动跟随 GitHub 发布包或 npm `beta` 标签。
 
-# 空闲时先停止原 DSH 服务，再应用补丁
-node scripts/native-patches.mjs --dsh-root /实际安装的DSH根目录 --apply
+## 安装诊断
 
-# 安装客户端插件（已安装者无需重复添加）
-dsh plugin --profile web add /绝对路径/dsh-model-groups
+没有出现“多密钥配置”开关时，先确认原引擎已在自动补丁后重启，并刷新原网页。仍未恢复，可在已安装插件目录执行：
+
+```bash
+node scripts/doctor.mjs --dsh-root /opt/dsh --json
 ```
 
-检查模式只读；应用前先验证所有目标，拒绝未知版本或被其它修改覆盖的文件。原文件会备份，全部内容写入同目录临时文件成功后再逐个原子替换；后续失败会尽量回滚已替换文件，不覆盖并发的外部修改。重复应用为无操作。补丁脚本不会重启或热重载运行中的进程。
+`/opt/dsh` 请替换为实际 DSH 安装目录。五项文件应为 `patched`。该命令只读检查程序文件，不读取密钥；磁盘状态正常不代表运行中的模块已刷新。
+
+自动安装日志位于原引擎日志中。遇到文件不受支持、目录布局不兼容或权限不足时，请提供程序包版本与文件 SHA-256，勿提供密钥。
 
-**首次应用宿主补丁后须重新启动原 DSH 服务，再刷新原有页面。** 只刷新页面、只重编客户端或反复开关插件，不能保证已加载的宿主模块和缓存的客户端元数据更新。不要另起服务器替代正在使用的 GUI。新开关也会检查宿主 schema：旧宿主尚未重新加载时保持原来的单密钥界面，不暴露无法保存的新配置。
+原文件备份保存在 `DSH_HOME/dsh-model-groups/<安装目录指纹>/backups`，不会随插件包更新丢失。安装意外中断可能留下 `patch.lock`；确认没有安装进程后再处理，不要并发重试。
 
-后续只改模型设置客户端界面时，不代表必须重启宿主；但需核对原服务提供的实际客户端文件已更新，再刷新原页面。不要把磁盘生成成功或组件测试通过当成真实页面已经生效。刷新前先保存正在编辑的内容，避免丢失草稿。
+## 卸载与还原
 
-DSH 升级可能覆盖这些原生文件；不要强行把此版本补丁用于新版本，应先重新适配并验证。
+移除插件不会自动还原宿主补丁或删除凭据。完整还原前，请先：
 
-### 卸载 / 回退
+1. 将相关会话和子代理切换回普通单密钥模型。
+2. 关闭多密钥配置，备份配置并清理原版 DSH 不支持的 `multiKey`、`keyEntries` 字段，保留仍需使用的凭据。
+3. 在独立维护目录保留插件包，确保卸载后仍能运行还原脚本。
 
-先在相关会话中切换回原单密钥模型，并关闭各供应商的多密钥配置；使用者需确认所有保存的会话 / 子代理配置都不再选择 `@dsh-key/` 内部标识。随后空闲时停止原服务，再执行：
+先停用或移除插件，避免其再次加载时重新应用补丁：
 
 ```bash
-node scripts/native-patches.mjs --dsh-root /实际安装的DSH根目录 --revert
 dsh plugin --profile web remove dsh-model-groups
 ```
 
-恢复原单密钥配置后，应在回退原生 schema 前移除不再受支持的 `multiKey`、`keyEntries` 字段（先备份配置，不删除原来的密钥与模型）。回退脚本仅恢复原生代码，不扫描或修改真实会话 / 配置 / 凭据，也不会自动证明回退前提已满足。仍选择内部配置标识的旧会话在原生补丁移除后无法发送请求。
+随后安排维护窗口，停止原服务，在保留的插件目录执行：
+
+```bash
+node scripts/native-patches.mjs --dsh-root /opt/dsh --revert
+```
 
-## 实现与验证
+完成后启动原服务并刷新网页。还原脚本按校验过的文件版本恢复代码，不修改会话或凭据。仍引用 `@dsh-key/` 模型的会话在还原后无法继续使用该选择。
 
-内部模型标识为 `@dsh-key/<配置ID>/<编码后的上游模型ID>`，只用于保存选择身份；Provider ID 不变。适配器在请求边界解析它，使用独立配置的模型元数据和凭据引用，上游收到的仍是原始模型 ID。已准备请求保留当时的配置快照；跨密钥的签名历史不会直接复用到另一密钥。
+## 开发
 
 ```bash
 npm run build
 npm test
-npm run test:ui
 npm run check:build
-npm run native:check -- --dsh-root /实际安装的DSH根目录
 ```
 
-- [层级逻辑](src/hierarchy.js)、[会话选择器](src/model-select.js)、[回退菜单](src/fallback.js)和[样式](src/groups.css)由[构建脚本](scripts/build.mjs)生成客户端产物。
-- [原生补丁管理器](scripts/native-patches.mjs)提供版本 / 哈希检查、应用与还原；[补丁目录](native/)存放可重放变更。
-- 仓库内的测试覆盖层级、折叠状态、样式生命周期、客户端注册与[选择器交互](test/picker-ui.test.mjs)，不读取真实凭据。
-- 公开仓库不包含本机的宿主备份、配置、会话或依赖手机目录的历史测试。适配器与原生设置页的完整集成验收需要单独准备对应版本的 DSH 环境。
-- [补丁安装器回归](test/native-patches.test.mjs)在临时目录实际应用 / 回退，并模拟写入失败、原子替换失败和并发修改；不重装或重启真实服务。
+设置 `DSH_ROOT` 可启用依赖对应 DSH 程序文件的回归测试。源码包含层级、选择器交互、面板布局及补丁安装与恢复测试。
 
-这些自动化检查不等于真实浏览器端到端验收。手机窄屏布局、中文输入法、原生菜单 portal 和刷新后的实际卡片，仍须在原页面检查。未获得重启授权时，不会为了验收中断当前会话。
+## 许可证
 
-客户端选择器改编自 DSH 的 MIT 代码，见 [LICENSE](LICENSE)。
+[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,7 +1,7 @@
 {
   "name": "dsh-model-groups",
-  "version": "0.3.2",
-  "description": "同一供应商的多密钥配置与供应商→密钥配置→模型折叠选择，手动精确路由（0.2.2-rc.1 移植版）。",
+  "version": "0.3.4",
+  "description": "DSH 网页模型选择器：供应商与密钥配置分层折叠、多密钥手动选择。支持 DSH 0.2.2-rc.1。",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -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) => {