@agentrouter-top/relay-dsh-plugin-codex 0.2.2-agentrouter.5 → 0.2.2-agentrouter.7

package/codex-activity-wire.mjs

@@ -12,5 +12,10 @@ export function readActivityPayload(value) {
   for (const key of ["summary", "input", "output", "exitCode", "commandActions"]) {
     if (activity[key] !== undefined && typeof activity[key] !== "string") return null;
   }
+  if (activity.imageGeneration !== undefined) {
+    const image = activity.imageGeneration;
+    if (activity.type !== "imageGeneration" || !image || typeof image !== "object" || image.version !== 1
+      || (image.attachmentId !== undefined && (typeof image.attachmentId !== "string" || !image.attachmentId))) return null;
+  }
   return value;
 }

package/docs/image-generation-presentation.md

@@ -0,0 +1,19 @@
+# Image generation presentation v1
+
+Relay projects native Codex `imageGeneration` item start/completion into a dot-matrix
+waiting frame. This is not a partial image, estimated progress, or a new image tool.
+Only a successful attachment import associates `activity.imageGeneration.attachmentId`
+with the existing DSH image block. Projection matches that exact ID within the same
+DSH step, keeps the generation key, and consumes only the matched image occurrence.
+Parallel images cannot be paired by arrival order. Old activity without this optional
+version-1 metadata, MCP images and image-view results keep their existing renderers.
+
+The enhanced Codex process projection owns the frame. Native/fallback DSH transcripts
+retain their tool and image rows. Failure/interruption stops the animation without
+adding a warning badge; existing actual turn errors remain available. Reduced-motion
+uses a static dot field. The final result uses DSH's public `renderMessageImages`, so
+the independent Viewer plugin continues to handle viewing and downloading.
+
+No Codex prompt, gateway, credentials, tool implementation, Desktop code, or session
+history is modified. Image URLs and private filesystem paths are not added to the
+presentation metadata.

package/docs/image-motion.md

@@ -0,0 +1,19 @@
+# Image generation motion
+
+Relay owns the approved iridescent dot field and the native-image reveal. This
+is an indeterminate status, not server progress. No model, tool, authentication,
+attachment import, Viewer or Desktop behavior is changed.
+
+The pending card is 4:3 and at most 480 px wide. Six interpolated colors and a
+soft moving ribbon replace the grey grid. Light/dark mode comes exclusively
+from the public DSH theme service. No host DOM probing or additional dependency.
+Canvas updates are imperative, at most about 33 paints per second, DPR capped
+at 2. Hidden/offscreen/reduced-motion frames do not animate; completion, failure,
+interruption and unmount dispose subscriptions. Document/media listeners are
+shared across pending images.
+
+Generated frames stay mounted when process details collapse. Completion fades
+the field into DSH's native image renderer without duplicate attachments. The
+actual result keeps its native aspect ratio and Viewer actions. History opens
+immediately without replaying the animation. Design-preview palette/demo
+controls and synthetic images are not shipped.

package/lib/client.js

@@ -193,13 +193,13 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0relay-css-module:.\src\client\AdvancedDebug.module.css.mjs
-		const css$3 = ".Y4qSZW_section{width:100%;max-width:780px;color:var(--dsw-alias-label-primary)}.Y4qSZW_settingRow{border-bottom:1px solid var(--dsw-alias-border-l2);justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:8px 0;display:flex}.Y4qSZW_statusRow{border-bottom:1px solid var(--dsw-alias-border-l2);align-items:flex-start;gap:10px;min-height:70px;padding:10px 0;display:flex}.Y4qSZW_statusDot{background:var(--dsw-alias-label-tertiary);border-radius:50%;flex:none;width:8px;height:8px;margin-top:6px}.Y4qSZW_statusRow[data-codex-status=connected] .Y4qSZW_statusDot{background:#27a65b}.Y4qSZW_statusRow[data-codex-status=connection-failed] .Y4qSZW_statusDot,.Y4qSZW_statusRow[data-codex-status=unavailable] .Y4qSZW_statusDot,.Y4qSZW_statusRow[data-codex-status=rebind-required] .Y4qSZW_statusDot{background:#d94841}.Y4qSZW_settingCopy code{color:var(--dsw-alias-label-tertiary);font-size:11px}.Y4qSZW_statusBadge{border-radius:999px;padding:2px 7px;font-size:11px;font-weight:600;line-height:16px}.Y4qSZW_statusError{color:#d94841;background:#d9484124}.Y4qSZW_statusRebind{color:#a95d00;background:#c26a0029}.Y4qSZW_settingCopy{flex-direction:column;gap:2px;min-width:0;display:flex}.Y4qSZW_settingCopy strong{font-size:14px;font-weight:500;line-height:20px}.Y4qSZW_settingCopy span{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}.Y4qSZW_switch{cursor:pointer;flex:none;width:36px;height:20px;display:inline-flex;position:relative}.Y4qSZW_switch input{opacity:0;width:1px;height:1px;position:absolute}.Y4qSZW_switch span{background:var(--dsw-alias-fill-l2);border-radius:10px;width:100%;transition:background-color .12s}.Y4qSZW_switch span:after{background:var(--dsw-alias-bg-layer-1);content:\"\";border-radius:50%;width:16px;height:16px;transition:transform .12s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0003}.Y4qSZW_switch input:checked+span{background:var(--dsw-alias-state-business-primary)}.Y4qSZW_switch input:checked+span:after{transform:translate(16px)}.Y4qSZW_switch input:focus-visible+span{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}.Y4qSZW_marker{display:none}[data-relay-simple-conversation=true] [role=tablist]{display:none}";
-		const tagId$3 = "@agentrouter-top/relay-dsh-plugin-codex/AdvancedDebug.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
+		const css$4 = ".Y4qSZW_section{width:100%;max-width:780px;color:var(--dsw-alias-label-primary)}.Y4qSZW_settingRow{border-bottom:1px solid var(--dsw-alias-border-l2);justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:8px 0;display:flex}.Y4qSZW_statusRow{border-bottom:1px solid var(--dsw-alias-border-l2);align-items:flex-start;gap:10px;min-height:70px;padding:10px 0;display:flex}.Y4qSZW_statusDot{background:var(--dsw-alias-label-tertiary);border-radius:50%;flex:none;width:8px;height:8px;margin-top:6px}.Y4qSZW_statusRow[data-codex-status=connected] .Y4qSZW_statusDot{background:#27a65b}.Y4qSZW_statusRow[data-codex-status=connection-failed] .Y4qSZW_statusDot,.Y4qSZW_statusRow[data-codex-status=unavailable] .Y4qSZW_statusDot,.Y4qSZW_statusRow[data-codex-status=rebind-required] .Y4qSZW_statusDot{background:#d94841}.Y4qSZW_settingCopy code{color:var(--dsw-alias-label-tertiary);font-size:11px}.Y4qSZW_statusBadge{border-radius:999px;padding:2px 7px;font-size:11px;font-weight:600;line-height:16px}.Y4qSZW_statusError{color:#d94841;background:#d9484124}.Y4qSZW_statusRebind{color:#a95d00;background:#c26a0029}.Y4qSZW_settingCopy{flex-direction:column;gap:2px;min-width:0;display:flex}.Y4qSZW_settingCopy strong{font-size:14px;font-weight:500;line-height:20px}.Y4qSZW_settingCopy span{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}.Y4qSZW_switch{cursor:pointer;flex:none;width:36px;height:20px;display:inline-flex;position:relative}.Y4qSZW_switch input{opacity:0;width:1px;height:1px;position:absolute}.Y4qSZW_switch span{background:var(--dsw-alias-fill-l2);border-radius:10px;width:100%;transition:background-color .12s}.Y4qSZW_switch span:after{background:var(--dsw-alias-bg-layer-1);content:\"\";border-radius:50%;width:16px;height:16px;transition:transform .12s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0003}.Y4qSZW_switch input:checked+span{background:var(--dsw-alias-state-business-primary)}.Y4qSZW_switch input:checked+span:after{transform:translate(16px)}.Y4qSZW_switch input:focus-visible+span{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}.Y4qSZW_marker{display:none}[data-relay-simple-conversation=true] [role=tablist]{display:none}";
+		const tagId$4 = "@agentrouter-top/relay-dsh-plugin-codex/AdvancedDebug.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$4) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@agentrouter-top/relay-dsh-plugin-codex";
-			tag.dataset.pluginCss = tagId$3;
-			tag.textContent = css$3;
+			tag.dataset.pluginCss = tagId$4;
+			tag.textContent = css$4;
 			document.head.appendChild(tag);
 		}
 		var AdvancedDebug_module_css_default = {
@@ -34889,6 +34889,10 @@ window.__ModuleLoader__.load({
 				"exitCode",
 				"commandActions"
 			]) if (activity[key] !== void 0 && typeof activity[key] !== "string") return null;
+			if (activity.imageGeneration !== void 0) {
+				const image = activity.imageGeneration;
+				if (activity.type !== "imageGeneration" || !image || typeof image !== "object" || image.version !== 1 || image.attachmentId !== void 0 && (typeof image.attachmentId !== "string" || !image.attachmentId)) return null;
+			}
 			return value;
 		}
 		//#endregion
@@ -35213,13 +35217,13 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0relay-css-module:.\src\client\CodexActivityView.module.css.mjs
-		const css$2 = ".jIHzgW_activity{width:min(100%,960px);color:var(--dsw-alias-label-secondary)}.jIHzgW_row{gap:8px;min-width:0;max-width:100%}.jIHzgW_title{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;font-size:14px;line-height:24px;overflow:hidden}.jIHzgW_summary{min-width:0;color:var(--dsw-alias-label-tertiary);flex:1;align-items:center;gap:8px;font-size:13px;line-height:20px;display:flex}.jIHzgW_summary :first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.jIHzgW_detail{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-background-container,#f6f6f7);color:var(--dsw-alias-label-secondary);border-radius:8px;margin:8px 0 12px 28px;overflow:hidden}.jIHzgW_detailBlock{min-width:0}.jIHzgW_detailLabel{color:var(--dsw-alias-label-tertiary);padding:10px 12px 0;font-size:13px;line-height:18px}.jIHzgW_detail pre{max-height:360px;color:var(--dsw-alias-label-secondary);font:var(--dsw-font-markdown-code-block-small);white-space:pre-wrap;word-break:break-word;margin:0;padding:10px 12px 12px;overflow:auto}.jIHzgW_provenance{color:var(--dsw-alias-label-tertiary);text-overflow:ellipsis;white-space:nowrap;padding:10px 12px 0;font-size:12px;line-height:18px;overflow:hidden}.jIHzgW_footer{border-top:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);justify-content:space-between;gap:12px;padding:8px 12px;font-size:13px;line-height:18px;display:flex}";
-		const tagId$2 = "@agentrouter-top/relay-dsh-plugin-codex/CodexActivityView.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$2) + "]") === null) {
+		const css$3 = ".jIHzgW_activity{width:min(100%,960px);color:var(--dsw-alias-label-secondary)}.jIHzgW_row{gap:8px;min-width:0;max-width:100%}.jIHzgW_title{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;font-size:14px;line-height:24px;overflow:hidden}.jIHzgW_summary{min-width:0;color:var(--dsw-alias-label-tertiary);flex:1;align-items:center;gap:8px;font-size:13px;line-height:20px;display:flex}.jIHzgW_summary :first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.jIHzgW_detail{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-background-container,#f6f6f7);color:var(--dsw-alias-label-secondary);border-radius:8px;margin:8px 0 12px 28px;overflow:hidden}.jIHzgW_detailBlock{min-width:0}.jIHzgW_detailLabel{color:var(--dsw-alias-label-tertiary);padding:10px 12px 0;font-size:13px;line-height:18px}.jIHzgW_detail pre{max-height:360px;color:var(--dsw-alias-label-secondary);font:var(--dsw-font-markdown-code-block-small);white-space:pre-wrap;word-break:break-word;margin:0;padding:10px 12px 12px;overflow:auto}.jIHzgW_provenance{color:var(--dsw-alias-label-tertiary);text-overflow:ellipsis;white-space:nowrap;padding:10px 12px 0;font-size:12px;line-height:18px;overflow:hidden}.jIHzgW_footer{border-top:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary);justify-content:space-between;gap:12px;padding:8px 12px;font-size:13px;line-height:18px;display:flex}";
+		const tagId$3 = "@agentrouter-top/relay-dsh-plugin-codex/CodexActivityView.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@agentrouter-top/relay-dsh-plugin-codex";
-			tag.dataset.pluginCss = tagId$2;
-			tag.textContent = css$2;
+			tag.dataset.pluginCss = tagId$3;
+			tag.textContent = css$3;
 			document.head.appendChild(tag);
 		}
 		var CodexActivityView_module_css_default = {
@@ -35236,31 +35240,31 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/process-presence.ts
 		const mounted = /* @__PURE__ */ new Map();
-		const listeners = /* @__PURE__ */ new Set();
-		const subscribe = (listener) => {
-			listeners.add(listener);
+		const listeners$1 = /* @__PURE__ */ new Set();
+		const subscribe$1 = (listener) => {
+			listeners$1.add(listener);
 			return () => {
-				listeners.delete(listener);
+				listeners$1.delete(listener);
 			};
 		};
-		const notify = () => {
-			for (const listener of listeners) listener();
+		const notify$1 = () => {
+			for (const listener of listeners$1) listener();
 		};
 		const keyOf = (sessionId, turn) => JSON.stringify([sessionId, turn]);
 		/** Suppression is reversible and only active after the replacement mounts. */
 		function mountProcess(sessionId, turn) {
 			const key = keyOf(sessionId, turn);
 			mounted.set(key, (mounted.get(key) ?? 0) + 1);
-			notify();
+			notify$1();
 			return () => {
 				const count = (mounted.get(key) ?? 1) - 1;
 				if (count === 0) mounted.delete(key);
 				else mounted.set(key, count);
-				notify();
+				notify$1();
 			};
 		}
 		function useProcessPresence(sessionId, turn) {
-			return (0, react.useSyncExternalStore)(subscribe, () => mounted.has(keyOf(sessionId, turn)), () => false);
+			return (0, react.useSyncExternalStore)(subscribe$1, () => mounted.has(keyOf(sessionId, turn)), () => false);
 		}
 		//#endregion
 		//#region src/client/compatible-chat.ts
@@ -35722,6 +35726,24 @@ window.__ModuleLoader__.load({
 			const last = text.at(-1);
 			return last ? [last] : [];
 		}
+		/** Place each generated attachment in its original generation frame. Never guess
+		* by filename, nearest activity, or cross-turn order. Legacy/MCP images stay native. */
+		function imageGenerationFrames(segments) {
+			const consumed = /* @__PURE__ */ new Set();
+			const frames = /* @__PURE__ */ new Map();
+			for (const segment of segments) {
+				const generation = segment.activity?.imageGeneration;
+				if (segment.kind !== "activity" || generation?.version !== 1) continue;
+				const image = generation.attachmentId ? segments.find((candidate) => candidate.kind === "image" && candidate.step === segment.step && !consumed.has(candidate.key) && candidate.attachment?.attachmentId === generation.attachmentId) : void 0;
+				if (image) consumed.add(image.key);
+				frames.set(segment.key, {
+					...segment,
+					kind: "image",
+					attachment: image?.attachment
+				});
+			}
+			return segments.filter((segment) => !consumed.has(segment.key)).map((segment) => frames.get(segment.key) ?? segment);
+		}
 		const codexProcessDefinition = {
 			kind: "relay-codex-process",
 			target: "chat",
@@ -35906,6 +35928,241 @@ window.__ModuleLoader__.load({
 			return value.length > 15 ? `${value.slice(0, 8)}...${value.slice(-4)}` : value;
 		}
 		//#endregion
+		//#region src/client/image-motion.ts
+		const palette = [
+			[
+				49,
+				190,
+				217
+			],
+			[
+				88,
+				140,
+				246
+			],
+			[
+				161,
+				113,
+				237
+			],
+			[
+				237,
+				132,
+				188
+			],
+			[
+				245,
+				189,
+				121
+			],
+			[
+				78,
+				202,
+				214
+			]
+		];
+		const listeners = /* @__PURE__ */ new Set();
+		let reduced;
+		const notify = () => {
+			for (const listener of listeners) listener();
+		};
+		function subscribe(listener) {
+			if (!listeners.size) {
+				reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+				reduced?.addEventListener("change", notify);
+				document.addEventListener("visibilitychange", notify);
+			}
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+				if (!listeners.size) {
+					reduced?.removeEventListener("change", notify);
+					document.removeEventListener("visibilitychange", notify);
+					reduced = void 0;
+				}
+			};
+		}
+		/** One bounded canvas timeline; no per-frame React state or host DOM inspection. */
+		function mountImageMotion(canvas, dark) {
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return () => {};
+			let width = 0, height = 0, points = [];
+			let clock = 1.6, last = 0, lastPaint = 0, raf = 0, disposed = false;
+			let visible = typeof IntersectionObserver === "undefined";
+			const colorAt = (position) => {
+				const offset = (position % 1 + 1) % 1 * palette.length;
+				const i = Math.floor(offset), f = offset - i;
+				return palette[i].map((channel, index) => {
+					const value = channel + (palette[(i + 1) % palette.length][index] - channel) * f;
+					return Math.round(dark ? value + (255 - value) * .16 : value);
+				}).join(",");
+			};
+			const draw = () => {
+				if (!width || !height) return;
+				ctx.clearRect(0, 0, width, height);
+				const t = clock;
+				for (let i = 0; i < 3; i++) {
+					const x = width * (.25 + i * .24 + .045 * Math.sin(t * .43 + i));
+					const y = height * (.43 + .075 * Math.sin(t * .6 + i));
+					const glow = ctx.createRadialGradient(x, y, 0, x, y, width * .31);
+					const rgb = colorAt(i * .28 - t * .045);
+					glow.addColorStop(0, `rgba(${rgb},${dark ? .105 : .066})`);
+					glow.addColorStop(1, `rgba(${rgb},0)`);
+					ctx.fillStyle = glow;
+					ctx.fillRect(0, 0, width, height);
+				}
+				for (const p of points) {
+					if (p.edge < .002) continue;
+					const u = p.nx * .93 + p.ny * .24, v = p.ny * .95 - p.nx * .22;
+					const spine = .2 * Math.sin(u * 3.3 - t * .8) + .14 * Math.sin(t * .42);
+					const main = Math.exp(-Math.pow((v - spine) / .21, 2));
+					const echo = Math.exp(-Math.pow((v - spine + .43) / .29, 2));
+					const travel = .59 + .41 * Math.sin(u * 4.2 - t * 1.12 + p.ny * .7);
+					const swell = .8 + .2 * Math.sin(t * .62 + u * 1.9);
+					const energy = (main * (.7 + .3 * travel) + echo * .3) * swell;
+					const alpha = (.022 + energy * (dark ? .86 : .79)) * p.edge;
+					const radius = .53 + energy * .9;
+					const dx = Math.sin(p.ny * 4.1 + t * .61) * .7 * energy;
+					const dy = Math.cos(p.nx * 3.2 - t * .5) * 1.02 * energy;
+					ctx.fillStyle = `rgba(${colorAt((u + 1) * .39 + p.ny * .08 - t * .045)},${alpha.toFixed(3)})`;
+					ctx.beginPath();
+					ctx.arc(p.x + dx, p.y + dy, radius, 0, Math.PI * 2);
+					ctx.fill();
+					if (energy > .6) {
+						ctx.fillStyle = `rgba(255,255,255,${((energy - .6) * p.edge * (dark ? .65 : .32)).toFixed(3)})`;
+						ctx.beginPath();
+						ctx.arc(p.x + dx, p.y + dy, radius * .4, 0, Math.PI * 2);
+						ctx.fill();
+					}
+				}
+			};
+			const canAnimate = () => !disposed && visible && width > 0 && height > 0 && !document.hidden && !reduced?.matches;
+			const tick = (now) => {
+				raf = 0;
+				if (!canAnimate()) {
+					last = 0;
+					return;
+				}
+				if (last) clock += Math.min((now - last) / 1e3, .07);
+				last = now;
+				if (now - lastPaint >= 30) {
+					draw();
+					lastPaint = now;
+				}
+				raf = requestAnimationFrame(tick);
+			};
+			const sync = () => {
+				cancelAnimationFrame(raf);
+				raf = 0;
+				last = 0;
+				if (canAnimate()) raf = requestAnimationFrame(tick);
+			};
+			const resize = () => {
+				if (disposed) return;
+				const rect = canvas.getBoundingClientRect(), ratio = Math.min(window.devicePixelRatio || 1, 2);
+				width = rect.width;
+				height = rect.height;
+				canvas.width = Math.round(width * ratio);
+				canvas.height = Math.round(height * ratio);
+				ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+				const spacing = width < 400 ? 7.4 : 8.4, inset = 22;
+				points = [];
+				for (let y = inset; y < height - 48; y += spacing) for (let x = inset; x < width - inset; x += spacing) {
+					const nx = (x - width * .5) / (width * .47), ny = (y - height * .43) / (height * .42);
+					points.push({
+						x,
+						y,
+						nx,
+						ny,
+						edge: Math.pow(Math.max(0, 1 - nx ** 4 - ny ** 4), 1.2)
+					});
+				}
+				draw();
+				sync();
+			};
+			const unsubscribe = subscribe(sync);
+			const resizer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(resize);
+			const intersection = typeof IntersectionObserver === "undefined" ? void 0 : new IntersectionObserver((entries) => {
+				if (disposed) return;
+				visible = entries.some((entry) => entry.isIntersecting);
+				sync();
+			});
+			resizer?.observe(canvas);
+			intersection?.observe(canvas);
+			resize();
+			return () => {
+				disposed = true;
+				cancelAnimationFrame(raf);
+				unsubscribe();
+				resizer?.disconnect();
+				intersection?.disconnect();
+			};
+		}
+		//#endregion
+		//#region \0relay-css-module:.\src\client\CodexImageGeneration.module.css.mjs
+		const css$2 = ".gSdKhG_frame{--image-well:#f7f8ff;--image-accent:#6f77a7;border-radius:24px;width:min(100%,480px);min-width:0;position:relative;overflow:hidden}.gSdKhG_frame[data-color-scheme=dark]{--image-well:#1a2238;--image-accent:#b9c5fa}.gSdKhG_placeholder{box-sizing:border-box;aspect-ratio:4/3;background:var(--image-well);color:var(--image-accent);border:1px solid var(--dsw-alias-border-l2,#e6e8f2);border-radius:inherit;place-items:end center;transition:opacity 1.2s,filter 1.2s,transform 1.6s,visibility 0s 1.2s;display:grid;position:relative;overflow:hidden}.gSdKhG_field{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.gSdKhG_label{z-index:1;text-align:center;gap:6px;margin:0 16px 26px;font-size:13px;line-height:20px;display:grid}.gSdKhG_subtitle{opacity:.75;font-size:11px}.gSdKhG_result{min-width:0}.gSdKhG_frame[data-state=ready] .gSdKhG_placeholder{aspect-ratio:auto;opacity:0;filter:blur(5px);visibility:hidden;pointer-events:none;position:absolute;inset:0;transform:scale(1.025)}.gSdKhG_frame[data-reveal] .gSdKhG_result{animation:1.6s both gSdKhG_codex-image-reveal}.gSdKhG_frame[data-state=stopped] .gSdKhG_field{opacity:.4}@keyframes gSdKhG_codex-image-reveal{0%{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.gSdKhG_placeholder{transition:none}.gSdKhG_frame[data-reveal] .gSdKhG_result{animation:none}}";
+		const tagId$2 = "@agentrouter-top/relay-dsh-plugin-codex/CodexImageGeneration.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$2) + "]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "@agentrouter-top/relay-dsh-plugin-codex";
+			tag.dataset.pluginCss = tagId$2;
+			tag.textContent = css$2;
+			document.head.appendChild(tag);
+		}
+		var CodexImageGeneration_module_css_default = {
+			"codex-image-reveal": "gSdKhG_codex-image-reveal",
+			"field": "gSdKhG_field",
+			"frame": "gSdKhG_frame",
+			"label": "gSdKhG_label",
+			"placeholder": "gSdKhG_placeholder",
+			"result": "gSdKhG_result",
+			"subtitle": "gSdKhG_subtitle"
+		};
+		//#endregion
+		//#region src/client/CodexImageGeneration.tsx
+		const ImageColorScheme = (0, react.createContext)("light");
+		function CodexImageGeneration({ segment, running, renderMessageImages }) {
+			const pending = !segment.attachment && running && segment.activity?.status !== "error";
+			const scheme = (0, react.useContext)(ImageColorScheme);
+			const canvas = (0, react.useRef)(null);
+			const beganWithPlaceholder = (0, react.useRef)(!segment.attachment).current;
+			(0, react.useEffect)(() => {
+				if (pending && canvas.current) return mountImageMotion(canvas.current, scheme === "dark");
+			}, [pending, scheme]);
+			const label = pending ? "正在生成图片" : "图片生成已结束，未提供可显示的图片";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: CodexImageGeneration_module_css_default.frame,
+				"data-codex-image-generation": segment.key,
+				"data-color-scheme": scheme,
+				"data-reveal": beganWithPlaceholder && Boolean(segment.attachment) || void 0,
+				"data-state": segment.attachment ? "ready" : pending ? "generating" : "stopped",
+				"aria-busy": pending,
+				children: [segment.attachment && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: CodexImageGeneration_module_css_default.result,
+					children: renderMessageImages({
+						images: [{ attachment: segment.attachment }],
+						align: "start"
+					})
+				}), beganWithPlaceholder && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: CodexImageGeneration_module_css_default.placeholder,
+					"aria-hidden": Boolean(segment.attachment) || void 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
+						ref: canvas,
+						className: CodexImageGeneration_module_css_default.field,
+						"aria-hidden": "true"
+					}), !segment.attachment && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: CodexImageGeneration_module_css_default.label,
+						role: "status",
+						"aria-live": "polite",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), pending && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: CodexImageGeneration_module_css_default.subtitle,
+							children: "图像即将在这里呈现"
+						})]
+					})]
+				})]
+			});
+		}
+		//#endregion
 		//#region src/client/process-files.ts
 		function codexProducedFileMentions(segments, openFile, native) {
 			const paths = /* @__PURE__ */ new Set();
@@ -35953,7 +36210,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0relay-css-module:.\src\client\CodexProcessView.module.css.mjs
-		const css$1 = "._06p8sG_process{width:100%;min-width:0;color:var(--dsw-alias-label-secondary)}._06p8sG_processToggle,._06p8sG_groupToggle{min-width:0;max-width:100%;min-height:28px;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:2px 0;font-size:14px;line-height:24px;display:flex}._06p8sG_processToggle{margin-bottom:16px}._06p8sG_processToggle:focus-visible,._06p8sG_groupToggle:focus-visible{outline:2px solid var(--dsw-static-deepseek-500,#416aff);outline-offset:3px;border-radius:4px}._06p8sG_groupToggle>svg{flex:none}._06p8sG_groupTitle{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._06p8sG_count{flex-shrink:0;font-size:12px}._06p8sG_flow,._06p8sG_answer{flex-direction:column;gap:20px;min-width:0;display:flex}._06p8sG_flow[hidden]{display:none}._06p8sG_flow{border-top:1px solid var(--dsw-alias-border-l2);padding-top:16px}._06p8sG_answer{color:var(--dsw-alias-label-primary)}._06p8sG_flow:not([hidden])+._06p8sG_answer{margin-top:24px}._06p8sG_prose{min-width:0;color:var(--dsw-alias-label-primary);overflow-wrap:anywhere}._06p8sG_prose p{margin:0 0 12px}._06p8sG_prose p:last-child{margin-bottom:0}._06p8sG_activities{flex-direction:column;gap:8px;min-width:0;padding:8px 0 0 20px;display:flex}._06p8sG_reasoning{overflow-wrap:anywhere;margin:8px 0 0 24px;font-size:13px}._06p8sG_error{color:var(--dsw-alias-state-error-primary,#b42318)}._06p8sG_spinner{animation:1.4s linear infinite _06p8sG_codex-spin}@keyframes _06p8sG_codex-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){._06p8sG_spinner{animation:none}}[data-chat-flow-kind=assistant-step]:has(>[data-slot]>[data-codex-native-assistant]){display:none}[data-chat-flow-kind=tool-call]:has(>[data-slot]>[data-chat-call-id]>[data-slot]>[data-codex-grouped-call]){display:none}[data-chat-flow-kind=context]:has(>[data-slot]>[data-codex-internal-context]){display:none}[data-chat-flow-kind=relay-codex-process]:has(>[data-slot]>[data-codex-process-fallback]){display:none}[data-chat-flow]:has([data-codex-process-turn][data-status=running])>[role=status][aria-live=polite]{display:none}";
+		const css$1 = "._06p8sG_process{width:100%;min-width:0;color:var(--dsw-alias-label-secondary)}._06p8sG_processToggle,._06p8sG_groupToggle{min-width:0;max-width:100%;min-height:28px;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:2px 0;font-size:14px;line-height:24px;display:flex}._06p8sG_processToggle{margin-bottom:16px}._06p8sG_processToggle:focus-visible,._06p8sG_groupToggle:focus-visible{outline:2px solid var(--dsw-static-deepseek-500,#416aff);outline-offset:3px;border-radius:4px}._06p8sG_groupToggle>svg{flex:none}._06p8sG_groupTitle{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}._06p8sG_count{flex-shrink:0;font-size:12px}._06p8sG_flow,._06p8sG_answer{flex-direction:column;gap:20px;min-width:0;display:flex}._06p8sG_flow[hidden]{display:none}._06p8sG_flow{border-top:1px solid var(--dsw-alias-border-l2);padding-top:16px}._06p8sG_flow[data-images-only]{border-top:0;padding-top:0}._06p8sG_flow>[hidden]{display:none}._06p8sG_answer{color:var(--dsw-alias-label-primary)}._06p8sG_flow:not([hidden])+._06p8sG_answer{margin-top:24px}._06p8sG_prose{min-width:0;color:var(--dsw-alias-label-primary);overflow-wrap:anywhere}._06p8sG_prose p{margin:0 0 12px}._06p8sG_prose p:last-child{margin-bottom:0}._06p8sG_activities{flex-direction:column;gap:8px;min-width:0;padding:8px 0 0 20px;display:flex}._06p8sG_reasoning{overflow-wrap:anywhere;margin:8px 0 0 24px;font-size:13px}._06p8sG_error{color:var(--dsw-alias-state-error-primary,#b42318)}._06p8sG_spinner{animation:1.4s linear infinite _06p8sG_codex-spin}@keyframes _06p8sG_codex-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){._06p8sG_spinner{animation:none}}[data-chat-flow-kind=assistant-step]:has(>[data-slot]>[data-codex-native-assistant]){display:none}[data-chat-flow-kind=tool-call]:has(>[data-slot]>[data-chat-call-id]>[data-slot]>[data-codex-grouped-call]){display:none}[data-chat-flow-kind=context]:has(>[data-slot]>[data-codex-internal-context]){display:none}[data-chat-flow-kind=relay-codex-process]:has(>[data-slot]>[data-codex-process-fallback]){display:none}[data-chat-flow]:has([data-codex-process-turn][data-status=running])>[role=status][aria-live=polite]{display:none}";
 		const tagId$1 = "@agentrouter-top/relay-dsh-plugin-codex/CodexProcessView.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 			const tag = document.createElement("style");
@@ -36058,13 +36315,15 @@ window.__ModuleLoader__.load({
 				};
 			}, [state.status]);
 			const answerKeys = new Set(codexProcessAnswerSegments(state).map((segment) => segment.key));
-			const finalIndex = state.segments.findIndex((segment) => answerKeys.has(segment.key));
-			const process = finalIndex < 0 ? state.segments : state.segments.slice(0, finalIndex);
-			const answer = finalIndex < 0 ? [] : state.segments.slice(finalIndex);
+			const segments = imageGenerationFrames(state.segments);
+			const finalIndex = segments.findIndex((segment) => answerKeys.has(segment.key));
+			const process = finalIndex < 0 ? segments : segments.slice(0, finalIndex);
+			const answer = finalIndex < 0 ? [] : segments.slice(finalIndex);
 			const deliverables = process.filter((segment) => segment.kind === "image");
+			const persistentImages = deliverables.some((segment) => segment.activity?.imageGeneration);
 			const hasProcess = process.some((segment) => segment.kind !== "text" || Boolean(segment.text?.trim()));
 			const open = expanded ?? (state.status === "running" || answer.length === 0 && deliverables.length === 0);
-			const visibleAnswer = [...open ? [] : deliverables, ...answer];
+			const visibleAnswer = [...open || persistentImages ? [] : deliverables, ...answer];
 			const seconds = Math.max(0, Math.floor(((state.endedAt ?? now) - state.startedAt) / 1e3));
 			const elapsed = seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
 			const status = state.status === "running" ? "Working" : state.status === "error" ? "Stopped" : "Worked";
@@ -36086,22 +36345,23 @@ window.__ModuleLoader__.load({
 					] }), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { size: 15 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { size: 15 })]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: CodexProcessView_module_css_default.flow,
-					hidden: !open,
+					hidden: !open && !persistentImages,
 					"data-codex-process-content": true,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProcessItems, {
-							segments: process,
-							renderMessageImages,
-							running: state.status === "running",
-							showImages: open
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReasoningSummary, { segments: process }),
-						state.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-images-only": !open && persistentImages || void 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProcessItems, {
+						segments: process,
+						renderMessageImages,
+						running: state.status === "running",
+						showImages: open || persistentImages,
+						collapseProcess: !open
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						hidden: !open,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReasoningSummary, { segments: process }), state.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: CodexProcessView_module_css_default.error,
 							role: "status",
 							children: state.error
-						})
-					]
+						})]
+					})]
 				})] }), visibleAnswer.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: CodexProcessView_module_css_default.answer,
 					"data-codex-final-answer": true,
@@ -36114,11 +36374,19 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
-		function ProcessItems({ segments, renderMessageImages, running, fileMentions, showImages = true }) {
-			return groupProcessSegments(segments).map((item) => "activities" in item ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActivityGroup, { segments: item.activities }, item.key) : item.kind === "image" && item.attachment ? showImages ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderMessageImages({
+		function ProcessItems({ segments, renderMessageImages, running, fileMentions, showImages = true, collapseProcess = false }) {
+			return groupProcessSegments(segments).map((item) => "activities" in item ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				hidden: collapseProcess,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActivityGroup, { segments: item.activities })
+			}, item.key) : item.activity?.imageGeneration ? showImages ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexImageGeneration, {
+				segment: item,
+				running,
+				renderMessageImages
+			}, item.key) : null : item.kind === "image" && item.attachment ? showImages ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderMessageImages({
 				images: [{ attachment: item.attachment }],
 				align: "start"
 			}) }, item.key) : null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				hidden: collapseProcess,
 				className: CodexProcessView_module_css_default.prose,
 				"data-codex-commentary": item.phase !== "final_answer" || void 0,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.MarkdownText, {
@@ -36221,10 +36489,18 @@ window.__ModuleLoader__.load({
 			conversationEvents(ctx).register(codexProcessDefinition);
 			installContextPresentation(ctx, debug);
 			ctx.slots.inject("conversation.chat.node", () => {
+				const subscribeTheme = (listener) => ctx.on("theme/change", listener);
+				const getScheme = () => ctx.theme.getTheme().active.colorScheme;
 				const disposeProcess = ctx.slots.register({
 					name: "conversation.chat.node",
 					key: "relay-codex-process"
-				}, CodexProcessView);
+				}, function ThemedCodexProcess(props) {
+					const scheme = (0, react.useSyncExternalStore)(subscribeTheme, getScheme, getScheme);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageColorScheme.Provider, {
+						value: scheme,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexProcessView, { ...props })
+					});
+				});
 				let previous;
 				let disposeAssistant;
 				const reconcile = () => {