dsh-comfyui 0.3.0-beta.6 → 0.4.0

package/README.en.md

@@ -16,6 +16,15 @@
   <img src="https://img.shields.io/npm/l/dsh-comfyui" alt="license" />
 </p>
 
+> **Version pairing (pick the right dsh before installing, otherwise dshmarket shows a risk banner)**:
+>
+> | dsh-comfyui | Paired DeepSeek Harness | Notes |
+> | --- | --- | --- |
+> | **0.4.0 (latest, `latest` tag)** | **>= 0.1.2** | From 0.4.0 this plugin uses the new settings service API |
+> | **0.3.x (beta line, `beta` tag)** | **0.1.1** | On older dsh versions stay on the 0.3.x line |
+>
+> Install: `dsh plugin --profile web add dsh-comfyui` (latest 0.4.0) / `dsh plugin --profile web add dsh-comfyui@beta` (0.3.x for older hosts).
+
 ## Features
 
 ### Agent tools

package/README.md

@@ -16,6 +16,15 @@
   <img src="https://img.shields.io/npm/l/dsh-comfyui" alt="license" />
 </p>
 
+> **版本配对（选对 dsh 版本再装，否则 dshmarket 会报风险提示）**：
+>
+> | dsh-comfyui | 配对的 DeepSeek Harness | 说明 |
+> | --- | --- | --- |
+> | **0.4.0（最新，`latest` tag）** | **≥ 0.1.2** | 0.4.0 起使用新版 settings 服务 API |
+> | **0.3.x（beta 线，`beta` tag）** | **0.1.1** | 老版本 dsh 请留在 0.3.x 线 |
+>
+> 安装：`dsh plugin --profile web add dsh-comfyui`（装最新 0.4.0）/ `dsh plugin --profile web add dsh-comfyui@beta`（老宿主装 0.3.x）。
+
 ## 功能
 
 ### Agent 工具

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,16 +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}",
+			skillsDirHint: "工作流技能包（SKILL.md 与参考文档）目录。留空 = 数据目录下 skills/；填绝对路径可放到别的盘或同步盘。改后需手动搬移已有目录。当前实际使用：{current}",
 			language: "界面语言",
-			languageHint: "切换插件界面语言（中文 / English）。切换后页面会自动刷新。",
+			languageHint: "界面语言，切换后页面自动刷新。",
 			cardGenerating: "ComfyUI 生成中…",
 			cardBackground: "后台任务",
 			cardBackgroundDone: "已完成",
@@ -51,6 +51,7 @@ window.__ModuleLoader__.load({
 			cardMode: "模式",
 			cardListed: "已列出 {runs} 个运行工作流，{graphs} 个图工作流",
 			panelTitle: "ComfyUI 面板",
+			panelReset: "复位位置与大小",
 			close: "关闭",
 			lbPrev: "上一张",
 			lbNext: "下一张",
@@ -174,7 +175,7 @@ window.__ModuleLoader__.load({
 			skillBadgeRequired: "技能包·必读",
 			skillBadgeHint: "该工作流挂了技能包：Agent 运行前会读它。",
 			skillTitle: "技能包",
-			skillIntro: "技能包是写给 Agent 看的一份说明书：什么时候用这个工作流、关键参数怎么填、哪些环节容易翻车。它不会常驻在对话里——Agent 只有在 comfyui_workflow list 里看到摘要、并决定要用这个工作流时，才会读取正文；正文里点名的参考文档，它才会再去打开。适合参数多、坑多、或带风格合集的复杂工作流。",
+			skillIntro: "点击「启用技能包」后，可为这个工作流添加给 Agent 看的额外 skills 说明：什么时候用、参数怎么填、有哪些坑。",
 			skillEnable: "启用技能包",
 			skillDetach: "停用（保留文件）",
 			skillDestroy: "销毁技能包",
@@ -182,11 +183,10 @@ window.__ModuleLoader__.load({
 			skillDestroyConfirmButton: "确认销毁",
 			skillDropHint: "可把文件拖到这里导入",
 			skillRequired: "运行前必读",
-			skillRequiredHint: "勾选后，Agent 未读技能包就调用本工作流会被拒绝并提示先读。",
 			skillDir: "目录",
 			skillSummary: "摘要",
 			skillSummaryPlaceholder: "一句话说明这个工作流适合做什么",
-			skillSummaryHint: "这句话会出现在 comfyui_workflow list 里，Agent 靠它决定要不要读正文。建议 40 字以内。",
+			skillSummaryHint: "Agent 靠它决定要不要读正文，等同 skills 里的 description 字段。",
 			skillSave: "保存",
 			skillSaved: "已保存",
 			skillDirty: "未保存",
@@ -202,6 +202,9 @@ window.__ModuleLoader__.load({
 			skillReveal: "📂 打开目录",
 			skillRevealHint: "在文件管理器中打开这个技能包的文件夹，方便直接拷贝文件进去。打开的是运行 DSH 那台机器上的目录；若你正从另一台机器访问本页面，请按下方显示的路径自行前往。",
 			skillRevealed: "已打开",
+			skillRefresh: "刷新",
+			skillRefreshHint: "重新读取技能包目录，显示 Agent 写入或文件管理器里新增/替换的文件。",
+			skillRefreshed: "已刷新",
 			skillNewDirPlaceholder: "目录名，如 templates",
 			skillNewDirHint: "技能包可以有任意一层子目录。常用：{presets}；也可以自己起名（字母/数字/汉字/下划线/连字符）。",
 			skillDirCreated: "已创建目录",
@@ -242,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",
@@ -254,16 +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: "Where skill packs live (each workflow SKILL.md and its reference files). Empty means skills/ under the plugin data directory. An absolute path keeps these documents on another drive, in a synced folder, or under version control; a relative path is ignored. Changing this does not move existing packs — move the folders yourself. Currently in use: {current}",
+			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",
@@ -280,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",
@@ -403,7 +407,7 @@ window.__ModuleLoader__.load({
 			skillBadgeRequired: "Skill pack (required)",
 			skillBadgeHint: "This workflow has a skill pack: the agent reads it before running.",
 			skillTitle: "Skill pack",
-			skillIntro: "A skill pack is a manual written for the agent: when to use this workflow, how to fill its key parameters, which stages go wrong. It never sits in the conversation — the agent sees only a one-line summary in comfyui_workflow list, loads the body when it picks this workflow, and opens a reference file only when the body points at one. Worth it for workflows with many parameters, real pitfalls, or a collection of style presets.",
+			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",
@@ -411,11 +415,10 @@ window.__ModuleLoader__.load({
 			skillDestroyConfirmButton: "Destroy",
 			skillDropHint: "Drop files here to import",
 			skillRequired: "Required before running",
-			skillRequiredHint: "When checked, running this workflow is refused until the agent has loaded the pack.",
 			skillDir: "Directory",
 			skillSummary: "Summary",
 			skillSummaryPlaceholder: "One line on what this workflow is for",
-			skillSummaryHint: "This line appears in comfyui_workflow list; the agent uses it to decide whether to load the body. Keep it short.",
+			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",
@@ -431,6 +434,9 @@ window.__ModuleLoader__.load({
 			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",
@@ -1110,6 +1116,41 @@ 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 = [
@@ -1897,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);
@@ -1908,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") {
@@ -1934,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) => ({
@@ -1978,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"),
@@ -2470,6 +2533,28 @@ window.__ModuleLoader__.load({
 					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]);
@@ -2634,6 +2719,12 @@ window.__ModuleLoader__.load({
 			/** 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(),
@@ -2677,7 +2768,12 @@ window.__ModuleLoader__.load({
 				disabled: busy,
 				title: t("skillRevealHint"),
 				onClick: () => void revealDir()
-			}, t("skillReveal"))), creatingDir === null ? null : (0, react.createElement)("div", { className: "dsc-skill-create" }, (0, react.createElement)("input", {
+			}, 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"),
@@ -2695,14 +2791,14 @@ window.__ModuleLoader__.load({
 			}, 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 : (0, react.createElement)("div", {
-				key: bucket.label === "" ? "." : bucket.label,
+			}, 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.label !== "" ? (0, react.createElement)("div", { className: "dsc-skill-bucket-name" }, `${bucket.label}/`) : null, bucket.items.map((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)))))), creating === null ? null : (0, react.createElement)("div", { className: "dsc-skill-create" }, (0, react.createElement)("select", {
+			}, 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({
@@ -2818,7 +2914,7 @@ window.__ModuleLoader__.load({
 					action: "require",
 					required: event.target.checked
 				})
-			}), t("skillRequired")), (0, react.createElement)("span", { className: "dsc-hint" }, t("skillRequiredHint"))), pack !== null ? (0, react.createElement)("div", {
+			}), 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", {
@@ -3926,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); }
@@ -3976,7 +4075,12 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .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; }
-.dsc-skill-bucket-name { font-size: 11px; color: var(--dsw-alias-label-secondary); margin-top: 4px; }
+/* 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;