dsh-skill-importer 0.1.2 → 0.2.0

package/lib/client.js

@@ -110,6 +110,110 @@ window.__ModuleLoader__.load({
 		* through the four props shares.
 		*/
 		const MAX_FILE_BYTES = 262144;
+		function FileIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+				width: "18",
+				height: "18",
+				viewBox: "0 0 18 18",
+				fill: "none",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M5.25 2.25h4.2l3.3 3.3v9.2a1 1 0 0 1-1 1h-6.5a1 1 0 0 1-1-1V3.25a1 1 0 0 1 1-1Z",
+					stroke: "currentColor",
+					strokeWidth: "1.35",
+					strokeLinejoin: "round"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M9.25 2.5v3.25h3.25M6.75 9h4.5M6.75 11.75h3.25",
+					stroke: "currentColor",
+					strokeWidth: "1.35",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})]
+			});
+		}
+		function LinkIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: "18",
+				height: "18",
+				viewBox: "0 0 18 18",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "m7.15 10.85 3.7-3.7M6.05 12.55l-1.1 1.1a2.6 2.6 0 0 1-3.68-3.68l2.3-2.3a2.6 2.6 0 0 1 3.68 0M11.95 5.45l1.1-1.1a2.6 2.6 0 1 1 3.68 3.68l-2.3 2.3a2.6 2.6 0 0 1-3.68 0",
+					stroke: "currentColor",
+					strokeWidth: "1.35",
+					strokeLinecap: "round"
+				})
+			});
+		}
+		function BatchIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: "18",
+				height: "18",
+				viewBox: "0 0 18 18",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M3 4.25h12v9.5H3zM3 7.25h12M6.25 2.5v3.25M11.75 2.5v3.25M6 10.5h2M10 10.5h2",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			});
+		}
+		function CheckIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "m3 7.25 2.4 2.4L11 4.5",
+					stroke: "currentColor",
+					strokeWidth: "1.5",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			});
+		}
+		function TrashIcon() {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M2.5 3.75h9M5.25 3.75V2.5h3.5v1.25M4 3.75l.55 7.15a.75.75 0 0 0 .75.7h3.4a.75.75 0 0 0 .75-.7L10 3.75M5.75 6v3.25M8.25 6v3.25",
+					stroke: "currentColor",
+					strokeWidth: "1.2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			});
+		}
+		function ChevronIcon({ open }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				"aria-hidden": "true",
+				style: {
+					transform: open ? "rotate(90deg)" : void 0,
+					transition: "transform 120ms ease"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "m5 3.25 3.75 3.75L5 10.75",
+					stroke: "currentColor",
+					strokeWidth: "1.3",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			});
+		}
 		/** Read a picked file's text (browser-local; nothing crosses the wire except the import itself). */
 		function readFileText(file) {
 			return new Promise((resolve, reject) => {
@@ -127,6 +231,7 @@ window.__ModuleLoader__.load({
 			const [listState, setListState] = (0, react.useState)("idle");
 			const [listError, setListError] = (0, react.useState)();
 			const [listEpoch, setListEpoch] = (0, react.useState)(0);
+			const [collapsedSources, setCollapsedSources] = (0, react.useState)(() => /* @__PURE__ */ new Set());
 			(0, react.useEffect)(() => {
 				let cancelled = false;
 				setListState("loading");
@@ -151,6 +256,10 @@ window.__ModuleLoader__.load({
 			const [busy, setBusy] = (0, react.useState)(false);
 			const [message, setMessage] = (0, react.useState)();
 			const [messageError, setMessageError] = (0, react.useState)(false);
+			const [batchPath, setBatchPath] = (0, react.useState)();
+			const [batchScan, setBatchScan] = (0, react.useState)();
+			const [batchResults, setBatchResults] = (0, react.useState)();
+			const [replaceNames, setReplaceNames] = (0, react.useState)(() => /* @__PURE__ */ new Set());
 			const fileInput = (0, react.useRef)(null);
 			const onFilePicked = async (file) => {
 				setFileDraft(void 0);
@@ -226,7 +335,7 @@ window.__ModuleLoader__.load({
 							workspacePath: workspace?.path
 						});
 						pollForSkill(fileDraft.name, 10);
-					} else {
+					} else if (mode === "url") {
 						path = await actions.importUrl({
 							name: effectiveUrlName,
 							target,
@@ -234,7 +343,7 @@ window.__ModuleLoader__.load({
 							workspacePath: workspace?.path
 						});
 						pollForSkill(effectiveUrlName, 10);
-					}
+					} else return;
 					setMessage(`${t("imported")}${path}`);
 					setFileDraft(void 0);
 					setFileError(void 0);
@@ -249,16 +358,118 @@ window.__ModuleLoader__.load({
 					setBusy(false);
 				}
 			};
-			const canSubmit = busy || mode === "file" && fileDraft === void 0 || mode === "url" && (url.trim().length === 0 || !/^https?:\/\//i.test(url.trim())) || target !== "user" && workspace === void 0;
+			const resetBatchPreflight = () => {
+				setBatchScan(void 0);
+				setBatchResults(void 0);
+				setReplaceNames(/* @__PURE__ */ new Set());
+				setMessage(void 0);
+			};
+			const chooseBatchDirectory = async () => {
+				setBusy(true);
+				setMessage(void 0);
+				setMessageError(false);
+				try {
+					const path = await actions.pickDirectory();
+					if (path === null) return;
+					setBatchPath(path);
+					resetBatchPreflight();
+				} catch (error) {
+					setMessageError(true);
+					setMessage(`${t("batchPickFailed")}：${String(error)}`);
+				} finally {
+					setBusy(false);
+				}
+			};
+			const scanBatchDirectory = async () => {
+				if (batchPath === void 0) return;
+				setBusy(true);
+				setMessage(void 0);
+				setMessageError(false);
+				setBatchResults(void 0);
+				setReplaceNames(/* @__PURE__ */ new Set());
+				try {
+					const result = await actions.scanBatch({
+						sourcePath: batchPath,
+						target,
+						workspacePath: workspace?.path
+					});
+					setBatchScan(result);
+				} catch (error) {
+					setBatchScan(void 0);
+					setMessageError(true);
+					setMessage(`${t("batchScanFailed")}：${String(error)}`);
+				} finally {
+					setBusy(false);
+				}
+			};
+			const commitBatchDirectory = async () => {
+				if (batchScan === void 0) return;
+				const ready = batchScan.entries.filter((entry) => entry.status === "ready");
+				const replacing = ready.filter((entry) => replaceNames.has(entry.name)).length;
+				const importing = ready.filter((entry) => !entry.conflict).length;
+				const skipped = ready.filter((entry) => entry.conflict && !replaceNames.has(entry.name)).length;
+				if (!window.confirm(t("batchConfirm", {
+					importing,
+					replacing,
+					skipped
+				}))) return;
+				setBusy(true);
+				setMessage(void 0);
+				setMessageError(false);
+				try {
+					const result = await actions.commitBatch({
+						scanId: batchScan.scanId,
+						replace: [...replaceNames]
+					});
+					setBatchResults(result.results);
+					setBatchScan(void 0);
+					setReplaceNames(/* @__PURE__ */ new Set());
+					setListEpoch((epoch) => epoch + 1);
+				} catch (error) {
+					setMessageError(true);
+					setMessage(`${t("batchImportFailed")}：${String(error)}`);
+				} finally {
+					setBusy(false);
+				}
+			};
+			const toggleReplace = (name) => {
+				setReplaceNames((current) => {
+					const next = new Set(current);
+					if (!next.delete(name)) next.add(name);
+					return next;
+				});
+			};
+			const changeTarget = (next) => {
+				setTarget(next);
+				if (mode === "batch") resetBatchPreflight();
+			};
+			const canSubmit = busy || mode === "file" && fileDraft === void 0 || mode === "url" && (url.trim().length === 0 || !/^https?:\/\//i.test(url.trim())) || mode === "batch" && batchPath === void 0 || target !== "user" && workspace === void 0;
+			const runPrimaryAction = () => {
+				if (mode !== "batch") {
+					submit();
+					return;
+				}
+				if (batchScan === void 0) scanBatchDirectory();
+				else commitBatchDirectory();
+			};
+			const primaryLabel = mode !== "batch" ? busy ? t("importing") : t("import") : busy ? t("batchWorking") : batchScan === void 0 ? t("batchScan") : t("batchCommit");
 			const flags = (skill) => {
 				if (!skill.modelInvocable && skill.userInvocable) return t("userOnly");
 				if (skill.modelInvocable && !skill.userInvocable) return t("modelOnly");
 			};
+			const toggleSource = (source) => {
+				setCollapsedSources((current) => {
+					const next = new Set(current);
+					if (!next.delete(source)) next.add(source);
+					return next;
+				});
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: {
 					display: "flex",
 					flexDirection: "column",
-					width: "100%"
+					width: "100%",
+					maxWidth: 720
 				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -312,104 +523,94 @@ window.__ModuleLoader__.load({
 								children: t("installedEmpty")
 							}) : null,
 							skills.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								style: {
-									display: "flex",
-									flexDirection: "column"
-								},
-								children: [
-									"project-agents",
-									"project-dsh",
-									"user"
-								].map((source) => {
+								style: skillGroupsStyle,
+								children: ["project-agents", "user"].map((source) => {
 									const rows = skills.filter((skill) => skill.source === source);
 									if (rows.length === 0) return null;
-									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										style: {
-											display: "flex",
-											flexDirection: "column",
-											gap: 4
-										},
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									const sourceName = source === "user" ? t("targetUser") : workspace === void 0 ? t("targetProjectNoWorkspace") : t("targetProjectAgents", { title: workspace.title });
+									const open = !collapsedSources.has(source);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+										style: skillGroupCardStyle,
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											"aria-expanded": open,
+											onClick: () => toggleSource(source),
 											style: {
-												...descriptionStyle,
-												fontWeight: 600,
-												textTransform: "uppercase",
-												letterSpacing: "0.04em",
-												marginTop: 8
+												...skillGroupHeaderStyle,
+												borderBottom: open ? skillGroupHeaderStyle.borderBottom : "none"
 											},
-											children: t(`source${source === "project-agents" ? "Agents" : source === "project-dsh" ? "Dsh" : "User"}`)
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-											style: {
-												listStyle: "none",
-												margin: 0,
-												padding: 0,
-												display: "flex",
-												flexDirection: "column"
-											},
-											children: rows.map((skill) => {
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: skillGroupChevronStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronIcon, { open })
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													style: skillGroupIdentityStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: skillGroupNameStyle,
+														children: sourceName
+													})
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: countBadgeStyle,
+													children: rows.length
+												})
+											]
+										}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+											style: skillListStyle,
+											children: rows.map((skill, index) => {
 												const flag = flags(skill);
 												return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 													style: {
-														display: "flex",
-														alignItems: "center",
-														gap: 8,
-														padding: "6px 0"
+														...skillRowStyle,
+														borderBottom: index === rows.length - 1 ? "none" : skillRowStyle.borderBottom
 													},
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-														style: {
-															flex: 1,
-															minWidth: 0,
-															display: "flex",
-															flexDirection: "column",
-															gap: 2
-														},
-														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-															style: {
-																fontSize: 14,
-																fontWeight: 600,
-																color: "var(--dsw-alias-label-primary)"
-															},
-															children: [
-																"/",
-																skill.name,
-																flag !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-																	style: {
-																		opacity: .6,
-																		fontWeight: 400,
-																		marginLeft: 8
-																	},
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: skillAvatarStyle,
+															"aria-hidden": "true",
+															children: skill.name.charAt(0).toUpperCase()
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															style: skillContentStyle,
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																style: skillNameRowStyle,
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	style: skillNameStyle,
+																	children: skill.name
+																}), flag !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	style: skillFlagStyle,
 																	children: flag
-																}) : null
-															]
-														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															style: {
-																fontSize: 13,
-																color: "var(--dsw-alias-label-secondary)"
+																}) : null]
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																style: skillDescriptionStyle,
+																children: skill.description
+															})]
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+															type: "button",
+															"aria-label": `${t("delete")} ${skill.name}`,
+															title: t("delete"),
+															onClick: () => {
+																removeSkill(skill);
 															},
-															children: skill.description
-														})]
-													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-														type: "button",
-														onClick: () => {
-															removeSkill(skill);
-														},
-														style: {
-															...pillStyle,
-															flex: "none",
-															color: "var(--dsw-alias-state-error-primary)"
-														},
-														children: t("delete")
-													})]
+															style: deleteIconButtonStyle,
+															children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, {})
+														})
+													]
 												}, skill.source + ":" + skill.name);
 											})
-										})]
+										}) : null]
 									}, source);
 								})
 							}) : null
 						]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						style: rowStyle$1,
+						style: {
+							...rowStyle$1,
+							borderBottom: "none"
+						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							style: rowTextStyle,
 							children: [
@@ -417,227 +618,432 @@ window.__ModuleLoader__.load({
 									style: titleStyle,
 									children: t("importTitle")
 								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									style: descriptionStyle,
+									children: t("importDescription")
+								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									role: "tablist",
-									style: {
-										display: "flex",
-										gap: 8,
-										marginTop: 4
-									},
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										role: "tab",
-										"aria-selected": mode === "file",
-										onClick: () => setMode("file"),
-										style: segmentStyle(mode === "file"),
-										children: t("fileTab")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										role: "tab",
-										"aria-selected": mode === "url",
-										onClick: () => setMode("url"),
-										style: segmentStyle(mode === "url"),
-										children: t("urlTab")
-									})]
-								}),
-								mode === "file" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									style: {
-										display: "flex",
-										flexDirection: "column",
-										gap: 8,
-										marginTop: 12
-									},
+									style: entryGridStyle,
 									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											ref: fileInput,
-											type: "file",
-											accept: ".md,.markdown,text/markdown,text/plain",
-											onChange: (event) => {
-												onFilePicked(event.target.files?.[0]);
-											},
-											style: {
-												...controlStyle,
-												padding: 8
-											}
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											role: "tab",
+											"aria-selected": mode === "file",
+											onClick: () => setMode("file"),
+											style: entryButtonStyle(mode === "file"),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: entryIconStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {})
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+													style: entryCopyStyle,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: entryTitleStyle,
+														children: t("fileTab")
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: entryDescriptionStyle,
+														children: t("fileEntryDescription")
+													})]
+												}),
+												mode === "file" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: entryCheckStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {})
+												}) : null
+											]
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: descriptionStyle,
-											children: t("fileHelp")
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											role: "tab",
+											"aria-selected": mode === "url",
+											onClick: () => setMode("url"),
+											style: entryButtonStyle(mode === "url"),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: entryIconStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkIcon, {})
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+													style: entryCopyStyle,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: entryTitleStyle,
+														children: t("urlTab")
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: entryDescriptionStyle,
+														children: t("urlEntryDescription")
+													})]
+												}),
+												mode === "url" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: entryCheckStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {})
+												}) : null
+											]
 										}),
-										fileError !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: {
-												...descriptionStyle,
-												color: "var(--dsw-alias-state-error-primary)"
-											},
-											children: fileError
-										}) : null,
-										fileDraft !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											role: "tab",
+											"aria-selected": mode === "batch",
+											onClick: () => setMode("batch"),
+											style: entryButtonStyle(mode === "batch"),
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: entryIconStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BatchIcon, {})
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+													style: entryCopyStyle,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: entryTitleStyle,
+														children: t("batchTab")
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: entryDescriptionStyle,
+														children: t("batchEntryDescription")
+													})]
+												}),
+												mode === "batch" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: entryCheckStyle,
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {})
+												}) : null
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									style: importEditorStyle,
+									children: [
+										mode === "file" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											style: {
 												display: "flex",
 												flexDirection: "column",
-												gap: 4,
-												fontSize: 13,
-												border: "1px solid var(--dsw-alias-border-l2)",
-												borderRadius: 8,
-												padding: 10,
-												color: "var(--dsw-alias-label-secondary)"
+												gap: 10
 											},
 											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													style: {
-														fontWeight: 600,
-														color: "var(--dsw-alias-label-primary)"
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													ref: fileInput,
+													type: "file",
+													accept: ".md,.markdown,text/markdown,text/plain",
+													onChange: (event) => {
+														onFilePicked(event.target.files?.[0]);
 													},
-													children: t("previewTitle")
+													style: hiddenInputStyle
 												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-													t("previewName"),
-													": ",
-													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: fileDraft.name })
-												] }),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-													t("previewDescription"),
-													": ",
-													fileDraft.description
-												] }),
-												fileDraft.whenToUse !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-													t("previewWhenToUse"),
-													": ",
-													fileDraft.whenToUse
-												] }) : null,
-												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-													style: { opacity: .8 },
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+													type: "button",
+													onClick: () => fileInput.current?.click(),
+													style: filePickerStyle,
 													children: [
-														fileDraft.fileName,
-														" · ",
-														t("previewOk")
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: filePickerIconStyle,
+															children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileIcon, {})
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															style: {
+																minWidth: 0,
+																flex: 1,
+																display: "flex",
+																flexDirection: "column",
+																gap: 2,
+																textAlign: "left"
+															},
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																style: {
+																	fontSize: 13,
+																	lineHeight: "20px",
+																	fontWeight: 500,
+																	color: "var(--dsw-alias-label-primary)",
+																	overflow: "hidden",
+																	textOverflow: "ellipsis",
+																	whiteSpace: "nowrap"
+																},
+																children: fileDraft?.fileName ?? t("chooseFile")
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																style: descriptionStyle,
+																children: fileDraft === void 0 ? t("filePickerHint") : t("replaceFile")
+															})]
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: secondaryButtonStyle,
+															children: fileDraft === void 0 ? t("browse") : t("change")
+														})
 													]
-												})
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													style: descriptionStyle,
+													children: t("fileHelp")
+												}),
+												fileError !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													style: {
+														...descriptionStyle,
+														color: "var(--dsw-alias-state-error-primary)"
+													},
+													children: fileError
+												}) : null,
+												fileDraft !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													style: previewStyle,
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+															style: {
+																display: "flex",
+																alignItems: "center",
+																gap: 6,
+																color: "var(--dsw-alias-state-success-primary)"
+															},
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																style: {
+																	fontSize: 12,
+																	fontWeight: 500
+																},
+																children: t("previewOk")
+															})]
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: previewDividerStyle }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+															style: previewKeyStyle,
+															children: t("previewName")
+														}), fileDraft.name] }),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+															style: previewKeyStyle,
+															children: t("previewDescription")
+														}), fileDraft.description] }),
+														fileDraft.whenToUse !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+															style: previewKeyStyle,
+															children: t("previewWhenToUse")
+														}), fileDraft.whenToUse] }) : null
+													]
+												}) : null
 											]
-										}) : null
-									]
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									style: {
-										display: "flex",
-										flexDirection: "column",
-										gap: 8,
-										marginTop: 12
-									},
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										style: {
-											display: "flex",
-											flexDirection: "column",
-											gap: 4,
-											fontSize: 13
-										},
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										}) : mode === "url" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											style: {
-												fontWeight: 600,
-												color: "var(--dsw-alias-label-primary)"
+												display: "flex",
+												flexDirection: "column",
+												gap: 12
 											},
-											children: t("urlLabel")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-											type: "url",
-											value: url,
-											placeholder: "https://example.com/my-skill.md",
-											onChange: (event) => setUrl(event.target.value),
-											style: controlStyle
-										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										style: {
-											display: "flex",
-											flexDirection: "column",
-											gap: 4,
-											fontSize: 13
-										},
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												style: {
-													fontWeight: 600,
-													color: "var(--dsw-alias-label-primary)"
-												},
-												children: t("urlNameLabel")
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-												type: "text",
-												value: urlName,
-												placeholder: nameFromUrl(url) || "my-skill",
-												onChange: (event) => setUrlName(event.target.value),
-												style: controlStyle
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												style: descriptionStyle,
-												children: t("urlNameHelp")
-											})
-										]
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-									style: {
-										display: "flex",
-										flexDirection: "column",
-										gap: 4,
-										fontSize: 13,
-										marginTop: 12
-									},
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												style: fieldStyle,
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: fieldLabelStyle,
+													children: t("urlLabel")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													type: "url",
+													value: url,
+													placeholder: "https://example.com/my-skill.md",
+													onChange: (event) => setUrl(event.target.value),
+													style: controlStyle
+												})]
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												style: fieldStyle,
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: fieldLabelStyle,
+														children: t("urlNameLabel")
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+														type: "text",
+														value: urlName,
+														placeholder: nameFromUrl(url) || "my-skill",
+														onChange: (event) => setUrlName(event.target.value),
+														style: controlStyle
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: descriptionStyle,
+														children: t("urlNameHelp")
+													})
+												]
+											})]
+										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 											style: {
-												fontWeight: 600,
-												color: "var(--dsw-alias-label-primary)"
+												display: "flex",
+												flexDirection: "column",
+												gap: 12
 											},
-											children: t("targetLabel")
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+													type: "button",
+													onClick: () => {
+														chooseBatchDirectory();
+													},
+													style: filePickerStyle,
+													disabled: busy,
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: filePickerIconStyle,
+															children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BatchIcon, {})
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+															style: {
+																minWidth: 0,
+																flex: 1,
+																display: "flex",
+																flexDirection: "column",
+																gap: 2,
+																textAlign: "left"
+															},
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																style: {
+																	fontSize: 13,
+																	lineHeight: "20px",
+																	fontWeight: 500,
+																	color: "var(--dsw-alias-label-primary)",
+																	overflow: "hidden",
+																	textOverflow: "ellipsis",
+																	whiteSpace: "nowrap"
+																},
+																children: batchPath ?? t("batchChooseDirectory")
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																style: descriptionStyle,
+																children: batchPath === void 0 ? t("batchDirectoryHint") : t("batchDirectorySelected")
+															})]
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: secondaryButtonStyle,
+															children: batchPath === void 0 ? t("browse") : t("change")
+														})
+													]
+												}),
+												batchScan !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													style: batchPanelStyle,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														style: batchSummaryStyle,
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("batchPreflight") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: countBadgeStyle,
+															children: batchScan.entries.length
+														})]
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+														style: batchListStyle,
+														children: batchScan.entries.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+															style: {
+																...batchRowStyle,
+																borderBottom: index === batchScan.entries.length - 1 ? "none" : batchRowStyle.borderBottom
+															},
+															children: [
+																/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+																	...batchStatusDotStyle,
+																	background: entry.status === "error" ? "var(--dsw-alias-state-error-primary)" : entry.conflict ? "var(--dsw-alias-state-warn-label)" : "var(--dsw-alias-state-success-primary)"
+																} }),
+																/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																	style: skillContentStyle,
+																	children: [
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																			style: skillNameRowStyle,
+																			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																				style: skillNameStyle,
+																				children: entry.name
+																			}), entry.conflict && entry.status === "ready" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																				style: batchConflictTagStyle,
+																				children: t("batchConflict")
+																			}) : null]
+																		}),
+																		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			style: skillDescriptionStyle,
+																			children: entry.error ?? entry.description ?? entry.relativePath
+																		}),
+																		entry.warnings?.map((warning) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																			style: batchWarningStyle,
+																			children: warning
+																		}, warning))
+																	]
+																}),
+																entry.conflict && entry.status === "ready" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+																	style: replaceLabelStyle,
+																	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+																		type: "checkbox",
+																		checked: replaceNames.has(entry.name),
+																		onChange: () => toggleReplace(entry.name)
+																	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("batchReplace") })]
+																}) : null
+															]
+														}, entry.id))
+													})]
+												}) : null,
+												batchResults !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													style: batchPanelStyle,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+														style: batchSummaryStyle,
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("batchResultTitle") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: descriptionStyle,
+															children: t("batchResultSummary", {
+																imported: batchResults.filter((entry) => entry.status === "imported").length,
+																replaced: batchResults.filter((entry) => entry.status === "replaced").length,
+																skipped: batchResults.filter((entry) => entry.status === "skipped").length,
+																failed: batchResults.filter((entry) => entry.status === "error").length
+															})
+														})]
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+														style: batchListStyle,
+														children: batchResults.map((entry, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+															style: {
+																...batchResultRowStyle,
+																borderBottom: index === batchResults.length - 1 ? "none" : batchResultRowStyle.borderBottom
+															},
+															children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																style: {
+																	...batchResultBadgeStyle,
+																	color: entry.status === "error" ? "var(--dsw-alias-state-error-primary)" : entry.status === "skipped" ? "var(--dsw-alias-state-warn-label)" : "var(--dsw-alias-state-success-primary)"
+																},
+																children: t(entry.status === "imported" ? "batchStatusImported" : entry.status === "replaced" ? "batchStatusReplaced" : entry.status === "skipped" ? "batchStatusSkipped" : "batchStatusError")
+															}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+																style: skillContentStyle,
+																children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	style: skillNameStyle,
+																	children: entry.name
+																}), entry.message !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+																	style: skillDescriptionStyle,
+																	children: entry.message
+																}) : null]
+															})]
+														}, `${entry.status}:${entry.name}:${index}`))
+													})]
+												}) : null
+											]
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-											value: target,
-											onChange: (event) => setTarget(event.target.value),
-											style: selectStyle,
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: editorDividerStyle }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+											style: fieldStyle,
 											children: [
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "project-agents",
-													disabled: workspace === void 0,
-													children: workspace === void 0 ? t("targetProjectNoWorkspace") : t("targetProjectAgents", { title: workspace.title })
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: fieldLabelStyle,
+													children: t("targetLabel")
 												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "project-dsh",
-													disabled: workspace === void 0,
-													children: workspace === void 0 ? t("targetProjectNoWorkspace") : t("targetProjectDsh", { title: workspace.title })
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+													value: target,
+													onChange: (event) => changeTarget(event.target.value),
+													style: selectStyle,
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+														value: "project-agents",
+														disabled: workspace === void 0,
+														children: workspace === void 0 ? t("targetProjectNoWorkspace") : t("targetProjectAgents", { title: workspace.title })
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+														value: "user",
+														children: t("targetUser")
+													})]
 												}),
-												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-													value: "user",
-													children: t("targetUser")
-												})
+												workspace === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: descriptionStyle,
+													children: t("noWorkspace")
+												}) : null
 											]
 										}),
-										workspace === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											style: descriptionStyle,
-											children: t("noWorkspace")
-										}) : null
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											style: actionStyle,
+											children: [message !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												style: {
+													flex: 1,
+													fontSize: 12,
+													lineHeight: "18px",
+													color: messageError ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-state-success-primary)",
+													wordBreak: "break-all"
+												},
+												children: message
+											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: { flex: 1 } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												disabled: canSubmit,
+												onClick: runPrimaryAction,
+												style: canSubmit ? primaryDisabledStyle : primaryStyle,
+												children: primaryLabel
+											})]
+										})
 									]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									style: {
-										display: "flex",
-										alignItems: "center",
-										gap: 10,
-										marginTop: 12
-									},
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										disabled: canSubmit,
-										onClick: () => {
-											submit();
-										},
-										style: canSubmit ? primaryDisabledStyle : primaryStyle,
-										children: busy ? t("importing") : t("import")
-									}), message !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										style: {
-											fontSize: 12,
-											color: messageError ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-label-secondary)",
-											wordBreak: "break-all"
-										},
-										children: message
-									}) : null]
 								})
 							]
 						})
@@ -682,14 +1088,167 @@ window.__ModuleLoader__.load({
 			color: "var(--dsw-alias-label-primary)",
 			cursor: "pointer"
 		};
-		const controlStyle = {
+		const skillGroupsStyle = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 10,
+			marginTop: 4
+		};
+		const skillGroupCardStyle = {
+			overflow: "hidden",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 12,
+			background: "transparent"
+		};
+		const skillGroupHeaderStyle = {
+			width: "100%",
+			minHeight: 42,
 			padding: "7px 12px",
+			boxSizing: "border-box",
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			borderBottom: "1px solid var(--dsw-alias-border-l2)",
+			borderTop: "none",
+			borderRight: "none",
+			borderLeft: "none",
+			background: "var(--dsw-alias-bg-module-platform)",
+			color: "inherit",
+			font: "inherit",
+			cursor: "pointer",
+			textAlign: "left"
+		};
+		const skillGroupChevronStyle = {
+			flex: "none",
+			width: 18,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			color: "var(--dsw-alias-label-caption)"
+		};
+		const skillGroupIdentityStyle = {
+			flex: 1,
+			minWidth: 0,
+			display: "flex",
+			alignItems: "baseline",
+			gap: 8,
+			flexWrap: "wrap"
+		};
+		const skillGroupNameStyle = {
+			fontSize: 13,
+			lineHeight: "20px",
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-primary)"
+		};
+		const countBadgeStyle = {
+			flex: "none",
+			minWidth: 22,
+			height: 20,
+			padding: "0 6px",
+			boxSizing: "border-box",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: 10,
+			background: "var(--dsw-alias-interactive-bg-hover)",
+			color: "var(--dsw-alias-label-secondary)",
+			fontSize: 11,
+			lineHeight: "16px"
+		};
+		const skillListStyle = {
+			listStyle: "none",
+			margin: 0,
+			padding: "0 12px",
+			display: "flex",
+			flexDirection: "column"
+		};
+		const skillRowStyle = {
+			minHeight: 62,
+			padding: "9px 0",
+			boxSizing: "border-box",
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			borderBottom: "1px solid var(--dsw-alias-border-l2)"
+		};
+		const skillAvatarStyle = {
+			flex: "none",
+			width: 32,
+			height: 32,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: 10,
+			background: "var(--dsw-alias-bg-module-platform)",
+			color: "var(--dsw-alias-label-secondary)",
+			fontSize: 13,
+			lineHeight: "20px",
+			fontWeight: 600
+		};
+		const skillContentStyle = {
+			flex: 1,
+			minWidth: 0,
+			display: "flex",
+			flexDirection: "column",
+			gap: 2
+		};
+		const skillNameRowStyle = {
+			display: "flex",
+			alignItems: "center",
+			gap: 7,
+			minWidth: 0
+		};
+		const skillNameStyle = {
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			fontSize: 13,
+			lineHeight: "20px",
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-primary)"
+		};
+		const skillDescriptionStyle = {
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			fontSize: 12,
+			lineHeight: "18px",
+			color: "var(--dsw-alias-label-tertiary)"
+		};
+		const skillFlagStyle = {
+			flex: "none",
+			padding: "1px 6px",
+			border: "1px solid var(--dsw-alias-border-l3)",
+			borderRadius: 4,
+			fontSize: 10,
+			lineHeight: "14px",
+			color: "var(--dsw-alias-label-secondary)"
+		};
+		const deleteIconButtonStyle = {
+			flex: "none",
+			width: 28,
+			height: 28,
+			padding: 0,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			border: "none",
+			borderRadius: 14,
+			background: "transparent",
+			color: "var(--dsw-alias-label-caption)",
+			cursor: "pointer"
+		};
+		const controlStyle = {
+			boxSizing: "border-box",
+			width: "100%",
+			height: 36,
+			padding: "0 12px",
 			borderRadius: 8,
 			border: "1px solid var(--dsw-alias-border-l2)",
 			background: "var(--dsw-alias-bg-layer-1)",
 			font: "inherit",
-			fontSize: 14,
-			lineHeight: "22px",
+			fontSize: 13,
+			lineHeight: "20px",
 			color: "var(--dsw-alias-label-primary)",
 			outline: "none"
 		};
@@ -705,16 +1264,234 @@ window.__ModuleLoader__.load({
 			backgroundSize: "12px 12px",
 			cursor: "pointer"
 		};
-		const segmentStyle = (active) => ({
-			padding: "4px 14px",
-			borderRadius: 14,
-			border: "1px solid var(--dsw-alias-border-l2)",
+		const entryGridStyle = {
+			display: "grid",
+			gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+			gap: 10,
+			marginTop: 12
+		};
+		const entryButtonStyle = (active) => ({
+			boxSizing: "border-box",
+			position: "relative",
+			minWidth: 0,
+			minHeight: 68,
+			padding: "11px 12px",
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			border: `1px ${active ? "solid" : "dashed"} ${active ? "var(--dsw-alias-border-l3)" : "var(--dsw-alias-border-l2)"}`,
+			borderRadius: 12,
 			background: active ? "var(--dsw-alias-bg-module-platform)" : "transparent",
 			color: active ? "var(--dsw-alias-label-primary)" : "var(--dsw-alias-label-secondary)",
 			font: "inherit",
+			cursor: "pointer",
+			textAlign: "left"
+		});
+		const entryIconStyle = {
+			flex: "none",
+			width: 34,
+			height: 34,
+			borderRadius: 10,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			background: "var(--dsw-alias-interactive-bg-hover)",
+			color: "var(--dsw-alias-label-secondary)"
+		};
+		const entryCopyStyle = {
+			minWidth: 0,
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		};
+		const entryTitleStyle = {
 			fontSize: 13,
+			lineHeight: "20px",
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-primary)"
+		};
+		const entryDescriptionStyle = {
+			fontSize: 11,
+			lineHeight: "16px",
+			color: "var(--dsw-alias-label-tertiary)"
+		};
+		const entryCheckStyle = {
+			position: "absolute",
+			top: 8,
+			right: 8,
+			color: "var(--dsw-alias-state-success-primary)"
+		};
+		const importEditorStyle = {
+			marginTop: 10,
+			padding: "14px 16px",
+			display: "flex",
+			flexDirection: "column",
+			gap: 14,
+			borderRadius: 12,
+			background: "var(--dsw-alias-bg-module-platform)"
+		};
+		const hiddenInputStyle = { display: "none" };
+		const filePickerStyle = {
+			boxSizing: "border-box",
+			width: "100%",
+			minHeight: 62,
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			padding: "9px 10px",
+			border: "1px dashed var(--dsw-alias-border-l3)",
+			borderRadius: 10,
+			background: "transparent",
+			color: "var(--dsw-alias-label-secondary)",
+			font: "inherit",
 			cursor: "pointer"
-		});
+		};
+		const filePickerIconStyle = {
+			...entryIconStyle,
+			width: 36,
+			height: 36
+		};
+		const secondaryButtonStyle = {
+			flex: "none",
+			boxSizing: "border-box",
+			height: 28,
+			padding: "0 10px",
+			display: "inline-flex",
+			alignItems: "center",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 14,
+			color: "var(--dsw-alias-label-primary)",
+			fontSize: 12,
+			lineHeight: "18px"
+		};
+		const previewStyle = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 5,
+			padding: "10px 12px",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 10,
+			background: "var(--dsw-alias-bg-layer-1)",
+			color: "var(--dsw-alias-label-secondary)",
+			fontSize: 12,
+			lineHeight: "18px"
+		};
+		const previewDividerStyle = {
+			height: 1,
+			margin: "2px 0",
+			background: "var(--dsw-alias-border-l2)"
+		};
+		const previewKeyStyle = {
+			display: "inline-block",
+			minWidth: 70,
+			marginRight: 8,
+			color: "var(--dsw-alias-label-tertiary)",
+			fontWeight: 500
+		};
+		const editorDividerStyle = {
+			height: 1,
+			background: "var(--dsw-alias-border-l2)"
+		};
+		const fieldStyle = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			fontSize: 13
+		};
+		const fieldLabelStyle = {
+			fontSize: 12,
+			lineHeight: "18px",
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-secondary)"
+		};
+		const actionStyle = {
+			display: "flex",
+			alignItems: "center",
+			gap: 10,
+			justifyContent: "flex-end"
+		};
+		const batchPanelStyle = {
+			overflow: "hidden",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 10,
+			background: "var(--dsw-alias-bg-layer-1)"
+		};
+		const batchSummaryStyle = {
+			minHeight: 38,
+			boxSizing: "border-box",
+			padding: "7px 10px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: 10,
+			borderBottom: "1px solid var(--dsw-alias-border-l2)",
+			fontSize: 12,
+			lineHeight: "18px",
+			fontWeight: 500,
+			color: "var(--dsw-alias-label-primary)"
+		};
+		const batchListStyle = {
+			listStyle: "none",
+			margin: 0,
+			padding: "0 10px",
+			display: "flex",
+			flexDirection: "column",
+			maxHeight: 320,
+			overflowY: "auto"
+		};
+		const batchRowStyle = {
+			minHeight: 58,
+			padding: "8px 0",
+			display: "flex",
+			alignItems: "center",
+			gap: 9,
+			borderBottom: "1px solid var(--dsw-alias-border-l2)"
+		};
+		const batchResultRowStyle = {
+			minHeight: 48,
+			padding: "7px 0",
+			display: "flex",
+			alignItems: "center",
+			gap: 9,
+			borderBottom: "1px solid var(--dsw-alias-border-l2)"
+		};
+		const batchStatusDotStyle = {
+			flex: "none",
+			width: 8,
+			height: 8,
+			borderRadius: "50%"
+		};
+		const batchConflictTagStyle = {
+			flex: "none",
+			padding: "1px 6px",
+			borderRadius: 4,
+			border: "1px solid var(--dsw-alias-state-warn-label)",
+			color: "var(--dsw-alias-state-warn-label)",
+			fontSize: 10,
+			lineHeight: "14px"
+		};
+		const batchWarningStyle = {
+			fontSize: 11,
+			lineHeight: "16px",
+			color: "var(--dsw-alias-state-warn-label)"
+		};
+		const replaceLabelStyle = {
+			flex: "none",
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 5,
+			fontSize: 11,
+			lineHeight: "16px",
+			color: "var(--dsw-alias-label-secondary)",
+			cursor: "pointer"
+		};
+		const batchResultBadgeStyle = {
+			flex: "none",
+			minWidth: 42,
+			fontSize: 11,
+			lineHeight: "16px",
+			fontWeight: 500
+		};
 		const primaryStyle = {
 			display: "inline-flex",
 			alignItems: "center",
@@ -975,9 +1752,6 @@ window.__ModuleLoader__.load({
 			installedTitle: "已安装技能",
 			refresh: "刷新",
 			installedEmpty: "暂无技能。导入新技能或手动放入技能目录后会自动出现。",
-			sourceAgents: "工作区 .agents/skills",
-			sourceDsh: "工作区 .dsh/skills",
-			sourceUser: "用户技能目录",
 			delete: "删除",
 			deleteConfirm: "确定删除技能 {name} 吗？将删除对应目录下的 SKILL.md 及资源文件。",
 			deleteFailed: "删除失败",
@@ -986,9 +1760,18 @@ window.__ModuleLoader__.load({
 			userOnly: "仅斜杠可用",
 			modelOnly: "仅模型可用",
 			importTitle: "导入技能",
+			importDescription: "选择导入来源，确认技能信息和安装位置后写入。",
 			fileTab: "从文件",
 			urlTab: "从 URL",
+			batchTab: "批量导入",
+			fileEntryDescription: "上传本地 Markdown",
+			urlEntryDescription: "从在线地址获取",
+			batchEntryDescription: "迁移其他 Agent 技能",
 			chooseFile: "选择 Markdown 文件",
+			filePickerHint: "支持 .md 和 .markdown，最大 256 KB",
+			replaceFile: "已读取并校验，可重新选择",
+			browse: "浏览",
+			change: "更换",
 			fileHelp: "SKILL.md 或 <名称>.md，需带 frontmatter（name、description 必填）。选择后先预览，再点击导入。",
 			previewTitle: "文件预览",
 			previewName: "名称",
@@ -1003,11 +1786,29 @@ window.__ModuleLoader__.load({
 			urlLabel: "技能 URL",
 			urlNameLabel: "技能名称",
 			urlNameHelp: "kebab-case；留空则从 URL 自动推导",
+			batchChooseDirectory: "选择 Skills 目录",
+			batchDirectoryHint: "支持 Claude Code、Codex 等标准技能目录",
+			batchDirectorySelected: "已选择目录；扫描前不会写入任何文件",
+			batchPickFailed: "无法选择目录",
+			batchScan: "扫描并校验",
+			batchWorking: "处理中…",
+			batchCommit: "确认导入",
+			batchScanFailed: "扫描失败",
+			batchImportFailed: "批量导入失败",
+			batchPreflight: "扫描结果",
+			batchConflict: "名称重复",
+			batchReplace: "替换",
+			batchConfirm: "将新增 {importing} 个、替换 {replacing} 个、跳过 {skipped} 个技能。确认继续吗？",
+			batchResultTitle: "本次导入结果",
+			batchResultSummary: "新增 {imported} · 替换 {replaced} · 跳过 {skipped} · 失败 {failed}",
+			batchStatusImported: "已导入",
+			batchStatusReplaced: "已替换",
+			batchStatusSkipped: "已跳过",
+			batchStatusError: "失败",
 			targetLabel: "安装到",
-			targetUser: "用户技能目录（~/.dsh/skills）",
-			targetProjectAgents: "当前工作区 {title} 的 .agents/skills",
-			targetProjectDsh: "当前工作区 {title} 的 .dsh/skills",
-			targetProjectNoWorkspace: "项目目录（需先添加工作区）",
+			targetUser: "全局技能（~/.dsh/skills）",
+			targetProjectAgents: "项目技能（{title} · .agents/skills）",
+			targetProjectNoWorkspace: "项目技能（需先添加工作区）",
 			noWorkspace: "未注册工作区：请先在会话页选择/创建工作区，或改用用户技能目录。",
 			import: "导入",
 			importing: "导入中…",
@@ -1028,9 +1829,6 @@ window.__ModuleLoader__.load({
 			installedTitle: "Installed skills",
 			refresh: "Refresh",
 			installedEmpty: "No skills yet. Import one or drop files into a skill directory and they will appear automatically.",
-			sourceAgents: "Workspace .agents/skills",
-			sourceDsh: "Workspace .dsh/skills",
-			sourceUser: "User skill directory",
 			delete: "Delete",
 			deleteConfirm: "Delete the skill {name}? This removes its SKILL.md and resources from that directory.",
 			deleteFailed: "Failed to delete",
@@ -1039,9 +1837,18 @@ window.__ModuleLoader__.load({
 			userOnly: "Slash only",
 			modelOnly: "Model only",
 			importTitle: "Import a skill",
+			importDescription: "Choose a source, review the skill and destination, then import it.",
 			fileTab: "From file",
 			urlTab: "From URL",
+			batchTab: "Batch import",
+			fileEntryDescription: "Upload local Markdown",
+			urlEntryDescription: "Fetch from a web address",
+			batchEntryDescription: "Migrate other agent skills",
 			chooseFile: "Choose a Markdown file",
+			filePickerHint: "Supports .md and .markdown, up to 256 KB",
+			replaceFile: "Read and validated; choose another file if needed",
+			browse: "Browse",
+			change: "Change",
 			fileHelp: "SKILL.md or <name>.md with frontmatter (name and description required). Preview first, then import.",
 			previewTitle: "File preview",
 			previewName: "Name",
@@ -1056,11 +1863,29 @@ window.__ModuleLoader__.load({
 			urlLabel: "Skill URL",
 			urlNameLabel: "Skill name",
 			urlNameHelp: "kebab-case; leave empty to derive from the URL",
+			batchChooseDirectory: "Choose a Skills directory",
+			batchDirectoryHint: "Supports standard Claude Code, Codex, and similar skill roots",
+			batchDirectorySelected: "Directory selected; scanning never writes files",
+			batchPickFailed: "Unable to choose a directory",
+			batchScan: "Scan and validate",
+			batchWorking: "Working…",
+			batchCommit: "Confirm import",
+			batchScanFailed: "Scan failed",
+			batchImportFailed: "Batch import failed",
+			batchPreflight: "Preflight results",
+			batchConflict: "Name conflict",
+			batchReplace: "Replace",
+			batchConfirm: "Add {importing}, replace {replacing}, and skip {skipped} skills. Continue?",
+			batchResultTitle: "Import results",
+			batchResultSummary: "Added {imported} · Replaced {replaced} · Skipped {skipped} · Failed {failed}",
+			batchStatusImported: "Imported",
+			batchStatusReplaced: "Replaced",
+			batchStatusSkipped: "Skipped",
+			batchStatusError: "Failed",
 			targetLabel: "Install into",
-			targetUser: "User skill directory (~/.dsh/skills)",
-			targetProjectAgents: "Workspace {title} .agents/skills",
-			targetProjectDsh: "Workspace {title} .dsh/skills",
-			targetProjectNoWorkspace: "Project directory (add a workspace first)",
+			targetUser: "Global skills (~/.dsh/skills)",
+			targetProjectAgents: "Project skills ({title} · .agents/skills)",
+			targetProjectNoWorkspace: "Project skills (add a workspace first)",
 			noWorkspace: "No registered workspace: create/select one in a session, or use the user skill directory.",
 			import: "Import",
 			importing: "Importing…",
@@ -1081,7 +1906,9 @@ window.__ModuleLoader__.load({
 			list: "/skill-importer/list",
 			import: "/skill-importer/import",
 			importUrl: "/skill-importer/import-url",
-			delete: "/skill-importer/delete"
+			delete: "/skill-importer/delete",
+			batchScan: "/skill-importer/batch/scan",
+			batchCommit: "/skill-importer/batch/commit"
 		};
 		/** Fetch one route and unwrap the JSON envelope; throws on transport/HTTP errors. */
 		async function call(path, body) {
@@ -1123,7 +1950,8 @@ window.__ModuleLoader__.load({
 					console.error("[dsh-skill-importer] listener failed:", error);
 				}
 			};
-			const skillsApi = ctx.get("connection").api.skills;
+			const connection = ctx.get("connection");
+			const skillsApi = connection.api.skills;
 			skillsApi.list.bind(skillsApi);
 			skillsApi.list = ((_request, _signal) => {
 				return Promise.reject(/* @__PURE__ */ new Error("skill group hidden: use the composer skill picker or /skills"));
@@ -1190,6 +2018,13 @@ window.__ModuleLoader__.load({
 			const deleteSkill = async (request) => {
 				return (await call(ROUTES.delete, request)).removed;
 			};
+			const pickDirectory = async () => {
+				const response = await connection.api.host.pickDirectory({});
+				if (!response.result.ok) throw new Error(response.result.error.message);
+				return response.result.value.path;
+			};
+			const scanBatch = (request) => call(ROUTES.batchScan, request);
+			const commitBatch = (request) => call(ROUTES.batchCommit, request);
 			const face = () => ({
 				hooks: { skills: {
 					getSnapshot: () => catalog,
@@ -1204,7 +2039,10 @@ window.__ModuleLoader__.load({
 					refreshSkills,
 					importSkill,
 					importUrl,
-					deleteSkill
+					deleteSkill,
+					pickDirectory,
+					scanBatch,
+					commitBatch
 				}
 			});
 			ctx.slots.inject("settings.section", () => ctx.slots.register({