dsh-comfyui 0.3.0-beta.0

package/client/client.js

@@ -0,0 +1,3089 @@
+window.__ModuleLoader__.load({
+	id: "dsh-comfyui",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		//#region src/client/i18n.ts
+		/** zh/en dictionaries for dsh-comfyui UI (settings page, tool card, panel). */
+		const zh = {
+			settingsTitle: "ComfyUI",
+			settingsDesc: "连接你的 ComfyUI 服务器，让 Agent 直接生成与处理图像、视频。",
+			baseUrl: "服务器地址",
+			baseUrlHint: "ComfyUI 的 HTTP 地址（默认 http://127.0.0.1:8188）。",
+			apiKeyEnv: "API Key 环境变量名",
+			apiKeyEnvHint: "凭据存储或环境变量中的密钥名（默认 COMFYUI_API_KEY），远程服务通常需要。",
+			hasApiKey: "已配置 API Key",
+			noApiKey: "未配置 API Key（本地服务通常不需要）",
+			save: "保存",
+			saved: "已保存",
+			saveFailed: "保存失败",
+			test: "测试连接",
+			testing: "正在测试…",
+			testOk: "连接成功 · ComfyUI {version} · {ms} ms",
+			testFail: "连接失败：{message}",
+			configNotWritable: "设置服务不可用，请通过 cordis.yml 修改配置。",
+			mediaHost: "媒体访问地址",
+			mediaHostHint: "生成图片/媒体在聊天中使用的完整地址（如 http://192.168.1.5:3080）。留空时自动使用浏览器访问本服务器的地址；内网或反向代理下若图片不显示，请在此填写你访问本页面所用的地址。",
+			language: "界面语言",
+			languageHint: "切换插件界面语言（中文 / English）。切换后页面会自动刷新。",
+			cardGenerating: "ComfyUI 生成中…",
+			cardBackground: "后台任务",
+			cardBackgroundDone: "已完成",
+			cardPrompt: "任务 ID",
+			cardElapsed: "耗时",
+			cardMedia: "结果",
+			cardEmpty: "无媒体输出",
+			cardFailed: "执行失败",
+			cardInterrupted: "已中断",
+			cardCollect: "使用 job_output 收集后台任务结果",
+			cardLoadFailed: "加载失败，点下方下载",
+			cardDownload: "下载",
+			cardWorkflow: "工作流",
+			cardMode: "模式",
+			cardListed: "已列出 {runs} 个运行工作流，{graphs} 个图工作流",
+			panelTitle: "ComfyUI 面板",
+			close: "关闭",
+			lbPrev: "上一张",
+			lbNext: "下一张",
+			tabWorkflows: "工作流",
+			tabAssets: "资产",
+			tabQueue: "队列",
+			error: "出错",
+			refresh: "刷新",
+			ours: "本插件",
+			wfAdd: "新建工作流",
+			wfName: "名称",
+			wfDesc: "概述",
+			wfDescPlaceholder: "告诉 Agent 这个工作流做什么",
+			wfNameCopyHint: "点击复制工作流名称",
+			wfNameCopied: "已复制工作流名称",
+			wfParams: "可调参数",
+			wfTags: "标签",
+			wfTagAll: "全部",
+			wfTagAdd: "自定义标签，回车添加",
+			wfTagRemove: "点击移除标签",
+			wfParamsEmpty: "未定义参数。点击\"识别参数\"自动提取提示词/分辨率/步数/种子，或\"高级参数\"手动指定任意节点输入。",
+			wfParamsDrop: "拖拽/点击/粘贴上传",
+			wfPasteHint: "悬停此处后按 Ctrl+V 粘贴剪贴板里的图片/文件",
+			wfUploadSection: "加载区",
+			wfUploadHint: "点击大图选择图像，或粘贴/上传新图像；选中后图生图默认使用该图像",
+			wfUploadZone: "拖拽 / 点击 / 粘贴上传到 ComfyUI input 目录",
+			wfUploaded: "已上传",
+			wfCopyName: "复制文件名",
+			wfLoadArea: "加载区",
+			wfLoadHint: "点击选择图像（加载区选中的图像将作为图生图的默认源图）",
+			wfLoadEmpty: "未选择图像，点击选择",
+			wfLoadPicked: "已加载",
+			wfTabAll: "全部",
+			wfTabImported: "已导入",
+			wfTabGenerated: "已生成",
+			wfTypeAll: "全部类型",
+			wfUploadedToast: "文件已上传",
+			wfPickerUpload: "粘贴 / 点击上传",
+			wfLoadNoFiles: "没有可用的图像",
+			wfParamsUploading: "上传中…",
+			uploadKind_image: "图片",
+			uploadKind_video: "视频",
+			uploadKind_audio: "音频",
+			wfMediaClear: "清空",
+			wfMediaEmpty: "文件名（留空=移除该参考位）",
+			wfRefSlot: "参考",
+			wfParamsRecognize: "识别参数",
+			wfParamsRecognizing: "识别中…",
+			wfParamsRecognizeFailed: "识别失败：无法连接 ComfyUI 或工作流无效",
+			wfParamsAdd: "高级参数",
+			wfParamAdd: "添加",
+			wfParamLabel: "名称",
+			wfParamCustomLabel: "自定义名称",
+			wfParamCustomHint: "仅用于展示与 Agent 描述，传参键由系统自动生成；留空使用默认",
+			wfParamDefault: "默认值",
+			wfParamRandom: "随机",
+			wfParamDelete: "删除",
+			wfParamNode: "节点",
+			wfParamInput: "输入",
+			wfJson: "工作流 JSON（ComfyUI UI 导出的 API 格式）",
+			wfSave: "保存",
+			wfSaveRun: "保存并运行",
+			wfCancel: "取消",
+			wfEdit: "编辑",
+			wfRun: "运行",
+			wfDelete: "删除",
+			wfQueued: "已入队：",
+			wfJsonError: "工作流 JSON 解析失败",
+			wfUpdated: "更新于",
+			wfEmpty: "没有检测到任何工作流，请通过新建、导入或提取来创建执行流程。",
+			wfLibrarySection: "API 工作流",
+			wfRefresh: "刷新",
+			wfImportFile: "导入文件",
+			wfComfyuiSection: "ComfyUI 工作流",
+			wfComfyuiHint: "面板自动检测 ComfyUI 中保存的工作流。\n注：非 API 流程，无法直接执行，需经过提取转化为 API 工作流，或自行导入 API 工作流即可执行。",
+			wfComfyuiEmpty: "ComfyUI 端没有检测到保存的工作流",
+			wfExtracted: "已提取",
+			wfNotExtracted: "未提取",
+			wfView: "查看",
+			wfExtract: "提取",
+			wfExtractedNotice: "已提取并加入插件库",
+			wfExtractTitle: "提取执行流",
+			wfExtractModeAll: "整体提取",
+			wfExtractModeAllHint: "所有分量合成一个执行流（运行时全部执行）",
+			wfExtractModeSplit: "按分量提取",
+			wfExtractModeSplitHint: "每个独立流程一个执行流（推荐）",
+			wfExtractModeMain: "只提取主流程",
+			wfExtractModeMainHint: "只提取最大分量（通常是当前测试区块）",
+			wfExtractRun: "提取",
+			wfExtractEmpty: "图里没有可提取的分量",
+			wfComponents: "分量",
+			wfComponentLabel: "分量",
+			wfNodes: "节点",
+			wfBypassed: "已绕过节点",
+			wfIsolated: "悬空节点",
+			wfViewBack: "返回",
+			wfViewNodes: "节点清单",
+			wfViewJson: "JSON 预览",
+			wfViewEmpty: "图中没有可执行的节点",
+			assetAll: "全部工作流",
+			assetBack: "返回",
+			assetEmpty: "还没有生成记录。运行工作流后，结果会出现在这里。",
+			assetGone: "源文件已被 ComfyUI 清理",
+			queueEmpty: "当前没有任务",
+			queueError: "无法读取队列（ComfyUI 未运行？）",
+			jobFilterLabel: "历史",
+			jobFilterAll: "全部",
+			jobFilterPending: "待生成",
+			jobFilterInProgress: "生成中",
+			jobFilterCompleted: "已完成",
+			jobFilterFailed: "失败",
+			jobFilterCancelled: "已取消",
+			jobActive: "进行中",
+			jobDelete: "删除",
+			jobInterrupt: "中断",
+			jobRerun: "重跑",
+			jobViewAssets: "查看资产",
+			jobMore: "更多操作",
+			jobClearQueue: "清空队列",
+			jobClearHistory: "清空历史",
+			jobFree: "释放内存",
+			jobDuration: "耗时",
+			jobOurs: "本插件"
+		};
+		const en = {
+			settingsTitle: "ComfyUI",
+			settingsDesc: "Connect your ComfyUI server so the agent can generate and process images and videos directly.",
+			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.",
+			hasApiKey: "API key configured",
+			noApiKey: "No API key configured (usually not needed for local servers)",
+			save: "Save",
+			saved: "Saved",
+			saveFailed: "Save failed",
+			test: "Test connection",
+			testing: "Testing…",
+			testOk: "Connected · ComfyUI {version} · {ms} ms",
+			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.",
+			language: "Language",
+			languageHint: "Switch the plugin UI language (中文 / English). The page reloads after switching.",
+			cardGenerating: "ComfyUI generating…",
+			cardBackground: "Background job",
+			cardBackgroundDone: "Completed",
+			cardPrompt: "Prompt ID",
+			cardElapsed: "Elapsed",
+			cardMedia: "Results",
+			cardEmpty: "No media outputs",
+			cardFailed: "Execution failed",
+			cardInterrupted: "Interrupted",
+			cardCollect: "Collect the background job result with job_output",
+			cardLoadFailed: "failed to load, use the download link below",
+			cardDownload: "Download",
+			cardWorkflow: "Workflow",
+			cardMode: "Mode",
+			cardListed: "Listed {runs} runnable workflows, {graphs} graph workflows",
+			panelTitle: "ComfyUI Panel",
+			close: "Close",
+			lbPrev: "Previous image",
+			lbNext: "Next image",
+			tabWorkflows: "Workflows",
+			tabAssets: "Assets",
+			tabQueue: "Queue",
+			error: "Error",
+			refresh: "Refresh",
+			ours: "ours",
+			wfAdd: "New workflow",
+			wfName: "Name",
+			wfDesc: "Overview",
+			wfDescPlaceholder: "Tells the agent what this workflow does",
+			wfNameCopyHint: "Click to copy the workflow name",
+			wfNameCopied: "Workflow name copied",
+			wfParams: "Parameters",
+			wfTags: "Tags",
+			wfTagAll: "All",
+			wfTagAdd: "Custom tag, press Enter to add",
+			wfTagRemove: "Click to remove tag",
+			wfParamsEmpty: "No parameters yet. Click \"Detect\" to auto-extract prompt / resolution / steps / seed, or \"Advanced\" to expose any node input manually.",
+			wfParamsDrop: "Drop / Click / Paste to upload",
+			wfPasteHint: "Hover here and press Ctrl+V to paste an image/file",
+			wfUploadSection: "Load area",
+			wfUploadHint: "Click the preview to pick an image, or paste/upload a new one; the selection becomes the default source for image-to-image",
+			wfUploadZone: "Drag / Click / Paste to upload into the ComfyUI input dir",
+			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",
+			wfLoadPicked: "Loaded",
+			wfTabAll: "All",
+			wfTabImported: "Imported",
+			wfTabGenerated: "Generated",
+			wfTypeAll: "All types",
+			wfUploadedToast: "File uploaded",
+			wfPickerUpload: "Paste / Click to upload",
+			wfLoadNoFiles: "No images available",
+			wfParamsUploading: "Uploading…",
+			uploadKind_image: "image",
+			uploadKind_video: "video",
+			uploadKind_audio: "audio",
+			wfMediaClear: "Clear",
+			wfMediaEmpty: "filename (empty = drop this slot)",
+			wfRefSlot: "Ref ",
+			wfParamsRecognize: "Detect",
+			wfParamsRecognizing: "Detecting…",
+			wfParamsRecognizeFailed: "Detection failed: ComfyUI unreachable or invalid workflow",
+			wfParamsAdd: "Advanced",
+			wfParamAdd: "Add",
+			wfParamLabel: "Name",
+			wfParamCustomLabel: "Custom name",
+			wfParamCustomHint: "Shown to the user and the agent only; the parameter key is generated automatically. Leave empty for the default",
+			wfParamDefault: "Default",
+			wfParamRandom: "Random",
+			wfParamDelete: "Delete",
+			wfParamNode: "Node",
+			wfParamInput: "Input",
+			wfJson: "Workflow JSON (API format exported from the ComfyUI UI)",
+			wfSave: "Save",
+			wfSaveRun: "Save & Run",
+			wfCancel: "Cancel",
+			wfEdit: "Edit",
+			wfRun: "Run",
+			wfDelete: "Delete",
+			wfQueued: "Queued: ",
+			wfJsonError: "Workflow JSON could not be parsed",
+			wfUpdated: "updated",
+			wfEmpty: "No workflows detected — create one via New, Import, or Extract.",
+			wfLibrarySection: "API workflows",
+			wfRefresh: "Refresh",
+			wfImportFile: "Import file",
+			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",
+			wfExtracted: "extracted",
+			wfNotExtracted: "not extracted",
+			wfView: "View",
+			wfExtract: "Extract",
+			wfExtractedNotice: "extracted into the library",
+			wfExtractTitle: "Extract runnable workflows",
+			wfExtractModeAll: "All as one",
+			wfExtractModeAllHint: "Merge every component into one runnable workflow (everything executes)",
+			wfExtractModeSplit: "Per component",
+			wfExtractModeSplitHint: "One runnable workflow per independent flow (recommended)",
+			wfExtractModeMain: "Main flow only",
+			wfExtractModeMainHint: "Only the largest component (usually the flow under test)",
+			wfExtractRun: "Extract",
+			wfExtractEmpty: "No extractable components in this graph",
+			wfComponents: "components",
+			wfComponentLabel: "Component",
+			wfNodes: "nodes",
+			wfBypassed: "bypassed nodes",
+			wfIsolated: "dangling nodes",
+			wfViewBack: "Back",
+			wfViewNodes: "Nodes",
+			wfViewJson: "JSON preview",
+			wfViewEmpty: "No executable nodes in this graph",
+			assetAll: "All workflows",
+			assetBack: "Back",
+			assetEmpty: "Nothing generated yet. Results appear here after workflows run.",
+			assetGone: "Source file evicted by ComfyUI",
+			queueEmpty: "No tasks right now",
+			queueError: "Cannot read the queue (ComfyUI not running?)",
+			jobFilterLabel: "History",
+			jobFilterAll: "All",
+			jobFilterPending: "Pending",
+			jobFilterInProgress: "Running",
+			jobFilterCompleted: "Completed",
+			jobFilterFailed: "Failed",
+			jobFilterCancelled: "Cancelled",
+			jobActive: "Active",
+			jobDelete: "Delete",
+			jobInterrupt: "Interrupt",
+			jobRerun: "Rerun",
+			jobViewAssets: "View assets",
+			jobMore: "More actions",
+			jobClearQueue: "Clear queue",
+			jobClearHistory: "Clear history",
+			jobFree: "Free memory",
+			jobDuration: "Took",
+			jobOurs: "ours"
+		};
+		const LANG_KEY = "dsh-comfyui.lang";
+		/** Current plugin UI language, read from localStorage (default zh). */
+		function getLang() {
+			try {
+				return localStorage.getItem(LANG_KEY) === "en" ? "en" : "zh";
+			} catch {
+				return "zh";
+			}
+		}
+		/** Persist the plugin UI language choice. */
+		function setLang(lang) {
+			try {
+				localStorage.setItem(LANG_KEY, lang);
+			} catch {}
+		}
+		const DICTS = {
+			zh,
+			en
+		};
+		/** Build a plugin-local translator for one language. Resolves {name}
+		* placeholders from the first rest argument (same contract as the DSH
+		* locale bind), falling back to the key itself when untranslated. */
+		function makeT(lang) {
+			const dict = DICTS[lang];
+			return (key, ...rest) => {
+				const template = dict[key] ?? key;
+				const params = rest[0] ?? {};
+				if (params !== null && typeof params === "object") return template.replace(/\{(\w+)\}/g, (match, name) => {
+					const value = params[name];
+					return value === void 0 ? match : String(value);
+				});
+				return template;
+			};
+		}
+		//#endregion
+		//#region src/client/lightbox.tsx
+		/**
+		* Shared lightbox: opens a generated image full-screen with prev/next
+		* navigation, keyboard support, and a download pill. Used by both the panel
+		* (assets/queue previews) and the tool card (result images).
+		*/
+		/** Full-screen media overlay with prev/next navigation. */
+		function Lightbox({ t, images, kinds, index, onClose, onIndex }) {
+			const count = images.length;
+			(0, react.useEffect)(() => {
+				const onKey = (event) => {
+					if (event.key === "Escape") onClose();
+					else if (event.key === "ArrowLeft") onIndex((index - 1 + count) % count);
+					else if (event.key === "ArrowRight") onIndex((index + 1) % count);
+				};
+				document.addEventListener("keydown", onKey);
+				return () => document.removeEventListener("keydown", onKey);
+			}, [
+				index,
+				count,
+				onClose,
+				onIndex
+			]);
+			const src = images[index];
+			if (src === void 0) return null;
+			const kind = kinds?.[index] ?? "image";
+			const media = kind === "video" ? (0, react.createElement)("video", {
+				className: "dsc-lightbox-media",
+				src,
+				controls: true,
+				autoPlay: true
+			}) : kind === "audio" ? (0, react.createElement)("audio", {
+				className: "dsc-lightbox-media",
+				src,
+				controls: true,
+				autoPlay: true
+			}) : kind === "image" ? (0, react.createElement)("img", {
+				className: "dsc-lightbox-img",
+				src,
+				alt: ""
+			}) : (0, react.createElement)("div", { className: "dsc-lightbox-media" }, src);
+			return (0, react.createElement)("div", {
+				className: "dsc-lightbox",
+				onClick: onClose
+			}, (0, react.createElement)("div", {
+				className: "dsc-lightbox-body",
+				onClick: (event) => event.stopPropagation()
+			}, (0, react.createElement)("button", {
+				className: "dsc-lightbox-close",
+				"aria-label": t("close"),
+				onClick: (event) => {
+					event.stopPropagation();
+					onClose();
+				}
+			}, "✕"), count > 1 ? (0, react.createElement)("button", {
+				className: "dsc-lightbox-nav dsc-lightbox-nav--prev",
+				"aria-label": t("lbPrev"),
+				onClick: (event) => {
+					event.stopPropagation();
+					onIndex((index - 1 + count) % count);
+				}
+			}, "‹") : null, media, (0, react.createElement)("div", { className: "dsc-lightbox-meta" }, (0, react.createElement)("span", null, `${index + 1} / ${count}`), (0, react.createElement)("a", {
+				className: "dsc-lightbox-download",
+				href: src,
+				download: "",
+				target: "_blank",
+				rel: "noreferrer"
+			}, t("cardDownload"))), count > 1 ? (0, react.createElement)("button", {
+				className: "dsc-lightbox-nav dsc-lightbox-nav--next",
+				"aria-label": t("lbNext"),
+				onClick: (event) => {
+					event.stopPropagation();
+					onIndex((index + 1) % count);
+				}
+			}, "›") : null));
+		}
+		//#endregion
+		//#region src/client/card.tsx
+		/**
+		* Tool cards for comfyui_run and comfyui_workflow (tool.call.toolview, keys
+		* 'comfyui_run' / 'comfyui_workflow'). A pure function of the frozen tool-call
+		* block: running calls show a generating state, settled calls render the
+		* presentationMeta payload (media wall with size labels, click-to-zoom
+		* lightbox, status) that the host threaded into the session log.
+		*/
+		/** Discriminate the settled result node from a running call. */
+		function isResultNode(block) {
+			return block.kind === "tool-result";
+		}
+		function parseArgs(raw) {
+			try {
+				const parsed = JSON.parse(raw);
+				return typeof parsed === "object" && parsed !== null ? parsed : {};
+			} catch {
+				return {};
+			}
+		}
+		function argsSummary(args) {
+			const parts = [];
+			if (typeof args.template === "string") parts.push(`template=${args.template}`);
+			if (args.mode !== void 0 && args.mode !== "sync") parts.push(`mode=${String(args.mode)}`);
+			if (parts.length === 0) parts.push("custom workflow");
+			return parts.join(" · ");
+		}
+		function aspectLabel(width, height) {
+			const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+			const g = gcd(width, height);
+			const rw = width / g;
+			const rh = height / g;
+			return rw <= 32 && rh <= 32 ? `${rw}:${rh}` : "";
+		}
+		function MediaItem({ item, t, onOpen }) {
+			const [size, setSize] = (0, react.useState)(null);
+			const [failed, setFailed] = (0, react.useState)(false);
+			const media = item.kind === "video" ? (0, react.createElement)("video", {
+				src: item.url,
+				controls: true,
+				preload: "metadata"
+			}) : item.kind === "audio" ? (0, react.createElement)("audio", {
+				src: item.url,
+				controls: true,
+				preload: "metadata"
+			}) : item.kind === "image" ? failed ? (0, react.createElement)("span", { className: "dsc-media-other" }, `${item.filename}（${t("cardLoadFailed")}）`) : (0, react.createElement)("img", {
+				src: item.url,
+				alt: item.filename,
+				loading: "lazy",
+				className: "dsc-media-img dsc-media-img--clickable",
+				onClick: onOpen,
+				onLoad: (event) => {
+					const width = event.target.naturalWidth;
+					const height = event.target.naturalHeight;
+					if (typeof width === "number" && typeof height === "number" && width > 0 && height > 0) setSize({
+						width,
+						height
+					});
+				},
+				onError: () => setFailed(true)
+			}) : (0, react.createElement)("span", { className: "dsc-media-other" }, item.filename);
+			const ratio = size === null ? null : aspectLabel(size.width, size.height);
+			return (0, react.createElement)("div", { className: "dsc-media" }, media, (0, react.createElement)("div", { className: "dsc-media-meta" }, size !== null ? (0, react.createElement)("span", { className: "dsc-media-size" }, `${size.width}×${size.height}${ratio !== "" ? ` · ${ratio}` : ""}`) : null, (0, react.createElement)("a", {
+				href: item.url,
+				download: item.filename,
+				target: "_blank",
+				rel: "noreferrer"
+			}, t("cardDownload"))));
+		}
+		function ResultCard({ title, result, t }) {
+			const failed = result.status === "interrupted";
+			const [lightbox, setLightbox] = (0, react.useState)(null);
+			const urls = result.media.map((item) => item.url);
+			const kinds = result.media.map((item) => item.kind);
+			return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, title !== "" ? (0, react.createElement)("span", { className: "dsc-badge" }, title) : null, (0, react.createElement)("span", { className: failed ? "dsc-badge dsc-badge--err" : "dsc-badge dsc-badge--ok" }, failed ? t("cardInterrupted") : result.status), (0, react.createElement)("span", { className: "dsc-meta" }, `${t("cardPrompt")} ${result.promptId}`), (0, react.createElement)("span", { className: "dsc-meta" }, `${t("cardElapsed")} ${result.elapsedMs} ms`)), (0, react.createElement)("div", { className: "dsc-meta" }, result.summary), result.media.length > 0 ? (0, react.createElement)("div", { className: "dsc-grid" }, result.media.map((item, index) => (0, react.createElement)(MediaItem, {
+				key: `${item.node}-${item.index}`,
+				item,
+				t,
+				onOpen: () => setLightbox(index)
+			}))) : (0, react.createElement)("div", { className: "dsc-meta" }, t("cardEmpty")), lightbox !== null ? (0, react.createElement)(Lightbox, {
+				t,
+				images: urls,
+				kinds,
+				index: lightbox,
+				onClose: () => setLightbox(null),
+				onIndex: setLightbox
+			}) : null);
+		}
+		function BackgroundCard({ label, promptId, t }) {
+			const [result, setResult] = (0, react.useState)(null);
+			const [lightbox, setLightbox] = (0, react.useState)(null);
+			(0, react.useEffect)(() => {
+				let stopped = false;
+				let timer;
+				const poll = async () => {
+					try {
+						const data = await (await fetch(`/comfyui/jobs/media?promptId=${encodeURIComponent(promptId)}`, { headers: { accept: "application/json" } })).json();
+						if (stopped) return;
+						if (data.ok !== true || data.status === void 0) return;
+						if (data.status === "completed" || data.status === "failed") {
+							setResult({
+								status: data.status,
+								media: data.media,
+								error: data.error
+							});
+							return;
+						}
+						timer = window.setTimeout(() => {
+							poll();
+						}, 3e3);
+					} catch {
+						timer = window.setTimeout(() => {
+							poll();
+						}, 5e3);
+					}
+				};
+				poll();
+				return () => {
+					stopped = true;
+					if (timer !== void 0) window.clearTimeout(timer);
+				};
+			}, [promptId]);
+			if (result !== null && (result.status === "completed" || result.status === "failed")) {
+				const media = result.media ?? [];
+				const urls = media.map((item) => item.url);
+				const kinds = media.map((item) => item.kind);
+				return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, (0, react.createElement)("span", { className: result.status === "failed" ? "dsc-badge dsc-badge--err" : "dsc-badge dsc-badge--ok" }, result.status === "failed" ? t("cardFailed") : t("cardBackgroundDone")), (0, react.createElement)("span", { className: "dsc-meta" }, `${label} · ${promptId}`)), result.status === "failed" ? (0, react.createElement)("div", { className: "dsc-meta dsc-job-error" }, result.error ?? t("cardFailed")) : media.length > 0 ? (0, react.createElement)("div", { className: "dsc-grid" }, media.map((item, index) => (0, react.createElement)(MediaItem, {
+					key: `${item.node}-${item.index}`,
+					item,
+					t,
+					onOpen: () => setLightbox(index)
+				}))) : (0, react.createElement)("div", { className: "dsc-meta" }, t("cardEmpty")), lightbox !== null ? (0, react.createElement)(Lightbox, {
+					t,
+					images: urls,
+					kinds,
+					index: lightbox,
+					onClose: () => setLightbox(null),
+					onIndex: setLightbox
+				}) : null);
+			}
+			return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, (0, react.createElement)("span", { className: "dsc-badge" }, t("cardBackground")), (0, react.createElement)("span", { className: "dsc-meta" }, `${label} · ${promptId}`)), (0, react.createElement)("div", { className: "dsc-meta" }, t("cardCollect")));
+		}
+		function SettledCard({ block, t }) {
+			if (block.isError === true) return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, (0, react.createElement)("span", { className: "dsc-badge dsc-badge--err" }, t("cardFailed"))), (0, react.createElement)("div", { className: "dsc-meta" }, block.error?.name ?? "error"));
+			const meta = block.meta;
+			if (meta === void 0 || typeof meta !== "object") return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("span", { className: "dsc-badge" }, block.call?.name ?? "comfyui"));
+			if ("action" in meta) {
+				if (meta.action === "run") {
+					if (meta.background !== void 0) return (0, react.createElement)(BackgroundCard, {
+						label: meta.workflowName ?? "",
+						promptId: meta.background.promptId,
+						t
+					});
+					if (meta.result !== void 0) return (0, react.createElement)(ResultCard, {
+						title: meta.workflowName ?? "",
+						result: meta.result,
+						t
+					});
+				}
+				if (meta.action === "list") {
+					const runs = meta.workflows?.length ?? 0;
+					const graphs = meta.comfyuiWorkflows?.length ?? 0;
+					return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, (0, react.createElement)("span", { className: "dsc-badge" }, "comfyui_workflow")), (0, react.createElement)("div", { className: "dsc-meta" }, t("cardListed", {
+						runs,
+						graphs
+					})));
+				}
+				if (meta.action === "get") return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, (0, react.createElement)("span", { className: "dsc-badge" }, "comfyui_workflow")), (0, react.createElement)("div", { className: "dsc-meta" }, meta.name ?? meta.id ?? "get"));
+				return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("span", { className: "dsc-badge" }, "comfyui_workflow"));
+			}
+			if (meta.kind === "background") return (0, react.createElement)(BackgroundCard, {
+				label: meta.label,
+				promptId: meta.promptId,
+				t
+			});
+			return (0, react.createElement)(ResultCard, {
+				title: "",
+				result: meta,
+				t
+			});
+		}
+		/** The card component: picks running vs settled rendering from the block. */
+		function ComfyUICard({ t, block }) {
+			if (isResultNode(block)) return (0, react.createElement)(SettledCard, {
+				block,
+				t
+			});
+			const args = parseArgs(block.argsRaw);
+			return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, (0, react.createElement)("span", { className: "dsc-badge" }, t("cardGenerating")), (0, react.createElement)("span", { className: "dsc-meta" }, `${t("cardWorkflow")} ${argsSummary(args)} · ${t("cardMode")} ${String(args.mode ?? "sync")}`)));
+		}
+		//#endregion
+		//#region src/client/api.ts
+		/** Same-origin JSON helpers shared by the settings page and the panel. */
+		async function getJson(url) {
+			const response = await fetch(url, { headers: { accept: "application/json" } });
+			if (!response.ok) throw new Error(`HTTP ${response.status}`);
+			return await response.json();
+		}
+		async function postJson(url, body) {
+			const response = await fetch(url, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(body)
+			});
+			if (!response.ok) {
+				const payload = await response.json().catch(() => ({}));
+				throw new Error(payload.error ?? `HTTP ${response.status}`);
+			}
+			return response.json();
+		}
+		//#endregion
+		//#region src/client/settings.tsx
+		/**
+		* The ComfyUI settings page (settings.section, id 'comfyui'). Reads the
+		* redacted host config over /comfyui/config, persists edits through the same
+		* route, and probes the server over /comfyui/test.
+		*/
+		/** The ComfyUI settings page component. */
+		function ComfyUISettings({ t }) {
+			const [config, setConfig] = (0, react.useState)(null);
+			const [baseUrl, setBaseUrl] = (0, react.useState)("");
+			const [apiKeyEnv, setApiKeyEnv] = (0, react.useState)("");
+			const [mediaHost, setMediaHost] = (0, react.useState)("");
+			const [loadError, setLoadError] = (0, react.useState)(null);
+			const [saving, setSaving] = (0, react.useState)(false);
+			const [saveState, setSaveState] = (0, react.useState)("idle");
+			const [testing, setTesting] = (0, react.useState)(false);
+			const [testResult, setTestResult] = (0, react.useState)(null);
+			const [lang, setLangState] = (0, react.useState)(getLang());
+			(0, react.useEffect)(() => {
+				let cancelled = false;
+				getJson("/comfyui/config").then((view) => {
+					if (cancelled) return;
+					setConfig(view);
+					setBaseUrl(view.baseUrl);
+					setApiKeyEnv(view.apiKeyEnv);
+					setMediaHost(view.mediaHost ?? "");
+				}).catch((error) => {
+					if (cancelled) return;
+					setLoadError(error instanceof Error ? error.message : String(error));
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, []);
+			const save = async () => {
+				setSaving(true);
+				setSaveState("idle");
+				try {
+					const payload = await postJson("/comfyui/config", { patch: {
+						baseUrl,
+						apiKeyEnv,
+						mediaHost
+					} });
+					if (payload.config !== void 0) {
+						setConfig(payload.config);
+						setBaseUrl(payload.config.baseUrl);
+						setApiKeyEnv(payload.config.apiKeyEnv);
+						setMediaHost(payload.config.mediaHost ?? "");
+					}
+					setSaveState("saved");
+				} catch (error) {
+					setSaveState("failed");
+					setTestResult({
+						ok: false,
+						text: error instanceof Error ? error.message : String(error)
+					});
+				} finally {
+					setSaving(false);
+				}
+			};
+			const test = async () => {
+				setTesting(true);
+				setTestResult(null);
+				try {
+					const payload = await postJson("/comfyui/test", {});
+					if (payload.ok === true) setTestResult({
+						ok: true,
+						text: t("testOk", {
+							version: payload.version ?? "unknown",
+							ms: payload.latencyMs ?? 0
+						})
+					});
+					else setTestResult({
+						ok: false,
+						text: t("testFail", { message: payload.error ?? "unknown error" })
+					});
+				} catch (error) {
+					setTestResult({
+						ok: false,
+						text: t("testFail", { message: error instanceof Error ? error.message : String(error) })
+					});
+				} finally {
+					setTesting(false);
+				}
+			};
+			if (loadError !== null) return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-meta" }, `${t("saveFailed")}: ${loadError}`));
+			if (config === null) return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-meta" }, "…"));
+			return (0, react.createElement)("div", { className: "dsc-form" }, (0, react.createElement)("div", { className: "dsc-meta" }, t("settingsDesc")), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("language")), (0, react.createElement)("select", {
+				className: "dsc-input",
+				value: lang,
+				onChange: (event) => {
+					const next = event.target.value === "en" ? "en" : "zh";
+					setLangState(next);
+					setLang(next);
+					window.location.reload();
+				}
+			}, (0, react.createElement)("option", { value: "zh" }, "中文"), (0, react.createElement)("option", { value: "en" }, "English")), (0, react.createElement)("div", { className: "dsc-hint" }, t("languageHint"))), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("baseUrl")), (0, react.createElement)("input", {
+				value: baseUrl,
+				placeholder: "http://127.0.0.1:8188",
+				onChange: (event) => {
+					setBaseUrl(event.target.value);
+					setSaveState("idle");
+				}
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("baseUrlHint"))), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("apiKeyEnv")), (0, react.createElement)("input", {
+				value: apiKeyEnv,
+				placeholder: "COMFYUI_API_KEY",
+				onChange: (event) => {
+					setApiKeyEnv(event.target.value);
+					setSaveState("idle");
+				}
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, `${t("apiKeyEnvHint")} — ${config.hasApiKey ? t("hasApiKey") : t("noApiKey")}`)), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("mediaHost")), (0, react.createElement)("input", {
+				value: mediaHost,
+				placeholder: "http://192.168.1.5:3080",
+				onChange: (event) => {
+					setMediaHost(event.target.value);
+					setSaveState("idle");
+				}
+			}), (0, react.createElement)("div", { className: "dsc-hint" }, t("mediaHostHint"))), (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: saving || !config.writable,
+				onClick: () => void save()
+			}, t("save")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: testing,
+				onClick: () => void test()
+			}, testing ? t("testing") : t("test")), saveState === "saved" ? (0, react.createElement)("span", { className: "dsc-note" }, t("saved")) : null, saveState === "failed" ? (0, react.createElement)("span", { className: "dsc-note" }, t("saveFailed")) : null), testResult !== null ? (0, react.createElement)("div", {
+				className: testResult.ok ? "dsc-note" : "dsc-note",
+				style: testResult.ok ? { color: "#22c55e" } : { color: "#ef4444" }
+			}, testResult.text) : null, config.writable ? null : (0, react.createElement)("div", { className: "dsc-hint" }, t("configNotWritable")));
+		}
+		//#endregion
+		//#region src/client/panel-store.ts
+		/**
+		* Shared open/close/tab state for the ComfyUI panel. The overlay occupant
+		* 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();
+		let open = false;
+		let tab = "workflows";
+		let assetFilter = "";
+		function emit() {
+			for (const listener of listeners) listener();
+		}
+		const panelStore = {
+			isOpen: () => open,
+			toggle: () => {
+				open = !open;
+				emit();
+			},
+			open: () => {
+				if (!open) {
+					open = true;
+					emit();
+				}
+			},
+			close: () => {
+				if (open) {
+					open = false;
+					emit();
+				}
+			},
+			getTab: () => tab,
+			setTab: (next) => {
+				if (tab !== next) {
+					tab = next;
+					emit();
+				}
+			},
+			getAssetFilter: () => assetFilter,
+			setAssetFilter: (name) => {
+				if (assetFilter !== name) {
+					assetFilter = name;
+					emit();
+				}
+			},
+			subscribe(listener) {
+				listeners.add(listener);
+				return () => {
+					listeners.delete(listener);
+				};
+			}
+		};
+		/** React hook reading the panel open state. */
+		function usePanelOpen() {
+			return (0, react.useSyncExternalStore)(panelStore.subscribe, panelStore.isOpen, panelStore.isOpen);
+		}
+		/** React hook reading the active panel tab. */
+		function usePanelTab() {
+			return (0, react.useSyncExternalStore)(panelStore.subscribe, panelStore.getTab, panelStore.getTab);
+		}
+		//#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 brand glyph (mono), inlined from @lobehub/icons-static-svg
+		* (lobehub.com/icons). currentColor fill keeps it theme-aware.
+		*/
+		function ComfyUIIcon() {
+			return (0, react.createElement)("svg", {
+				viewBox: "0 0 24 24",
+				width: "1em",
+				height: "1em",
+				fill: "currentColor",
+				fillRule: "evenodd",
+				style: {
+					flex: "none",
+					lineHeight: 1
+				},
+				"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. */
+		function ComfyUITrigger({ t }) {
+			const open = usePanelOpen();
+			return (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")));
+		}
+		//#endregion
+		//#region src/client/panel.tsx
+		/**
+		* The ComfyUI panel (shell.overlay, id 'comfyui.panel'): a floating panel
+		* with three tabs — workflow library management, generated asset preview,
+		* and the live ComfyUI queue. Draggable by its header and resizable via the
+		* corner handle; geometry persists in localStorage. Renders null while closed
+		* (the overlay layer is click-through, so nothing blocks the app underneath).
+		*/
+		const GEOM_KEY = "dsh-comfyui-panel-geom";
+		function loadGeom() {
+			try {
+				const raw = localStorage.getItem(GEOM_KEY);
+				if (raw === null) return {};
+				const parsed = JSON.parse(raw);
+				const geom = {};
+				if (typeof parsed.x === "number") geom.x = parsed.x;
+				if (typeof parsed.y === "number") geom.y = parsed.y;
+				if (typeof parsed.width === "number" && parsed.width >= 300) geom.width = parsed.width;
+				if (typeof parsed.height === "number" && parsed.height >= 200) geom.height = parsed.height;
+				return geom;
+			} catch {
+				return {};
+			}
+		}
+		function saveGeom(geom) {
+			try {
+				localStorage.setItem(GEOM_KEY, JSON.stringify(geom));
+			} catch {}
+		}
+		/** Preset workflow classification tags (users can add custom ones). Stored as
+		* plain text, so the tag identity is the label itself. */
+		const PRESET_TAGS = [
+			"图生图",
+			"文生图",
+			"文生视频",
+			"图生视频",
+			"参考生视频",
+			"文生音频",
+			"参考生音频"
+		];
+		const JOB_FILTERS = [
+			{
+				key: "all",
+				label: "jobFilterAll"
+			},
+			{
+				key: "completed",
+				label: "jobFilterCompleted"
+			},
+			{
+				key: "failed",
+				label: "jobFilterFailed"
+			},
+			{
+				key: "cancelled",
+				label: "jobFilterCancelled"
+			}
+		];
+		function shortId(promptId) {
+			return promptId.length > 10 ? `${promptId.slice(0, 10)}…` : promptId;
+		}
+		/** Open a job's preview image URL (via the media proxy) when it has one. */
+		function previewUrlOf(job) {
+			const preview = job.previewOutput;
+			if (preview === void 0 || preview === null || preview.filename === void 0 || preview.filename === null) return null;
+			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. */
+		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)}`;
+		}
+		/** Parse the draft workflow into a plain object (empty on invalid JSON). */
+		function parseDraftWorkflow(workflow) {
+			if (typeof workflow !== "string") return workflow;
+			try {
+				const parsed = JSON.parse(workflow);
+				return typeof parsed === "object" && parsed !== null ? parsed : {};
+			} catch {
+				return {};
+			}
+		}
+		/**
+		* Custom dropdown for loader-node file lists: each option shows a small
+		* server-side thumbnail (images only; <select> cannot render images).
+		*/
+		function UploadSelect(props) {
+			const [open, setOpen] = (0, react.useState)(false);
+			const [live, setLive] = (0, react.useState)(null);
+			const ref = (0, react.useRef)(null);
+			const refreshRef = (0, react.useRef)(props.onRefresh);
+			refreshRef.current = props.onRefresh;
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const onDoc = (event) => {
+					if (ref.current !== null && !ref.current.contains(event.target)) setOpen(false);
+				};
+				document.addEventListener("mousedown", onDoc);
+				return () => document.removeEventListener("mousedown", onDoc);
+			}, [open]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const fn = refreshRef.current;
+				if (fn === void 0) return;
+				let cancelled = false;
+				fn().then((latest) => {
+					if (!cancelled && latest !== void 0) setLive(latest);
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, [open]);
+			const options = live ?? props.options;
+			const thumbUrl = (name) => props.kind === "image" ? `/comfyui/media?file=${encodeURIComponent(String(name))}&type=input` : null;
+			const current = options.some((option) => String(option) === props.value) ? props.value : String(props.value);
+			return (0, react.createElement)("div", {
+				ref,
+				className: "dsc-upload-select"
+			}, (0, react.createElement)("button", {
+				className: "dsc-upload-select-btn",
+				onClick: () => setOpen(!open),
+				title: String(current)
+			}, thumbUrl(props.value) !== null ? (0, react.createElement)("img", {
+				className: "dsc-upload-select-thumb",
+				src: thumbUrl(props.value) ?? "",
+				alt: "",
+				loading: "lazy"
+			}) : null, (0, react.createElement)("span", { className: "dsc-upload-select-name" }, String(current))), open ? (0, react.createElement)("div", { className: "dsc-upload-select-pop" }, options.map((option) => {
+				const name = String(option);
+				return (0, react.createElement)("div", {
+					key: name,
+					className: `dsc-upload-select-item${name === props.value ? " dsc-upload-select-item--active" : ""}`,
+					onClick: () => {
+						props.onChange(name);
+						setOpen(false);
+					}
+				}, thumbUrl(option) !== null ? (0, react.createElement)("img", {
+					className: "dsc-upload-select-thumb",
+					src: thumbUrl(option) ?? "",
+					alt: "",
+					loading: "lazy"
+				}) : null, (0, react.createElement)("span", { className: "dsc-upload-select-name" }, name));
+			})) : null);
+		}
+		/** Merge a freshly fetched option list with the previous one (latest first,
+		* deduped) so the dropdown never drops options mid-session. */
+		function mergeOptions(prev, latest) {
+			const seen = /* @__PURE__ */ new Set();
+			const out = [];
+			for (const item of [...latest, ...prev]) {
+				const key = String(item);
+				if (!seen.has(key)) {
+					seen.add(key);
+					out.push(item);
+				}
+			}
+			return out;
+		}
+		/** Copy text to the clipboard; falls back to a hidden textarea when the
+		* clipboard API is unavailable (non-secure LAN http). */
+		function copyText(text) {
+			if (navigator.clipboard !== void 0) return navigator.clipboard.writeText(text).then(() => true).catch(() => copyViaTextarea(text));
+			return Promise.resolve(copyViaTextarea(text));
+		}
+		function copyViaTextarea(text) {
+			const textarea = document.createElement("textarea");
+			textarea.value = text;
+			textarea.style.position = "fixed";
+			textarea.style.opacity = "0";
+			document.body.appendChild(textarea);
+			textarea.select();
+			let ok = false;
+			try {
+				ok = document.execCommand("copy");
+			} catch {
+				ok = false;
+			}
+			document.body.removeChild(textarea);
+			return ok;
+		}
+		/** Read a file's pixel size in the browser (image only) and report it to the
+		* plugin so the workflow output size can default to the source image. Returns
+		* the size text for display, or undefined when unreadable. */
+		async function recordMediaSize(file, name) {
+			try {
+				const bitmap = await createImageBitmap(file);
+				const width = bitmap.width;
+				const height = bitmap.height;
+				bitmap.close();
+				await fetch("/comfyui/media-size", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						name,
+						width,
+						height
+					})
+				}).catch(() => void 0);
+				return `${width}×${height}`;
+			} catch {
+				return;
+			}
+		}
+		/** SHA-256 hex digest (pure JS — crypto.subtle needs a secure context, which a
+		* LAN http origin is not). Uses the standard padding/compression; the input is
+		* any byte array. */
+		function sha256Hex(data) {
+			const K = new Uint32Array([
+				1116352408,
+				1899447441,
+				3049323471,
+				3921009573,
+				961987163,
+				1508970993,
+				2453635748,
+				2870763221,
+				3624381080,
+				310598401,
+				607225278,
+				1426881987,
+				1925078388,
+				2162078206,
+				2614888103,
+				3248222580,
+				3835390401,
+				4022224774,
+				264347078,
+				604807628,
+				770255983,
+				1249150122,
+				1555081692,
+				1996064986,
+				2554220882,
+				2821834349,
+				2952996808,
+				3210313671,
+				3336571891,
+				3584528711,
+				113926993,
+				338241895,
+				666307205,
+				773529912,
+				1294757372,
+				1396182291,
+				1695183700,
+				1986661051,
+				2177026350,
+				2456956037,
+				2730485921,
+				2820302411,
+				3259730800,
+				3345764771,
+				3516065817,
+				3600352804,
+				4094571909,
+				275423344,
+				430227734,
+				506948616,
+				659060556,
+				883997877,
+				958139571,
+				1322822218,
+				1537002063,
+				1747873779,
+				1955562222,
+				2024104815,
+				2227730452,
+				2361852424,
+				2428436474,
+				2756734187,
+				3204031479,
+				3329325298
+			]);
+			const H = new Uint32Array([
+				1779033703,
+				3144134277,
+				1013904242,
+				2773480762,
+				1359893119,
+				2600822924,
+				528734635,
+				1541459225
+			]);
+			const len = data.length;
+			const total = len + 1 + (56 - (len + 1) % 64 + 64) % 64 + 8;
+			const msg = new Uint8Array(total);
+			msg.set(data);
+			msg[len] = 128;
+			const bitLenLo = len * 8 >>> 0;
+			const bitLenHi = Math.floor(len / 536870912);
+			const dv = new DataView(msg.buffer);
+			dv.setUint32(total - 8, bitLenHi);
+			dv.setUint32(total - 4, bitLenLo);
+			const w = /* @__PURE__ */ new Uint32Array(64);
+			for (let offset = 0; offset < total; offset += 64) {
+				for (let i = 0; i < 16; i++) w[i] = dv.getUint32(offset + i * 4);
+				for (let i = 16; i < 64; i++) {
+					const s0 = (w[i - 15] >>> 7 | w[i - 15] << 25) ^ (w[i - 15] >>> 18 | w[i - 15] << 14) ^ w[i - 15] >>> 3;
+					const s1 = (w[i - 2] >>> 17 | w[i - 2] << 15) ^ (w[i - 2] >>> 19 | w[i - 2] << 13) ^ w[i - 2] >>> 10;
+					w[i] = w[i - 16] + s0 + w[i - 7] + s1 >>> 0;
+				}
+				let a = H[0], b = H[1], c = H[2], d = H[3], e = H[4], f = H[5], g = H[6], h = H[7];
+				for (let i = 0; i < 64; i++) {
+					const S1 = (e >>> 6 | e << 26) ^ (e >>> 11 | e << 21) ^ (e >>> 25 | e << 7);
+					const ch = e & f ^ ~e & g;
+					const temp1 = h + S1 + ch + K[i] + w[i] >>> 0;
+					const temp2 = ((a >>> 2 | a << 30) ^ (a >>> 13 | a << 19) ^ (a >>> 22 | a << 10)) + (a & b ^ a & c ^ b & c) >>> 0;
+					h = g;
+					g = f;
+					f = e;
+					e = d + temp1 >>> 0;
+					d = c;
+					c = b;
+					b = a;
+					a = temp1 + temp2 >>> 0;
+				}
+				H[0] = H[0] + a >>> 0;
+				H[1] = H[1] + b >>> 0;
+				H[2] = H[2] + c >>> 0;
+				H[3] = H[3] + d >>> 0;
+				H[4] = H[4] + e >>> 0;
+				H[5] = H[5] + f >>> 0;
+				H[6] = H[6] + g >>> 0;
+				H[7] = H[7] + h >>> 0;
+			}
+			let out = "";
+			for (let i = 0; i < 8; i++) out += H[i].toString(16).padStart(8, "0");
+			return out;
+		}
+		/** `image.png` + hash → `image_3f9a2b1c0d.png`: keeps the name readable while
+		* making it content-unique, so re-uploading the same file reuses the name. */
+		function renameWithHash(original, hash) {
+			const short = hash.slice(0, 10);
+			const dot = original.lastIndexOf(".");
+			return `${dot > 0 ? original.slice(0, dot) : original}_${short}${dot > 0 ? original.slice(dot) : ""}`;
+		}
+		/** Upload a file with content-hash naming and dedup: same bytes → same file
+		* name, and (for root uploads) the existing file is reused instead of creating
+		* a duplicate. Returns the file name on the ComfyUI server. */
+		async function uploadDedup(file, subfolder) {
+			const hash = sha256Hex(new Uint8Array(await file.arrayBuffer()));
+			const dedup = subfolder === void 0 || subfolder === "";
+			if (dedup) {
+				const lookup = await fetch("/comfyui/media-lookup", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ hash })
+				}).then((response) => response.json()).catch(() => void 0);
+				if (lookup !== void 0 && lookup.ok === true && lookup.found === true && typeof lookup.name === "string") return lookup.name;
+			}
+			const renamed = new File([file], renameWithHash(file.name, hash), { type: file.type });
+			const form = new FormData();
+			form.append("image", renamed);
+			if (!dedup) form.append("subfolder", subfolder);
+			const data = await (await fetch("/comfyui/upload", {
+				method: "POST",
+				body: form
+			})).json();
+			if (data.ok !== true || typeof data.name !== "string") throw new Error(data.error ?? "upload failed");
+			if (dedup) await fetch("/comfyui/media-hash", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					hash,
+					name: data.name
+				})
+			}).catch(() => void 0);
+			return data.name;
+		}
+		/**
+		* Parameter editor: lists the workflow's adjustable parameters (auto-detected
+		* prompt/size/steps/seed) with editable name/label/default and a random
+		* toggle for number parameters, plus an "advanced" picker that exposes any
+		* node input as a custom parameter.
+		*/
+		function ParameterEditor(props) {
+			const { t, params, workflow, onChange } = props;
+			const [advanced, setAdvanced] = (0, react.useState)(false);
+			const [advNode, setAdvNode] = (0, react.useState)("");
+			const [advInput, setAdvInput] = (0, react.useState)("");
+			const [advLabel, setAdvLabel] = (0, react.useState)("");
+			const [recognizing, setRecognizing] = (0, react.useState)(false);
+			const [recognizeError, setRecognizeError] = (0, react.useState)(null);
+			const [uploading, setUploading] = (0, react.useState)({});
+			const [hovered, setHovered] = (0, react.useState)(null);
+			const hoverRef = (0, react.useRef)(null);
+			const latestRef = (0, react.useRef)({
+				params,
+				uploadFile: async () => void 0
+			});
+			/** Re-fetch a parameter's live option list (ComfyUI input dir files) and
+			* merge it into the stored options, so uploads made anywhere show up in the
+			* dropdown without reloading the workflow editor. */
+			const refreshOptions = async (param) => {
+				const rawNode = workflow[param.nodeId];
+				const classType = typeof rawNode?.class_type === "string" ? rawNode.class_type : "";
+				if (classType === "") return void 0;
+				const result = await postJson("/comfyui/workflows/input-options", {
+					classType,
+					inputKey: param.inputKey
+				});
+				if (result.ok !== true || !Array.isArray(result.options)) return void 0;
+				const latest = result.options;
+				const index = params.findIndex((entry) => entry.id === param.id);
+				if (index !== -1 && params[index]?.options !== void 0) update(index, { options: mergeOptions(params[index].options, latest) });
+				return latest;
+			};
+			/** Upload a dropped file through the plugin proxy into ComfyUI's input dir. */
+			const uploadFile = async (param, file) => {
+				setUploading((prev) => ({
+					...prev,
+					[param.id]: true
+				}));
+				try {
+					const name = await uploadDedup(file, param.subfolder);
+					recordMediaSize(file, name);
+					const index = params.findIndex((entry) => entry.id === param.id);
+					if (index !== -1) update(index, { default: name });
+					refreshOptions(param);
+				} finally {
+					setUploading((prev) => ({
+						...prev,
+						[param.id]: false
+					}));
+				}
+			};
+			latestRef.current = {
+				params,
+				uploadFile
+			};
+			/** Global paste: Ctrl+V with the mouse hovering an upload parameter routes
+			* the clipboard file (e.g. a screenshot) to that parameter — same mental
+			* model as pasting an image into a chat input. */
+			(0, react.useEffect)(() => {
+				const onPaste = (event) => {
+					const targetId = hoverRef.current;
+					if (targetId === null) return;
+					const file = event.clipboardData?.files?.[0];
+					if (file === void 0) return;
+					const param = latestRef.current.params.find((entry) => entry.id === targetId);
+					if (param === void 0 || param.upload === void 0) return;
+					event.preventDefault();
+					latestRef.current.uploadFile(param, file);
+				};
+				document.addEventListener("paste", onPaste);
+				return () => document.removeEventListener("paste", onPaste);
+			}, []);
+			/** Auto-generate the internal parameter name from the input key, deduped against existing params. */
+			const genParamName = (base) => {
+				let name = base;
+				let index = 2;
+				while (params.some((param) => param.name === name)) name = `${base}_${index++}`;
+				return name;
+			};
+			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 selectedInput = advInputs.find(([key]) => key === advInput);
+			/** Server-side auto-detection: prompt/size/steps/seed + dropdown options (object_info). */
+			const recognize = async () => {
+				if (recognizing) return;
+				setRecognizing(true);
+				setRecognizeError(null);
+				try {
+					const result = await postJson("/comfyui/workflows/recognize", { workflow });
+					if (result.ok === true && Array.isArray(result.parameters)) {
+						onChange(result.parameters);
+						setAdvanced(false);
+					} else setRecognizeError(result.error ?? t("wfParamsRecognizeFailed"));
+				} catch {
+					setRecognizeError(t("wfParamsRecognizeFailed"));
+				} finally {
+					setRecognizing(false);
+				}
+			};
+			const update = (index, patch) => {
+				onChange(params.map((param, i) => i === index ? {
+					...param,
+					...patch
+				} : param));
+			};
+			const addAdvanced = async () => {
+				if (advNode === "" || advInput === "" || selectedInput === void 0 || advNodeInfo === void 0) return;
+				const [, value] = selectedInput;
+				const type = typeof value === "number" ? "number" : typeof value === "boolean" ? "boolean" : "string";
+				if (!params.some((param) => param.nodeId === advNode && param.inputKey === advInput && param.upload === "media") && typeof value === "string") {
+					let parsed;
+					try {
+						parsed = JSON.parse(value);
+					} catch {
+						parsed = void 0;
+					}
+					if (Array.isArray(parsed) && parsed.length > 0 && parsed.every((item) => typeof item === "object" && item !== null && typeof item.file === "string")) {
+						const items = parsed;
+						const firstFile = items[0]?.file;
+						const slash = typeof firstFile === "string" ? firstFile.indexOf("/") : -1;
+						const subfolder = typeof firstFile === "string" && slash > 0 ? firstFile.slice(0, slash) : void 0;
+						const added = items.map((item, i) => ({
+							id: newParamId(),
+							name: genParamName(`media_${i + 1}`),
+							label: `${t("wfRefSlot")}${i + 1}`,
+							type: "string",
+							nodeId: advNode,
+							inputKey: advInput,
+							default: typeof item.name === "string" ? item.name : "",
+							upload: "media",
+							subfolder
+						}));
+						onChange([...params, ...added]);
+						setAdvanced(false);
+						setAdvNode("");
+						setAdvInput("");
+						setAdvLabel("");
+						return;
+					}
+				}
+				let options;
+				let upload;
+				if (typeof advNodeInfo.class_type === "string") try {
+					const result = await postJson("/comfyui/workflows/input-options", {
+						classType: advNodeInfo.class_type,
+						inputKey: advInput
+					});
+					if (result.ok === true && Array.isArray(result.options) && result.options.length > 0) options = result.options;
+					upload = result.upload;
+				} catch {}
+				onChange([...params, {
+					id: newParamId(),
+					name: genParamName(advInput),
+					label: advLabel !== "" ? advLabel : `${advNode} · ${advInput}`,
+					type,
+					nodeId: advNode,
+					inputKey: advInput,
+					default: typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? value : "",
+					options,
+					upload
+				}]);
+				setAdvanced(false);
+				setAdvNode("");
+				setAdvInput("");
+				setAdvLabel("");
+			};
+			/** Update a parameter's default; DynamicCombo parents refresh their child (size) parameter. */
+			const updateDefault = (index, value) => {
+				update(index, { default: value });
+				const param = params[index];
+				if (param === void 0 || typeof value !== "string") return;
+				if (param.options === void 0 || param.options.length === 0) return;
+				const childIndex = params.findIndex((entry) => entry.nodeId === param.nodeId && entry.inputKey.startsWith(`${param.inputKey}.`));
+				if (childIndex === -1) return;
+				const child = params[childIndex];
+				if (child === void 0) return;
+				const rawNode = workflow[child.nodeId];
+				postJson("/comfyui/workflows/input-options", {
+					classType: typeof rawNode?.class_type === "string" ? rawNode.class_type : "",
+					inputKey: param.inputKey,
+					parentValue: value
+				}).then((result) => {
+					const data = result;
+					if (data.ok === true && data.child !== void 0 && childIndex < params.length) update(childIndex, {
+						options: data.child.options,
+						default: data.child.default
+					});
+				}).catch(() => void 0);
+			};
+			return (0, react.createElement)("div", { className: "dsc-params" }, params.length === 0 ? (0, react.createElement)("div", { className: "dsc-hint" }, t("wfParamsEmpty")) : (0, react.createElement)("div", { className: "dsc-list" }, params.map((param, index) => (0, react.createElement)("div", {
+				key: param.id,
+				className: "dsc-param-row"
+			}, (0, react.createElement)("div", { className: "dsc-param-fields" }, (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm",
+				value: param.label,
+				placeholder: t("wfParamLabel"),
+				onChange: (event) => update(index, { label: event.target.value })
+			})), param.upload === "media" ? (0, react.createElement)("div", {
+				className: "dsc-param-upload-wrap",
+				onMouseEnter: () => {
+					hoverRef.current = param.id;
+					setHovered(param.id);
+				},
+				onMouseLeave: () => {
+					hoverRef.current = null;
+					setHovered(null);
+				}
+			}, (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm dsc-param-default",
+				value: String(param.default),
+				placeholder: t("wfMediaEmpty"),
+				title: `${param.subfolder ?? ""}/`,
+				onChange: (event) => updateDefault(index, event.target.value)
+			}), (0, react.createElement)("label", {
+				className: hovered === param.id ? "dsc-dropzone dsc-dropzone--over" : "dsc-dropzone",
+				title: t("wfPasteHint"),
+				tabIndex: 0,
+				onDragOver: (event) => event.preventDefault(),
+				onDrop: (event) => {
+					event.preventDefault();
+					const file = event.dataTransfer?.files?.[0];
+					if (file !== void 0) uploadFile(param, file);
+				},
+				onPaste: (event) => {
+					const file = event.clipboardData?.files?.[0];
+					if (file !== void 0) uploadFile(param, file);
+				}
+			}, (0, react.createElement)("input", {
+				type: "file",
+				style: { display: "none" },
+				onChange: (event) => {
+					const file = event.target.files?.[0];
+					if (file !== void 0) uploadFile(param, file);
+					event.target.value = "";
+				}
+			}), uploading[param.id] === true ? t("wfParamsUploading") : t("wfParamsDrop")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => updateDefault(index, "")
+			}, t("wfMediaClear"))) : param.upload !== void 0 ? (0, react.createElement)("div", {
+				className: "dsc-param-upload-wrap",
+				onMouseEnter: () => {
+					hoverRef.current = param.id;
+					setHovered(param.id);
+				},
+				onMouseLeave: () => {
+					hoverRef.current = null;
+					setHovered(null);
+				}
+			}, param.options !== void 0 && param.options.length > 0 ? (0, react.createElement)(UploadSelect, {
+				value: String(param.default),
+				options: param.options,
+				kind: param.upload,
+				onChange: (value) => updateDefault(index, value),
+				onRefresh: () => refreshOptions(param)
+			}) : null, (0, react.createElement)("label", {
+				className: hovered === param.id ? "dsc-dropzone dsc-dropzone--over" : "dsc-dropzone",
+				title: t("wfPasteHint"),
+				tabIndex: 0,
+				onDragOver: (event) => event.preventDefault(),
+				onDrop: (event) => {
+					event.preventDefault();
+					const file = event.dataTransfer?.files?.[0];
+					if (file !== void 0) uploadFile(param, file);
+				},
+				onPaste: (event) => {
+					const file = event.clipboardData?.files?.[0];
+					if (file !== void 0) uploadFile(param, file);
+				}
+			}, (0, react.createElement)("input", {
+				type: "file",
+				style: { display: "none" },
+				onChange: (event) => {
+					const file = event.target.files?.[0];
+					if (file !== void 0) uploadFile(param, file);
+					event.target.value = "";
+				}
+			}), uploading[param.id] === true ? t("wfParamsUploading") : `${t("wfParamsDrop")} ${t(`uploadKind_${param.upload}`)}`)) : param.options !== void 0 && param.options.length > 0 ? (0, react.createElement)("select", {
+				className: "dsc-input dsc-input--sm dsc-param-default",
+				value: String(param.default),
+				onChange: (event) => updateDefault(index, event.target.value)
+			}, param.options.map((option) => (0, react.createElement)("option", {
+				key: String(option),
+				value: String(option)
+			}, String(option)))) : param.type === "string" ? (0, react.createElement)("textarea", {
+				className: "dsc-input dsc-param-default",
+				rows: 2,
+				value: String(param.default),
+				placeholder: t("wfParamDefault"),
+				onChange: (event) => updateDefault(index, event.target.value)
+			}) : (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm dsc-param-default",
+				value: String(param.default),
+				placeholder: t("wfParamDefault"),
+				onChange: (event) => {
+					const raw = event.target.value;
+					updateDefault(index, param.type === "number" ? Number(raw) || 0 : raw);
+				}
+			}), (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", {
+				type: "checkbox",
+				checked: param.random === true,
+				onChange: (event) => update(index, { random: event.target.checked })
+			}), (0, react.createElement)("span", null, t("wfParamRandom"))) : null, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => onChange(params.filter((_, i) => i !== index))
+			}, t("wfParamDelete")))))), (0, react.createElement)("div", { className: "dsc-toolbar" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: recognizing,
+				onClick: () => {
+					recognize();
+				}
+			}, recognizing ? t("wfParamsRecognizing") : t("wfParamsRecognize")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => setAdvanced(!advanced)
+			}, t("wfParamsAdd"))), recognizeError !== null ? (0, react.createElement)("div", { className: "dsc-hint dsc-hint--error" }, recognizeError) : null, advanced ? (0, react.createElement)("div", { className: "dsc-param-advanced" }, (0, react.createElement)("div", { className: "dsc-param-fields" }, (0, react.createElement)("select", {
+				className: "dsc-input dsc-input--sm",
+				value: advNode,
+				onChange: (event) => {
+					setAdvNode(event.target.value);
+					setAdvInput("");
+				}
+			}, (0, react.createElement)("option", { value: "" }, "—"), nodeEntries.map(([id, node]) => (0, react.createElement)("option", {
+				key: id,
+				value: id
+			}, `#${id} ${node.class_type ?? ""}`))), advNodeInfo !== void 0 ? (0, react.createElement)("select", {
+				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", {
+				key,
+				value: key
+			}, `${key} (${value === null ? "null" : typeof value})`))) : null, (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm",
+				value: advLabel,
+				placeholder: t("wfParamCustomLabel"),
+				onChange: (event) => setAdvLabel(event.target.value)
+			}), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: advNode === "" || advInput === "",
+				onClick: () => {
+					addAdvanced();
+				}
+			}, t("wfParamAdd"))), (0, react.createElement)("div", { className: "dsc-hint" }, t("wfParamCustomHint"))) : null);
+		}
+		function formatTs(ts) {
+			const date = new Date(ts);
+			return Number.isNaN(date.getTime()) ? ts : date.toLocaleString();
+		}
+		function formatBytes(bytes) {
+			if (bytes === void 0) return "";
+			if (bytes < 1024) return `${bytes} B`;
+			if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+			return `${(bytes / 1048576).toFixed(2)} MB`;
+		}
+		/** The panel shell: header (drag handle), tabs, and the active tab body. */
+		function ComfyUIPanel({ t }) {
+			const open = usePanelOpen();
+			const tab = usePanelTab();
+			const [geom, setGeom] = (0, react.useState)(loadGeom);
+			const [dragging, setDragging] = (0, react.useState)(null);
+			const [lightbox, setLightbox] = (0, react.useState)(null);
+			const panelRef = (0, react.useRef)(null);
+			const dragRef = (0, react.useRef)(null);
+			const openPreview = (images, kinds, index) => setLightbox({
+				images,
+				kinds,
+				index
+			});
+			(0, react.useEffect)(() => {
+				if (open) return;
+				saveGeom(geom);
+			}, [open]);
+			const startDrag = (event, mode) => {
+				if (event.button !== 0) return;
+				if (mode === "move") {
+					const target = event.target;
+					if (target !== null && target.closest("button, input, textarea, select, a, label")) return;
+				}
+				const rect = panelRef.current?.getBoundingClientRect();
+				if (rect === void 0) return;
+				dragRef.current = {
+					startX: event.clientX,
+					startY: event.clientY,
+					origX: rect.left,
+					origY: rect.top,
+					width: rect.width,
+					height: rect.height
+				};
+				setDragging(mode);
+				const el = event.currentTarget;
+				if (el !== null && typeof el.setPointerCapture === "function") el.setPointerCapture(event.pointerId);
+			};
+			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") {
+					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) => ({
+						...prev,
+						width,
+						height
+					}));
+				}
+			};
+			const endDrag = () => {
+				if (dragRef.current === null) return;
+				dragRef.current = null;
+				setDragging(null);
+				setGeom((prev) => {
+					saveGeom(prev);
+					return prev;
+				});
+			};
+			if (!open) return null;
+			const panelStyle = {};
+			if (geom.x !== void 0 && geom.y !== void 0) {
+				panelStyle.left = `${geom.x}px`;
+				panelStyle.top = `${geom.y}px`;
+				panelStyle.right = "auto";
+				panelStyle.bottom = "auto";
+			}
+			if (geom.width !== void 0) panelStyle.width = `${geom.width}px`;
+			if (geom.height !== void 0) panelStyle.height = `${geom.height}px`;
+			return (0, react.createElement)("div", {
+				ref: panelRef,
+				className: `dsc-panel${dragging !== null ? " dsc-panel--dragging" : ""}`,
+				style: panelStyle
+			}, (0, react.createElement)("div", {
+				className: "dsc-panel-head",
+				onPointerDown: (event) => startDrag(event, "move"),
+				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", {
+				className: "dsc-panel-close",
+				"aria-label": t("close"),
+				onClick: () => panelStore.close()
+			}, "✕")), (0, react.createElement)("div", { className: "dsc-tabs" }, (0, react.createElement)(TabButton, {
+				t,
+				active: tab === "workflows",
+				label: t("tabWorkflows"),
+				onClick: () => panelStore.setTab("workflows")
+			}), (0, react.createElement)(TabButton, {
+				t,
+				active: tab === "assets",
+				label: t("tabAssets"),
+				onClick: () => panelStore.setTab("assets")
+			}), (0, react.createElement)(TabButton, {
+				t,
+				active: tab === "queue",
+				label: t("tabQueue"),
+				onClick: () => panelStore.setTab("queue")
+			})), (0, react.createElement)("div", { className: "dsc-panel-body" }, tab === "workflows" ? (0, react.createElement)(WorkflowsTab, { t }) : tab === "assets" ? (0, react.createElement)(AssetsTab, {
+				t,
+				onPreview: openPreview
+			}) : (0, react.createElement)(QueueTab, {
+				t,
+				onPreview: openPreview
+			})), lightbox !== null ? (0, react.createElement)(Lightbox, {
+				t,
+				images: lightbox.images,
+				kinds: lightbox.kinds,
+				index: lightbox.index,
+				onClose: () => setLightbox(null),
+				onIndex: (index) => setLightbox({
+					images: lightbox.images,
+					kinds: lightbox.kinds,
+					index
+				})
+			}) : null, (0, react.createElement)("div", {
+				className: "dsc-panel-resize",
+				onPointerDown: (event) => startDrag(event, "resize"),
+				onPointerMove: (event) => moveDrag(event),
+				onPointerUp: () => endDrag(),
+				onPointerCancel: () => endDrag()
+			}));
+		}
+		function TabButton(props) {
+			return (0, react.createElement)("button", {
+				className: props.active ? "dsc-tab dsc-tab--active" : "dsc-tab",
+				onClick: props.onClick
+			}, props.label);
+		}
+		function ErrorNote({ t, message }) {
+			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). */
+		function LoadArea(props) {
+			const [current, setCurrent] = (0, react.useState)(null);
+			const [files, setFiles] = (0, react.useState)([]);
+			const [pickerOpen, setPickerOpen] = (0, react.useState)(false);
+			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);
+					setFiles(data.files ?? []);
+				}
+			}, []);
+			(0, react.useEffect)(() => {
+				refresh();
+			}, [refresh]);
+			const upload = async (file) => {
+				setBusy(true);
+				setError(null);
+				try {
+					const name = await uploadDedup(file);
+					const sizeText = await recordMediaSize(file, name);
+					await refresh();
+					props.onNotice(`${props.t("wfUploaded")}：${name}${sizeText !== void 0 ? `（${sizeText}）` : ""}`);
+					return name;
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+					throw cause;
+				} finally {
+					setBusy(false);
+				}
+			};
+			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}`);
+			};
+			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, {
+				t: props.t,
+				files,
+				current: current?.name ?? null,
+				onUpload: upload,
+				onPick: pick,
+				onClose: () => setPickerOpen(false)
+			}) : null, error !== null ? (0, react.createElement)("div", { className: "dsc-hint dsc-hint--error" }, error) : null);
+		}
+		/** 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) {
+			const [tab, setTab] = (0, react.useState)("all");
+			const [type, setType] = (0, react.useState)("all");
+			const hoverRef = (0, react.useRef)(false);
+			const [uploadFlash, setUploadFlash] = (0, react.useState)(null);
+			const [scrollTo, setScrollTo] = (0, react.useState)(null);
+			const cardRefs = (0, react.useRef)(/* @__PURE__ */ new Map());
+			const flashTimer = (0, react.useRef)(void 0);
+			(0, react.useEffect)(() => () => {
+				if (flashTimer.current !== void 0) window.clearTimeout(flashTimer.current);
+			}, []);
+			(0, react.useEffect)(() => {
+				const onPaste = (event) => {
+					if (!hoverRef.current) return;
+					const file = event.clipboardData?.files?.[0];
+					if (file === void 0) return;
+					event.preventDefault();
+					handleUpload(file);
+				};
+				document.addEventListener("paste", onPaste);
+				return () => document.removeEventListener("paste", onPaste);
+			});
+			/** Upload, then flash a confirmation and scroll the grid to the new file. */
+			const handleUpload = async (file) => {
+				try {
+					const name = await props.onUpload(file);
+					setScrollTo(name);
+					setUploadFlash(`${props.t("wfUploadedToast")}：${name}`);
+					if (flashTimer.current !== void 0) window.clearTimeout(flashTimer.current);
+					flashTimer.current = window.setTimeout(() => setUploadFlash(null), 2500);
+				} catch {}
+			};
+			const bySource = tab === "all" ? props.files : props.files.filter((file) => file.source === tab);
+			const filtered = type === "all" ? bySource : bySource.filter((file) => file.kind === type);
+			(0, react.useEffect)(() => {
+				if (scrollTo === null) return;
+				let found;
+				for (const [key, el] of cardRefs.current) if (key.endsWith(`:${scrollTo}`)) {
+					found = el;
+					break;
+				}
+				if (found !== void 0) {
+					found.scrollIntoView({
+						block: "center",
+						behavior: "smooth"
+					});
+					setScrollTo(null);
+				}
+			}, [scrollTo, filtered]);
+			const columns = [
+				[],
+				[],
+				[]
+			];
+			filtered.forEach((file, index) => {
+				columns[index % 3].push(file);
+			});
+			const tabs = [
+				{
+					id: "all",
+					label: props.t("wfTabAll")
+				},
+				{
+					id: "imported",
+					label: props.t("wfTabImported")
+				},
+				{
+					id: "generated",
+					label: props.t("wfTabGenerated")
+				}
+			];
+			const typeOptions = [
+				{
+					id: "all",
+					label: props.t("wfTypeAll")
+				},
+				{
+					id: "image",
+					label: props.t("uploadKind_image")
+				},
+				{
+					id: "video",
+					label: props.t("uploadKind_video")
+				},
+				{
+					id: "audio",
+					label: props.t("uploadKind_audio")
+				}
+			];
+			return (0, react.createElement)("div", {
+				className: "dsc-picker-overlay",
+				onClick: props.onClose
+			}, (0, react.createElement)("div", {
+				className: "dsc-picker",
+				onClick: (event) => event.stopPropagation()
+			}, (0, react.createElement)("div", { className: "dsc-picker-bar" }, (0, react.createElement)("div", { className: "dsc-picker-tabs" }, tabs.map((entry) => (0, react.createElement)("button", {
+				key: entry.id,
+				className: `dsc-picker-tab${tab === entry.id ? " dsc-picker-tab--active" : ""}`,
+				onClick: () => setTab(entry.id)
+			}, entry.label))), (0, react.createElement)("label", {
+				className: "dsc-dropzone dsc-picker-upload",
+				title: props.t("wfPasteHint"),
+				onMouseEnter: () => {
+					hoverRef.current = true;
+				},
+				onMouseLeave: () => {
+					hoverRef.current = false;
+				},
+				onDragOver: (event) => event.preventDefault(),
+				onDrop: (event) => {
+					event.preventDefault();
+					const file = event.dataTransfer?.files?.[0];
+					if (file !== void 0) handleUpload(file);
+				}
+			}, (0, react.createElement)("input", {
+				type: "file",
+				style: { display: "none" },
+				onChange: (event) => {
+					const file = event.target.files?.[0];
+					if (file !== void 0) handleUpload(file);
+					event.target.value = "";
+				}
+			}), props.t("wfPickerUpload")), (0, react.createElement)("select", {
+				className: "dsc-picker-type",
+				value: type,
+				onChange: (event) => setType(event.target.value)
+			}, 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", {
+				key: columnIndex,
+				className: "dsc-picker-col"
+			}, column.map((file) => (0, react.createElement)("button", {
+				key: `${file.source}:${file.name}`,
+				className: `dsc-picker-card${file.name === props.current ? " dsc-picker-card--active" : ""}`,
+				onClick: () => {
+					props.onPick(file);
+				},
+				title: file.name,
+				ref: (el) => {
+					if (el !== null) cardRefs.current.set(`${file.source}:${file.name}`, el);
+					else cardRefs.current.delete(`${file.source}:${file.name}`);
+				}
+			}, file.kind === "image" ? (0, react.createElement)("img", {
+				className: "dsc-picker-thumb",
+				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));
+		}
+		/** Tag editor: preset classification chips (图生图 etc.) toggle on/off, plus
+		* free-form custom tags added with Enter and removed by clicking. */
+		function TagEditor(props) {
+			const [custom, setCustom] = (0, react.useState)("");
+			const toggle = (tag) => {
+				props.onChange(props.tags.includes(tag) ? props.tags.filter((entry) => entry !== tag) : [...props.tags, tag]);
+			};
+			const addCustom = () => {
+				const tag = custom.trim();
+				if (tag === "" || props.tags.includes(tag)) return;
+				props.onChange([...props.tags, tag]);
+				setCustom("");
+			};
+			const customTags = props.tags.filter((tag) => !PRESET_TAGS.includes(tag));
+			return (0, react.createElement)("div", { className: "dsc-tag-editor" }, (0, react.createElement)("div", { className: "dsc-tag-row" }, PRESET_TAGS.map((tag) => (0, react.createElement)("button", {
+				key: tag,
+				className: `dsc-tag-chip${props.tags.includes(tag) ? " dsc-tag-chip--active" : ""}`,
+				onClick: () => toggle(tag)
+			}, tag))), customTags.length > 0 ? (0, react.createElement)("div", { className: "dsc-tag-row" }, customTags.map((tag) => (0, react.createElement)("button", {
+				key: tag,
+				className: "dsc-tag-chip dsc-tag-chip--active",
+				title: props.t("wfTagRemove"),
+				onClick: () => toggle(tag)
+			}, `✕ ${tag}`))) : null, (0, react.createElement)("input", {
+				className: "dsc-input dsc-input--sm dsc-tag-input",
+				value: custom,
+				placeholder: props.t("wfTagAdd"),
+				onChange: (event) => setCustom(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						addCustom();
+					}
+				}
+			}));
+		}
+		function WorkflowsTab({ t }) {
+			const [list, setList] = (0, react.useState)(null);
+			const [comfyui, setComfyui] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [comfyuiError, setComfyuiError] = (0, react.useState)(null);
+			const [notice, setNotice] = (0, react.useState)(null);
+			const [editing, setEditing] = (0, react.useState)(null);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [viewing, setViewing] = (0, react.useState)(null);
+			const [extract, setExtract] = (0, react.useState)(null);
+			const [tagFilter, setTagFilter] = (0, react.useState)(null);
+			const load = async () => {
+				try {
+					const data = await getJson("/comfyui/workflows");
+					setList(data.workflows);
+					setError(null);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}
+				try {
+					const data = await getJson("/comfyui/comfy-workflows");
+					setComfyui(data.workflows);
+					setComfyuiError(null);
+				} catch (cause) {
+					setComfyuiError(cause instanceof Error ? cause.message : String(cause));
+				}
+			};
+			(0, react.useEffect)(() => {
+				let cancelled = false;
+				getJson("/comfyui/workflows").then((data) => {
+					if (!cancelled) setList(data.workflows);
+				}).catch((cause) => {
+					if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause));
+				});
+				getJson("/comfyui/comfy-workflows").then((data) => {
+					if (!cancelled) setComfyui(data.workflows);
+				}).catch((cause) => {
+					if (!cancelled) setComfyuiError(cause instanceof Error ? cause.message : String(cause));
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, []);
+			/** Persist the current draft; returns the saved workflow id, or null on failure (error already set). */
+			const persist = async () => {
+				if (editing === null) return null;
+				setBusy(true);
+				setError(null);
+				setNotice(null);
+				let workflow;
+				if (typeof editing.workflow === "string") try {
+					workflow = JSON.parse(editing.workflow);
+				} catch {
+					setError(t("wfJsonError"));
+					setBusy(false);
+					return null;
+				}
+				else workflow = editing.workflow;
+				try {
+					const body = {
+						name: String(editing.name ?? ""),
+						description: String(editing.description ?? ""),
+						workflow,
+						parameters: editing.parameters ?? [],
+						tags: editing.tags ?? []
+					};
+					if (editing.id !== void 0) body.id = editing.id;
+					return (await postJson("/comfyui/workflows", body)).workflow?.id ?? (typeof editing.id === "string" ? editing.id : null);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+					return null;
+				} finally {
+					setBusy(false);
+				}
+			};
+			const save = async () => {
+				if (await persist() === null) return;
+				setEditing(null);
+				await load();
+			};
+			/** Save the draft, then immediately queue it with the saved parameters. */
+			const saveAndRun = async () => {
+				const id = await persist();
+				if (id === null) return;
+				setEditing(null);
+				await load();
+				await run(id);
+			};
+			const run = async (id) => {
+				setBusy(true);
+				setError(null);
+				setNotice(null);
+				try {
+					const result = await postJson("/comfyui/workflows/run", { id });
+					setNotice(`${t("wfQueued")} ${shortId(result.promptId)}`);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				} finally {
+					setBusy(false);
+				}
+			};
+			const remove = async (id) => {
+				setBusy(true);
+				setError(null);
+				try {
+					await postJson("/comfyui/workflows/delete", { id });
+					await load();
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				} finally {
+					setBusy(false);
+				}
+			};
+			const openExtract = (file) => {
+				setError(null);
+				setExtract({
+					file,
+					analysis: null,
+					error: null,
+					mode: "split"
+				});
+			};
+			const runExtract = async (state) => {
+				setBusy(true);
+				try {
+					const data = await postJson("/comfyui/comfy-workflows/extract", {
+						file: state.file,
+						mode: state.mode
+					});
+					if (data.ok !== true) throw new Error(data.error ?? "failed to extract");
+					setNotice(`${state.file} → ${t("wfExtractedNotice")}${data.warnings.length > 0 ? `（${t("error")}: ${data.warnings.join("；")}）` : ""}`);
+					setExtract(null);
+					await load();
+				} catch (cause) {
+					setExtract({
+						...state,
+						error: cause instanceof Error ? cause.message : String(cause)
+					});
+				} finally {
+					setBusy(false);
+				}
+			};
+			const importFile = (file) => {
+				const reader = new FileReader();
+				reader.onload = () => {
+					try {
+						const parsed = JSON.parse(String(reader.result));
+						setEditing({
+							name: file.name.replace(/\.json$/i, ""),
+							workflow: parsed
+						});
+						setError(null);
+					} catch {
+						setError(t("wfJsonError"));
+					}
+				};
+				reader.readAsText(file);
+			};
+			const view = async (file) => {
+				setBusy(true);
+				setError(null);
+				try {
+					const data = await getJson(`/comfyui/comfy-workflows?file=${encodeURIComponent(file)}`);
+					if (data.ok !== true || data.workflow === void 0) throw new Error(data.error ?? "failed to read workflow");
+					setViewing({
+						file,
+						graph: data.workflow
+					});
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				} finally {
+					setBusy(false);
+				}
+			};
+			if (viewing !== null) return (0, react.createElement)(WorkflowView, {
+				t,
+				file: viewing.file,
+				graph: viewing.graph,
+				onBack: () => setViewing(null)
+			});
+			if (extract !== null) return (0, react.createElement)(ExtractDialog, {
+				t,
+				state: extract,
+				onUpdate: setExtract,
+				onRun: (state) => runExtract(state),
+				onClose: () => setExtract(null)
+			});
+			if (error !== null) return (0, react.createElement)("div", null, (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}));
+			if (list === null) return (0, react.createElement)("div", { className: "dsc-meta" }, "…");
+			if (editing !== null) return (0, react.createElement)("div", { className: "dsc-form" }, (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("wfName")), (0, react.createElement)("input", {
+				className: "dsc-input",
+				value: editing.name ?? "",
+				onChange: (event) => setEditing({
+					...editing,
+					name: event.target.value
+				})
+			})), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("wfDesc")), (0, react.createElement)("textarea", {
+				className: "dsc-textarea",
+				placeholder: t("wfDescPlaceholder"),
+				value: editing.description ?? "",
+				onChange: (event) => setEditing({
+					...editing,
+					description: event.target.value
+				})
+			})), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("wfTags")), (0, react.createElement)(TagEditor, {
+				t,
+				tags: editing.tags ?? [],
+				onChange: (tags) => setEditing({
+					...editing,
+					tags
+				})
+			})), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("wfParams")), (0, react.createElement)(ParameterEditor, {
+				t,
+				params: editing.parameters ?? [],
+				workflow: parseDraftWorkflow(editing.workflow),
+				onChange: (parameters) => setEditing({
+					...editing,
+					parameters
+				})
+			})), (0, react.createElement)("div", { className: "dsc-field" }, (0, react.createElement)("label", null, t("wfJson")), (0, react.createElement)("textarea", {
+				className: "dsc-textarea dsc-textarea--json",
+				value: typeof editing.workflow === "string" ? editing.workflow : JSON.stringify(editing.workflow ?? {}, null, 2),
+				onChange: (event) => setEditing({
+					...editing,
+					workflow: event.target.value
+				})
+			})), notice !== null ? (0, react.createElement)("div", { className: "dsc-ok" }, notice) : null, error !== null ? (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}) : null, (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => void save()
+			}, t("wfSave")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => void saveAndRun()
+			}, t("wfSaveRun")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => {
+					setEditing(null);
+					setError(null);
+				}
+			}, t("wfCancel"))));
+			const comfyuiFold = (0, react.createElement)("details", { className: "dsc-fold" }, (0, react.createElement)("summary", null, `${t("wfComfyuiSection")} (${comfyui?.length ?? 0})`), (0, react.createElement)("div", { className: "dsc-fold-body" }, (0, react.createElement)("div", { className: "dsc-hint" }, t("wfComfyuiHint")), comfyuiError !== null ? (0, react.createElement)(ErrorNote, {
+				t,
+				message: comfyuiError
+			}) : null, comfyui === null ? (0, react.createElement)("div", { className: "dsc-meta" }, "…") : comfyui.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("wfComfyuiEmpty")) : (0, react.createElement)("div", { className: "dsc-list" }, comfyui.map((workflow) => (0, react.createElement)("div", {
+				key: workflow.name,
+				className: "dsc-wf dsc-wf--comfyui",
+				title: t("wfNameCopyHint"),
+				onClick: () => {
+					copyText(workflow.name).then((ok) => {
+						if (ok) setNotice(`${t("wfNameCopied")}：${workflow.name}`);
+					});
+				}
+			}, (0, react.createElement)("div", { className: "dsc-wf-col" }, (0, react.createElement)("div", {
+				className: "dsc-wf-name",
+				title: workflow.name
+			}, workflow.name), (0, react.createElement)("div", { className: "dsc-wf-actions" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: (event) => {
+					event.stopPropagation();
+					view(workflow.name);
+				}
+			}, t("wfView")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: (event) => {
+					event.stopPropagation();
+					openExtract(workflow.name);
+				}
+			}, t("wfExtract"))), (0, react.createElement)("div", { className: "dsc-meta" }, [formatBytes(workflow.size), workflow.modified !== void 0 ? formatTs(new Date(workflow.modified).toISOString()) : ""].filter(Boolean).join(" · "))), (0, react.createElement)("span", { className: workflow.extracted ? "dsc-badge dsc-badge--ok" : "dsc-badge dsc-badge--warn" }, workflow.extracted ? `${t("wfExtracted")} ${workflow.derived.length}` : t("wfNotExtracted")))))));
+			const tagCounts = /* @__PURE__ */ new Map();
+			for (const workflow of list) for (const tag of workflow.tags ?? []) tagCounts.set(tag, (tagCounts.get(tag) ?? 0) + 1);
+			const visibleTags = [...tagCounts.entries()].sort((a, b) => {
+				const pa = PRESET_TAGS.indexOf(a[0]);
+				const pb = PRESET_TAGS.indexOf(b[0]);
+				if (pa !== -1 && pb !== -1) return pa - pb;
+				if (pa !== -1) return -1;
+				if (pb !== -1) return 1;
+				return b[1] - a[1];
+			}).map(([tag]) => tag);
+			const visibleList = tagFilter === null ? list : list.filter((workflow) => (workflow.tags ?? []).includes(tagFilter));
+			const apiFold = (0, react.createElement)("details", {
+				className: "dsc-fold",
+				open: true
+			}, (0, react.createElement)("summary", null, `${t("wfLibrarySection")} (${visibleList.length})`), (0, react.createElement)("div", { className: "dsc-fold-body" }, visibleTags.length > 0 || tagFilter !== null ? (0, react.createElement)("div", { className: "dsc-tag-filter" }, (0, react.createElement)("button", {
+				className: `dsc-tag-chip${tagFilter === null ? " dsc-tag-chip--active" : ""}`,
+				onClick: () => setTagFilter(null)
+			}, `${t("wfTagAll")} (${list.length})`), visibleTags.map((tag) => (0, react.createElement)("button", {
+				key: tag,
+				className: `dsc-tag-chip${tagFilter === tag ? " dsc-tag-chip--active" : ""}`,
+				onClick: () => setTagFilter(tagFilter === tag ? null : tag)
+			}, `${tag} (${tagCounts.get(tag) ?? 0})`))) : null, visibleList.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("wfEmpty")) : (0, react.createElement)("div", { className: "dsc-list" }, visibleList.map((workflow) => (0, react.createElement)("div", {
+				key: workflow.id,
+				className: "dsc-wf",
+				title: t("wfNameCopyHint"),
+				onClick: () => {
+					copyText(workflow.name).then((ok) => {
+						if (ok) setNotice(`${t("wfNameCopied")}：${workflow.name}`);
+					});
+				}
+			}, (0, react.createElement)("div", { className: "dsc-wf-top" }, (0, react.createElement)("div", {
+				className: "dsc-wf-name",
+				title: workflow.name
+			}, workflow.name), (workflow.tags ?? []).length > 0 ? (0, react.createElement)("div", { className: "dsc-wf-tags" }, (workflow.tags ?? []).map((tag) => (0, react.createElement)("span", {
+				key: tag,
+				className: "dsc-tag-chip dsc-tag-chip--mini"
+			}, tag))) : null), workflow.description !== "" ? (0, react.createElement)("div", { className: "dsc-wf-desc" }, workflow.description) : null, (0, react.createElement)("div", { className: "dsc-wf-updated" }, `${t("wfUpdated")} ${formatTs(workflow.updatedAt)}`), (0, react.createElement)("div", { className: "dsc-wf-actions" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: (event) => {
+					event.stopPropagation();
+					run(workflow.id);
+				}
+			}, t("wfRun")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: (event) => {
+					event.stopPropagation();
+					setEditing({
+						...workflow,
+						workflow: JSON.stringify(workflow.workflow, null, 2),
+						parameters: workflow.parameters ?? [],
+						tags: workflow.tags ?? []
+					});
+					setError(null);
+				}
+			}, t("wfEdit")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: (event) => {
+					event.stopPropagation();
+					remove(workflow.id);
+				}
+			}, t("wfDelete"))))))));
+			return (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "dsc-toolbar" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => {
+					setEditing({
+						workflow: {},
+						parameters: [],
+						tags: []
+					});
+					setError(null);
+				}
+			}, t("wfAdd")), (0, react.createElement)("label", { className: "dsc-btn" }, t("wfImportFile"), (0, react.createElement)("input", {
+				type: "file",
+				accept: ".json,application/json",
+				style: { display: "none" },
+				onChange: (event) => {
+					const file = event.target.files?.[0];
+					if (file !== void 0) importFile(file);
+					event.target.value = "";
+				}
+			})), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: busy,
+				onClick: () => void load()
+			}, t("wfRefresh"))), notice !== null ? (0, react.createElement)("div", { className: "dsc-ok" }, notice) : null, comfyuiFold, apiFold, (0, react.createElement)(LoadArea, {
+				t,
+				onNotice: setNotice
+			}));
+		}
+		/** Extract-mode chooser: shows the canvas analysis and lets the user pick how
+		* to extract runnable API workflows from a ComfyUI-side graph. */
+		function ExtractDialog(props) {
+			const { t, state, onUpdate, onRun, onClose } = props;
+			(0, react.useEffect)(() => {
+				if (state.analysis === null && state.error === null) {
+					let cancelled = false;
+					getJson(`/comfyui/comfy-workflows/analyze?file=${encodeURIComponent(state.file)}`).then((data) => {
+						if (cancelled) return;
+						if (data.ok !== true || data.analysis === void 0) onUpdate({
+							...state,
+							error: data.error ?? "failed to analyze"
+						});
+						else onUpdate({
+							...state,
+							analysis: data.analysis,
+							mode: data.analysis.mode === "single" ? "all" : "split"
+						});
+					}).catch((cause) => {
+						if (!cancelled) onUpdate({
+							...state,
+							error: cause instanceof Error ? cause.message : String(cause)
+						});
+					});
+					return () => {
+						cancelled = true;
+					};
+				}
+			});
+			const modes = [
+				{
+					mode: "all",
+					label: t("wfExtractModeAll"),
+					hint: t("wfExtractModeAllHint")
+				},
+				{
+					mode: "split",
+					label: t("wfExtractModeSplit"),
+					hint: t("wfExtractModeSplitHint")
+				},
+				{
+					mode: "main",
+					label: t("wfExtractModeMain"),
+					hint: t("wfExtractModeMainHint")
+				}
+			];
+			const analysis = state.analysis;
+			return (0, react.createElement)("div", { className: "dsc-dialog" }, (0, react.createElement)("div", { className: "dsc-dialog-head" }, (0, react.createElement)("span", { className: "dsc-wf-name" }, `${t("wfExtractTitle")}: ${state.file}`), (0, react.createElement)("button", {
+				className: "dsc-panel-close",
+				"aria-label": t("close"),
+				onClick: onClose
+			}, "✕")), analysis === null ? (0, react.createElement)("div", { className: "dsc-meta" }, "…") : (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "dsc-hint" }, `${t("wfComponents")}: ${analysis.components.length} · ${t("wfBypassed")}: ${analysis.bypassedCount} · ${t("wfIsolated")}: ${analysis.isolated.length}`), analysis.components.length > 0 ? (0, react.createElement)("ul", { className: "dsc-node-list" }, analysis.components.map((component) => (0, react.createElement)("li", { key: String(component.index) }, `${t("wfComponentLabel")} ${component.index}（${component.size} ${t("wfNodes")}）${component.groups.length > 0 ? `[${component.groups.slice(0, 3).join("+")}]` : ""}`))) : (0, react.createElement)("div", { className: "dsc-meta" }, t("wfExtractEmpty")), (0, react.createElement)("div", { className: "dsc-extract-modes" }, modes.map((entry) => (0, react.createElement)("label", {
+				key: entry.mode,
+				className: "dsc-mode"
+			}, (0, react.createElement)("input", {
+				type: "radio",
+				name: "extract-mode",
+				checked: state.mode === entry.mode,
+				onChange: () => onUpdate({
+					...state,
+					mode: entry.mode
+				})
+			}), (0, react.createElement)("span", { className: "dsc-mode-label" }, entry.label), (0, react.createElement)("span", { className: "dsc-hint" }, entry.hint)))), state.error !== null ? (0, react.createElement)(ErrorNote, {
+				t,
+				message: state.error
+			}) : null, (0, react.createElement)("div", { className: "dsc-row" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				disabled: analysis.components.length === 0,
+				onClick: () => void onRun(state)
+			}, t("wfExtractRun")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: onClose
+			}, t("wfCancel")))));
+		}
+		/** 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 !== "") : [];
+			const json = JSON.stringify(props.graph, null, 2);
+			return (0, react.createElement)("div", { className: "dsc-view" }, (0, react.createElement)("div", { className: "dsc-view-head" }, (0, react.createElement)("span", { className: "dsc-wf-name" }, props.file), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: props.onBack
+			}, props.t("wfViewBack"))), (0, react.createElement)("div", { className: "dsc-view-label" }, `${props.t("wfViewNodes")} (${nodes.length})`), nodes.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, props.t("wfViewEmpty")) : (0, react.createElement)("ul", { className: "dsc-node-list" }, nodes.map((node) => (0, react.createElement)("li", { key: String(node.id) }, `${String(node.id)} · ${String(node.type)}`))), (0, react.createElement)("div", { className: "dsc-view-label" }, props.t("wfViewJson")), (0, react.createElement)("textarea", {
+				className: "dsc-textarea dsc-textarea--json dsc-textarea--view",
+				readOnly: true,
+				value: json
+			}));
+		}
+		/** Tab 2: asset preview — thumbnails of everything the plugin generated. */
+		function AssetsTab({ t, onPreview }) {
+			const [assets, setAssets] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [filter, setFilter] = (0, react.useState)(() => panelStore.getAssetFilter());
+			const load = async () => {
+				try {
+					const data = await getJson("/comfyui/assets");
+					setAssets(data.assets);
+					setError(null);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}
+			};
+			(0, react.useEffect)(() => {
+				let cancelled = false;
+				getJson("/comfyui/assets").then((data) => {
+					if (!cancelled) setAssets(data.assets);
+				}).catch((cause) => {
+					if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause));
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, []);
+			if (error !== null) return (0, react.createElement)("div", null, (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}));
+			if (assets === null) return (0, react.createElement)("div", { className: "dsc-meta" }, "…");
+			const names = [...new Set(assets.map((asset) => asset.workflowName ?? ""))];
+			const visible = filter === "" ? assets : assets.filter((asset) => (asset.workflowName ?? "") === filter);
+			const previewItems = visible.flatMap((asset) => asset.media.map((item) => ({
+				url: item.url,
+				kind: item.kind
+			})));
+			const openAsset = (asset) => {
+				const first = asset.media[0];
+				const index = first !== void 0 ? previewItems.findIndex((item) => item.url === first.url) : 0;
+				onPreview(previewItems.map((item) => item.url), previewItems.map((item) => item.kind), index < 0 ? 0 : index);
+			};
+			return (0, react.createElement)("div", null, (0, react.createElement)("div", { className: "dsc-toolbar" }, (0, react.createElement)("select", {
+				className: "dsc-input dsc-input--inline",
+				value: filter,
+				onChange: (event) => setFilter(event.target.value)
+			}, (0, react.createElement)("option", { value: "" }, t("assetAll")), names.map((name) => (0, react.createElement)("option", {
+				key: name,
+				value: name
+			}, 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, {
+				key: asset.promptId,
+				asset,
+				t,
+				onClick: () => openAsset(asset)
+			}))));
+		}
+		function AssetThumb(props) {
+			const first = props.asset.media[0];
+			const [broken, setBroken] = (0, react.useState)(false);
+			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 ?? "—"));
+			return (0, react.createElement)("div", {
+				className: "dsc-asset",
+				onClick: props.onClick
+			}, first.kind === "video" ? (0, react.createElement)("video", {
+				src: first.url,
+				controls: true,
+				preload: "metadata",
+				onClick: (event) => event.stopPropagation()
+			}) : (0, react.createElement)("img", {
+				src: first.url,
+				alt: first.filename,
+				loading: "lazy",
+				onError: () => setBroken(true)
+			}), (0, react.createElement)("div", { className: "dsc-asset-meta" }, props.asset.workflowName ?? "—"));
+		}
+		/**
+		* Tab 3: the task center — active tasks (pending / generating) shown as
+		* cards with id, status and progress, plus history filtered by the
+		* completed / failed / cancelled chips. Polled every 3 seconds.
+		*/
+		function QueueTab({ t, onPreview }) {
+			const [filter, setFilter] = (0, react.useState)("all");
+			const [active, setActive] = (0, react.useState)(null);
+			const [history, setHistory] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const [busy, setBusy] = (0, react.useState)(false);
+			const load = async (current) => {
+				try {
+					const historyStatus = current === "all" ? "completed,failed,cancelled" : current;
+					const [activeData, historyData] = await Promise.all([getJson("/comfyui/jobs?status=pending,in_progress&limit=100"), getJson(`/comfyui/jobs?status=${historyStatus}&limit=100`)]);
+					if (activeData.ok !== true) throw new Error(activeData.error ?? t("queueError"));
+					if (historyData.ok !== true) throw new Error(historyData.error ?? t("queueError"));
+					setActive([...activeData.jobs ?? []].sort((a, b) => (a.createTime ?? 0) - (b.createTime ?? 0)));
+					setHistory(historyData.jobs);
+					setError(null);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				}
+			};
+			(0, react.useEffect)(() => {
+				load(filter);
+				const timer = setInterval(() => void load(filter), 3e3);
+				return () => clearInterval(timer);
+			}, [filter]);
+			const act = async (payload) => {
+				setBusy(true);
+				try {
+					const data = await postJson("/comfyui/jobs/actions", payload);
+					if (data.ok !== true) throw new Error(data.error ?? "action failed");
+					await load(filter);
+				} catch (cause) {
+					setError(cause instanceof Error ? cause.message : String(cause));
+				} finally {
+					setBusy(false);
+				}
+			};
+			if (error !== null) return (0, react.createElement)("div", null, (0, react.createElement)(ErrorNote, {
+				t,
+				message: error
+			}));
+			if (active === null || history === null) return (0, react.createElement)("div", { className: "dsc-meta" }, "…");
+			const historyPreviewUrls = history.map(previewUrlOf);
+			const previewImages = historyPreviewUrls.filter((url) => url !== null);
+			const previewPrefix = [];
+			{
+				let acc = 0;
+				for (const url of historyPreviewUrls) {
+					previewPrefix.push(acc);
+					if (url !== null) acc += 1;
+				}
+			}
+			return (0, react.createElement)("div", { className: "dsc-list" }, (0, react.createElement)("div", { className: "dsc-queue-actions" }, (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => void act({ action: "clear" }),
+				disabled: busy
+			}, t("jobClearQueue")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => void act({ action: "clearHistory" }),
+				disabled: busy
+			}, t("jobClearHistory")), (0, react.createElement)("button", {
+				className: "dsc-btn",
+				onClick: () => void act({
+					action: "free",
+					unloadModels: true,
+					freeMemory: true
+				}),
+				disabled: busy
+			}, t("jobFree"))), (0, react.createElement)("div", { className: "dsc-section" }, (0, react.createElement)("div", { className: "dsc-section-head" }, (0, react.createElement)("span", { className: "dsc-section-title" }, `${t("jobActive")} (${active.length})`)), active.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("queueEmpty")) : (0, react.createElement)("div", { className: "dsc-list" }, active.map((job) => (0, react.createElement)(JobRow, {
+				key: job.id,
+				job,
+				t,
+				busy,
+				act
+			})))), (0, react.createElement)("div", { className: "dsc-section" }, (0, react.createElement)("div", { className: "dsc-section-head" }, (0, react.createElement)("span", { className: "dsc-section-title" }, `${t("jobFilterLabel")} (${history.length})`), (0, react.createElement)("div", { className: "dsc-queue-head" }, JOB_FILTERS.map((item) => (0, react.createElement)("button", {
+				key: item.key,
+				className: `dsc-chip${filter === item.key ? " dsc-chip--active" : ""}`,
+				onClick: () => setFilter(item.key),
+				disabled: busy
+			}, t(item.label))))), history.length === 0 ? (0, react.createElement)("div", { className: "dsc-meta" }, t("queueEmpty")) : (0, react.createElement)("div", { className: "dsc-list" }, history.map((job, index) => (0, react.createElement)(JobRow, {
+				key: job.id,
+				job,
+				t,
+				busy,
+				act,
+				onPreview: historyPreviewUrls[index] !== null && previewImages.length > 0 ? () => onPreview(previewImages, previewImages.map(() => "image"), previewPrefix[index]) : void 0
+			})))));
+		}
+		function jobBadge(status) {
+			switch (status) {
+				case "in_progress": return "dsc-badge--info";
+				case "completed": return "dsc-badge--ok";
+				case "failed": return "dsc-badge--danger";
+				default: return "";
+			}
+		}
+		const STATUS_LABELS = {
+			pending: "jobFilterPending",
+			in_progress: "jobFilterInProgress",
+			completed: "jobFilterCompleted",
+			failed: "jobFilterFailed",
+			cancelled: "jobFilterCancelled"
+		};
+		/**
+		* One task card: a compact row with a status badge, task name + short id,
+		* duration (and error/progress for in-flight tasks), and a ⋯ menu with
+		* per-state actions. Hover highlights the row. Rendered as a component
+		* instance (h(JobRow, ...)) so its hooks stay per-card.
+		*/
+		function JobRow(props) {
+			const { job, t, busy, act, onPreview } = props;
+			const [menuOpen, setMenuOpen] = (0, react.useState)(false);
+			const menuRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				if (!menuOpen) return;
+				const onDoc = (event) => {
+					if (menuRef.current !== null && !menuRef.current.contains(event.target)) setMenuOpen(false);
+				};
+				document.addEventListener("mousedown", onDoc);
+				return () => document.removeEventListener("mousedown", onDoc);
+			}, [menuOpen]);
+			const running = job.status === "in_progress";
+			const terminal = job.status === "completed" || job.status === "failed" || job.status === "cancelled";
+			const pct = job.progress !== null && job.progress !== void 0 && job.progress.max > 0 ? Math.min(100, Math.round(job.progress.value / job.progress.max * 100)) : null;
+			const duration = job.executionStartTime !== null && job.executionEndTime !== null ? Math.max(0, Math.round(((job.executionEndTime ?? 0) - (job.executionStartTime ?? 0)) / 1e3)) : null;
+			const errMsg = job.executionError?.exception_message ?? job.executionError?.message;
+			const name = job.workflowName ?? job.workflowId;
+			const preview = previewUrlOf(job);
+			const close = () => setMenuOpen(false);
+			const statusClass = job.status === "failed" ? " dsc-job-item--failed" : job.status === "cancelled" ? " dsc-job-item--cancelled" : "";
+			return (0, react.createElement)("div", { className: `dsc-job-item${statusClass}` }, preview !== null ? (0, react.createElement)("img", {
+				src: preview,
+				alt: "",
+				loading: "lazy",
+				className: onPreview !== void 0 ? "dsc-job-preview dsc-job-preview--clickable" : "dsc-job-preview",
+				onClick: onPreview
+			}) : null, (0, react.createElement)("div", { className: "dsc-job-main" }, (0, react.createElement)("div", {
+				className: "dsc-job-name",
+				title: name ?? void 0
+			}, name !== null && name !== void 0 && name !== "" ? name : "—"), (0, react.createElement)("div", { className: "dsc-job-mid" }, running && job.progress !== null && job.progress !== void 0 ? (0, react.createElement)("div", { className: "dsc-progress" }, (0, react.createElement)("div", { className: "dsc-progress-track" }, (0, react.createElement)("div", {
+				className: "dsc-progress-fill",
+				style: { width: `${pct ?? 0}%` }
+			})), (0, react.createElement)("span", { className: "dsc-job-progress" }, `${job.progress.value}/${job.progress.max} · ${pct ?? 0}%`)) : null, (0, react.createElement)("div", { className: "dsc-job-mid-right" }, (0, react.createElement)("span", { className: `dsc-badge dsc-badge--status ${jobBadge(job.status)}` }, t(STATUS_LABELS[job.status] ?? job.status)), (0, react.createElement)("div", {
+				ref: menuRef,
+				className: "dsc-job-menu"
+			}, (0, react.createElement)("button", {
+				className: "dsc-job-menu-btn",
+				"aria-label": t("jobMore"),
+				onClick: () => setMenuOpen(!menuOpen)
+			}, "⋯"), menuOpen ? (0, react.createElement)("div", { className: "dsc-job-menu-pop" }, job.status === "pending" ? (0, react.createElement)("button", { onClick: () => {
+				act({
+					action: "delete",
+					ids: [job.id]
+				});
+				close();
+			} }, t("jobDelete")) : null, running ? (0, react.createElement)("button", { onClick: () => {
+				act({
+					action: "interrupt",
+					promptId: job.id
+				});
+				close();
+			} }, t("jobInterrupt")) : null, terminal ? (0, react.createElement)("button", { onClick: () => {
+				act({
+					action: "deleteHistory",
+					ids: [job.id]
+				});
+				close();
+			} }, t("jobDelete")) : null, terminal ? (0, react.createElement)("button", { onClick: () => {
+				act({
+					action: "rerun",
+					jobId: job.id
+				});
+				close();
+			} }, t("jobRerun")) : null, terminal ? (0, react.createElement)("button", { onClick: () => {
+				panelStore.setAssetFilter(name ?? "");
+				panelStore.setTab("assets");
+				close();
+			} }, t("jobViewAssets")) : null) : null))), (0, react.createElement)("div", { className: "dsc-job-bottom" }, (0, react.createElement)("span", { className: "dsc-job-duration" }, `${t("jobDuration")} ${duration ?? 0}s`), errMsg !== void 0 && errMsg !== null ? (0, react.createElement)("span", {
+				className: "dsc-job-error",
+				title: errMsg
+			}, errMsg) : null)));
+		}
+		//#endregion
+		//#region src/client/styles.ts
+		/**
+		* dsh-comfyui stylesheet, injected once with plugin ownership. Colors come
+		* from the host theme tokens (--dsw-alias-*), so the UI follows light/dark.
+		*/
+		const CSS = `
+/* --- shared primitives --- */
+.dsc-card {
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin: 4px 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+}
+.dsc-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
+.dsc-badge {
+  border-radius: 999px; padding: 1px 8px; font-size: 11px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+}
+.dsc-badge--ok { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 16%, transparent); }
+.dsc-badge--err { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 16%, transparent); }
+.dsc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 6px; }
+.dsc-media { border-radius: 6px; overflow: hidden; background: var(--dsw-alias-bg-layer-1); }
+.dsc-media img, .dsc-media video, .dsc-media audio { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #000; }
+.dsc-media audio { height: 44px; }
+.dsc-media-img--clickable { cursor: zoom-in; }
+.dsc-media-other { display: block; padding: 8px 6px; font-size: 12px; color: var(--dsw-alias-label-secondary); word-break: break-all; }
+.dsc-media-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 6px; }
+.dsc-media-size { font-size: 11px; color: var(--dsw-alias-label-secondary); white-space: nowrap; }
+.dsc-media-meta a { display: inline; padding: 0; font-size: 11px; color: var(--dsw-alias-label-secondary); text-decoration: none; }
+.dsc-media-meta a:hover { color: var(--dsw-alias-label-primary); }
+.dsc-meta { color: var(--dsw-alias-label-secondary); font-size: 12px; }
+.dsc-err { color: var(--dsw-alias-state-error-primary); font-size: 12px; margin: 4px 0; }
+.dsc-ok { color: var(--dsw-alias-state-success-primary); font-size: 12px; margin: 4px 0; }
+.dsc-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
+.dsc-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--dsw-alias-label-primary); }
+.dsc-input, .dsc-textarea {
+  width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 6px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  background: transparent; color: inherit; font-size: 13px;
+}
+select.dsc-input { background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); color-scheme: inherit; }
+select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); }
+.dsc-textarea { min-height: 90px; resize: vertical; font-family: ui-monospace, monospace; }
+.dsc-hint { font-size: 12px; color: var(--dsw-alias-label-secondary); margin-top: 2px; }
+.dsc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.dsc-btn {
+  border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px;
+  background: transparent; color: inherit; padding: 5px 12px; font-size: 13px; cursor: pointer;
+}
+.dsc-btn:disabled { opacity: 0.5; cursor: default; }
+.dsc-btn--link { display: inline-block; text-decoration: none; }
+/* --- header action trigger --- */
+.dsc-trigger {
+  display: inline-flex; align-items: center; gap: 5px;
+  border: 1px solid transparent; background: transparent; color: var(--dsw-alias-label-secondary);
+  cursor: pointer; font-size: 13px; padding: 3px 8px; border-radius: 6px;
+  white-space: nowrap;
+}
+.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; }
+/* --- 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. --- */
+.dsc-panel {
+  position: fixed;
+  top: var(--dsc-panel-top, 9%);
+  right: var(--dsc-panel-right, 1.5%);
+  bottom: var(--dsc-panel-bottom, 2%);
+  width: var(--dsc-panel-width, 400px);
+  max-width: min(92vw, 560px); min-width: 300px;
+  z-index: 900;
+  display: flex; flex-direction: column;
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 14px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  user-select: none;
+}
+.dsc-panel--dragging { cursor: grabbing; }
+.dsc-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--dsw-alias-border-l1); cursor: grab; touch-action: none; }
+.dsc-panel--dragging .dsc-panel-head { cursor: grabbing; }
+.dsc-panel-resize {
+  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
+  cursor: nwse-resize; touch-action: none;
+  background: linear-gradient(135deg, transparent 50%, var(--dsw-alias-label-tertiary) 50%);
+  border-bottom-right-radius: 14px;
+  opacity: 0.55;
+}
+.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-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); }
+.dsc-tab {
+  flex: 1; padding: 8px 4px; background: transparent; border: none;
+  border-bottom: 2px solid transparent; color: var(--dsw-alias-label-secondary);
+  cursor: pointer; font-size: 13px;
+}
+.dsc-tab--active { color: var(--dsw-alias-label-primary); border-bottom-color: var(--dsw-alias-brand-primary); }
+.dsc-panel-body { flex: 1; overflow-y: auto; padding: 10px 12px; }
+.dsc-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
+.dsc-list { display: flex; flex-direction: column; gap: 8px; }
+/* --- workflows tab --- */
+.dsc-wf { border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 8px 10px; background: var(--dsw-alias-bg-layer-1); transition: background 0.12s, border-color 0.12s; cursor: pointer; }
+.dsc-wf:hover { background: var(--dsw-alias-bg-layer-2); border-color: var(--dsw-alias-border-l2); }
+.dsc-wf-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.dsc-wf--comfyui { display: flex; align-items: center; gap: 10px; }
+.dsc-wf-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.dsc-wf-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsc-wf-desc { color: var(--dsw-alias-label-secondary); font-size: 12px; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dsc-wf-updated { color: var(--dsw-alias-label-tertiary); font-size: 11px; margin-top: 4px; }
+.dsc-wf-actions { display: flex; gap: 6px; margin-top: 6px; }
+.dsc-section { margin-top: 14px; }
+.dsc-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
+.dsc-section-title { font-weight: 600; font-size: 13px; }
+.dsc-fold { border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; margin-top: 10px; overflow: hidden; background: var(--dsw-alias-bg-layer-1); }
+.dsc-fold summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: pointer; user-select: none; font-weight: 600; font-size: 13px; }
+.dsc-fold summary::-webkit-details-marker { display: none; }
+.dsc-fold summary::before { content: '▸'; font-size: 11px; color: var(--dsw-alias-label-secondary); transition: transform 0.15s; }
+.dsc-fold[open] summary::before { transform: rotate(90deg); }
+.dsc-fold summary:hover { background: var(--dsw-alias-bg-layer-2); }
+.dsc-fold-body { padding: 0 10px 10px; }
+.dsc-hint { color: var(--dsw-alias-label-secondary); font-size: 11px; margin: 2px 0 6px; white-space: pre-line; }
+.dsc-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; }
+.dsc-badge--ok { color: var(--dsw-alias-state-success-primary); border: 1px solid var(--dsw-alias-state-success-primary); }
+.dsc-badge--warn { color: var(--dsw-alias-state-warn-primary); border: 1px solid var(--dsw-alias-state-warn-primary); }
+.dsc-view-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
+.dsc-view-label { font-weight: 600; font-size: 12px; margin: 8px 0 4px; }
+.dsc-node-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--dsw-alias-label-secondary); max-height: 180px; overflow-y: auto; }
+.dsc-node-list li { margin: 2px 0; }
+.dsc-textarea--view { min-height: 220px; resize: vertical; }
+.dsc-derived { margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
+.dsc-derived-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
+.dsc-derived-name { color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsc-dialog { border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 10px; }
+.dsc-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+.dsc-extract-modes { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
+.dsc-mode { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
+.dsc-mode input { accent-color: var(--dsw-alias-brand-primary); }
+.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 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;
+  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
+  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; }
+.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; }
+.dsc-input--inline { width: auto; }
+/* --- queue tab --- */
+.dsc-queue-head { display: flex; gap: 8px; flex-wrap: wrap; }
+.dsc-queue-item { display: flex; gap: 8px; align-items: center; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 6px 8px; font-size: 12px; flex-wrap: wrap; }
+.dsc-queue-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
+.dsc-queue-meta { color: var(--dsw-alias-label-secondary); font-size: 11px; }
+.dsc-queue-tracked { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
+.dsc-progress { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 90px; }
+.dsc-progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--dsw-alias-bg-layer-2); overflow: hidden; }
+.dsc-progress-fill { height: 100%; background: #3b82f6; transition: width 0.4s; }
+.dsc-progress:hover .dsc-progress-fill { background: #2563eb; }
+.dsc-param-upload-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
+.dsc-param-upload-wrap select { flex: 1; min-width: 0; }
+.dsc-dropzone { flex: 1; min-width: 120px; border: 1px dashed var(--dsw-alias-border-l2); border-radius: 6px; padding: 5px 10px; font-size: 11px; color: var(--dsw-alias-label-secondary); text-align: center; cursor: pointer; transition: border-color 0.12s, color 0.12s; }
+.dsc-dropzone:hover, .dsc-dropzone--over { border-color: #3b82f6; color: #3b82f6; }
+.dsc-upload-select { position: relative; flex: 1; min-width: 0; }
+.dsc-upload-select-btn { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); cursor: pointer; font-size: 12px; text-align: left; }
+.dsc-upload-select-btn:hover { border-color: var(--dsw-alias-border-l2); }
+.dsc-upload-select-thumb { width: 36px; height: 24px; object-fit: cover; border-radius: 3px; background: var(--dsw-alias-bg-layer-2); flex: none; }
+.dsc-upload-select-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.dsc-upload-select-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 220px; overflow-y: auto; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); padding: 4px; }
+.dsc-upload-select-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--dsw-alias-label-primary); }
+.dsc-upload-select-item:hover { background: var(--dsw-alias-bg-layer-3); }
+.dsc-upload-dock { margin-top: 14px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+.dsc-upload-dock-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.dsc-upload-dock-title { font-weight: 600; font-size: 12px; color: var(--dsw-alias-label-primary); }
+.dsc-upload-dock-zone { min-height: 44px; display: flex; align-items: center; justify-content: center; }
+.dsc-upload-list { display: flex; flex-direction: column; gap: 4px; }
+.dsc-upload-item { display: flex; align-items: center; gap: 8px; }
+.dsc-upload-thumb { width: 40px; height: 28px; object-fit: cover; border-radius: 4px; background: var(--dsw-alias-bg-layer-2); flex: none; }
+.dsc-upload-thumb--media { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
+.dsc-upload-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--dsw-alias-label-primary); }
+.dsc-upload-select-item--active { background: var(--dsw-alias-bg-layer-3); }
+/* --- load area: big preview + picker dialog (ComfyUI LoadImage-like) --- */
+.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); }
+/* 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; }
+.dsc-picker-toast { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 5; background: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-layer-1); padding: 6px 14px; border-radius: 8px; font-size: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); pointer-events: none; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsc-picker-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--dsw-alias-border-l1); flex-wrap: wrap; }
+.dsc-picker-tab { border: 1px solid transparent; border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; background: transparent; color: var(--dsw-alias-label-primary); }
+.dsc-picker-tab--active { background: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-layer-1); }
+.dsc-picker-tabs { display: flex; gap: 4px; }
+.dsc-picker-type { flex: none; border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); }
+.dsc-picker-upload { margin: 0 auto; flex: none; max-width: 200px; min-height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 12px; white-space: nowrap; }
+.dsc-picker-empty { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; color: var(--dsw-alias-label-tertiary); font-size: 13px; }
+.dsc-picker-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; gap: 10px; align-items: flex-start; }
+.dsc-picker-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
+.dsc-picker-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 6px; background: var(--dsw-alias-bg-layer-2); cursor: pointer; text-align: left; }
+.dsc-picker-card:hover { border-color: #3b82f6; }
+.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; }
+/* --- 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); }
+.dsc-tag-chip--active { background: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-layer-1); }
+.dsc-tag-chip--mini { font-size: 11px; padding: 1px 8px; cursor: default; border: 1px solid var(--dsw-alias-brand-primary); color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
+.dsc-wf-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
+.dsc-wf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
+.dsc-wf-top .dsc-wf-tags { margin-top: 0; flex: none; justify-content: flex-end; }
+.dsc-tag-editor { display: flex; flex-direction: column; gap: 6px; }
+.dsc-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
+.dsc-tag-input { max-width: 260px; }
+.dsc-chip { border: 1px solid var(--dsw-alias-border-l1); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; background: transparent; color: var(--dsw-alias-label-primary); }
+.dsc-chip--active { background: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-layer-1); }
+.dsc-badge--info { background: var(--dsw-alias-brand-primary); color: var(--dsw-alias-bg-layer-1); }
+.dsc-badge--danger { background: var(--dsw-alias-state-error-primary); color: #fff; }
+.dsc-queue-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.dsc-btn { border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; background: transparent; color: var(--dsw-alias-label-primary); }
+.dsc-btn--sm { padding: 1px 6px; font-size: 11px; }
+.dsc-btn:disabled { opacity: 0.5; cursor: default; }
+.dsc-job-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 7px 10px; background: var(--dsw-alias-bg-layer-1); transition: background 0.12s, border-color 0.12s; }
+.dsc-job-item:hover { background: var(--dsw-alias-bg-layer-2); border-color: var(--dsw-alias-border-l2); }
+.dsc-job-item--failed { border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 55%, transparent); }
+.dsc-job-item--cancelled { border-color: var(--dsw-alias-border-l2); opacity: 0.85; }
+.dsc-badge--status { flex: none; font-weight: 600; }
+.dsc-job-preview { width: 56px; height: 56px; flex: none; border-radius: 6px; object-fit: cover; border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-2); }
+.dsc-job-preview--clickable { cursor: zoom-in; }
+/* --- lightbox: floating local panel, no full-screen dim --- */
+.dsc-lightbox { position: fixed; inset: 0; z-index: 9999; background: transparent; display: flex; align-items: center; justify-content: center; }
+.dsc-lightbox-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 90vw; padding: 12px 12px 10px; background: rgba(12, 14, 18, 0.88); border: 1px solid var(--dsw-alias-border-l2); border-radius: 14px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45); }
+.dsc-lightbox-img { width: 100%; height: 80vh; object-fit: contain; border-radius: 8px; }
+.dsc-lightbox-media { max-width: 100%; max-height: 80vh; border-radius: 8px; }
+.dsc-lightbox-meta { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, 0.75); font-size: 12px; }
+.dsc-lightbox-download { border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 5px 16px; color: #fff; font-size: 12px; text-decoration: none; display: inline-block; }
+.dsc-lightbox-download:hover { background: rgba(255, 255, 255, 0.12); }
+.dsc-lightbox-close { position: absolute; top: clamp(4px, 0.6vw, 14px); right: clamp(4px, 0.6vw, 14px); z-index: 3; width: clamp(28px, 2.2vw, 48px); height: clamp(28px, 2.2vw, 48px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: #fff; font-size: clamp(13px, 1.1vw, 22px); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.dsc-lightbox-close:hover { background: rgba(255, 255, 255, 0.12); }
+.dsc-lightbox-nav { position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(64px, 7vw, 128px); display: flex; align-items: center; background: transparent; border: none; color: #fff; font-size: clamp(38px, 3.4vw, 84px); line-height: 1; cursor: pointer; opacity: 0.6; padding: 0; }
+.dsc-lightbox-nav:hover { opacity: 1; color: var(--dsw-alias-brand-primary); background: rgba(255, 255, 255, 0.06); }
+.dsc-lightbox-nav--prev { left: 0; justify-content: flex-start; padding-left: clamp(14px, 1.8vw, 36px); }
+.dsc-lightbox-nav--next { right: 0; justify-content: flex-end; padding-right: clamp(14px, 1.8vw, 36px); }
+.dsc-job-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.dsc-job-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }
+.dsc-job-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+.dsc-job-mid-right { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
+.dsc-job-bottom { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dsw-alias-label-secondary); min-width: 0; }
+.dsc-job-duration { flex: none; }
+.dsc-job-progress { color: #3b82f6; font-variant-numeric: tabular-nums; }
+.dsc-job-menu { position: relative; flex: none; }
+.dsc-job-menu-btn { border: none; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 15px; line-height: 1; padding: 3px 7px; border-radius: 6px; cursor: pointer; }
+.dsc-job-menu-btn:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }
+.dsc-job-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 950; min-width: 128px; padding: 4px; display: flex; flex-direction: column; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
+.dsc-job-menu-pop button { border: none; background: transparent; color: var(--dsw-alias-label-primary); text-align: left; font-size: 13px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
+.dsc-job-menu-pop button:hover { background: var(--dsw-alias-bg-layer-3); }
+.dsc-job-error { color: var(--dsw-alias-state-error-primary); font-size: 11px; margin-left: auto; flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* --- parameter editor --- */
+.dsc-params { display: flex; flex-direction: column; gap: 8px; }
+.dsc-param-row { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 6px 8px; }
+.dsc-param-fields { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.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-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. */
+		function injectStyles() {
+			if (typeof document === "undefined") return;
+			if (document.getElementById("dsh-comfyui-styles") !== null) return;
+			const style = document.createElement("style");
+			style.id = "dsh-comfyui-styles";
+			style.setAttribute("data-plugin", "dsh-comfyui");
+			style.textContent = CSS;
+			document.head.append(style);
+		}
+		//#endregion
+		//#region src/client/index.ts
+		/**
+		* dsh-comfyui client half: registers the comfyui_run tool card and the
+		* ComfyUI settings page. Registered through slots.inject so contributions
+		* wait on the real slot declarations and unwind with this plugin's fiber.
+		*/
+		const name = "dsh-comfyui";
+		const inject = ["slots"];
+		function apply(ctx) {
+			const t = makeT(getLang());
+			ctx.effect(() => injectStyles(), "dsh-comfyui: styles");
+			ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
+				name: "tool.call.toolview",
+				key: "comfyui_run"
+			}, (props) => (0, react.createElement)(ComfyUICard, {
+				t,
+				...props ?? {}
+			})));
+			ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
+				name: "tool.call.toolview",
+				key: "comfyui_workflow"
+			}, (props) => (0, react.createElement)(ComfyUICard, {
+				t,
+				...props ?? {}
+			})));
+			ctx.slots.inject("settings.section", () => ctx.slots.register({
+				name: "settings.section",
+				id: "comfyui",
+				order: 30,
+				label: () => t("settingsTitle")
+			}, (props) => (0, react.createElement)(ComfyUISettings, {
+				t,
+				...props ?? {}
+			})));
+			ctx.slots.inject("shell.overlay", () => ctx.slots.register({
+				name: "shell.overlay",
+				id: "comfyui.panel",
+				order: 20,
+				label: () => t("panelTitle")
+			}, (props) => (0, react.createElement)(ComfyUIPanel, {
+				t,
+				...props ?? {}
+			})));
+			ctx.slots.inject("conversation.session.header.actions", () => ctx.slots.register({
+				name: "conversation.session.header.actions",
+				id: "comfyui",
+				order: 100,
+				label: () => t("panelTitle")
+			}, (props) => (0, react.createElement)(ComfyUITrigger, {
+				t,
+				...props ?? {}
+			})));
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		exports.name = name;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map