dsh-codex-subscription 2.1.0-beta.3 → 2.1.0-beta.5

package/lib/client.js

@@ -29,939 +29,970 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		react = __toESM(react, 1);
 		let react_jsx_runtime = require("react/jsx-runtime");
-		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 		let react_dom = require("react-dom");
-		//#region src/image-edit.js
-		const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
-		const validCoordinate = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
-		const cleanNote = (value) => typeof value === "string" ? value.trim() : "";
-		const coordinateError = (number) => {
-			const error = /* @__PURE__ */ new Error(`Annotation ${number} must have finite x and y coordinates between 0 and 1`);
-			error.code = "ANNOTATION_INVALID";
-			return error;
-		};
-		/**
-		* Validate the annotation contract shared by the draft builder and the
-		* reference-image renderer. Annotation numbers are their array positions so
-		* that they stay aligned with the pins shown to the user.
-		*/
-		function normalizeImageEditAnnotations(annotations, { requireNotes = false } = {}) {
-			if (!Array.isArray(annotations)) throw new TypeError("annotations must be an array");
-			return annotations.map((annotation, index) => {
-				const number = index + 1;
-				const note = cleanNote(annotation?.note);
-				if (requireNotes && note === "") {
-					const error = /* @__PURE__ */ new Error(`Annotation ${number} is missing a note; describe what should change`);
-					error.code = "ANNOTATION_INVALID";
-					throw error;
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		//#region src/sketch-curves.js
+		const cached = /* @__PURE__ */ new WeakMap();
+		const midpoint = (a, b) => ({
+			x: (a.x + b.x) / 2,
+			y: (a.y + b.y) / 2
+		});
+		function flattenSketchCurve(stroke, width, height) {
+			const previous = cached.get(stroke);
+			if (previous?.width === width && previous.height === height) return previous.points;
+			const controls = stroke.points.map((p) => ({
+				x: p.x * width,
+				y: p.y * height
+			})), points = [controls[0]];
+			const distance = (p, a, b) => {
+				const dx = b.x - a.x, dy = b.y - a.y, d = dx * dx + dy * dy;
+				const t = d ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / d)) : 0;
+				return Math.hypot(p.x - a.x - t * dx, p.y - a.y - t * dy);
+			};
+			const split = (a, b, c, d, depth) => {
+				if (depth === 10 || Math.max(distance(b, a, d), distance(c, a, d)) <= .5) {
+					points.push(d);
+					return;
 				}
-				if (!isRecord(annotation) || !validCoordinate(annotation.x) || !validCoordinate(annotation.y)) throw coordinateError(number);
-				return {
-					number,
-					x: annotation.x,
-					y: annotation.y,
-					note
-				};
-			});
-		}
-		const formatPercent = (value) => {
-			return `${Number((value * 100).toFixed(2))}%`;
-		};
-		const formatPixel = (value) => {
-			const rounded = Number(value.toFixed(2));
-			return String(rounded);
-		};
-		const withNames = (value, sourceName, referenceName) => String(value).replaceAll("{sourceName}", sourceName).replaceAll("{referenceName}", referenceName);
-		const positiveImageDimension = (value) => Number.isSafeInteger(value) && value > 0;
-		function buildImageEditDraft({ prompt = "", annotations = [], translate, width, height, sourceName = "source.png", referenceName = "annotated-reference.png" }) {
-			if (typeof translate !== "function") throw new TypeError("translate must be a function");
-			const base = typeof prompt === "string" && prompt.trim() !== "" ? prompt.trim() : translate("imageEditDefault");
-			if (!Array.isArray(annotations)) throw new TypeError("annotations must be an array");
-			if (annotations.length === 0) return base;
-			const hasWidth = width !== void 0;
-			if (hasWidth !== (height !== void 0) || hasWidth && (!positiveImageDimension(width) || !positiveImageDimension(height))) throw new Error("width and height must be positive integers when provided");
-			const normalized = normalizeImageEditAnnotations(annotations, { requireNotes: true });
-			const source = typeof sourceName === "string" && sourceName.trim() !== "" ? sourceName.trim() : "source.png";
-			const reference = typeof referenceName === "string" && referenceName.trim() !== "" ? referenceName.trim() : "annotated-reference.png";
-			const guide = withNames(translate("imageEditReferenceGuide"), source, reference);
-			const location = translate("imageEditLocation");
-			const notes = normalized.map(({ number, x, y, note }) => {
-				const pixels = hasWidth ? ` (pixel x=${formatPixel(x * Math.max(0, width - 1))} of ${width}, y=${formatPixel(y * Math.max(0, height - 1))} of ${height})` : "";
-				return `${number}. ${location}: x=${formatPercent(x)} (normalized ${x}), y=${formatPercent(y)} (normalized ${y})${pixels}; ${note}`;
+				const ab = midpoint(a, b), bc = midpoint(b, c), cd = midpoint(c, d), abc = midpoint(ab, bc), bcd = midpoint(bc, cd), m = midpoint(abc, bcd);
+				split(a, ab, abc, m, depth + 1);
+				split(m, bcd, cd, d, depth + 1);
+			};
+			for (let i = 1; i < controls.length; i += 3) split(controls[i - 1], controls[i], controls[i + 1], controls[i + 2], 0);
+			const normalized = points.map((p) => ({
+				x: p.x / width,
+				y: p.y / height
+			}));
+			cached.set(stroke, {
+				width,
+				height,
+				points: normalized
 			});
-			return [
-				base,
-				"",
-				guide,
-				"",
-				translate("imageRegionNotes"),
-				...notes
-			].join("\n");
+			return normalized;
 		}
 		//#endregion
-		//#region src/client-image-previews.jsx
-		function openPreview(props, item, opener, sourceInDraft = false) {
-			const { service, preference, t, attachForEdit } = props;
-			const settings = preference.getSnapshot();
-			const referenceName = `annotated-${item.name}.png`;
-			service.open({
-				items: [{
-					...item,
-					actions: settings.imageEditing ? [{
-						id: "edit",
-						label: t("imageEdit"),
-						pendingLabel: t("imageEditPreparing"),
-						errorLabel: t("imageEditFailed"),
-						closeOnSuccess: true,
-						onInvoke: ({ annotations }) => attachForEdit(item.src, item.name, buildImageEditDraft({
-							annotations,
-							translate: t,
-							sourceName: item.name,
-							referenceName
-						}), annotations, referenceName, sourceInDraft)
-					}, ...settings.imageSketch && props.openSketchImage ? [{
-						id: "sketch",
-						label: t("imageToSketch"),
-						pendingLabel: t("imageEditPreparing"),
-						errorLabel: t("imageEditFailed"),
-						onInvoke: () => props.openSketchImage(item.src, item.name)
-					}] : []] : []
-				}],
-				opener,
-				source: sourceInDraft ? "codex-draft" : "codex-message",
-				annotations: settings.imageAnnotations
-			});
-		}
-		function ComposerImagePreviews(props) {
-			const { attachments, service, nativeAttachments, watchNativeAttachments, nativeTranslate } = props;
-			const entry = (0, react.useSyncExternalStore)(watchNativeAttachments, nativeAttachments);
-			(0, react.useEffect)(() => {
-				const current = service.getSnapshot();
-				if (current?.source === "codex-draft" && !attachments.some((item) => item.id === current.items[0]?.id)) service.close();
-			}, [attachments, service]);
-			(0, react.useEffect)(() => () => {
-				if (service.getSnapshot()?.source === "codex-draft") service.close();
-			}, [service]);
-			if (!entry) return null;
-			const NativeAttachments = entry.component;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				style: { display: "contents" },
-				onClickCapture: (event) => {
-					const button = event.target.closest("button"), image = button?.querySelector("img");
-					const item = image && attachments.find((item) => item.previewUrl === image.src);
-					if (!item || event.button !== 0 || event.ctrlKey || event.metaKey || event.altKey) return;
-					event.preventDefault();
-					event.stopPropagation();
-					openPreview(props, {
-						id: item.id,
-						src: item.previewUrl,
-						name: item.file.name,
-						width: item.width,
-						height: item.height,
-						bytes: item.file.size
-					}, button, true);
-				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAttachments, {
-					...props,
-					t: nativeTranslate
-				})
-			});
+		//#region src/sketch-document.js
+		const SKETCH_SIZE = 1024;
+		const MAX_SKETCH_STROKES = 2e3;
+		const MAX_STROKE_POINTS = 2e3;
+		function sketchPoint(clientX, clientY, rect) {
+			if (!(rect.width > 0 && rect.height > 0)) return void 0;
+			return {
+				x: Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)),
+				y: Math.max(0, Math.min(1, (clientY - rect.top) / rect.height))
+			};
 		}
-		function MessageImagePreview({ image, ...props }) {
-			const { loadImage, t } = props;
-			const [src, setSrc] = (0, react.useState)(image.preview?.url);
-			const [failed, setFailed] = (0, react.useState)(false);
-			const [attempt, setAttempt] = (0, react.useState)(0);
-			(0, react.useEffect)(() => {
-				if (image.preview) {
-					setSrc(image.preview.url);
-					return;
-				}
-				let live = true;
-				setSrc(void 0);
-				setFailed(false);
-				Promise.resolve().then(() => loadImage(image.attachment)).then((value) => {
-					if (live) setSrc(value);
-				}, () => {
-					if (live) setFailed(true);
-				});
-				return () => {
-					live = false;
-				};
-			}, [
-				image,
-				loadImage,
-				attempt
-			]);
-			const item = image.attachment ?? image.preview;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				className: "codexImageThumb",
-				"aria-label": `${t("imagePreview")} ${item.name ?? ""}`,
-				disabled: !src && !failed,
-				onClick: (event) => {
-					if (failed) {
-						setAttempt((value) => value + 1);
-						return;
+		function paintSketch(context, strokes, size = SKETCH_SIZE, transparent = false, height = size, start = 0, end = strokes.length) {
+			context.globalCompositeOperation = "source-over";
+			context.globalAlpha = 1;
+			if (!transparent) {
+				context.fillStyle = "#ffffff";
+				context.fillRect(0, 0, size, height);
+			}
+			context.lineCap = "round";
+			context.lineJoin = "round";
+			for (let index = start; index < end; index++) {
+				const stroke = strokes[index];
+				const first = stroke.points[0];
+				if (!first) continue;
+				context.globalCompositeOperation = stroke.shape === "eraser" ? "destination-out" : "source-over";
+				context.globalAlpha = (stroke.opacity ?? 1) * (stroke.brush === "marker" ? .28 : stroke.brush === "pencil" ? .65 : 1);
+				context.strokeStyle = stroke.color;
+				context.fillStyle = stroke.color;
+				context.lineWidth = stroke.width * (stroke.brush === "pencil" ? .55 : 1) * (stroke.pressure ?? 1);
+				context.beginPath();
+				const last = stroke.points.at(-1);
+				if (stroke.shape === "text") {
+					const x = Math.min(first.x, last.x) * size, y = Math.min(first.y, last.y) * height, w = Math.abs(last.x - first.x) * size, h = Math.abs(last.y - first.y) * height;
+					const lines = stroke.text.split("\n"), fontSize = Math.min(stroke.width, h / Math.max(1, lines.length) / 1.2);
+					context.font = `${fontSize}px system-ui, sans-serif`;
+					context.textBaseline = "top";
+					lines.forEach((line, i) => context.fillText(line, x, y + i * fontSize * 1.2, w));
+				} else if (stroke.shape === "arrow") {
+					const x = last.x * size, y = last.y * height, a = Math.atan2(y - first.y * height, x - first.x * size), head = Math.min(Math.hypot(x - first.x * size, y - first.y * height) * .4, Math.max(12, stroke.width * 3));
+					context.moveTo(first.x * size, first.y * height);
+					context.lineTo(x, y);
+					context.stroke();
+					context.beginPath();
+					context.moveTo(x, y);
+					context.lineTo(x - head * Math.cos(a - .5), y - head * Math.sin(a - .5));
+					context.lineTo(x - head * Math.cos(a + .5), y - head * Math.sin(a + .5));
+					context.closePath();
+					context.fill();
+				} else if (stroke.shape === "bezier") {
+					context.moveTo(first.x * size, first.y * height);
+					for (let i = 1; i < stroke.points.length; i += 3) {
+						const [a, b, c] = stroke.points.slice(i, i + 3);
+						context.bezierCurveTo(a.x * size, a.y * height, b.x * size, b.y * height, c.x * size, c.y * height);
+					}
+					if (stroke.fill) {
+						context.closePath();
+						context.fill();
+					} else context.stroke();
+				} else if (stroke.shape === "line") {
+					context.moveTo(first.x * size, first.y * height);
+					context.lineTo(last.x * size, last.y * height);
+					context.stroke();
+				} else if (stroke.shape === "rectangle") {
+					context.rect(first.x * size, first.y * height, (last.x - first.x) * size, (last.y - first.y) * height);
+					if (stroke.fill) context.fill();
+					else context.stroke();
+				} else if (stroke.shape === "circle") {
+					context.ellipse((first.x + last.x) * size / 2, (first.y + last.y) * height / 2, Math.abs(last.x - first.x) * size / 2, Math.abs(last.y - first.y) * height / 2, 0, 0, Math.PI * 2);
+					if (stroke.fill) context.fill();
+					else context.stroke();
+				} else if (stroke.shape === "polygon") {
+					context.moveTo(first.x * size, first.y * height);
+					for (const point of stroke.points.slice(1)) context.lineTo(point.x * size, point.y * height);
+					context.closePath();
+					if (stroke.fill) context.fill();
+					else context.stroke();
+				} else if (stroke.points.length === 1) {
+					context.arc(first.x * size, first.y * height, context.lineWidth / 2, 0, Math.PI * 2);
+					context.fill();
+				} else {
+					context.moveTo(first.x * size, first.y * height);
+					for (let i = 1; i < stroke.points.length - 1; i++) {
+						const point = stroke.points[i], next = stroke.points[i + 1];
+						if (context.quadraticCurveTo) context.quadraticCurveTo(point.x * size, point.y * height, (point.x + next.x) * size / 2, (point.y + next.y) * height / 2);
+						else context.lineTo(point.x * size, point.y * height);
 					}
-					openPreview(props, {
-						id: item.attachmentId ?? src,
-						src,
-						name: item.name ?? "image.png",
-						width: item.width,
-						height: item.height
-					}, event.currentTarget);
-				},
-				children: src ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-					src,
-					alt: item.name ?? "image"
-				}) : failed ? t("accountRetry") : "…"
-			});
-		}
-		function MessageImagePreviews({ images, align, ...props }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "codexMessageImages",
-				"data-align": align,
-				"data-single": images.length === 1,
-				children: images.map((image, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageImagePreview, {
-					image,
-					...props
-				}, image.attachment?.attachmentId ?? image.preview?.url ?? index))
-			});
+					context.lineTo(last.x * size, last.y * height);
+					context.stroke();
+				}
+			}
+			context.globalCompositeOperation = "source-over";
+			context.globalAlpha = 1;
 		}
-		const IMAGE_PREVIEWS_CSS = `
-.codexMessageImages{display:flex;gap:10px;max-width:100%;padding:8px 0;overflow-x:auto}
-.codexImageThumb{display:grid;place-items:center;width:64px;height:64px;padding:0;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);border-radius:14px;background:var(--dsw-alias-interactive-bg-hover);color:inherit;overflow:hidden;cursor:zoom-in;flex:none}
-.codexImageThumb img{width:100%;height:100%;object-fit:cover}
-.codexImageThumb:focus-visible{outline:2px solid #4598ed;outline-offset:2px}
-.codexMessageImages{flex-wrap:wrap}.codexMessageImages[data-align=end]{justify-content:flex-end}
-.codexMessageImages[data-single=true] .codexImageThumb{width:240px;height:auto;max-width:100%}
-.codexMessageImages[data-single=true] img{height:auto;max-height:320px;object-fit:contain}
-`;
-		//#endregion
-		//#region src/image-conversation-node.js
-		const KIND = "codex-image-output";
-		const resultsOf = (event) => event?.type === "tool/result" && event.data.meta?.kind === "codex-subscription-image" ? (event.data.message?.content ?? []).filter((block) => block.type === "tool-result" && !block.isError && block.content?.some((part) => part.type === "image" && part.attachment)) : [];
-		const imageConversationNode = {
-			kind: KIND,
-			target: "chat",
-			match(event) {
-				if (event.type !== "turn/end" && resultsOf(event).length === 0) return null;
+		const createSketchLayers = () => ({
+			active: 1,
+			nextId: 2,
+			layers: [{
+				id: 1,
+				name: "",
+				visible: true,
+				strokes: []
+			}]
+		});
+		const strokeCount = (doc) => doc.layers.reduce((n, layer) => n + layer.strokes.length, 0);
+		function changeSketchLayer(doc, action, id = doc.active, value) {
+			const index = doc.layers.findIndex((layer) => layer.id === id);
+			if (index < 0) return doc;
+			const layers = doc.layers.slice(), layer = layers[index];
+			if (action === "select") return {
+				...doc,
+				active: id
+			};
+			if (action === "add" || action === "duplicate") {
+				if (layers.length >= 8 || action === "duplicate" && strokeCount(doc) + layer.strokes.length > 2e3) return doc;
+				const next = action === "add" ? {
+					id: doc.nextId,
+					name: "",
+					visible: true,
+					strokes: []
+				} : {
+					...layer,
+					id: doc.nextId,
+					strokes: layer.strokes.slice()
+				};
+				layers.splice(index + 1, 0, next);
 				return {
-					id: String(event.data.turn),
-					role: "update"
+					...doc,
+					layers,
+					active: next.id,
+					nextId: doc.nextId + 1
 				};
-			},
-			start: () => void 0,
-			update: (context) => context.state,
-			buildViewNode(context) {
-				const end = context.matches.find((match) => match.event.type === "turn/end");
-				if (!end) return null;
-				const blocks = context.matches.flatMap(({ event }) => resultsOf(event).map((block) => ({
-					...block,
-					kind: "tool-result",
-					meta: event.data.meta
-				})));
-				if (!blocks.length) return null;
-				const answer = end.location.turn?.steps?.at(-1)?.data.get("assistant-step");
-				const lastResultSeq = Math.max(...context.matches.filter((match) => resultsOf(match.event).length).map((match) => match.event.seq));
-				const answerSeq = answer?.finalNode?.seq;
-				const anchorSeq = answerSeq > lastResultSeq ? answerSeq + .025 : end.event.seq - .025;
+			}
+			if (action === "delete") {
+				if (layers.length === 1) return doc;
+				layers.splice(index, 1);
 				return {
-					key: context.key,
-					id: context.id,
-					kind: KIND,
-					target: "chat",
-					location: end.location,
-					anchorSeq,
-					visibility: "visible",
-					data: { blocks }
+					...doc,
+					layers,
+					active: doc.active === id ? layers[Math.min(index, layers.length - 1)].id : doc.active
 				};
 			}
-		};
-		//#endregion
-		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/ArrowPathIcon.js
-		function ArrowPathIcon({ title, titleId, ...props }, svgRef) {
-			return /*#__PURE__*/ react.createElement("svg", Object.assign({
-				xmlns: "http://www.w3.org/2000/svg",
-				fill: "none",
-				viewBox: "0 0 24 24",
-				strokeWidth: 1.5,
-				stroke: "currentColor",
-				"aria-hidden": "true",
-				"data-slot": "icon",
-				ref: svgRef,
-				"aria-labelledby": titleId
-			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-			}));
-		}
-		const ForwardRef$3 = /*#__PURE__*/ react.forwardRef(ArrowPathIcon);
-		//#endregion
-		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/ExclamationCircleIcon.js
-		function ExclamationCircleIcon({ title, titleId, ...props }, svgRef) {
-			return /*#__PURE__*/ react.createElement("svg", Object.assign({
-				xmlns: "http://www.w3.org/2000/svg",
-				fill: "none",
-				viewBox: "0 0 24 24",
-				strokeWidth: 1.5,
-				stroke: "currentColor",
-				"aria-hidden": "true",
-				"data-slot": "icon",
-				ref: svgRef,
-				"aria-labelledby": titleId
-			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
-			}));
+			if (action === "up" || action === "down") {
+				const target = index + (action === "up" ? 1 : -1);
+				if (!layers[target]) return doc;
+				[layers[index], layers[target]] = [layers[target], layer];
+			} else if (action === "visible") layers[index] = {
+				...layer,
+				visible: !layer.visible
+			};
+			else if (action === "rename") layers[index] = {
+				...layer,
+				name: String(value).trim().slice(0, 40)
+			};
+			else if (action === "clear") layers[index] = {
+				...layer,
+				strokes: [],
+				image: void 0
+			};
+			else return doc;
+			return {
+				...doc,
+				layers
+			};
 		}
-		const ForwardRef$2 = /*#__PURE__*/ react.forwardRef(ExclamationCircleIcon);
-		//#endregion
-		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/PhotoIcon.js
-		function PhotoIcon({ title, titleId, ...props }, svgRef) {
-			return /*#__PURE__*/ react.createElement("svg", Object.assign({
-				xmlns: "http://www.w3.org/2000/svg",
-				fill: "none",
-				viewBox: "0 0 24 24",
-				strokeWidth: 1.5,
-				stroke: "currentColor",
-				"aria-hidden": "true",
-				"data-slot": "icon",
-				ref: svgRef,
-				"aria-labelledby": titleId
-			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+		const distanceToSegment = (p, a, b) => {
+			const dx = b.x - a.x, dy = b.y - a.y, length = dx * dx + dy * dy;
+			const k = length ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / length)) : 0;
+			return Math.hypot(p.x - a.x - k * dx, p.y - a.y - k * dy);
+		};
+		function strokeHit(stroke, point, radius, width = SKETCH_SIZE, height = width) {
+			let points = stroke.shape === "bezier" ? flattenSketchCurve(stroke, width, height) : stroke.points;
+			if (!points.length) return false;
+			const a = points[0], b = points.at(-1);
+			if ((stroke.shape === "text" || stroke.fill && stroke.shape === "rectangle") && point.x >= Math.min(a.x, b.x) && point.x <= Math.max(a.x, b.x) && point.y >= Math.min(a.y, b.y) && point.y <= Math.max(a.y, b.y)) return true;
+			if (stroke.fill && stroke.shape === "circle") {
+				const rx = Math.abs(b.x - a.x) / 2, ry = Math.abs(b.y - a.y) / 2;
+				if (rx && ry && ((point.x - (a.x + b.x) / 2) / rx) ** 2 + ((point.y - (a.y + b.y) / 2) / ry) ** 2 <= 1) return true;
+			}
+			if (stroke.shape === "polygon" || stroke.shape === "bezier" && stroke.fill) {
+				if (stroke.fill) {
+					let inside = false;
+					for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+						const p = points[i], q = points[j];
+						if (p.y > point.y !== q.y > point.y && point.x < (q.x - p.x) * (point.y - p.y) / (q.y - p.y) + p.x) inside = !inside;
+					}
+					if (inside) return true;
+				}
+				points = [...points, points[0]];
+			}
+			if (stroke.shape === "rectangle") points = [
+				a,
+				{
+					x: b.x,
+					y: a.y
+				},
+				b,
+				{
+					x: a.x,
+					y: b.y
+				},
+				a
+			];
+			if (stroke.shape === "circle") points = Array.from({ length: 65 }, (_, i) => ({
+				x: (a.x + b.x) / 2 + Math.abs(b.x - a.x) / 2 * Math.cos(i * Math.PI / 32),
+				y: (a.y + b.y) / 2 + Math.abs(b.y - a.y) / 2 * Math.sin(i * Math.PI / 32)
 			}));
+			points = points.map((p) => ({
+				x: p.x * width,
+				y: p.y * height
+			}));
+			point = {
+				x: point.x * width,
+				y: point.y * height
+			};
+			const tolerance = radius + stroke.width / 2;
+			return points.some((p, i) => distanceToSegment(point, i ? points[i - 1] : p, p) <= tolerance);
 		}
-		const ForwardRef$1 = /*#__PURE__*/ react.forwardRef(PhotoIcon);
-		const ORIGINAL_IMAGE_ID_PATTERN = /^img_[0-9a-f]{32}$/u;
-		const positiveInteger = (value) => Number.isSafeInteger(value) && value > 0;
-		function decodeOriginalImageRef(value) {
-			if (value === null || typeof value !== "object" || Array.isArray(value) || typeof value.assetId !== "string" || !ORIGINAL_IMAGE_ID_PATTERN.test(value.assetId) || value.mediaType !== "image/png" || !positiveInteger(value.bytes) || value.bytes > 48 * 1024 * 1024 || !positiveInteger(value.width) || !positiveInteger(value.height) || typeof value.name !== "string" || !/^[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/u.test(value.name) || typeof value.sha256 !== "string" || !/^[0-9a-f]{64}$/u.test(value.sha256)) return void 0;
+		const SKETCH_RATIOS = Object.freeze({
+			"1:1": [1024, 1024],
+			"4:3": [1024, 768],
+			"3:4": [768, 1024],
+			"16:9": [1024, 576],
+			"9:16": [576, 1024]
+		});
+		function resizeSketch(doc, ratio) {
+			if (!Object.hasOwn(SKETCH_RATIOS, ratio)) throw new Error("Invalid sketch ratio");
+			const [width, height] = SKETCH_RATIOS[ratio];
+			const oldWidth = doc.width ?? 1024, oldHeight = doc.height ?? 1024;
+			if (width === oldWidth && height === oldHeight) return doc;
+			const scale = Math.min(width / oldWidth, height / oldHeight);
+			const dx = (width - oldWidth * scale) / 2, dy = (height - oldHeight * scale) / 2;
 			return {
-				assetId: value.assetId,
-				mediaType: value.mediaType,
-				bytes: value.bytes,
-				width: value.width,
-				height: value.height,
-				name: value.name,
-				sha256: value.sha256
+				...doc,
+				width,
+				height,
+				ratio,
+				layers: doc.layers.map((layer) => ({
+					...layer,
+					...layer.image ? { image: {
+						...layer.image,
+						x: (layer.image.x * oldWidth * scale + dx) / width,
+						y: (layer.image.y * oldHeight * scale + dy) / height,
+						width: layer.image.width * oldWidth * scale / width,
+						height: layer.image.height * oldHeight * scale / height
+					} } : {},
+					strokes: layer.strokes.map((stroke) => ({
+						...stroke,
+						width: stroke.width * scale,
+						points: stroke.points.map((p) => ({
+							x: (p.x * oldWidth * scale + dx) / width,
+							y: (p.y * oldHeight * scale + dy) / height
+						}))
+					}))
+				}))
 			};
 		}
-		function decodeImagePresentation(value) {
-			if (value === null || typeof value !== "object" || Array.isArray(value) || value.kind !== "codex-subscription-image" || value.schemaVersion !== 1) return void 0;
-			const original = decodeOriginalImageRef(value.original);
-			return original === void 0 ? void 0 : { original };
-		}
-		function originalImageRefsEqual(left, right) {
-			const a = decodeOriginalImageRef(left);
-			const b = decodeOriginalImageRef(right);
-			return a !== void 0 && b !== void 0 && a.assetId === b.assetId && a.mediaType === b.mediaType && a.bytes === b.bytes && a.width === b.width && a.height === b.height && a.name === b.name && a.sha256 === b.sha256;
-		}
 		//#endregion
-		//#region src/rpc-contract.js
-		const CHANNEL = "/codex-subscription";
-		const RPC_ENDPOINTS = Object.freeze([
-			"status",
-			"login/start",
-			"login/status",
-			"login/submit",
-			"login/cancel",
-			"logout",
-			"account/select",
-			"account/remove",
-			"usage",
-			"diagnostics",
-			"preferences/status",
-			"preferences/models",
-			"preferences/update",
-			"reset-credit/inspect",
-			"reset-credit/prepare",
-			"reset-credit/consume",
-			"image/original/chunk",
-			"sketch/connect",
-			"sketch/poll",
-			"sketch/claim",
-			"sketch/result",
-			"sketch/disconnect"
-		]);
-		function createSubscriptionRpcClient(transport) {
-			return Object.freeze({ call(channel, endpoint, payload, signal) {
-				if (channel !== "/codex-subscription" || !RPC_ENDPOINTS.includes(endpoint)) throw new Error("Invalid subscription RPC target");
-				return transport.call("/api", `codex-subscription/${endpoint}`, payload, signal);
-			} });
+		//#region src/sketch-session-state.js
+		function createSketchSessionState() {
+			const ref = (current) => ({ current });
+			return {
+				doc: ref(createSketchLayers()),
+				undo: ref([]),
+				redo: ref([]),
+				images: ref(/* @__PURE__ */ new Map()),
+				saved: ref(null),
+				dirty: ref(false),
+				documentId: ref(crypto.randomUUID()),
+				documentRevision: ref(0),
+				agentAdapter: ref({}),
+				agentSession: ref(null),
+				agentRun: ref(null)
+			};
 		}
-		function unwrap(response) {
-			if (!response?.ok) throw new Error(response?.error?.message ?? "Codex RPC failed");
-			return response.value;
+		function createSketchSessionRegistry() {
+			const sessions = /* @__PURE__ */ new Map();
+			return {
+				get(id) {
+					if (!sessions.has(id)) sessions.set(id, createSketchSessionState());
+					return sessions.get(id);
+				},
+				dispose() {
+					for (const value of sessions.values()) value.agentRun.current?.dispose();
+					sessions.clear();
+				}
+			};
 		}
 		//#endregion
-		//#region src/original-image-download.js
-		function decodeBase64Chunk(value) {
-			if (typeof value !== "string" || value.length === 0 || value.length > Math.ceil(4194304 / 3) * 4 + 8) throw new Error("Invalid original image chunk");
-			let decoded;
-			try {
-				decoded = atob(value);
-			} catch {
-				throw new Error("Invalid original image chunk");
-			}
-			const bytes = new Uint8Array(decoded.length);
-			for (let index = 0; index < decoded.length; index += 1) bytes[index] = decoded.charCodeAt(index);
-			return bytes;
+		//#region src/image-edit.js
+		const isRecord = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+		const validCoordinate = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
+		const cleanNote = (value) => typeof value === "string" ? value.trim() : "";
+		const coordinateError = (number) => {
+			const error = /* @__PURE__ */ new Error(`Annotation ${number} must have finite x and y coordinates between 0 and 1`);
+			error.code = "ANNOTATION_INVALID";
+			return error;
+		};
+		/**
+		* Validate the annotation contract shared by the draft builder and the
+		* reference-image renderer. Annotation numbers are their array positions so
+		* that they stay aligned with the pins shown to the user.
+		*/
+		function normalizeImageEditAnnotations(annotations, { requireNotes = false } = {}) {
+			if (!Array.isArray(annotations)) throw new TypeError("annotations must be an array");
+			return annotations.map((annotation, index) => {
+				const number = index + 1;
+				const note = cleanNote(annotation?.note);
+				if (requireNotes && note === "") {
+					const error = /* @__PURE__ */ new Error(`Annotation ${number} is missing a note; describe what should change`);
+					error.code = "ANNOTATION_INVALID";
+					throw error;
+				}
+				if (!isRecord(annotation) || !validCoordinate(annotation.x) || !validCoordinate(annotation.y)) throw coordinateError(number);
+				return {
+					number,
+					x: annotation.x,
+					y: annotation.y,
+					note
+				};
+			});
 		}
-		/** Keep only the destination and current chunk, while verifying every reply. */
-		async function readOriginalImage(rpc, sessionId, original, { signal, onProgress } = {}) {
-			signal?.throwIfAborted();
-			original = decodeOriginalImageRef(original);
-			if (original === void 0) throw new Error("Invalid original image reference");
-			const data = new Uint8Array(original.bytes);
-			let total = 0;
-			let done = false;
-			while (!done) {
-				signal?.throwIfAborted();
-				const response = await rpc.call(CHANNEL, "image/original/chunk", {
-					sessionId,
-					assetId: original.assetId,
-					offset: total
-				}, signal);
-				signal?.throwIfAborted();
-				if (!response?.ok) throw new Error(response?.error?.message ?? "Codex RPC failed");
-				const chunk = response.value;
-				if (!originalImageRefsEqual(chunk?.ref, original) || chunk.offset !== total || typeof chunk.done !== "boolean") throw new Error("Original image metadata changed");
-				const bytes = decodeBase64Chunk(chunk.encoded);
-				if (bytes.byteLength === 0 || total + bytes.byteLength > original.bytes) throw new Error("Original image download is incomplete");
-				data.set(bytes, total);
-				total += bytes.byteLength;
-				done = chunk.done;
-				onProgress?.({
-					loaded: total,
-					total: original.bytes
-				});
-			}
-			if (total !== original.bytes) throw new Error("Original image download is incomplete");
-			const digest = await crypto.subtle.digest("SHA-256", data);
-			signal?.throwIfAborted();
-			if ([...new Uint8Array(digest)].map((byte) => byte.toString(16).padStart(2, "0")).join("") !== original.sha256) throw new Error("Original image integrity check failed");
-			return data;
+		const formatPercent = (value) => {
+			return `${Number((value * 100).toFixed(2))}%`;
+		};
+		const formatPixel = (value) => {
+			const rounded = Number(value.toFixed(2));
+			return String(rounded);
+		};
+		const withNames = (value, sourceName, referenceName) => String(value).replaceAll("{sourceName}", sourceName).replaceAll("{referenceName}", referenceName);
+		const positiveImageDimension = (value) => Number.isSafeInteger(value) && value > 0;
+		function buildImageEditDraft({ prompt = "", annotations = [], translate, width, height, sourceName = "source.png", referenceName = "annotated-reference.png" }) {
+			if (typeof translate !== "function") throw new TypeError("translate must be a function");
+			const base = typeof prompt === "string" && prompt.trim() !== "" ? prompt.trim() : translate("imageEditDefault");
+			if (!Array.isArray(annotations)) throw new TypeError("annotations must be an array");
+			if (annotations.length === 0) return base;
+			const hasWidth = width !== void 0;
+			if (hasWidth !== (height !== void 0) || hasWidth && (!positiveImageDimension(width) || !positiveImageDimension(height))) throw new Error("width and height must be positive integers when provided");
+			const normalized = normalizeImageEditAnnotations(annotations, { requireNotes: true });
+			const source = typeof sourceName === "string" && sourceName.trim() !== "" ? sourceName.trim() : "source.png";
+			const reference = typeof referenceName === "string" && referenceName.trim() !== "" ? referenceName.trim() : "annotated-reference.png";
+			const guide = withNames(translate("imageEditReferenceGuide"), source, reference);
+			const location = translate("imageEditLocation");
+			const notes = normalized.map(({ number, x, y, note }) => {
+				const pixels = hasWidth ? ` (pixel x=${formatPixel(x * Math.max(0, width - 1))} of ${width}, y=${formatPixel(y * Math.max(0, height - 1))} of ${height})` : "";
+				return `${number}. ${location}: x=${formatPercent(x)} (normalized ${x}), y=${formatPercent(y)} (normalized ${y})${pixels}; ${note}`;
+			});
+			return [
+				base,
+				"",
+				guide,
+				"",
+				translate("imageRegionNotes"),
+				...notes
+			].join("\n");
 		}
 		//#endregion
-		//#region src/client-images.jsx
-		const imageDownloadName = (attachment) => {
-			const fallback = "codex-generated-image.png";
-			if (typeof attachment?.name !== "string") return fallback;
-			const cleaned = attachment.name.replace(/[<>:"/\\|?*\u0000-\u001f]/gu, "-").replace(/[. ]+$/u, "").trim();
-			if (cleaned === "") return fallback;
-			return cleaned.toLowerCase().endsWith(".png") ? cleaned : `${cleaned}.png`;
-		};
-		function triggerBlobDownload(data, mediaType, filename) {
-			const url = URL.createObjectURL(new Blob([data], { type: mediaType }));
-			const anchor = document.createElement("a");
-			anchor.href = url;
-			anchor.download = filename;
-			anchor.rel = "noopener";
-			document.body.append(anchor);
-			try {
-				anchor.click();
-			} finally {
-				anchor.remove();
-				URL.revokeObjectURL(url);
-			}
+		//#region src/client-image-previews.jsx
+		function openPreview(props, item, opener, sourceInDraft = false) {
+			const { service, preference, t, attachForEdit } = props;
+			const settings = preference.getSnapshot();
+			const referenceName = `annotated-${item.name}.png`;
+			service.open({
+				items: [{
+					...item,
+					actions: settings.imageEditing ? [{
+						id: "edit",
+						label: t("imageEdit"),
+						pendingLabel: t("imageEditPreparing"),
+						errorLabel: t("imageEditFailed"),
+						closeOnSuccess: true,
+						onInvoke: ({ annotations }) => attachForEdit(item.src, item.name, buildImageEditDraft({
+							annotations,
+							translate: t,
+							sourceName: item.name,
+							referenceName
+						}), annotations, referenceName, sourceInDraft)
+					}, ...settings.imageSketch && props.openSketchImage ? [{
+						id: "sketch",
+						label: t("imageToSketch"),
+						pendingLabel: t("imageEditPreparing"),
+						errorLabel: t("imageEditFailed"),
+						onInvoke: () => props.openSketchImage(item.src, item.name)
+					}] : []] : []
+				}],
+				opener,
+				source: sourceInDraft ? "codex-draft" : "codex-message",
+				annotations: settings.imageAnnotations
+			});
 		}
-		function CodexGeneratedImage({ attachment, original, rpc, sessionId, loadImage, openSketchImage, attachForEdit, getImageViewer, getInternalImageViewer, t, features }) {
+		function ComposerImagePreviews(props) {
+			const { attachments, service, nativeAttachments, watchNativeAttachments, nativeTranslate } = props;
+			const entry = (0, react.useSyncExternalStore)(watchNativeAttachments, nativeAttachments);
+			(0, react.useEffect)(() => {
+				const current = service.getSnapshot();
+				if (current?.source === "codex-draft" && !attachments.some((item) => item.id === current.items[0]?.id)) service.close();
+			}, [attachments, service]);
+			(0, react.useEffect)(() => () => {
+				if (service.getSnapshot()?.source === "codex-draft") service.close();
+			}, [service]);
+			if (!entry) return null;
+			const NativeAttachments = entry.component;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { display: "contents" },
+				onClickCapture: (event) => {
+					const button = event.target.closest("button"), image = button?.querySelector("img");
+					const item = image && attachments.find((item) => item.previewUrl === image.src);
+					if (!item || event.button !== 0 || event.ctrlKey || event.metaKey || event.altKey) return;
+					event.preventDefault();
+					event.stopPropagation();
+					openPreview(props, {
+						id: item.id,
+						src: item.previewUrl,
+						name: item.file.name,
+						width: item.width,
+						height: item.height,
+						bytes: item.file.size
+					}, button, true);
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeAttachments, {
+					...props,
+					t: nativeTranslate
+				})
+			});
+		}
+		function MessageImagePreview({ image, ...props }) {
+			const { loadImage, t } = props;
+			const [src, setSrc] = (0, react.useState)(image.preview?.url);
+			const [failed, setFailed] = (0, react.useState)(false);
 			const [attempt, setAttempt] = (0, react.useState)(0);
-			const [error, setError] = (0, react.useState)(false);
-			const [src, setSrc] = (0, react.useState)();
-			const triggerRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
+				if (image.preview) {
+					setSrc(image.preview.url);
+					return;
+				}
 				let live = true;
-				setError(false);
 				setSrc(void 0);
-				Promise.resolve().then(() => loadImage(attachment)).then((value) => {
+				setFailed(false);
+				Promise.resolve().then(() => loadImage(image.attachment)).then((value) => {
 					if (live) setSrc(value);
-				}).catch(() => {
-					if (live) setError(true);
+				}, () => {
+					if (live) setFailed(true);
 				});
 				return () => {
 					live = false;
 				};
 			}, [
-				attachment,
+				image,
 				loadImage,
 				attempt
 			]);
-			const label = attachment.name ?? t("imageLabel");
-			const downloadName = imageDownloadName(attachment);
-			const downloadOriginal = async ({ signal, onProgress } = {}) => {
-				if (original === void 0) return;
-				triggerBlobDownload(await readOriginalImage(rpc, sessionId, original, {
-					signal,
-					onProgress
-				}), original.mediaType, original.name);
-			};
-			const openImage = () => {
-				if (src === void 0) return;
-				const request = {
-					items: [{
-						id: attachment.attachmentId ?? downloadName,
-						src,
-						name: label,
-						width: attachment.width,
-						height: attachment.height,
-						bytes: attachment.bytes,
-						download: original === void 0 ? void 0 : {
-							pendingLabel: t("imageDownloadPreparing"),
-							errorLabel: t("imageDownloadFailed"),
-							onInvoke: downloadOriginal
-						},
-						actions: !features.imageEditing ? [] : [{
-							id: "continue-editing",
-							label: t("imageEdit"),
-							pendingLabel: t("imageEditPreparing"),
-							errorLabel: t("imageEditFailed"),
-							closeOnSuccess: true,
-							onInvoke: ({ annotations = [] }) => {
-								const imageKey = String(attachment.attachmentId ?? "image").replace(/[^a-zA-Z0-9_-]/g, "_");
-								const sourceName = annotations.length === 0 ? downloadName : `codex-edit-${imageKey}-source.png`;
-								const referenceName = `codex-edit-${imageKey}-annotations.png`;
-								return attachForEdit(src, sourceName, buildImageEditDraft({
-									annotations,
-									translate: t,
-									width: attachment.width,
-									height: attachment.height,
-									sourceName,
-									referenceName
-								}), annotations, referenceName);
-							}
-						}, ...features.imageSketch && openSketchImage ? [{
-							id: "sketch",
-							label: t("imageToSketch"),
-							pendingLabel: t("imageEditPreparing"),
-							errorLabel: t("imageEditFailed"),
-							onInvoke: () => openSketchImage(src, downloadName)
-						}] : []]
-					}],
-					opener: triggerRef.current,
-					source: "codex-generated",
-					annotations: features.imageViewer && features.imageAnnotations
-				};
-				if (features.imageViewer && getInternalImageViewer?.()?.open?.(request) === true) return;
-				if ((getImageViewer?.())?.open?.(request) === true) return;
-				if (features.imageViewer) getInternalImageViewer?.()?.open?.({
-					...request,
-					annotations: false
-				});
-				else window.open(src, "_blank", "noopener,noreferrer");
-			};
-			if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				className: "codexGeneratedImageRetry",
-				onClick: () => setAttempt((value) => value + 1),
-				children: t("imageLoadFailed")
-			});
+			const item = image.attachment ?? image.preview;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				ref: triggerRef,
 				type: "button",
-				className: "codexGeneratedImageFrame",
-				title: t("imageOpen"),
-				"aria-label": t("imageOpenNamed").replace("{value}", String(label)),
-				onClick: openImage,
-				children: src === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("imageLoading") }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				className: "codexImageThumb",
+				"aria-label": `${t("imagePreview")} ${item.name ?? ""}`,
+				disabled: !src && !failed,
+				onClick: (event) => {
+					if (failed) {
+						setAttempt((value) => value + 1);
+						return;
+					}
+					openPreview(props, {
+						id: item.attachmentId ?? src,
+						src,
+						name: item.name ?? "image.png",
+						width: item.width,
+						height: item.height
+					}, event.currentTarget);
+				},
+				children: src ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 					src,
-					alt: label
-				})
+					alt: item.name ?? "image"
+				}) : failed ? t("accountRetry") : "…"
 			});
 		}
-		function CodexImageToolRow({ presentation = "tool", block, sessionId, rpc, loadImage, openSketchImage, attachForEdit, getImageViewer, getInternalImageViewer, t, preference }) {
-			const features = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
-			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;
-			const state = !settled ? "running" : failed ? "error" : "done";
-			const status = !settled ? t("imageGenerating") : failed ? t("imageFailed") : t("imageGenerated");
-			const error = failed ? block.content.find((item) => item?.type === "text" && typeof item.text === "string")?.text : void 0;
-			const original = decodeImagePresentation(block?.meta)?.original;
-			const showOutput = presentation === "output";
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "codexImageTool",
-				"data-state": state,
-				children: [
-					showOutput ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexImageToolRow",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(!settled ? ForwardRef$3 : failed ? ForwardRef$2 : ForwardRef$1, {
-								className: "codexImageToolIcon",
-								"aria-hidden": "true"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "codexImageToolTitle",
-								children: t("imageGenerate")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "codexImageBeta",
-								children: t("imageBeta")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "codexImageToolState",
-								children: status
-							})
-						]
-					}),
-					!showOutput || image === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "codexImageToolGallery",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexGeneratedImage, {
-							features,
-							attachment: image.attachment,
-							original,
-							rpc,
-							sessionId,
-							loadImage,
-							openSketchImage,
-							attachForEdit,
-							getImageViewer,
-							getInternalImageViewer,
-							t
-						})
-					}),
-					!showOutput && typeof block?.meta?.requestedModel === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
-						className: "codexImageDetails",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("imageDetails") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
-							t("imageRequestedModel"),
-							": ",
-							block.meta.requestedModel.slice(0, 100),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-							t("imageReportedModel"),
-							": ",
-							typeof block.meta.reportedModel === "string" ? block.meta.reportedModel.slice(0, 100) : t("imageModelUnreported"),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-							t("imageRequestedSize"),
-							": ",
-							String(block.meta.requestedSize ?? "auto").slice(0, 40),
-							" · ",
-							t("imageActualSize"),
-							": ",
-							original?.width,
-							" × ",
-							original?.height
-						] })]
-					}) : null,
-					error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "codexImageToolError",
-						children: error
-					})
-				]
+		function MessageImagePreviews({ images, align, ...props }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "codexMessageImages",
+				"data-align": align,
+				"data-single": images.length === 1,
+				children: images.map((image, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageImagePreview, {
+					image,
+					...props
+				}, image.attachment?.attachmentId ?? image.preview?.url ?? index))
 			});
 		}
-		function CodexImageOutput({ node, ...props }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "codexImageOutput",
-				children: node.data.blocks.map((block) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexImageToolRow, {
-					block,
-					...props,
-					presentation: "output"
-				}, block.toolCallId))
-			});
+		const IMAGE_PREVIEWS_CSS = `
+.codexMessageImages{display:flex;gap:10px;max-width:100%;padding:8px 0;overflow-x:auto}
+.codexImageThumb{display:grid;place-items:center;width:64px;height:64px;padding:0;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);border-radius:14px;background:var(--dsw-alias-interactive-bg-hover);color:inherit;overflow:hidden;cursor:zoom-in;flex:none}
+.codexImageThumb img{width:100%;height:100%;object-fit:cover}
+.codexImageThumb:focus-visible{outline:2px solid #4598ed;outline-offset:2px}
+.codexMessageImages{flex-wrap:wrap}.codexMessageImages[data-align=end]{justify-content:flex-end}
+.codexMessageImages[data-single=true] .codexImageThumb{width:240px;height:auto;max-width:100%}
+.codexMessageImages[data-single=true] img{height:auto;max-height:320px;object-fit:contain}
+`;
+		//#endregion
+		//#region src/image-conversation-node.js
+		const KIND = "codex-image-output";
+		const resultsOf = (event) => event?.type === "tool/result" && event.data.meta?.kind === "codex-subscription-image" ? (event.data.message?.content ?? []).filter((block) => block.type === "tool-result" && !block.isError && block.content?.some((part) => part.type === "image" && part.attachment)) : [];
+		const imageConversationNode = {
+			kind: KIND,
+			target: "chat",
+			match(event) {
+				if (event.type !== "turn/end" && resultsOf(event).length === 0) return null;
+				return {
+					id: String(event.data.turn),
+					role: "update"
+				};
+			},
+			start: () => void 0,
+			update: (context) => context.state,
+			buildViewNode(context) {
+				const end = context.matches.find((match) => match.event.type === "turn/end");
+				if (!end) return null;
+				const blocks = context.matches.flatMap(({ event }) => resultsOf(event).map((block) => ({
+					...block,
+					kind: "tool-result",
+					meta: event.data.meta
+				})));
+				if (!blocks.length) return null;
+				const answer = end.location.turn?.steps?.at(-1)?.data.get("assistant-step");
+				const lastResultSeq = Math.max(...context.matches.filter((match) => resultsOf(match.event).length).map((match) => match.event.seq));
+				const answerSeq = answer?.finalNode?.seq;
+				const anchorSeq = answerSeq > lastResultSeq ? answerSeq + .025 : end.event.seq - .025;
+				return {
+					key: context.key,
+					id: context.id,
+					kind: KIND,
+					target: "chat",
+					location: end.location,
+					anchorSeq,
+					visibility: "visible",
+					data: { blocks }
+				};
+			}
+		};
+		//#endregion
+		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/ArrowPathIcon.js
+		function ArrowPathIcon({ title, titleId, ...props }, svgRef) {
+			return /*#__PURE__*/ react.createElement("svg", Object.assign({
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				strokeWidth: 1.5,
+				stroke: "currentColor",
+				"aria-hidden": "true",
+				"data-slot": "icon",
+				ref: svgRef,
+				"aria-labelledby": titleId
+			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+			}));
 		}
+		const ForwardRef$3 = /*#__PURE__*/ react.forwardRef(ArrowPathIcon);
 		//#endregion
-		//#region src/sketch-document.js
-		const SKETCH_SIZE = 1024;
-		const MAX_SKETCH_STROKES = 2e3;
-		const MAX_STROKE_POINTS = 2e3;
-		function sketchPoint(clientX, clientY, rect) {
-			if (!(rect.width > 0 && rect.height > 0)) return void 0;
+		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/ExclamationCircleIcon.js
+		function ExclamationCircleIcon({ title, titleId, ...props }, svgRef) {
+			return /*#__PURE__*/ react.createElement("svg", Object.assign({
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				strokeWidth: 1.5,
+				stroke: "currentColor",
+				"aria-hidden": "true",
+				"data-slot": "icon",
+				ref: svgRef,
+				"aria-labelledby": titleId
+			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+			}));
+		}
+		const ForwardRef$2 = /*#__PURE__*/ react.forwardRef(ExclamationCircleIcon);
+		//#endregion
+		//#region node_modules/.pnpm/@heroicons+react@2.2.0_react@18.3.1/node_modules/@heroicons/react/24/outline/esm/PhotoIcon.js
+		function PhotoIcon({ title, titleId, ...props }, svgRef) {
+			return /*#__PURE__*/ react.createElement("svg", Object.assign({
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				strokeWidth: 1.5,
+				stroke: "currentColor",
+				"aria-hidden": "true",
+				"data-slot": "icon",
+				ref: svgRef,
+				"aria-labelledby": titleId
+			}, props), title ? /*#__PURE__*/ react.createElement("title", { id: titleId }, title) : null, /*#__PURE__*/ react.createElement("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+			}));
+		}
+		const ForwardRef$1 = /*#__PURE__*/ react.forwardRef(PhotoIcon);
+		const ORIGINAL_IMAGE_ID_PATTERN = /^img_[0-9a-f]{32}$/u;
+		const positiveInteger = (value) => Number.isSafeInteger(value) && value > 0;
+		function decodeOriginalImageRef(value) {
+			if (value === null || typeof value !== "object" || Array.isArray(value) || typeof value.assetId !== "string" || !ORIGINAL_IMAGE_ID_PATTERN.test(value.assetId) || value.mediaType !== "image/png" || !positiveInteger(value.bytes) || value.bytes > 48 * 1024 * 1024 || !positiveInteger(value.width) || !positiveInteger(value.height) || typeof value.name !== "string" || !/^[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/u.test(value.name) || typeof value.sha256 !== "string" || !/^[0-9a-f]{64}$/u.test(value.sha256)) return void 0;
 			return {
-				x: Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)),
-				y: Math.max(0, Math.min(1, (clientY - rect.top) / rect.height))
+				assetId: value.assetId,
+				mediaType: value.mediaType,
+				bytes: value.bytes,
+				width: value.width,
+				height: value.height,
+				name: value.name,
+				sha256: value.sha256
 			};
 		}
-		function paintSketch(context, strokes, size = SKETCH_SIZE, transparent = false, height = size, start = 0, end = strokes.length) {
-			context.globalCompositeOperation = "source-over";
-			context.globalAlpha = 1;
-			if (!transparent) {
-				context.fillStyle = "#ffffff";
-				context.fillRect(0, 0, size, height);
-			}
-			context.lineCap = "round";
-			context.lineJoin = "round";
-			for (let index = start; index < end; index++) {
-				const stroke = strokes[index];
-				const first = stroke.points[0];
-				if (!first) continue;
-				context.globalCompositeOperation = stroke.shape === "eraser" ? "destination-out" : "source-over";
-				context.globalAlpha = (stroke.opacity ?? 1) * (stroke.brush === "marker" ? .28 : stroke.brush === "pencil" ? .65 : 1);
-				context.strokeStyle = stroke.color;
-				context.fillStyle = stroke.color;
-				context.lineWidth = stroke.width * (stroke.brush === "pencil" ? .55 : 1) * (stroke.pressure ?? 1);
-				context.beginPath();
-				const last = stroke.points.at(-1);
-				if (stroke.shape === "text") {
-					const x = Math.min(first.x, last.x) * size, y = Math.min(first.y, last.y) * height, w = Math.abs(last.x - first.x) * size, h = Math.abs(last.y - first.y) * height;
-					const lines = stroke.text.split("\n"), fontSize = Math.min(stroke.width, h / Math.max(1, lines.length) / 1.2);
-					context.font = `${fontSize}px system-ui, sans-serif`;
-					context.textBaseline = "top";
-					lines.forEach((line, i) => context.fillText(line, x, y + i * fontSize * 1.2, w));
-				} else if (stroke.shape === "arrow") {
-					const x = last.x * size, y = last.y * height, a = Math.atan2(y - first.y * height, x - first.x * size), head = Math.min(Math.hypot(x - first.x * size, y - first.y * height) * .4, Math.max(12, stroke.width * 3));
-					context.moveTo(first.x * size, first.y * height);
-					context.lineTo(x, y);
-					context.stroke();
-					context.beginPath();
-					context.moveTo(x, y);
-					context.lineTo(x - head * Math.cos(a - .5), y - head * Math.sin(a - .5));
-					context.lineTo(x - head * Math.cos(a + .5), y - head * Math.sin(a + .5));
-					context.closePath();
-					context.fill();
-				} else if (stroke.shape === "bezier") {
-					context.moveTo(first.x * size, first.y * height);
-					for (let i = 1; i < stroke.points.length; i += 3) {
-						const [a, b, c] = stroke.points.slice(i, i + 3);
-						context.bezierCurveTo(a.x * size, a.y * height, b.x * size, b.y * height, c.x * size, c.y * height);
-					}
-					if (stroke.fill) {
-						context.closePath();
-						context.fill();
-					} else context.stroke();
-				} else if (stroke.shape === "line") {
-					context.moveTo(first.x * size, first.y * height);
-					context.lineTo(last.x * size, last.y * height);
-					context.stroke();
-				} else if (stroke.shape === "rectangle") {
-					context.rect(first.x * size, first.y * height, (last.x - first.x) * size, (last.y - first.y) * height);
-					if (stroke.fill) context.fill();
-					else context.stroke();
-				} else if (stroke.shape === "circle") {
-					context.ellipse((first.x + last.x) * size / 2, (first.y + last.y) * height / 2, Math.abs(last.x - first.x) * size / 2, Math.abs(last.y - first.y) * height / 2, 0, 0, Math.PI * 2);
-					if (stroke.fill) context.fill();
-					else context.stroke();
-				} else if (stroke.shape === "polygon") {
-					context.moveTo(first.x * size, first.y * height);
-					for (const point of stroke.points.slice(1)) context.lineTo(point.x * size, point.y * height);
-					context.closePath();
-					if (stroke.fill) context.fill();
-					else context.stroke();
-				} else if (stroke.points.length === 1) {
-					context.arc(first.x * size, first.y * height, context.lineWidth / 2, 0, Math.PI * 2);
-					context.fill();
-				} else {
-					context.moveTo(first.x * size, first.y * height);
-					for (let i = 1; i < stroke.points.length - 1; i++) {
-						const point = stroke.points[i], next = stroke.points[i + 1];
-						if (context.quadraticCurveTo) context.quadraticCurveTo(point.x * size, point.y * height, (point.x + next.x) * size / 2, (point.y + next.y) * height / 2);
-						else context.lineTo(point.x * size, point.y * height);
-					}
-					context.lineTo(last.x * size, last.y * height);
-					context.stroke();
-				}
-			}
-			context.globalCompositeOperation = "source-over";
-			context.globalAlpha = 1;
+		function decodeImagePresentation(value) {
+			if (value === null || typeof value !== "object" || Array.isArray(value) || value.kind !== "codex-subscription-image" || value.schemaVersion !== 1) return void 0;
+			const original = decodeOriginalImageRef(value.original);
+			return original === void 0 ? void 0 : { original };
+		}
+		function originalImageRefsEqual(left, right) {
+			const a = decodeOriginalImageRef(left);
+			const b = decodeOriginalImageRef(right);
+			return a !== void 0 && b !== void 0 && a.assetId === b.assetId && a.mediaType === b.mediaType && a.bytes === b.bytes && a.width === b.width && a.height === b.height && a.name === b.name && a.sha256 === b.sha256;
+		}
+		//#endregion
+		//#region src/rpc-contract.js
+		const CHANNEL = "/codex-subscription";
+		const RPC_ENDPOINTS = Object.freeze([
+			"status",
+			"login/start",
+			"login/status",
+			"login/submit",
+			"login/cancel",
+			"logout",
+			"account/select",
+			"account/remove",
+			"usage",
+			"diagnostics",
+			"preferences/status",
+			"preferences/models",
+			"preferences/update",
+			"reset-credit/inspect",
+			"reset-credit/prepare",
+			"reset-credit/consume",
+			"image/original/chunk",
+			"sketch/connect",
+			"sketch/poll",
+			"sketch/claim",
+			"sketch/result",
+			"sketch/disconnect"
+		]);
+		function createSubscriptionRpcClient(transport) {
+			return Object.freeze({ call(channel, endpoint, payload, signal) {
+				if (channel !== "/codex-subscription" || !RPC_ENDPOINTS.includes(endpoint)) throw new Error("Invalid subscription RPC target");
+				return transport.call("/api", `codex-subscription/${endpoint}`, payload, signal);
+			} });
+		}
+		function unwrap(response) {
+			if (!response?.ok) throw new Error(response?.error?.message ?? "Codex RPC failed");
+			return response.value;
 		}
 		//#endregion
-		//#region src/sketch-curves.js
-		const cached = /* @__PURE__ */ new WeakMap();
-		const midpoint = (a, b) => ({
-			x: (a.x + b.x) / 2,
-			y: (a.y + b.y) / 2
-		});
-		function flattenSketchCurve(stroke, width, height) {
-			const previous = cached.get(stroke);
-			if (previous?.width === width && previous.height === height) return previous.points;
-			const controls = stroke.points.map((p) => ({
-				x: p.x * width,
-				y: p.y * height
-			})), points = [controls[0]];
-			const distance = (p, a, b) => {
-				const dx = b.x - a.x, dy = b.y - a.y, d = dx * dx + dy * dy;
-				const t = d ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / d)) : 0;
-				return Math.hypot(p.x - a.x - t * dx, p.y - a.y - t * dy);
-			};
-			const split = (a, b, c, d, depth) => {
-				if (depth === 10 || Math.max(distance(b, a, d), distance(c, a, d)) <= .5) {
-					points.push(d);
-					return;
-				}
-				const ab = midpoint(a, b), bc = midpoint(b, c), cd = midpoint(c, d), abc = midpoint(ab, bc), bcd = midpoint(bc, cd), m = midpoint(abc, bcd);
-				split(a, ab, abc, m, depth + 1);
-				split(m, bcd, cd, d, depth + 1);
-			};
-			for (let i = 1; i < controls.length; i += 3) split(controls[i - 1], controls[i], controls[i + 1], controls[i + 2], 0);
-			const normalized = points.map((p) => ({
-				x: p.x / width,
-				y: p.y / height
-			}));
-			cached.set(stroke, {
-				width,
-				height,
-				points: normalized
-			});
-			return normalized;
+		//#region src/original-image-download.js
+		function decodeBase64Chunk(value) {
+			if (typeof value !== "string" || value.length === 0 || value.length > Math.ceil(4194304 / 3) * 4 + 8) throw new Error("Invalid original image chunk");
+			let decoded;
+			try {
+				decoded = atob(value);
+			} catch {
+				throw new Error("Invalid original image chunk");
+			}
+			const bytes = new Uint8Array(decoded.length);
+			for (let index = 0; index < decoded.length; index += 1) bytes[index] = decoded.charCodeAt(index);
+			return bytes;
 		}
-		const createSketchLayers = () => ({
-			active: 1,
-			nextId: 2,
-			layers: [{
-				id: 1,
-				name: "",
-				visible: true,
-				strokes: []
-			}]
-		});
-		const strokeCount = (doc) => doc.layers.reduce((n, layer) => n + layer.strokes.length, 0);
-		function changeSketchLayer(doc, action, id = doc.active, value) {
-			const index = doc.layers.findIndex((layer) => layer.id === id);
-			if (index < 0) return doc;
-			const layers = doc.layers.slice(), layer = layers[index];
-			if (action === "select") return {
-				...doc,
-				active: id
-			};
-			if (action === "add" || action === "duplicate") {
-				if (layers.length >= 8 || action === "duplicate" && strokeCount(doc) + layer.strokes.length > 2e3) return doc;
-				const next = action === "add" ? {
-					id: doc.nextId,
-					name: "",
-					visible: true,
-					strokes: []
-				} : {
-					...layer,
-					id: doc.nextId,
-					strokes: layer.strokes.slice()
-				};
-				layers.splice(index + 1, 0, next);
-				return {
-					...doc,
-					layers,
-					active: next.id,
-					nextId: doc.nextId + 1
-				};
+		/** Keep only the destination and current chunk, while verifying every reply. */
+		async function readOriginalImage(rpc, sessionId, original, { signal, onProgress } = {}) {
+			signal?.throwIfAborted();
+			original = decodeOriginalImageRef(original);
+			if (original === void 0) throw new Error("Invalid original image reference");
+			const data = new Uint8Array(original.bytes);
+			let total = 0;
+			let done = false;
+			while (!done) {
+				signal?.throwIfAborted();
+				const response = await rpc.call(CHANNEL, "image/original/chunk", {
+					sessionId,
+					assetId: original.assetId,
+					offset: total
+				}, signal);
+				signal?.throwIfAborted();
+				if (!response?.ok) throw new Error(response?.error?.message ?? "Codex RPC failed");
+				const chunk = response.value;
+				if (!originalImageRefsEqual(chunk?.ref, original) || chunk.offset !== total || typeof chunk.done !== "boolean") throw new Error("Original image metadata changed");
+				const bytes = decodeBase64Chunk(chunk.encoded);
+				if (bytes.byteLength === 0 || total + bytes.byteLength > original.bytes) throw new Error("Original image download is incomplete");
+				data.set(bytes, total);
+				total += bytes.byteLength;
+				done = chunk.done;
+				onProgress?.({
+					loaded: total,
+					total: original.bytes
+				});
 			}
-			if (action === "delete") {
-				if (layers.length === 1) return doc;
-				layers.splice(index, 1);
-				return {
-					...doc,
-					layers,
-					active: doc.active === id ? layers[Math.min(index, layers.length - 1)].id : doc.active
-				};
+			if (total !== original.bytes) throw new Error("Original image download is incomplete");
+			const digest = await crypto.subtle.digest("SHA-256", data);
+			signal?.throwIfAborted();
+			if ([...new Uint8Array(digest)].map((byte) => byte.toString(16).padStart(2, "0")).join("") !== original.sha256) throw new Error("Original image integrity check failed");
+			return data;
+		}
+		//#endregion
+		//#region src/client-images.jsx
+		const imageDownloadName = (attachment) => {
+			const fallback = "codex-generated-image.png";
+			if (typeof attachment?.name !== "string") return fallback;
+			const cleaned = attachment.name.replace(/[<>:"/\\|?*\u0000-\u001f]/gu, "-").replace(/[. ]+$/u, "").trim();
+			if (cleaned === "") return fallback;
+			return cleaned.toLowerCase().endsWith(".png") ? cleaned : `${cleaned}.png`;
+		};
+		function triggerBlobDownload(data, mediaType, filename) {
+			const url = URL.createObjectURL(new Blob([data], { type: mediaType }));
+			const anchor = document.createElement("a");
+			anchor.href = url;
+			anchor.download = filename;
+			anchor.rel = "noopener";
+			document.body.append(anchor);
+			try {
+				anchor.click();
+			} finally {
+				anchor.remove();
+				URL.revokeObjectURL(url);
 			}
-			if (action === "up" || action === "down") {
-				const target = index + (action === "up" ? 1 : -1);
-				if (!layers[target]) return doc;
-				[layers[index], layers[target]] = [layers[target], layer];
-			} else if (action === "visible") layers[index] = {
-				...layer,
-				visible: !layer.visible
-			};
-			else if (action === "rename") layers[index] = {
-				...layer,
-				name: String(value).trim().slice(0, 40)
-			};
-			else if (action === "clear") layers[index] = {
-				...layer,
-				strokes: [],
-				image: void 0
+		}
+		function CodexGeneratedImage({ attachment, original, rpc, sessionId, loadImage, openSketchImage, attachForEdit, getImageViewer, getInternalImageViewer, t, features }) {
+			const [attempt, setAttempt] = (0, react.useState)(0);
+			const [error, setError] = (0, react.useState)(false);
+			const [src, setSrc] = (0, react.useState)();
+			const triggerRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				let live = true;
+				setError(false);
+				setSrc(void 0);
+				Promise.resolve().then(() => loadImage(attachment)).then((value) => {
+					if (live) setSrc(value);
+				}).catch(() => {
+					if (live) setError(true);
+				});
+				return () => {
+					live = false;
+				};
+			}, [
+				attachment,
+				loadImage,
+				attempt
+			]);
+			const label = attachment.name ?? t("imageLabel");
+			const downloadName = imageDownloadName(attachment);
+			const downloadOriginal = async ({ signal, onProgress } = {}) => {
+				if (original === void 0) return;
+				triggerBlobDownload(await readOriginalImage(rpc, sessionId, original, {
+					signal,
+					onProgress
+				}), original.mediaType, original.name);
 			};
-			else return doc;
-			return {
-				...doc,
-				layers
+			const openImage = () => {
+				if (src === void 0) return;
+				const request = {
+					items: [{
+						id: attachment.attachmentId ?? downloadName,
+						src,
+						name: label,
+						width: attachment.width,
+						height: attachment.height,
+						bytes: attachment.bytes,
+						download: original === void 0 ? void 0 : {
+							pendingLabel: t("imageDownloadPreparing"),
+							errorLabel: t("imageDownloadFailed"),
+							onInvoke: downloadOriginal
+						},
+						actions: !features.imageEditing ? [] : [{
+							id: "continue-editing",
+							label: t("imageEdit"),
+							pendingLabel: t("imageEditPreparing"),
+							errorLabel: t("imageEditFailed"),
+							closeOnSuccess: true,
+							onInvoke: ({ annotations = [] }) => {
+								const imageKey = String(attachment.attachmentId ?? "image").replace(/[^a-zA-Z0-9_-]/g, "_");
+								const sourceName = annotations.length === 0 ? downloadName : `codex-edit-${imageKey}-source.png`;
+								const referenceName = `codex-edit-${imageKey}-annotations.png`;
+								return attachForEdit(src, sourceName, buildImageEditDraft({
+									annotations,
+									translate: t,
+									width: attachment.width,
+									height: attachment.height,
+									sourceName,
+									referenceName
+								}), annotations, referenceName);
+							}
+						}, ...features.imageSketch && openSketchImage ? [{
+							id: "sketch",
+							label: t("imageToSketch"),
+							pendingLabel: t("imageEditPreparing"),
+							errorLabel: t("imageEditFailed"),
+							onInvoke: () => openSketchImage(src, downloadName)
+						}] : []]
+					}],
+					opener: triggerRef.current,
+					source: "codex-generated",
+					annotations: features.imageViewer && features.imageAnnotations
+				};
+				if (features.imageViewer && getInternalImageViewer?.()?.open?.(request) === true) return;
+				if ((getImageViewer?.())?.open?.(request) === true) return;
+				if (features.imageViewer) getInternalImageViewer?.()?.open?.({
+					...request,
+					annotations: false
+				});
+				else window.open(src, "_blank", "noopener,noreferrer");
 			};
+			if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "codexGeneratedImageRetry",
+				onClick: () => setAttempt((value) => value + 1),
+				children: t("imageLoadFailed")
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: triggerRef,
+				type: "button",
+				className: "codexGeneratedImageFrame",
+				title: t("imageOpen"),
+				"aria-label": t("imageOpenNamed").replace("{value}", String(label)),
+				onClick: openImage,
+				children: src === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("imageLoading") }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src,
+					alt: label
+				})
+			});
 		}
-		const distanceToSegment = (p, a, b) => {
-			const dx = b.x - a.x, dy = b.y - a.y, length = dx * dx + dy * dy;
-			const k = length ? Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / length)) : 0;
-			return Math.hypot(p.x - a.x - k * dx, p.y - a.y - k * dy);
-		};
-		function strokeHit(stroke, point, radius, width = SKETCH_SIZE, height = width) {
-			let points = stroke.shape === "bezier" ? flattenSketchCurve(stroke, width, height) : stroke.points;
-			if (!points.length) return false;
-			const a = points[0], b = points.at(-1);
-			if ((stroke.shape === "text" || stroke.fill && stroke.shape === "rectangle") && point.x >= Math.min(a.x, b.x) && point.x <= Math.max(a.x, b.x) && point.y >= Math.min(a.y, b.y) && point.y <= Math.max(a.y, b.y)) return true;
-			if (stroke.fill && stroke.shape === "circle") {
-				const rx = Math.abs(b.x - a.x) / 2, ry = Math.abs(b.y - a.y) / 2;
-				if (rx && ry && ((point.x - (a.x + b.x) / 2) / rx) ** 2 + ((point.y - (a.y + b.y) / 2) / ry) ** 2 <= 1) return true;
-			}
-			if (stroke.shape === "polygon" || stroke.shape === "bezier" && stroke.fill) {
-				if (stroke.fill) {
-					let inside = false;
-					for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
-						const p = points[i], q = points[j];
-						if (p.y > point.y !== q.y > point.y && point.x < (q.x - p.x) * (point.y - p.y) / (q.y - p.y) + p.x) inside = !inside;
-					}
-					if (inside) return true;
-				}
-				points = [...points, points[0]];
-			}
-			if (stroke.shape === "rectangle") points = [
-				a,
-				{
-					x: b.x,
-					y: a.y
-				},
-				b,
-				{
-					x: a.x,
-					y: b.y
-				},
-				a
-			];
-			if (stroke.shape === "circle") points = Array.from({ length: 65 }, (_, i) => ({
-				x: (a.x + b.x) / 2 + Math.abs(b.x - a.x) / 2 * Math.cos(i * Math.PI / 32),
-				y: (a.y + b.y) / 2 + Math.abs(b.y - a.y) / 2 * Math.sin(i * Math.PI / 32)
-			}));
-			points = points.map((p) => ({
-				x: p.x * width,
-				y: p.y * height
-			}));
-			point = {
-				x: point.x * width,
-				y: point.y * height
-			};
-			const tolerance = radius + stroke.width / 2;
-			return points.some((p, i) => distanceToSegment(point, i ? points[i - 1] : p, p) <= tolerance);
+		function CodexImageToolRow({ presentation = "tool", block, sessionId, rpc, loadImage, openSketchImage, attachForEdit, getImageViewer, getInternalImageViewer, t, preference }) {
+			const features = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
+			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;
+			const state = !settled ? "running" : failed ? "error" : "done";
+			const status = !settled ? t("imageGenerating") : failed ? t("imageFailed") : t("imageGenerated");
+			const error = failed ? block.content.find((item) => item?.type === "text" && typeof item.text === "string")?.text : void 0;
+			const original = decodeImagePresentation(block?.meta)?.original;
+			const showOutput = presentation === "output";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "codexImageTool",
+				"data-state": state,
+				children: [
+					showOutput ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexImageToolRow",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(!settled ? ForwardRef$3 : failed ? ForwardRef$2 : ForwardRef$1, {
+								className: "codexImageToolIcon",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "codexImageToolTitle",
+								children: t("imageGenerate")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "codexImageBeta",
+								children: t("imageBeta")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "codexImageToolState",
+								children: status
+							})
+						]
+					}),
+					!showOutput || image === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "codexImageToolGallery",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexGeneratedImage, {
+							features,
+							attachment: image.attachment,
+							original,
+							rpc,
+							sessionId,
+							loadImage,
+							openSketchImage,
+							attachForEdit,
+							getImageViewer,
+							getInternalImageViewer,
+							t
+						})
+					}),
+					!showOutput && typeof block?.meta?.requestedModel === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+						className: "codexImageDetails",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: t("imageDetails") }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
+							t("imageRequestedModel"),
+							": ",
+							block.meta.requestedModel.slice(0, 100),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+							t("imageReportedModel"),
+							": ",
+							typeof block.meta.reportedModel === "string" ? block.meta.reportedModel.slice(0, 100) : t("imageModelUnreported"),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+							t("imageRequestedSize"),
+							": ",
+							String(block.meta.requestedSize ?? "auto").slice(0, 40),
+							" · ",
+							t("imageActualSize"),
+							": ",
+							original?.width,
+							" × ",
+							original?.height
+						] })]
+					}) : null,
+					error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "codexImageToolError",
+						children: error
+					})
+				]
+			});
 		}
-		const SKETCH_RATIOS = Object.freeze({
-			"1:1": [1024, 1024],
-			"4:3": [1024, 768],
-			"3:4": [768, 1024],
-			"16:9": [1024, 576],
-			"9:16": [576, 1024]
-		});
-		function resizeSketch(doc, ratio) {
-			if (!Object.hasOwn(SKETCH_RATIOS, ratio)) throw new Error("Invalid sketch ratio");
-			const [width, height] = SKETCH_RATIOS[ratio];
-			const oldWidth = doc.width ?? 1024, oldHeight = doc.height ?? 1024;
-			if (width === oldWidth && height === oldHeight) return doc;
-			const scale = Math.min(width / oldWidth, height / oldHeight);
-			const dx = (width - oldWidth * scale) / 2, dy = (height - oldHeight * scale) / 2;
-			return {
-				...doc,
-				width,
-				height,
-				ratio,
-				layers: doc.layers.map((layer) => ({
-					...layer,
-					...layer.image ? { image: {
-						...layer.image,
-						x: (layer.image.x * oldWidth * scale + dx) / width,
-						y: (layer.image.y * oldHeight * scale + dy) / height,
-						width: layer.image.width * oldWidth * scale / width,
-						height: layer.image.height * oldHeight * scale / height
-					} } : {},
-					strokes: layer.strokes.map((stroke) => ({
-						...stroke,
-						width: stroke.width * scale,
-						points: stroke.points.map((p) => ({
-							x: (p.x * oldWidth * scale + dx) / width,
-							y: (p.y * oldHeight * scale + dy) / height
-						}))
-					}))
-				}))
-			};
+		function CodexImageOutput({ node, ...props }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "codexImageOutput",
+				children: node.data.blocks.map((block) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexImageToolRow, {
+					block,
+					...props,
+					presentation: "output"
+				}, block.toolCallId))
+			});
 		}
 		//#endregion
 		//#region src/sketch-layer-renderer.js
@@ -1351,8 +1382,39 @@ window.__ModuleLoader__.load({
 			};
 		}
 		function SketchViewControls({ navigation, t }) {
-			const [open, setOpen] = (0, react.useState)(false), host = (0, react.useRef)(null);
-			useSketchDismiss(open, setOpen, host, [".codexSketchViewControls"]);
+			const [open, setOpen] = (0, react.useState)(false), [placement, setPlacement] = (0, react.useState)(null);
+			const host = (0, react.useRef)(null), trigger = (0, react.useRef)(null);
+			const close = () => {
+				setOpen(false);
+				trigger.current?.focus({ preventScroll: true });
+			};
+			useSketchDismiss(open, setOpen, host, [".codexSketchViewControls", ".codexSketchKeyPanel"]);
+			(0, react.useLayoutEffect)(() => {
+				if (!open) return;
+				const dialog = host.current.closest("dialog");
+				const place = () => {
+					const box = dialog.getBoundingClientRect(), anchor = trigger.current.getBoundingClientRect();
+					const width = Math.min(360, box.width - 24);
+					setPlacement({
+						dialog,
+						style: {
+							width,
+							left: Math.max(12, Math.min(anchor.left - box.left, box.width - width - 12)),
+							bottom: box.bottom - anchor.top + 8,
+							maxHeight: Math.max(80, anchor.top - box.top - 24)
+						}
+					});
+				};
+				place();
+				const observer = new ResizeObserver(place);
+				observer.observe(dialog);
+				observer.observe(host.current);
+				window.addEventListener("resize", place);
+				return () => {
+					observer.disconnect();
+					window.removeEventListener("resize", place);
+				};
+			}, [open]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: host,
 				className: "codexSketchViewControls",
@@ -1376,40 +1438,56 @@ window.__ModuleLoader__.load({
 						children: "＋"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						ref: trigger,
 						type: "button",
+						"aria-expanded": open,
 						onClick: () => setOpen(!open),
 						children: t("sketchKeys")
 					}),
-					open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					open && placement ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "codexSketchKeyPanel",
+						"aria-label": t("sketchKeys"),
+						style: placement.style,
 						onKeyDown: (e) => {
 							if (e.key === "Escape") {
 								e.preventDefault();
 								e.stopPropagation();
-								setOpen(false);
+								close();
 							}
 						},
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "checkbox",
-								checked: navigation.shortcuts,
-								onChange: navigation.toggle
-							}), t("sketchKeysEnabled")] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchKeys") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-label": t("sketchFileClose"),
+								onClick: close,
+								children: "×"
+							})] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "codexSketchKeysEnabled",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchKeysEnabled") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: navigation.shortcuts,
+									onChange: navigation.toggle
+								})]
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("sketchNavigationHint") }),
-							Object.entries(navigation.keys).map(([action, key]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t(`sketchKey_${action}`), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								"aria-label": t(`sketchKey_${action}`),
-								value: key === " " ? "Space" : key,
-								readOnly: true,
-								onKeyDown: (e) => {
-									if (e.key === "Tab" || e.key === "Escape") return;
-									e.preventDefault();
-									e.stopPropagation();
-									if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) navigation.setKey(action, e.key);
-								}
-							})] }, action)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSketchKeyGrid",
+								children: Object.entries(navigation.keys).map(([action, key]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t(`sketchKey_${action}`), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									"aria-label": t(`sketchKey_${action}`),
+									value: key === " " ? "Space" : key,
+									readOnly: true,
+									onKeyDown: (e) => {
+										if (e.key === "Tab" || e.key === "Escape") return;
+										e.preventDefault();
+										e.stopPropagation();
+										if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) navigation.setKey(action, e.key);
+									}
+								})] }, action))
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchKeyHint") })
 						]
-					}) : null
+					}), placement.dialog) : null
 				]
 			});
 		}
@@ -1465,10 +1543,11 @@ window.__ModuleLoader__.load({
 		}
 		const SKETCH_COMMAND_HELP = {
 			coordinates: "Assign short meaningful stroke id values for later edits. Text uses two opposite box corners and text content; width is font size in pixels, automatic fitting within the box. Arrow uses two endpoints. Normalized x/y in [0,1]; width is canvas pixels. Read documentId and revision before editing.",
-			shapes: "line: exactly two endpoints; rectangle/circle: exactly two opposite bounding-box corners (circle draws an ellipse within that box); polygon: three or more vertices, closed automatically; pen: ordered path points. bezier: start point, then groups of control1/control2/end; use 4 points for one cubic curve, max 64 segments. Prefer bezier for smooth designed curves instead of many pen samples. fill:true closes and fills the curve. fill:true fills rectangle/circle/polygon. Layers and strokes paint in list order, later ones on top. All commands needed for drawing are described here; no source-code search is required.",
+			shapes: "line: exactly two endpoints; rectangle/circle (ellipse alias accepted): exactly two opposite bounding-box corners (circle draws an ellipse within that box); polygon: three or more vertices, closed automatically; pen: ordered path points. bezier: start point, then groups of control1/control2/end; use 4 points for one cubic curve, max 64 segments. Prefer bezier for smooth designed curves instead of many pen samples. fill:true closes and fills the curve. fill:true fills rectangle/circle/polygon. Layers and strokes paint in list order, later ones on top. All commands needed for drawing are described here; no source-code search is required.",
 			commands: {
 				stroke: "{op:\"stroke\",layer:1,shape:\"pen|line|arrow|text|rectangle|circle|polygon|bezier\",color:\"#rrggbb\",width:2,opacity:1,fill:false,points:[{x:0.1,y:0.1},...]}",
-				layer: "{op:\"layer\",action:\"add|select|rename|visible|duplicate|up|down|delete|clear\",id:1,value:\"name\"}",
+				layer: "Add: {op:\"layer\",action:\"add\",value:\"name\"}; optional id is the NEW unique integer ID, otherwise allocated automatically. after is the existing insertion anchor, defaults to active layer. Other actions: {op:\"layer\",action:\"select|rename|visible|duplicate|up|down|delete|clear\",id:1,value:\"name\"}; id targets an existing layer.",
+				curve: "Prefer {op:\"stroke\",shape:\"bezier\",start:{x:0,y:0},segments:[{control1:{x:0.2,y:0},control2:{x:0.8,y:1},end:{x:1,y:1}}],color:\"#123456\"}. Each segment has exactly two controls and an endpoint; no point counting required. Legacy points arrays still accepted. Do not provide both forms.",
 				object: "{op:\"object\",layer:1,id:\"title\",action:\"update|duplicate|delete\",patch:{color:\"#0088ff\",text:\"Title\"},transform:{dx:0.05,dy:0,scaleX:1,scaleY:1}}. All patch and transform fields optional. Inspect returns object IDs and bounds. Prefer targeted edits over redrawing layers.",
 				resize: "{op:\"resize\",ratio:\"1:1|4:3|3:4|16:9|9:16\"}"
 			},
@@ -1501,6 +1580,23 @@ window.__ModuleLoader__.load({
 						"delete",
 						"clear"
 					].includes(command.action)) throw Error("Unknown layer action");
+					if (command.action === "add") {
+						const id = command.id ?? doc.nextId, after = command.after ?? doc.active;
+						if (!Number.isSafeInteger(id) || id < 1 || id === Number.MAX_SAFE_INTEGER || doc.layers.some((l) => l.id === id)) throw Error("New layer id must be a unique positive integer; omit id to allocate automatically");
+						const next = changeSketchLayer(doc, "add", after);
+						if (next === doc) throw Error("Cannot add layer: check the existing after layer and the 8-layer limit");
+						doc = {
+							...next,
+							active: id,
+							nextId: Math.max(next.nextId, id + 1),
+							layers: next.layers.map((l) => l.id === next.active ? {
+								...l,
+								id,
+								name: String(command.value ?? "").trim().slice(0, 40)
+							} : l)
+						};
+						continue;
+					}
 					const next = changeSketchLayer(doc, command.action, command.id ?? doc.active, command.value);
 					if (next === doc) throw Error("Layer action unavailable; inspect the document first");
 					doc = next;
@@ -1559,7 +1655,17 @@ window.__ModuleLoader__.load({
 					continue;
 				}
 				if (command.op !== "stroke") throw Error("Unknown command");
-				const { points, color, shape = "pen", width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
+				const shape = command.shape === "ellipse" ? "circle" : command.shape ?? "pen";
+				const { color, width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
+				let points = command.points;
+				if (command.start !== void 0 || command.segments !== void 0) {
+					if (shape !== "bezier" || points !== void 0 || !command.start || !Array.isArray(command.segments) || !command.segments.length || command.segments.length > 64) throw Error("Bezier requires start and 1–64 segments, without points");
+					points = [command.start, ...command.segments.flatMap((s) => [
+						s?.control1,
+						s?.control2,
+						s?.end
+					])];
+				}
 				if (![
 					"pen",
 					"line",
@@ -1578,7 +1684,7 @@ window.__ModuleLoader__.load({
 					"rectangle",
 					"circle"
 				].includes(shape) && points.length !== 2 || shape === "polygon" && points.length < 3) throw Error("Invalid shape points");
-				if (shape === "bezier" && (points.length < 4 || points.length > 193 || (points.length - 1) % 3 !== 0)) throw Error("Bezier needs a start point followed by groups of two controls and an endpoint (max 64 segments)");
+				if (shape === "bezier" && (points.length < 4 || points.length > 193 || (points.length - 1) % 3 !== 0)) throw Error(`commands[${commands.indexOf(command)}]: Bezier has ${points.length} points; expected 4, 7, 10, ... 193 (start + control1/control2/end per segment). No commands in this batch were applied.`);
 				if (fill && ![
 					"rectangle",
 					"circle",
@@ -1627,6 +1733,7 @@ window.__ModuleLoader__.load({
 					if (!Number.isInteger(offset) || offset < 0) throw Error("offset must be a non-negative integer");
 					return {
 						...current,
+						protocolVersion: 2,
 						objects: objects.slice(offset, offset + 50),
 						objectCount: objects.length,
 						...offset + 50 < objects.length ? { nextOffset: offset + 50 } : {},
@@ -1655,7 +1762,15 @@ window.__ModuleLoader__.load({
 				if (request.revision !== current.revision || adapter.busy()) throw Error("Sketch changed or is being edited; inspect again");
 				let changedObjects;
 				if (request.action === "apply") {
-					const before = adapter.document(), next = applySketchCommands(before, request.commands);
+					const before = adapter.document();
+					let next;
+					try {
+						next = applySketchCommands(before, request.commands);
+					} catch (cause) {
+						const error = new Error(`${cause.message} Correct the batch and retry with the same runId and revision; nothing was applied.`, { cause });
+						error.code = "SKETCH_INVALID_BATCH";
+						throw error;
+					}
 					adapter.commit(next);
 					const previous = new Map(before.layers.flatMap((l) => l.strokes.map((s) => [`${l.id}:${s.id}`, s])));
 					changedObjects = next.layers.flatMap((l) => l.strokes.filter((s) => previous.get(`${l.id}:${s.id}`) !== s).map((s) => ({
@@ -2215,7 +2330,11 @@ window.__ModuleLoader__.load({
 						update("finished");
 						return completed.value;
 					} catch (error) {
-						if (version === generation) update("failed");
+						if (version === generation && error.code === "SKETCH_INVALID_BATCH") throw error;
+						if (version === generation) {
+							update("failed");
+							throw new Error(`${error.message} Call inspect to obtain the current runId and revision before retrying.`, { cause: error });
+						}
 						throw error;
 					} finally {
 						pending = false;
@@ -2230,7 +2349,7 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/sketch-agent-client.js
 		function connectSketchAgent(rpc, sessionId, execute, report, pollDelay = () => 350) {
-			let stopped = false, token, timer, attempts = 0;
+			let stopped = false, token, timer, attempts = 0, failures = 0;
 			const call = (endpoint, payload) => rpc.call(CHANNEL, `sketch/${endpoint}`, {
 				sessionId,
 				token,
@@ -2260,13 +2379,24 @@ window.__ModuleLoader__.load({
 						});
 					}
 				} catch (error) {
-					if (!stopped) report(error.message);
+					if (!stopped) {
+						if (++failures > 5) {
+							report(`${error.message}; reconnect failed. Reopen this session to retry.`);
+							return;
+						}
+						report(`${error.message}; reconnecting. Inspect recentRequests before retrying a write.`);
+						if (token) call("disconnect").catch(() => {});
+						token = void 0;
+						timer = setTimeout(connect, Math.min(1e4, 1e3 * 2 ** (failures - 1)));
+					}
 					return;
 				}
+				failures = 0;
 				if (!stopped) timer = setTimeout(poll, pollDelay());
 			};
 			const connect = () => void call("connect").then((value) => {
 				token = value.token;
+				attempts = 0;
 				if (stopped) call("disconnect").catch(() => {});
 				else poll();
 			}, (error) => {
@@ -2293,12 +2423,13 @@ window.__ModuleLoader__.load({
 			"#34c759",
 			"#0088ff"
 		];
-		function SketchStudio({ open, agentEnabled, agentPreview, onOpen, onClose, attachSketch, enabled, t, incoming, sessionId, rpc }) {
-			const dialog = (0, react.useRef)(null), canvas = (0, react.useRef)(null), doc = (0, react.useRef)(createSketchLayers()), cache = (0, react.useRef)(/* @__PURE__ */ new Map());
-			const undo = (0, react.useRef)([]), redo = (0, react.useRef)([]), active = (0, react.useRef)(null), frame = (0, react.useRef)(null);
-			const images = (0, react.useRef)(/* @__PURE__ */ new Map()), saved = (0, react.useRef)(null), dirty = (0, react.useRef)(false), updateUi = (0, react.useRef)(false);
-			const documentId = (0, react.useRef)(crypto.randomUUID()), documentRevision = (0, react.useRef)(0), agentAdapter = (0, react.useRef)({}), agentSession = (0, react.useRef)(null);
-			const [agentState, setAgentState] = (0, react.useState)("idle"), agentRun = (0, react.useRef)(null);
+		function SketchStudio({ open, agentEnabled, agentPreview, onOpen, onClose, attachSketch, enabled, t, incoming, sessionId, rpc, sessionState }) {
+			const localSession = (0, react.useRef)(null);
+			localSession.current ??= sessionState ?? createSketchSessionState();
+			const { doc, undo, redo, images, saved, dirty, documentId, documentRevision, agentAdapter, agentSession, agentRun } = localSession.current;
+			const dialog = (0, react.useRef)(null), canvas = (0, react.useRef)(null), cache = (0, react.useRef)(/* @__PURE__ */ new Map());
+			const active = (0, react.useRef)(null), frame = (0, react.useRef)(null), updateUi = (0, react.useRef)(false);
+			const [agentState, setAgentState] = (0, react.useState)(agentRun.current?.state ?? "idle");
 			const agentLocked = agentState === "drawing";
 			const [noticeHidden, setNoticeHidden] = (0, react.useState)(false);
 			const [stability, setStability] = (0, react.useState)(0), [flow, setFlow] = (0, react.useState)(100), [picturesOpen, setPicturesOpen] = (0, react.useState)(false);
@@ -2386,10 +2517,10 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => () => {
 				cancelAnimationFrame(frame.current);
 				cache.current.clear();
-				agentRun.current?.dispose();
 			}, []);
 			const hasContent = () => doc.current.layers.some((layer) => layer.image || layer.strokes.length);
 			const save = async (name) => {
+				const savingDocument = documentId.current, savingRevision = documentRevision.current;
 				const row = {
 					id: saved.current?.id ?? crypto.randomUUID(),
 					name: name?.trim() || saved.current?.name || `${t("sketchTitle")} ${(/* @__PURE__ */ new Date()).toLocaleString()}`,
@@ -2397,11 +2528,13 @@ window.__ModuleLoader__.load({
 					doc: structuredClone(doc.current)
 				};
 				await sketchDrafts("save", row);
-				saved.current = {
-					id: row.id,
-					name: row.name
-				};
-				dirty.current = false;
+				if (documentId.current === savingDocument) {
+					saved.current = {
+						id: row.id,
+						name: row.name
+					};
+					if (documentRevision.current === savingRevision) dirty.current = false;
+				}
 			};
 			const saveChanges = async () => {
 				if (dirty.current && (hasContent() || saved.current)) await save();
@@ -2679,6 +2812,10 @@ window.__ModuleLoader__.load({
 				schedule();
 			};
 			Object.assign(agentAdapter.current, {
+				changed: (state) => {
+					setAgentState(state);
+					setNoticeHidden(false);
+				},
 				available: () => enabled && agentEnabled,
 				previewEnabled: () => agentPreview,
 				open: () => onOpen(),
@@ -2724,17 +2861,14 @@ window.__ModuleLoader__.load({
 			agentRun.current ??= createSketchAgentRun({
 				execute: (request) => agentSession.current(request),
 				open: () => agentAdapter.current.open(),
-				changed: (state) => {
-					setAgentState(state);
-					setNoticeHidden(false);
-				},
+				changed: (state) => agentAdapter.current.changed?.(state),
 				busy: () => agentAdapter.current.busy(),
 				previewEnabled: () => agentAdapter.current.previewEnabled()
 			});
 			(0, react.useEffect)(() => {
 				if (!enabled || !agentEnabled) return;
 				const api = Object.freeze({
-					version: 1,
+					version: 2,
 					sessionId,
 					execute: (request) => agentRun.current.execute(request),
 					export: async (format) => {
@@ -2761,9 +2895,12 @@ window.__ModuleLoader__.load({
 				sessionId
 			]);
 			(0, react.useEffect)(() => {
-				if (!enabled || !agentEnabled || !rpc || !sessionId) return;
+				if (!enabled || !agentEnabled) {
+					if (agentRun.current.locked) agentRun.current.stop();
+					return;
+				}
+				if (!rpc || !sessionId) return;
 				let live = true;
-				agentRun.current.resume();
 				const disconnect = connectSketchAgent(rpc, sessionId, (request) => {
 					if (!live) throw Error("Sketch session disconnected");
 					return agentRun.current.execute(request);
@@ -2773,7 +2910,6 @@ window.__ModuleLoader__.load({
 				}, () => 350);
 				return () => {
 					live = false;
-					agentRun.current.stop();
 					disconnect();
 				};
 			}, [
@@ -3650,13 +3786,13 @@ window.__ModuleLoader__.load({
 .codexLayerBody{overflow:hidden}.codexLayerStudio canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='white' stroke-width='3'/%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E") 12 12,crosshair}
 .codexSketchDialog .codexSketchSwatch{width:32px;height:32px;padding:0;border-radius:50%;corner-shape:round}.codexSketchSwatch::before{width:22px;height:22px;flex-shrink:0;border-radius:50%;corner-shape:round;clip-path:circle(50%)}.codexSketchSwatch[aria-pressed=true]::after{inset:1px;border:1.5px solid var(--sketch-fg);border-radius:50%;corner-shape:round}.codexSketchCustom{width:30px;height:30px;margin:1px 4px;corner-shape:round;clip-path:circle(50%)}.codexSketchCustom span{width:22px;height:22px;border-width:2px;corner-shape:round}
 .codexSketchPictures{position:absolute;left:0;top:0;z-index:3;background:var(--sketch-bg);border:1px solid var(--sketch-line);border-radius:12px;padding:10px;width:160px;max-height:100%;overflow:auto}.codexSketchPictures header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.codexSketchPictures>div{display:flex;gap:5px;align-items:center;padding:4px;border:1px solid transparent;border-radius:8px}.codexSketchPictures>div[data-active=true]{border-color:#0a84ff}.codexSketchPictures img{width:90px;height:65px;object-fit:contain}.codexSketchPictures small{color:var(--sketch-muted)}
-.codexSketchViewControls{display:flex;gap:2px;align-items:center}.codexSketchViewControls button{min-height:32px;padding:0 7px;border-radius:8px}.codexSketchKeyPanel{position:absolute;bottom:80px;left:12px;width:280px;max-height:65%;overflow:auto;padding:14px;border:1px solid var(--sketch-line);border-radius:12px;background:var(--sketch-bg);z-index:5;box-shadow:0 8px 30px #0003}.codexSketchKeyPanel label{display:flex;align-items:center;justify-content:space-between;min-height:32px;gap:12px}.codexSketchKeyPanel input:not([type=checkbox]){width:64px;border:1px solid var(--sketch-line);border-radius:6px;color:inherit;background:transparent;padding:4px;text-align:center}.codexSketchKeyPanel p,.codexSketchKeyPanel small{color:var(--sketch-muted);font-size:11px}.codexSketchControls{position:static}
+.codexSketchViewControls{display:flex;gap:2px;align-items:center}.codexSketchViewControls button{min-height:32px;padding:0 7px;border-radius:8px}.codexSketchKeyPanel{position:absolute;overflow:auto;overscroll-behavior:contain;padding:12px;border:1px solid var(--sketch-line);border-radius:14px;background:var(--sketch-bg);z-index:5;box-shadow:0 8px 30px #0003;scrollbar-width:thin}.codexSketchKeyPanel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.codexSketchKeyPanel header button{width:28px;height:28px;border-radius:8px;font-size:20px}.codexSketchKeyPanel label{display:flex;align-items:center;justify-content:space-between;min-height:32px;gap:8px}.codexSketchKeysEnabled{padding-bottom:8px;border-bottom:1px solid var(--sketch-line)}.codexSketchKeysEnabled input{margin:0;accent-color:#0a84ff}.codexSketchKeyGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:10px 0}.codexSketchKeyPanel input:not([type=checkbox]){width:52px;min-width:0;border:1px solid var(--sketch-line);border-radius:6px;color:inherit;background:color-mix(in srgb,var(--sketch-fg) 4%,transparent);padding:4px;text-align:center;font:inherit}.codexSketchKeyPanel p,.codexSketchKeyPanel small{display:block;color:var(--sketch-muted);font-size:11px;line-height:1.5;margin:0}.codexSketchKeyPanel small{border-top:1px solid var(--sketch-line);padding-top:8px}@media(max-width:380px){.codexSketchKeyGrid{grid-template-columns:1fr}}.codexSketchControls{position:static}
 
 .codexSketchCursor{position:fixed;left:0;top:0;z-index:100;pointer-events:none;border:1px solid #222;border-radius:50%;corner-shape:round;box-shadow:0 0 0 1px #fff;box-sizing:border-box}.codexSketchCursor[hidden]{display:none}
 `;
 		//#endregion
 		//#region src/sketch-workspace.jsx
-		function SketchWorkspace({ preference, attachSketch, registerOpen, t, sessionId, rpc }) {
+		function SketchWorkspace({ preference, attachSketch, registerOpen, t, sessionId, rpc, sessionState }) {
 			const settings = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
 			const [open, setOpen] = (0, react.useState)(false);
 			const [incoming, setIncoming] = (0, react.useState)(null);
@@ -3669,6 +3805,7 @@ window.__ModuleLoader__.load({
 				}
 			}), [registerOpen]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchStudio, {
+				sessionState,
 				agentPreview: settings.imageSketchAgentPreview,
 				agentEnabled: settings.imageSketchAgent,
 				onOpen: () => {
@@ -6410,7 +6547,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.1.0-beta.3";
+		const PACKAGE_VERSION = "2.1.0-beta.5";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -8727,6 +8864,8 @@ window.__ModuleLoader__.load({
 			const conversation = ctx.get("conversation");
 			const uiConversation = ctx.get("uiConversation");
 			const sketchOpeners = /* @__PURE__ */ new Map();
+			const sketchSessions = createSketchSessionRegistry();
+			ctx.effect(() => () => sketchSessions.dispose(), "codex-subscription: sketch sessions");
 			ctx.inject(["inputTriggers"], (triggerContext) => triggerContext.effect(() => triggerContext.get("inputTriggers").registerSource(createSketchTrigger({
 				enabled: () => {
 					const value = preference.getSnapshot();
@@ -8835,6 +8974,7 @@ window.__ModuleLoader__.load({
 					t,
 					sessionId,
 					rpc,
+					sessionState: sketchSessions.get(sessionId),
 					registerOpen: (callback) => {
 						sketchOpeners.set(sessionId, callback);
 						return () => {