dsh-skill-importer 0.1.0

package/lib/client.js

@@ -0,0 +1,1235 @@
+window.__ModuleLoader__.load({
+	id: "dsh-skill-importer",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		//#region src/frontmatter.ts
+		/** Kebab-case name rule shared with `dsh-skill` (`^[a-z0-9]+(?:-[a-z0-9]+)*$`). */
+		const KEBAB_CASE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+		/** True when the name satisfies the harness skill-name rule. */
+		function isValidSkillName(name) {
+			return KEBAB_CASE.test(name);
+		}
+		const BOOLEAN_TRUE = /* @__PURE__ */ new Set([
+			"true",
+			"yes",
+			"on",
+			"1"
+		]);
+		const BOOLEAN_FALSE = /* @__PURE__ */ new Set([
+			"false",
+			"no",
+			"off",
+			"0"
+		]);
+		/** Parse one frontmatter scalar: quoted strings, booleans, or plain text. */
+		function parseScalar(raw) {
+			const value = raw.trim();
+			if (value.length === 0) return void 0;
+			const lower = value.toLowerCase();
+			if (BOOLEAN_TRUE.has(lower)) return true;
+			if (BOOLEAN_FALSE.has(lower)) return false;
+			if (value.startsWith("\"") && value.endsWith("\"") && value.length >= 2 || value.startsWith("'") && value.endsWith("'") && value.length >= 2) return value.slice(1, -1);
+			return value;
+		}
+		/**
+		* Parse a skill Markdown file's frontmatter block.
+		* @param text - full file text.
+		* @returns parsed frontmatter and body; a file without a leading `---` block
+		*   yields an empty frontmatter with the whole text as body.
+		*/
+		function parseSkillFile(text) {
+			const frontmatter = {};
+			if (!text.startsWith("---\n")) return {
+				frontmatter,
+				body: text
+			};
+			const end = text.indexOf("\n---", 4);
+			if (end < 0) return {
+				frontmatter,
+				body: text
+			};
+			const block = text.slice(4, end);
+			const body = text.slice(end + 4).replace(/^\n/, "");
+			for (const line of block.split("\n")) {
+				const colon = line.indexOf(":");
+				if (colon <= 0) continue;
+				const key = line.slice(0, colon).trim();
+				const value = parseScalar(line.slice(colon + 1));
+				if (value === void 0) continue;
+				switch (key) {
+					case "name":
+						if (typeof value === "string") frontmatter.name = value;
+						break;
+					case "description":
+						if (typeof value === "string") frontmatter.description = value;
+						break;
+					case "whenToUse":
+						if (typeof value === "string") frontmatter.whenToUse = value;
+						break;
+					case "disable-model-invocation":
+						if (typeof value === "boolean") frontmatter.disableModelInvocation = value;
+						break;
+					case "user-invocable": if (typeof value === "boolean") frontmatter.userInvocable = value;
+				}
+			}
+			return {
+				frontmatter,
+				body
+			};
+		}
+		/** Why a parsed file cannot be imported as a skill (or undefined when it can). */
+		function validateSkillFile(text) {
+			const { frontmatter } = parseSkillFile(text);
+			if (frontmatter.name === void 0 || frontmatter.name.length === 0) return "frontmatter 缺少 name 字段";
+			if (!isValidSkillName(frontmatter.name)) return "name 必须是 kebab-case（小写字母、数字、短横线）";
+			if (frontmatter.description === void 0 || frontmatter.description.length === 0) return "frontmatter 缺少 description 字段";
+		}
+		//#endregion
+		//#region src/client/name.ts
+		/**
+		* URL-derived kebab-case skill name (pure, browser-safe).
+		*/
+		/** Kebab-case name for a URL import (derived from the URL's last path segment). */
+		function nameFromUrl(url) {
+			return ((url.split(/[?#]/)[0]?.replace(/\/+$/, "") ?? "").split("/").filter(Boolean).pop() ?? "skill").replace(/\.md$/i, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() || "skill";
+		}
+		//#endregion
+		//#region src/client/SkillImporterSection.tsx
+		/**
+		* Skill importer settings section, styled after the harness's General
+		* settings rows: one Setting-Cell per block (title + control, hairline
+		* separator), design tokens throughout, full zh/en copy.
+		*
+		* Rows: entry-points description · installed list · file/URL import · target
+		* directory · import action. Pure presentation — all data and actions arrive
+		* through the four props shares.
+		*/
+		const MAX_FILE_BYTES = 262144;
+		/** Read a picked file's text (browser-local; nothing crosses the wire except the import itself). */
+		function readFileText(file) {
+			return new Promise((resolve, reject) => {
+				const reader = new FileReader();
+				reader.onload = () => resolve(String(reader.result ?? ""));
+				reader.onerror = () => reject(/* @__PURE__ */ new Error("FileReader failed"));
+				reader.readAsText(file);
+			});
+		}
+		/** The settings section's page body. */
+		function SkillImporterSection({ t, useSkills, useWorkspaces, actions }) {
+			const skills = useSkills((value) => value);
+			const workspaces = useWorkspaces((value) => value);
+			const workspace = (0, react.useMemo)(() => workspaces.items.find((item) => item.workspaceId === workspaces.recentWorkspaceId) ?? workspaces.items[0], [workspaces.items, workspaces.recentWorkspaceId]);
+			const [listState, setListState] = (0, react.useState)("idle");
+			const [listError, setListError] = (0, react.useState)();
+			const [listEpoch, setListEpoch] = (0, react.useState)(0);
+			(0, react.useEffect)(() => {
+				let cancelled = false;
+				setListState("loading");
+				actions.refreshSkills().then(() => {
+					if (!cancelled) setListState("idle");
+				}, (error) => {
+					if (!cancelled) {
+						setListState("error");
+						setListError(String(error));
+					}
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, [listEpoch, actions]);
+			const [mode, setMode] = (0, react.useState)("file");
+			const [target, setTarget] = (0, react.useState)("project-agents");
+			const [fileDraft, setFileDraft] = (0, react.useState)();
+			const [fileError, setFileError] = (0, react.useState)();
+			const [url, setUrl] = (0, react.useState)("");
+			const [urlName, setUrlName] = (0, react.useState)("");
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [message, setMessage] = (0, react.useState)();
+			const [messageError, setMessageError] = (0, react.useState)(false);
+			const fileInput = (0, react.useRef)(null);
+			const onFilePicked = async (file) => {
+				setFileDraft(void 0);
+				setFileError(void 0);
+				if (file === void 0) return;
+				if (file.size > MAX_FILE_BYTES) {
+					setFileError(t("fileTooLarge"));
+					return;
+				}
+				let text;
+				try {
+					text = await readFileText(file);
+				} catch (error) {
+					setFileError(`${t("unreadableFile")}: ${String(error)}`);
+					return;
+				}
+				const problem = validateSkillFile(text);
+				if (problem !== void 0) {
+					setFileError(problem);
+					return;
+				}
+				const { frontmatter } = parseSkillFile(text);
+				setFileDraft({
+					fileName: file.name,
+					text,
+					name: frontmatter.name ?? "",
+					description: frontmatter.description ?? "",
+					whenToUse: frontmatter.whenToUse,
+					userInvocable: frontmatter.userInvocable !== false,
+					modelInvocable: frontmatter.disableModelInvocation !== true
+				});
+			};
+			const effectiveUrlName = urlName.trim() || nameFromUrl(url);
+			const pollForSkill = (name, attemptsLeft) => {
+				if (attemptsLeft <= 0) return;
+				window.setTimeout(() => {
+					actions.refreshSkills().then((rows) => {
+						if (!rows.some((skill) => skill.name === name)) pollForSkill(name, attemptsLeft - 1);
+					}, () => pollForSkill(name, attemptsLeft - 1));
+				}, 2e3);
+			};
+			const removeSkill = async (skill) => {
+				if (!window.confirm(t("deleteConfirm", { name: skill.name }))) return;
+				setBusy(true);
+				setMessage(void 0);
+				setMessageError(false);
+				try {
+					if (await actions.deleteSkill({
+						name: skill.name,
+						source: skill.source,
+						workspacePath: workspace?.path
+					})) setMessage(t("deleted"));
+					setListEpoch((epoch) => epoch + 1);
+				} catch (error) {
+					setMessageError(true);
+					setMessage(`${t("deleteFailed")}：${String(error)}`);
+				} finally {
+					setBusy(false);
+				}
+			};
+			const submit = async () => {
+				setBusy(true);
+				setMessage(void 0);
+				setMessageError(false);
+				try {
+					let path;
+					if (mode === "file") {
+						if (fileDraft === void 0) return;
+						path = await actions.importSkill({
+							name: fileDraft.name,
+							target,
+							content: fileDraft.text,
+							workspacePath: workspace?.path
+						});
+						pollForSkill(fileDraft.name, 10);
+					} else {
+						path = await actions.importUrl({
+							name: effectiveUrlName,
+							target,
+							url: url.trim(),
+							workspacePath: workspace?.path
+						});
+						pollForSkill(effectiveUrlName, 10);
+					}
+					setMessage(`${t("imported")}${path}`);
+					setFileDraft(void 0);
+					setFileError(void 0);
+					if (fileInput.current !== null) fileInput.current.value = "";
+					setUrl("");
+					setUrlName("");
+					setListEpoch((epoch) => epoch + 1);
+				} catch (error) {
+					setMessageError(true);
+					setMessage(`${t("importFailed")}：${String(error)}`);
+				} finally {
+					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 flags = (skill) => {
+				if (!skill.modelInvocable && skill.userInvocable) return t("userOnly");
+				if (skill.modelInvocable && !skill.userInvocable) return t("modelOnly");
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					width: "100%"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: rowStyle$1,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: rowTextStyle,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: titleStyle,
+								children: t("entryTitle")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: descriptionStyle,
+								children: t("entryDescription")
+							})]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: rowStyle$1,
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 8
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									style: {
+										...titleStyle,
+										flex: 1
+									},
+									children: t("installedTitle")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									onClick: () => setListEpoch((epoch) => epoch + 1),
+									style: pillStyle,
+									children: listState === "loading" ? "…" : t("refresh")
+								})]
+							}),
+							listState === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									...descriptionStyle,
+									color: "var(--dsw-alias-state-error-primary)"
+								},
+								children: [
+									t("installedFailed"),
+									": ",
+									listError
+								]
+							}) : null,
+							listState === "idle" && skills.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: descriptionStyle,
+								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) => {
+									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", {
+											style: {
+												...descriptionStyle,
+												fontWeight: 600,
+												textTransform: "uppercase",
+												letterSpacing: "0.04em",
+												marginTop: 8
+											},
+											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) => {
+												const flag = flags(skill);
+												return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+													style: {
+														display: "flex",
+														alignItems: "center",
+														gap: 8,
+														padding: "6px 0"
+													},
+													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: flag
+																}) : null
+															]
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: {
+																fontSize: 13,
+																color: "var(--dsw-alias-label-secondary)"
+															},
+															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")
+													})]
+												}, skill.source + ":" + skill.name);
+											})
+										})]
+									}, source);
+								})
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: rowStyle$1,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: rowTextStyle,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									style: titleStyle,
+									children: t("importTitle")
+								}),
+								/* @__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
+									},
+									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.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: {
+												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)"
+											},
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: {
+														fontWeight: 600,
+														color: "var(--dsw-alias-label-primary)"
+													},
+													children: t("previewTitle")
+												}),
+												/* @__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 },
+													children: [
+														fileDraft.fileName,
+														" · ",
+														t("previewOk")
+													]
+												})
+											]
+										}) : 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", {
+											style: {
+												fontWeight: 600,
+												color: "var(--dsw-alias-label-primary)"
+											},
+											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", {
+											style: {
+												fontWeight: 600,
+												color: "var(--dsw-alias-label-primary)"
+											},
+											children: t("targetLabel")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+											value: target,
+											onChange: (event) => setTarget(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: "project-dsh",
+													disabled: workspace === void 0,
+													children: workspace === void 0 ? t("targetProjectNoWorkspace") : t("targetProjectDsh", { title: workspace.title })
+												}),
+												/* @__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
+									]
+								}),
+								/* @__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]
+								})
+							]
+						})
+					})
+				]
+			});
+		}
+		const rowStyle$1 = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8,
+			padding: "16px 0",
+			borderBottom: "1px solid var(--dsw-alias-border-l2)"
+		};
+		const rowTextStyle = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 4,
+			minWidth: 0
+		};
+		const titleStyle = {
+			fontSize: 14,
+			fontWeight: 600,
+			lineHeight: "22px",
+			color: "var(--dsw-alias-label-primary)"
+		};
+		const descriptionStyle = {
+			fontSize: 12,
+			lineHeight: "18px",
+			color: "var(--dsw-alias-label-caption)"
+		};
+		const pillStyle = {
+			display: "inline-flex",
+			alignItems: "center",
+			height: 28,
+			padding: "0 12px",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 14,
+			background: "transparent",
+			font: "inherit",
+			fontSize: 13,
+			color: "var(--dsw-alias-label-primary)",
+			cursor: "pointer"
+		};
+		const controlStyle = {
+			padding: "7px 12px",
+			borderRadius: 8,
+			border: "1px solid var(--dsw-alias-border-l2)",
+			background: "var(--dsw-alias-bg-layer-1)",
+			font: "inherit",
+			fontSize: 14,
+			lineHeight: "22px",
+			color: "var(--dsw-alias-label-primary)",
+			outline: "none"
+		};
+		/** Select variant: replace the OS arrow with the shared 12px chevron inset
+		* (same treatment as the composer chips / models page selects). */
+		const selectStyle = {
+			...controlStyle,
+			appearance: "none",
+			paddingRight: 32,
+			backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27 fill=%27none%27%3E%3Cpath d=%27M3 4.5L6 7.5L9 4.5%27 stroke=%27%2381858C%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E\")",
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "right 12px center",
+			backgroundSize: "12px 12px",
+			cursor: "pointer"
+		};
+		const segmentStyle = (active) => ({
+			padding: "4px 14px",
+			borderRadius: 14,
+			border: "1px solid var(--dsw-alias-border-l2)",
+			background: active ? "var(--dsw-alias-bg-module-platform)" : "transparent",
+			color: active ? "var(--dsw-alias-label-primary)" : "var(--dsw-alias-label-secondary)",
+			font: "inherit",
+			fontSize: 13,
+			cursor: "pointer"
+		});
+		const primaryStyle = {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			height: 36,
+			padding: "0 14px",
+			border: "none",
+			borderRadius: 18,
+			background: "var(--dsw-alias-button-primary-fill)",
+			color: "var(--dsw-alias-label-primary-foreground)",
+			font: "inherit",
+			fontSize: 14,
+			lineHeight: "22px",
+			cursor: "pointer"
+		};
+		/** Disabled import: the action is unavailable until input exists, so the
+		* button visibly greys out (matches the config pages' disabled controls). */
+		const primaryDisabledStyle = {
+			...primaryStyle,
+			opacity: .6,
+			cursor: "default"
+		};
+		//#endregion
+		//#region src/client/SkillsPicker.tsx
+		/**
+		* Composer skill picker: a compact pill trigger in the composer's tool row
+		* (`conversation.input.left`, right after the resident chrome), styled like
+		* the permission (access-mode) select beside it. Opens a top-anchored panel
+		* with a name-filter search box; each row shows a first-letter avatar and
+		* the bare skill name (no leading `/`). Picking a skill prefixes the draft
+		* with `/name ` — the native text gesture — highlighted via the plugin's
+		* lexicon contribution.
+		*/
+		/** One row of the composer skill picker. */
+		function SkillsPicker({ t, useSkills, useInput, inputActions, actions }) {
+			const skills = useSkills((value) => value);
+			const input = useInput((value) => value.draft);
+			const [open, setOpen] = (0, react.useState)(false);
+			const [query, setQuery] = (0, react.useState)("");
+			const rootRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				actions.refreshSkills().catch(() => {});
+			}, [actions]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const onDown = (event) => {
+					if (rootRef.current !== null && !rootRef.current.contains(event.target)) setOpen(false);
+				};
+				document.addEventListener("mousedown", onDown);
+				return () => document.removeEventListener("mousedown", onDown);
+			}, [open]);
+			(0, react.useEffect)(() => {
+				if (open) setQuery("");
+			}, [open]);
+			const usable = skills.filter((skill) => skill.userInvocable);
+			if (usable.length === 0) return null;
+			const filtered = query.trim().length === 0 ? usable : usable.filter((skill) => skill.name.toLowerCase().includes(query.trim().toLowerCase()));
+			const onSelect = (name) => {
+				setOpen(false);
+				inputActions.setDraft(`/${name} ${input}`);
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: rootRef,
+				style: { position: "relative" },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					"aria-label": t("pickerLabel"),
+					"aria-expanded": open,
+					onClick: () => setOpen((value) => !value),
+					style: triggerStyle,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: triggerIconStyle,
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChecklistOutline14, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: triggerLabelStyle,
+							children: t("pickerPlaceholder")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								...chevronStyle,
+								transform: open ? "rotate(180deg)" : void 0
+							},
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, {})
+						})
+					]
+				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: panelStyle,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							autoFocus: true,
+							type: "text",
+							value: query,
+							onChange: (event) => setQuery(event.target.value),
+							placeholder: t("pickerSearchPlaceholder"),
+							style: searchStyle
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+							style: listStyle,
+							children: filtered.map((skill) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								onClick: () => onSelect(skill.name),
+								style: rowStyle,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: avatarStyle,
+									"aria-hidden": "true",
+									children: skill.name.charAt(0).toUpperCase()
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: rowLabelStyle,
+									children: skill.name
+								})]
+							}) }, skill.name))
+						}),
+						filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: emptyStyle,
+							children: t("pickerEmpty")
+						}) : null
+					]
+				}) : null]
+			});
+		}
+		const triggerStyle = {
+			minWidth: 0,
+			maxWidth: 220,
+			height: 28,
+			color: "var(--dsw-alias-label-secondary)",
+			cursor: "pointer",
+			background: "transparent",
+			border: "none",
+			borderRadius: 24,
+			outline: "none",
+			alignItems: "center",
+			gap: 4,
+			padding: "0 4px 0 8px",
+			fontSize: 13,
+			fontWeight: 500,
+			lineHeight: "20px",
+			display: "inline-flex"
+		};
+		const triggerIconStyle = {
+			flex: "none",
+			display: "inline-flex"
+		};
+		const triggerLabelStyle = {
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			minWidth: 0,
+			overflow: "hidden"
+		};
+		const chevronStyle = {
+			color: "var(--dsw-alias-label-caption)",
+			flex: "none",
+			transition: "transform .12s",
+			display: "inline-flex"
+		};
+		const panelStyle = {
+			position: "absolute",
+			bottom: "calc(100% + 8px)",
+			left: 0,
+			zIndex: 100,
+			boxSizing: "border-box",
+			width: 264,
+			maxHeight: 320,
+			display: "flex",
+			flexDirection: "column",
+			gap: 4,
+			padding: 8,
+			border: "1px solid var(--dsw-alias-border-inverted)",
+			borderRadius: 12,
+			background: "var(--dsw-specific-menu)",
+			boxShadow: "var(--dsw-shadow-lv3)",
+			color: "var(--dsw-alias-label-secondary)",
+			fontSize: 13,
+			lineHeight: "20px"
+		};
+		const searchStyle = {
+			padding: "6px 10px",
+			borderRadius: 8,
+			border: "1px solid var(--dsw-alias-border-l2)",
+			background: "var(--dsw-alias-bg-layer-1)",
+			font: "inherit",
+			fontSize: 13,
+			color: "var(--dsw-alias-label-primary)",
+			outline: "none"
+		};
+		const listStyle = {
+			listStyle: "none",
+			margin: 0,
+			padding: 0,
+			display: "flex",
+			flexDirection: "column",
+			overflowY: "auto",
+			maxHeight: 260
+		};
+		const rowStyle = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			width: "100%",
+			padding: "5px 8px",
+			border: "none",
+			borderRadius: 8,
+			background: "transparent",
+			font: "inherit",
+			fontSize: 13,
+			color: "var(--dsw-alias-label-primary)",
+			cursor: "pointer",
+			textAlign: "left"
+		};
+		const avatarStyle = {
+			flex: "none",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: 24,
+			height: 24,
+			borderRadius: 999,
+			background: "var(--dsw-alias-interactive-bg-hover)",
+			color: "var(--dsw-alias-label-secondary)",
+			fontSize: 12,
+			fontWeight: 600
+		};
+		const rowLabelStyle = {
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			minWidth: 0,
+			overflow: "hidden"
+		};
+		const emptyStyle = {
+			padding: "8px 10px",
+			fontSize: 12,
+			color: "var(--dsw-alias-label-caption)"
+		};
+		//#endregion
+		//#region src/client/locales.ts
+		/**
+		* Locale dictionaries for the skill importer settings section.
+		*
+		* Product copy is Chinese; English is the fallback dictionary.
+		* The key-set source of truth is the zh dictionary (`keyof typeof zh`),
+		* matching the locale contract's namespace-key union shape.
+		*/
+		/** Dictionary namespace owned by this plugin. */
+		const NS = "skills.importer";
+		/** Simplified Chinese dictionary (the key-set source of truth). */
+		const zh = {
+			nav: "技能",
+			pickerLabel: "技能",
+			pickerPlaceholder: "技能",
+			pickerSearchPlaceholder: "筛选技能…",
+			pickerEmpty: "没有匹配的技能",
+			commandDescription: "选择技能：弹出技能列表，选中后填入 /<名称>",
+			entryTitle: "技能入口",
+			entryDescription: "通过输入框工具行的技能下拉或 /skills 命令选择技能；也可直接输入 /<名称>。选中的技能会高亮并注入指令。",
+			installedTitle: "已安装技能",
+			refresh: "刷新",
+			installedEmpty: "暂无技能。导入新技能或手动放入技能目录后会自动出现。",
+			sourceAgents: "工作区 .agents/skills",
+			sourceDsh: "工作区 .dsh/skills",
+			sourceUser: "用户技能目录",
+			delete: "删除",
+			deleteConfirm: "确定删除技能 {name} 吗？将删除对应目录下的 SKILL.md 及资源文件。",
+			deleteFailed: "删除失败",
+			deleted: "已删除。",
+			installedFailed: "无法读取技能列表",
+			userOnly: "仅斜杠可用",
+			modelOnly: "仅模型可用",
+			importTitle: "导入技能",
+			fileTab: "从文件",
+			urlTab: "从 URL",
+			chooseFile: "选择 Markdown 文件",
+			fileHelp: "SKILL.md 或 <名称>.md，需带 frontmatter（name、description 必填）。选择后先预览，再点击导入。",
+			previewTitle: "文件预览",
+			previewName: "名称",
+			previewDescription: "描述",
+			previewWhenToUse: "适用场景",
+			previewMissingName: "frontmatter 缺少 name 字段",
+			previewInvalidName: "name 必须是 kebab-case（小写字母、数字、短横线）",
+			previewMissingDescription: "frontmatter 缺少 description 字段",
+			previewOk: "校验通过，可以导入",
+			fileTooLarge: "文件过大（超过 256 KB，请精简后重试）",
+			unreadableFile: "无法读取文件",
+			urlLabel: "技能 URL",
+			urlNameLabel: "技能名称",
+			urlNameHelp: "kebab-case；留空则从 URL 自动推导",
+			targetLabel: "安装到",
+			targetUser: "用户技能目录（~/.dsh/skills）",
+			targetProjectAgents: "当前工作区 {title} 的 .agents/skills",
+			targetProjectDsh: "当前工作区 {title} 的 .dsh/skills",
+			targetProjectNoWorkspace: "项目目录（需先添加工作区）",
+			noWorkspace: "未注册工作区：请先在会话页选择/创建工作区，或改用用户技能目录。",
+			import: "导入",
+			importing: "导入中…",
+			imported: "已写入：",
+			importFailed: "导入失败",
+			hostUnreachable: "无法连接 dsh 服务（插件路由未生效）。请确认插件已安装，并重启 dsh web 后刷新页面。"
+		};
+		/** English dictionary, checked complete against the zh key set. */
+		const en = {
+			nav: "Skills",
+			pickerLabel: "Skills",
+			pickerPlaceholder: "Skills",
+			pickerSearchPlaceholder: "Filter skills…",
+			pickerEmpty: "No matching skills",
+			commandDescription: "Pick a skill: opens a popup list; selecting fills /<name>",
+			entryTitle: "Skill entry points",
+			entryDescription: "Pick a skill from the composer tool-row dropdown or the /skills command; or type /<name> directly. The picked skill is highlighted and its instructions are injected.",
+			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",
+			deleted: "Deleted.",
+			installedFailed: "Unable to read the skill list",
+			userOnly: "Slash only",
+			modelOnly: "Model only",
+			importTitle: "Import a skill",
+			fileTab: "From file",
+			urlTab: "From URL",
+			chooseFile: "Choose a Markdown file",
+			fileHelp: "SKILL.md or <name>.md with frontmatter (name and description required). Preview first, then import.",
+			previewTitle: "File preview",
+			previewName: "Name",
+			previewDescription: "Description",
+			previewWhenToUse: "When to use",
+			previewMissingName: "frontmatter is missing the name field",
+			previewInvalidName: "name must be kebab-case (lowercase letters, digits, hyphens)",
+			previewMissingDescription: "frontmatter is missing the description field",
+			previewOk: "Valid, ready to import",
+			fileTooLarge: "File too large (over 256 KB; trim it and retry)",
+			unreadableFile: "Unable to read the file",
+			urlLabel: "Skill URL",
+			urlNameLabel: "Skill name",
+			urlNameHelp: "kebab-case; leave empty to derive from the URL",
+			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)",
+			noWorkspace: "No registered workspace: create/select one in a session, or use the user skill directory.",
+			import: "Import",
+			importing: "Importing…",
+			imported: "Written to: ",
+			importFailed: "Import failed",
+			hostUnreachable: "Cannot reach the dsh service (plugin routes are not active). Make sure the plugin is installed, restart dsh web, and refresh the page."
+		};
+		//#endregion
+		//#region src/client/index.ts
+		/** Required services (cordis fiber inject). */
+		const inject = [
+			"slots",
+			"locale",
+			"connection"
+		];
+		/** Same-origin route literals (mirrors the host half's ROUTES). */
+		const ROUTES = {
+			list: "/skill-importer/list",
+			import: "/skill-importer/import",
+			importUrl: "/skill-importer/import-url",
+			delete: "/skill-importer/delete"
+		};
+		/** Fetch one route and unwrap the JSON envelope; throws on transport/HTTP errors. */
+		async function call(path, body) {
+			let response;
+			try {
+				response = await fetch(path, body === void 0 ? void 0 : {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify(body)
+				});
+			} catch (error) {
+				throw new Error(`无法连接 dsh 服务（${path}）：${error instanceof Error ? error.message : String(error)}`);
+			}
+			if (!response.ok) {
+				let detail = "";
+				try {
+					detail = (await response.json()).error ?? "";
+				} catch {}
+				throw new Error(`dsh 服务返回 ${response.status}${detail ? `：${detail}` : ""}`);
+			}
+			return await response.json();
+		}
+		/**
+		* Client plugin body: register the section and its dictionaries.
+		* @param ctx - the browser plugin context.
+		*/
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "dsh-skill-importer: dictionaries");
+			const t = ctx.locale.bind(NS);
+			let catalog = [];
+			const listeners = /* @__PURE__ */ new Set();
+			const notify = () => {
+				for (const listener of [...listeners]) try {
+					listener();
+				} catch (error) {
+					console.error("[dsh-skill-importer] listener failed:", error);
+				}
+			};
+			const skillsApi = ctx.get("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"));
+			});
+			const usableNames = () => catalog.filter((skill) => skill.userInvocable).map((skill) => skill.name);
+			ctx.effect(() => {
+				return ctx.get("inputTriggers").registerSource({
+					trigger: "/",
+					name: "skill-importer",
+					order: 99,
+					async candidates() {
+						throw new Error("skill group hidden: use the composer skill picker");
+					},
+					onPick() {},
+					warm() {},
+					lexicon() {
+						return usableNames();
+					},
+					subscribeLexicon(_session, listener) {
+						listeners.add(listener);
+						return () => {
+							listeners.delete(listener);
+						};
+					}
+				});
+			}, "dsh-skill-importer: lexicon source");
+			const commandUi = ctx.get("commandUi");
+			const sessions = ctx.get("sessions");
+			const conversation = ctx.get("conversation");
+			if (commandUi !== void 0 && sessions !== void 0 && conversation !== void 0) ctx.effect(() => {
+				return commandUi.register({
+					name: "skills",
+					description: t("commandDescription"),
+					available: () => true,
+					ui: {
+						kind: "popupSelect",
+						async options(_session, _signal) {
+							return catalog.filter((skill) => skill.userInvocable).map((skill) => ({
+								id: skill.name,
+								label: skill.name
+							}));
+						},
+						onSelect(option, session) {
+							const actx = sessions.scope(session.sessionId);
+							if (actx === void 0) return;
+							const input = conversation.input.for(actx);
+							const rest = input.state.getSnapshot().draft.replace(/^\s*\/[a-zA-Z][a-zA-Z0-9-]*\s*/, "");
+							input.setDraft(`/${option.id} ${rest}`);
+						}
+					}
+				});
+			}, "dsh-skill-importer: /skills popupSelect command");
+			const refreshSkills = async () => {
+				catalog = (await call(ROUTES.list)).skills;
+				notify();
+				return catalog;
+			};
+			const importSkill = async (request) => {
+				return (await call(ROUTES.import, request)).path;
+			};
+			const importUrl = async (request) => {
+				return (await call(ROUTES.importUrl, request)).path;
+			};
+			const deleteSkill = async (request) => {
+				return (await call(ROUTES.delete, request)).removed;
+			};
+			const face = () => ({
+				hooks: { skills: {
+					getSnapshot: () => catalog,
+					subscribe: (listener) => {
+						listeners.add(listener);
+						return () => {
+							listeners.delete(listener);
+						};
+					}
+				} },
+				actions: {
+					refreshSkills,
+					importSkill,
+					importUrl,
+					deleteSkill
+				}
+			});
+			ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: "skills",
+				order: 30,
+				label: () => t("nav"),
+				locale: NS,
+				inject: face,
+				children: {}
+			}, SkillImporterSection));
+			ctx.slots.inject("conversation.input.left", () => ctx.slots.register({
+				name: "conversation.input.left",
+				id: "skills-picker",
+				order: 10,
+				locale: NS,
+				inject: face,
+				children: {}
+			}, SkillsPicker));
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map