@agentrouter-top/relay-dsh-plugin-codex 0.2.2-agentrouter.6 → 0.2.2-agentrouter.8

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/docs/native-turn-status.md

@@ -0,0 +1,13 @@
+# Native turn status
+
+Relay no longer hides DSH's turn-level status when its Codex process view mounts.
+Public DSH 0.1.2-rc.1 keeps this status present from session `running` across
+first-token waits, tools and streamed output, independently of tool completion
+or process folding. DSH also owns its localization, elapsed time and removal at
+the end of a turn. Relay does not create a second status component or infer model
+reasoning from a timer.
+
+This removes only the old blanket CSS suppression. Codex process rows, quiet
+tool outcomes, iridescent image frames, native history, approvals and other
+kernels retain their existing behavior. No shell, runtime or authentication
+change is required.

package/lib/client.js

@@ -35240,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
@@ -35928,8 +35928,179 @@ 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{border-radius:16px;width:min(100%,480px);min-width:0;overflow:hidden}.gSdKhG_placeholder{aspect-ratio:1;background:var(--dsw-alias-bg-layer-2,#f3f4f6);color:var(--dsw-alias-label-secondary,#646b77);border:1px solid var(--dsw-alias-border-l2,#e5e7eb);border-radius:inherit;place-items:end center;display:grid;position:relative;overflow:hidden}.gSdKhG_field{color:var(--dsw-alias-label-tertiary,#9299a3);opacity:.48;background:currentColor;position:absolute;inset:18px;overflow:hidden;mask-image:radial-gradient(circle,#000 1.2px,#0000 1.5px);mask-size:12px 12px}.gSdKhG_light{background:linear-gradient(115deg, transparent 28%, var(--dsw-alias-label-primary,#343b46) 48%, transparent 68%);animation:3.6s ease-in-out infinite alternate gSdKhG_codex-image-shimmer;position:absolute;inset:-55%}.gSdKhG_label{z-index:1;text-align:center;background:var(--dsw-alias-bg-layer-2,#f3f4f6);border-radius:12px;margin:0 16px 24px;padding:6px 12px;font-size:13px;line-height:20px}.gSdKhG_frame[data-state=stopped] .gSdKhG_light{opacity:.25;animation:none}@keyframes gSdKhG_codex-image-shimmer{0%{opacity:.35;transform:translate(-30%,-12%)}to{opacity:1;transform:translate(30%,12%)}}@media (prefers-reduced-motion:reduce){.gSdKhG_light{opacity:.55;animation:none}}";
+		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");
@@ -35939,39 +36110,56 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var CodexImageGeneration_module_css_default = {
-			"codex-image-shimmer": "gSdKhG_codex-image-shimmer",
+			"codex-image-reveal": "gSdKhG_codex-image-reveal",
 			"field": "gSdKhG_field",
 			"frame": "gSdKhG_frame",
 			"label": "gSdKhG_label",
-			"light": "gSdKhG_light",
-			"placeholder": "gSdKhG_placeholder"
+			"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.jsx)("div", {
+			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 ? renderMessageImages({
-					images: [{ attachment: segment.attachment }],
-					align: "start"
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				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,
-					role: "status",
-					"aria-live": "polite",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"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",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: CodexImageGeneration_module_css_default.light })
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true"
+					}), !segment.attachment && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: CodexImageGeneration_module_css_default.label,
-						children: 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
@@ -36022,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}";
 		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");
@@ -36132,9 +36320,10 @@ window.__ModuleLoader__.load({
 			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";
@@ -36156,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,
@@ -36184,8 +36374,11 @@ 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.activity?.imageGeneration ? showImages ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexImageGeneration, {
+		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
@@ -36193,6 +36386,7 @@ window.__ModuleLoader__.load({
 				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, {
@@ -36295,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 = () => {