dsh-comfyui 0.3.0-beta.5 → 0.4.0

package/client/client.js

@@ -13,7 +13,7 @@ window.__ModuleLoader__.load({
 			baseUrl: "服务器地址",
 			baseUrlHint: "ComfyUI 的 HTTP 地址（默认 http://127.0.0.1:8188）。",
 			apiKeyEnv: "API Key 环境变量名",
-			apiKeyEnvHint: "凭据存储或环境变量中的密钥名（默认 COMFYUI_API_KEY），远程服务通常需要。",
+			apiKeyEnvHint: "密钥名：环境变量或凭据存储（默认 COMFYUI_API_KEY）。",
 			hasApiKey: "已配置 API Key",
 			noApiKey: "未配置 API Key（本地服务通常不需要）",
 			save: "保存",
@@ -25,14 +25,16 @@ window.__ModuleLoader__.load({
 			testFail: "连接失败：{message}",
 			configNotWritable: "设置服务不可用，请通过 cordis.yml 修改配置。",
 			mediaHost: "媒体访问地址",
-			mediaHostHint: "生成图片/媒体在聊天中使用的完整地址（如 http://192.168.1.5:3080）。留空时自动使用浏览器访问本服务器的地址；内网或反向代理下若图片不显示，请在此填写你访问本页面所用的地址。",
+			mediaHostHint: "媒体在聊天中显示的完整地址（如 http://192.168.1.5:3080）。留空自动检测；图片不显示时填你访问本页的地址。",
 			comfyuiDirs: "ComfyUI 目录",
-			comfyuiDirsHint: "本机 ComfyUI 安装目录，可添加多个（目录映射 / 多实例 / 便携版）。Agent 会据此直接定位你的 ComfyUI 文件（models、工作流、TTS-Audio-Suite 音色库等），无需再向你询问。",
+			comfyuiDirsHint: "本机 ComfyUI 安装目录（可多个，支持映射/多实例/便携版）。Agent 据此定位 models、工作流、音色库等文件。",
 			comfyuiDirAdd: "＋ 添加目录",
 			comfyuiDirRemove: "移除该目录",
 			comfyuiDirPlaceholder: "如 D:\\ComfyUI",
+			skillsDir: "技能包目录",
+			skillsDirHint: "工作流技能包（SKILL.md 与参考文档）目录。留空 = 数据目录下 skills/；填绝对路径可放到别的盘或同步盘。改后需手动搬移已有目录。当前实际使用：{current}",
 			language: "界面语言",
-			languageHint: "切换插件界面语言（中文 / English）。切换后页面会自动刷新。",
+			languageHint: "界面语言，切换后页面自动刷新。",
 			cardGenerating: "ComfyUI 生成中…",
 			cardBackground: "后台任务",
 			cardBackgroundDone: "已完成",
@@ -49,6 +51,7 @@ window.__ModuleLoader__.load({
 			cardMode: "模式",
 			cardListed: "已列出 {runs} 个运行工作流，{graphs} 个图工作流",
 			panelTitle: "ComfyUI 面板",
+			panelReset: "复位位置与大小",
 			close: "关闭",
 			lbPrev: "上一张",
 			lbNext: "下一张",
@@ -167,6 +170,54 @@ window.__ModuleLoader__.load({
 			assetDeleteFailed: "删除失败：{message}",
 			confirmDelete: "确定删除",
 			cancel: "取消",
+			skillButton: "技能包",
+			skillBadge: "技能包",
+			skillBadgeRequired: "技能包·必读",
+			skillBadgeHint: "该工作流挂了技能包：Agent 运行前会读它。",
+			skillTitle: "技能包",
+			skillIntro: "点击「启用技能包」后，可为这个工作流添加给 Agent 看的额外 skills 说明：什么时候用、参数怎么填、有哪些坑。",
+			skillEnable: "启用技能包",
+			skillDetach: "停用（保留文件）",
+			skillDestroy: "销毁技能包",
+			skillDestroyConfirm: "⚠ 永久删除整个技能包（{count} 个文件），不可恢复",
+			skillDestroyConfirmButton: "确认销毁",
+			skillDropHint: "可把文件拖到这里导入",
+			skillRequired: "运行前必读",
+			skillDir: "目录",
+			skillSummary: "摘要",
+			skillSummaryPlaceholder: "一句话说明这个工作流适合做什么",
+			skillSummaryHint: "Agent 靠它决定要不要读正文，等同 skills 里的 description 字段。",
+			skillSave: "保存",
+			skillSaved: "已保存",
+			skillDirty: "未保存",
+			skillDirtyPrompt: "当前文件有未保存的修改。",
+			skillSaveAndSwitch: "保存并切换",
+			skillDiscard: "丢弃修改",
+			skillImport: "↑ 导入文件",
+			skillImportHint: "导入本地文件到技能包：md/txt/json/yaml 进 references，脚本进 scripts，图片/csv 进 assets（也可直接拖进左栏）。",
+			skillImported: "已导入",
+			skillImageHint: "图片只能预览，不能在此编辑；Agent 会在正文点名它时才去读取。",
+			skillNewFile: "＋ 新建文件",
+			skillNewDir: "＋ 新建目录",
+			skillReveal: "📂 打开目录",
+			skillRevealHint: "在文件管理器中打开这个技能包的文件夹，方便直接拷贝文件进去。打开的是运行 DSH 那台机器上的目录；若你正从另一台机器访问本页面，请按下方显示的路径自行前往。",
+			skillRevealed: "已打开",
+			skillRefresh: "刷新",
+			skillRefreshHint: "重新读取技能包目录，显示 Agent 写入或文件管理器里新增/替换的文件。",
+			skillRefreshed: "已刷新",
+			skillNewDirPlaceholder: "目录名，如 templates",
+			skillNewDirHint: "技能包可以有任意一层子目录。常用：{presets}；也可以自己起名（字母/数字/汉字/下划线/连字符）。",
+			skillDirCreated: "已创建目录",
+			skillNewPlaceholder: "文件名（默认 .md）",
+			skillCreate: "创建",
+			skillRename: "重命名",
+			skillDeleteFile: "删除文件",
+			skillDeleteConfirm: "删除文件",
+			skillReadFailed: "读取失败",
+			skillFailed: "操作失败",
+			skillDeleteWithWorkflow: "该工作流有技能包，要一起删除吗？",
+			skillDeleteBoth: "一起删除",
+			skillKeepPack: "只删工作流",
 			queueEmpty: "当前没有任务",
 			queueError: "无法读取队列（ComfyUI 未运行？）",
 			jobFilterLabel: "历史",
@@ -194,7 +245,7 @@ window.__ModuleLoader__.load({
 			baseUrl: "Server URL",
 			baseUrlHint: "ComfyUI HTTP address (default http://127.0.0.1:8188).",
 			apiKeyEnv: "API key env var",
-			apiKeyEnvHint: "Credential-store or environment variable name (default COMFYUI_API_KEY); usually needed for remote servers.",
+			apiKeyEnvHint: "Name of the key: env var or credential store (default COMFYUI_API_KEY).",
 			hasApiKey: "API key configured",
 			noApiKey: "No API key configured (usually not needed for local servers)",
 			save: "Save",
@@ -206,14 +257,16 @@ window.__ModuleLoader__.load({
 			testFail: "Connection failed: {message}",
 			configNotWritable: "Settings service unavailable — edit cordis.yml instead.",
 			mediaHost: "Media base URL",
-			mediaHostHint: "Absolute base URL used for generated media in chat (e.g. http://192.168.1.5:3080). Leave empty to auto-detect the address your browser uses to reach this server; fill it in when images do not load over LAN or a reverse proxy.",
+			mediaHostHint: "Base URL for media shown in chat (e.g. http://192.168.1.5:3080). Auto-detected when empty; set it if images do not load over LAN or a reverse proxy.",
 			comfyuiDirs: "ComfyUI directories",
-			comfyuiDirsHint: "ComfyUI install root(s) on this machine; add multiple for mapped/multiple installs. The agent reads these to locate your ComfyUI files (models, workflows, the TTS-Audio-Suite voice library) directly instead of asking you.",
+			comfyuiDirsHint: "ComfyUI install roots on this machine (multiple allowed: mapped/multiple/portable installs). The agent uses them to locate models, workflows and voice libraries.",
 			comfyuiDirAdd: "+ Add directory",
 			comfyuiDirRemove: "Remove this directory",
 			comfyuiDirPlaceholder: "e.g. D:\\ComfyUI",
+			skillsDir: "Skill pack directory",
+			skillsDirHint: "Directory for workflow skill packs (SKILL.md + reference files). Empty = skills/ under the plugin data dir; an absolute path may target another drive or a synced folder. Existing packs are not moved automatically. Currently in use: {current}",
 			language: "Language",
-			languageHint: "Switch the plugin UI language (中文 / English). The page reloads after switching.",
+			languageHint: "UI language; the page reloads after switching.",
 			cardGenerating: "ComfyUI generating…",
 			cardBackground: "Background job",
 			cardBackgroundDone: "Completed",
@@ -230,6 +283,7 @@ window.__ModuleLoader__.load({
 			cardMode: "Mode",
 			cardListed: "Listed {runs} runnable workflows, {graphs} graph workflows",
 			panelTitle: "ComfyUI Panel",
+			panelReset: "Reset position & size",
 			close: "Close",
 			lbPrev: "Previous image",
 			lbNext: "Next image",
@@ -348,6 +402,54 @@ window.__ModuleLoader__.load({
 			assetDeleteFailed: "Delete failed: {message}",
 			confirmDelete: "Delete",
 			cancel: "Cancel",
+			skillButton: "Skill pack",
+			skillBadge: "Skill pack",
+			skillBadgeRequired: "Skill pack (required)",
+			skillBadgeHint: "This workflow has a skill pack: the agent reads it before running.",
+			skillTitle: "Skill pack",
+			skillIntro: "Click \"Create skill pack\" to add extra skill instructions for this workflow: when to use it, how to fill its parameters, and which pitfalls to avoid.",
+			skillEnable: "Create skill pack",
+			skillDetach: "Detach (keep files)",
+			skillDestroy: "Destroy pack",
+			skillDestroyConfirm: "⚠ Permanently delete the whole pack ({count} files) — cannot be undone",
+			skillDestroyConfirmButton: "Destroy",
+			skillDropHint: "Drop files here to import",
+			skillRequired: "Required before running",
+			skillDir: "Directory",
+			skillSummary: "Summary",
+			skillSummaryPlaceholder: "One line on what this workflow is for",
+			skillSummaryHint: "The agent uses it to decide whether to read the body — like the description field of a skill.",
+			skillSave: "Save",
+			skillSaved: "Saved",
+			skillDirty: "Unsaved",
+			skillDirtyPrompt: "The current file has unsaved changes.",
+			skillSaveAndSwitch: "Save and switch",
+			skillDiscard: "Discard changes",
+			skillImport: "Import files",
+			skillImportHint: "Import local files into the pack: md/txt/json/yaml go to references, scripts to scripts, images/csv to assets (drag onto the list works too).",
+			skillImported: "Imported",
+			skillImageHint: "Images are preview-only here; the agent reads one only when the body points at it.",
+			skillNewFile: "+ New file",
+			skillNewDir: "+ New folder",
+			skillReveal: "📂 Open folder",
+			skillRevealHint: "Open this pack folder in the file manager so you can copy files straight in. It opens on the machine running DSH; if you are viewing this page from another machine, use the path shown below instead.",
+			skillRevealed: "Opened",
+			skillRefresh: "Refresh",
+			skillRefreshHint: "Re-read the pack directory to show files added or replaced by the agent or the file manager.",
+			skillRefreshed: "Refreshed",
+			skillNewDirPlaceholder: "Folder name, e.g. templates",
+			skillNewDirHint: "A pack may hold any one-level sub-directory. Common ones: {presets}; custom names work too (letters, digits, CJK, underscore, dash).",
+			skillDirCreated: "Folder created",
+			skillNewPlaceholder: "File name (.md by default)",
+			skillCreate: "Create",
+			skillRename: "Rename",
+			skillDeleteFile: "Delete file",
+			skillDeleteConfirm: "Delete file",
+			skillReadFailed: "Read failed",
+			skillFailed: "Operation failed",
+			skillDeleteWithWorkflow: "This workflow has a skill pack. Delete it too?",
+			skillDeleteBoth: "Delete both",
+			skillKeepPack: "Workflow only",
 			queueEmpty: "No tasks right now",
 			queueError: "Cannot read the queue (ComfyUI not running?)",
 			jobFilterLabel: "History",
@@ -691,6 +793,19 @@ window.__ModuleLoader__.load({
 			}
 			return response.json();
 		}
+		/** POST raw bytes (an imported file) and read the JSON reply. */
+		async function postRaw(url, bytes) {
+			const response = await fetch(url, {
+				method: "POST",
+				headers: { "content-type": "application/octet-stream" },
+				body: bytes
+			});
+			if (!response.ok) {
+				const payload = await response.json().catch(() => ({}));
+				throw new Error(payload.error ?? `HTTP ${response.status}`);
+			}
+			return response.json();
+		}
 		//#endregion
 		//#region src/client/settings.tsx
 		/**
@@ -705,6 +820,7 @@ window.__ModuleLoader__.load({
 			const [apiKeyEnv, setApiKeyEnv] = (0, react.useState)("");
 			const [mediaHost, setMediaHost] = (0, react.useState)("");
 			const [comfyuiDirs, setComfyuiDirs] = (0, react.useState)([]);
+			const [skillsDir, setSkillsDir] = (0, react.useState)("");
 			const [loadError, setLoadError] = (0, react.useState)(null);
 			const [saving, setSaving] = (0, react.useState)(false);
 			const [saveState, setSaveState] = (0, react.useState)("idle");
@@ -720,6 +836,7 @@ window.__ModuleLoader__.load({
 					setApiKeyEnv(view.apiKeyEnv);
 					setMediaHost(view.mediaHost ?? "");
 					setComfyuiDirs(Array.isArray(view.comfyuiDirs) ? view.comfyuiDirs : []);
+					setSkillsDir(view.skillsDir ?? "");
 				}).catch((error) => {
 					if (cancelled) return;
 					setLoadError(error instanceof Error ? error.message : String(error));
@@ -737,7 +854,8 @@ window.__ModuleLoader__.load({
 						baseUrl,
 						apiKeyEnv,
 						mediaHost,
-						comfyuiDirs: dirs
+						comfyuiDirs: dirs,
+						skillsDir: skillsDir.trim()
 					} });
 					if (payload.config !== void 0) {
 						setConfig(payload.config);
@@ -745,6 +863,7 @@ window.__ModuleLoader__.load({
 						setApiKeyEnv(payload.config.apiKeyEnv);
 						setMediaHost(payload.config.mediaHost ?? "");
 						setComfyuiDirs(payload.config.comfyuiDirs ?? []);
+						setSkillsDir(payload.config.skillsDir ?? "");
 					}
 					setSaveState("saved");
 				} catch (error) {
@@ -850,7 +969,15 @@ window.__ModuleLoader__.load({
 					setComfyuiDirs([...comfyuiDirs, ""]);
 					setSaveState("idle");
 				}
-			}, t("comfyuiDirAdd")), (0, react.createElement)("div", { className: "dsc-hint" }, t("comfyuiDirsHint"))), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+			}, t("comfyuiDirAdd")), (0, react.createElement)("div", { className: "dsc-hint" }, t("comfyuiDirsHint"))), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("skillsDir")), (0, react.createElement)("input", {
+				className: "dsc-input",
+				value: skillsDir,
+				placeholder: config.skillsRoot,
+				onChange: (event) => {
+					setSkillsDir(event.target.value);
+					setSaveState("idle");
+				}
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("skillsDirHint", { current: config.skillsRoot }))), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
 				className: "dsc-btn",
 				disabled: saving || !config.writable,
 				onClick: () => void save()
@@ -989,6 +1116,62 @@ window.__ModuleLoader__.load({
 				localStorage.setItem(GEOM_KEY, JSON.stringify(geom));
 			} catch {}
 		}
+		/** Default panel width from styles.ts (`.dsc-panel` width var), used only to
+		* estimate the panel extent while clamping a saved position. */
+		const PANEL_WIDTH_FALLBACK = 400;
+		/** Approx. height of the drag-handle band (`.dsc-panel-head`). */
+		const HEAD_BAND = 48;
+		/** Minimum margin kept between the panel and the viewport edge. */
+		const EDGE = 8;
+		/**
+		* Clamp a top-left corner so the drag-handle band always stays inside the
+		* viewport. The failure this prevents: once the header is pushed past the top
+		* edge (or a saved position from a larger monitor no longer fits), there is no
+		* grab surface left and the panel cannot be moved back at all.
+		*/
+		function clampPos(x, y, width, vw, vh) {
+			const maxX = Math.max(EDGE, vw - width - EDGE);
+			const maxY = Math.max(EDGE, vh - HEAD_BAND - EDGE);
+			return {
+				x: Math.min(Math.max(x, EDGE), maxX),
+				y: Math.min(Math.max(y, EDGE), maxY)
+			};
+		}
+		/** Snap persisted geometry back within reach of the cursor. Geometry that
+		* never carried an explicit position (the CSS-anchored default) is returned
+		* unchanged; geometry already inside the safe area keeps its object identity
+		* so callers can skip pointless re-renders. */
+		function healGeom(geom, vw, vh) {
+			if (geom.x === void 0 || geom.y === void 0) return geom;
+			const pos = clampPos(geom.x, geom.y, geom.width ?? PANEL_WIDTH_FALLBACK, vw, vh);
+			if (pos.x === geom.x && pos.y === geom.y) return geom;
+			return {
+				...geom,
+				x: pos.x,
+				y: pos.y
+			};
+		}
+		/** Fallback suggestions when the config route has not answered yet; the
+		* authoritative list comes from the host (`presetDirs`). */
+		const SKILL_FALLBACK_DIRS = [
+			"references",
+			"scripts",
+			"assets"
+		];
+		/** Imported binaries land in assets/; the editor previews these instead of
+		* trying to read them as text. */
+		const SKILL_IMAGE_EXTENSIONS = [
+			".png",
+			".jpg",
+			".jpeg",
+			".webp",
+			".gif",
+			".svg"
+		];
+		function isSkillImage(path) {
+			const dot = path.lastIndexOf(".");
+			return dot !== -1 && SKILL_IMAGE_EXTENSIONS.includes(path.slice(dot).toLowerCase());
+		}
 		/** Preset workflow classification tags (users can add custom ones). Stored as
 		* plain text, so the tag identity is the label itself. */
 		const PRESET_TAGS = [
@@ -1755,7 +1938,7 @@ window.__ModuleLoader__.load({
 		function ComfyUIPanel({ t }) {
 			const open = usePanelOpen();
 			const tab = usePanelTab();
-			const [geom, setGeom] = (0, react.useState)(loadGeom);
+			const [geom, setGeom] = (0, react.useState)(() => healGeom(loadGeom(), window.innerWidth, window.innerHeight));
 			const [dragging, setDragging] = (0, react.useState)(null);
 			const [lightbox, setLightbox] = (0, react.useState)(null);
 			const panelRef = (0, react.useRef)(null);
@@ -1766,9 +1949,18 @@ window.__ModuleLoader__.load({
 				index
 			});
 			(0, react.useEffect)(() => {
-				if (open) return;
+				if (open) {
+					setGeom((prev) => healGeom(prev, window.innerWidth, window.innerHeight));
+					return;
+				}
 				saveGeom(geom);
 			}, [open]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const onResize = () => setGeom((prev) => healGeom(prev, window.innerWidth, window.innerHeight));
+				window.addEventListener("resize", onResize);
+				return () => window.removeEventListener("resize", onResize);
+			}, [open]);
 			const startDrag = (event, mode) => {
 				if (event.button !== 0) return;
 				if (mode === "move") {
@@ -1792,12 +1984,14 @@ window.__ModuleLoader__.load({
 			const moveDrag = (event) => {
 				const d = dragRef.current;
 				if (d === null) return;
-				if (dragging === "move") setGeom((prev) => ({
-					...prev,
-					x: Math.round(d.origX + event.clientX - d.startX),
-					y: Math.round(d.origY + event.clientY - d.startY)
-				}));
-				else if (dragging === "resize") {
+				if (dragging === "move") {
+					const pos = clampPos(Math.round(d.origX + event.clientX - d.startX), Math.round(d.origY + event.clientY - d.startY), d.width, window.innerWidth, window.innerHeight);
+					setGeom((prev) => ({
+						...prev,
+						x: pos.x,
+						y: pos.y
+					}));
+				} else if (dragging === "resize") {
 					const width = Math.max(300, Math.min(720, d.width + event.clientX - d.startX));
 					const height = Math.max(200, Math.min(Math.max(300, window.innerHeight - 40), d.height + event.clientY - d.startY));
 					setGeom((prev) => ({
@@ -1836,11 +2030,22 @@ window.__ModuleLoader__.load({
 				onPointerMove: (event) => moveDrag(event),
 				onPointerUp: () => endDrag(),
 				onPointerCancel: () => endDrag()
-			}, (0, react.createElement)("span", { className: "dsc-panel-title" }, (0, react.createElement)("span", { className: "dsc-trigger-glyph" }, (0, react.createElement)(ComfyUIIcon)), (0, react.createElement)("span", null, t("panelTitle"))), (0, react.createElement)("button", {
+			}, (0, react.createElement)("span", { className: "dsc-panel-title" }, (0, react.createElement)("span", { className: "dsc-trigger-glyph" }, (0, react.createElement)(ComfyUIIcon)), (0, react.createElement)("span", null, t("panelTitle"))), (0, react.createElement)("span", { className: "dsc-panel-head-actions" }, (0, react.createElement)("button", {
+				className: "dsc-panel-reset",
+				type: "button",
+				title: t("panelReset"),
+				"aria-label": t("panelReset"),
+				onClick: () => {
+					setGeom({});
+					try {
+						localStorage.removeItem(GEOM_KEY);
+					} catch {}
+				}
+			}, "↺"), (0, react.createElement)("button", {
 				className: "dsc-panel-close",
 				"aria-label": t("close"),
 				onClick: () => panelStore.close()
-			}, "✕")), (0, react.createElement)("div", { className: "dsc-tabs" }, (0, react.createElement)(TabButton, {
+			}, "✕"))), (0, react.createElement)("div", { className: "dsc-tabs" }, (0, react.createElement)(TabButton, {
 				t,
 				active: tab === "workflows",
 				label: t("tabWorkflows"),
@@ -2259,6 +2464,503 @@ window.__ModuleLoader__.load({
 				}
 			}));
 		}
+		/**
+		* The skill-pack editor for one workflow: attach/detach the pack, toggle the
+		* run-time gate, and manage its files (SKILL.md plus references/ and scripts/).
+		*
+		* The pack is what `comfyui_workflow action: skill` hands the agent, so this
+		* view is the only place its content is authored. Each file saves explicitly —
+		* no autosave — because the model reads whatever is on disk the moment it asks.
+		* SKILL.md is edited as a summary field plus a body: the `---` frontmatter that
+		* carries the summary is composed on the host, never typed here.
+		*/
+		function SkillPackEditor(props) {
+			const { t } = props;
+			const [pack, setPack] = (0, react.useState)(null);
+			const [enabled, setEnabled] = (0, react.useState)(props.workflow.skillDir !== void 0);
+			const [active, setActive] = (0, react.useState)("SKILL.md");
+			const [summary, setSummary] = (0, react.useState)("");
+			const [text, setText] = (0, react.useState)("");
+			const [dirty, setDirty] = (0, react.useState)(false);
+			const [pendingOpen, setPendingOpen] = (0, react.useState)(null);
+			const [creating, setCreating] = (0, react.useState)(null);
+			const [creatingDir, setCreatingDir] = (0, react.useState)(null);
+			const [presetDirs, setPresetDirs] = (0, react.useState)(SKILL_FALLBACK_DIRS);
+			const [renaming, setRenaming] = (0, react.useState)(null);
+			const [confirming, setConfirming] = (0, react.useState)(null);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(null);
+			const [notice, setNotice] = (0, react.useState)(null);
+			/** Load one file into the editor; SKILL.md arrives pre-split into summary + body. */
+			const openFile = (0, react.useCallback)(async (path) => {
+				if (isSkillImage(path)) {
+					setActive(path);
+					setSummary("");
+					setText("");
+					setDirty(false);
+					setError(null);
+					return;
+				}
+				try {
+					const data = await getJson(`/comfyui/workflows/skill?id=${encodeURIComponent(props.workflow.id)}&path=${encodeURIComponent(path)}`);
+					if (data.ok !== true) {
+						setError(data.error ?? t("skillReadFailed"));
+						return;
+					}
+					setActive(path);
+					if (path === "SKILL.md") {
+						setSummary(data.summary ?? "");
+						setText(data.body ?? "");
+					} else {
+						setSummary("");
+						setText(data.content ?? "");
+					}
+					setDirty(false);
+					setError(null);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}
+			}, [props.workflow.id, t]);
+			/** Re-read the pack listing, then the requested file. */
+			const refresh = (0, react.useCallback)(async (path) => {
+				try {
+					const data = await getJson(`/comfyui/workflows/skill?id=${encodeURIComponent(props.workflow.id)}`);
+					setEnabled(data.enabled === true);
+					setPack(data.pack ?? null);
+					if (Array.isArray(data.presetDirs) && data.presetDirs.length > 0) setPresetDirs(data.presetDirs);
+					if (data.enabled === true) await openFile(path ?? "SKILL.md");
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}
+			}, [props.workflow.id, openFile]);
+			/** Re-read the pack listing and — only when nothing is unsaved — the file
+			* currently open, so files added or replaced outside this panel (the agent
+			* writing via comfyui_skill, or the file manager after `打开目录`) show up
+			* without leaving and re-entering the view. */
+			const refreshFiles = async () => {
+				setBusy(true);
+				setNotice(null);
+				try {
+					const data = await getJson(`/comfyui/workflows/skill?id=${encodeURIComponent(props.workflow.id)}`);
+					setEnabled(data.enabled === true);
+					setPack(data.pack ?? null);
+					if (Array.isArray(data.presetDirs) && data.presetDirs.length > 0) setPresetDirs(data.presetDirs);
+					setError(null);
+					props.onChanged();
+					if (data.enabled === true && !dirty) await openFile(active);
+					setNotice(t("skillRefreshed"));
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				} finally {
+					setBusy(false);
+				}
+			};
+			(0, react.useEffect)(() => {
+				refresh();
+			}, [refresh]);
+			/** Every mutation goes through here so the listing and the flags stay in sync. */
+			const mutate = async (body, after) => {
+				setBusy(true);
+				setNotice(null);
+				try {
+					const data = await postJson("/comfyui/workflows/skill", {
+						id: props.workflow.id,
+						...body
+					});
+					if (data.ok !== true) {
+						setError(data.error ?? t("skillFailed"));
+						return false;
+					}
+					setEnabled(data.enabled === true);
+					setPack(data.pack ?? null);
+					setError(null);
+					props.onChanged();
+					if (after !== void 0 && data.enabled === true) await openFile(after);
+					return true;
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+					return false;
+				} finally {
+					setBusy(false);
+				}
+			};
+			const saveFile = async () => {
+				const body = {
+					action: "write",
+					path: active,
+					content: text
+				};
+				if (active === "SKILL.md") body.summary = summary;
+				const ok = await mutate(body);
+				if (ok) {
+					setDirty(false);
+					setNotice(`${t("skillSaved")} ${active}`);
+				}
+				return ok;
+			};
+			/** Switching files with unsaved edits parks the request until the user decides. */
+			const selectFile = (path) => {
+				if (path === active) return;
+				if (dirty) {
+					setPendingOpen(path);
+					return;
+				}
+				openFile(path);
+			};
+			const createFile = async () => {
+				if (creating === null) return;
+				const name = creating.name.trim();
+				if (name === "") return;
+				const path = `${creating.bucket}/${name.includes(".") ? name : `${name}.md`}`;
+				if (await mutate({
+					action: "write",
+					path,
+					content: ""
+				}, path)) setCreating(null);
+			};
+			/** Open the pack directory in the desktop file manager (on the machine
+			* running DSH — the hint says so, and the path stays visible below). */
+			const revealDir = async () => {
+				setNotice(null);
+				try {
+					const data = await postJson("/comfyui/workflows/skill/reveal", { id: props.workflow.id });
+					if (data.ok !== true) {
+						setError(data.error ?? t("skillFailed"));
+						return;
+					}
+					setError(null);
+					setNotice(`${t("skillRevealed")} ${data.dir ?? ""}`);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}
+			};
+			const createDir = async () => {
+				if (creatingDir === null) return;
+				const name = creatingDir.trim();
+				if (name === "") return;
+				if (await mutate({
+					action: "mkdir",
+					name
+				})) {
+					setCreatingDir(null);
+					setNotice(`${t("skillDirCreated")} ${name}/`);
+				}
+			};
+			const applyRename = async () => {
+				if (renaming === null) return;
+				const to = renaming.to.trim();
+				if (to === "") return;
+				const bucket = renaming.from.includes("/") ? `${renaming.from.split("/")[0] ?? ""}/` : "";
+				const target = to.includes("/") ? to : `${bucket}${to}`;
+				if (await mutate({
+					action: "rename",
+					path: renaming.from,
+					to: target
+				}, target)) setRenaming(null);
+			};
+			/** Import local files into the pack. The destination bucket comes from the
+			* host (one extension rule, shared with the agent-facing listing), so the
+			* panel only sends the name and the bytes. */
+			const importFiles = async (files) => {
+				if (files.length === 0) return;
+				setBusy(true);
+				setNotice(null);
+				let imported = null;
+				let failed = 0;
+				for (const file of files) try {
+					const bytes = await file.arrayBuffer();
+					const data = await postRaw(`/comfyui/workflows/skill/import?id=${encodeURIComponent(props.workflow.id)}&name=${encodeURIComponent(file.name)}`, bytes);
+					if (data.ok !== true) {
+						failed += 1;
+						setError(data.error ?? t("skillFailed"));
+						continue;
+					}
+					setPack(data.pack ?? null);
+					imported = data.path ?? null;
+				} catch (cause) {
+					failed += 1;
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}
+				setBusy(false);
+				props.onChanged();
+				if (imported !== null) {
+					if (failed === 0) {
+						setError(null);
+						setNotice(`${t("skillImported")} ${imported}`);
+					}
+					await openFile(imported);
+				}
+			};
+			const head = (0, react.createElement)("div", { className: "dsc-view-head" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: props.onBack
+			}, t("wfViewBack")), (0, react.createElement)("div", {
+				className: "dsc-wf-name",
+				title: props.workflow.name
+			}, `${t("skillTitle")} · ${props.workflow.name}`));
+			if (!enabled) return (0, react.createElement)("div", null, head, (0, react.createElement)("div", { className: "dsc-hint" }, t("skillIntro")), error !== null ? (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}) : null, (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => void mutate({ action: "enable" }, "SKILL.md")
+			}, t("skillEnable"))));
+			const files = pack?.files ?? [];
+			const impliedDirs = files.filter((file) => file.path.includes("/")).map((file) => file.path.split("/")[0] ?? "").filter((dir) => dir !== "");
+			const packDirs = [.../* @__PURE__ */ new Set([...pack?.dirs ?? [], ...impliedDirs])].sort((a, b) => a.localeCompare(b));
+			const buckets = [{
+				label: "",
+				items: files.filter((file) => !file.path.includes("/"))
+			}, ...packDirs.map((bucket) => ({
+				label: bucket,
+				items: files.filter((file) => file.path.startsWith(`${bucket}/`))
+			}))];
+			/** Where a new file may go: the pack's own directories first, then the
+			* presets it has not used yet. */
+			const targetDirs = [...packDirs, ...presetDirs.filter((dir) => !packDirs.includes(dir))];
+			/** One row in the pack file list; clicking opens it for editing. */
+			const fileButton = (file) => (0, react.createElement)("button", {
+				key: file.path,
+				className: `dsc-skill-file${file.path === active ? " dsc-skill-file--active" : ""}`,
+				onClick: () => selectFile(file.path)
+			}, (0, react.createElement)("span", { className: "dsc-skill-file-name" }, file.path.includes("/") ? file.path.split("/")[1] : file.path), (0, react.createElement)("span", { className: "dsc-skill-file-size" }, formatBytes(file.size)));
+			const fileList = (0, react.createElement)("div", {
+				className: "dsc-skill-files",
+				onDragOver: (event) => event.preventDefault(),
+				onDrop: (event) => {
+					event.preventDefault();
+					const dropped = Array.from(event.dataTransfer?.files ?? []);
+					if (dropped.length > 0) importFiles(dropped);
+				}
+			}, (0, react.createElement)("div", { className: "dsc-skill-actions" }, (0, react.createElement)("label", {
+				className: "dsc-btn dsc-btn--sm",
+				title: t("skillImportHint")
+			}, t("skillImport"), (0, react.createElement)("input", {
+				type: "file",
+				multiple: true,
+				style: { display: "none" },
+				disabled: busy,
+				onChange: (event) => {
+					const picked = Array.from(event.target.files ?? []);
+					event.target.value = "";
+					if (picked.length > 0) importFiles(picked);
+				}
+			})), creating === null ? (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				disabled: busy,
+				onClick: () => {
+					setCreatingDir(null);
+					setCreating({
+						bucket: targetDirs[0] ?? "references",
+						name: ""
+					});
+				}
+			}, t("skillNewFile")) : null, creatingDir === null ? (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				disabled: busy,
+				onClick: () => {
+					setCreating(null);
+					setCreatingDir("");
+				}
+			}, t("skillNewDir")) : null, (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				disabled: busy,
+				title: t("skillRevealHint"),
+				onClick: () => void revealDir()
+			}, t("skillReveal")), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				disabled: busy,
+				title: t("skillRefreshHint"),
+				onClick: () => void refreshFiles()
+			}, t("skillRefresh"))), creatingDir === null ? null : (0, react.createElement)("div", { className: "dsc-skill-create" }, (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm",
+				value: creatingDir,
+				placeholder: t("skillNewDirPlaceholder"),
+				onChange: (event) => setCreatingDir(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						createDir();
+					}
+				}
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("skillNewDirHint", { presets: presetDirs.join(" / ") })), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				disabled: busy,
+				onClick: () => void createDir()
+			}, t("skillCreate")), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				onClick: () => setCreatingDir(null)
+			}, t("cancel")))), (0, react.createElement)("div", { className: "dsc-skill-drop-hint" }, t("skillDropHint")), buckets.map((bucket) => bucket.items.length === 0 && bucket.label !== "" ? null : bucket.label === "" ? (0, react.createElement)("div", {
+				key: ".",
+				className: "dsc-skill-bucket"
+			}, bucket.items.map(fileButton)) : (0, react.createElement)("details", {
+				key: bucket.label,
+				className: "dsc-fold dsc-skill-fold",
+				open: true
+			}, (0, react.createElement)("summary", null, `${bucket.label}/`), (0, react.createElement)("div", { className: "dsc-skill-bucket" }, bucket.items.map(fileButton)))), creating === null ? null : (0, react.createElement)("div", { className: "dsc-skill-create" }, (0, react.createElement)("select", {
+				className: "dsc-input dsc-input--sm",
+				value: creating.bucket,
+				onChange: (event) => setCreating({
+					...creating,
+					bucket: event.target.value
+				})
+			}, targetDirs.map((bucket) => (0, react.createElement)("option", {
+				key: bucket,
+				value: bucket
+			}, `${bucket}/`))), (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm",
+				value: creating.name,
+				placeholder: t("skillNewPlaceholder"),
+				onChange: (event) => setCreating({
+					...creating,
+					name: event.target.value
+				}),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						createFile();
+					}
+				}
+			}), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				disabled: busy,
+				onClick: () => void createFile()
+			}, t("skillCreate")), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				onClick: () => setCreating(null)
+			}, t("cancel")))));
+			const editor = (0, react.createElement)("div", { className: "dsc-skill-main" }, (0, react.createElement)("div", { className: "dsc-skill-editor-head" }, (0, react.createElement)("span", { className: "dsc-skill-path" }, active), dirty ? (0, react.createElement)("span", { className: "dsc-badge dsc-badge--warn" }, t("skillDirty")) : null), active === "SKILL.md" ? (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("skillSummary")), (0, react.createElement)("input", {
+				className: "dsc-input",
+				value: summary,
+				placeholder: t("skillSummaryPlaceholder"),
+				onChange: (event) => {
+					setSummary(event.target.value);
+					setDirty(true);
+				}
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("skillSummaryHint"))) : null, isSkillImage(active) ? (0, react.createElement)("div", { className: "dsc-skill-preview" }, (0, react.createElement)("img", {
+				src: `/comfyui/workflows/skill/raw?id=${encodeURIComponent(props.workflow.id)}&path=${encodeURIComponent(active)}`,
+				alt: active
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("skillImageHint"))) : (0, react.createElement)("textarea", {
+				className: "dsc-textarea dsc-textarea--skill",
+				value: text,
+				spellCheck: false,
+				onChange: (event) => {
+					setText(event.target.value);
+					setDirty(true);
+				},
+				onKeyDown: (event) => {
+					if (event.key !== "Tab") return;
+					event.preventDefault();
+					const area = event.target;
+					const start = area.selectionStart;
+					const end = area.selectionEnd;
+					setText(`${text.slice(0, start)}  ${text.slice(end)}`);
+					setDirty(true);
+					window.requestAnimationFrame(() => {
+						area.selectionStart = start + 2;
+						area.selectionEnd = start + 2;
+					});
+				}
+			}), (0, react.createElement)("div", { className: "dsc-row" }, isSkillImage(active) ? null : (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy || !dirty,
+				onClick: () => void saveFile()
+			}, t("skillSave")), active !== "SKILL.md" ? (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => setRenaming({
+					from: active,
+					to: active.includes("/") ? active.split("/")[1] ?? "" : active
+				})
+			}, t("skillRename")) : null, active !== "SKILL.md" ? (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => setConfirming(active)
+			}, t("skillDeleteFile")) : null), confirming !== null && confirming !== "*pack*" ? (0, react.createElement)("div", { className: "dsc-dialog dsc-dialog--danger" }, (0, react.createElement)("div", { className: "dsc-dialog-head dsc-danger-text" }, `${t("skillDeleteConfirm")} ${confirming}`), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--danger",
+				disabled: busy,
+				onClick: () => {
+					const target = confirming;
+					setConfirming(null);
+					mutate({
+						action: "delete",
+						path: target
+					}, "SKILL.md");
+				}
+			}, t("confirmDelete")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => setConfirming(null)
+			}, t("cancel")))) : null, renaming !== null ? (0, react.createElement)("div", { className: "dsc-skill-create" }, (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm",
+				value: renaming.to,
+				onChange: (event) => setRenaming({
+					...renaming,
+					to: event.target.value
+				})
+			}), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				disabled: busy,
+				onClick: () => void applyRename()
+			}, t("skillRename")), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				onClick: () => setRenaming(null)
+			}, t("cancel")))) : null);
+			return (0, react.createElement)("div", null, head, (0, react.createElement)("div", { className: "dsc-row dsc-skill-flags" }, (0, react.createElement)("label", { className: "dsc-check" }, (0, react.createElement)("input", {
+				type: "checkbox",
+				checked: pack?.required === true,
+				disabled: busy,
+				onChange: (event) => void mutate({
+					action: "require",
+					required: event.target.checked
+				})
+			}), t("skillRequired"))), pack !== null ? (0, react.createElement)("div", {
+				className: "dsc-skill-dir",
+				title: pack.dir
+			}, `${t("skillDir")}: ${pack.dir}`) : null, pendingOpen !== null ? (0, react.createElement)("div", { className: "dsc-dialog" }, (0, react.createElement)("div", { className: "dsc-dialog-head" }, t("skillDirtyPrompt")), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => {
+					const target = pendingOpen;
+					setPendingOpen(null);
+					saveFile().then((ok) => {
+						if (ok) openFile(target);
+					});
+				}
+			}, t("skillSaveAndSwitch")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => {
+					const target = pendingOpen;
+					setPendingOpen(null);
+					setDirty(false);
+					openFile(target);
+				}
+			}, t("skillDiscard")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => setPendingOpen(null)
+			}, t("cancel")))) : null, notice !== null ? (0, react.createElement)("div", { className: "dsc-ok" }, notice) : null, error !== null ? (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}) : null, (0, react.createElement)("div", { className: "dsc-skill" }, fileList, editor), (0, react.createElement)("div", { className: "dsc-skill-footer" }, (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => void mutate({ action: "disable" }).then(() => props.onBack())
+			}, t("skillDetach")), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--danger",
+				disabled: busy,
+				onClick: () => setConfirming("*pack*")
+			}, t("skillDestroy"))), confirming === "*pack*" ? (0, react.createElement)("div", { className: "dsc-dialog dsc-dialog--danger" }, (0, react.createElement)("div", { className: "dsc-dialog-head dsc-danger-text" }, t("skillDestroyConfirm", { count: pack?.files.length ?? 0 })), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--danger",
+				disabled: busy,
+				onClick: () => {
+					setConfirming(null);
+					mutate({ action: "destroy" }).then(() => props.onBack());
+				}
+			}, t("skillDestroyConfirmButton")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => setConfirming(null)
+			}, t("cancel")))) : null));
+		}
 		function WorkflowsTab({ t }) {
 			const [list, setList] = (0, react.useState)(null);
 			const [comfyui, setComfyui] = (0, react.useState)(null);
@@ -2270,6 +2972,9 @@ window.__ModuleLoader__.load({
 			const [viewing, setViewing] = (0, react.useState)(null);
 			const [extract, setExtract] = (0, react.useState)(null);
 			const [tagFilter, setTagFilter] = (0, react.useState)(null);
+			const [skillFor, setSkillFor] = (0, react.useState)(null);
+			/** A delete waiting on the user's answer about the workflow's skill pack. */
+			const [deleting, setDeleting] = (0, react.useState)(null);
 			const load = async () => {
 				try {
 					const data = await getJson("/comfyui/workflows");
@@ -2360,11 +3065,16 @@ window.__ModuleLoader__.load({
 					setBusy(false);
 				}
 			};
-			const remove = async (id) => {
+			/** Delete a workflow. A workflow carrying a skill pack asks first: the pack
+			* holds hand-written notes that nothing else can restore. */
+			const remove = async (id, deleteSkill = false) => {
 				setBusy(true);
 				setError(null);
 				try {
-					await postJson("/comfyui/workflows/delete", { id });
+					await postJson("/comfyui/workflows/delete", {
+						id,
+						deleteSkill
+					});
 					await load();
 				} catch (cause) {
 					setError(cause instanceof Error ? cause.message : String(cause));
@@ -2372,6 +3082,13 @@ window.__ModuleLoader__.load({
 					setBusy(false);
 				}
 			};
+			const requestRemove = (workflow) => {
+				if (workflow.skillDir !== void 0) {
+					setDeleting(workflow);
+					return;
+				}
+				remove(workflow.id);
+			};
 			const openExtract = (file) => {
 				setError(null);
 				setExtract({
@@ -2433,6 +3150,17 @@ window.__ModuleLoader__.load({
 					setBusy(false);
 				}
 			};
+			if (skillFor !== null) return (0, react.createElement)(SkillPackEditor, {
+				t,
+				workflow: skillFor,
+				onBack: () => {
+					setSkillFor(null);
+					load();
+				},
+				onChanged: () => {
+					load();
+				}
+			});
 			if (viewing !== null) return (0, react.createElement)(WorkflowView, {
 				t,
 				file: viewing.file,
@@ -2551,14 +3279,15 @@ window.__ModuleLoader__.load({
 			const apiFold = (0, react.createElement)("details", {
 				className: "dsc-fold",
 				open: true
-			}, (0, react.createElement)("summary", null, `${t("wfLibrarySection")} (${visibleList.length})`), (0, react.createElement)("div", { className: "dsc-fold-body" }, visibleTags.length > 0 || tagFilter !== null ? (0, react.createElement)("div", { className: "dsc-tag-filter" }, (0, react.createElement)("button", {
-				className: `dsc-tag-chip${tagFilter === null ? " dsc-tag-chip--active" : ""}`,
-				onClick: () => setTagFilter(null)
-			}, `${t("wfTagAll")} (${list.length})`), visibleTags.map((tag) => (0, react.createElement)("button", {
+			}, (0, react.createElement)("summary", null, `${t("wfLibrarySection")} (${visibleList.length})`), (0, react.createElement)("div", { className: "dsc-fold-body" }, visibleTags.length > 0 || tagFilter !== null ? (0, react.createElement)("div", { className: "dsc-tag-filter" }, (0, react.createElement)("select", {
+				className: "dsc-input dsc-input--inline",
+				title: t("wfTags"),
+				value: tagFilter ?? "",
+				onChange: (event) => setTagFilter(event.target.value === "" ? null : event.target.value)
+			}, (0, react.createElement)("option", { value: "" }, `${t("wfTagAll")} (${list.length})`), visibleTags.map((tag) => (0, react.createElement)("option", {
 				key: tag,
-				className: `dsc-tag-chip${tagFilter === tag ? " dsc-tag-chip--active" : ""}`,
-				onClick: () => setTagFilter(tagFilter === tag ? null : tag)
-			}, `${tag} (${tagCounts.get(tag) ?? 0})`))) : null, visibleList.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("wfEmpty")) : (0, react.createElement)("div", { className: "dsc-list" }, visibleList.map((workflow) => (0, react.createElement)("div", {
+				value: tag
+			}, `${tag} (${tagCounts.get(tag) ?? 0})`)))) : null, visibleList.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("wfEmpty")) : (0, react.createElement)("div", { className: "dsc-list" }, visibleList.map((workflow) => (0, react.createElement)("div", {
 				key: workflow.id,
 				className: "dsc-wf",
 				title: t("wfNameCopyHint"),
@@ -2573,7 +3302,10 @@ window.__ModuleLoader__.load({
 			}, workflow.name), (workflow.tags ?? []).length > 0 ? (0, react.createElement)("div", { className: "dsc-wf-tags" }, (workflow.tags ?? []).map((tag) => (0, react.createElement)("span", {
 				key: tag,
 				className: "dsc-tag-chip dsc-tag-chip--mini"
-			}, tag))) : null), workflow.description !== "" ? (0, react.createElement)("div", { className: "dsc-wf-desc" }, workflow.description) : null, (0, react.createElement)("div", { className: "dsc-wf-updated" }, `${t("wfUpdated")} ${formatTs(workflow.updatedAt)}`), (0, react.createElement)("div", { className: "dsc-wf-actions" }, (0, react.createElement)("button", {
+			}, tag))) : null, workflow.skillDir !== void 0 ? (0, react.createElement)("span", {
+				className: "dsc-badge dsc-badge--ok",
+				title: t("skillBadgeHint")
+			}, workflow.requireSkill === true ? t("skillBadgeRequired") : t("skillBadge")) : null), workflow.description !== "" ? (0, react.createElement)("div", { className: "dsc-wf-desc" }, workflow.description) : null, (0, react.createElement)("div", { className: "dsc-wf-updated" }, `${t("wfUpdated")} ${formatTs(workflow.updatedAt)}`), (0, react.createElement)("div", { className: "dsc-wf-actions" }, (0, react.createElement)("button", {
 				className: "dsc-btn",
 				disabled: busy,
 				onClick: (event) => {
@@ -2598,9 +3330,37 @@ window.__ModuleLoader__.load({
 				disabled: busy,
 				onClick: (event) => {
 					event.stopPropagation();
-					remove(workflow.id);
+					setSkillFor(workflow);
+					setError(null);
+				}
+			}, t("skillButton")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: (event) => {
+					event.stopPropagation();
+					requestRemove(workflow);
+				}
+			}, t("wfDelete"))), deleting?.id === workflow.id ? (0, react.createElement)("div", {
+				className: "dsc-dialog dsc-dialog--danger",
+				onClick: (event) => event.stopPropagation()
+			}, (0, react.createElement)("div", { className: "dsc-dialog-head dsc-danger-text" }, t("skillDeleteWithWorkflow")), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--danger",
+				disabled: busy,
+				onClick: () => {
+					setDeleting(null);
+					remove(workflow.id, true);
 				}
-			}, t("wfDelete"))))))));
+			}, t("skillDeleteBoth")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => {
+					setDeleting(null);
+					remove(workflow.id, false);
+				}
+			}, t("skillKeepPack")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => setDeleting(null)
+			}, t("cancel")))) : null)))));
 			return (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "dsc-toolbar" }, (0, react.createElement)("button", {
 				className: "dsc-btn",
 				disabled: busy,
@@ -3262,6 +4022,9 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 }
 .dsc-panel-resize:hover { opacity: 1; }
 .dsc-panel-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
+.dsc-panel-head-actions { display: inline-flex; align-items: center; gap: 2px; }
+.dsc-panel-reset { border: none; background: transparent; color: var(--dsw-alias-label-tertiary); cursor: pointer; font-size: 13px; padding: 4px 6px; line-height: 1; }
+.dsc-panel-reset:hover { color: var(--dsw-alias-label-primary); }
 .dsc-panel-close { border: none; background: transparent; color: var(--dsw-alias-label-secondary); cursor: pointer; font-size: 14px; padding: 4px 8px; }
 .dsc-panel-close:hover { color: var(--dsw-alias-label-primary); }
 .dsc-tabs { display: flex; border-bottom: 1px solid var(--dsw-alias-border-l1); }
@@ -3307,6 +4070,40 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .dsc-derived-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
 .dsc-derived-name { color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dsc-dialog { border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 10px; }
+/* --- skill pack editor: file list beside a plain-text editor --- */
+.dsc-skill { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
+.dsc-skill-files { flex: 0 0 190px; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
+.dsc-skill-main { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
+.dsc-skill-bucket { display: flex; flex-direction: column; gap: 2px; }
+/* Foldable pack directories: each folder renders as a <details> whose header
+   stays put while its files collapse, keeping crowded packs scannable. */
+.dsc-skill-fold { border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; margin: 2px 0; }
+.dsc-skill-fold summary { padding: 5px 10px; font-size: 12px; color: var(--dsw-alias-label-secondary); border-radius: 8px; }
+.dsc-skill-fold[open] summary { color: var(--dsw-alias-label-primary); border-bottom: 1px solid var(--dsw-alias-border-l1); border-radius: 8px 8px 0 0; }
+.dsc-skill-fold .dsc-skill-bucket { padding: 4px 6px 6px; }
+.dsc-skill-file {
+  display: flex; align-items: center; justify-content: space-between; gap: 6px;
+  border: 1px solid transparent; border-radius: 6px; background: transparent;
+  color: inherit; font-size: 12px; padding: 4px 6px; cursor: pointer; text-align: left;
+}
+.dsc-skill-file:hover { background: var(--dsw-alias-bg-layer-2); }
+.dsc-skill-file--active { border-color: var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-2); }
+.dsc-skill-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsc-skill-file-size { color: var(--dsw-alias-label-secondary); font-size: 11px; flex: none; }
+.dsc-skill-create { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+.dsc-skill-editor-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
+.dsc-skill-path { color: var(--dsw-alias-label-primary); }
+.dsc-textarea--skill { min-height: 260px; font-size: 12px; line-height: 1.5; }
+.dsc-skill-preview { border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
+.dsc-skill-preview img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 6px; }
+.dsc-skill-dir { font-size: 11px; color: var(--dsw-alias-label-secondary); margin: 4px 0; word-break: break-all; }
+.dsc-skill-flags { margin-top: 6px; }
+.dsc-skill-footer { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+.dsc-skill-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.dsc-skill-drop-hint { font-size: 11px; color: var(--dsw-alias-label-secondary); border: 1px dashed var(--dsw-alias-border-l1); border-radius: 6px; padding: 4px 6px; text-align: center; }
+.dsc-dialog--danger { border-color: var(--dsw-alias-state-error-primary); }
+.dsc-danger-text { color: var(--dsw-alias-state-error-primary); font-weight: 600; font-size: 12px; line-height: 1.5; }
+.dsc-check { display: flex; align-items: center; gap: 6px; font-size: 12px; }
 .dsc-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
 .dsc-extract-modes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
 .dsc-mode { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
@@ -3435,7 +4232,7 @@ video.dsc-picker-player { max-height: 180px; }
 .dsc-picker-name { font-size: 13px; line-height: 1.5; padding: 2px 0; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dsc-picker-card:hover .dsc-picker-name { color: var(--dsw-alias-brand-primary); }
 /* --- workflow tags: filter bar, chips, editor --- */
-.dsc-tag-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
+.dsc-tag-filter { display: flex; justify-content: flex-end; padding: 6px 0 2px; }
 .dsc-tag-chip { border: 1px solid var(--dsw-alias-border-l1); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; background: transparent; color: var(--dsw-alias-label-primary); }
 .dsc-tag-chip--active { background: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-layer-1); }
 .dsc-tag-chip--mini { font-size: 11px; padding: 1px 8px; cursor: default; border: 1px solid var(--dsw-alias-brand-primary); color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
@@ -3452,6 +4249,7 @@ video.dsc-picker-player { max-height: 180px; }
 .dsc-queue-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 .dsc-btn { border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; background: transparent; color: var(--dsw-alias-label-primary); }
 .dsc-btn--sm { padding: 1px 6px; font-size: 11px; }
+.dsc-input--sm { padding: 3px 6px; font-size: 12px; }
 .dsc-btn:disabled { opacity: 0.5; cursor: default; }
 .dsc-job-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 7px 10px; background: var(--dsw-alias-bg-layer-1); transition: background 0.12s, border-color 0.12s; }
 .dsc-job-item:hover { background: var(--dsw-alias-bg-layer-2); border-color: var(--dsw-alias-border-l2); }