dsh-model-groups 0.3.3 → 0.3.5

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;
@@ -1297,6 +1258,247 @@ function installModelGroupsStyles() {
   document.head.appendChild(style);
 }
 
+
+const SETTINGS_PAGE_CSS = ".mg-maintenance{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;max-width:720px;min-width:0;color:var(--dsw-alias-label-primary);font-family:inherit;font-size:13px;line-height:1.5}\n.mg-maintenance h2{margin:0;font-size:18px;font-weight:600;line-height:26px}\n.mg-maintenance h3{margin:0;font-size:14px;font-weight:600;line-height:22px}\n.mg-maintenance p{margin:0;color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:20px}\n.mg-maintenance-card{display:flex;flex-direction:column;gap:12px;min-width:0;border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-xl,12px);background:var(--dsw-alias-settings-card-fill);padding:16px}\n.mg-maintenance-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}\n.mg-maintenance ul{padding-left:20px;margin:0;color:var(--dsw-alias-label-secondary);overflow-wrap:anywhere}\n.mg-maintenance-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}\n.mg-maintenance button{align-self:flex-start;font:inherit;font-weight:500;line-height:20px;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-fill-tsp-secondary);border:.5px solid var(--dsw-alias-settings-card-stroke);border-radius:var(--dsw-radius-sm,6px);padding:8px 14px;min-height:40px;cursor:pointer;white-space:normal}\n.mg-maintenance .mg-maintenance-primary:not(:disabled){border-color:var(--dsw-alias-state-business-primary);font-weight:600}\n.mg-maintenance .mg-maintenance-secondary{font-size:12px}\n@media(hover:hover){.mg-maintenance button:not(:disabled):hover{background:var(--dsw-alias-interactive-bg-hover)}}\n.mg-maintenance button:disabled{color:var(--dsw-alias-label-tertiary);background:var(--dsw-alias-fill-tsp-secondary);cursor:not-allowed;opacity:1}\n.mg-maintenance .mg-maintenance-danger:not(:disabled),.mg-maintenance .mg-maintenance-error{color:var(--dsw-alias-state-error-primary)}\n.mg-maintenance .mg-maintenance-help{color:var(--dsw-alias-label-secondary)}\n.mg-maintenance-dialog{display:flex;flex-direction:column;gap:12px;border:1px solid var(--dsw-alias-state-business-primary);border-radius:var(--dsw-radius-sm,6px);padding:16px}\n.mg-maintenance-warning{padding:10px;border-left:3px solid var(--dsw-alias-state-business-primary)}\n.mg-maintenance summary{cursor:pointer;font-weight:500;min-height:28px}\n.mg-maintenance details[open]>*+*{margin-top:12px}\n.mg-maintenance :focus-visible{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:3px}\n@media(max-width:480px){.mg-maintenance-card,.mg-maintenance-dialog{padding:12px}.mg-maintenance button{max-width:100%}}\n";
+function installSettingsPageStyles() {
+  const tagId = "dsh-model-groups/settings-page.css";
+  if (document.querySelector('style[data-plugin-css="' + tagId + '"]') !== null) return;
+  const style = document.createElement('style');
+  style.dataset.plugin = 'dsh-model-groups';
+  style.dataset.pluginCss = tagId;
+  style.textContent = SETTINGS_PAGE_CSS;
+  document.head.appendChild(style);
+}
+
+const MAINTENANCE_CONFIRMATION = 'CONFIRM PATCH OPERATION';
+const MAINTENANCE_ENDPOINT = '/dsh-model-groups/maintenance';
+const MAINTENANCE_KEYS = ['dsh:model-groups:v1', 'dsh:model-groups:mode'];
+const ACTION_CAPABILITIES = { apply: 'canApply', 'restore-only': 'canRestoreOnly', 'restore-and-uninstall': 'canRestore' };
+
+// Never project arbitrary server messages, patch paths, or tokens into the DOM.
+function maintenanceSnapshot(value) {
+  const phases = ['idle', 'applied', 'restored', 'removing', 'removed', 'failed'];
+  if (!value || !phases.includes(value.phase) || typeof value.restartRequired !== 'boolean'
+    || !Object.values(ACTION_CAPABILITIES).every(key => typeof value[key] === 'boolean')
+    || !(value.token == null || (typeof value.token === 'string' && value.token.length > 0))
+    || (Object.values(ACTION_CAPABILITIES).some(key => value[key]) && !(typeof value.token === 'string' && value.token.length > 0))
+    || !Array.isArray(value.patches) || !Array.isArray(value.blockers)
+    || !(value.warnings == null || (Array.isArray(value.warnings) && value.warnings.every(warning => warning && typeof warning.code === 'string'
+      && (warning.count == null || (Number.isSafeInteger(warning.count) && warning.count > 0)))))
+    || !value.patches.every(patch => patch && ['patched', 'pristine', 'conflict'].includes(patch.state)
+      && (patch.updateAvailable == null || typeof patch.updateAvailable === 'boolean'))
+    || !value.blockers.every(blocker => blocker && typeof blocker.code === 'string' && typeof blocker.message === 'string'
+      && (blocker.count == null || (Number.isSafeInteger(blocker.count) && blocker.count > 0)))) {
+    throw new Error('Invalid maintenance snapshot');
+  }
+  return { phase: value.phase, restartRequired: value.restartRequired, canApply: value.canApply,
+    canRestoreOnly: value.canRestoreOnly, canRestore: value.canRestore,
+    token: value.token ?? null, patches: value.patches.map(patch => ({ state: patch.state, updateAvailable: patch.updateAvailable === true })),
+    blockers: value.blockers.map(blocker => ({ code: blocker.code, count: blocker.count ?? null })),
+    warnings: (value.warnings ?? []).map(warning => ({ code: warning.code, count: warning.count ?? null })) };
+}
+function maintenanceCanAction(snapshot, action) {
+  const capability = Object.hasOwn(ACTION_CAPABILITIES, action) ? ACTION_CAPABILITIES[action] : null;
+  return !!capability && !!snapshot && ['idle', 'applied', 'restored', 'failed'].includes(snapshot.phase) && snapshot[capability]
+    && typeof snapshot.token === 'string' && snapshot.token.length > 0
+    && !snapshot.patches.some(patch => patch.state === 'conflict');
+}
+function maintenanceCanRestore(snapshot) { return maintenanceCanAction(snapshot, 'restore-and-uninstall'); }
+function maintenanceBlockerText(blocker) {
+  const labels = {
+    active_sessions: '存在正在运行的会话，请先停止运行中的任务。',
+    active_turns: '存在正在运行的回合，请先等待结束或停止。',
+    patch_conflict: '补丁状态冲突，请先人工诊断，不会强制覆盖。',
+    backup_missing: '缺少可验证的原版备份，无法安全恢复。',
+    restart_required: '需要重启原引擎后重新检查。',
+    inspection_failed: '状态检查失败，请使用安装诊断排查。',
+    config_inspection_failed: '配置检查失败，无法验证模型与密钥依赖；请使用安装诊断排查。',
+    session_inspection_failed: '会话检查失败，无法验证活动回合与模型引用；请使用安装诊断排查。',
+    session_service_missing: '缺少会话查询或持久化服务，无法验证历史会话的模型依赖；请使用安装诊断排查。',
+    process_inspection_failed: '进程检查失败，无法排除其他引擎使用补丁；请使用安装诊断排查。',
+    profile_inspection_failed: '配置档检查失败，无法排除跨配置档依赖；请使用安装诊断排查。',
+    patch_inspection_failed: '补丁文件检查失败，无法验证磁盘状态；不会修改未知文件。',
+    not_removable: '当前插件状态不允许安全卸载。',
+    not_applicable: '当前状态不允许安全应用补丁。',
+    manager_unavailable: '插件管理服务不可用，请稍后重试。',
+    host_unknown: '无法验证宿主版本，不会修改未知文件。',
+    state_changed: '状态已发生变化，请刷新检查后重新打开操作并确认。',
+    apply_failed: '补丁应用未完成，请刷新检查，不要视为成功。',
+    restore_failed: '原版恢复未完成，请刷新检查，不要视为成功。',
+    remove_failed: '卸载未完成，请刷新检查并使用安装诊断排查。',
+    remove_unverified: '无法验证卸载结果，请刷新检查，不要视为成功。',
+    verify_failed: '安全验证失败，不会强制覆盖文件。',
+    busy: '维护或其他任务正在运行，请结束后刷新。',
+    confirmation_required: '安全确认已失效，请刷新检查后重新打开操作并确认。',
+    maintenance_failed: '维护失败，请刷新检查并使用安装诊断排查。',
+    inspection_unknown: '无法确认运行状态，请先停止任务并使用安装诊断排查。',
+    profile_unknown: '无法确认当前配置档，不会执行维护。',
+    cross_profile_bundle: '其他配置档也在使用此插件，请先处理跨配置档依赖。',
+    alias_dependency: '仍有会话或配置引用多密钥模型，请先切换为普通模型再检查；本预览不会自动转换。',
+    key_config_dependency: '仍有多密钥配置依赖：请先禁用 multiKey 并清理 keyEntries 配置；已保存的密钥会保留。本预览不会自动转换。',
+    expression_unknown: '存在无法安全判断的配置表达式，请先人工检查配置。',
+    other_process: '其他引擎进程可能正在使用补丁，请先停止相关进程。',
+  };
+  return (labels[blocker.code.toLowerCase()] || '安全检查未通过，请先处理运行中的任务或使用安装诊断排查。')
+    + (blocker.count ? `（${blocker.count} 项）` : '');
+}
+
+// Copy only allowlisted codes and enumerated state: unknown codes may contain secrets or paths.
+function maintenanceDiagnostic(state) {
+  const snapshot = state.snapshot;
+  const knownCodes = new Set(['active_sessions', 'active_turns', 'patch_conflict', 'backup_missing', 'restart_required',
+    'inspection_failed', 'config_inspection_failed', 'session_inspection_failed', 'session_service_missing',
+    'process_inspection_failed', 'profile_inspection_failed', 'patch_inspection_failed', 'default_inspection_failed',
+    'agent_inspection_failed', 'activity_unverified', 'not_removable', 'not_applicable', 'manager_unavailable',
+    'host_unknown', 'state_changed', 'apply_failed', 'restore_failed', 'remove_failed', 'remove_unverified',
+    'verify_failed', 'busy', 'confirmation_required', 'maintenance_failed', 'inspection_unknown', 'profile_unknown',
+    'cross_profile_bundle', 'alias_dependency', 'key_config_dependency', 'expression_unknown', 'other_process']);
+  const diagnosticItem = item => {
+    const code = item.code.toLowerCase();
+    return { code: knownCodes.has(code) ? code : 'unknown', count: item.count };
+  };
+  return JSON.stringify({
+    status: snapshot?.phase ?? 'unknown', busy: !!state.busy, resultUnverified: !!state.error,
+    restartRequired: snapshot?.restartRequired ?? null,
+    capabilities: snapshot ? { apply: snapshot.canApply, close: snapshot.canRestoreOnly, uninstall: snapshot.canRestore } : null,
+    patches: snapshot?.patches.map(patch => patch.state) ?? [],
+    blockers: snapshot?.blockers.map(diagnosticItem) ?? [],
+    warnings: snapshot?.warnings.map(diagnosticItem) ?? [],
+  }, null, 2);
+}
+function maintenanceWarningText(warning) {
+  const labels = {
+    alias_dependency: '旧多密钥模型选择可能影响后续使用或重启；本页不会自动切换服务或模型。',
+    key_config_dependency: '旧多密钥配置可能影响后续使用或重启；关闭会保留密钥和历史，不自动转换配置。',
+    expression_unknown: '部分配置表达式无法完整检查，请留意关闭后的使用和重启情况。',
+  };
+  const code = warning.code.toLowerCase();
+  const inspection = ['config_inspection_failed', 'session_inspection_failed', 'session_service_missing', 'process_inspection_failed', 'profile_inspection_failed', 'inspection_unknown', 'default_inspection_failed', 'agent_inspection_failed', 'activity_unverified'];
+  return (labels[code] || (inspection.includes(code) ? '检查不完整，无法确认全部依赖；这只是提醒，不会额外禁用操作。' : '部分使用情况未能验证，不等于安全；这只是提醒，不会额外禁用操作。'))
+    + (warning.count ? `（${warning.count} 项）` : '');
+}
+
+function createMaintenanceController({ request = (...args) => fetch(...args), storage = () => globalThis.localStorage } = {}) {
+  let state = { snapshot: null, busy: false, error: '', cleanupWarning: false, patchedWarning: false };
+  let disposed = false;
+  let generation = 0;
+  const listeners = new Set();
+  const update = next => { if (disposed) return; state = { ...state, ...next }; for (const listener of listeners) listener(); };
+  async function readSnapshot(options) {
+    const response = await request(MAINTENANCE_ENDPOINT, { credentials: 'same-origin', cache: 'no-store', ...options });
+    if (!response.ok) throw new Error('Maintenance HTTP error');
+    const envelope = await response.json();
+    if (envelope?.ok !== true) throw new Error('Maintenance refused');
+    return maintenanceSnapshot(envelope.value);
+  }
+  function accept(snapshot) {
+    let cleanupWarning = false;
+    if (snapshot.phase === 'removed') {
+      for (const key of MAINTENANCE_KEYS) {
+        try { storage()?.removeItem(key); } catch { cleanupWarning = true; }
+      }
+    }
+    update({ snapshot, cleanupWarning, patchedWarning: snapshot.patches.some(patch => patch.state === 'patched'),
+      error: snapshot.phase === 'failed' ? '维护操作失败，未确认完成。请刷新检查，不要强制覆盖。' : '' });
+  }
+  async function run(action = null) {
+    if (disposed || state.busy || (action && !maintenanceCanAction(state.snapshot, action))) return;
+    const sequence = ++generation;
+    const token = state.snapshot?.token;
+    const current = () => !disposed && sequence === generation;
+    update({ busy: true, error: '' });
+    try {
+      // Recheck immediately before using the confirmed token; a changed state needs new consent.
+      let snapshot = await readSnapshot({ method: 'GET' });
+      if (!current()) return;
+      if (action) {
+        if (snapshot.token !== token || !maintenanceCanAction(snapshot, action)) {
+          accept(snapshot);
+          update({ error: '状态已发生变化或操作被阻止，未执行操作。请检查当前状态并重新打开操作并确认。' });
+          return;
+        }
+        update({ snapshot: { ...snapshot, canApply: false, canRestoreOnly: false, canRestore: false, token: null } });
+        snapshot = await readSnapshot({ method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action, token, confirmation: MAINTENANCE_CONFIRMATION }) });
+        if (!current()) return;
+      }
+      accept(snapshot);
+    } catch {
+      if (current()) update({ snapshot: null,
+        error: action ? '未能确认维护结果：连接中断、请求被拒绝或响应无效不代表成功。请刷新检查。' : '状态检查失败，请确认连接后刷新重试。' });
+    } finally { if (current()) update({ busy: false }); }
+  }
+  const operate = (action, checked) => checked === true && Object.hasOwn(ACTION_CAPABILITIES, action) ? run(action) : Promise.resolve();
+  return {
+    getSnapshot: () => state,
+    subscribe: listener => { listeners.add(listener); return () => listeners.delete(listener); },
+    activate: () => { disposed = false; generation++; update({ busy: false }); },
+    refresh: () => run(),
+    operate,
+    apply: checked => operate('apply', checked),
+    restoreOnly: checked => operate('restore-only', checked),
+    restore: checked => operate('restore-and-uninstall', checked),
+    dispose: () => { disposed = true; generation++; listeners.clear(); },
+  };
+}
+
+function ModelGroupsSettingsPage() {
+  const h = react.createElement;
+  const controller = react.useMemo(() => createMaintenanceController(), []);
+  const state = react.useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+  const [pending, setPending] = react.useState(null);
+  const [copyStatus, setCopyStatus] = react.useState('');
+  const confirmationId = react.useId();
+  react.useEffect(() => { controller.activate(); controller.refresh(); return () => controller.dispose(); }, [controller]);
+  const snapshot = state.snapshot;
+  const phaseLabels = { idle: '检查完成，可选择操作', applied: '多密钥已应用（磁盘状态）', restored: '多密钥已关闭，插件仍保留（磁盘状态）', removing: '正在卸载，尚未确认完成', removed: '已确认关闭多密钥并卸载插件', failed: '维护失败，未确认完成' };
+  const updatesAvailable = snapshot?.patches.some(patch => patch.updateAvailable) ?? false;
+  const statusLabel = snapshot?.phase === 'idle'
+    ? snapshot.patches.length && snapshot.patches.every(patch => patch.state === 'patched') ? '多密钥已启用（磁盘状态）'
+      : snapshot.patches.length && snapshot.patches.every(patch => patch.state === 'pristine') ? '多密钥已关闭（磁盘状态）' : '磁盘状态待处理，请查看操作限制'
+    : phaseLabels[snapshot?.phase];
+  const patchLabels = { patched: '已应用', pristine: '原版', conflict: '冲突（不会强制覆盖）' };
+  const actions = [['apply', updatesAvailable ? '更新多密钥补丁' : '启用多密钥'],  ['restore-only', '关闭多密钥'], ['restore-and-uninstall', '关闭并卸载插件']];
+  const anyAllowed = actions.some(([action]) => maintenanceCanAction(snapshot, action));
+  const refresh = () => { setPending(null); controller.refresh(); };
+  const confirm = () => { const action = pending; setPending(null); if (action) controller.operate(action, true); };
+  const copy = async () => {
+    try { await globalThis.navigator.clipboard.writeText(maintenanceDiagnostic(state)); setCopyStatus('已复制脱敏诊断'); }
+    catch { setCopyStatus('无法复制，请检查浏览器剪贴板权限。'); }
+  };
+  return h('section', { className: 'mg-maintenance', 'aria-label': '模型分组设置', 'aria-busy': state.busy },
+    h('h2', null, '模型分组 · 多密钥管理'),
+    h('p', null, '选择操作，再确认一次即可。不会调用 AI，不会显示或删除 API 密钥。'),
+    h('section', { className: 'mg-maintenance-card', 'aria-label': '当前状态' },
+      h('div', { className: 'mg-maintenance-row' }, h('h3', null, '当前状态'), h('button', { type: 'button', disabled: state.busy, onClick: refresh }, state.busy ? '处理中…' : '刷新检查')),
+      h('p', { role: 'status', 'aria-live': 'polite', className: 'mg-maintenance-help' }, state.busy ? '正在检查或执行维护，请勿关闭或重复操作。' : snapshot ? statusLabel : '尚无可验证状态，请刷新检查。'),
+      state.error && h('p', { role: 'alert', className: 'mg-maintenance-error' }, state.error),
+      state.patchedWarning && h('p', { role: 'alert', className: 'mg-maintenance-error' }, '警告：从普通插件列表卸载只移除插件，仍会留下宿主补丁，可能造成升级、文件冲突及旧多密钥模型依赖问题。请使用这里的“关闭并卸载插件”。'),
+      snapshot?.restartRequired && h('p', { role: 'status' }, '本进程已实际修改宿主文件，需要重启原引擎并刷新；页面刷新或插件重载不等于进程重启。'),
+      updatesAvailable && h('p', { role: 'status' }, '多密钥补丁有更新可用；确认后将备份、校验并更新已识别的旧补丁。'),
+      snapshot?.phase === 'removed' && h('p', { role: 'status' }, '卸载已确认：仅清理本插件的两个浏览器显示偏好，密钥、历史和备份均保留。'),
+      snapshot?.warnings.length > 0 && h('p', { className: 'mg-maintenance-warning', role: 'status' }, '部分使用情况未验证，关闭前请阅读提示；检查提醒不会额外禁用操作。'),
+      snapshot?.blockers.length > 0 && h('div', { role: 'alert' }, h('strong', null, '操作限制（各按钮以安全权限为准）'), h('ul', null, ...snapshot.blockers.map((blocker, index) => h('li', { key: index }, maintenanceBlockerText(blocker))))),
+      state.cleanupWarning && h('p', { role: 'status' }, '卸载已确认，但浏览器阻止清理本插件的显示偏好；其他数据未受影响。')),
+    h('section', { className: 'mg-maintenance-card', 'aria-label': '多密钥操作' },
+      h('h3', null, '多密钥操作'),
+      h('div', { className: 'mg-maintenance-actions' }, ...actions.map(([action, label]) => h('button', { key: action, type: 'button', className: action === 'restore-and-uninstall' ? 'mg-maintenance-secondary mg-maintenance-danger' : 'mg-maintenance-primary', disabled: state.busy || !!pending || !maintenanceCanAction(snapshot, action), onClick: () => setPending(action) }, label))),
+      !anyAllowed && h('p', null, '请刷新检查或处理上方操作限制。检查提醒本身不会禁用按钮。'),
+      pending && h('div', { role: 'dialog', 'aria-labelledby': confirmationId, 'aria-describedby': `${confirmationId}-help`, className: 'mg-maintenance-dialog' },
+        h('h3', { id: confirmationId }, `确认${actions.find(([action]) => action === pending)[1]}？`),
+        h('p', { id: `${confirmationId}-help` }, pending === 'apply' ? '将备份、校验并修改宿主文件以启用多密钥。不会自动换服务或模型。请保存草稿、停止任务，完成后重启原引擎。' : '将校验并恢复宿主原版，关闭多密钥。密钥、配置和历史保留，不自动换服务或模型；旧多密钥选择和配置可能影响后续使用或重启。请保存草稿、停止任务，完成后重启原引擎。'),
+        h('p', null, '请先停止所有任务。部分使用情况未能检查不等于安全；检查提醒不会替代您的判断。'),
+        pending === 'restore-and-uninstall' && h('p', null, '确认原版恢复成功后才卸载插件；只有确认卸载完成才清理本插件的两个浏览器显示偏好。连接中断不代表成功。'),
+        h('div', { className: 'mg-maintenance-actions' }, h('button', { type: 'button', onClick: () => setPending(null) }, '取消'), h('button', { type: 'button', disabled: state.busy || !maintenanceCanAction(snapshot, pending), onClick: confirm }, '确认执行')))),
+    h('details', { className: 'mg-maintenance-card' },
+      h('summary', null, '检查详情与脱敏诊断'),
+      h('p', null, '这里只验证磁盘和安全权限，运行时是否已切换未知。每次确认后会重新检查；状态变化需重新确认。未知文件不会强制覆盖，检查不完整仅提醒；操作仍以各自安全权限为准。'),
+      snapshot?.warnings.length > 0 && h('ul', null, ...snapshot.warnings.map((warning, index) => h('li', { key: index }, maintenanceWarningText(warning)))),
+      snapshot && h('ul', null, ...snapshot.patches.map((patch, index) => h('li', { key: index }, `宿主文件 ${index + 1}：${patchLabels[patch.state]}${patch.updateAvailable ? '（更新可用）' : ''}`))),
+      h('button', { type: 'button', onClick: copy }, '复制脱敏诊断'),
+      h('p', { role: 'status' }, copyStatus)));
+}
+
 const groupPreferences = createGroupPreferences();
 const EMPTY_PROVIDERS_SNAPSHOT = Object.freeze({ status: 'unavailable', value: {} });
 
@@ -1304,7 +1506,27 @@ const inject = ['slots', 'modelDirectories', 'sessions', 'locale', 'remote', 're
 function apply(ctx) {
   installModelSelectStyles();
   installModelGroupsStyles();
+  installSettingsPageStyles();
+  ctx.slots.inject('settings.section', () => ctx.slots.register({
+    name: 'settings.section', id: 'dsh-model-groups', order: 35, label: '模型分组',
+  }, ModelGroupsSettingsPage));
   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', 'status');
+      statusNotice.style.cssText = 'position:fixed;bottom:16px;right:16px;max-width:min(360px,80vw);z-index:1000;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#222);padding:12px;border:1px solid currentColor;border-radius:8px;box-sizing:border-box;pointer-events:none;';
+      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",