dsh-comfyui 0.4.0 → 0.5.1

package/client/client.js

@@ -61,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: "概述",
@@ -131,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 端没有检测到保存的工作流",
@@ -293,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",
@@ -363,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",
@@ -997,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);
 				};
 			}
 		};
@@ -1052,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
@@ -1075,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
@@ -2971,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. */
@@ -3174,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
@@ -3382,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()
@@ -3403,6 +3628,10 @@ window.__ModuleLoader__.load({
 							...state,
 							error: data.error ?? "failed to analyze"
 						});
+						else if (data.analysis.ok !== true) onUpdate({
+							...state,
+							error: data.analysis.error
+						});
 						else onUpdate({
 							...state,
 							analysis: data.analysis,
@@ -3464,6 +3693,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 !== "") : [];
@@ -3990,6 +4561,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. --- */
@@ -4295,6 +4900,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() {