dsh-comfyui 0.5.3 → 0.5.5

package/client/client.js

@@ -52,6 +52,11 @@ window.__ModuleLoader__.load({
 			cardWorkflow: "工作流",
 			cardMode: "模式",
 			cardListed: "已列出 {runs} 个运行工作流，{graphs} 个图工作流",
+			cardHandWritten: "手写工作流",
+			cardWaiting: "等待 ComfyUI…",
+			cardQueued: "排队中（前面还有 {n} 个）",
+			cardStep: "步数 {value}/{max}",
+			cardInReply: "结果图见对话回复，文件：",
 			panelTitle: "ComfyUI 面板",
 			panelReset: "复位位置与大小",
 			close: "关闭",
@@ -317,6 +322,11 @@ window.__ModuleLoader__.load({
 			cardWorkflow: "Workflow",
 			cardMode: "Mode",
 			cardListed: "Listed {runs} runnable workflows, {graphs} graph workflows",
+			cardHandWritten: "Hand-written workflow",
+			cardWaiting: "Waiting for ComfyUI…",
+			cardQueued: "Queued ({n} ahead)",
+			cardStep: "Step {value}/{max}",
+			cardInReply: "Results are shown in the reply. Files:",
 			panelTitle: "ComfyUI Panel",
 			panelReset: "Reset position & size",
 			close: "Close",
@@ -572,90 +582,15 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#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.
+		* 'comfyui_run' / 'comfyui_workflow'). Running calls show the workflow name
+		* and live progress (polled from /comfyui/queue); settled calls show status
+		* and the output files as links. The media itself is NOT rendered here: the
+		* model pastes it into its reply (see CLAUDE.md contract 18) — dsh 0.2
+		* collapses finished tool rows and PTC mode shows no card at all, so an image
+		* wall here was either invisible or a duplicate of the reply.
 		*/
 		/** Discriminate the settled result node from a running call. */
 		function isResultNode(block) {
@@ -669,73 +604,96 @@ window.__ModuleLoader__.load({
 				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", {
+		/** The output files as links (the images themselves are in the model's reply). */
+		function MediaLinks({ media, t }) {
+			if (media.length === 0) return (0, react.createElement)("div", { className: "dsc-meta" }, t("cardEmpty"));
+			return (0, react.createElement)("div", { className: "dsc-files" }, (0, react.createElement)("span", { className: "dsc-meta" }, t("cardInReply")), media.map((item) => (0, react.createElement)("a", {
+				key: `${item.node}-${item.index}-${item.filename}`,
+				className: "dsc-file",
 				href: item.url,
-				download: item.filename,
 				target: "_blank",
-				rel: "noreferrer"
-			}, t("cardDownload"))));
+				rel: "noreferrer",
+				title: item.filename
+			}, item.filename)));
+		}
+		/**
+		* Poll /comfyui/queue (every 2 s while `active`) for one prompt's queue
+		* position and sampler progress. A running sync call does not know its
+		* prompt id yet, so without one this follows the first prompt of ours that
+		* is running (else pending) — sync calls block, so that is the call's own.
+		*/
+		function useQueueState(promptId, active) {
+			const [state, setState] = (0, react.useState)(null);
+			(0, react.useEffect)(() => {
+				if (!active) return void 0;
+				let stopped = false;
+				let timer;
+				const poll = async () => {
+					try {
+						const data = await (await fetch("/comfyui/queue", { headers: { accept: "application/json" } })).json();
+						if (stopped) return;
+						const running = data.running ?? [];
+						const pending = data.pending ?? [];
+						const match = (entry) => promptId !== void 0 ? entry.promptId === promptId : entry.ours;
+						const run = running.find(match);
+						const waitIndex = pending.findIndex(match);
+						if (run !== void 0) setState({
+							phase: "running",
+							value: run.progress?.value ?? 0,
+							max: run.progress?.max ?? 0
+						});
+						else if (waitIndex >= 0) setState({
+							phase: "pending",
+							ahead: running.length + waitIndex
+						});
+						else setState(null);
+					} catch {}
+					if (!stopped) timer = window.setTimeout(() => {
+						poll();
+					}, 2e3);
+				};
+				poll();
+				return () => {
+					stopped = true;
+					if (timer !== void 0) window.clearTimeout(timer);
+				};
+			}, [promptId, active]);
+			return state;
+		}
+		function ProgressLine({ state, t }) {
+			if (state === null) return (0, react.createElement)("div", { className: "dsc-meta" }, t("cardWaiting"));
+			if (state.phase === "pending") return (0, react.createElement)("div", { className: "dsc-meta" }, t("cardQueued", { n: state.ahead }));
+			const percent = state.max > 0 ? Math.min(100, Math.round(state.value / state.max * 100)) : 0;
+			return (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: `${percent}%` }
+			})), (0, react.createElement)("span", { className: "dsc-meta" }, state.max > 0 ? t("cardStep", {
+				value: state.value,
+				max: state.max
+			}) : t("cardWaiting")));
+		}
+		/** A saved workflow's name by id, for the running card of comfyui_workflow run. */
+		function useWorkflowName(id) {
+			const [name, setName] = (0, react.useState)(void 0);
+			(0, react.useEffect)(() => {
+				if (id === void 0) return void 0;
+				let stopped = false;
+				fetch("/comfyui/workflows", { headers: { accept: "application/json" } }).then(async (response) => await response.json()).then((data) => {
+					const found = data.workflows?.find((workflow) => workflow.id === id);
+					if (!stopped && found !== void 0) setName(found.name);
+				}).catch(() => void 0);
+				return () => {
+					stopped = true;
+				};
+			}, [id]);
+			return name;
 		}
 		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);
+			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), (0, react.createElement)(MediaLinks, {
+				media: result.media,
+				t
+			}));
 		}
 		/** Transient-failure retry budget for the jobs/media poll (backoff steps). */
 		const POLL_MAX_FAILURES = 20;
@@ -745,7 +703,7 @@ window.__ModuleLoader__.load({
 		const POLL_UNKNOWN_GRACE = 100;
 		function BackgroundCard({ label, promptId, t }) {
 			const [result, setResult] = (0, react.useState)(null);
-			const [lightbox, setLightbox] = (0, react.useState)(null);
+			const queue = useQueueState(promptId, result === null);
 			(0, react.useEffect)(() => {
 				let stopped = false;
 				let timer;
@@ -833,23 +791,15 @@ window.__ModuleLoader__.load({
 			}, [promptId, t]);
 			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" && result.recovered === true ? (0, react.createElement)("div", { className: "dsc-meta" }, t("cardRecovered")) : null, 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: 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" && result.recovered === true ? (0, react.createElement)("div", { className: "dsc-meta" }, t("cardRecovered")) : null, result.status === "failed" ? (0, react.createElement)("div", { className: "dsc-meta dsc-job-error" }, result.error ?? t("cardFailed")) : (0, react.createElement)(MediaLinks, {
+					media,
+					t
+				}));
 			}
-			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")));
+			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)(ProgressLine, {
+				state: queue,
+				t
+			}));
 		}
 		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"));
@@ -890,14 +840,30 @@ window.__ModuleLoader__.load({
 				t
 			});
 		}
+		/** A call still running: what is generating, and how far along it is. */
+		function RunningCard({ block, t }) {
+			const args = parseArgs(block.argsRaw);
+			const isRun = block.name === "comfyui_run" || args.action === "run";
+			const workflowId = block.name === "comfyui_workflow" && typeof args.id === "string" ? args.id : void 0;
+			const savedName = useWorkflowName(isRun ? workflowId : void 0);
+			const queue = useQueueState(void 0, isRun && args.mode !== "async");
+			if (!isRun) return (0, react.createElement)("div", { className: "dsc-card" }, (0, react.createElement)("div", { className: "dsc-card-head" }, (0, react.createElement)("span", { className: "dsc-badge" }, block.name), typeof args.action === "string" ? (0, react.createElement)("span", { className: "dsc-meta" }, args.action) : null));
+			const title = block.name === "comfyui_run" ? t("cardHandWritten") : savedName ?? workflowId ?? "";
+			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")), title !== "" ? (0, react.createElement)("span", { className: "dsc-meta" }, `${t("cardWorkflow")} ${title}`) : null, (0, react.createElement)("span", { className: "dsc-meta" }, `${t("cardMode")} ${String(args.mode ?? "sync")}`)), args.mode === "async" ? null : (0, react.createElement)(ProgressLine, {
+				state: queue,
+				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")}`)));
+			return (0, react.createElement)(RunningCard, {
+				block,
+				t
+			});
 		}
 		//#endregion
 		//#region src/client/api.ts
@@ -1354,6 +1320,83 @@ window.__ModuleLoader__.load({
 			}, (0, react.createElement)("span", { className: "dsc-trigger-glyph" }, (0, react.createElement)(ComfyUIIcon)), (0, react.createElement)("span", null, t("panelTitle"))), (0, react.createElement)(ConnectionToast, { t }));
 		}
 		//#endregion
+		//#region src/client/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/panel.tsx
 		/**
 		* The ComfyUI panel (shell.overlay, id 'comfyui.panel'): a floating panel
@@ -4275,7 +4318,10 @@ window.__ModuleLoader__.load({
 			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 ?? "—"), trash);
+			}, (0, react.createElement)("div", null, props.t("assetGone")), (0, react.createElement)("div", { className: "dsc-meta" }, props.asset.workflowName ?? "—"), first !== void 0 ? (0, react.createElement)("div", {
+				className: "dsc-meta dsc-asset-file",
+				title: first.filename
+			}, first.filename) : null, trash);
 			return (0, react.createElement)("div", {
 				className: "dsc-asset",
 				onClick: props.onClick
@@ -4405,7 +4451,10 @@ window.__ModuleLoader__.load({
 				alt: first.filename,
 				loading: "lazy",
 				onError: () => setBroken(true)
-			}), (0, react.createElement)("div", { className: "dsc-asset-meta" }, props.asset.workflowName ?? "—"), trash);
+			}), (0, react.createElement)("div", { className: "dsc-asset-meta" }, props.asset.workflowName ?? "—"), (0, react.createElement)("div", {
+				className: "dsc-asset-meta dsc-asset-file",
+				title: first.filename
+			}, first.filename), trash);
 		}
 		/**
 		* Tab 3: the task center — active tasks (pending / generating) shown as
@@ -4618,16 +4667,13 @@ window.__ModuleLoader__.load({
 }
 .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); }
+/* Inline players inserted after video/audio links in chat replies (inline-media.ts). */
+.dsc-inline-player { display: block; margin: 6px 0; }
+.dsc-inline-player video { display: block; max-width: 100%; max-height: 360px; border-radius: 8px; background: transparent; }
+.dsc-inline-player audio { display: block; width: min(100%, 480px); height: 40px; }
+.dsc-files { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
+.dsc-file { font-size: 12px; color: var(--dsw-alias-label-secondary); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsc-file:hover { color: var(--dsw-alias-label-primary); text-decoration: underline; }
 .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; }
@@ -4836,6 +4882,9 @@ select.dsc-input option { background: var(--dsw-alias-bg-layer-1); color: var(--
   font-size: 11px; color: var(--dsw-alias-label-secondary); text-align: center;
 }
 .dsc-asset-meta { padding: 3px 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* Second meta line: the output filename, under the workflow name. */
+.dsc-asset-file { padding-top: 0; font-size: 10px; opacity: 0.8; }
+.dsc-asset--empty .dsc-asset-file { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
 /* confirmation modal (asset deletion) */
 .dsc-confirm { width: min(360px, 88vw); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32); }
 .dsc-confirm-title { font-weight: 600; font-size: 14px; }
@@ -5032,6 +5081,111 @@ video.dsc-picker-player { max-height: 180px; }
 			document.head.append(style);
 		}
 		//#endregion
+		//#region src/client/inline-media.ts
+		/**
+		* Inline players for generated video/audio in chat replies.
+		*
+		* The model shows results by pasting Markdown into its reply (CLAUDE.md
+		* contract 18). Images embed natively, but dsh's chat Markdown has no video or
+		* audio syntax and renders raw HTML as literal text, so a video/audio result
+		* can only be a link there. This module watches the page and, after every
+		* link to this plugin's own `/comfyui/media` route whose file is a video or
+		* audio file, inserts a native <video>/<audio> player.
+		*
+		* It only ever ADDS sibling nodes next to dsh-rendered links — it never moves
+		* or removes dsh's own nodes — so React's reconciliation of the message keeps
+		* working. Streaming re-renders and dsh updates simply trigger a re-scan: a
+		* player is added only when the link is not already followed by its player,
+		* and players whose link has gone are removed. The plugin's own UI (card file
+		* links, panel) is skipped. Everything is undone when the plugin unloads.
+		*/
+		const VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([
+			"mp4",
+			"webm",
+			"mov",
+			"m4v",
+			"mkv"
+		]);
+		const AUDIO_EXTENSIONS = /* @__PURE__ */ new Set([
+			"mp3",
+			"wav",
+			"flac",
+			"ogg",
+			"oga",
+			"opus",
+			"m4a",
+			"aac"
+		]);
+		const PLAYER_CLASS = "dsc-inline-player";
+		/** The player kind for a /comfyui/media link, or undefined for anything else. */
+		function mediaKind(href) {
+			let url;
+			try {
+				url = new URL(href, window.location.href);
+			} catch {
+				return;
+			}
+			if (!url.pathname.endsWith("/comfyui/media")) return void 0;
+			const file = url.searchParams.get("file") ?? "";
+			const dot = file.lastIndexOf(".");
+			if (dot < 0) return void 0;
+			const ext = file.slice(dot + 1).toLowerCase();
+			if (VIDEO_EXTENSIONS.has(ext)) return "video";
+			if (AUDIO_EXTENSIONS.has(ext)) return "audio";
+		}
+		function isPlayerFor(node, href) {
+			return node !== null && node.classList.contains(PLAYER_CLASS) && node.getAttribute("data-src") === href;
+		}
+		function makePlayer(kind, href) {
+			const wrap = document.createElement("span");
+			wrap.className = `${PLAYER_CLASS} ${PLAYER_CLASS}--${kind}`;
+			wrap.setAttribute("data-src", href);
+			const player = document.createElement(kind);
+			player.src = href;
+			player.controls = true;
+			player.preload = "metadata";
+			wrap.appendChild(player);
+			return wrap;
+		}
+		function scan() {
+			for (const player of Array.from(document.querySelectorAll(`.${PLAYER_CLASS}`))) {
+				const prev = player.previousElementSibling;
+				const src = player.getAttribute("data-src");
+				if (!(prev instanceof HTMLAnchorElement) || src === null || prev.href !== src) player.remove();
+			}
+			for (const link of Array.from(document.querySelectorAll("a[href*=\"/comfyui/media\"]"))) {
+				if (link.closest("[class^=\"dsc-\"], [class*=\" dsc-\"]") !== null) continue;
+				const kind = mediaKind(link.href);
+				if (kind === void 0) continue;
+				if (isPlayerFor(link.nextElementSibling, link.href)) continue;
+				link.after(makePlayer(kind, link.href));
+			}
+		}
+		/** Start watching the page; returns the disposer that stops and cleans up. */
+		function installInlineMedia() {
+			let frame;
+			const schedule = () => {
+				if (frame !== void 0) return;
+				frame = window.requestAnimationFrame(() => {
+					frame = void 0;
+					scan();
+				});
+			};
+			const observer = new MutationObserver((mutations) => {
+				if (mutations.some((mutation) => [...Array.from(mutation.addedNodes), ...Array.from(mutation.removedNodes)].some((node) => !(node instanceof HTMLElement && node.classList.contains(PLAYER_CLASS))))) schedule();
+			});
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true
+			});
+			schedule();
+			return () => {
+				observer.disconnect();
+				if (frame !== void 0) window.cancelAnimationFrame(frame);
+				for (const player of Array.from(document.querySelectorAll(`.${PLAYER_CLASS}`))) player.remove();
+			};
+		}
+		//#endregion
 		//#region src/client/index.ts
 		/**
 		* dsh-comfyui client half: registers the comfyui_run tool card and the
@@ -5043,6 +5197,7 @@ video.dsc-picker-player { max-height: 180px; }
 		function apply(ctx) {
 			const t = makeT(getLang());
 			ctx.effect(() => injectStyles(), "dsh-comfyui: styles");
+			ctx.effect(() => installInlineMedia(), "dsh-comfyui: inline video/audio players");
 			ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
 				name: "tool.call.toolview",
 				key: "comfyui_run"