dsh-sub2api-sync 0.2.3 → 0.2.5

package/lib/client.cjs

@@ -132,6 +132,8 @@ const zh = {
 	keysTitle: "Keys",
 	createKey: "创建 key",
 	keyGroupLabel: "所属分组",
+	keyGroupSearch: "搜索分组…",
+	keyGroupSearchEmpty: "没有匹配的分组",
 	keyNameLabel: "Key 名称",
 	keyNameHint: "默认与分组同名",
 	keyGroupPlaceholder: "选择分组",
@@ -246,6 +248,8 @@ const en = {
 	keysTitle: "Keys",
 	createKey: "Create key",
 	keyGroupLabel: "Group",
+	keyGroupSearch: "Search groups…",
+	keyGroupSearchEmpty: "No groups match",
 	keyNameLabel: "Key name",
 	keyNameHint: "Defaults to the group name",
 	keyGroupPlaceholder: "Pick a group",
@@ -725,30 +729,135 @@ const CSS = `
   flex: 1 1 220px;
 }
 
-/* Menu anchor wrapper: give the picker trigger the same field-column
-   footprint as the sibling Input rows. */
-.s2s-menuAnchor {
+/* Group picker (create-key dialog): the trigger takes the same field-column
+   footprint as the sibling Input rows, painted like an input rather than a
+   button so both rows read as one form. */
+.s2s-groupPicker {
   display: flex;
   flex: 1 1 220px;
   min-width: 0;
 }
 
-.s2s-menuAnchor > * {
-  width: 100%;
-}
-
-/* Select-style trigger (group picker): label left, chevron right. */
-.s2s-selectTrigger {
+.s2s-selectField {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
+  min-height: 34px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.s2s-selectField:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.s2s-selectField:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+.s2s-selectPlaceholder {
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-selectValue {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .s2s-selectChevron {
   flex: none;
   opacity: 0.55;
+  transition: transform var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+
+.s2s-selectChevronOpen {
+  transform: rotate(180deg);
+}
+
+/* The options panel: fixed-positioned from the trigger (escapes the modal
+   card's overflow clip), width-matched to it, search pinned on top, options
+   scrolling below. */
+.s2s-groupPanel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 10;
+  overflow: hidden;
+}
+
+.s2s-groupSearch {
+  flex: none;
+  padding: 8px 8px 6px;
+}
+
+.s2s-groupSearch > * {
+  width: 100%;
+}
+
+.s2s-groupList {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 8px 8px;
+}
+
+.s2s-groupEmpty {
+  margin: 0;
+  padding: 10px 4px;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+}
+
+.s2s-groupOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.s2s-groupOption[data-active='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.s2s-groupOptionName {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-groupOptionCheck {
+  flex: none;
+  color: var(--dsw-alias-state-business-primary);
 }
 
 /* The keys-card search input: fixed-width slot between the title and the
@@ -1178,6 +1287,164 @@ function protocolForPlatform(platform) {
 	}
 }
 
+//#endregion
+//#region src/client/section/GroupPicker.tsx
+/** Design cap for the panel; the viewport clamp never exceeds it. */
+const PANEL_MAX_HEIGHT = 280;
+/** Distance between the trigger's bottom edge and the panel. */
+const PANEL_GAP = 6;
+function GroupPicker({ groups, value, placeholder, searchPlaceholder, emptyLabel, disabled = false, onSelect }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [filter, setFilter] = (0, react.useState)("");
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const [triggerWidth, setTriggerWidth] = (0, react.useState)(0);
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)(null);
+	const selected = value === "" ? undefined : groups.find((group) => group.id === value);
+	const filtered = (0, react.useMemo)(() => {
+		const needle = filter.trim().toLowerCase();
+		if (needle === "") return groups;
+		return groups.filter((group) => group.name.toLowerCase().includes(needle));
+	}, [groups, filter]);
+	const position = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredPosition)({
+		open,
+		anchorRef: triggerRef,
+		panelRef,
+		side: "bottom",
+		align: "start",
+		gap: PANEL_GAP,
+		margin: 24
+	});
+	const maxHeight = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredMaxHeight)(panelRef, PANEL_MAX_HEIGHT, open ? filtered.length : 0);
+	(0, __deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(rootRef, open, setOpen, panelRef);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		setFilter("");
+		setActiveIndex(0);
+		setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		const timer$1 = window.setTimeout(() => {
+			panelRef.current?.querySelector("input")?.focus();
+		}, 0);
+		return () => window.clearTimeout(timer$1);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const onResize = () => {
+			setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		const list = listRef.current;
+		if (list === null) return;
+		list.querySelector("[data-active='true']")?.scrollIntoView({ block: "nearest" });
+	}, [activeIndex, filter]);
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	};
+	const pick = (group) => {
+		onSelect(group);
+		close();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			close();
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (filtered.length > 0) setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActiveIndex((index) => Math.max(index - 1, 0));
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			const group = filtered[activeIndex];
+			if (group !== undefined) pick(group);
+		}
+	};
+	return (0, react_jsx_runtime.jsxs)("div", {
+		className: "s2s-groupPicker",
+		ref: rootRef,
+		children: [(0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			ref: triggerRef,
+			className: "s2s-selectField",
+			disabled,
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			onClick: () => {
+				setOpen((next) => !next);
+			},
+			children: [(0, react_jsx_runtime.jsx)("span", {
+				className: selected === undefined ? "s2s-selectPlaceholder" : "s2s-selectValue",
+				children: selected === undefined ? placeholder : selected.name
+			}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
+				size: 14,
+				className: `s2s-selectChevron${open ? " s2s-selectChevronOpen" : ""}`
+			})]
+		}), open && (0, react_jsx_runtime.jsxs)(__deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
+			ref: panelRef,
+			className: "s2s-groupPanel",
+			role: "listbox",
+			style: position === null ? { visibility: "hidden" } : {
+				...position,
+				...triggerWidth > 0 ? { width: `${triggerWidth}px` } : {},
+				maxHeight: `${maxHeight}px`
+			},
+			onKeyDown,
+			children: [(0, react_jsx_runtime.jsx)("div", {
+				className: "s2s-groupSearch",
+				children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Input, {
+					type: "text",
+					value: filter,
+					placeholder: searchPlaceholder,
+					onChange: (event) => {
+						setFilter(event.target.value);
+						setActiveIndex(0);
+					}
+				})
+			}), (0, react_jsx_runtime.jsxs)("div", {
+				className: "s2s-groupList",
+				ref: listRef,
+				children: [filtered.length === 0 && (0, react_jsx_runtime.jsx)("p", {
+					className: "s2s-groupEmpty",
+					children: emptyLabel
+				}), filtered.map((group, index) => (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": group.id === value,
+					"data-active": index === activeIndex || undefined,
+					className: "s2s-groupOption",
+					onMouseEnter: () => {
+						setActiveIndex(index);
+					},
+					onClick: () => {
+						pick(group);
+					},
+					children: [(0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionName",
+						children: group.name
+					}), group.id === value && (0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionCheck",
+						"aria-hidden": "true",
+						children: "✓"
+					})]
+				}, group.id))]
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/client/section/KeysCard.tsx
 const PAGE_SIZE = 5;
@@ -1194,7 +1461,6 @@ function KeysCard({ api, config, groups, t }) {
 	const [loading, setLoading] = (0, react.useState)(false);
 	const [listError, setListError] = (0, react.useState)(undefined);
 	const [creating, setCreating] = (0, react.useState)(false);
-	const [groupMenuOpen, setGroupMenuOpen] = (0, react.useState)(false);
 	const [groupId, setGroupId] = (0, react.useState)("");
 	const [name$1, setName] = (0, react.useState)("");
 	const [nameTouched, setNameTouched] = (0, react.useState)(false);
@@ -1273,6 +1539,9 @@ else nextSet.delete(keyId);
 		setGroupId(gid);
 		if (!nameTouched) setName(groupNameOf(gid));
 	};
+	const selectGroup = (group) => {
+		pickGroup(group.id);
+	};
 	const closeCreate = () => {
 		setCreating(false);
 		setGroupId("");
@@ -1461,36 +1730,14 @@ else nextSet.delete(keyId);
 						children: [(0, react_jsx_runtime.jsx)("span", {
 							className: "s2s-fieldLabel",
 							children: t("keyGroupLabel")
-						}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Menu, {
-							open: groupMenuOpen,
-							anchor: (0, react_jsx_runtime.jsx)("span", {
-								className: "s2s-menuAnchor",
-								children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Button, {
-									variant: "outline",
-									onClick: () => {
-										setGroupMenuOpen(true);
-									},
-									children: (0, react_jsx_runtime.jsxs)("span", {
-										className: "s2s-selectTrigger",
-										children: [(0, react_jsx_runtime.jsx)("span", { children: groupId === "" ? t("keyGroupPlaceholder") : groupNameOf(groupId) }), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
-											size: 14,
-											className: "s2s-selectChevron"
-										})]
-									})
-								})
-							}),
-							items: groups.map((group) => ({
-								id: String(group.id),
-								label: group.name
-							})),
-							selectedId: groupId === "" ? undefined : String(groupId),
-							onSelect: (id) => {
-								pickGroup(Number(id));
-								setGroupMenuOpen(false);
-							},
-							onClose: () => {
-								setGroupMenuOpen(false);
-							}
+						}), (0, react_jsx_runtime.jsx)(GroupPicker, {
+							groups,
+							value: groupId,
+							placeholder: t("keyGroupPlaceholder"),
+							searchPlaceholder: t("keyGroupSearch"),
+							emptyLabel: t("keyGroupSearchEmpty"),
+							disabled: busy,
+							onSelect: selectGroup
 						})]
 					}), (0, react_jsx_runtime.jsxs)("div", {
 						className: "s2s-inline",

package/lib/client.js

@@ -138,6 +138,8 @@ const zh = {
 	keysTitle: "Keys",
 	createKey: "创建 key",
 	keyGroupLabel: "所属分组",
+	keyGroupSearch: "搜索分组…",
+	keyGroupSearchEmpty: "没有匹配的分组",
 	keyNameLabel: "Key 名称",
 	keyNameHint: "默认与分组同名",
 	keyGroupPlaceholder: "选择分组",
@@ -252,6 +254,8 @@ const en = {
 	keysTitle: "Keys",
 	createKey: "Create key",
 	keyGroupLabel: "Group",
+	keyGroupSearch: "Search groups…",
+	keyGroupSearchEmpty: "No groups match",
 	keyNameLabel: "Key name",
 	keyNameHint: "Defaults to the group name",
 	keyGroupPlaceholder: "Pick a group",
@@ -731,30 +735,135 @@ const CSS = `
   flex: 1 1 220px;
 }
 
-/* Menu anchor wrapper: give the picker trigger the same field-column
-   footprint as the sibling Input rows. */
-.s2s-menuAnchor {
+/* Group picker (create-key dialog): the trigger takes the same field-column
+   footprint as the sibling Input rows, painted like an input rather than a
+   button so both rows read as one form. */
+.s2s-groupPicker {
   display: flex;
   flex: 1 1 220px;
   min-width: 0;
 }
 
-.s2s-menuAnchor > * {
-  width: 100%;
-}
-
-/* Select-style trigger (group picker): label left, chevron right. */
-.s2s-selectTrigger {
+.s2s-selectField {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
+  min-height: 34px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.s2s-selectField:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.s2s-selectField:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+.s2s-selectPlaceholder {
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-selectValue {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .s2s-selectChevron {
   flex: none;
   opacity: 0.55;
+  transition: transform var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+
+.s2s-selectChevronOpen {
+  transform: rotate(180deg);
+}
+
+/* The options panel: fixed-positioned from the trigger (escapes the modal
+   card's overflow clip), width-matched to it, search pinned on top, options
+   scrolling below. */
+.s2s-groupPanel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 10;
+  overflow: hidden;
+}
+
+.s2s-groupSearch {
+  flex: none;
+  padding: 8px 8px 6px;
+}
+
+.s2s-groupSearch > * {
+  width: 100%;
+}
+
+.s2s-groupList {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 8px 8px;
+}
+
+.s2s-groupEmpty {
+  margin: 0;
+  padding: 10px 4px;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+}
+
+.s2s-groupOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.s2s-groupOption[data-active='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.s2s-groupOptionName {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-groupOptionCheck {
+  flex: none;
+  color: var(--dsw-alias-state-business-primary);
 }
 
 /* The keys-card search input: fixed-width slot between the title and the
@@ -1184,6 +1293,164 @@ function protocolForPlatform(platform) {
 	}
 }
 
+//#endregion
+//#region src/client/section/GroupPicker.tsx
+/** Design cap for the panel; the viewport clamp never exceeds it. */
+const PANEL_MAX_HEIGHT = 280;
+/** Distance between the trigger's bottom edge and the panel. */
+const PANEL_GAP = 6;
+function GroupPicker({ groups, value, placeholder, searchPlaceholder, emptyLabel, disabled = false, onSelect }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [filter, setFilter] = (0, react.useState)("");
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const [triggerWidth, setTriggerWidth] = (0, react.useState)(0);
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)(null);
+	const selected = value === "" ? undefined : groups.find((group) => group.id === value);
+	const filtered = (0, react.useMemo)(() => {
+		const needle = filter.trim().toLowerCase();
+		if (needle === "") return groups;
+		return groups.filter((group) => group.name.toLowerCase().includes(needle));
+	}, [groups, filter]);
+	const position = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredPosition)({
+		open,
+		anchorRef: triggerRef,
+		panelRef,
+		side: "bottom",
+		align: "start",
+		gap: PANEL_GAP,
+		margin: 24
+	});
+	const maxHeight = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredMaxHeight)(panelRef, PANEL_MAX_HEIGHT, open ? filtered.length : 0);
+	(0, __deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(rootRef, open, setOpen, panelRef);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		setFilter("");
+		setActiveIndex(0);
+		setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		const timer$1 = window.setTimeout(() => {
+			panelRef.current?.querySelector("input")?.focus();
+		}, 0);
+		return () => window.clearTimeout(timer$1);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const onResize = () => {
+			setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		const list = listRef.current;
+		if (list === null) return;
+		list.querySelector("[data-active='true']")?.scrollIntoView({ block: "nearest" });
+	}, [activeIndex, filter]);
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	};
+	const pick = (group) => {
+		onSelect(group);
+		close();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			close();
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (filtered.length > 0) setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActiveIndex((index) => Math.max(index - 1, 0));
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			const group = filtered[activeIndex];
+			if (group !== undefined) pick(group);
+		}
+	};
+	return (0, react_jsx_runtime.jsxs)("div", {
+		className: "s2s-groupPicker",
+		ref: rootRef,
+		children: [(0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			ref: triggerRef,
+			className: "s2s-selectField",
+			disabled,
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			onClick: () => {
+				setOpen((next) => !next);
+			},
+			children: [(0, react_jsx_runtime.jsx)("span", {
+				className: selected === undefined ? "s2s-selectPlaceholder" : "s2s-selectValue",
+				children: selected === undefined ? placeholder : selected.name
+			}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
+				size: 14,
+				className: `s2s-selectChevron${open ? " s2s-selectChevronOpen" : ""}`
+			})]
+		}), open && (0, react_jsx_runtime.jsxs)(__deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
+			ref: panelRef,
+			className: "s2s-groupPanel",
+			role: "listbox",
+			style: position === null ? { visibility: "hidden" } : {
+				...position,
+				...triggerWidth > 0 ? { width: `${triggerWidth}px` } : {},
+				maxHeight: `${maxHeight}px`
+			},
+			onKeyDown,
+			children: [(0, react_jsx_runtime.jsx)("div", {
+				className: "s2s-groupSearch",
+				children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Input, {
+					type: "text",
+					value: filter,
+					placeholder: searchPlaceholder,
+					onChange: (event) => {
+						setFilter(event.target.value);
+						setActiveIndex(0);
+					}
+				})
+			}), (0, react_jsx_runtime.jsxs)("div", {
+				className: "s2s-groupList",
+				ref: listRef,
+				children: [filtered.length === 0 && (0, react_jsx_runtime.jsx)("p", {
+					className: "s2s-groupEmpty",
+					children: emptyLabel
+				}), filtered.map((group, index) => (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": group.id === value,
+					"data-active": index === activeIndex || undefined,
+					className: "s2s-groupOption",
+					onMouseEnter: () => {
+						setActiveIndex(index);
+					},
+					onClick: () => {
+						pick(group);
+					},
+					children: [(0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionName",
+						children: group.name
+					}), group.id === value && (0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionCheck",
+						"aria-hidden": "true",
+						children: "✓"
+					})]
+				}, group.id))]
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/client/section/KeysCard.tsx
 const PAGE_SIZE = 5;
@@ -1200,7 +1467,6 @@ function KeysCard({ api, config, groups, t }) {
 	const [loading, setLoading] = (0, react.useState)(false);
 	const [listError, setListError] = (0, react.useState)(undefined);
 	const [creating, setCreating] = (0, react.useState)(false);
-	const [groupMenuOpen, setGroupMenuOpen] = (0, react.useState)(false);
 	const [groupId, setGroupId] = (0, react.useState)("");
 	const [name$1, setName] = (0, react.useState)("");
 	const [nameTouched, setNameTouched] = (0, react.useState)(false);
@@ -1279,6 +1545,9 @@ else nextSet.delete(keyId);
 		setGroupId(gid);
 		if (!nameTouched) setName(groupNameOf(gid));
 	};
+	const selectGroup = (group) => {
+		pickGroup(group.id);
+	};
 	const closeCreate = () => {
 		setCreating(false);
 		setGroupId("");
@@ -1467,36 +1736,14 @@ else nextSet.delete(keyId);
 						children: [(0, react_jsx_runtime.jsx)("span", {
 							className: "s2s-fieldLabel",
 							children: t("keyGroupLabel")
-						}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Menu, {
-							open: groupMenuOpen,
-							anchor: (0, react_jsx_runtime.jsx)("span", {
-								className: "s2s-menuAnchor",
-								children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Button, {
-									variant: "outline",
-									onClick: () => {
-										setGroupMenuOpen(true);
-									},
-									children: (0, react_jsx_runtime.jsxs)("span", {
-										className: "s2s-selectTrigger",
-										children: [(0, react_jsx_runtime.jsx)("span", { children: groupId === "" ? t("keyGroupPlaceholder") : groupNameOf(groupId) }), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
-											size: 14,
-											className: "s2s-selectChevron"
-										})]
-									})
-								})
-							}),
-							items: groups.map((group) => ({
-								id: String(group.id),
-								label: group.name
-							})),
-							selectedId: groupId === "" ? undefined : String(groupId),
-							onSelect: (id) => {
-								pickGroup(Number(id));
-								setGroupMenuOpen(false);
-							},
-							onClose: () => {
-								setGroupMenuOpen(false);
-							}
+						}), (0, react_jsx_runtime.jsx)(GroupPicker, {
+							groups,
+							value: groupId,
+							placeholder: t("keyGroupPlaceholder"),
+							searchPlaceholder: t("keyGroupSearch"),
+							emptyLabel: t("keyGroupSearchEmpty"),
+							disabled: busy,
+							onSelect: selectGroup
 						})]
 					}), (0, react_jsx_runtime.jsxs)("div", {
 						className: "s2s-inline",

package/lib/icon.d.ts

@@ -41,9 +41,19 @@ export declare function parseSiteTitle(html: string): string | undefined;
  * the closure, so the icon and site-name consumers share one HTML read per
  * TTL window. Errors never throw — an unavailable answer resolves to
  * `undefined` and the client keeps its fallbacks.
+ *
+ * Title caching is two-tier: a RESOLVED title rides the shared 10-minute
+ * window, while a title-less result is only trusted for
+ * {@link NEGATIVE_TTL_MS} and one in-call retry backs the first read — the
+ * login-to-first-sync window is exactly when a cold connection would
+ * otherwise brand every provider with the `sub2api` fallback name.
  */
 export declare function createInstanceProbe(options?: {
     fetchImpl?: typeof fetch;
+    /** Test knob: the title-less retry wait (default {@link RETRY_DELAY_MS}). */
+    retryDelayMs?: number;
+    /** Test knob: the title-less negative-cache window (default {@link NEGATIVE_TTL_MS}). */
+    negativeTtlMs?: number;
 }): {
     icon: (instance: string) => Promise<IconPayload | undefined>;
     siteName: (instance: string) => Promise<string | undefined>;

package/lib/index.js

@@ -895,6 +895,7 @@ var Sub2apiSyncEngine = class {
 		const site = await this.siteName?.().catch(() => undefined);
 		const syncWarnings = [];
 		if (keyWalkTruncated) syncWarnings.push("面板 key 数量超过单次同步的读取上限（10 页 × 100 = 1000 把）——超出部分未参与同步，也不会被移除");
+		if (site === undefined && this.siteName !== undefined && (config.providerNameTemplate ?? "").includes("{siteName}")) syncWarnings.push("实例站点名探测失败（实例不可达或页面 <title> 缺失）——displayName 暂用回退名 sub2api，站点名可解析后的同步会自动更正");
 		const effective = {
 			...config,
 			selectedKeys: selection ?? config.selectedKeys
@@ -1168,6 +1169,14 @@ else if (isOwnedRoute(route)) {
 //#region src/icon.ts
 /** How long a resolved icon URL is trusted before re-reading the HTML. */
 const URL_TTL_MS = 6e5;
+/** How long a TITLE-LESS probe result is trusted before re-reading: the sync
+* that renders `{siteName}` must not pin a 10-minute negative on a cold
+* connection, or the first sync after login names every provider with the
+* `sub2api` fallback until the cache expires. */
+const NEGATIVE_TTL_MS = 15e3;
+/** One in-call retry wait when a fresh probe still answers without a title
+* (cold DNS/TLS or a momentary gateway hiccup — not proof the title is absent). */
+const RETRY_DELAY_MS = 1200;
 /** Discovery + byte fetches cap, so an offline instance cannot stall callers. */
 const TIMEOUT_MS = 2500;
 /** Refuse to proxy absurd payloads. */
@@ -1252,6 +1261,8 @@ function guessContentType(url) {
 }
 function createInstanceProbe(options = {}) {
 	const fetchImpl = options.fetchImpl ?? globalThis.fetch;
+	const retryDelayMs = options.retryDelayMs ?? RETRY_DELAY_MS;
+	const negativeTtlMs = options.negativeTtlMs ?? NEGATIVE_TTL_MS;
 	const cache = new Map();
 	const metaOf = async (instance) => {
 		const base = instance.trim().replace(/\/+$/, "");
@@ -1266,6 +1277,9 @@ function createInstanceProbe(options = {}) {
 		});
 		return meta;
 	};
+	const wait = (ms) => new Promise((resolve) => {
+		setTimeout(resolve, ms);
+	});
 	return {
 		icon: async (instance) => {
 			const meta = await metaOf(instance);
@@ -1284,7 +1298,27 @@ function createInstanceProbe(options = {}) {
 				return undefined;
 			}
 		},
-		siteName: async (instance) => (await metaOf(instance))?.title
+		siteName: async (instance) => {
+			const base = instance.trim().replace(/\/+$/, "");
+			if (!/^https?:\/\//i.test(base)) return undefined;
+			const now = Date.now();
+			const hit = cache.get(base);
+			if (hit !== undefined && hit.meta.title !== undefined && now - hit.at < URL_TTL_MS) return hit.meta.title;
+			if (hit !== undefined && hit.meta.title === undefined && now - hit.at < negativeTtlMs) return undefined;
+			const first = await probeInstance(base, fetchImpl);
+			cache.set(base, {
+				meta: first,
+				at: Date.now()
+			});
+			if (first.title !== undefined) return first.title;
+			await wait(retryDelayMs);
+			const second = await probeInstance(base, fetchImpl);
+			cache.set(base, {
+				meta: second,
+				at: Date.now()
+			});
+			return second.title;
+		}
 	};
 }
 
@@ -2636,6 +2670,14 @@ function apply(ctx, config) {
 	const mutateOwn = (ops) => mutateWithRetry(ctx.settings, OWN_NS, () => ops, { missingError: "sub2api-sync: 自身 settings 命名空间未注册" });
 	const instance = () => source().baseURL?.trim() ?? "";
 	const instanceProbe = createInstanceProbe();
+	/** Warm the site-name cache at auth events. The first sync right after a
+	* login/authorization renders `{siteName}` — a cold probe there would
+	* brand the providers with the `sub2api` fallback name. Fire-and-forget:
+	* the probe's own negative-TTL window bounds any retry fetching. */
+	const warmProbe = () => {
+		const base = instance();
+		if (/^https?:\/\//i.test(base)) void instanceProbe.siteName(base).catch(() => undefined);
+	};
 	const oauthAttempts = new OAuthAttemptStore();
 	const deps = {
 		instance,
@@ -2650,6 +2692,7 @@ function apply(ctx, config) {
 				value: email
 			}]).catch(() => undefined);
 			const outcome = await gateway.login(email, pwd);
+			warmProbe();
 			if (outcome.kind === "2fa") {
 				pendingTypedPassword = typed;
 				return {
@@ -2667,6 +2710,7 @@ function apply(ctx, config) {
 		},
 		login2FA: async (code) => {
 			await gateway.login2FA(code);
+			warmProbe();
 			if (pendingTypedPassword !== undefined) {
 				await credentials.set(panelPasswordRef(instance()), pendingTypedPassword).catch(() => undefined);
 				pendingTypedPassword = undefined;
@@ -2825,6 +2869,7 @@ function apply(ctx, config) {
 				});
 				await gateway.storeOAuthTokens(pair);
 				oauthAttempts.settle(attempt.id, "completed");
+				warmProbe();
 				const successMessage = lang === "en" ? "You can close this page and return to the desktop app to continue." : "你可以关闭此页面，返回桌面端继续工作。";
 				return { html: callbackPageHtml("success", successMessage, lang) };
 			} catch (cause) {
@@ -2834,6 +2879,7 @@ function apply(ctx, config) {
 			}
 		},
 		oauthStatus: async (attemptId) => {
+			warmProbe();
 			const attempt = attemptId !== undefined ? oauthAttempts.peek(attemptId) : undefined;
 			const email = source().email;
 			return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-sub2api-sync",
   "description": "Sync one sub2api instance's groups, keys, and models into dsh-llm-pi-ai provider routes: panel-driven login (password / OAuth), one relay key one provider.",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "MIT",
   "author": "Shuai-S",
   "homepage": "https://github.com/Shuai-S/dsh-sub2api-sync#readme",