dsh-codex-subscription 1.13.1 → 1.14.0

package/lib/client.js

@@ -28,7 +28,6 @@ window.__ModuleLoader__.load({
 		//#endregion
 		let react = require("react");
 		react = __toESM(react, 1);
-		let react_dom = require("react-dom");
 		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/16/solid/esm/BoltIcon.js
@@ -79,6 +78,705 @@ window.__ModuleLoader__.load({
 			return original === void 0 ? void 0 : { original };
 		}
 		//#endregion
+		//#region src/subscription-image-viewer-styles.js
+		const SUBSCRIPTION_IMAGE_VIEWER_CSS = String.raw`
+.dcsiv-root{position:fixed;inset:0;z-index:1000;pointer-events:auto;overflow:hidden;background:rgba(7,8,10,.68);color:var(--dsw-alias-label-primary-inverted,#fff);outline:0;backdrop-filter:blur(13px) saturate(.72);-webkit-backdrop-filter:blur(13px) saturate(.72)}
+.dcsiv-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
+.dcsiv-topbar{position:absolute;right:50%;bottom:22px;z-index:6;max-width:calc(100vw - 36px);padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(38,39,43,.86);box-shadow:0 10px 34px rgba(0,0,0,.3);transform:translateX(50%);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
+.dcsiv-actions{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}.dcsiv-actions::-webkit-scrollbar{display:none}.dcsiv-button,.dcsiv-download{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.9);font:inherit;font-size:12px;text-decoration:none;white-space:nowrap;cursor:pointer}.dcsiv-button:hover,.dcsiv-download:hover,.dcsiv-button[data-active=true]{background:rgba(255,255,255,.12)}.dcsiv-button:focus-visible,.dcsiv-download:focus-visible,.dcsiv-close-floating:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:2px}.dcsiv-button:disabled,.dcsiv-download:disabled{opacity:.38;cursor:default}.dcsiv-icon-only{width:32px;padding:0}.dcsiv-zoom{min-width:44px;color:rgba(255,255,255,.68);font-size:12px;font-variant-numeric:tabular-nums;text-align:center}
+.dcsiv-close-floating{position:absolute;top:20px;right:20px;z-index:8;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(48,49,53,.82);box-shadow:0 8px 24px rgba(0,0,0,.28);color:#fff;cursor:pointer;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.dcsiv-close-floating:hover{background:rgba(66,67,72,.92)}
+.dcsiv-workspace{position:absolute;inset:0;display:grid;min-width:0;min-height:0;padding:68px 24px 72px;box-sizing:border-box}
+.dcsiv-stage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;padding:0;touch-action:none;user-select:none}.dcsiv-stage[data-dragging=true]{cursor:grabbing}.dcsiv-stage[data-annotating=true]{cursor:crosshair}
+.dcsiv-surface{position:relative;display:inline-flex;max-width:100%;max-height:100%;transform-origin:center;will-change:transform}.dcsiv-image{display:block;max-width:calc(100vw - 72px);max-height:calc(100vh - 154px);border-radius:12px;object-fit:contain;box-shadow:0 22px 60px rgba(0,0,0,.46);user-select:none;-webkit-user-drag:none}
+.dcsiv-annotation{position:absolute;z-index:5;width:24px;height:24px;transform-origin:center;pointer-events:none}.dcsiv-pin{position:absolute;inset:0;display:grid;place-items:center;width:24px;height:24px;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(23,24,27,.94);box-shadow:0 4px 16px rgba(0,0,0,.35);color:#fff;font:inherit;font-size:11px;font-weight:700;cursor:pointer;pointer-events:auto}.dcsiv-pin[data-active=true]{background:var(--dsw-alias-state-business-primary,#3964fe)}
+.dcsiv-inline-note{position:absolute;bottom:34px;box-sizing:border-box;display:grid;width:min(300px,calc(100vw - 40px));grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;gap:7px;padding:7px 8px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(32,33,37,.94);box-shadow:0 14px 38px rgba(0,0,0,.38);color:#fff;pointer-events:auto;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.dcsiv-annotation[data-x=right] .dcsiv-inline-note{left:-8px}.dcsiv-annotation[data-x=left] .dcsiv-inline-note{right:-8px}.dcsiv-annotation[data-x=center] .dcsiv-inline-note{left:50%;transform:translateX(-50%)}.dcsiv-annotation[data-y=down] .dcsiv-inline-note{top:34px;bottom:auto}.dcsiv-inline-note::after{position:absolute;width:9px;height:9px;background:rgba(32,33,37,.94);content:'';transform:rotate(45deg)}.dcsiv-annotation[data-y=up] .dcsiv-inline-note::after{bottom:-5px}.dcsiv-annotation[data-y=down] .dcsiv-inline-note::after{top:-5px}.dcsiv-annotation[data-x=right] .dcsiv-inline-note::after{left:13px}.dcsiv-annotation[data-x=left] .dcsiv-inline-note::after{right:13px}.dcsiv-annotation[data-x=center] .dcsiv-inline-note::after{left:calc(50% - 4px)}.dcsiv-inline-index{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--dsw-alias-state-business-primary,#3964fe);color:#fff;font-size:10px;font-weight:700}.dcsiv-inline-note textarea{box-sizing:border-box;width:100%;min-height:24px;max-height:92px;resize:none;overflow:auto;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:12px;line-height:18px}.dcsiv-inline-note textarea::placeholder{color:rgba(255,255,255,.44)}.dcsiv-note-remove{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.68);cursor:pointer}.dcsiv-note-remove:hover{background:rgba(255,255,255,.1);color:#fff}
+.dcsiv-nav{position:absolute;top:50%;z-index:4;width:42px;height:42px;padding:0;transform:translateY(-50%);background:rgba(48,49,53,.82);box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.dcsiv-prev{left:6px}.dcsiv-next{right:6px}.dcsiv-counter{position:absolute;bottom:8px;left:50%;padding:5px 10px;border-radius:999px;background:rgba(38,39,43,.86);color:rgba(255,255,255,.72);font-size:11px;transform:translateX(-50%);backdrop-filter:blur(16px)}
+.dcsiv-hint{display:none}
+.dcsiv-copy-notes{position:absolute;right:20px;bottom:22px;z-index:6;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(38,39,43,.86);color:rgba(255,255,255,.82);font:inherit;font-size:12px;cursor:pointer;backdrop-filter:blur(16px)}
+@media(max-width:760px){.dcsiv-close-floating{top:12px;right:12px;width:40px;height:40px}.dcsiv-workspace{padding:60px 12px 68px}.dcsiv-image{max-width:calc(100vw - 24px);max-height:calc(100vh - 136px)}.dcsiv-topbar{bottom:12px;max-width:calc(100vw - 24px)}.dcsiv-button{padding:0 8px}.dcsiv-button span.dcsiv-label{display:none}.dcsiv-inline-note{width:min(260px,calc(100vw - 40px))}.dcsiv-copy-notes{display:none}}
+@media(prefers-reduced-motion:reduce){.dcsiv-surface{transition:none}}
+`;
+		//#endregion
+		//#region src/subscription-image-viewer.jsx
+		const fill$1 = (value, variables) => Object.entries(variables).reduce((text, [key, replacement]) => text.replaceAll(`{${key}}`, String(replacement)), value);
+		const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+		const bytesLabel = (bytes) => bytes === void 0 ? void 0 : bytes < 1024 * 1024 ? `${Math.max(.1, bytes / 1024).toLocaleString(void 0, { maximumFractionDigits: 1 })} KB` : `${(bytes / 1024 / 1024).toLocaleString(void 0, { maximumFractionDigits: 1 })} MB`;
+		const downloadName = (name) => {
+			const cleaned = String(name || "image.png").replace(/[<>:"/\\|?*\u0000-\u001f]/gu, "-").replace(/[. ]+$/u, "").trim();
+			return cleaned === "" ? "image.png" : cleaned;
+		};
+		const noteText = (annotations, t) => annotations.map((annotation, index) => {
+			return `${fill$1(t("imageAnnotation"), { value: index + 1 })} (${Math.round(annotation.x * 100)}%, ${Math.round(annotation.y * 100)}%): ${annotation.note.trim()}`;
+		}).filter((line) => !line.endsWith(": ")).join("\n");
+		function ViewerAction({ action, annotations, item, service, t }) {
+			const [state, setState] = (0, react.useState)("idle");
+			const invoke = async () => {
+				if (state === "pending") return;
+				setState("pending");
+				try {
+					await action.onInvoke({
+						annotations,
+						item,
+						src: item.src
+					});
+					setState("idle");
+					if (action.closeOnSuccess) service.close();
+				} catch {
+					setState("failed");
+				}
+			};
+			const label = state === "pending" ? action.pendingLabel : state === "failed" ? action.errorLabel : action.label;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "dcsiv-button",
+				disabled: state === "pending",
+				onClick: () => {
+					invoke();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dcsiv-label",
+					children: label ?? t("imageEdit")
+				})
+			});
+		}
+		function ViewerDownload({ download, item, t }) {
+			const [state, setState] = (0, react.useState)("idle");
+			const invoke = async () => {
+				if (state === "pending") return;
+				setState("pending");
+				try {
+					await download.onInvoke({
+						item,
+						src: item.src
+					});
+					setState("idle");
+				} catch {
+					setState("failed");
+				}
+			};
+			const label = state === "pending" ? download.pendingLabel ?? t("imageDownloadPreparing") : state === "failed" ? download.errorLabel ?? t("imageDownloadFailed") : t("imageDownload");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "dcsiv-download",
+				disabled: state === "pending",
+				onClick: () => {
+					invoke();
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutline16, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dcsiv-label",
+					children: label
+				})]
+			});
+		}
+		function SubscriptionImageViewerOverlay({ service, t }) {
+			const request = (0, react.useSyncExternalStore)(service.subscribe, service.getSnapshot);
+			const [index, setIndex] = (0, react.useState)(0);
+			const [transform, setTransform] = (0, react.useState)({
+				zoom: 1,
+				x: 0,
+				y: 0
+			});
+			const [dragging, setDragging] = (0, react.useState)(false);
+			const [annotating, setAnnotating] = (0, react.useState)(false);
+			const [annotationsByImage, setAnnotationsByImage] = (0, react.useState)(service.getAnnotationsSnapshot);
+			const annotationsByImageRef = (0, react.useRef)(annotationsByImage);
+			const [selected, setSelected] = (0, react.useState)();
+			const [focusNote, setFocusNote] = (0, react.useState)();
+			const [copied, setCopied] = (0, react.useState)(false);
+			const rootRef = (0, react.useRef)(null);
+			const stageRef = (0, react.useRef)(null);
+			const surfaceRef = (0, react.useRef)(null);
+			const imageRef = (0, react.useRef)(null);
+			const pointersRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+			const gestureRef = (0, react.useRef)();
+			const transformRef = (0, react.useRef)(transform);
+			transformRef.current = transform;
+			annotationsByImageRef.current = annotationsByImage;
+			(0, react.useEffect)(() => {
+				if (request === void 0) return;
+				setIndex(request.index);
+				setTransform({
+					zoom: 1,
+					x: 0,
+					y: 0
+				});
+				setDragging(false);
+				setAnnotating(false);
+				setSelected(void 0);
+				setCopied(false);
+			}, [request?.revision]);
+			const item = request?.items[index];
+			const annotations = item === void 0 ? [] : annotationsByImage[item.id] ?? [];
+			const setAnnotations = (0, react.useCallback)((update) => {
+				if (item === void 0) return;
+				const previous = annotationsByImageRef.current[item.id] ?? [];
+				const next = typeof update === "function" ? update(previous) : update;
+				const snapshot = {
+					...annotationsByImageRef.current,
+					[item.id]: next
+				};
+				annotationsByImageRef.current = snapshot;
+				service.setAnnotations(item.id, next);
+				setAnnotationsByImage(snapshot);
+			}, [item?.id, service]);
+			const boundedPan = (0, react.useCallback)((zoom, x, y) => {
+				const stage = stageRef.current;
+				const surface = surfaceRef.current;
+				if (stage === null || surface === null || zoom <= 1) return {
+					x: 0,
+					y: 0
+				};
+				const limitX = Math.max(0, (surface.offsetWidth * zoom - stage.clientWidth) / 2) + 28;
+				const limitY = Math.max(0, (surface.offsetHeight * zoom - stage.clientHeight) / 2) + 28;
+				return {
+					x: clamp(x, -limitX, limitX),
+					y: clamp(y, -limitY, limitY)
+				};
+			}, []);
+			const setZoomAt = (0, react.useCallback)((nextZoom, clientX, clientY) => {
+				const stage = stageRef.current;
+				if (stage === null) return;
+				setTransform((current) => {
+					const next = clamp(nextZoom, .5, 8);
+					const box = stage.getBoundingClientRect();
+					const px = clientX - box.left - box.width / 2;
+					const py = clientY - box.top - box.height / 2;
+					const ratio = next / current.zoom;
+					return {
+						zoom: next,
+						...boundedPan(next, px - (px - current.x) * ratio, py - (py - current.y) * ratio)
+					};
+				});
+			}, [boundedPan]);
+			const fit = (0, react.useCallback)(() => {
+				setTransform({
+					zoom: 1,
+					x: 0,
+					y: 0
+				});
+			}, []);
+			const actual = (0, react.useCallback)(() => {
+				const image = imageRef.current;
+				const surface = surfaceRef.current;
+				if (image === null || surface === null || image.naturalWidth === 0) return;
+				const zoom = clamp(image.naturalWidth / Math.max(1, surface.offsetWidth), 1, 8);
+				setTransform({
+					zoom,
+					x: 0,
+					y: 0
+				});
+			}, []);
+			(0, react.useEffect)(() => {
+				if (request === void 0) return void 0;
+				const previousOverflow = document.body.style.overflow;
+				document.body.style.overflow = "hidden";
+				rootRef.current?.focus();
+				const onKeyDown = (event) => {
+					if (event.key === "Escape") {
+						event.preventDefault();
+						if (event.target instanceof Element && event.target.closest(".dcsiv-inline-note") !== null) {
+							setSelected(void 0);
+							return;
+						}
+						service.close();
+						return;
+					}
+					const editing = event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement;
+					if (!editing && event.key === "ArrowLeft" && request.items.length > 1) {
+						event.preventDefault();
+						setIndex((value) => (value - 1 + request.items.length) % request.items.length);
+					} else if (!editing && event.key === "ArrowRight" && request.items.length > 1) {
+						event.preventDefault();
+						setIndex((value) => (value + 1) % request.items.length);
+					} else if (!editing && (event.key === "+" || event.key === "=")) {
+						event.preventDefault();
+						const box = stageRef.current?.getBoundingClientRect();
+						if (box) setZoomAt(transformRef.current.zoom * 1.2, box.left + box.width / 2, box.top + box.height / 2);
+					} else if (!editing && event.key === "-") {
+						event.preventDefault();
+						const box = stageRef.current?.getBoundingClientRect();
+						if (box) setZoomAt(transformRef.current.zoom / 1.2, box.left + box.width / 2, box.top + box.height / 2);
+					} else if (!editing && event.key.toLowerCase() === "f") {
+						event.preventDefault();
+						fit();
+					} else if (event.key === "Tab") {
+						const controls = [...rootRef.current.querySelectorAll("button:not(:disabled),a[href],input:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex=\"-1\"])")];
+						const first = controls[0];
+						const last = controls.at(-1);
+						if (event.shiftKey && document.activeElement === first) {
+							event.preventDefault();
+							last?.focus();
+						} else if (!event.shiftKey && document.activeElement === last) {
+							event.preventDefault();
+							first?.focus();
+						}
+					}
+				};
+				document.addEventListener("keydown", onKeyDown);
+				return () => {
+					document.body.style.overflow = previousOverflow;
+					document.removeEventListener("keydown", onKeyDown);
+				};
+			}, [
+				request,
+				service,
+				fit,
+				setZoomAt
+			]);
+			(0, react.useEffect)(() => {
+				if (focusNote === void 0) return;
+				(rootRef.current?.querySelector(`[data-note-id="${CSS.escape(focusNote)}"] textarea`))?.focus();
+				setFocusNote(void 0);
+			}, [
+				focusNote,
+				selected,
+				annotations.length
+			]);
+			(0, react.useEffect)(() => {
+				setTransform({
+					zoom: 1,
+					x: 0,
+					y: 0
+				});
+				setDragging(false);
+				setAnnotating(false);
+				setSelected(void 0);
+			}, [item?.id]);
+			const onWheel = (0, react.useCallback)((event) => {
+				event.preventDefault();
+				setZoomAt(transformRef.current.zoom * Math.exp(-event.deltaY * .0015), event.clientX, event.clientY);
+			}, [setZoomAt]);
+			(0, react.useEffect)(() => {
+				const stage = stageRef.current;
+				if (stage === null || request === void 0) return void 0;
+				stage.addEventListener("wheel", onWheel, { passive: false });
+				return () => stage.removeEventListener("wheel", onWheel);
+			}, [onWheel, request]);
+			const onPointerDown = (event) => {
+				const target = event.target;
+				if (event.button !== 0 || annotating || target instanceof Element && target.closest("button,textarea,input,a,select,[contenteditable=true]") !== null) return;
+				pointersRef.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				if (pointersRef.current.size === 2) {
+					event.currentTarget.setPointerCapture(event.pointerId);
+					const [a, b] = [...pointersRef.current.values()];
+					gestureRef.current = {
+						kind: "pinch",
+						distance: Math.hypot(a.x - b.x, a.y - b.y),
+						transform
+					};
+				} else if (!annotating && transform.zoom > 1) {
+					event.currentTarget.setPointerCapture(event.pointerId);
+					gestureRef.current = {
+						kind: "pan",
+						x: event.clientX,
+						y: event.clientY,
+						transform
+					};
+					setDragging(true);
+				}
+			};
+			const onPointerMove = (event) => {
+				if (!pointersRef.current.has(event.pointerId)) return;
+				pointersRef.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				const gesture = gestureRef.current;
+				if (gesture?.kind === "pinch" && pointersRef.current.size >= 2) {
+					const [a, b] = [...pointersRef.current.values()];
+					const distance = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+					setZoomAt(gesture.transform.zoom * distance / Math.max(1, gesture.distance), (a.x + b.x) / 2, (a.y + b.y) / 2);
+				} else if (gesture?.kind === "pan") {
+					const pan = boundedPan(gesture.transform.zoom, gesture.transform.x + event.clientX - gesture.x, gesture.transform.y + event.clientY - gesture.y);
+					setTransform({
+						zoom: gesture.transform.zoom,
+						...pan
+					});
+				}
+			};
+			const endPointer = (event) => {
+				pointersRef.current.delete(event.pointerId);
+				if (pointersRef.current.size === 0) {
+					gestureRef.current = void 0;
+					setDragging(false);
+				}
+			};
+			const addAnnotation = (event) => {
+				if (!annotating || event.target.closest(".dcsiv-annotation")) return;
+				const bounds = surfaceRef.current?.getBoundingClientRect();
+				if (bounds === void 0) return;
+				const annotation = {
+					id: crypto.randomUUID(),
+					x: clamp((event.clientX - bounds.left) / bounds.width, 0, 1),
+					y: clamp((event.clientY - bounds.top) / bounds.height, 0, 1),
+					note: ""
+				};
+				setAnnotations((current) => [...current, annotation]);
+				setAnnotating(false);
+				setSelected(annotation.id);
+				setFocusNote(annotation.id);
+			};
+			const copyNotes = async () => {
+				const text = noteText(annotations, t);
+				if (text === "" || typeof navigator?.clipboard?.writeText !== "function") return;
+				try {
+					await navigator.clipboard.writeText(text);
+					setCopied(true);
+					window.setTimeout(() => {
+						setCopied(false);
+					}, 1200);
+				} catch {
+					setCopied(false);
+				}
+			};
+			if (request === void 0 || item === void 0) return null;
+			const meta = [item.width && item.height ? `${item.width} × ${item.height}` : void 0, bytesLabel(item.bytes)].filter(Boolean).join(" · ");
+			const showCounter = request.items.length > 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: rootRef,
+				className: "dcsiv-root",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": t("imagePreview"),
+				tabIndex: -1,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dcsiv-title dcsiv-sr-only",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: item.name }), meta !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: meta }) : null]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+						className: "dcsiv-topbar",
+						role: "toolbar",
+						"aria-label": t("imagePreview"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dcsiv-actions",
+							children: [
+								request.annotations ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dcsiv-button",
+									"data-active": annotating,
+									"aria-label": annotating ? t("imageAnnotateCancel") : t("imageAnnotate"),
+									"aria-pressed": annotating,
+									onClick: () => setAnnotating((value) => !value),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconEditOutline16, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dcsiv-label",
+										children: annotating ? t("imageAnnotateCancel") : t("imageAnnotate")
+									})]
+								}) : null,
+								annotations.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dcsiv-button",
+									"data-active": selected !== void 0,
+									onClick: () => {
+										const first = annotations[0];
+										setSelected((current) => current === void 0 ? first.id : void 0);
+										if (selected === void 0) setFocusNote(first.id);
+									},
+									children: [
+										annotations.length,
+										" ",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dcsiv-label",
+											children: t("imageRegions")
+										})
+									]
+								}) : null,
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dcsiv-button",
+									"aria-label": t("imageFit"),
+									onClick: fit,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconFullscreenOutline16, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dcsiv-label",
+										children: t("imageFit")
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dcsiv-button",
+									onClick: actual,
+									children: t("imageActual")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "dcsiv-zoom",
+									children: [Math.round(transform.zoom * 100), "%"]
+								}),
+								item.download === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+									className: "dcsiv-download",
+									href: item.src,
+									download: downloadName(item.name),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutline16, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dcsiv-label",
+										children: t("imageDownload")
+									})]
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewerDownload, {
+									download: item.download,
+									item,
+									t
+								}),
+								item.actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewerAction, {
+									action,
+									annotations,
+									item,
+									service,
+									t
+								}, action.id))
+							]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dcsiv-close-floating",
+						"aria-label": t("imageClosePreview"),
+						onClick: () => service.close(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCloseOutline16, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dcsiv-workspace",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+							ref: stageRef,
+							className: "dcsiv-stage",
+							"data-dragging": dragging,
+							"data-annotating": annotating,
+							onClick: (event) => {
+								if (event.target === event.currentTarget && !annotating && transform.zoom === 1) service.close();
+							},
+							onPointerDown,
+							onPointerMove,
+							onPointerUp: endPointer,
+							onPointerCancel: endPointer,
+							onDoubleClick: () => {
+								if (transform.zoom === 1) actual();
+								else fit();
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								ref: surfaceRef,
+								className: "dcsiv-surface",
+								onClick: addAnnotation,
+								style: { transform: `translate3d(${transform.x}px,${transform.y}px,0) scale(${transform.zoom})` },
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									ref: imageRef,
+									className: "dcsiv-image",
+									src: item.src,
+									alt: item.name,
+									draggable: "false"
+								}), annotations.map((annotation, position) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dcsiv-annotation",
+									"data-x": annotation.x < .38 ? "right" : annotation.x > .62 ? "left" : "center",
+									"data-y": annotation.y < .28 ? "down" : "up",
+									style: {
+										left: `${annotation.x * 100}%`,
+										top: `${annotation.y * 100}%`,
+										transform: `translate(-50%,-50%) scale(${1 / transform.zoom})`
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dcsiv-pin",
+										"data-active": selected === annotation.id,
+										"aria-label": fill$1(t("imageAnnotation"), { value: position + 1 }),
+										onClick: (event) => {
+											event.stopPropagation();
+											const opening = selected !== annotation.id;
+											setSelected(opening ? annotation.id : void 0);
+											if (opening) setFocusNote(annotation.id);
+										},
+										children: position + 1
+									}), selected === annotation.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "dcsiv-inline-note",
+										"data-note-id": annotation.id,
+										onClick: (event) => event.stopPropagation(),
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "dcsiv-inline-index",
+												children: position + 1
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+												value: annotation.note,
+												rows: 1,
+												"aria-label": fill$1(t("imageAnnotation"), { value: position + 1 }),
+												placeholder: t("imageAnnotationPlaceholder"),
+												onChange: (event) => {
+													const note = event.target.value;
+													setAnnotations((current) => current.map((entry) => entry.id === annotation.id ? {
+														...entry,
+														note
+													} : entry));
+												},
+												onKeyDown: (event) => {
+													if (event.key === "Enter" && !event.shiftKey || event.key === "Escape") {
+														event.preventDefault();
+														event.stopPropagation();
+														event.nativeEvent?.stopImmediatePropagation?.();
+														setSelected(void 0);
+													}
+												}
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												className: "dcsiv-note-remove",
+												"aria-label": t("imageRemoveAnnotation"),
+												onClick: (event) => {
+													event.stopPropagation();
+													setAnnotations((current) => current.filter((entry) => entry.id !== annotation.id));
+													setSelected(void 0);
+												},
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCloseOutline16, {})
+											})
+										]
+									}) : null]
+								}, annotation.id))]
+							}), showCounter ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dcsiv-button dcsiv-icon-only dcsiv-nav dcsiv-prev",
+									"aria-label": t("imagePrevious"),
+									onClick: (event) => {
+										event.stopPropagation();
+										setIndex((value) => (value - 1 + request.items.length) % request.items.length);
+									},
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronLeftOutline14, {})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dcsiv-button dcsiv-icon-only dcsiv-nav dcsiv-next",
+									"aria-label": t("imageNext"),
+									onClick: (event) => {
+										event.stopPropagation();
+										setIndex((value) => (value + 1) % request.items.length);
+									},
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutline14, {})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "dcsiv-counter",
+									children: [
+										index + 1,
+										" / ",
+										request.items.length
+									]
+								})
+							] }) : annotating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dcsiv-hint",
+								children: t("imageAnnotateHint")
+							}) : transform.zoom === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dcsiv-hint",
+								children: t("imageZoomHint")
+							}) : null]
+						}), annotations.some((annotation) => annotation.note.trim() !== "") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "dcsiv-copy-notes",
+							onClick: () => {
+								copyNotes();
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCopyOutline16, {}), copied ? t("imageCopied") : t("imageCopyNotes")]
+						}) : null]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/subscription-image-viewer.js
+		const boundedNumber = (value, fallback) => Number.isFinite(value) && value > 0 ? value : fallback;
+		const downloadOf = (value) => typeof value?.onInvoke === "function" ? {
+			pendingLabel: typeof value.pendingLabel === "string" && value.pendingLabel !== "" ? value.pendingLabel : void 0,
+			errorLabel: typeof value.errorLabel === "string" && value.errorLabel !== "" ? value.errorLabel : void 0,
+			onInvoke: value.onInvoke
+		} : void 0;
+		const actionsOf = (value) => Array.isArray(value) ? value.flatMap((action, position) => {
+			if (typeof action?.onInvoke !== "function" || typeof action?.label !== "string" || action.label.trim() === "") return [];
+			return [{
+				id: typeof action.id === "string" && action.id !== "" ? action.id : `action-${position + 1}`,
+				label: action.label,
+				pendingLabel: typeof action.pendingLabel === "string" && action.pendingLabel !== "" ? action.pendingLabel : action.label,
+				errorLabel: typeof action.errorLabel === "string" && action.errorLabel !== "" ? action.errorLabel : action.label,
+				closeOnSuccess: action.closeOnSuccess === true,
+				onInvoke: action.onInvoke
+			}];
+		}) : [];
+		function normalizeSubscriptionViewerRequest(request) {
+			const items = (Array.isArray(request?.items) ? request.items : []).flatMap((item, position) => {
+				if (typeof item?.src !== "string" || item.src === "") return [];
+				return [{
+					id: typeof item.id === "string" && item.id !== "" ? item.id : `image-${position + 1}`,
+					src: item.src,
+					name: typeof item.name === "string" && item.name !== "" ? item.name : `Image ${position + 1}`,
+					width: boundedNumber(item.width, void 0),
+					height: boundedNumber(item.height, void 0),
+					bytes: boundedNumber(item.bytes, void 0),
+					download: downloadOf(item.download),
+					actions: actionsOf(item.actions)
+				}];
+			});
+			if (items.length === 0) return void 0;
+			const requestedIndex = Number.isInteger(request?.index) ? request.index : 0;
+			return {
+				items,
+				index: Math.max(0, Math.min(items.length - 1, requestedIndex)),
+				opener: typeof HTMLElement !== "undefined" && request?.opener instanceof HTMLElement ? request.opener : void 0,
+				source: typeof request?.source === "string" ? request.source : "dsh-codex-subscription",
+				annotations: request?.annotations !== false
+			};
+		}
+		const copyAnnotations = (annotations) => annotations.map((annotation) => ({ ...annotation }));
+		/**
+		* Local image viewer state for subscription-generated images.
+		*
+		* This deliberately stays private to the subscription client. An installed
+		* native image viewer can take the request first, while this service provides
+		* the same baseline experience when that optional plugin is absent.
+		*/
+		var SubscriptionImageViewerService = class {
+			#listeners = /* @__PURE__ */ new Set();
+			#revision = 0;
+			#snapshot;
+			#annotationsByImage = /* @__PURE__ */ new Map();
+			constructor() {
+				this.subscribe = (listener) => {
+					this.#listeners.add(listener);
+					return () => {
+						this.#listeners.delete(listener);
+					};
+				};
+				this.getSnapshot = () => this.#snapshot;
+				this.getAnnotationsSnapshot = () => Object.fromEntries([...this.#annotationsByImage].map(([id, annotations]) => [id, copyAnnotations(annotations)]));
+			}
+			setAnnotations(imageId, annotations) {
+				if (typeof imageId !== "string" || imageId === "" || !Array.isArray(annotations)) return;
+				if (annotations.length === 0) this.#annotationsByImage.delete(imageId);
+				else this.#annotationsByImage.set(imageId, copyAnnotations(annotations));
+			}
+			open(request) {
+				const normalized = normalizeSubscriptionViewerRequest(request);
+				if (normalized === void 0) return false;
+				this.#revision += 1;
+				this.#snapshot = {
+					...normalized,
+					revision: this.#revision
+				};
+				this.#emit();
+				return true;
+			}
+			close() {
+				if (this.#snapshot === void 0) return;
+				const opener = this.#snapshot.opener;
+				this.#snapshot = void 0;
+				this.#emit();
+				if (typeof window === "undefined") opener?.focus();
+				else {
+					const focus = () => {
+						opener?.focus();
+					};
+					if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(focus);
+					else focus();
+				}
+			}
+			#emit() {
+				for (const listener of this.#listeners) listener();
+			}
+		};
+		//#endregion
 		//#region src/settings-contract.js
 		const SETTINGS_NAMESPACE = "codex-subscription";
 		const QUICK_QUOTA_MODE_FIELD = "quickQuotaMode";
@@ -371,6 +1069,7 @@ window.__ModuleLoader__.load({
 			"settingsScope",
 			"modelDirectories",
 			"conversation",
+			"uiConversation",
 			"sessions"
 		];
 		const NS = "settings.codexSubscription";
@@ -552,9 +1251,17 @@ window.__ModuleLoader__.load({
 			imageZoomIn: "放大",
 			imageFit: "适合窗口",
 			imageAnnotate: "标注部位",
+			imageAnnotateCancel: "取消标注",
 			imageAnnotateHint: "点击图片添加编号标注",
 			imageAnnotation: "标注 {value}",
 			imageAnnotationPlaceholder: "描述这个部位要修改什么",
+			imageRegions: "区域备注",
+			imageCopyNotes: "复制备注",
+			imageCopied: "已复制",
+			imagePrevious: "上一张图片",
+			imageNext: "下一张图片",
+			imageZoomHint: "滚轮缩放 · 拖动查看 · 双击切换原始大小",
+			imageActual: "原始大小",
 			imageEditPrompt: "描述你想怎样修改这张图",
 			imageEditDefault: "编辑这张图片。",
 			imageRegionNotes: "部位修改：",
@@ -737,9 +1444,17 @@ window.__ModuleLoader__.load({
 			imageZoomIn: "Zoom in",
 			imageFit: "Fit to window",
 			imageAnnotate: "Annotate",
+			imageAnnotateCancel: "Cancel marking",
 			imageAnnotateHint: "Click the image to add a numbered note",
 			imageAnnotation: "Note {value}",
 			imageAnnotationPlaceholder: "Describe what should change in this area",
+			imageRegions: "Region notes",
+			imageCopyNotes: "Copy notes",
+			imageCopied: "Copied",
+			imagePrevious: "Previous image",
+			imageNext: "Next image",
+			imageZoomHint: "Wheel to zoom · drag to pan · double-click for 100%",
+			imageActual: "100%",
 			imageEditPrompt: "Describe how you want to change this image",
 			imageEditDefault: "Edit this image.",
 			imageRegionNotes: "Region changes:",
@@ -792,19 +1507,6 @@ window.__ModuleLoader__.load({
 @container (max-width:560px){.codexSubscriptionCreditRows{grid-template-columns:1fr}}
 @container (max-width:480px){.codexSubscriptionAccountRow,.codexSubscriptionSectionHead{align-items:flex-start;flex-direction:column}.codexSubscriptionActions{width:100%}.codexSubscriptionSearchChoices{grid-template-columns:1fr}}
 @media(max-width:640px){.codexSubscriptionCard{padding:14px}}
-`;
-		const IMAGE_STYLE = String.raw`
-.codexGeneratedImageLightbox{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--dsw-alias-bg-base,#111);color:var(--dsw-alias-label-primary);outline:0}.codexGeneratedImageTopbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;padding:8px 14px;border-bottom:1px solid var(--dsw-alias-border-l2);background:color-mix(in srgb,var(--dsw-alias-bg-base,#111) 92%,transparent);backdrop-filter:blur(18px)}.codexGeneratedImageTopbar>div:first-child{display:flex;min-width:0;flex-direction:column}.codexGeneratedImageTopbar strong{overflow:hidden;font-size:13px;font-weight:600;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.codexGeneratedImageTopbar small{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:17px}.codexGeneratedImageActions{display:flex;align-items:center;gap:6px}.codexGeneratedImageActions button,.codexGeneratedImageActions a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;padding:0 10px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;text-decoration:none;cursor:pointer}.codexGeneratedImageActions button:hover,.codexGeneratedImageActions a:hover,.codexGeneratedImageActions button.is-active{background:var(--dsw-alias-interactive-bg-hover)}.codexGeneratedImageActions button:focus-visible,.codexGeneratedImageActions a:focus-visible{outline:2px solid var(--dsw-alias-border-l3);outline-offset:1px}.codexGeneratedImageActions button:disabled{opacity:.4;cursor:default}.codexGeneratedImageActions>span{min-width:38px;color:var(--dsw-alias-label-tertiary);font-size:11px;text-align:center}.codexGeneratedImageClose{font-size:20px!important}.codexGeneratedImageCanvas{position:relative;display:grid;place-items:center;min-height:0;overflow:auto;padding:24px;background:var(--dsw-alias-bg-base,#111)}.codexGeneratedImageSurface{position:relative;display:inline-flex;max-width:calc(100vw - 48px);max-height:calc(100vh - 150px);transform-origin:center;transition:transform 120ms ease}.codexGeneratedImageSurface img{display:block;max-width:100%;max-height:calc(100vh - 150px);border-radius:12px;object-fit:contain}.codexGeneratedImageCanvas.is-annotating .codexGeneratedImageSurface{cursor:crosshair}.codexGeneratedImagePin{position:absolute;display:grid;place-items:center;width:24px;height:24px;padding:0;border:2px solid white;border-radius:50%;background:var(--dsw-alias-label-primary);box-shadow:0 1px 4px rgba(0,0,0,.35);color:var(--dsw-alias-bg-base,#111);font:inherit;font-size:11px;font-weight:700;transform:translate(-50%,-50%);cursor:pointer}.codexGeneratedImagePin.is-active{background:var(--dsw-alias-state-business-primary,#3964fe);color:white}.codexGeneratedImageAnnotateHint{position:absolute;bottom:14px;left:50%;padding:6px 10px;border-radius:14px;background:color-mix(in srgb,var(--dsw-alias-bg-layer-3) 90%,transparent);box-shadow:var(--dsw-shadow-lv2);color:var(--dsw-alias-label-secondary);font-size:11px;transform:translateX(-50%)}@media(max-width:760px){.codexGeneratedImageTopbar{align-items:flex-start;flex-direction:column}.codexGeneratedImageActions{width:100%;overflow-x:auto}.codexGeneratedImageActions>span{display:none}.codexGeneratedImageCanvas{padding:12px}.codexGeneratedImageSurface{max-width:calc(100vw - 24px);max-height:calc(100vh - 180px)}.codexGeneratedImageSurface img{max-height:calc(100vh - 180px)}}
-`;
-		const IMAGE_LAYOUT_STYLE = String.raw`
-.codexGeneratedImageWorkspace{display:grid;min-height:0;grid-template-columns:minmax(0,1fr)}
-.codexGeneratedImageWorkspace.has-comments{grid-template-columns:minmax(0,1fr) 296px}
-.codexGeneratedImageComments{display:flex;min-width:0;flex-direction:column;gap:12px;overflow:auto;padding:18px 14px;border-left:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-base))}
-.codexGeneratedImageComments>header{display:flex;flex-direction:column;gap:2px}.codexGeneratedImageComments>header strong{font-size:13px;font-weight:600;line-height:20px}.codexGeneratedImageComments>header small{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:17px}
-.codexGeneratedImageCommentList{display:flex;flex-direction:column;gap:8px}.codexGeneratedImageCommentList article{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:start;gap:7px;padding:9px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-3)}.codexGeneratedImageCommentList article.is-active{border-color:var(--dsw-alias-state-business-primary,#3964fe)}
-.codexGeneratedImageCommentList article>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-base,#111);font-size:10px;font-weight:700}.codexGeneratedImageCommentList textarea{box-sizing:border-box;width:100%;min-height:64px;resize:vertical;border:0;outline:0;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:12px;line-height:18px}.codexGeneratedImageCommentList textarea::placeholder{color:var(--dsw-alias-label-dimmed)}
-.codexGeneratedImageCommentList article>button{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:17px;cursor:pointer}.codexGeneratedImageCommentList article>button:hover{background:var(--dsw-alias-interactive-bg-hover)}
-@media(max-width:760px){.codexGeneratedImageWorkspace.has-comments{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(118px,34vh)}.codexGeneratedImageComments{border-top:1px solid var(--dsw-alias-border-l2);border-left:0;padding:10px 12px}}
 `;
 		const unwrap = (response) => {
 			if (!response?.ok) throw new Error(response?.error?.message ?? "Codex RPC failed");
@@ -839,7 +1541,6 @@ window.__ModuleLoader__.load({
 			if (cleaned === "") return fallback;
 			return cleaned.toLowerCase().endsWith(".png") ? cleaned : `${cleaned}.png`;
 		};
-		const imageByteSize = (bytes) => bytes < 1024 * 1024 ? `${Math.max(.1, bytes / 1024).toLocaleString(void 0, { maximumFractionDigits: 1 })} KB` : `${(bytes / 1024 / 1024).toLocaleString(void 0, { maximumFractionDigits: 1 })} MB`;
 		const originalRefMatches = (left, right) => left.assetId === right.assetId && left.mediaType === right.mediaType && left.bytes === right.bytes && left.width === right.width && left.height === right.height && left.name === right.name && left.sha256 === right.sha256;
 		async function sha256Hex(data) {
 			const value = await crypto.subtle.digest("SHA-256", data);
@@ -899,25 +1600,16 @@ window.__ModuleLoader__.load({
 				URL.revokeObjectURL(url);
 			}
 		}
-		function CodexGeneratedImage({ attachment, original, rpc, sessionId, loadImage, attachForEdit, getImageViewer, t }) {
+		function CodexGeneratedImage({ attachment, original, rpc, sessionId, loadImage, attachForEdit, getImageViewer, getInternalImageViewer, t }) {
 			const [attempt, setAttempt] = (0, react.useState)(0);
 			const [error, setError] = (0, react.useState)(false);
-			const [open, setOpen] = (0, react.useState)(false);
 			const [src, setSrc] = (0, react.useState)();
-			const [zoom, setZoom] = (0, react.useState)(1);
-			const [annotationMode, setAnnotationMode] = (0, react.useState)(false);
-			const [annotations, setAnnotations] = (0, react.useState)([]);
-			const [selectedAnnotation, setSelectedAnnotation] = (0, react.useState)();
-			const [editBusy, setEditBusy] = (0, react.useState)(false);
-			const [editError, setEditError] = (0, react.useState)(false);
-			const [downloadState, setDownloadState] = (0, react.useState)("idle");
 			const triggerRef = (0, react.useRef)(null);
-			const dialogRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				let live = true;
 				setError(false);
 				setSrc(void 0);
-				loadImage(attachment).then((value) => {
+				Promise.resolve().then(() => loadImage(attachment)).then((value) => {
 					if (live) setSrc(value);
 				}).catch(() => {
 					if (live) setError(true);
@@ -930,100 +1622,15 @@ window.__ModuleLoader__.load({
 				loadImage,
 				attempt
 			]);
-			const close = () => {
-				setOpen(false);
-				window.requestAnimationFrame(() => triggerRef.current?.focus());
-			};
-			(0, react.useEffect)(() => {
-				if (!open) return void 0;
-				const previousOverflow = document.body.style.overflow;
-				document.body.style.overflow = "hidden";
-				dialogRef.current?.focus();
-				const keydown = (event) => {
-					if (event.key === "Escape") {
-						event.preventDefault();
-						close();
-						return;
-					}
-					if (event.key === "Tab") {
-						const focusable = [...dialogRef.current.querySelectorAll("button:not(:disabled),a[href],input:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex=\"-1\"])")];
-						if (focusable.length === 0) return;
-						const first = focusable[0];
-						const last = focusable.at(-1);
-						if (event.shiftKey && document.activeElement === first) {
-							event.preventDefault();
-							last.focus();
-						} else if (!event.shiftKey && document.activeElement === last) {
-							event.preventDefault();
-							first.focus();
-						}
-					}
-				};
-				document.addEventListener("keydown", keydown);
-				return () => {
-					document.body.style.overflow = previousOverflow;
-					document.removeEventListener("keydown", keydown);
-				};
-			}, [open]);
 			const label = attachment.name ?? t("imageLabel");
 			const downloadName = imageDownloadName(attachment);
-			const previewMeta = attachment.width + " × " + attachment.height + " · " + imageByteSize(attachment.bytes);
-			const imageMeta = original === void 0 ? previewMeta : original.width + " × " + original.height + " · " + imageByteSize(original.bytes) + " · " + t("imagePreviewShort") + " " + previewMeta;
-			const addAnnotation = (event) => {
-				if (!annotationMode || event.target.closest(".codexGeneratedImagePin")) return;
-				const bounds = event.currentTarget.getBoundingClientRect();
-				const annotation = {
-					id: crypto.randomUUID(),
-					x: Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width)),
-					y: Math.max(0, Math.min(1, (event.clientY - bounds.top) / bounds.height)),
-					note: ""
-				};
-				setAnnotations((value) => [...value, annotation]);
-				setSelectedAnnotation(annotation.id);
-			};
-			const continueEditing = async () => {
-				if (editBusy || src === void 0) return;
-				setEditBusy(true);
-				setEditError(false);
-				try {
-					await attachForEdit(src, downloadName, buildImageEditDraft({
-						annotations,
-						translate: t
-					}));
-					close();
-				} catch {
-					setEditError(true);
-				} finally {
-					setEditBusy(false);
-				}
-			};
 			const downloadOriginal = async () => {
-				if (downloadState === "pending" || original === void 0) return;
-				setDownloadState("pending");
-				try {
-					triggerBlobDownload(await readOriginalImage(rpc, sessionId, original), original.mediaType, original.name);
-					setDownloadState("idle");
-				} catch {
-					setDownloadState("failed");
-					throw new Error("original image download failed");
-				}
+				if (original === void 0) return;
+				triggerBlobDownload(await readOriginalImage(rpc, sessionId, original), original.mediaType, original.name);
 			};
 			const openImage = () => {
 				if (src === void 0) return;
-				const viewer = getImageViewer?.();
-				const actions = [];
-				actions.push({
-					id: "continue-editing",
-					label: t("imageEdit"),
-					pendingLabel: t("imageEditPreparing"),
-					errorLabel: t("imageEditFailed"),
-					closeOnSuccess: true,
-					onInvoke: ({ annotations: nextAnnotations }) => attachForEdit(src, downloadName, buildImageEditDraft({
-						annotations: nextAnnotations,
-						translate: t
-					}))
-				});
-				if (viewer?.open?.({
+				const request = {
 					items: [{
 						id: attachment.attachmentId ?? downloadName,
 						src,
@@ -1036,14 +1643,24 @@ window.__ModuleLoader__.load({
 							errorLabel: t("imageDownloadFailed"),
 							onInvoke: downloadOriginal
 						},
-						actions
+						actions: [{
+							id: "continue-editing",
+							label: t("imageEdit"),
+							pendingLabel: t("imageEditPreparing"),
+							errorLabel: t("imageEditFailed"),
+							closeOnSuccess: true,
+							onInvoke: ({ annotations }) => attachForEdit(src, downloadName, buildImageEditDraft({
+								annotations,
+								translate: t
+							}))
+						}]
 					}],
 					opener: triggerRef.current,
 					source: "codex-generated",
 					annotations: true
-				}) === true) return;
-				setZoom(1);
-				setOpen(true);
+				};
+				if ((getImageViewer?.())?.open?.(request) === true) return;
+				getInternalImageViewer?.()?.open?.(request);
 			};
 			if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
@@ -1051,151 +1668,7 @@ window.__ModuleLoader__.load({
 				onClick: () => setAttempt((value) => value + 1),
 				children: t("imageLoadFailed")
 			});
-			const lightbox = !open || src === void 0 ? null : (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				ref: dialogRef,
-				className: "codexGeneratedImageLightbox",
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-label": t("imagePreview"),
-				tabIndex: -1,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-					className: "codexGeneratedImageTopbar",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: imageMeta })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexGeneratedImageActions",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: annotationMode ? "is-active" : "",
-								"aria-pressed": annotationMode,
-								onClick: () => setAnnotationMode((value) => !value),
-								children: t("imageAnnotate")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								"aria-label": t("imageZoomOut"),
-								disabled: zoom <= .5,
-								onClick: () => setZoom((value) => Math.max(.5, value - .25)),
-								children: "−"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [Math.round(zoom * 100), "%"] }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								"aria-label": t("imageZoomIn"),
-								disabled: zoom >= 3,
-								onClick: () => setZoom((value) => Math.min(3, value + .25)),
-								children: "+"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								onClick: () => setZoom(1),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconFullscreenOutline16, { "aria-hidden": "true" }), t("imageFit")]
-							}),
-							original === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-								href: src,
-								download: downloadName,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutline16, { "aria-hidden": "true" }), t("imageDownload")]
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								disabled: downloadState === "pending",
-								onClick: () => {
-									downloadOriginal().catch(() => void 0);
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutline16, { "aria-hidden": "true" }), downloadState === "pending" ? t("imageDownloadPreparing") : downloadState === "failed" ? t("imageDownloadFailed") : t("imageDownload")]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								disabled: editBusy,
-								onClick: () => {
-									continueEditing();
-								},
-								children: editBusy ? t("imageEditPreparing") : editError ? t("imageEditFailed") : t("imageEdit")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "codexGeneratedImageClose",
-								"aria-label": t("imageClosePreview"),
-								onClick: close,
-								children: "×"
-							})
-						]
-					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "codexGeneratedImageWorkspace " + (annotationMode || annotations.length > 0 ? "has-comments" : ""),
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
-						className: "codexGeneratedImageCanvas " + (annotationMode ? "is-annotating" : ""),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "codexGeneratedImageSurface",
-							onClick: addAnnotation,
-							style: { transform: "scale(" + zoom + ")" },
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-								src,
-								alt: label
-							}), annotations.map((annotation, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "codexGeneratedImagePin " + (annotation.id === selectedAnnotation ? "is-active" : ""),
-								"aria-label": fill(t("imageAnnotation"), { value: index + 1 }),
-								style: {
-									left: annotation.x * 100 + "%",
-									top: annotation.y * 100 + "%"
-								},
-								onClick: (event) => {
-									event.stopPropagation();
-									setSelectedAnnotation(annotation.id);
-								},
-								children: index + 1
-							}, annotation.id))]
-						}), annotationMode ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "codexGeneratedImageAnnotateHint",
-							children: t("imageAnnotateHint")
-						}) : null]
-					}), annotationMode || annotations.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-						className: "codexGeneratedImageComments",
-						"aria-label": t("imageAnnotate"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("imageAnnotate") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("imageAnnotateHint") })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "codexGeneratedImageCommentList",
-							children: annotations.map((annotation, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
-								className: annotation.id === selectedAnnotation ? "is-active" : "",
-								onClick: () => setSelectedAnnotation(annotation.id),
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: index + 1 }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-										value: annotation.note,
-										rows: 3,
-										"aria-label": fill(t("imageAnnotation"), { value: index + 1 }),
-										placeholder: t("imageAnnotationPlaceholder"),
-										onFocus: () => setSelectedAnnotation(annotation.id),
-										onChange: (event) => {
-											const note = event.target.value;
-											setAnnotations((value) => value.map((item) => item.id === annotation.id ? {
-												...item,
-												note
-											} : item));
-										},
-										onKeyDown: (event) => {
-											if (event.key === "Enter" && !event.shiftKey || event.key === "Escape") {
-												event.preventDefault();
-												event.stopPropagation();
-												setSelectedAnnotation(void 0);
-											}
-										}
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										"aria-label": t("imageRemoveAnnotation"),
-										onClick: (event) => {
-											event.stopPropagation();
-											setAnnotations((value) => value.filter((item) => item.id !== annotation.id));
-											if (selectedAnnotation === annotation.id) setSelectedAnnotation(void 0);
-										},
-										children: "×"
-									})
-								]
-							}, annotation.id))
-						})]
-					}) : null]
-				})]
-			}), document.body);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				ref: triggerRef,
 				type: "button",
 				className: "codexGeneratedImageFrame",
@@ -1206,9 +1679,9 @@ window.__ModuleLoader__.load({
 					src,
 					alt: label
 				})
-			}), lightbox] });
+			});
 		}
-		function CodexImageToolRow({ block, sessionId, rpc, loadImage, attachForEdit, getImageViewer, t }) {
+		function CodexImageToolRow({ block, sessionId, rpc, loadImage, attachForEdit, getImageViewer, getInternalImageViewer, t }) {
 			const settled = block?.kind === "tool-result";
 			const image = settled ? block.content.find((item) => item?.type === "image" && item.attachment !== void 0) : void 0;
 			const failed = settled && block.isError === true;
@@ -1251,6 +1724,7 @@ window.__ModuleLoader__.load({
 							loadImage,
 							attachForEdit,
 							getImageViewer,
+							getInternalImageViewer,
 							t
 						})
 					}),
@@ -2783,6 +3257,7 @@ window.__ModuleLoader__.load({
 			});
 		}
 		function apply(ctx) {
+			const imageViewer = new SubscriptionImageViewerService();
 			ctx.effect(() => ctx.locale.register(NS, {
 				zh,
 				en
@@ -2790,7 +3265,7 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => {
 				const tag = document.createElement("style");
 				tag.dataset.plugin = "dsh-codex-subscription";
-				tag.textContent = STYLE + IMAGE_STYLE + IMAGE_LAYOUT_STYLE;
+				tag.textContent = STYLE + SUBSCRIPTION_IMAGE_VIEWER_CSS;
 				document.head.append(tag);
 				return () => tag.remove();
 			}, "codex-subscription: style");
@@ -2807,6 +3282,15 @@ window.__ModuleLoader__.load({
 				};
 			}, "codex-subscription: preferences");
 			const t = ctx.locale.bind(NS);
+			ctx.slots.inject("shell.overlay", () => ctx.slots.register({
+				name: "shell.overlay",
+				id: "codex-subscription-image-viewer",
+				order: 20,
+				inject: () => ({
+					service: imageViewer,
+					t
+				})
+			}, SubscriptionImageViewerOverlay));
 			ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",
 				id: "codex-subscription",
@@ -2856,6 +3340,7 @@ window.__ModuleLoader__.load({
 			if (ctx.get("remote.session") === void 0) installDirectorySlots(ctx);
 			else ctx.inject(["remote.session"], installDirectorySlots);
 			const conversation = ctx.get("conversation");
+			const uiConversation = ctx.get("uiConversation");
 			ctx.slots.inject("tool.call.toolview", () => ctx.slots.register({
 				name: "tool.call.toolview",
 				key: "codex_image_generate",
@@ -2864,7 +3349,7 @@ window.__ModuleLoader__.load({
 					sessionId,
 					rpc: connection.rpc,
 					t,
-					loadImage: (attachment) => conversation.resolveImage(sessionId, attachment),
+					loadImage: (attachment) => uiConversation.imageUrl(sessionId, attachment),
 					getImageViewer: () => {
 						try {
 							return ctx.get("nativeImageViewer");
@@ -2872,6 +3357,7 @@ window.__ModuleLoader__.load({
 							return;
 						}
 					},
+					getInternalImageViewer: () => imageViewer,
 					attachForEdit: async (src, filename, draft) => {
 						const actx = sessions.scope(sessionId);
 						if (actx === void 0 || typeof conversation.createDraftImages !== "function" || conversation.input?.for === void 0) throw new Error("This DSH version does not provide the image composer bridge");