dsh-codex-subscription 2.1.0-beta.4 → 2.1.0

package/lib/client.js

@@ -31,6 +31,366 @@ window.__ModuleLoader__.load({
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let react_dom = require("react-dom");
 		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;
+				}
+				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;
+		}
+		//#endregion
+		//#region src/sketch-brushes.js
+		const grains = /* @__PURE__ */ new Map();
+		function pencilGrain(context, color) {
+			if (!context.createPattern || typeof document === "undefined") return color;
+			if (!grains.has(color)) {
+				const canvas = document.createElement("canvas");
+				canvas.width = 64;
+				canvas.height = 64;
+				const ctx = canvas.getContext("2d");
+				ctx.fillStyle = color;
+				let seed = 173;
+				for (let y = 0; y < 64; y++) for (let x = 0; x < 64; x++) {
+					seed = Math.imul(seed, 1664525) + 1013904223 >>> 0;
+					const value = seed / 4294967296;
+					if (value < .28) continue;
+					ctx.globalAlpha = .2 + value * .8;
+					ctx.fillRect(x, y, 1, 1);
+				}
+				if (grains.size >= 16) grains.delete(grains.keys().next().value);
+				grains.set(color, canvas);
+			}
+			return context.createPattern(grains.get(color), "repeat") ?? color;
+		}
+		function configureSketchBrush(context, stroke) {
+			const modern = stroke.brushVersion === 2 && stroke.shape === "pen";
+			const brush = stroke.brush ?? "pen";
+			context.lineCap = modern && brush === "marker" ? "butt" : "round";
+			context.lineJoin = "round";
+			context.globalAlpha = (stroke.opacity ?? 1) * (brush === "marker" ? .28 : brush === "pencil" ? modern ? .85 : .65 : 1);
+			context.lineWidth = stroke.width * (brush === "pencil" && !modern ? .55 : 1) * (stroke.pressure ?? 1);
+			context.strokeStyle = modern && brush === "pencil" ? pencilGrain(context, stroke.color) : stroke.color;
+			context.fillStyle = context.strokeStyle;
+		}
+		//#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 {
+				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 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";
+				configureSketchBrush(context, stroke);
+				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) {
+					if (stroke.brushVersion === 2 && stroke.brush === "marker") context.rect(first.x * size - context.lineWidth / 2, first.y * height - context.lineWidth / 4, context.lineWidth, context.lineWidth / 2);
+					else 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;
+		}
+		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
+				};
+			}
+			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 (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 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 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
+						}))
+					}))
+				}))
+			};
+		}
+		//#endregion
+		//#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 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/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;
@@ -650,318 +1010,107 @@ window.__ModuleLoader__.load({
 						] })]
 					}) : null,
 					error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "codexImageToolError",
-						children: error
-					})
-				]
-			});
-		}
-		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-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 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;
-		}
-		//#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;
-		}
-		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
-				};
-			}
-			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 (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
-			};
+						className: "codexImageToolError",
+						children: error
+					})
+				]
+			});
 		}
-		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 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 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
-						}))
-					}))
-				}))
+		//#endregion
+		//#region src/workspace-icons.jsx
+		function WorkspaceIcon({ name, size = 24 }) {
+			const paths = {
+				select: "M5 3l14 9-7 2-3 7-4-18z",
+				text: "M4 5h16M12 5v15M8 20h8M4 5v3M20 5v3",
+				arrow: "M4 20L20 4M10 4h10v10",
+				line: "M4 20L20 4",
+				layers: "M12 3L2 8l10 5 10-5-10-5zM2 12l10 5 10-5M2 16l10 5 10-5",
+				eye: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM15 12a3 3 0 11-6 0 3 3 0 016 0",
+				eyeOff: "M3 3l18 18M9 5a10 10 0 013 0c6 0 10 7 10 7l-3 4M6 6C3 8 2 12 2 12s4 7 10 7c2 0 4-1 5-2",
+				duplicate: "M8 8h13v13H8zM16 8V3H3v13h5",
+				up: "M12 20V4M5 11l7-7 7 7",
+				down: "M12 4v16M5 13l7 7 7-7",
+				pencil: "M4 20l2-6L17 3l4 4L10 18l-6 2zM14 6l4 4",
+				marker: "M5 16l9-12 7 5-9 12-7-5zM5 16l-3 4 6 1M12 7l7 5",
+				image: "M4 4h16v16H4zM4 16l5-5 4 4 3-3 4 4M15 8h.01",
+				close: "M6 6l12 12M18 6L6 18",
+				stop: "M6 6h12v12H6z",
+				pen: "M4 17c3-7 12-15 12-11S4 19 8 19s10-10 10-6-6 8-2 7l4-3",
+				eraser: "M4 14l9-10 7 7-9 10H9l-5-5zM8 10l7 7M11 21h10",
+				undo: "M9 5L4 10l5 5M5 10h9a6 6 0 010 12",
+				redo: "M15 5l5 5-5 5M19 10h-9a6 6 0 000 12",
+				check: "M5 12l5 5 9-11",
+				clear: "M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13",
+				rectangle: "M5 5h14v14H5z",
+				circle: "M20 12a8 8 0 11-16 0 8 8 0 0116 0"
 			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.8",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: paths[name] ?? paths.pen })
+			});
+		}
+		//#endregion
+		//#region src/sketch-run-status.jsx
+		function SketchRunStatus({ state, t, floating = false, onOpen, onStop, onResume, onDismiss }) {
+			if (state === "idle") return null;
+			const drawing = state === "drawing", recover = state === "stopped" || state === "failed";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: floating ? "codexSketchBackgroundStatus" : "codexSketchAgentStatus",
+				role: "status",
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+						name: drawing ? "pen" : state === "finished" ? "check" : "rectangle",
+						size: 15
+					}),
+					floating ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: onOpen,
+						children: t(`sketchRun_${state}`)
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(`sketchRun_${state}`) }),
+					drawing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "codexSketchStop",
+						onClick: onStop,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+							name: "stop",
+							size: 12
+						}), t("sketchRunStop")]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [recover ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						title: t("sketchRunResumeHint"),
+						onClick: onResume,
+						children: t("sketchRunResume")
+					}) : null, !recover ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("sketchDismissStatus"),
+						title: t("sketchDismissStatus"),
+						onClick: onDismiss,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+							name: "close",
+							size: 14
+						})
+					}) : null] })
+				]
+			});
 		}
 		//#endregion
 		//#region src/sketch-layer-renderer.js
@@ -1169,8 +1318,7 @@ window.__ModuleLoader__.load({
 					cursor.hidden = true;
 					return;
 				}
-				const pressure = node.hasPointerCapture(pointer.pointerId) && pointer.pointerType === "pen" ? heldPressure.current : 1;
-				const diameter = width * (brush === "pencil" ? .55 : 1) * pressure * rect.width / node.width;
+				const diameter = width * (node.hasPointerCapture(pointer.pointerId) && pointer.pointerType === "pen" ? heldPressure.current : 1) * rect.width / node.width;
 				cursor.hidden = false;
 				cursor.style.width = `${diameter}px`;
 				cursor.style.height = `${diameter}px`;
@@ -1515,7 +1663,8 @@ window.__ModuleLoader__.load({
 			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\"}"
 			},
@@ -1548,6 +1697,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;
@@ -1593,7 +1759,8 @@ window.__ModuleLoader__.load({
 								layer: layer.id
 							}]).layers[0].strokes[0],
 							brush: original.brush ?? "pen",
-							...original.pressure !== void 0 ? { pressure: original.pressure } : {}
+							...original.pressure !== void 0 ? { pressure: original.pressure } : {},
+							...original.brushVersion === 2 ? { brushVersion: 2 } : {}
 						};
 					} else throw Error("Unknown object action");
 					doc = {
@@ -1607,7 +1774,16 @@ window.__ModuleLoader__.load({
 				}
 				if (command.op !== "stroke") throw Error("Unknown command");
 				const shape = command.shape === "ellipse" ? "circle" : command.shape ?? "pen";
-				const { points, color, width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
+				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",
@@ -1675,6 +1851,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 } : {},
@@ -1703,7 +1880,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) => ({
@@ -1813,9 +1998,11 @@ window.__ModuleLoader__.load({
 							"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");
+						if (s.brushVersion !== void 0 && s.brushVersion !== 2) throw Error("Unsupported brush version");
 						Object.assign(added[added.length - strokes.length + k], {
 							brush: s.brush ?? "pen",
-							pressure: s.pressure ?? 1
+							pressure: s.pressure ?? 1,
+							...s.brushVersion === 2 ? { brushVersion: 2 } : {}
 						});
 					}
 				}
@@ -2087,46 +2274,6 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/workspace-icons.jsx
-		function WorkspaceIcon({ name, size = 24 }) {
-			const paths = {
-				select: "M5 3l14 9-7 2-3 7-4-18z",
-				text: "M4 5h16M12 5v15M8 20h8M4 5v3M20 5v3",
-				arrow: "M4 20L20 4M10 4h10v10",
-				line: "M4 20L20 4",
-				layers: "M12 3L2 8l10 5 10-5-10-5zM2 12l10 5 10-5M2 16l10 5 10-5",
-				eye: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM15 12a3 3 0 11-6 0 3 3 0 016 0",
-				eyeOff: "M3 3l18 18M9 5a10 10 0 013 0c6 0 10 7 10 7l-3 4M6 6C3 8 2 12 2 12s4 7 10 7c2 0 4-1 5-2",
-				duplicate: "M8 8h13v13H8zM16 8V3H3v13h5",
-				up: "M12 20V4M5 11l7-7 7 7",
-				down: "M12 4v16M5 13l7 7 7-7",
-				pencil: "M4 20l2-6L17 3l4 4L10 18l-6 2zM14 6l4 4",
-				marker: "M5 16l9-12 7 5-9 12-7-5zM5 16l-3 4 6 1M12 7l7 5",
-				image: "M4 4h16v16H4zM4 16l5-5 4 4 3-3 4 4M15 8h.01",
-				close: "M6 6l12 12M18 6L6 18",
-				pen: "M4 17c3-7 12-15 12-11S4 19 8 19s10-10 10-6-6 8-2 7l4-3",
-				eraser: "M4 14l9-10 7 7-9 10H9l-5-5zM8 10l7 7M11 21h10",
-				undo: "M9 5L4 10l5 5M5 10h9a6 6 0 010 12",
-				redo: "M15 5l5 5-5 5M19 10h-9a6 6 0 000 12",
-				check: "M5 12l5 5 9-11",
-				clear: "M4 7h16M9 7V4h6v3M7 7l1 13h8l1-13",
-				rectangle: "M5 5h14v14H5z",
-				circle: "M20 12a8 8 0 11-16 0 8 8 0 0116 0"
-			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "1.8",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: paths[name] ?? paths.pen })
-			});
-		}
-		//#endregion
 		//#region src/sketch-size-control.jsx
 		function SketchSizeControl({ value, onChange, onStart, onEnd, label, disabled, min = 2, max = 128, mode, modes, onModeChange, suffix = "" }) {
 			const active = (0, react.useRef)(false);
@@ -2263,6 +2410,7 @@ window.__ModuleLoader__.load({
 						update("finished");
 						return completed.value;
 					} catch (error) {
+						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 });
@@ -2281,7 +2429,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,
@@ -2311,13 +2459,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) => {
@@ -2344,17 +2503,23 @@ 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);
 			const pictureInput = (0, react.useRef)(null), received = (0, react.useRef)(null);
 			const navigation = useSketchView(canvas, open);
+			const brushWidths = (0, react.useRef)({
+				pen: 12,
+				pencil: 6,
+				marker: 28
+			});
 			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 [selection, setSelection] = (0, react.useState)(null), [textEdit, setTextEdit] = (0, react.useState)(null), [shapesOpen, setShapesOpen] = (0, react.useState)(false);
@@ -2384,6 +2549,13 @@ window.__ModuleLoader__.load({
 				setColor(value);
 				if (selected) editObject({ color: value });
 			};
+			const chooseBrush = (name) => {
+				brushWidths.current[brush] = width;
+				setWidth(brushWidths.current[name]);
+				setBrush(name);
+				setTool("pen");
+				setSelection(null);
+			};
 			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);
@@ -2437,10 +2609,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()}`,
@@ -2448,11 +2620,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();
@@ -2570,11 +2744,11 @@ window.__ModuleLoader__.load({
 					editObject({}, "delete");
 					return;
 				}
-				if (event.key.toLowerCase() === "v") {
+				if (!event.ctrlKey && !event.metaKey && !event.altKey && event.key.toLowerCase() === "v") {
 					setTool("select");
 					return;
 				}
-				if (event.key.toLowerCase() === "t") {
+				if (!event.ctrlKey && !event.metaKey && !event.altKey && event.key.toLowerCase() === "t") {
 					setTool("text");
 					return;
 				}
@@ -2601,7 +2775,6 @@ window.__ModuleLoader__.load({
 				if (tools[key]) {
 					event.preventDefault();
 					setTool(tools[key]);
-					if (tools[key] === "pen") setBrush("pen");
 				}
 				if (key === "[" || key === "]") {
 					event.preventDefault();
@@ -2730,6 +2903,10 @@ window.__ModuleLoader__.load({
 				schedule();
 			};
 			Object.assign(agentAdapter.current, {
+				changed: (state) => {
+					setAgentState(state);
+					setNoticeHidden(false);
+				},
 				available: () => enabled && agentEnabled,
 				previewEnabled: () => agentPreview,
 				open: () => onOpen(),
@@ -2775,17 +2952,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) => {
@@ -2812,9 +2986,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);
@@ -2824,7 +3001,6 @@ window.__ModuleLoader__.load({
 				}, () => 350);
 				return () => {
 					live = false;
-					agentRun.current.stop();
 					disconnect();
 				};
 			}, [
@@ -2877,24 +3053,17 @@ window.__ModuleLoader__.load({
 				link.remove();
 				setTimeout(() => URL.revokeObjectURL(url), 1e4);
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [enabled && agentEnabled && !open && !noticeHidden && agentState !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "codexSketchBackgroundStatus",
-				role: "status",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: onOpen,
-					children: t(`sketchRun_${agentState}`)
-				}), agentLocked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"aria-label": t("sketchRunStop"),
-					onClick: () => agentRun.current.stop(),
-					children: "×"
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					"aria-label": t("sketchCancel"),
-					onClick: () => setNoticeHidden(true),
-					children: "×"
-				})]
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [enabled && agentEnabled && !open && !noticeHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchRunStatus, {
+				state: agentState,
+				floating: true,
+				t,
+				onOpen,
+				onStop: () => agentRun.current.stop(),
+				onResume: () => {
+					setError("");
+					agentRun.current.resume();
+				},
+				onDismiss: () => setNoticeHidden(true)
 			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
 				ref: dialog,
 				className: "codexSketchDialog codexSketchStudio codexLayerStudio",
@@ -3036,24 +3205,15 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-					enabled && agentEnabled && agentState !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexSketchAgentStatus",
-						role: "status",
-						"aria-live": "polite",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(`sketchRun_${agentState}`) }), agentLocked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							"aria-label": t("sketchRunStop"),
-							title: t("sketchRunStop"),
-							onClick: () => agentRun.current.stop(),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-								name: "close",
-								size: 16
-							})
-						}) : agentState === "stopped" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							onClick: () => agentRun.current.resume(),
-							children: t("sketchRunResume")
-						}) : null]
+					enabled && agentEnabled && !noticeHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchRunStatus, {
+						state: agentState,
+						t,
+						onStop: () => agentRun.current.stop(),
+						onResume: () => {
+							setError("");
+							agentRun.current.resume();
+						},
+						onDismiss: () => setNoticeHidden(true)
 					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: `codexLayerBody ${layersOpen ? "withLayers" : ""}`,
@@ -3169,6 +3329,7 @@ window.__ModuleLoader__.load({
 										width,
 										fill: fillShape && ["rectangle", "circle"].includes(tool),
 										brush: tool === "pen" ? brush : "pen",
+										...tool === "pen" ? { brushVersion: 2 } : {},
 										pressure: event.pointerType === "pen" ? Math.max(.2, event.pressure) : 1,
 										points: [start]
 									});
@@ -3464,6 +3625,8 @@ window.__ModuleLoader__.load({
 									[
 										"select",
 										"pen",
+										"pencil",
+										"marker",
 										"text",
 										"eraser"
 									].map((name) => {
@@ -3476,13 +3639,15 @@ window.__ModuleLoader__.load({
 										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 											type: "button",
 											"aria-label": label,
-											title: label,
+											title: drawing ? `${label} · ${t(`sketchBrushHint_${name}`)}` : label,
 											"aria-pressed": drawing ? tool === "pen" && brush === name : tool === name,
 											disabled: agentLocked || busy,
 											onClick: () => {
-												setTool(drawing ? "pen" : name);
-												if (name !== "select") setSelection(null);
-												if (drawing) setBrush(name);
+												if (drawing) chooseBrush(name);
+												else {
+													setTool(name);
+													if (name !== "select") setSelection(null);
+												}
 											},
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
 												name,
@@ -3493,13 +3658,30 @@ window.__ModuleLoader__.load({
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 										className: "codexSketchShapeToggle",
 										type: "button",
+										"aria-label": t("sketchShapes"),
 										"aria-expanded": shapesOpen,
+										"aria-pressed": [
+											"line",
+											"arrow",
+											"rectangle",
+											"circle"
+										].includes(tool),
 										disabled: agentLocked || busy,
 										onClick: () => setShapesOpen((v) => !v),
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-											name: "rectangle",
+											name: [
+												"line",
+												"arrow",
+												"rectangle",
+												"circle"
+											].includes(tool) ? tool : "rectangle",
 											size: 23
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchShapes") })]
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t([
+											"line",
+											"arrow",
+											"rectangle",
+											"circle"
+										].includes(tool) ? `sketchTool_${tool}` : "sketchShapes") })]
 									}),
 									shapesOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "codexSketchShapeMenu",
@@ -3510,6 +3692,7 @@ window.__ModuleLoader__.load({
 											"circle"
 										].map((name) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
+											"aria-pressed": tool === name,
 											onClick: () => {
 												setTool(name);
 												setSelection(null);
@@ -3529,20 +3712,6 @@ window.__ModuleLoader__.load({
 										checked: fillShape,
 										onChange: (e) => setFillShape(e.target.checked)
 									}), t("sketchFill")] }) : null,
-									tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-										"aria-label": t("sketchBrush"),
-										value: brush,
-										onChange: (e) => setBrush(e.target.value),
-										disabled: agentLocked || busy,
-										children: [
-											"pen",
-											"pencil",
-											"marker"
-										].map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-											value: b,
-											children: t(`sketchBrush_${b}`)
-										}, b))
-									}) : null,
 									selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 										className: "codexSketchObjectActions",
 										children: [
@@ -3649,7 +3818,7 @@ window.__ModuleLoader__.load({
 .codexLayerBrush>select{background:var(--sketch-bg);color:inherit;border:1px solid var(--sketch-line);border-radius:8px;padding:6px}
 
 .codexSketchBackgroundStatus{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;gap:8px;align-items:center;padding:6px 10px;border-radius:12px;background:var(--dsw-alias-bg-layer-1,#f5f5f7);color:var(--dsw-alias-label-primary,#202124);border:1px solid #8883;box-shadow:0 4px 16px #0002;font:12px system-ui}.codexSketchBackgroundStatus button{color:inherit;background:none;border:0;cursor:pointer}
-.codexSketchAgentStatus{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;color:var(--sketch-muted);font-size:12px}.codexSketchAgentStatus button{padding:3px 6px;border-radius:6px;background:var(--sketch-line)}
+.codexSketchAgentStatus{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;color:var(--sketch-muted);font-size:12px}.codexSketchAgentStatus button{min-height:30px;padding:4px 10px;border-radius:16px;background:var(--sketch-line)}.codexSketchAgentStatus{align-self:center;max-width:100%;min-height:34px;padding:0 6px;flex-wrap:wrap}.codexSketchBackgroundStatus button{min-height:30px;display:inline-flex;align-items:center;gap:5px}.codexSketchAgentStatus .codexSketchStop,.codexSketchBackgroundStatus .codexSketchStop{font-weight:500;background:var(--sketch-line,#8882);border-radius:16px;padding:4px 10px}
 .codexSketchDialog{--sketch-bg:var(--dsw-alias-bg-layer-1,#f5f5f7);--sketch-fg:var(--dsw-alias-label-primary,#202124);--sketch-muted:var(--dsw-alias-label-secondary,#727279);--sketch-line:var(--dsw-alias-border-l2,#8883);--sketch-glass:color-mix(in srgb,var(--sketch-bg) 90%,transparent);box-sizing:border-box;width:min(1280px,calc(100vw - 24px));height:94dvh;max-height:94dvh;margin:auto;padding:10px;border:1px solid var(--sketch-line);border-radius:18px;background:var(--sketch-bg);color:var(--sketch-fg);box-shadow:0 24px 90px #0004;overflow:hidden;font:13px/1.4 system-ui}
 .codexSketchDialog[open]{display:flex;flex-direction:column;gap:8px}
 .codexSketchDialog::backdrop{background:#0005;backdrop-filter:blur(12px)}
@@ -3707,7 +3876,7 @@ window.__ModuleLoader__.load({
 `;
 		//#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);
@@ -3720,6 +3889,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: () => {
@@ -3832,6 +4002,11 @@ window.__ModuleLoader__.load({
 			sketchSizeShort: "粗细",
 			sketchObjectDuplicate: "复制对象",
 			sketchObjectDelete: "删除对象",
+			sketchBrushHint_pen: "实色圆头墨线",
+			sketchBrushHint_pencil: "细腻颗粒，叠画加深",
+			sketchBrushHint_marker: "半透明平头，适合高亮",
+			sketchDismissStatus: "收起提示",
+			sketchRunResumeHint: "允许 Agent 接收后续绘图请求，不会自动重发消息",
 			sketchTool_select: "选择",
 			sketchTool_text: "文字",
 			sketchTool_arrow: "箭头",
@@ -4238,6 +4413,11 @@ window.__ModuleLoader__.load({
 			sketchSizeShort: "Size",
 			sketchObjectDuplicate: "Duplicate object",
 			sketchObjectDelete: "Delete object",
+			sketchBrushHint_pen: "Solid round ink",
+			sketchBrushHint_pencil: "Grain builds with repeated strokes",
+			sketchBrushHint_marker: "Translucent flat tip for highlights",
+			sketchDismissStatus: "Dismiss status",
+			sketchRunResumeHint: "Allow subsequent drawing requests; does not resend a message",
 			sketchTool_select: "Select",
 			sketchTool_text: "Text",
 			sketchTool_arrow: "Arrow",
@@ -6461,7 +6641,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.1.0-beta.4";
+		const PACKAGE_VERSION = "2.1.0";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -8778,6 +8958,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();
@@ -8886,6 +9068,7 @@ window.__ModuleLoader__.load({
 					t,
 					sessionId,
 					rpc,
+					sessionState: sketchSessions.get(sessionId),
 					registerOpen: (callback) => {
 						sketchOpeners.set(sessionId, callback);
 						return () => {