dsh-comfyui 0.3.0-beta.6 → 0.5.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,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: "下一张",
@@ -60,6 +61,10 @@ window.__ModuleLoader__.load({
 			error: "出错",
 			refresh: "刷新",
 			ours: "本插件",
+			connChecking: "正在检测 ComfyUI 连接…",
+			connOk: "连接正常 · ComfyUI {version} · {ms} ms",
+			connFailTitle: "无法连接 ComfyUI",
+			connFailBody: "后端未能连上 ComfyUI（{message}）。请先启动本机 ComfyUI，确保后端能检测到其端口；若使用远程服务器，请到设置页检查服务器地址并点「测试连接」。",
 			wfAdd: "新建工作流",
 			wfName: "名称",
 			wfDesc: "概述",
@@ -130,7 +135,34 @@ window.__ModuleLoader__.load({
 			wfEmpty: "没有检测到任何工作流，请通过新建、导入或提取来创建执行流程。",
 			wfLibrarySection: "API 工作流",
 			wfRefresh: "刷新",
-			wfImportFile: "导入文件",
+			wfImportFile: "导入 JSON",
+			exportPresets: "导出预设",
+			importPresets: "导入预设",
+			transferExportTitle: "导出工作流预设",
+			transferImportTitle: "导入工作流预设",
+			transferExportHint: "共 {total} 个可导出工作流，已选 {selected} 个。运行参数与技能包会一并导出。",
+			transferSelectAll: "全选",
+			transferSelectNone: "全不选",
+			transferExportRun: "导出 ({n})",
+			transferImportRun: "导入 ({n})",
+			transferExporting: "正在导出…",
+			transferImporting: "正在导入…",
+			transferExportDone: "已导出 {n} 个工作流：{names}（浏览器正在下载预设包）",
+			transferExportFile: "文件 {file}（{size} KB）",
+			transferExportWarnings: "导出警告：{warnings}",
+			transferSelectedList: "将导出：{names}",
+			transferExportEmpty: "没有可导出的工作流",
+			transferPickFile: "点击选择或拖入 .zip 预设包",
+			transferPickHint: "导入会创建为新工作流，不会覆盖库中已有的工作流",
+			transferPackageInfo: "包内共 {n} 个工作流 · 导出于 {date}",
+			transferParamBadge: "参数 {n}",
+			transferSkillBadge: "技能包 · {n} 个文件",
+			transferSkillRequired: "技能包 · {n} 个文件 · 必读",
+			transferImportDone: "已导入 {n} 个工作流",
+			transferImportedItem: "✓ {src} → {dst}",
+			transferImportFailedItem: "✗ {src}：{reason}",
+			transferImportNote: "重名工作流自动追加（导入）后缀",
+			transferFinish: "完成",
 			wfComfyuiSection: "ComfyUI 工作流",
 			wfComfyuiHint: "面板自动检测 ComfyUI 中保存的工作流。\n注：非 API 流程，无法直接执行，需经过提取转化为 API 工作流，或自行导入 API 工作流即可执行。",
 			wfComfyuiEmpty: "ComfyUI 端没有检测到保存的工作流",
@@ -174,7 +206,7 @@ window.__ModuleLoader__.load({
 			skillBadgeRequired: "技能包·必读",
 			skillBadgeHint: "该工作流挂了技能包：Agent 运行前会读它。",
 			skillTitle: "技能包",
-			skillIntro: "技能包是写给 Agent 看的一份说明书：什么时候用这个工作流、关键参数怎么填、哪些环节容易翻车。它不会常驻在对话里——Agent 只有在 comfyui_workflow list 里看到摘要、并决定要用这个工作流时，才会读取正文；正文里点名的参考文档，它才会再去打开。适合参数多、坑多、或带风格合集的复杂工作流。",
+			skillIntro: "点击「启用技能包」后，可为这个工作流添加给 Agent 看的额外 skills 说明：什么时候用、参数怎么填、有哪些坑。",
 			skillEnable: "启用技能包",
 			skillDetach: "停用（保留文件）",
 			skillDestroy: "销毁技能包",
@@ -182,11 +214,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 +233,9 @@ window.__ModuleLoader__.load({
 			skillReveal: "📂 打开目录",
 			skillRevealHint: "在文件管理器中打开这个技能包的文件夹，方便直接拷贝文件进去。打开的是运行 DSH 那台机器上的目录；若你正从另一台机器访问本页面，请按下方显示的路径自行前往。",
 			skillRevealed: "已打开",
+			skillRefresh: "刷新",
+			skillRefreshHint: "重新读取技能包目录，显示 Agent 写入或文件管理器里新增/替换的文件。",
+			skillRefreshed: "已刷新",
 			skillNewDirPlaceholder: "目录名，如 templates",
 			skillNewDirHint: "技能包可以有任意一层子目录。常用：{presets}；也可以自己起名（字母/数字/汉字/下划线/连字符）。",
 			skillDirCreated: "已创建目录",
@@ -242,7 +276,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 +288,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 +314,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",
@@ -289,6 +324,10 @@ window.__ModuleLoader__.load({
 			error: "Error",
 			refresh: "Refresh",
 			ours: "ours",
+			connChecking: "Checking the ComfyUI connection…",
+			connOk: "Connected · ComfyUI {version} · {ms} ms",
+			connFailTitle: "Cannot reach ComfyUI",
+			connFailBody: "The backend could not reach ComfyUI ({message}). Start the local ComfyUI and make sure the backend can see its port; for a remote server, check the URL in settings and run \"Test connection\".",
 			wfAdd: "New workflow",
 			wfName: "Name",
 			wfDesc: "Overview",
@@ -359,7 +398,34 @@ window.__ModuleLoader__.load({
 			wfEmpty: "No workflows detected — create one via New, Import, or Extract.",
 			wfLibrarySection: "API workflows",
 			wfRefresh: "Refresh",
-			wfImportFile: "Import file",
+			wfImportFile: "Import JSON",
+			exportPresets: "Export presets",
+			importPresets: "Import presets",
+			transferExportTitle: "Export workflow presets",
+			transferImportTitle: "Import workflow presets",
+			transferExportHint: "{total} exportable workflows, {selected} selected. Parameters and skill packs are included.",
+			transferSelectAll: "Select all",
+			transferSelectNone: "Select none",
+			transferExportRun: "Export ({n})",
+			transferImportRun: "Import ({n})",
+			transferExporting: "Exporting…",
+			transferImporting: "Importing…",
+			transferExportDone: "Exported {n} workflows: {names} (the browser is downloading the package)",
+			transferExportFile: "File {file} ({size} KB)",
+			transferExportWarnings: "Export warnings: {warnings}",
+			transferSelectedList: "Will export: {names}",
+			transferExportEmpty: "No exportable workflows",
+			transferPickFile: "Click to choose, or drop a .zip preset package here",
+			transferPickHint: "Import creates new workflows — nothing in your library is overwritten",
+			transferPackageInfo: "{n} workflows in package · exported {date}",
+			transferParamBadge: "{n} params",
+			transferSkillBadge: "Skill pack · {n} files",
+			transferSkillRequired: "Skill pack · {n} files · required",
+			transferImportDone: "Imported {n} workflows",
+			transferImportedItem: "✓ {src} → {dst}",
+			transferImportFailedItem: "✗ {src}: {reason}",
+			transferImportNote: "Name clashes get an \"(imported)\" suffix",
+			transferFinish: "Done",
 			wfComfyuiSection: "ComfyUI workflows",
 			wfComfyuiHint: "Auto-detects workflows saved in ComfyUI.\nNote: these are UI graphs, not directly runnable — extract them into API workflows, or import an API workflow instead.",
 			wfComfyuiEmpty: "No workflows detected on the ComfyUI server",
@@ -403,7 +469,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 +477,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 +496,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",
@@ -991,49 +1059,49 @@ window.__ModuleLoader__.load({
 		* and the session-header trigger are separate registrations in one bundle,
 		* so they coordinate through this module-level store plus useSyncExternalStore.
 		*/
-		const listeners = /* @__PURE__ */ new Set();
+		const listeners$1 = /* @__PURE__ */ new Set();
 		let open = false;
 		let tab = "workflows";
 		let assetFilter = "";
-		function emit() {
-			for (const listener of listeners) listener();
+		function emit$1() {
+			for (const listener of listeners$1) listener();
 		}
 		const panelStore = {
 			isOpen: () => open,
 			toggle: () => {
 				open = !open;
-				emit();
+				emit$1();
 			},
 			open: () => {
 				if (!open) {
 					open = true;
-					emit();
+					emit$1();
 				}
 			},
 			close: () => {
 				if (open) {
 					open = false;
-					emit();
+					emit$1();
 				}
 			},
 			getTab: () => tab,
 			setTab: (next) => {
 				if (tab !== next) {
 					tab = next;
-					emit();
+					emit$1();
 				}
 			},
 			getAssetFilter: () => assetFilter,
 			setAssetFilter: (name) => {
 				if (assetFilter !== name) {
 					assetFilter = name;
-					emit();
+					emit$1();
 				}
 			},
 			subscribe(listener) {
-				listeners.add(listener);
+				listeners$1.add(listener);
 				return () => {
-					listeners.delete(listener);
+					listeners$1.delete(listener);
 				};
 			}
 		};
@@ -1046,10 +1114,132 @@ window.__ModuleLoader__.load({
 			return (0, react.useSyncExternalStore)(panelStore.subscribe, panelStore.getTab, panelStore.getTab);
 		}
 		//#endregion
+		//#region src/client/connection.tsx
+		/**
+		* Connection probe + reminder toast. Opening the panel used to give zero
+		* feedback when ComfyUI was down: the workflows/queue tabs just stayed empty
+		* with no explanation. The header trigger now fires a real backend probe
+		* (POST /comfyui/test → the host connects to the configured ComfyUI server —
+		* local port or remote URL alike); when it fails, the panel closes again —
+		* the trigger must not stay highlighted against a dead backend — and a fixed
+		* toast at the top of the page tells the user to start ComfyUI or fix the
+		* server address. The probe never blocks the panel: it opens immediately,
+		* the toast settles whenever the probe answers.
+		*/
+		const listeners = /* @__PURE__ */ new Set();
+		let state = { status: "hidden" };
+		/** Dedupe concurrent probes (rapid trigger clicks). */
+		let inFlight = null;
+		/** Skip re-probing while a "connected" verdict is still fresh. */
+		let lastOkAt = 0;
+		/** The ok toast only shows on fail→ok transitions, never on healthy opens. */
+		let hadFailure = false;
+		let okHideTimer = null;
+		function emit() {
+			for (const listener of listeners) listener();
+		}
+		function setState(next) {
+			state = next;
+			emit();
+		}
+		function clearOkTimer() {
+			if (okHideTimer !== null) {
+				clearTimeout(okHideTimer);
+				okHideTimer = null;
+			}
+		}
+		/** Close button on the toast; also ends the transient ok feedback early. */
+		function dismissConnectionToast() {
+			clearOkTimer();
+			if (state.status !== "hidden") setState({ status: "hidden" });
+		}
+		/**
+		* Probe the ComfyUI server through the host and surface the result as toast
+		* state. A success within the last 30s skips the round-trip entirely, so
+		* healthy repeated panel opens do not hammer the server; failures always
+		* re-probe on the next open (the user may have just started ComfyUI).
+		*/
+		function probeConnection() {
+			if (inFlight !== null) return inFlight;
+			if (Date.now() - lastOkAt < 3e4) return Promise.resolve();
+			if (state.status !== "fail") {
+				clearOkTimer();
+				setState({ status: "probing" });
+			}
+			inFlight = (async () => {
+				try {
+					const payload = await postJson("/comfyui/test", {});
+					if (payload.ok === true) {
+						lastOkAt = Date.now();
+						const recovered = hadFailure;
+						hadFailure = false;
+						if (recovered) {
+							setState({
+								status: "ok",
+								version: payload.version,
+								latencyMs: payload.latencyMs
+							});
+							clearOkTimer();
+							okHideTimer = setTimeout(dismissConnectionToast, 4e3);
+						} else setState({ status: "hidden" });
+					} else {
+						hadFailure = true;
+						setState({
+							status: "fail",
+							message: payload.error ?? "unknown error"
+						});
+						panelStore.close();
+					}
+				} catch (error) {
+					hadFailure = true;
+					setState({
+						status: "fail",
+						message: error instanceof Error ? error.message : String(error)
+					});
+					panelStore.close();
+				} finally {
+					inFlight = null;
+				}
+			})();
+			return inFlight;
+		}
+		function getConnState() {
+			return state;
+		}
+		function subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+		/** Fixed top-center status toast; mounted next to the header trigger so it
+		* renders (and can be dismissed) even when the panel is closed again. The
+		* probing variant fades in after a short CSS delay, so a fast successful
+		* probe never paints anything. */
+		function ConnectionToast({ t }) {
+			const conn = (0, react.useSyncExternalStore)(subscribe, getConnState, getConnState);
+			if (conn.status === "hidden") return null;
+			return (0, react.createElement)("div", {
+				className: `dsc-conn-toast dsc-conn-toast--${conn.status}`,
+				role: "status"
+			}, (0, react.createElement)("span", {
+				className: "dsc-conn-toast-dot",
+				"aria-hidden": true
+			}), (0, react.createElement)("div", { className: "dsc-conn-toast-body" }, conn.status === "fail" ? (0, react.createElement)("div", { className: "dsc-conn-toast-body-inner" }, (0, react.createElement)("div", { className: "dsc-conn-toast-title" }, t("connFailTitle")), (0, react.createElement)("div", { className: "dsc-conn-toast-text" }, t("connFailBody", { message: conn.message ?? "" }))) : (0, react.createElement)("div", { className: "dsc-conn-toast-title" }, conn.status === "probing" ? t("connChecking") : t("connOk", {
+				version: conn.version ?? "unknown",
+				ms: conn.latencyMs ?? 0
+			}))), (0, react.createElement)("button", {
+				className: "dsc-conn-toast-close",
+				"aria-label": t("close"),
+				onClick: dismissConnectionToast
+			}, "✕"));
+		}
+		//#endregion
 		//#region src/client/trigger.tsx
 		/**
 		* The session-header trigger (conversation.session.header.actions, id
-		* 'comfyui'): a labelled button that toggles the ComfyUI panel.
+		* 'comfyui'): a labelled button that toggles the ComfyUI panel, plus the
+		* connection reminder toast shown when the backend cannot reach ComfyUI.
 		*/
 		/**
 		* ComfyUI brand glyph (mono), inlined from @lobehub/icons-static-svg
@@ -1069,16 +1259,22 @@ window.__ModuleLoader__.load({
 				"aria-hidden": true
 			}, (0, react.createElement)("path", { d: "M5.485 23.76c-.568 0-1.026-.207-1.325-.598-.307-.402-.387-.964-.22-1.54l.672-2.315a.605.605 0 00-.1-.536.622.622 0 00-.494-.243H2.085c-.568 0-1.026-.207-1.325-.598-.307-.403-.387-.964-.22-1.54l2.31-7.917.255-.87c.343-1.18 1.592-2.14 2.786-2.14h2.313c.276 0 .519-.18.595-.442l.764-2.633C9.906 1.208 11.155.249 12.35.249l4.945-.008h3.62c.568 0 1.027.206 1.325.597.307.402.387.964.22 1.54l-1.035 3.566c-.343 1.178-1.593 2.137-2.787 2.137l-4.956.01H11.37a.618.618 0 00-.594.441l-1.928 6.604a.605.605 0 00.1.537c.118.153.3.243.495.243l3.275-.006h3.61c.568 0 1.026.206 1.325.598.307.402.387.964.22 1.54l-1.036 3.565c-.342 1.179-1.592 2.138-2.786 2.138l-4.957.01h-3.61z" }));
 		}
-		/** Header-action button toggling the ComfyUI panel. */
+		/** Header-action button toggling the ComfyUI panel. Opening it also fires a
+		* backend connectivity probe: when ComfyUI is down, a reminder toast explains
+		* why the panel stays empty instead of the click appearing to do nothing. */
 		function ComfyUITrigger({ t }) {
 			const open = usePanelOpen();
-			return (0, react.createElement)("button", {
+			return (0, react.createElement)(react.Fragment, null, (0, react.createElement)("button", {
 				className: "dsc-trigger",
 				title: t("panelTitle"),
 				"aria-label": t("panelTitle"),
 				"aria-pressed": open,
-				onClick: () => panelStore.toggle()
-			}, (0, react.createElement)("span", { className: "dsc-trigger-glyph" }, (0, react.createElement)(ComfyUIIcon)), (0, react.createElement)("span", null, t("panelTitle")));
+				onClick: () => {
+					const opening = !panelStore.isOpen();
+					panelStore.toggle();
+					if (opening) probeConnection();
+				}
+			}, (0, react.createElement)("span", { className: "dsc-trigger-glyph" }, (0, react.createElement)(ComfyUIIcon)), (0, react.createElement)("span", null, t("panelTitle"))), (0, react.createElement)(ConnectionToast, { t }));
 		}
 		//#endregion
 		//#region src/client/panel.tsx
@@ -1110,6 +1306,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 +2128,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 +2139,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 +2174,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 +2220,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 +2723,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 +2909,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 +2958,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 +2981,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 +3104,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", {
@@ -2875,6 +3161,8 @@ window.__ModuleLoader__.load({
 			const [busy, setBusy] = (0, react.useState)(false);
 			const [viewing, setViewing] = (0, react.useState)(null);
 			const [extract, setExtract] = (0, react.useState)(null);
+			/** Open transfer dialog: 'export' | 'import', null = closed. */
+			const [transfer, setTransfer] = (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. */
@@ -3078,6 +3366,25 @@ window.__ModuleLoader__.load({
 				onRun: (state) => runExtract(state),
 				onClose: () => setExtract(null)
 			});
+			if (transfer === "export") return (0, react.createElement)(ExportDialog, {
+				t,
+				workflows: list ?? [],
+				onClose: () => setTransfer(null),
+				onDone: (notice) => {
+					setTransfer(null);
+					setNotice(notice);
+					load();
+				}
+			});
+			if (transfer === "import") return (0, react.createElement)(ImportDialog, {
+				t,
+				onClose: () => setTransfer(null),
+				onDone: (notice) => {
+					setTransfer(null);
+					setNotice(notice);
+					load();
+				}
+			});
 			if (error !== null) return (0, react.createElement)("div", null, (0, react.createElement)(ErrorNote, {
 				t,
 				message: error
@@ -3286,6 +3593,20 @@ window.__ModuleLoader__.load({
 					event.target.value = "";
 				}
 			})), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => {
+					setError(null);
+					setTransfer("export");
+				}
+			}, t("exportPresets")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => {
+					setError(null);
+					setTransfer("import");
+				}
+			}, t("importPresets")), (0, react.createElement)("button", {
 				className: "dsc-btn",
 				disabled: busy,
 				onClick: () => void load()
@@ -3368,6 +3689,348 @@ window.__ModuleLoader__.load({
 				onClick: onClose
 			}, t("wfCancel")))));
 		}
+		/** Shared checkbox row for the transfer dialogs: name, badges, description. */
+		function TransferItem(props) {
+			return (0, react.createElement)("label", { className: "dsc-transfer-item" }, (0, react.createElement)("input", {
+				type: "checkbox",
+				checked: props.checked,
+				onChange: props.onToggle
+			}), (0, react.createElement)("span", {
+				className: "dsc-transfer-item-name",
+				title: props.name
+			}, props.name), props.paramBadge !== null ? (0, react.createElement)("span", { className: "dsc-badge" }, props.paramBadge) : null, props.skillBadge !== null ? (0, react.createElement)("span", { className: "dsc-badge dsc-badge--ok" }, props.skillBadge) : null, props.description !== "" ? (0, react.createElement)("span", {
+				className: "dsc-transfer-item-desc",
+				title: props.description
+			}, props.description) : null, props.warnings.length > 0 ? (0, react.createElement)("span", {
+				className: "dsc-transfer-item-desc dsc-danger-text",
+				title: props.warnings.join("；")
+			}, props.warnings.join("；")) : null);
+		}
+		/** While a transfer dialog is open, swallow drag events aimed at the host
+		* page. The conversation shell attaches dropped files to the chat with
+		* document-level bubble listeners, so dragging a preset toward the dialog
+		* also dropped it into the conversation. Window-capture listeners run before
+		* any document-bubble handler and shield everything OUTSIDE the dialog;
+		* events landing inside the dialog pass through — the dialog box itself must
+		* stopPropagation() them at React's dispatch root, or they bubble on to the
+		* document and the shell attaches the file anyway. */
+		function DragGuard() {
+			(0, react.useEffect)(() => {
+				const guard = (event) => {
+					if (event.target instanceof Element && event.target.closest(".dsc-transfer") !== null) return;
+					event.preventDefault();
+					event.stopPropagation();
+				};
+				for (const type of [
+					"dragenter",
+					"dragover",
+					"drop"
+				]) window.addEventListener(type, guard, true);
+				return () => {
+					for (const type of [
+						"dragenter",
+						"dragover",
+						"drop"
+					]) window.removeEventListener(type, guard, true);
+				};
+			}, []);
+			return null;
+		}
+		/** Export dialog: pick library workflows (checkboxes + select-all, all
+		* pre-selected) and download one preset package. Packaging happens host-side;
+		* the dialog lists, selects, and submits a native form download. */
+		function ExportDialog(props) {
+			const { t, workflows } = props;
+			const [selected, setSelected] = (0, react.useState)(() => new Set(workflows.map((workflow) => workflow.id)));
+			const [busy, setBusy] = (0, react.useState)(false);
+			const toggle = (id) => {
+				setSelected((prev) => {
+					const next = new Set(prev);
+					if (next.has(id)) next.delete(id);
+					else next.add(id);
+					return next;
+				});
+			};
+			const allSelected = workflows.length > 0 && selected.size === workflows.length;
+			const toggleAll = () => {
+				setSelected(allSelected ? /* @__PURE__ */ new Set() : new Set(workflows.map((workflow) => workflow.id)));
+			};
+			/** Download natively: a hidden form GETs `/comfyui/workflows/export/<file
+			* name>?ids=…` and the server answers with `content-disposition:
+			* attachment`, so the browser — not JS blob plumbing (fetch → blob →
+			* objectURL → revoke, which one environment turned into a 0-byte file) —
+			* owns the transfer. The page never navigates because the response is an
+			* attachment.
+			*
+			* GET with the name in the path is deliberate: this setup's download
+			* manager mangles POST downloads (renames them, or re-fetches the URL on
+			* its own), which is where the phantom "skills sometimes missing" zips
+			* came from. A GET is the one verb every manager handles correctly — and
+			* since the name rides in the URL, saved name == receipt name even under
+			* interception, and a manager's own re-fetch still gets a genuine export
+			* of the same ids (the route is a pure read).
+			*
+			* The form response is invisible to JS, so the notice is fed from
+			* `export/last` — the server's record of what it ACTUALLY packaged — not
+			* from the checkboxes. */
+			const exportSelected = () => {
+				if (busy) return;
+				setBusy(true);
+				(async () => {
+					let previousAt = null;
+					try {
+						previousAt = (await getJson("/comfyui/workflows/export/last")).last?.at ?? null;
+					} catch {}
+					const now = /* @__PURE__ */ new Date();
+					const p = (n, width = 2) => String(n).padStart(width, "0");
+					const filename = `dsh-comfyui-presets-${now.getFullYear()}${p(now.getMonth() + 1)}${p(now.getDate())}-${p(now.getHours())}${p(now.getMinutes())}${p(now.getSeconds())}-${p(now.getMilliseconds(), 3)}-${Math.random().toString(36).slice(2, 8)}.zip`;
+					const form = document.createElement("form");
+					form.method = "GET";
+					form.action = `/comfyui/workflows/export/${filename}`;
+					form.style.display = "none";
+					for (const id of selected) {
+						const input = document.createElement("input");
+						input.type = "hidden";
+						input.name = "ids";
+						input.value = id;
+						form.append(input);
+					}
+					document.body.append(form);
+					form.submit();
+					form.remove();
+					let last = null;
+					for (let attempt = 0; attempt < 10 && last === null; attempt++) {
+						await new Promise((resolve) => window.setTimeout(resolve, 350));
+						try {
+							const payload = await getJson("/comfyui/workflows/export/last");
+							if (payload.last !== null && payload.last.at !== previousAt) last = payload.last;
+						} catch {}
+					}
+					const names = (last?.names ?? selectedNames()).join("、");
+					let notice = t("transferExportDone", {
+						n: last?.count ?? selected.size,
+						names
+					});
+					if (last !== null) notice += " " + t("transferExportFile", {
+						file: last.filename,
+						size: Math.max(1, Math.round(last.size / 1024))
+					});
+					if (last !== null && last.warnings.length > 0) notice += " " + t("transferExportWarnings", { warnings: last.warnings.join("；") });
+					props.onDone(notice);
+				})();
+			};
+			/** Names behind the current selection, dialog order, with pack-bearing
+			* entries annotated. Shown next to the submit button so "what will be
+			* packaged — and will it carry skills" is readable at the decision point:
+			* a selection that happens to exclude the one pack-bearing workflow looks
+			* exactly like "skills export unreliably" from the zip alone. */
+			const selectedNames = () => workflows.filter((workflow) => selected.has(workflow.id)).map((workflow) => workflow.skillDir !== void 0 ? `${workflow.name} (${t("skillBadge")})` : workflow.name);
+			return (0, react.createElement)("div", {
+				className: "dsc-picker-overlay",
+				onClick: props.onClose
+			}, (0, react.createElement)(DragGuard), (0, react.createElement)("div", {
+				className: "dsc-transfer",
+				onClick: (event) => event.stopPropagation(),
+				onDragEnter: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onDragOver: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onDrop: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			}, (0, react.createElement)("div", { className: "dsc-transfer-head" }, (0, react.createElement)("span", { className: "dsc-transfer-title" }, t("transferExportTitle")), (0, react.createElement)("button", {
+				className: "dsc-panel-close",
+				"aria-label": t("close"),
+				onClick: props.onClose
+			}, "✕")), workflows.length === 0 ? (0, react.createElement)("div", { className: "dsc-transfer-empty" }, t("transferExportEmpty")) : (0, react.createElement)("div", { className: "dsc-transfer-body" }, (0, react.createElement)("div", { className: "dsc-transfer-bar" }, (0, react.createElement)("span", { className: "dsc-hint" }, t("transferExportHint", {
+				total: workflows.length,
+				selected: selected.size
+			})), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				onClick: toggleAll
+			}, allSelected ? t("transferSelectNone") : t("transferSelectAll"))), (0, react.createElement)("div", { className: "dsc-transfer-list" }, workflows.map((workflow) => (0, react.createElement)(TransferItem, {
+				key: workflow.id,
+				name: workflow.name,
+				description: workflow.description,
+				paramBadge: (workflow.parameters ?? []).length > 0 ? t("transferParamBadge", { n: (workflow.parameters ?? []).length }) : null,
+				skillBadge: workflow.skillDir !== void 0 ? t("skillBadge") : null,
+				warnings: [],
+				checked: selected.has(workflow.id),
+				onToggle: () => toggle(workflow.id)
+			})))), selected.size > 0 ? (0, react.createElement)("div", { className: "dsc-transfer-note" }, (0, react.createElement)("span", {
+				className: "dsc-hint",
+				title: selectedNames().join("、")
+			}, t("transferSelectedList", { names: selectedNames().join("、") }))) : null, (0, react.createElement)("div", { className: "dsc-transfer-actions" }, workflows.length === 0 ? null : (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--primary",
+				disabled: busy || selected.size === 0,
+				onClick: () => exportSelected()
+			}, busy ? t("transferExporting") : t("transferExportRun", { n: selected.size })), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: props.onClose
+			}, t("cancel")))));
+		}
+		/** Import dialog: choose a preset package (file picker or drag-drop), see
+		* what it offers, then import the selection as NEW workflows. The file is
+		* POSTed twice by design — analyze and apply parse the same bytes, so the
+		* host needs no temp-file staging or cleanup. */
+		function ImportDialog(props) {
+			const { t } = props;
+			const [file, setFile] = (0, react.useState)(null);
+			const [analysis, setAnalysis] = (0, react.useState)(null);
+			const [selected, setSelected] = (0, react.useState)(/* @__PURE__ */ new Set());
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(null);
+			const [results, setResults] = (0, react.useState)(null);
+			const [imported, setImported] = (0, react.useState)(0);
+			const [dragOver, setDragOver] = (0, react.useState)(false);
+			/** Phase 1: upload the package for analysis (no server-side writes). */
+			const analyze = async (picked) => {
+				setBusy(true);
+				setError(null);
+				try {
+					const data = await postRaw("/comfyui/workflows/import/analyze", await picked.arrayBuffer());
+					if (data.ok !== true || data.analysis === void 0) throw new Error(data.error ?? "failed to analyze");
+					setFile(picked);
+					setAnalysis(data.analysis);
+					setSelected(new Set(data.analysis.workflows.map((entry) => entry.index)));
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				} finally {
+					setBusy(false);
+				}
+			};
+			const toggle = (index) => {
+				setSelected((prev) => {
+					const next = new Set(prev);
+					if (next.has(index)) next.delete(index);
+					else next.add(index);
+					return next;
+				});
+			};
+			const allSelected = analysis !== null && analysis.workflows.length > 0 && selected.size === analysis.workflows.length;
+			const toggleAll = () => {
+				if (analysis === null) return;
+				setSelected(allSelected ? /* @__PURE__ */ new Set() : new Set(analysis.workflows.map((entry) => entry.index)));
+			};
+			/** Phase 2: re-upload the same bytes with the selection as manifest indexes. */
+			const importSelected = async () => {
+				if (file === null) return;
+				setBusy(true);
+				setError(null);
+				try {
+					const bytes = await file.arrayBuffer();
+					const data = await postRaw(`/comfyui/workflows/import/apply?select=${[...selected].join(",")}`, bytes);
+					if (data.ok !== true || data.results === void 0) throw new Error(data.error ?? "failed to import");
+					setResults(data.results);
+					setImported(data.imported ?? 0);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				} finally {
+					setBusy(false);
+				}
+			};
+			const finish = () => {
+				if (imported > 0) props.onDone(t("transferImportDone", { n: imported }));
+				else props.onClose();
+			};
+			return (0, react.createElement)("div", {
+				className: "dsc-picker-overlay",
+				onClick: props.onClose
+			}, (0, react.createElement)(DragGuard), (0, react.createElement)("div", {
+				className: "dsc-transfer",
+				onClick: (event) => event.stopPropagation(),
+				onDragEnter: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onDragOver: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onDrop: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			}, (0, react.createElement)("div", { className: "dsc-transfer-head" }, (0, react.createElement)("span", { className: "dsc-transfer-title" }, t("transferImportTitle")), (0, react.createElement)("button", {
+				className: "dsc-panel-close",
+				"aria-label": t("close"),
+				onClick: props.onClose
+			}, "✕")), (0, react.createElement)("div", { className: "dsc-transfer-body" }, results !== null ? (0, react.createElement)("div", { className: "dsc-transfer-list" }, results.map((outcome) => (0, react.createElement)("div", {
+				key: outcome.index,
+				className: `dsc-transfer-item dsc-transfer-item--static${outcome.ok ? " dsc-transfer-item--ok" : " dsc-transfer-item--fail"}`
+			}, (0, react.createElement)("span", {
+				className: "dsc-transfer-item-name",
+				title: outcome.name
+			}, outcome.ok ? t("transferImportedItem", {
+				src: outcome.name,
+				dst: outcome.newName ?? ""
+			}) : t("transferImportFailedItem", {
+				src: outcome.name,
+				reason: outcome.error ?? ""
+			})), outcome.warnings.length > 0 ? (0, react.createElement)("span", {
+				className: "dsc-transfer-item-desc",
+				title: outcome.warnings.join("；")
+			}, outcome.warnings.join("；")) : null))) : analysis === null ? (0, react.createElement)("label", {
+				className: `dsc-transfer-drop${dragOver ? " dsc-transfer-drop--over" : ""}`,
+				onDragOver: (event) => {
+					event.preventDefault();
+					setDragOver(true);
+				},
+				onDragLeave: () => setDragOver(false),
+				onDrop: (event) => {
+					event.preventDefault();
+					setDragOver(false);
+					const dropped = event.dataTransfer?.files?.[0];
+					if (dropped !== void 0) analyze(dropped);
+				}
+			}, (0, react.createElement)("input", {
+				type: "file",
+				accept: ".zip,application/zip,application/x-zip-compressed",
+				style: { display: "none" },
+				onChange: (event) => {
+					const picked = event.target.files?.[0];
+					if (picked !== void 0) analyze(picked);
+					event.target.value = "";
+				}
+			}), busy ? t("transferImporting") : t("transferPickFile")) : (0, react.createElement)("div", { className: "dsc-transfer-body" }, (0, react.createElement)("div", { className: "dsc-transfer-bar" }, (0, react.createElement)("span", { className: "dsc-hint" }, t("transferPackageInfo", {
+				n: analysis.workflows.length,
+				date: formatTs(analysis.exportedAt)
+			})), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--sm",
+				onClick: toggleAll
+			}, allSelected ? t("transferSelectNone") : t("transferSelectAll"))), (0, react.createElement)("div", { className: "dsc-transfer-list" }, analysis.workflows.map((entry) => (0, react.createElement)(TransferItem, {
+				key: entry.index,
+				name: entry.name,
+				description: entry.description,
+				paramBadge: entry.paramCount > 0 ? t("transferParamBadge", { n: entry.paramCount }) : null,
+				skillBadge: entry.skill !== null ? entry.skill.required ? t("transferSkillRequired", { n: entry.skill.fileCount }) : t("transferSkillBadge", { n: entry.skill.fileCount }) : null,
+				warnings: entry.warnings,
+				checked: selected.has(entry.index),
+				onToggle: () => toggle(entry.index)
+			})))), error !== null ? (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}) : null, analysis !== null && results === null ? (0, react.createElement)("div", { className: "dsc-hint" }, t("transferImportNote")) : null, analysis === null && results === null ? (0, react.createElement)("div", { className: "dsc-hint" }, t("transferPickHint")) : null), (0, react.createElement)("div", { className: "dsc-transfer-actions" }, results !== null ? (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--primary",
+				onClick: finish
+			}, t("transferFinish")) : analysis !== null ? (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--primary",
+				disabled: busy || selected.size === 0,
+				onClick: () => {
+					importSelected();
+				}
+			}, busy ? t("transferImporting") : t("transferImportRun", { n: selected.size })) : null, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: results !== null ? finish : props.onClose
+			}, t("cancel")))));
+		}
 		/** Read-only inspection of a ComfyUI-side saved workflow: node list + JSON. */
 		function WorkflowView(props) {
 			const nodes = Array.isArray(props.graph.nodes) ? props.graph.nodes.filter((node) => node.mode !== 4 && typeof node.type === "string" && node.type !== "") : [];
@@ -3894,6 +4557,40 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .dsc-trigger:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); border-color: var(--dsw-alias-border-l1); }
 .dsc-trigger[aria-pressed='true'] { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }
 .dsc-trigger-glyph { font-size: 13px; line-height: 1; }
+/* --- connection reminder toast: fixed at the top of the page, mounted by the
+   header trigger when the backend probe cannot reach ComfyUI. The probing
+   state fades in after a short delay so a fast successful probe never paints;
+   the fail state is sticky until dismissed or a later probe recovers. --- */
+.dsc-conn-toast {
+  position: fixed; top: 14px; left: 50%;
+  z-index: 980;
+  display: flex; align-items: flex-start; gap: 10px;
+  max-width: min(560px, 92vw);
+  padding: 10px 12px;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3);
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px; line-height: 1.5;
+  animation: dsc-conn-toast-in 0.16s ease-out both;
+}
+.dsc-conn-toast--probing { animation-delay: 0.45s; }
+.dsc-conn-toast--ok { border-color: var(--dsw-alias-state-success-primary); }
+.dsc-conn-toast--fail { border-color: var(--dsw-alias-state-error-primary); }
+.dsc-conn-toast-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
+.dsc-conn-toast--probing .dsc-conn-toast-dot { background: var(--dsw-alias-state-warn-primary); animation: dsc-conn-dot 1s ease-in-out infinite; }
+.dsc-conn-toast--ok .dsc-conn-toast-dot { background: var(--dsw-alias-state-success-primary); }
+.dsc-conn-toast--fail .dsc-conn-toast-dot { background: var(--dsw-alias-state-error-primary); }
+.dsc-conn-toast-body { min-width: 0; }
+.dsc-conn-toast-title { font-weight: 600; }
+.dsc-conn-toast--fail .dsc-conn-toast-title { color: var(--dsw-alias-state-error-primary); }
+.dsc-conn-toast--ok .dsc-conn-toast-title { color: var(--dsw-alias-state-success-primary); }
+.dsc-conn-toast-text { color: var(--dsw-alias-label-secondary); margin-top: 2px; overflow-wrap: anywhere; }
+.dsc-conn-toast-close { flex: none; border: none; background: transparent; color: var(--dsw-alias-label-tertiary); cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1; }
+.dsc-conn-toast-close:hover { color: var(--dsw-alias-label-primary); }
+@keyframes dsc-conn-toast-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
+@keyframes dsc-conn-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
 /* --- panel shell: floating window, percentage-anchored to the page header
    (top) and the composer (bottom), draggable by the header and resizable via
    the corner handle. Follows the host light/dark theme. --- */
@@ -3926,6 +4623,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 +4676,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;
@@ -4191,6 +4896,28 @@ video.dsc-picker-player { max-height: 180px; }
 .dsc-param-random { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--dsw-alias-label-secondary); cursor: pointer; }
 .dsc-param-bool { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dsw-alias-label-primary); cursor: pointer; }
 .dsc-param-advanced { display: flex; flex-direction: column; gap: 8px; border: 1px dashed var(--dsw-alias-border-l2); border-radius: 8px; padding: 8px; }
+/* --- workflow preset transfer dialogs (export / import) --- */
+.dsc-transfer { position: relative; display: flex; flex-direction: column; width: min(580px, 92vw); max-height: min(640px, 86vh); background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l2); border-radius: 12px; box-shadow: 0 16px 56px rgba(0, 0, 0, 0.5); overflow: hidden; }
+.dsc-transfer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
+.dsc-transfer-title { font-weight: 600; font-size: 13px; color: var(--dsw-alias-label-primary); }
+.dsc-transfer-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; overflow-y: auto; min-height: 0; }
+.dsc-transfer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.dsc-transfer-list { display: flex; flex-direction: column; gap: 4px; }
+.dsc-transfer-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--dsw-alias-label-primary); }
+.dsc-transfer-item:hover { border-color: var(--dsw-alias-brand-primary); }
+.dsc-transfer-item--static, .dsc-transfer-item--static:hover { cursor: default; border-color: var(--dsw-alias-border-l1); }
+.dsc-transfer-item--ok { border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary) 45%, transparent); }
+.dsc-transfer-item--fail { border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 45%, transparent); }
+.dsc-transfer-item-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
+.dsc-transfer-item-desc { color: var(--dsw-alias-label-tertiary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 40px; text-align: right; }
+.dsc-transfer-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid var(--dsw-alias-border-l1); }
+.dsc-transfer-note { padding: 6px 12px 0; }
+.dsc-transfer-note .dsc-hint { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dsc-transfer-drop { display: flex; align-items: center; justify-content: center; min-height: 150px; border: 1px dashed var(--dsw-alias-border-l2); border-radius: 10px; color: var(--dsw-alias-label-secondary); font-size: 13px; cursor: pointer; text-align: center; padding: 12px; transition: border-color 0.12s, color 0.12s; }
+.dsc-transfer-drop:hover, .dsc-transfer-drop--over { border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-brand-primary); }
+.dsc-transfer-empty { padding: 40px 12px; text-align: center; color: var(--dsw-alias-label-tertiary); font-size: 13px; }
+.dsc-btn--primary { background: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-layer-1); }
+.dsc-btn--primary:disabled { opacity: 0.5; cursor: default; }
 `;
 		/** Inject the stylesheet once (idempotent), owned by this plugin for HMR. */
 		function injectStyles() {