dsh-codex-subscription 2.0.1 → 2.1.0-beta.1

package/lib/client.js

@@ -279,6 +279,66 @@ window.__ModuleLoader__.load({
 				};
 			}
 		};
+		//#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"
+			}));
+		}
+		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) {
@@ -323,7 +383,11 @@ window.__ModuleLoader__.load({
 			"reset-credit/inspect",
 			"reset-credit/prepare",
 			"reset-credit/consume",
-			"image/original/chunk"
+			"image/original/chunk",
+			"sketch/connect",
+			"sketch/poll",
+			"sketch/result",
+			"sketch/disconnect"
 		]);
 		function createSubscriptionRpcClient(transport) {
 			return Object.freeze({ call(channel, endpoint, payload, signal) {
@@ -511,7 +575,7 @@ window.__ModuleLoader__.load({
 				})
 			});
 		}
-		function CodexImageToolRow({ block, sessionId, rpc, loadImage, openSketchImage, attachForEdit, getImageViewer, getInternalImageViewer, t, preference }) {
+		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;
@@ -520,14 +584,15 @@ window.__ModuleLoader__.load({
 			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: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					showOutput ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "codexImageToolRow",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(!settled ? ForwardRef$3 : failed ? ForwardRef$2 : ForwardRef$1, {
 								className: "codexImageToolIcon",
 								"aria-hidden": "true"
 							}),
@@ -545,7 +610,7 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-					image === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					!showOutput || image === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "codexImageToolGallery",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexGeneratedImage, {
 							features,
@@ -561,7 +626,7 @@ window.__ModuleLoader__.load({
 							t
 						})
 					}),
-					typeof block?.meta?.requestedModel === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+					!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"),
@@ -595,13 +660,16 @@ window.__ModuleLoader__.load({
 				className: "codexImageOutput",
 				children: node.data.blocks.map((block) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodexImageToolRow, {
 					block,
-					...props
+					...props,
+					presentation: "output"
 				}, block.toolCallId))
 			});
 		}
 		//#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;
 			return {
@@ -635,10 +703,18 @@ window.__ModuleLoader__.load({
 					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);
-					context.stroke();
+					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);
-					context.stroke();
+					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();
@@ -676,7 +752,7 @@ window.__ModuleLoader__.load({
 				active: id
 			};
 			if (action === "add" || action === "duplicate") {
-				if (layers.length >= 8 || action === "duplicate" && strokeCount(doc) + layer.strokes.length > 200) return doc;
+				if (layers.length >= 8 || action === "duplicate" && strokeCount(doc) + layer.strokes.length > 2e3) return doc;
 				const next = action === "add" ? {
 					id: doc.nextId,
 					name: "",
@@ -736,6 +812,22 @@ window.__ModuleLoader__.load({
 			let points = stroke.points;
 			if (!points.length) return false;
 			const a = points[0], b = points.at(-1);
+			if (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") {
+				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,
 				{
@@ -1253,10 +1345,320 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		const SKETCH_COMMAND_HELP = {
+			coordinates: "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. 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|rectangle|circle|polygon\",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\"}",
+				resize: "{op:\"resize\",ratio:\"1:1|4:3|3:4|16:9|9:16\"}"
+			},
+			limits: {
+				strokes: MAX_SKETCH_STROKES,
+				pointsPerStroke: MAX_STROKE_POINTS,
+				pointsTotal: 2e5,
+				commandsPerBatch: 256
+			}
+		};
+		const finite = (value, min, max) => typeof value === "number" && Number.isFinite(value) && value >= min && value <= max;
+		function applySketchCommands(source, commands) {
+			if (!Array.isArray(commands) || !commands.length || commands.length > 256) throw Error("Expected 1–256 commands");
+			let doc = source;
+			for (const command of commands) {
+				if (!command || typeof command !== "object") throw Error("Invalid command");
+				if (command.op === "resize") {
+					doc = resizeSketch(doc, command.ratio);
+					continue;
+				}
+				if (command.op === "layer") {
+					if (![
+						"add",
+						"select",
+						"rename",
+						"visible",
+						"duplicate",
+						"up",
+						"down",
+						"delete",
+						"clear"
+					].includes(command.action)) throw Error("Unknown layer action");
+					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;
+					continue;
+				}
+				if (command.op !== "stroke") throw Error("Unknown command");
+				const { points, color, shape = "pen", width = 2, opacity = 1, fill = false } = command;
+				if (![
+					"pen",
+					"line",
+					"rectangle",
+					"circle",
+					"polygon",
+					"eraser"
+				].includes(shape) || !/^#[0-9a-f]{6}$/i.test(color ?? "") || !finite(width, 1, 256) || !finite(opacity, 0, 1) || typeof fill !== "boolean" || !Array.isArray(points) || !points.length || points.length > 2e3 || points.some((p) => !p || !finite(p.x, 0, 1) || !finite(p.y, 0, 1))) throw Error("Invalid stroke");
+				if ([
+					"line",
+					"rectangle",
+					"circle"
+				].includes(shape) && points.length !== 2 || shape === "polygon" && points.length < 3) throw Error("Invalid shape points");
+				if (fill && ![
+					"rectangle",
+					"circle",
+					"polygon"
+				].includes(shape)) throw Error("Fill requires a closed shape");
+				const layer = doc.layers.find((layer) => layer.id === (command.layer ?? doc.active));
+				if (!layer?.visible) throw Error("Target layer is missing or hidden");
+				const stroke = {
+					shape,
+					color,
+					width,
+					opacity,
+					fill,
+					brush: "pen",
+					points: points.map((p) => ({
+						x: p.x,
+						y: p.y
+					}))
+				};
+				doc = {
+					...doc,
+					layers: doc.layers.map((item) => item === layer ? {
+						...item,
+						strokes: [...item.strokes, stroke]
+					} : item)
+				};
+			}
+			if (strokeCount(doc) > 2e3 || doc.layers.reduce((n, l) => n + l.strokes.reduce((m, s) => m + s.points.length, 0), 0) > 2e5) throw Error("Sketch resource budget exceeded");
+			return doc;
+		}
+		function createSketchCommandSession(adapter) {
+			const completed = /* @__PURE__ */ new Map();
+			let pending = false;
+			return async (request) => {
+				if (!request || typeof request !== "object") throw Error("Invalid sketch request");
+				if (!adapter.available()) throw Error("Open the sketch board for this session first");
+				const current = adapter.snapshot();
+				if (request.action === "inspect") return {
+					...current,
+					help: SKETCH_COMMAND_HELP
+				};
+				if (request.documentId !== current.documentId) throw Error("Document changed; inspect again");
+				if (pending || adapter.busy()) throw Error("Sketch is being edited; retry after it settles");
+				if (request.action === "preview") return {
+					...current,
+					png: await adapter.preview()
+				};
+				if (!["apply", "save"].includes(request.action)) throw Error("Unknown sketch action");
+				if (typeof request.requestId !== "string" || !request.requestId.length || request.requestId.length > 100) throw Error("A unique requestId is required");
+				const key = `${current.documentId}:${request.requestId}`, fingerprint = JSON.stringify(request);
+				const cached = completed.get(key);
+				if (cached) {
+					if (cached.fingerprint !== fingerprint) throw Error("requestId reused with different content");
+					return cached.result;
+				}
+				if (request.revision !== current.revision || adapter.busy()) throw Error("Sketch changed or is being edited; inspect again");
+				if (request.action === "apply") {
+					const next = applySketchCommands(adapter.document(), request.commands);
+					adapter.commit(next);
+				} else {
+					if (request.name !== void 0 && (typeof request.name !== "string" || request.name.length > 60)) throw Error("Invalid draft name");
+					pending = true;
+					try {
+						await adapter.save(request.name);
+					} finally {
+						pending = false;
+					}
+				}
+				const result = adapter.snapshot();
+				completed.set(key, {
+					fingerprint,
+					result
+				});
+				if (completed.size > 128) completed.delete(completed.keys().next().value);
+				return result;
+			};
+		}
+		//#endregion
+		//#region src/sketch-formats.js
+		const SKETCH_FILE_ACCEPT = ".psd,.dsh-sketch.json,image/png,image/jpeg,image/webp";
+		const canvas = (w, h) => {
+			const c = document.createElement("canvas");
+			c.width = w;
+			c.height = h;
+			return c;
+		};
+		function runPsdCodec(action, payload) {
+			return new Promise((resolve, reject) => {
+				const worker = new Worker("/api/codex-subscription/sketch-psd-worker", { type: "module" });
+				const finish = (callback, value) => {
+					clearTimeout(timer);
+					worker.terminate();
+					callback(value);
+				};
+				const timer = setTimeout(() => finish(reject, Error("PSD operation timed out")), 3e4);
+				worker.onerror = () => finish(reject, Error("PSD codec could not be loaded"));
+				worker.onmessage = (event) => event.data.ok ? finish(resolve, event.data.value) : finish(reject, Error(event.data.error));
+				worker.postMessage({
+					action,
+					payload
+				});
+			});
+		}
+		function encodeSketchDocument(doc) {
+			return JSON.stringify({
+				format: "dsh-sketch",
+				version: 1,
+				doc
+			});
+		}
+		function decodeSketchDocument(text) {
+			if (text.length > 32 * 1024 * 1024) throw Error("Draft exceeds 32 MB");
+			const file = JSON.parse(text), source = file.doc;
+			if (file.format !== "dsh-sketch" || file.version !== 1 || !source || !Array.isArray(source.layers) || !source.layers.length || source.layers.length > 8) throw Error("Invalid sketch file");
+			const w = source.width ?? 1024, h = source.height ?? 1024;
+			if (!Number.isInteger(w) || !Number.isInteger(h) || w < 1 || h < 1 || w > 2048 || h > 2048) throw Error("Invalid canvas size");
+			let doc = {
+				...createSketchLayers(),
+				width: w,
+				height: h,
+				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === w && SKETCH_RATIOS[k][1] === h) ?? "custom"
+			};
+			for (let i = 0; i < source.layers.length; i++) {
+				const layer = source.layers[i];
+				if (i) doc = applySketchCommands(doc, [{
+					op: "layer",
+					action: "add"
+				}]);
+				if (!Array.isArray(layer.strokes)) throw Error("Invalid strokes");
+				for (let j = 0; j < layer.strokes.length; j += 256) {
+					const strokes = layer.strokes.slice(j, j + 256);
+					doc = applySketchCommands(doc, strokes.map((s) => ({
+						...s,
+						op: "stroke",
+						layer: doc.active,
+						fill: s.fill ?? false
+					})));
+					const added = doc.layers.at(-1).strokes;
+					for (let k = 0; k < strokes.length; k++) {
+						const s = strokes[k];
+						if (s.brush !== void 0 && ![
+							"pen",
+							"pencil",
+							"marker"
+						].includes(s.brush)) throw Error("Invalid brush");
+						if (s.pressure !== void 0 && (!Number.isFinite(s.pressure) || s.pressure < .2 || s.pressure > 1)) throw Error("Invalid pressure");
+						Object.assign(added[added.length - strokes.length + k], {
+							brush: s.brush ?? "pen",
+							pressure: s.pressure ?? 1
+						});
+					}
+				}
+				const target = doc.layers.at(-1);
+				target.name = String(layer.name ?? "").slice(0, 40);
+				target.visible = layer.visible !== false;
+				if (layer.image) {
+					const image = layer.image;
+					if (typeof image.src !== "string" || !/^data:image\/png;base64,/.test(image.src) || image.src.length > 8 * 1024 * 1024 || [
+						"x",
+						"y",
+						"width",
+						"height"
+					].some((k) => !Number.isFinite(image[k]) || image[k] < 0 || image[k] > 1)) throw Error("Invalid draft image");
+					const bytes = Uint8Array.from(atob(image.src.slice(image.src.indexOf(",") + 1)), (c) => c.charCodeAt(0));
+					if (bytes.length < 24) throw Error("Invalid draft image");
+					const header = new DataView(bytes.buffer);
+					if (header.getUint32(0) !== 2303741511 || header.getUint32(4) !== 218765834 || header.getUint32(16) < 1 || header.getUint32(20) < 1 || header.getUint32(16) > 4096 || header.getUint32(20) > 4096) throw Error("Invalid draft image size");
+					target.image = {
+						src: image.src,
+						x: image.x,
+						y: image.y,
+						width: image.width,
+						height: image.height
+					};
+				}
+			}
+			const activeIndex = source.layers.findIndex((layer) => layer.id === source.active);
+			doc.active = doc.layers[Math.max(0, activeIndex)].id;
+			return doc;
+		}
+		async function exportSketchPsd(doc, images, composite) {
+			const width = doc.width ?? 1024, height = doc.height ?? 1024;
+			const children = doc.layers.map((layer, i) => {
+				const ctx = canvas(width, height).getContext("2d"), ref = layer.image;
+				if (ref) ctx.drawImage(images.get(ref.src), ref.x * width, ref.y * height, ref.width * width, ref.height * height);
+				paintSketch(ctx, layer.strokes, width, true, height);
+				return {
+					name: layer.name || `Layer ${i + 1}`,
+					hidden: !layer.visible,
+					opacity: 1,
+					blendMode: "normal",
+					imageData: ctx.getImageData(0, 0, width, height)
+				};
+			});
+			const context = canvas(width, height).getContext("2d");
+			context.fillStyle = "#fff";
+			context.fillRect(0, 0, width, height);
+			if (children[0] && !children[0].hidden) {
+				const bottom = canvas(width, height);
+				bottom.getContext("2d").putImageData(children[0].imageData, 0, 0);
+				context.drawImage(bottom, 0, 0);
+				children[0].imageData = context.getImageData(0, 0, width, height);
+			} else {
+				if (children.length >= 8) throw Error("Show the bottom layer before exporting this eight-layer drawing");
+				children.unshift({
+					name: "Paper",
+					opacity: 1,
+					blendMode: "normal",
+					imageData: context.getImageData(0, 0, width, height)
+				});
+			}
+			return runPsdCodec("write", {
+				width,
+				height,
+				children,
+				imageData: composite.getContext("2d").getImageData(0, 0, width, height)
+			});
+		}
+		async function importSketchPsd(file) {
+			if (file.size > 32 * 1024 * 1024) throw Error("PSD exceeds 32 MB");
+			const psd = await runPsdCodec("read", await file.arrayBuffer());
+			const scale = Math.min(1, 1024 / Math.max(psd.width, psd.height)), width = Math.max(1, Math.round(psd.width * scale)), height = Math.max(1, Math.round(psd.height * scale));
+			const doc = {
+				...createSketchLayers(),
+				width,
+				height,
+				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === width && SKETCH_RATIOS[k][1] === height) ?? "custom",
+				layers: [],
+				nextId: psd.layers.length + 1
+			};
+			for (const [i, layer] of psd.layers.entries()) {
+				const src = canvas(layer.imageData.width, layer.imageData.height);
+				src.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(layer.imageData.data), layer.imageData.width, layer.imageData.height), 0, 0);
+				const out = canvas(width, height), ctx = out.getContext("2d");
+				ctx.globalAlpha = layer.opacity;
+				ctx.drawImage(src, layer.left * scale, layer.top * scale, src.width * scale, src.height * scale);
+				doc.layers.push({
+					id: i + 1,
+					name: layer.name,
+					visible: !layer.hidden,
+					strokes: [],
+					image: {
+						src: out.toDataURL("image/png"),
+						x: 0,
+						y: 0,
+						width: 1,
+						height: 1
+					}
+				});
+			}
+			return doc;
+		}
 		//#endregion
 		//#region src/sketch-files.jsx
-		function SketchFiles({ save, load, fresh, importImage, disabled, t, report, onWorking }) {
+		function SketchFiles({ save, load, fresh, importImage, download, hasContent, disabled, t, report, onWorking }) {
 			const [open, setOpen] = (0, react.useState)(false), [rows, setRows] = (0, react.useState)([]), [name, setName] = (0, react.useState)(""), [remove, setRemove] = (0, react.useState)(null), [working, setWorking] = (0, react.useState)(false);
+			const [format, setFormat] = (0, react.useState)("png");
 			const input = (0, react.useRef)(null), host = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				if (open && !working) host.current?.querySelector("input:not([type=file])")?.focus({ preventScroll: true });
@@ -1271,8 +1673,8 @@ window.__ModuleLoader__.load({
 				onWorking(true);
 				try {
 					await operation();
-				} catch {
-					report(t("sketchStorageFailed"));
+				} catch (error) {
+					report(error?.message || t("sketchStorageFailed"));
 				} finally {
 					setWorking(false);
 					onWorking(false);
@@ -1303,7 +1705,7 @@ window.__ModuleLoader__.load({
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						ref: input,
 						type: "file",
-						accept: "image/png,image/jpeg,image/webp",
+						accept: SKETCH_FILE_ACCEPT,
 						hidden: true,
 						onChange: (e) => {
 							const file = e.target.files?.[0];
@@ -1352,6 +1754,32 @@ window.__ModuleLoader__.load({
 								}),
 								children: t("sketchSave")
 							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSketchExportFormats codexSketchSegment",
+								role: "group",
+								"aria-label": t("sketchExportFormat"),
+								children: [
+									["png", "PNG"],
+									["psd", "PSD"],
+									["draft", t("sketchEditableFile")]
+								].map(([value, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-pressed": format === value,
+									disabled: working,
+									onClick: () => setFormat(value),
+									children: label
+								}, value))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled: working || !hasContent,
+								onClick: () => void run(async () => {
+									await download(format);
+									setOpen(false);
+								}),
+								children: t("sketchDownload")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchFormatHint") }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchLocalDrafts") }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "codexSketchDraftList",
@@ -1430,6 +1858,62 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/sketch-agent-client.js
+		function connectSketchAgent(rpc, sessionId, execute, report, pollDelay = () => 350) {
+			let stopped = false, token, timer;
+			const call = (endpoint, payload) => rpc.call(CHANNEL, `sketch/${endpoint}`, {
+				sessionId,
+				token,
+				...payload
+			}).then(unwrap);
+			const poll = async () => {
+				try {
+					const tasks = await call("poll");
+					for (const task of tasks) {
+						if (stopped) break;
+						let value, error;
+						try {
+							if (task.expiresAt < Date.now()) throw Error("Sketch command expired; inspect before retrying");
+							value = await execute(task.request);
+						} catch (cause) {
+							error = cause.message;
+						}
+						await call("result", {
+							id: task.id,
+							value,
+							error
+						});
+					}
+				} catch (error) {
+					if (!stopped) report(error.message);
+					return;
+				}
+				if (!stopped) timer = setTimeout(poll, pollDelay());
+			};
+			call("connect").then((value) => {
+				token = value.token;
+				if (stopped) call("disconnect").catch(() => {});
+				else poll();
+			}, (error) => {
+				if (!stopped) report(error.message);
+			});
+			return () => {
+				stopped = true;
+				clearTimeout(timer);
+				if (token) call("disconnect").catch(() => {});
+			};
+		}
+		async function executeSketchFromAgent(request, { available, open, execute, live = () => true, wait = () => new Promise((resolve) => setTimeout(resolve, 20)) }) {
+			if (!available()) {
+				if (request.action !== "inspect") throw Error("Sketch board closed; inspect before editing");
+				if (!live()) throw Error("Sketch session disconnected");
+				open();
+				for (let i = 0; i < 100 && live() && !available(); i++) await wait();
+			}
+			if (!live() || !available()) throw Error("Sketch board could not open in the current session");
+			return execute(request);
+		}
+		//#endregion
 		//#region src/sketch-studio.jsx
 		const PALETTE = [
 			"#18181b",
@@ -1440,15 +1924,17 @@ window.__ModuleLoader__.load({
 			"#34c759",
 			"#0088ff"
 		];
-		function SketchStudio({ open, onClose, attachSketch, enabled, t, incoming }) {
+		function SketchStudio({ open, agentEnabled, 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 [stability, setStability] = (0, react.useState)(0), [flow, setFlow] = (0, react.useState)(100), [picturesOpen, setPicturesOpen] = (0, react.useState)(false);
 			const pictureInput = (0, react.useRef)(null), received = (0, react.useRef)(null);
 			const navigation = useSketchView(canvas, open);
 			const [revision, redraw] = (0, react.useState)(0), [tool, setTool] = (0, react.useState)("pen"), [brush, setBrush] = (0, react.useState)("pen");
 			const [eraser, setEraser] = (0, react.useState)("pixel"), [color, setColor] = (0, react.useState)("#0088ff"), [width, setWidth] = (0, react.useState)(12);
+			const [fillShape, setFillShape] = (0, react.useState)(false);
 			const [layersOpen, setLayersOpen] = (0, react.useState)(false), [busy, setBusy] = (0, react.useState)(false), [error, setError] = (0, react.useState)("");
 			const cursorRing = (0, react.useRef)(null);
 			const cursor = useSketchCursor(canvas, cursorRing, width, tool === "pen" ? brush : "pen", navigation.view.scale, !open || navigation.space || busy);
@@ -1474,6 +1960,7 @@ window.__ModuleLoader__.load({
 				});
 			};
 			const checkpoint = () => {
+				documentRevision.current++;
 				dirty.current = true;
 				undo.current.push(doc.current);
 				if (undo.current.length > 30) undo.current.shift();
@@ -1484,6 +1971,7 @@ window.__ModuleLoader__.load({
 				const next = changeSketchLayer(doc.current, action, id, value);
 				if (next === doc.current) return;
 				if (action !== "select") checkpoint();
+				else documentRevision.current++;
 				doc.current = next;
 				setError("");
 				schedule();
@@ -1517,6 +2005,8 @@ window.__ModuleLoader__.load({
 				if (dirty.current && (hasContent() || saved.current)) await save();
 			};
 			const replace = (next, decoded, identity) => {
+				documentId.current = crypto.randomUUID();
+				documentRevision.current++;
 				doc.current = structuredClone(next);
 				images.current = decoded;
 				cache.current.clear();
@@ -1541,6 +2031,16 @@ window.__ModuleLoader__.load({
 				});
 			};
 			const importImage = async (file) => {
+				if (file.name?.toLowerCase().endsWith(".psd") || file.name?.toLowerCase().endsWith(".dsh-sketch.json")) {
+					if (file.size > 32 * 1024 * 1024) throw Error("File exceeds 32 MB");
+					const next = file.name.toLowerCase().endsWith(".psd") ? await importSketchPsd(file) : decodeSketchDocument(await file.text());
+					const decoded = /* @__PURE__ */ new Map();
+					await decodeSketchImages(next, decoded);
+					await saveChanges();
+					replace(next, decoded, null);
+					dirty.current = true;
+					return;
+				}
 				if (doc.current.layers.length >= 8) throw Error("Layer limit");
 				const image = await importSketchImage(file), w = doc.current.width ?? 1024, h = doc.current.height ?? 1024;
 				const scale = Math.min(w / image.width, h / image.height), width = image.width * scale / w, height = image.height * scale / h;
@@ -1703,11 +2203,101 @@ window.__ModuleLoader__.load({
 				if (busy || active.current) return;
 				const source = direction === "undo" ? undo : redo, target = direction === "undo" ? redo : undo;
 				if (!source.current.length) return;
+				documentRevision.current++;
 				dirty.current = true;
 				target.current.push(doc.current);
 				doc.current = source.current.pop();
 				schedule();
 			};
+			Object.assign(agentAdapter.current, {
+				available: () => open && enabled,
+				open: () => onOpen(),
+				busy: () => busy || Boolean(active.current),
+				document: () => doc.current,
+				snapshot: () => ({
+					documentId: documentId.current,
+					revision: documentRevision.current,
+					width: doc.current.width ?? 1024,
+					height: doc.current.height ?? 1024,
+					active: doc.current.active,
+					layers: doc.current.layers.map((layer) => ({
+						id: layer.id,
+						name: layer.name,
+						visible: layer.visible,
+						strokes: layer.strokes.length,
+						image: Boolean(layer.image)
+					})),
+					strokeCount: strokeCount(doc.current)
+				}),
+				commit: (next) => {
+					checkpoint();
+					doc.current = next;
+					setError("");
+					schedule();
+				},
+				preview: async () => {
+					paint();
+					return canvas.current.toDataURL("image/png");
+				},
+				save: async (name) => {
+					setBusy(true);
+					try {
+						await save(name);
+					} finally {
+						setBusy(false);
+					}
+				}
+			});
+			agentSession.current ??= createSketchCommandSession(agentAdapter.current);
+			(0, react.useEffect)(() => {
+				if (!open || !enabled || !agentEnabled) return;
+				const api = Object.freeze({
+					version: 1,
+					sessionId,
+					execute: (request) => agentSession.current(request),
+					export: async (format) => {
+						if (agentAdapter.current.busy()) throw Error("Sketch is being edited");
+						const { blob, extension } = await agentAdapter.current.export(format);
+						const data = new Uint8Array(await blob.arrayBuffer());
+						let raw = "";
+						for (let i = 0; i < data.length; i += 8192) raw += String.fromCharCode(...data.subarray(i, i + 8192));
+						return {
+							extension,
+							mediaType: blob.type,
+							base64: btoa(raw)
+						};
+					}
+				});
+				window.dshSketchAgent = api;
+				return () => {
+					if (window.dshSketchAgent === api) delete window.dshSketchAgent;
+				};
+			}, [
+				open,
+				enabled,
+				agentEnabled,
+				rpc,
+				sessionId
+			]);
+			(0, react.useEffect)(() => {
+				if (!enabled || !agentEnabled || !rpc || !sessionId) return;
+				let live = true;
+				const disconnect = connectSketchAgent(rpc, sessionId, (request) => executeSketchFromAgent(request, {
+					available: () => agentAdapter.current.available(),
+					open: () => agentAdapter.current.open(),
+					execute: (request) => agentSession.current(request),
+					live: () => live
+				}), (message) => setError(message), () => agentAdapter.current.available() ? 350 : 1500);
+				return () => {
+					live = false;
+					disconnect();
+				};
+			}, [
+				enabled,
+				agentEnabled,
+				rpc,
+				sessionId
+			]);
 			const attach = async () => {
 				if (!enabled || busy) return;
 				setBusy(true);
@@ -1724,6 +2314,34 @@ window.__ModuleLoader__.load({
 					setBusy(false);
 				}
 			};
+			const exportFile = async (format = "png") => {
+				paint();
+				if (format === "draft") return {
+					blob: new Blob([encodeSketchDocument(doc.current)], { type: "application/json" }),
+					extension: "dsh-sketch.json"
+				};
+				if (format === "psd") return {
+					blob: new Blob([await exportSketchPsd(doc.current, images.current, canvas.current)], { type: "image/vnd.adobe.photoshop" }),
+					extension: "psd"
+				};
+				if (format !== "png") throw Error("Unsupported format");
+				return {
+					blob: await new Promise((resolve, reject) => canvas.current.toBlob((blob) => blob ? resolve(blob) : reject(Error("PNG")), "image/png")),
+					extension: "png"
+				};
+			};
+			agentAdapter.current.export = exportFile;
+			const download = async (format) => {
+				const { blob, extension } = await exportFile(format);
+				await saveChanges();
+				const url = URL.createObjectURL(blob), link = document.createElement("a");
+				link.href = url;
+				link.download = `${(saved.current?.name || "sketch").replace(/[\\/:*?"<>|\u0000-\u001f]/g, "-").slice(0, 80)}.${extension}`;
+				document.body.append(link);
+				link.click();
+				link.remove();
+				setTimeout(() => URL.revokeObjectURL(url), 1e4);
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
 				ref: dialog,
 				className: "codexSketchDialog codexSketchStudio codexLayerStudio",
@@ -1774,6 +2392,8 @@ window.__ModuleLoader__.load({
 								load,
 								fresh,
 								importImage,
+								download,
+								hasContent: doc.current.layers.some((l) => l.visible && (l.image || l.strokes.length)),
 								disabled: busy,
 								t,
 								report: setError,
@@ -1801,7 +2421,7 @@ window.__ModuleLoader__.load({
 											})
 										}, name))
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 										className: "codexSketchRatio",
 										"aria-label": t("sketchRatio"),
 										title: t("sketchRatioHint"),
@@ -1815,10 +2435,18 @@ window.__ModuleLoader__.load({
 											doc.current = next;
 											schedule();
 										},
-										children: Object.keys(SKETCH_RATIOS).map((ratio) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+										children: [doc.current.ratio === "custom" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+											value: "custom",
+											disabled: true,
+											children: [
+												doc.current.width,
+												"×",
+												doc.current.height
+											]
+										}) : null, Object.keys(SKETCH_RATIOS).map((ratio) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 											value: ratio,
 											children: ratio
-										}, ratio))
+										}, ratio))]
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 										type: "button",
@@ -1873,7 +2501,11 @@ window.__ModuleLoader__.load({
 										setError(t("sketchHiddenLayer"));
 										return;
 									}
-									if (!(tool === "eraser" && eraser === "stroke") && strokeCount(doc.current) >= 200) {
+									if (!(tool === "eraser" && eraser === "stroke") && strokeCount(doc.current) >= 2e3) {
+										setError(t("sketchLimit"));
+										return;
+									}
+									if (tool !== "eraser" && doc.current.layers.reduce((n, l) => n + l.strokes.reduce((m, s) => m + s.points.length, 0), 0) >= 2e5) {
 										setError(t("sketchLimit"));
 										return;
 									}
@@ -1895,6 +2527,7 @@ window.__ModuleLoader__.load({
 										opacity: flow / 100,
 										shape: tool,
 										width,
+										fill: fillShape && ["rectangle", "circle"].includes(tool),
 										brush: tool === "pen" ? brush : "pen",
 										pressure: event.pointerType === "pen" ? Math.max(.2, event.pressure) : 1,
 										points: [start]
@@ -2021,7 +2654,7 @@ window.__ModuleLoader__.load({
 											type: "button",
 											title: t(`sketchLayer_${action}`),
 											"aria-label": t(`sketchLayer_${action}`),
-											disabled: busy || action === "delete" && doc.current.layers.length === 1 || action === "duplicate" && (doc.current.layers.length >= 8 || strokeCount(doc.current) + current.strokes.length > 200) || action === "up" && current === doc.current.layers.at(-1) || action === "down" && current === doc.current.layers[0],
+											disabled: busy || action === "delete" && doc.current.layers.length === 1 || action === "duplicate" && (doc.current.layers.length >= 8 || strokeCount(doc.current) + current.strokes.length > 2e3) || action === "up" && current === doc.current.layers.at(-1) || action === "down" && current === doc.current.layers[0],
 											onClick: () => change(action),
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
 												name: action === "delete" ? "clear" : action,
@@ -2097,6 +2730,11 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "codexLayerBrush",
 								children: [
+									["rectangle", "circle"].includes(tool) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "checkbox",
+										checked: fillShape,
+										onChange: (e) => setFillShape(e.target.checked)
+									}), t("sketchFill")] }) : null,
 									tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 										className: "codexSketchStability",
 										children: [t("sketchStability"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
@@ -2241,6 +2879,7 @@ window.__ModuleLoader__.load({
 .codexSketchFilePanel button{min-height:36px;border-radius:8px;padding:4px 10px;background:color-mix(in srgb,var(--sketch-fg) 6%,transparent)}
 .codexSketchFilePanel input{min-width:0;min-height:36px;border:1px solid var(--sketch-line);border-radius:8px;padding:6px 10px;background:var(--sketch-bg);color:inherit;font:inherit}
 .codexSketchFilePanel small{color:var(--sketch-muted);line-height:1.5}.codexSketchFileActions{display:flex;gap:8px}.codexSketchFileActions>button{flex:1}
+.codexSketchFilePanel .codexSketchExportFormats{gap:2px;border-radius:10px}.codexSketchFilePanel .codexSketchExportFormats button{flex:1;min-width:0;min-height:34px;padding:4px 8px;background:transparent;font-size:12px}.codexSketchFilePanel .codexSketchExportFormats button[aria-pressed=true]{background:var(--sketch-bg);box-shadow:0 1px 4px #0002,inset 0 0 0 1px var(--sketch-line)}
 .codexSketchDraftList{max-height:220px;overflow:auto}.codexSketchDraftList>div{display:flex;gap:6px;margin-bottom:6px}.codexSketchDraftList button:first-child{flex:1;min-width:0;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .codexSketchStability{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sketch-muted)}.codexSketchStability select{height:32px;border:1px solid var(--sketch-line);border-radius:8px;background:var(--sketch-bg);color:var(--sketch-fg);font:inherit}
 @media(max-width:760px){.codexSketchTop{gap:2px}.codexSketchUtility{gap:2px}.codexSketchRound{width:32px}.codexSketchLayersToggle{padding:0 6px}.codexSketchFiles>button{padding:0 6px}.codexSketchRatio{max-width:65px}.codexSketchPill button{min-width:42px}.codexSketchDialog .codexSketchConfirm{padding:0 8px}.codexSketchTop{flex-shrink:0}}
@@ -2254,7 +2893,7 @@ window.__ModuleLoader__.load({
 `;
 		//#endregion
 		//#region src/sketch-workspace.jsx
-		function SketchWorkspace({ preference, attachSketch, registerOpen, t }) {
+		function SketchWorkspace({ preference, attachSketch, registerOpen, t, sessionId, rpc }) {
 			const settings = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
 			const [open, setOpen] = (0, react.useState)(false);
 			const [incoming, setIncoming] = (0, react.useState)(null);
@@ -2267,6 +2906,13 @@ window.__ModuleLoader__.load({
 				}
 			}), [registerOpen]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchStudio, {
+				agentEnabled: settings.imageSketchAgent,
+				onOpen: () => {
+					opener.current = document.activeElement;
+					setOpen(true);
+				},
+				sessionId,
+				rpc,
 				incoming,
 				open,
 				onClose: () => {
@@ -2367,6 +3013,11 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client-locales.js
 		const zh = {
+			sketchFill: "填色",
+			sketchDownload: "下载",
+			sketchExportFormat: "导出格式",
+			sketchEditableFile: "可编辑草稿",
+			sketchFormatHint: "PNG 为合并图片；PSD 交换像素图层；可编辑草稿保留原生笔画。可导入 PSD 或草稿文件（32 MB 内）；PSD 仅支持普通像素图层，长边适配至 1024。",
 			imageToSketch: "进入草图",
 			sketchPictures: "图片",
 			sketchPictureAdd: "添加",
@@ -2391,7 +3042,7 @@ window.__ModuleLoader__.load({
 			sketchKey_fit: "重置视图",
 			sketchFiles: "草稿",
 			sketchNew: "新建草图",
-			sketchImport: "导入图片",
+			sketchImport: "导入文件",
 			sketchDraftName: "草稿名称",
 			sketchSave: "保存草稿",
 			sketchDeleteDraft: "删除",
@@ -2430,7 +3081,7 @@ window.__ModuleLoader__.load({
 			imageCapability_on: "启用",
 			imageCapability_off: "关闭",
 			imageEntryPoints: "创作入口",
-			imageEntryPointsHint: "@生图与草图 Beta；隐藏后仍可用自然语言生图。",
+			imageEntryPointsHint: "@生图入口；隐藏后仍可用自然语言生图。",
 			imageEntryPoints_on: "显示",
 			imageEntryPoints_off: "隐藏",
 			imageBrowsing: "图片浏览",
@@ -2466,6 +3117,14 @@ window.__ModuleLoader__.load({
 			sketchTool_rectangle: "矩形",
 			sketchTool_circle: "椭圆",
 			sketchTool_eraser: "橡皮",
+			sketchCanvas: "草图画板 · Beta",
+			sketchCanvasHint: "默认关闭；开启后显示手动画板入口。",
+			sketchCanvas_on: "开启",
+			sketchCanvas_off: "关闭",
+			sketchAgent: "Agent 绘图 · Beta",
+			sketchAgentHint: "默认关闭；开启后向模型提供绘图工具，需要同时开启草图画板。",
+			sketchAgent_on: "开启",
+			sketchAgent_off: "关闭",
 			imageSettings: "图片",
 			imageGeneration: "生成新图片",
 			imageEditing: "参考图编辑",
@@ -2739,6 +3398,11 @@ window.__ModuleLoader__.load({
 			imageRemoveAnnotation: "删除标注"
 		};
 		const en = {
+			sketchFill: "Fill",
+			sketchDownload: "Download",
+			sketchExportFormat: "Export format",
+			sketchEditableFile: "Editable draft",
+			sketchFormatHint: "PNG is flattened; PSD exchanges pixel layers; editable drafts retain native strokes. Import PSD or draft files up to 32 MB. PSD supports normal pixel layers, fitted to a 1024 px long edge.",
 			imageToSketch: "Open in sketch",
 			sketchPictures: "Images",
 			sketchPictureAdd: "Add",
@@ -2763,7 +3427,7 @@ window.__ModuleLoader__.load({
 			sketchKey_fit: "Reset view",
 			sketchFiles: "Drafts",
 			sketchNew: "New sketch",
-			sketchImport: "Import image",
+			sketchImport: "Import file",
 			sketchDraftName: "Draft name",
 			sketchSave: "Save draft",
 			sketchDeleteDraft: "Delete",
@@ -2802,7 +3466,7 @@ window.__ModuleLoader__.load({
 			imageCapability_on: "Enabled",
 			imageCapability_off: "Off",
 			imageEntryPoints: "Creative shortcuts",
-			imageEntryPointsHint: "@Image and Sketch Beta. Natural-language image requests still work when hidden.",
+			imageEntryPointsHint: "@Image shortcut. Natural-language image requests still work when hidden.",
 			imageEntryPoints_on: "Show",
 			imageEntryPoints_off: "Hide",
 			imageBrowsing: "Image browsing",
@@ -2838,6 +3502,14 @@ window.__ModuleLoader__.load({
 			sketchTool_rectangle: "Rectangle",
 			sketchTool_circle: "Ellipse",
 			sketchTool_eraser: "Eraser",
+			sketchCanvas: "Sketch canvas · Beta",
+			sketchCanvasHint: "Off by default. Enables the manual sketch board.",
+			sketchCanvas_on: "On",
+			sketchCanvas_off: "Off",
+			sketchAgent: "Agent drawing · Beta",
+			sketchAgentHint: "Off by default. Exposes drawing tools to the model; requires the sketch canvas.",
+			sketchAgent_on: "On",
+			sketchAgent_off: "Off",
 			imageSettings: "Images",
 			imageGeneration: "Generate new images",
 			imageEditing: "Reference image editing",
@@ -3313,14 +3985,14 @@ window.__ModuleLoader__.load({
 .codexModelSelectMenu{overflow:visible}
 .codexImageTool{display:flex;flex-direction:column;gap:8px;margin:4px 0;color:var(--dsw-alias-label-primary)}
 .codexImageToolRow{display:flex;align-items:center;min-height:24px;gap:8px;font-size:13px;line-height:20px}
-.codexImageToolIcon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--dsw-alias-label-secondary)}
-.codexImageToolIcon::before{content:'';width:8px;height:8px;border:1.5px solid currentColor;border-radius:3px}
-.codexImageTool[data-state=running] .codexImageToolIcon::before{border-radius:50%;border-right-color:transparent;animation:codexImageSpin 800ms linear infinite}
-.codexImageTool[data-state=error] .codexImageToolIcon::before{border-color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-state-error-primary)}
+.codexImageToolIcon{display:block;flex-shrink:0;width:16px;height:16px;color:var(--dsw-alias-label-secondary)}
+.codexImageTool[data-state=running] .codexImageToolIcon{animation:codexImageSpin 800ms linear infinite}
+.codexImageTool[data-state=error] .codexImageToolIcon{color:var(--dsw-alias-state-error-primary)}
 .codexImageToolTitle{font-weight:500}
 .codexImageToolState{color:var(--dsw-alias-label-tertiary)}
 .codexImageToolError{margin:0 0 0 24px;font-size:12px;line-height:18px;color:var(--dsw-alias-state-error-primary)}
-.codexImageToolGallery{margin-left:24px}
+.codexImageToolGallery{margin-left:0}
+.codexImageDetails{margin-left:24px;font-size:12px;color:var(--dsw-alias-label-secondary)}.codexImageDetails summary{cursor:pointer}.codexImageDetails p{margin:6px 0;line-height:1.6;overflow-wrap:anywhere}
 .codexGeneratedImageFrame{display:flex;align-items:center;justify-content:center;width:min(240px,100%);height:240px;padding:0;overflow:hidden;border:1px solid var(--dsw-alias-border-l2);border-radius:16px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-tertiary);cursor:pointer}
 .codexGeneratedImageFrame img{display:block;width:100%;height:100%;object-fit:cover}
 .codexGeneratedImageRetry{min-height:36px;padding:0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);cursor:pointer}
@@ -4291,7 +4963,8 @@ window.__ModuleLoader__.load({
 			imageEditing: true,
 			imageViewer: true,
 			imageAnnotations: true,
-			imageSketch: true
+			imageSketch: false,
+			imageSketchAgent: false
 		});
 		function readImageFeatures(value = {}) {
 			return Object.fromEntries(Object.entries(IMAGE_FEATURE_DEFAULTS).map(([key, fallback]) => [key, typeof value?.[key] === "boolean" ? value[key] : fallback]));
@@ -4929,7 +5602,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.0.1";
+		const PACKAGE_VERSION = "2.1.0-beta.1";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -5496,7 +6169,9 @@ window.__ModuleLoader__.load({
 		//#region src/image-setting-groups.js
 		const IMAGE_SETTING_GROUPS = Object.freeze({
 			imageCapability: ["imageGeneration", "imageEditing"],
-			imageEntryPoints: ["imageShortcut", "imageSketch"],
+			imageEntryPoints: ["imageShortcut"],
+			sketchCanvas: ["imageSketch"],
+			sketchAgent: ["imageSketchAgent"],
 			imageBrowsing: ["imageViewer", "imageAnnotations"]
 		});
 		function imageGroupValue(snapshot, group) {
@@ -7350,6 +8025,8 @@ window.__ModuleLoader__.load({
 				inject: (sessionId) => ({
 					preference,
 					t,
+					sessionId,
+					rpc,
 					registerOpen: (callback) => {
 						sketchOpeners.set(sessionId, callback);
 						return () => {