dsh-comfyui 0.3.0-beta.2 → 0.3.0-beta.4

package/client/client.js

@@ -73,9 +73,16 @@ window.__ModuleLoader__.load({
 			wfUploaded: "已上传",
 			wfCopyName: "复制文件名",
 			wfLoadArea: "加载区",
-			wfLoadHint: "点击选择图像（加载区选中的图像将作为图生图的默认源图）",
-			wfLoadEmpty: "未选择图像，点击选择",
+			wfLoadHint: "点击放入素材（加载区的素材按顺序填入工作流未指定的加载参数）",
+			wfLoadEmpty: "加载区为空，点击下方“添加加载区”放入素材",
 			wfLoadPicked: "已加载",
+			wfLoadAddSlot: "＋ 添加加载区",
+			wfLoadAddMedia: "添加素材",
+			wfLoadRemoveSlot: "删除加载区",
+			wfLoadNone: "空",
+			wfLoadNoneHint: "清空该加载位（保留加载位，不放素材）",
+			wfLoadSlotLabel: "加载位",
+			wfLoadSummary: "加载位 {slots} 个 · 已放入 {loaded} 个素材，未指定的加载参数按顺序取用",
 			wfTabAll: "全部",
 			wfTabImported: "已导入",
 			wfTabGenerated: "已生成",
@@ -147,6 +154,14 @@ window.__ModuleLoader__.load({
 			assetBack: "返回",
 			assetEmpty: "还没有生成记录。运行工作流后，结果会出现在这里。",
 			assetGone: "源文件已被 ComfyUI 清理",
+			assetDelete: "删除资产",
+			assetDeleteTitle: "删除该资产？",
+			assetDeleteBody: "将从资产库移除这条记录，并删除 ComfyUI 输出目录里的 {count} 个文件。此操作不可恢复。",
+			assetDeleteNoDir: "未能定位 ComfyUI 输出目录，只会移除资产记录，磁盘文件保留（可在 cordis.yml 的 outputDir 里指定输出目录）。",
+			assetDeleteDone: "已删除记录，磁盘文件删除 {deleted} 个",
+			assetDeleteFailed: "删除失败：{message}",
+			confirmDelete: "确定删除",
+			cancel: "取消",
 			queueEmpty: "当前没有任务",
 			queueError: "无法读取队列（ComfyUI 未运行？）",
 			jobFilterLabel: "历史",
@@ -234,9 +249,16 @@ window.__ModuleLoader__.load({
 			wfUploaded: "Uploaded",
 			wfCopyName: "Copy file name",
 			wfLoadArea: "Load area",
-			wfLoadHint: "Click to pick an image (the selection becomes the default source for image-to-image)",
-			wfLoadEmpty: "No image selected — click to pick",
+			wfLoadHint: "Click to put media in this slot (slots fill the workflow unset loader parameters in order)",
+			wfLoadEmpty: "Load area is empty — use \"Add slot\" below to put media in it",
 			wfLoadPicked: "Loaded",
+			wfLoadAddSlot: "+ Add slot",
+			wfLoadAddMedia: "Add media",
+			wfLoadRemoveSlot: "Delete slot",
+			wfLoadNone: "None",
+			wfLoadNoneHint: "Empty this slot (the slot stays, with no media)",
+			wfLoadSlotLabel: "Slot",
+			wfLoadSummary: "{slots} slot(s) · {loaded} loaded; unset loader parameters take them in order",
 			wfTabAll: "All",
 			wfTabImported: "Imported",
 			wfTabGenerated: "Generated",
@@ -308,6 +330,14 @@ window.__ModuleLoader__.load({
 			assetBack: "Back",
 			assetEmpty: "Nothing generated yet. Results appear here after workflows run.",
 			assetGone: "Source file evicted by ComfyUI",
+			assetDelete: "Delete asset",
+			assetDeleteTitle: "Delete this asset?",
+			assetDeleteBody: "Removes the record from the asset library and deletes {count} file(s) from the ComfyUI output directory. This cannot be undone.",
+			assetDeleteNoDir: "The ComfyUI output directory could not be located, so only the record is removed and the files stay on disk (set outputDir in cordis.yml to enable file deletion).",
+			assetDeleteDone: "Record removed, {deleted} file(s) deleted",
+			assetDeleteFailed: "Delete failed: {message}",
+			confirmDelete: "Delete",
+			cancel: "Cancel",
 			queueEmpty: "No tasks right now",
 			queueError: "Cannot read the queue (ComfyUI not running?)",
 			jobFilterLabel: "History",
@@ -947,6 +977,33 @@ window.__ModuleLoader__.load({
 			return `/comfyui/media?file=${encodeURIComponent(preview.filename)}&subfolder=${encodeURIComponent(preview.subfolder ?? "")}&type=${encodeURIComponent(preview.type ?? "output")}`;
 		}
 		/** Opens a generated image in a large overlay with prev/next navigation. */
+		/** Whether a node input is fed by a link ([nodeId, slot]) rather than a widget value. */
+		function isLinkValue(value) {
+			return Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "number";
+		}
+		/** Short description of a node input's current value, for the advanced
+		* picker's dropdown. */
+		function inputValueKind(value) {
+			if (value === null) return "null";
+			if (Array.isArray(value)) return "array";
+			if (typeof value === "object") return "object";
+			return typeof value;
+		}
+		/** Read a parameter default as a boolean. Defaults saved before the editor
+		* had a checkbox are strings ("true"/"false"), so they are coerced here rather
+		* than silently reading as `true` for every non-empty string. */
+		function asBool(value) {
+			if (typeof value === "boolean") return value;
+			if (typeof value === "number") return value !== 0;
+			return /^(true|1|yes|on)$/i.test(value.trim());
+		}
+		/** Tooltip for a number field: the declared type and bounds, when known. */
+		function numberRangeHint(param) {
+			const parts = [param.numberKind ?? "number"];
+			if (param.min !== void 0 || param.max !== void 0) parts.push(`${param.min ?? "-∞"} ~ ${param.max ?? "∞"}`);
+			if (param.step !== void 0) parts.push(`step ${param.step}`);
+			return parts.join(" · ");
+		}
 		function newParamId() {
 			if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") return crypto.randomUUID();
 			return `p${Date.now().toString(36)}${Math.floor(Math.random() * 1e6).toString(36)}`;
@@ -1263,6 +1320,7 @@ window.__ModuleLoader__.load({
 			const [recognizing, setRecognizing] = (0, react.useState)(false);
 			const [recognizeError, setRecognizeError] = (0, react.useState)(null);
 			const [uploading, setUploading] = (0, react.useState)({});
+			const [numDraft, setNumDraft] = (0, react.useState)({});
 			const [hovered, setHovered] = (0, react.useState)(null);
 			const hoverRef = (0, react.useRef)(null);
 			const latestRef = (0, react.useRef)({
@@ -1335,7 +1393,7 @@ window.__ModuleLoader__.load({
 			};
 			const nodeEntries = Object.entries(workflow).map(([id, raw]) => [id, raw]);
 			const advNodeInfo = nodeEntries.find(([id]) => id === advNode)?.[1];
-			const advInputs = advNodeInfo !== void 0 && advNodeInfo.inputs !== void 0 ? Object.entries(advNodeInfo.inputs).filter(([key]) => key !== "upload") : [];
+			const advInputs = advNodeInfo !== void 0 && advNodeInfo.inputs !== void 0 ? Object.entries(advNodeInfo.inputs).filter(([, value]) => !isLinkValue(value)) : [];
 			const selectedInput = advInputs.find(([key]) => key === advInput);
 			/** Server-side auto-detection: prompt/size/steps/seed + dropdown options (object_info). */
 			const recognize = async () => {
@@ -1397,6 +1455,7 @@ window.__ModuleLoader__.load({
 				}
 				let options;
 				let upload;
+				let numberSpec;
 				if (typeof advNodeInfo.class_type === "string") try {
 					const result = await postJson("/comfyui/workflows/input-options", {
 						classType: advNodeInfo.class_type,
@@ -1404,6 +1463,7 @@ window.__ModuleLoader__.load({
 					});
 					if (result.ok === true && Array.isArray(result.options) && result.options.length > 0) options = result.options;
 					upload = result.upload;
+					numberSpec = result.number;
 				} catch {}
 				onChange([...params, {
 					id: newParamId(),
@@ -1413,6 +1473,10 @@ window.__ModuleLoader__.load({
 					nodeId: advNode,
 					inputKey: advInput,
 					default: typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? value : "",
+					numberKind: type === "number" ? numberSpec?.kind : void 0,
+					min: type === "number" ? numberSpec?.min : void 0,
+					max: type === "number" ? numberSpec?.max : void 0,
+					step: type === "number" ? numberSpec?.step : void 0,
 					options,
 					upload
 				}]);
@@ -1544,15 +1608,43 @@ window.__ModuleLoader__.load({
 				value: String(param.default),
 				placeholder: t("wfParamDefault"),
 				onChange: (event) => updateDefault(index, event.target.value)
-			}) : (0, react.createElement)("input", {
+			}) : param.type === "boolean" ? (0, react.createElement)("label", { className: "dsc-param-bool dsc-param-default" }, (0, react.createElement)("input", {
+				type: "checkbox",
+				checked: asBool(param.default),
+				onChange: (event) => updateDefault(index, event.target.checked)
+			}), (0, react.createElement)("span", null, asBool(param.default) ? "true" : "false")) : param.type === "number" ? (0, react.createElement)("input", {
 				className: "dsc-input dsc-input--sm dsc-param-default",
-				value: String(param.default),
+				inputMode: param.numberKind === "int" ? "numeric" : "decimal",
+				value: numDraft[param.id] ?? String(param.default),
 				placeholder: t("wfParamDefault"),
+				title: numberRangeHint(param),
 				onChange: (event) => {
 					const raw = event.target.value;
-					updateDefault(index, param.type === "number" ? Number(raw) || 0 : raw);
+					setNumDraft((prev) => ({
+						...prev,
+						[param.id]: raw
+					}));
+					const parsed = Number(raw);
+					if (raw.trim() !== "" && Number.isFinite(parsed)) updateDefault(index, parsed);
+				},
+				onBlur: () => {
+					const raw = numDraft[param.id];
+					setNumDraft((prev) => {
+						const next = { ...prev };
+						delete next[param.id];
+						return next;
+					});
+					if (raw === void 0) return;
+					const parsed = Number(raw);
+					const value = raw.trim() === "" || !Number.isFinite(parsed) ? 0 : parsed;
+					updateDefault(index, param.numberKind === "int" ? Math.round(value) : value);
 				}
-			}), (0, react.createElement)("div", { className: "dsc-param-meta" }, (0, react.createElement)("span", { className: "dsc-meta" }, `${param.type} · #${param.nodeId}.${param.inputKey}`), param.type === "number" ? (0, react.createElement)("label", { className: "dsc-param-random" }, (0, react.createElement)("input", {
+			}) : (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm dsc-param-default",
+				value: String(param.default),
+				placeholder: t("wfParamDefault"),
+				onChange: (event) => updateDefault(index, event.target.value)
+			}), (0, react.createElement)("div", { className: "dsc-param-meta" }, (0, react.createElement)("span", { className: "dsc-meta" }, `${param.type}${param.type === "number" ? `/${param.numberKind ?? "?"}` : ""} · #${param.nodeId}.${param.inputKey}`), param.type === "number" ? (0, react.createElement)("label", { className: "dsc-param-random" }, (0, react.createElement)("input", {
 				type: "checkbox",
 				checked: param.random === true,
 				onChange: (event) => update(index, { random: event.target.checked })
@@ -1582,10 +1674,10 @@ window.__ModuleLoader__.load({
 				className: "dsc-input dsc-input--sm",
 				value: advInput,
 				onChange: (event) => setAdvInput(event.target.value)
-			}, (0, react.createElement)("option", { value: "" }, "—"), advInputs.filter(([, value]) => value === null || typeof value !== "object").map(([key, value]) => (0, react.createElement)("option", {
+			}, (0, react.createElement)("option", { value: "" }, "—"), advInputs.map(([key, value]) => (0, react.createElement)("option", {
 				key,
 				value: key
-			}, `${key} (${value === null ? "null" : typeof value})`))) : null, (0, react.createElement)("input", {
+			}, `${key} (${inputValueKind(value)})`))) : null, (0, react.createElement)("input", {
 				className: "dsc-input dsc-input--sm",
 				value: advLabel,
 				placeholder: t("wfParamCustomLabel"),
@@ -1747,26 +1839,52 @@ window.__ModuleLoader__.load({
 			return (0, react.createElement)("div", { className: "dsc-err" }, `${t("error")}: ${message}`);
 		}
 		/** Load area at the bottom of the workflow library, modeled on the ComfyUI
-		* LoadImage node: a big preview of the currently selected image; clicking it
-		* opens a picker (全部/已导入/已生成 tabs + paste-to-upload + masonry grid).
-		* Selecting a file makes it the default source image for image-to-image runs
-		* (the workflow's image parameter defaults to this file name). */
+		* LoadImage node — a list of **slots** rather than a single image.
+		*
+		* A lone slot stretches across the panel; from two slots on they share a
+		* fixed width and wrap into rows. A slot is either filled with a file or
+		* empty (added but not yet picked, or emptied through the picker's "空"
+		* tile); the whole card is the pick button, and hovering reveals an × in the
+		* corner that removes the slot. Filled slots feed the workflow's loader
+		* parameters in order, so a run that takes two reference images picks up
+		* slots 1 and 2 without the agent naming files. */
 		function LoadArea(props) {
-			const [current, setCurrent] = (0, react.useState)(null);
+			const [slots, setSlots] = (0, react.useState)([]);
 			const [files, setFiles] = (0, react.useState)([]);
-			const [pickerOpen, setPickerOpen] = (0, react.useState)(false);
+			/** Slot index the picker is currently filling; null = picker closed. */
+			const [pickerFor, setPickerFor] = (0, react.useState)(null);
 			const [busy, setBusy] = (0, react.useState)(false);
 			const [error, setError] = (0, react.useState)(null);
 			const refresh = (0, react.useCallback)(async () => {
 				const data = await fetch("/comfyui/loadarea").then((response) => response.json()).catch(() => void 0);
 				if (data?.ok === true) {
-					setCurrent(data.current ?? null);
+					setSlots(data.slots ?? (data.current !== null && data.current !== void 0 ? [data.current] : []));
 					setFiles(data.files ?? []);
 				}
 			}, []);
 			(0, react.useEffect)(() => {
 				refresh();
 			}, [refresh]);
+			const post = async (body) => {
+				setBusy(true);
+				setError(null);
+				try {
+					const response = await fetch("/comfyui/current-image", {
+						method: "POST",
+						headers: { "Content-Type": "application/json" },
+						body: JSON.stringify(body)
+					});
+					const data = await response.json().catch(() => ({}));
+					if (data.ok !== true) throw new Error(data.error ?? `HTTP ${response.status}`);
+					await refresh();
+					return true;
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+					return false;
+				} finally {
+					setBusy(false);
+				}
+			};
 			const upload = async (file) => {
 				setBusy(true);
 				setError(null);
@@ -1784,38 +1902,92 @@ window.__ModuleLoader__.load({
 				}
 			};
 			const pick = async (file) => {
-				await fetch("/comfyui/current-image", {
-					method: "POST",
-					headers: { "Content-Type": "application/json" },
-					body: JSON.stringify({
-						name: file.name,
-						kind: file.kind,
-						source: file.source
-					})
-				}).catch(() => void 0);
-				setCurrent(file);
-				setPickerOpen(false);
-				props.onNotice(`${props.t("wfLoadPicked")}：${file.name}`);
+				const index = pickerFor;
+				setPickerFor(null);
+				if (await post({
+					name: file.name,
+					kind: file.kind,
+					source: file.source,
+					...index !== null ? { index } : {}
+				})) props.onNotice(`${props.t("wfLoadPicked")}：${file.name}`);
 			};
-			return (0, react.createElement)("div", { className: "dsc-loadarea" }, (0, react.createElement)("div", { className: "dsc-loadarea-head" }, (0, react.createElement)("span", { className: "dsc-loadarea-title" }, props.t("wfLoadArea")), (0, react.createElement)("span", { className: "dsc-meta" }, props.t("wfLoadHint"))), (0, react.createElement)("button", {
-				className: "dsc-loadarea-main",
-				onClick: () => setPickerOpen(true),
-				title: props.t("wfLoadHint"),
-				disabled: busy
-			}, current !== null ? (0, react.createElement)("img", {
-				className: "dsc-loadarea-img",
-				src: current.url,
-				alt: "",
-				loading: "lazy"
-			}) : (0, react.createElement)("span", { className: "dsc-loadarea-empty" }, props.t("wfLoadEmpty")), (0, react.createElement)("span", { className: "dsc-loadarea-name" }, current !== null ? `${current.name}${current.width !== void 0 && current.height !== void 0 ? `（${current.width}×${current.height}）` : ""}` : "")), pickerOpen ? (0, react.createElement)(LoadPicker, {
+			/** "＋ 添加加载区": opens a slot and goes straight to the picker for it, so
+			* adding material is one gesture; closing the picker leaves the empty slot. */
+			const addSlot = async () => {
+				const index = slots.length;
+				if (await post({ action: "addSlot" })) setPickerFor(index);
+			};
+			const loaded = slots.filter((slot) => slot !== null).length;
+			return (0, react.createElement)("div", { className: "dsc-loadarea" }, (0, react.createElement)("div", { className: "dsc-loadarea-head" }, (0, react.createElement)("span", { className: "dsc-loadarea-title" }, props.t("wfLoadArea")), (0, react.createElement)("span", { className: "dsc-meta" }, slots.length === 0 ? props.t("wfLoadEmpty") : props.t("wfLoadSummary", {
+				slots: slots.length,
+				loaded
+			}))), (0, react.createElement)("div", { className: "dsc-loadslots" }, slots.map((slot, index) => (0, react.createElement)(LoadSlot, {
+				key: index,
+				t: props.t,
+				slot,
+				index,
+				busy,
+				wide: slots.length === 1,
+				onPick: () => setPickerFor(index),
+				onRemove: () => {
+					post({
+						action: "removeSlot",
+						index
+					});
+				}
+			}))), (0, react.createElement)("div", { className: "dsc-toolbar" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => {
+					addSlot();
+				}
+			}, props.t("wfLoadAddSlot"))), pickerFor !== null ? (0, react.createElement)(LoadPicker, {
 				t: props.t,
 				files,
-				current: current?.name ?? null,
+				current: (pickerFor < slots.length ? slots[pickerFor]?.name : void 0) ?? null,
 				onUpload: upload,
 				onPick: pick,
-				onClose: () => setPickerOpen(false)
+				onClear: () => {
+					const index = pickerFor;
+					setPickerFor(null);
+					post({
+						action: "clear",
+						index
+					});
+				},
+				onClose: () => setPickerFor(null)
 			}) : null, error !== null ? (0, react.createElement)("div", { className: "dsc-hint dsc-hint--error" }, error) : null);
 		}
+		/** One load-area slot card. The card is the pick button (empty slots show
+		* "加载位 N / 添加素材"); the × in the corner, revealed on hover, removes the
+		* slot. Emptying a slot without removing it is done from the picker's "空"
+		* tile, so the card carries no button row of its own. */
+		function LoadSlot(props) {
+			const { t, slot, index } = props;
+			const size = slot?.width !== void 0 && slot.height !== void 0 ? `（${slot.width}×${slot.height}）` : "";
+			return (0, react.createElement)("div", { className: props.wide ? "dsc-loadslot dsc-loadslot--wide" : "dsc-loadslot" }, (0, react.createElement)("button", {
+				className: "dsc-loadslot-pick",
+				onClick: props.onPick,
+				disabled: props.busy,
+				title: slot !== null ? slot.name : t("wfLoadHint")
+			}, slot === null ? (0, react.createElement)("span", { className: "dsc-loadslot-empty" }, (0, react.createElement)("span", { className: "dsc-loadslot-index" }, `${t("wfLoadSlotLabel")} ${index + 1}`), (0, react.createElement)("span", { className: "dsc-loadslot-add" }, t("wfLoadAddMedia"))) : slot.kind === "video" ? (0, react.createElement)("video", {
+				className: "dsc-loadslot-media",
+				src: slot.url,
+				preload: "metadata",
+				muted: true
+			}) : slot.kind === "audio" ? (0, react.createElement)("span", { className: "dsc-loadslot-empty" }, "♪") : (0, react.createElement)("img", {
+				className: "dsc-loadslot-media",
+				src: slot.url,
+				alt: "",
+				loading: "lazy"
+			}), slot !== null ? (0, react.createElement)("span", { className: "dsc-loadslot-name" }, `${slot.name}${size}`) : null), (0, react.createElement)("button", {
+				className: "dsc-loadslot-x",
+				disabled: props.busy,
+				title: t("wfLoadRemoveSlot"),
+				"aria-label": t("wfLoadRemoveSlot"),
+				onClick: props.onRemove
+			}, "×"));
+		}
 		/** The load-area picker dialog: tab bar (全部/已导入/已生成) with a
 		* paste/click upload zone on the right, and a masonry image grid below. */
 		function LoadPicker(props) {
@@ -1947,15 +2119,35 @@ window.__ModuleLoader__.load({
 			}, typeOptions.map((option) => (0, react.createElement)("option", {
 				key: option.id,
 				value: option.id
-			}, option.label)))), filtered.length === 0 ? (0, react.createElement)("div", { className: "dsc-picker-empty" }, props.t("wfLoadNoFiles")) : (0, react.createElement)("div", { className: "dsc-picker-grid" }, columns.map((column, columnIndex) => (0, react.createElement)("div", {
+			}, option.label)))), filtered.length === 0 && props.onClear === void 0 ? (0, react.createElement)("div", { className: "dsc-picker-empty" }, props.t("wfLoadNoFiles")) : (0, react.createElement)("div", { className: "dsc-picker-grid" }, columns.map((column, columnIndex) => (0, react.createElement)("div", {
 				key: columnIndex,
 				className: "dsc-picker-col"
-			}, column.map((file) => (0, react.createElement)("button", {
+			}, columnIndex === 0 && props.onClear !== void 0 ? (0, react.createElement)("div", {
+				className: `dsc-picker-card dsc-picker-card--none${props.current === null ? " dsc-picker-card--active" : ""}`,
+				role: "button",
+				tabIndex: 0,
+				onClick: () => props.onClear?.(),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						props.onClear?.();
+					}
+				},
+				title: props.t("wfLoadNoneHint")
+			}, (0, react.createElement)("span", { className: "dsc-picker-thumb dsc-picker-thumb--media" }, "∅"), (0, react.createElement)("span", { className: "dsc-picker-name" }, props.t("wfLoadNone"))) : null, column.map((file) => (0, react.createElement)("div", {
 				key: `${file.source}:${file.name}`,
 				className: `dsc-picker-card${file.name === props.current ? " dsc-picker-card--active" : ""}`,
+				role: "button",
+				tabIndex: 0,
 				onClick: () => {
 					props.onPick(file);
 				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						props.onPick(file);
+					}
+				},
 				title: file.name,
 				ref: (el) => {
 					if (el !== null) cardRefs.current.set(`${file.source}:${file.name}`, el);
@@ -1966,7 +2158,19 @@ window.__ModuleLoader__.load({
 				src: file.url,
 				alt: "",
 				loading: "lazy"
-			}) : (0, react.createElement)("span", { className: "dsc-picker-thumb dsc-picker-thumb--media" }, file.kind === "video" ? "🎞" : "🎵"), (0, react.createElement)("span", { className: "dsc-picker-name" }, file.name), file.width !== void 0 && file.height !== void 0 ? (0, react.createElement)("span", { className: "dsc-meta" }, `${file.width}×${file.height}`) : null))))), uploadFlash !== null ? (0, react.createElement)("div", { className: "dsc-picker-toast" }, uploadFlash) : null));
+			}) : file.kind === "video" ? (0, react.createElement)("video", {
+				className: "dsc-picker-thumb dsc-picker-player",
+				src: file.url,
+				controls: true,
+				preload: "metadata",
+				onClick: (event) => event.stopPropagation()
+			}) : (0, react.createElement)("audio", {
+				className: "dsc-picker-player dsc-picker-player--audio",
+				src: file.url,
+				controls: true,
+				preload: "metadata",
+				onClick: (event) => event.stopPropagation()
+			}), (0, react.createElement)("span", { className: "dsc-picker-name" }, file.name), file.width !== void 0 && file.height !== void 0 ? (0, react.createElement)("span", { className: "dsc-meta" }, `${file.width}×${file.height}`) : null))))), uploadFlash !== null ? (0, react.createElement)("div", { className: "dsc-picker-toast" }, uploadFlash) : null));
 		}
 		/** Tag editor: preset classification chips (图生图 etc.) toggle on/off, plus
 		* free-form custom tags added with Enter and removed by clicking. */
@@ -2467,6 +2671,10 @@ window.__ModuleLoader__.load({
 			const [assets, setAssets] = (0, react.useState)(null);
 			const [error, setError] = (0, react.useState)(null);
 			const [filter, setFilter] = (0, react.useState)(() => panelStore.getAssetFilter());
+			/** Asset awaiting the delete confirmation, if any. */
+			const [pendingDelete, setPendingDelete] = (0, react.useState)(null);
+			const [deleting, setDeleting] = (0, react.useState)(false);
+			const [notice, setNotice] = (0, react.useState)(null);
 			const load = async () => {
 				try {
 					const data = await getJson("/comfyui/assets");
@@ -2487,7 +2695,24 @@ window.__ModuleLoader__.load({
 					cancelled = true;
 				};
 			}, []);
-			if (error !== null) return (0, react.createElement)("div", null, (0, react.createElement)(ErrorNote, {
+			/** Delete the record and (when the output directory is known) its files. */
+			const confirmDelete = async (asset) => {
+				setDeleting(true);
+				try {
+					const result = await postJson("/comfyui/assets/delete", { promptId: asset.promptId });
+					if (result.ok !== true) throw new Error(result.error ?? "delete failed");
+					setPendingDelete(null);
+					setNotice(t("assetDeleteDone", { deleted: result.deleted ?? 0 }));
+					if (Array.isArray(result.failures) && result.failures.length > 0) setError(result.failures.join("; "));
+					await load();
+				} catch (cause) {
+					setError(t("assetDeleteFailed", { message: cause instanceof Error ? cause.message : String(cause) }));
+					setPendingDelete(null);
+				} finally {
+					setDeleting(false);
+				}
+			};
+			if (error !== null && assets === null) return (0, react.createElement)("div", null, (0, react.createElement)(ErrorNote, {
 				t,
 				message: error
 			}));
@@ -2513,20 +2738,64 @@ window.__ModuleLoader__.load({
 			}, name === "" ? "—" : name))), (0, react.createElement)("button", {
 				className: "dsc-btn",
 				onClick: () => void load()
-			}, t("refresh"))), visible.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("assetEmpty")) : (0, react.createElement)("div", { className: "dsc-assets-grid" }, visible.map((asset) => (0, react.createElement)(AssetThumb, {
+			}, t("refresh"))), error !== null ? (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}) : null, notice !== null ? (0, react.createElement)("div", { className: "dsc-ok" }, notice) : null, visible.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("assetEmpty")) : (0, react.createElement)("div", { className: "dsc-assets-grid" }, visible.map((asset) => (0, react.createElement)(AssetThumb, {
 				key: asset.promptId,
 				asset,
 				t,
-				onClick: () => openAsset(asset)
-			}))));
+				onClick: () => openAsset(asset),
+				onDelete: () => {
+					setNotice(null);
+					setPendingDelete(asset);
+				}
+			}))), pendingDelete !== null ? (0, react.createElement)(ConfirmDialog, {
+				t,
+				title: t("assetDeleteTitle"),
+				body: t("assetDeleteBody", { count: pendingDelete.media.length }),
+				detail: pendingDelete.media.map((item) => item.filename).join("、"),
+				busy: deleting,
+				onConfirm: () => {
+					confirmDelete(pendingDelete);
+				},
+				onCancel: () => setPendingDelete(null)
+			}) : null);
+		}
+		/** Modal confirmation for a destructive action (asset deletion). */
+		function ConfirmDialog(props) {
+			return (0, react.createElement)("div", {
+				className: "dsc-picker-overlay",
+				onClick: props.onCancel
+			}, (0, react.createElement)("div", {
+				className: "dsc-confirm",
+				onClick: (event) => event.stopPropagation()
+			}, (0, react.createElement)("div", { className: "dsc-confirm-title" }, props.title), (0, react.createElement)("div", { className: "dsc-confirm-body" }, props.body), props.detail !== void 0 && props.detail !== "" ? (0, react.createElement)("div", { className: "dsc-confirm-detail" }, props.detail) : null, (0, react.createElement)("div", { className: "dsc-confirm-actions" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: props.busy,
+				onClick: props.onCancel
+			}, props.t("cancel")), (0, react.createElement)("button", {
+				className: "dsc-btn dsc-btn--danger",
+				disabled: props.busy,
+				onClick: props.onConfirm
+			}, props.t("confirmDelete")))));
 		}
 		function AssetThumb(props) {
 			const first = props.asset.media[0];
 			const [broken, setBroken] = (0, react.useState)(false);
+			const trash = (0, react.createElement)("button", {
+				className: "dsc-asset-trash",
+				title: props.t("assetDelete"),
+				"aria-label": props.t("assetDelete"),
+				onClick: (event) => {
+					event.stopPropagation();
+					props.onDelete();
+				}
+			}, "🗑");
 			if (first === void 0 || broken) return (0, react.createElement)("div", {
 				className: "dsc-asset dsc-asset--empty",
 				onClick: props.onClick
-			}, (0, react.createElement)("div", null, props.t("assetGone")), (0, react.createElement)("div", { className: "dsc-meta" }, props.asset.workflowName ?? "—"));
+			}, (0, react.createElement)("div", null, props.t("assetGone")), (0, react.createElement)("div", { className: "dsc-meta" }, props.asset.workflowName ?? "—"), trash);
 			return (0, react.createElement)("div", {
 				className: "dsc-asset",
 				onClick: props.onClick
@@ -2540,7 +2809,7 @@ window.__ModuleLoader__.load({
 				alt: first.filename,
 				loading: "lazy",
 				onError: () => setBroken(true)
-			}), (0, react.createElement)("div", { className: "dsc-asset-meta" }, props.asset.workflowName ?? "—"));
+			}), (0, react.createElement)("div", { className: "dsc-asset-meta" }, props.asset.workflowName ?? "—"), trash);
 		}
 		/**
 		* Tab 3: the task center — active tasks (pending / generating) shown as
@@ -2878,7 +3147,17 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .dsc-mode-label { font-size: 13px; }
 /* --- assets tab --- */
 .dsc-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
-.dsc-asset { border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--dsw-alias-bg-layer-1); }
+.dsc-asset { position: relative; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--dsw-alias-bg-layer-1); }
+/* Destructive, so it only appears while the pointer is on the card. */
+.dsc-asset-trash {
+  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; line-height: 1;
+  display: flex; align-items: center; justify-content: center;
+  border: 1px solid var(--dsw-alias-state-error-primary); border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-state-error-primary);
+  font-size: 14px; cursor: pointer; opacity: 0; transition: opacity 0.12s;
+}
+.dsc-asset:hover .dsc-asset-trash, .dsc-asset-trash:focus-visible { opacity: 1; }
+.dsc-asset-trash:hover { background: var(--dsw-alias-state-error-primary); color: #fff; }
 .dsc-asset img, .dsc-asset video { width: 100%; height: 110px; object-fit: cover; display: block; background: #000; }
 .dsc-asset--empty {
   height: 110px; padding: 8px; box-sizing: border-box;
@@ -2886,6 +3165,14 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
   font-size: 11px; color: var(--dsw-alias-label-secondary); text-align: center;
 }
 .dsc-asset-meta { padding: 3px 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* confirmation modal (asset deletion) */
+.dsc-confirm { width: min(360px, 88vw); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32); }
+.dsc-confirm-title { font-weight: 600; font-size: 14px; }
+.dsc-confirm-body { font-size: 13px; line-height: 1.6; color: var(--dsw-alias-label-secondary); }
+.dsc-confirm-detail { font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-tertiary); word-break: break-all; max-height: 96px; overflow-y: auto; }
+.dsc-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
+.dsc-btn--danger { border-color: var(--dsw-alias-state-error-primary); color: var(--dsw-alias-state-error-primary); }
+.dsc-btn--danger:hover:not(:disabled) { background: var(--dsw-alias-state-error-primary); color: #fff; }
 .dsc-asset-detail-media { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
 .dsc-asset-detail-media img, .dsc-asset-detail-media video { width: 100%; max-height: 320px; object-fit: contain; background: #000; border-radius: 8px; }
 .dsc-asset-detail-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 6px 8px; }
@@ -2926,12 +3213,36 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .dsc-loadarea { margin-top: 14px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
 .dsc-loadarea-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
 .dsc-loadarea-title { font-weight: 600; font-size: 12px; color: var(--dsw-alias-label-primary); }
-.dsc-loadarea-main { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; padding: 10px; background: var(--dsw-alias-bg-layer-1); cursor: pointer; transition: border-color 0.12s; }
-.dsc-loadarea-main:hover { border-color: #3b82f6; }
-.dsc-loadarea-main:disabled { opacity: 0.6; cursor: default; }
-.dsc-loadarea-img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; background: var(--dsw-alias-bg-layer-2); }
-.dsc-loadarea-empty { display: flex; align-items: center; justify-content: center; height: 120px; width: 100%; border-radius: 8px; background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-tertiary); font-size: 13px; }
-.dsc-loadarea-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--dsw-alias-label-primary); }
+/* load-area slots: slot 0 is the primary (big) source, the rest are thumbs.
+   Each slot carries its own actions (add / clear media / delete slot). */
+.dsc-loadslots { display: flex; flex-wrap: wrap; gap: 8px; }
+/* One slot stretches across the panel; from two on they share a fixed width
+   and wrap into rows. The × sits in the corner and appears on hover. */
+.dsc-loadslot { position: relative; display: flex; flex-direction: column; gap: 4px; width: 128px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; padding: 6px; background: var(--dsw-alias-bg-layer-1); }
+.dsc-loadslot--wide { width: 100%; }
+.dsc-loadslot-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; border-radius: 8px; padding: 0; background: transparent; color: inherit; cursor: pointer; width: 100%; }
+.dsc-loadslot-media { width: 100%; height: 104px; object-fit: contain; border-radius: 6px; background: var(--dsw-alias-bg-layer-2); }
+.dsc-loadslot--wide .dsc-loadslot-media { height: 220px; }
+.dsc-loadslot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 104px; border-radius: 6px; border: 1px dashed var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); font-size: 12px; }
+.dsc-loadslot--wide .dsc-loadslot-empty { height: 120px; font-size: 13px; }
+.dsc-loadslot-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--dsw-alias-label-primary); text-align: center; }
+.dsc-loadslot-index { color: var(--dsw-alias-label-tertiary); }
+.dsc-loadslot-add { color: var(--dsw-alias-label-secondary); }
+.dsc-loadslot-pick:hover .dsc-loadslot-add { color: var(--dsw-alias-brand-primary); }
+.dsc-loadslot-x {
+  position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; padding: 0; line-height: 1;
+  display: flex; align-items: center; justify-content: center;
+  border: 1px solid var(--dsw-alias-border-l2); border-radius: 50%;
+  background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-secondary);
+  font-size: 18px; cursor: pointer; opacity: 0; transition: opacity 0.12s;
+}
+.dsc-loadslot:hover .dsc-loadslot-x, .dsc-loadslot-x:focus-visible { opacity: 1; }
+.dsc-loadslot-x:hover { color: var(--dsw-alias-state-error-primary); border-color: var(--dsw-alias-state-error-primary); }
+.dsc-picker-player { width: 100%; border-radius: 6px; background: var(--dsw-alias-bg-layer-1); }
+video.dsc-picker-player { max-height: 180px; }
+.dsc-picker-player--audio { height: 34px; }
+.dsc-loadslot-x:disabled { opacity: 0; cursor: default; }
+.dsc-picker-card--none .dsc-picker-thumb--media { font-size: 26px; color: var(--dsw-alias-label-tertiary); }
 /* picker overlay: dims the page, dialog floats in the center */
 .dsc-picker-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(6, 8, 12, 0.6); display: flex; align-items: center; justify-content: center; padding: 24px; }
 .dsc-picker { position: relative; display: flex; flex-direction: column; width: min(860px, 92vw); height: min(560px, 84vh); 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; }
@@ -2950,7 +3261,8 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .dsc-picker-card--active { border-color: var(--dsw-alias-brand-primary); box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }
 .dsc-picker-thumb { width: 100%; height: auto; object-fit: contain; border-radius: 6px; background: var(--dsw-alias-bg-layer-1); }
 .dsc-picker-thumb--media { display: flex; align-items: center; justify-content: center; height: 100px; font-size: 22px; }
-.dsc-picker-name { font-size: 11px; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsc-picker-name { font-size: 13px; line-height: 1.5; padding: 2px 0; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsc-picker-card:hover .dsc-picker-name { color: var(--dsw-alias-brand-primary); }
 /* --- workflow tags: filter bar, chips, editor --- */
 .dsc-tag-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
 .dsc-tag-chip { border: 1px solid var(--dsw-alias-border-l1); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; background: transparent; color: var(--dsw-alias-label-primary); }
@@ -3012,6 +3324,7 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
 .dsc-param-default { min-width: 0; }
 .dsc-param-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
 .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; }
 `;
 		/** Inject the stylesheet once (idempotent), owned by this plugin for HMR. */