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

package/lib/client.js

@@ -386,6 +386,7 @@ window.__ModuleLoader__.load({
 			"image/original/chunk",
 			"sketch/connect",
 			"sketch/poll",
+			"sketch/claim",
 			"sketch/result",
 			"sketch/disconnect"
 		]);
@@ -697,7 +698,34 @@ window.__ModuleLoader__.load({
 				context.lineWidth = stroke.width * (stroke.brush === "pencil" ? .55 : 1) * (stroke.pressure ?? 1);
 				context.beginPath();
 				const last = stroke.points.at(-1);
-				if (stroke.shape === "line") {
+				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();
@@ -732,6 +760,46 @@ window.__ModuleLoader__.load({
 			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,
@@ -809,15 +877,15 @@ window.__ModuleLoader__.load({
 			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.points;
+			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.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.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") {
+			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++) {
@@ -1345,12 +1413,63 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		//#endregion
+		//#region src/sketch-objects.js
+		const objectId = (stroke, index) => stroke.id ?? `legacy-${index}`;
+		const identifyObjects = (doc) => ({
+			...doc,
+			layers: doc.layers.map((layer) => ({
+				...layer,
+				strokes: layer.strokes.map((s, i) => s.id ? s : {
+					...s,
+					id: objectId(s, i)
+				})
+			}))
+		});
+		function objectBounds(stroke) {
+			const xs = stroke.points.map((p) => p.x), ys = stroke.points.map((p) => p.y);
+			return {
+				x: Math.min(...xs),
+				y: Math.min(...ys),
+				width: Math.max(...xs) - Math.min(...xs),
+				height: Math.max(...ys) - Math.min(...ys)
+			};
+		}
+		function transformObject(stroke, { dx = 0, dy = 0, scaleX = 1, scaleY = 1 }) {
+			if (![
+				dx,
+				dy,
+				scaleX,
+				scaleY
+			].every(Number.isFinite) || scaleX <= 0 || scaleY <= 0) throw Error("Invalid object transform");
+			const box = objectBounds(stroke);
+			const points = stroke.points.map((p) => ({
+				x: box.x + (p.x - box.x) * scaleX + dx,
+				y: box.y + (p.y - box.y) * scaleY + dy
+			}));
+			if (points.some((p) => p.x < 0 || p.x > 1 || p.y < 0 || p.y > 1)) throw Error("Object would leave the canvas");
+			return {
+				...stroke,
+				points
+			};
+		}
+		function sketchObjectSummary(doc) {
+			return doc.layers.flatMap((layer) => layer.strokes.map((stroke, i) => ({
+				layer: layer.id,
+				id: objectId(stroke, i),
+				shape: stroke.shape,
+				color: stroke.color,
+				bounds: objectBounds(stroke),
+				...stroke.text ? { text: stroke.text } : {}
+			})));
+		}
 		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.",
+			coordinates: "Assign short meaningful stroke id values for later edits. Text uses two opposite box corners and text content; width is font size in pixels, automatic fitting within the box. Arrow uses two endpoints. Normalized x/y in [0,1]; width is canvas pixels. Read documentId and revision before editing.",
+			shapes: "line: exactly two endpoints; rectangle/circle: exactly two opposite bounding-box corners (circle draws an ellipse within that box); polygon: three or more vertices, closed automatically; pen: ordered path points. bezier: start point, then groups of control1/control2/end; use 4 points for one cubic curve, max 64 segments. Prefer bezier for smooth designed curves instead of many pen samples. fill:true closes and fills the curve. fill:true fills rectangle/circle/polygon. Layers and strokes paint in list order, later ones on top. All commands needed for drawing are described here; no source-code search is required.",
 			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},...]}",
+				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\"}",
+				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\"}"
 			},
 			limits: {
@@ -1363,7 +1482,7 @@ window.__ModuleLoader__.load({
 		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;
+			let doc = identifyObjects(source);
 			for (const command of commands) {
 				if (!command || typeof command !== "object") throw Error("Invalid command");
 				if (command.op === "resize") {
@@ -1387,29 +1506,93 @@ window.__ModuleLoader__.load({
 					doc = next;
 					continue;
 				}
+				if (command.op === "object") {
+					const layer = doc.layers.find((l) => l.id === (command.layer ?? doc.active)), index = layer?.strokes.findIndex((s) => s.id === command.id);
+					if (!layer?.visible || index < 0 || index === void 0) throw Error("Object missing or hidden; inspect again");
+					const strokes = layer.strokes.slice(), original = strokes[index];
+					if (command.action === "delete") strokes.splice(index, 1);
+					else if (command.action === "duplicate") strokes.splice(index + 1, 0, {
+						...original,
+						id: crypto.randomUUID(),
+						points: original.points.map((p) => ({ ...p }))
+					});
+					else if (command.action === "update") {
+						const patch = command.patch ?? {};
+						if (Object.keys(patch).some((k) => ![
+							"color",
+							"width",
+							"opacity",
+							"fill",
+							"text",
+							"points"
+						].includes(k))) throw Error("Unsupported object property");
+						const changed = command.transform ? transformObject({
+							...original,
+							...patch
+						}, command.transform) : {
+							...original,
+							...patch
+						};
+						strokes[index] = {
+							...applySketchCommands({
+								...doc,
+								layers: [{
+									...layer,
+									strokes: []
+								}]
+							}, [{
+								...changed,
+								op: "stroke",
+								layer: layer.id
+							}]).layers[0].strokes[0],
+							brush: original.brush ?? "pen",
+							...original.pressure !== void 0 ? { pressure: original.pressure } : {}
+						};
+					} else throw Error("Unknown object action");
+					doc = {
+						...doc,
+						layers: doc.layers.map((l) => l === layer ? {
+							...l,
+							strokes
+						} : l)
+					};
+					continue;
+				}
 				if (command.op !== "stroke") throw Error("Unknown command");
-				const { points, color, shape = "pen", width = 2, opacity = 1, fill = false } = command;
+				const { points, color, shape = "pen", width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
 				if (![
 					"pen",
 					"line",
 					"rectangle",
 					"circle",
 					"polygon",
+					"bezier",
+					"arrow",
+					"text",
 					"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",
+					"arrow",
+					"text",
 					"rectangle",
 					"circle"
 				].includes(shape) && points.length !== 2 || shape === "polygon" && points.length < 3) throw Error("Invalid shape points");
+				if (shape === "bezier" && (points.length < 4 || points.length > 193 || (points.length - 1) % 3 !== 0)) throw Error("Bezier needs a start point followed by groups of two controls and an endpoint (max 64 segments)");
 				if (fill && ![
 					"rectangle",
 					"circle",
-					"polygon"
+					"polygon",
+					"bezier"
 				].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");
+				if (shape === "text" && (typeof command.text !== "string" || !command.text.trim() || command.text.length > 500 || points[0].x === points[1].x || points[0].y === points[1].y)) throw Error("Text requires 1–500 characters and a non-empty bounding box");
+				const id = command.id ?? crypto.randomUUID();
+				if (typeof id !== "string" || !id.length || id.length > 100 || layer.strokes.some((s) => s.id === id)) throw Error("Invalid or duplicate object id");
 				const stroke = {
+					id,
+					...shape === "text" ? { text: command.text } : {},
 					shape,
 					color,
 					width,
@@ -1434,15 +1617,24 @@ window.__ModuleLoader__.load({
 		}
 		function createSketchCommandSession(adapter) {
 			const completed = /* @__PURE__ */ new Map();
-			let pending = false;
+			let pending = false, cachedCharacters = 0;
 			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.action === "inspect") {
+					const offset = request.offset ?? 0, objects = adapter.objects?.() ?? [];
+					if (!Number.isInteger(offset) || offset < 0) throw Error("offset must be a non-negative integer");
+					return {
+						...current,
+						objects: objects.slice(offset, offset + 50),
+						objectCount: objects.length,
+						...offset + 50 < objects.length ? { nextOffset: offset + 50 } : {},
+						...request.objectId ? { object: adapter.object?.(request.objectId, request.layer) } : {},
+						recentRequests: [...completed.values()].slice(-8).map((entry) => entry.receipt),
+						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 {
@@ -1451,16 +1643,25 @@ window.__ModuleLoader__.load({
 				};
 				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 key = `${current.documentId}:${request.requestId}`, fingerprint = JSON.stringify({
+					...request,
+					runId: void 0
+				});
 				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");
+				let changedObjects;
 				if (request.action === "apply") {
-					const next = applySketchCommands(adapter.document(), request.commands);
+					const before = adapter.document(), next = applySketchCommands(before, request.commands);
 					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) => ({
+						layer: l.id,
+						id: s.id
+					})));
 				} else {
 					if (request.name !== void 0 && (typeof request.name !== "string" || request.name.length > 60)) throw Error("Invalid draft name");
 					pending = true;
@@ -1470,12 +1671,28 @@ window.__ModuleLoader__.load({
 						pending = false;
 					}
 				}
-				const result = adapter.snapshot();
+				const result = {
+					...adapter.snapshot(),
+					...changedObjects ? {
+						changedObjects: changedObjects.slice(0, 100),
+						changedObjectCount: changedObjects.length
+					} : {}
+				};
 				completed.set(key, {
 					fingerprint,
-					result
+					result,
+					receipt: {
+						requestId: request.requestId,
+						action: request.action,
+						revision: result.revision
+					}
 				});
-				if (completed.size > 128) completed.delete(completed.keys().next().value);
+				cachedCharacters += fingerprint.length;
+				while (completed.size > 1 && (completed.size > 128 || cachedCharacters > 4e6)) {
+					const oldest = completed.keys().next().value;
+					cachedCharacters -= completed.get(oldest).fingerprint.length;
+					completed.delete(oldest);
+				}
 				return result;
 			};
 		}
@@ -1669,6 +1886,7 @@ window.__ModuleLoader__.load({
 			}, [open, working]);
 			useSketchDismiss(open, setOpen, host, [".codexSketchFiles"]);
 			const run = async (operation) => {
+				if (disabled || working) return;
 				setWorking(true);
 				onWorking(true);
 				try {
@@ -1724,7 +1942,7 @@ window.__ModuleLoader__.load({
 								className: "codexSketchFileActions",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									disabled: working,
+									disabled: disabled || working,
 									onClick: () => void run(async () => {
 										await fresh();
 										setName("");
@@ -1733,7 +1951,7 @@ window.__ModuleLoader__.load({
 									children: t("sketchNew")
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									disabled: working,
+									disabled: disabled || working,
 									onClick: () => input.current.click(),
 									children: t("sketchImport")
 								})]
@@ -1747,7 +1965,7 @@ window.__ModuleLoader__.load({
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								disabled: working,
+								disabled: disabled || working,
 								onClick: () => void run(async () => {
 									await save(name);
 									await refresh();
@@ -1765,14 +1983,14 @@ window.__ModuleLoader__.load({
 								].map(([value, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									"aria-pressed": format === value,
-									disabled: working,
+									disabled: disabled || working,
 									onClick: () => setFormat(value),
 									children: label
 								}, value))
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								disabled: working || !hasContent,
+								disabled: disabled || working || !hasContent,
 								onClick: () => void run(async () => {
 									await download(format);
 									setOpen(false);
@@ -1785,7 +2003,7 @@ window.__ModuleLoader__.load({
 								className: "codexSketchDraftList",
 								children: rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									disabled: working,
+									disabled: disabled || working,
 									onClick: () => void run(async () => {
 										await load(row);
 										setName(row.name);
@@ -1794,7 +2012,7 @@ window.__ModuleLoader__.load({
 									children: row.name
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
-									disabled: working,
+									disabled: disabled || working,
 									"aria-label": `${t("sketchDeleteDraft")} ${row.name}`,
 									onClick: () => {
 										if (remove !== row.id) {
@@ -1824,6 +2042,9 @@ window.__ModuleLoader__.load({
 		//#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",
@@ -1858,9 +2079,158 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#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);
+			const start = () => {
+				if (!active.current) {
+					active.current = true;
+					onStart?.();
+				}
+			};
+			const end = () => {
+				if (active.current) {
+					active.current = false;
+					onEnd?.();
+				}
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "codexSketchSizeControl",
+				title: label,
+				children: [
+					modes ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "codexSketchSizeModes",
+						children: modes.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-pressed": mode === item.value,
+							disabled,
+							onClick: () => {
+								end();
+								onModeChange(item.value);
+							},
+							children: item.label
+						}, item.value))
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "range",
+						"aria-label": label,
+						"aria-orientation": "vertical",
+						min,
+						max,
+						value,
+						disabled,
+						onPointerDown: start,
+						onPointerUp: end,
+						onPointerCancel: end,
+						onBlur: end,
+						onKeyDown: start,
+						onKeyUp: end,
+						onChange: (event) => {
+							start();
+							onChange(Number(event.target.value));
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("output", { children: [Math.round(value), suffix] })
+				]
+			});
+		}
+		//#endregion
+		//#region src/sketch-agent-run.js
+		function createSketchAgentRun({ execute, open, changed, busy = () => false, previewEnabled = () => false, idleMs = 18e4 }) {
+			let state = "idle", generation = 0, runNumber = 0, pending = false, runId, timer, completed;
+			const update = (next) => {
+				state = next;
+				changed(next);
+			};
+			const clear = () => {
+				clearTimeout(timer);
+				timer = void 0;
+			};
+			const expire = () => {
+				clear();
+				generation++;
+				if (state !== "stopped") update("failed");
+			};
+			return {
+				get state() {
+					return state;
+				},
+				get locked() {
+					return state === "drawing";
+				},
+				stop() {
+					clear();
+					generation++;
+					update("stopped");
+				},
+				resume() {
+					clear();
+					generation++;
+					update("idle");
+				},
+				fail: expire,
+				dispose() {
+					clear();
+					generation++;
+					state = "idle";
+				},
+				async execute(request) {
+					if (!request || typeof request !== "object") throw Error("Invalid sketch request");
+					if (state === "stopped") throw Error("Drawing stopped by the user. Do not retry until they enable drawing again.");
+					if (pending || busy()) throw Error("Sketch is being edited; retry after it settles");
+					if (request.action !== "inspect" && request.runId !== runId) throw Error("Drawing run changed; inspect again");
+					if (state === "finished" && completed?.key === JSON.stringify(request)) return completed.value;
+					if (state !== "drawing" && request.action !== "inspect") throw Error("Start drawing with inspect");
+					clear();
+					const version = generation;
+					pending = true;
+					try {
+						if (state !== "drawing") {
+							runId = `run-${++runNumber}`;
+							completed = void 0;
+							update("drawing");
+							open();
+						}
+						const value = await execute(request.action === "finish" ? {
+							...request,
+							action: "save"
+						} : request);
+						if (version !== generation) throw Error("Drawing interrupted");
+						if (request.action !== "finish") return {
+							...value,
+							runId
+						};
+						const result = previewEnabled() ? await execute({
+							action: "preview",
+							documentId: value.documentId
+						}) : value;
+						if (version !== generation) throw Error("Drawing interrupted");
+						completed = {
+							key: JSON.stringify(request),
+							value: {
+								...result,
+								runId
+							}
+						};
+						update("finished");
+						return completed.value;
+					} catch (error) {
+						if (version === generation) update("failed");
+						throw error;
+					} finally {
+						pending = false;
+						if (state === "drawing") {
+							timer = setTimeout(expire, idleMs);
+							timer.unref?.();
+						}
+					}
+				}
+			};
+		}
+		//#endregion
 		//#region src/sketch-agent-client.js
 		function connectSketchAgent(rpc, sessionId, execute, report, pollDelay = () => 350) {
-			let stopped = false, token, timer;
+			let stopped = false, token, timer, attempts = 0;
 			const call = (endpoint, payload) => rpc.call(CHANNEL, `sketch/${endpoint}`, {
 				sessionId,
 				token,
@@ -1871,9 +2241,14 @@ window.__ModuleLoader__.load({
 					const tasks = await call("poll");
 					for (const task of tasks) {
 						if (stopped) break;
+						if (task.cancelled) {
+							report("Sketch operation interrupted; completed strokes are preserved.");
+							continue;
+						}
 						let value, error;
 						try {
-							if (task.expiresAt < Date.now()) throw Error("Sketch command expired; inspect before retrying");
+							if (task.expiresAt < Date.now() || !await call("claim", { id: task.id })) throw Error("Sketch command expired or cancelled; inspect before retrying");
+							if (stopped) break;
 							value = await execute(task.request);
 						} catch (cause) {
 							error = cause.message;
@@ -1890,29 +2265,23 @@ window.__ModuleLoader__.load({
 				}
 				if (!stopped) timer = setTimeout(poll, pollDelay());
 			};
-			call("connect").then((value) => {
+			const connect = () => void call("connect").then((value) => {
 				token = value.token;
 				if (stopped) call("disconnect").catch(() => {});
 				else poll();
 			}, (error) => {
-				if (!stopped) report(error.message);
+				if (stopped) return;
+				const leaseConflict = /Another board is connected/.test(error.message);
+				if (++attempts < (leaseConflict ? 8 : 3)) timer = setTimeout(connect, Math.min(3e3, 500 * attempts));
+				else report(error.message);
 			});
+			connect();
 			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 = [
@@ -1924,20 +2293,51 @@ window.__ModuleLoader__.load({
 			"#34c759",
 			"#0088ff"
 		];
-		function SketchStudio({ open, agentEnabled, onOpen, onClose, attachSketch, enabled, t, incoming, sessionId, rpc }) {
+		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);
+			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 [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);
+			const sizeGesture = (0, react.useRef)(false);
+			const [sizeMode, setSizeMode] = (0, react.useState)("size");
+			const showOpacity = tool !== "eraser";
+			const opacityMode = showOpacity && sizeMode === "opacity";
+			const selected = doc.current.layers.find((l) => l.id === selection?.layer)?.strokes.find((s, i) => objectId(s, i) === selection?.id);
+			const editObject = (patch, action = "update") => {
+				if (agentRun.current?.locked || busy || !selected) return;
+				try {
+					const next = applySketchCommands(doc.current, [{
+						op: "object",
+						...selection,
+						action,
+						patch
+					}]);
+					if (!sizeGesture.current) checkpoint();
+					doc.current = next;
+					schedule();
+					if (action === "delete") setSelection(null);
+				} catch (e) {
+					setError(e.message);
+				}
+			};
+			const pickColor = (value) => {
+				setColor(value);
+				if (selected) editObject({ color: value });
+			};
 			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);
+			const cursor = useSketchCursor(canvas, cursorRing, width, tool === "pen" ? brush : "pen", navigation.view.scale, !open || navigation.space || busy || agentLocked || tool === "select" || tool === "text");
+			useSketchDismiss(shapesOpen, setShapesOpen, dialog, [".codexSketchShapeMenu", ".codexSketchShapeToggle"]);
 			useSketchDismiss(layersOpen, setLayersOpen, dialog, [".codexSketchLayers", ".codexSketchLayersToggle"]);
 			useSketchDismiss(picturesOpen, setPicturesOpen, dialog, [".codexSketchPictures", ".codexSketchPicturesToggle"]);
 			const paint = () => {
@@ -1967,7 +2367,7 @@ window.__ModuleLoader__.load({
 				redo.current = [];
 			};
 			const change = (action, id, value) => {
-				if (busy || active.current) return;
+				if (busy || agentRun.current?.locked || active.current) return;
 				const next = changeSketchLayer(doc.current, action, id, value);
 				if (next === doc.current) return;
 				if (action !== "select") checkpoint();
@@ -1979,12 +2379,14 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				if (open) {
 					dialog.current.showModal();
+					canvas.current.width = doc.current.width ?? 1024;
 					paint();
 				} else dialog.current?.close();
 			}, [open]);
 			(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) => {
@@ -2007,7 +2409,9 @@ window.__ModuleLoader__.load({
 			const replace = (next, decoded, identity) => {
 				documentId.current = crypto.randomUUID();
 				documentRevision.current++;
-				doc.current = structuredClone(next);
+				doc.current = identifyObjects(structuredClone(next));
+				setSelection(null);
+				setTextEdit(null);
 				images.current = decoded;
 				cache.current.clear();
 				undo.current = [];
@@ -2068,6 +2472,10 @@ window.__ModuleLoader__.load({
 				schedule();
 			};
 			const close = async () => {
+				if (agentRun.current?.locked) {
+					onClose();
+					return;
+				}
 				if (busy || active.current) return;
 				setBusy(true);
 				try {
@@ -2080,7 +2488,7 @@ window.__ModuleLoader__.load({
 				}
 			};
 			const runFile = async (operation) => {
-				if (busy || active.current) return;
+				if (busy || agentRun.current?.locked || active.current) return;
 				setBusy(true);
 				setError("");
 				try {
@@ -2092,15 +2500,33 @@ window.__ModuleLoader__.load({
 				}
 			};
 			(0, react.useEffect)(() => {
-				if (open && incoming && incoming !== received.current) {
+				if (open && !agentLocked && incoming && incoming !== received.current) {
 					received.current = incoming;
 					runFile(() => importImage(incoming.file));
 				}
-			}, [open, incoming]);
+			}, [
+				open,
+				incoming,
+				agentLocked
+			]);
 			const keyDown = (event) => {
 				if (event.target.closest("input,textarea,select,[contenteditable=true]") || event.isComposing || busy || active.current) return;
 				if (!navigation.shortcuts) return;
 				if (navigation.keyDown(event)) return;
+				if (agentRun.current?.locked) return;
+				if (selection && ["Delete", "Backspace"].includes(event.key)) {
+					event.preventDefault();
+					editObject({}, "delete");
+					return;
+				}
+				if (event.key.toLowerCase() === "v") {
+					setTool("select");
+					return;
+				}
+				if (event.key.toLowerCase() === "t") {
+					setTool("text");
+					return;
+				}
 				const key = event.key.toLowerCase(), command = event.ctrlKey || event.metaKey;
 				if (command && [
 					"z",
@@ -2137,6 +2563,32 @@ window.__ModuleLoader__.load({
 				const gesture = active.current;
 				if (!gesture || gesture.id !== event.pointerId || busy) return;
 				const rect = bounds ?? canvas.current.getBoundingClientRect();
+				if (gesture.object) {
+					const point = sketchPoint(event.clientX, event.clientY, rect);
+					if (!point) return;
+					try {
+						const box = objectBounds(gesture.object);
+						const stroke = gesture.handle === "end" ? {
+							...gesture.object,
+							points: [gesture.object.points[0], point]
+						} : gesture.handle === "size" ? transformObject(gesture.object, {
+							scaleX: Math.max(.001, point.x - box.x) / Math.max(.001, box.width),
+							scaleY: Math.max(.001, point.y - box.y) / Math.max(.001, box.height)
+						}) : transformObject(gesture.object, {
+							dx: point.x - gesture.start.x,
+							dy: point.y - gesture.start.y
+						});
+						doc.current = {
+							...doc.current,
+							layers: doc.current.layers.map((l) => l.id === gesture.layer ? {
+								...l,
+								strokes: l.strokes.map((s) => s.id === gesture.object.id ? stroke : s)
+							} : l)
+						};
+						schedule();
+					} catch {}
+					return;
+				}
 				const native = event.nativeEvent ?? event;
 				const events = native.getCoalescedEvents?.() ?? [];
 				for (const sample of events.length ? [...events, native] : [native]) {
@@ -2157,6 +2609,7 @@ window.__ModuleLoader__.load({
 						const stroke = layer.strokes.at(-1);
 						if ([
 							"line",
+							"arrow",
 							"rectangle",
 							"circle"
 						].includes(stroke.shape)) {
@@ -2194,13 +2647,29 @@ window.__ModuleLoader__.load({
 					const gesture = active.current, stroke = doc.current.layers.find((layer) => layer.id === gesture.layer)?.strokes.at(-1);
 					if (gesture.smoothing && stroke) stroke.points = smoothStrokePoints(stroke.points, gesture.smoothing);
 				}
+				const drawn = active.current;
+				if (!cancel && !drawn.object && [
+					"line",
+					"arrow",
+					"rectangle",
+					"circle"
+				].includes(tool)) {
+					const stroke = doc.current.layers.find((l) => l.id === drawn.layer)?.strokes.at(-1);
+					if (stroke) {
+						setSelection({
+							layer: drawn.layer,
+							id: stroke.id
+						});
+						setTool("select");
+					}
+				}
 				active.current = null;
 				if (canvas.current.hasPointerCapture(event.pointerId)) canvas.current.releasePointerCapture(event.pointerId);
 				if (cancel) doc.current = undo.current.pop() ?? doc.current;
 				schedule();
 			};
 			const history = (direction) => {
-				if (busy || active.current) return;
+				if (busy || agentRun.current?.locked || active.current) return;
 				const source = direction === "undo" ? undo : redo, target = direction === "undo" ? redo : undo;
 				if (!source.current.length) return;
 				documentRevision.current++;
@@ -2210,9 +2679,10 @@ window.__ModuleLoader__.load({
 				schedule();
 			};
 			Object.assign(agentAdapter.current, {
-				available: () => open && enabled,
+				available: () => enabled && agentEnabled,
+				previewEnabled: () => agentPreview,
 				open: () => onOpen(),
-				busy: () => busy || Boolean(active.current),
+				busy: () => busy || Boolean(active.current) || Boolean(textEdit) || sizeGesture.current,
 				document: () => doc.current,
 				snapshot: () => ({
 					documentId: documentId.current,
@@ -2229,6 +2699,15 @@ window.__ModuleLoader__.load({
 					})),
 					strokeCount: strokeCount(doc.current)
 				}),
+				objects: () => sketchObjectSummary(doc.current),
+				object: (id, layer = doc.current.active) => {
+					const target = doc.current.layers.find((l) => l.id === layer)?.strokes.find((s, i) => objectId(s, i) === id);
+					if (!target) throw Error("Object not found");
+					return {
+						...target,
+						id
+					};
+				},
 				commit: (next) => {
 					checkpoint();
 					doc.current = next;
@@ -2239,24 +2718,27 @@ window.__ModuleLoader__.load({
 					paint();
 					return canvas.current.toDataURL("image/png");
 				},
-				save: async (name) => {
-					setBusy(true);
-					try {
-						await save(name);
-					} finally {
-						setBusy(false);
-					}
-				}
+				save
 			});
 			agentSession.current ??= createSketchCommandSession(agentAdapter.current);
+			agentRun.current ??= createSketchAgentRun({
+				execute: (request) => agentSession.current(request),
+				open: () => agentAdapter.current.open(),
+				changed: (state) => {
+					setAgentState(state);
+					setNoticeHidden(false);
+				},
+				busy: () => agentAdapter.current.busy(),
+				previewEnabled: () => agentAdapter.current.previewEnabled()
+			});
 			(0, react.useEffect)(() => {
-				if (!open || !enabled || !agentEnabled) return;
+				if (!enabled || !agentEnabled) return;
 				const api = Object.freeze({
 					version: 1,
 					sessionId,
-					execute: (request) => agentSession.current(request),
+					execute: (request) => agentRun.current.execute(request),
 					export: async (format) => {
-						if (agentAdapter.current.busy()) throw Error("Sketch is being edited");
+						if (agentAdapter.current.busy() || agentRun.current.locked) throw Error("Sketch is being edited");
 						const { blob, extension } = await agentAdapter.current.export(format);
 						const data = new Uint8Array(await blob.arrayBuffer());
 						let raw = "";
@@ -2273,7 +2755,6 @@ window.__ModuleLoader__.load({
 					if (window.dshSketchAgent === api) delete window.dshSketchAgent;
 				};
 			}, [
-				open,
 				enabled,
 				agentEnabled,
 				rpc,
@@ -2282,14 +2763,17 @@ window.__ModuleLoader__.load({
 			(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);
+				agentRun.current.resume();
+				const disconnect = connectSketchAgent(rpc, sessionId, (request) => {
+					if (!live) throw Error("Sketch session disconnected");
+					return agentRun.current.execute(request);
+				}, (message) => {
+					agentRun.current.fail();
+					setError(message);
+				}, () => 350);
 				return () => {
 					live = false;
+					agentRun.current.stop();
 					disconnect();
 				};
 			}, [
@@ -2299,7 +2783,7 @@ window.__ModuleLoader__.load({
 				sessionId
 			]);
 			const attach = async () => {
-				if (!enabled || busy) return;
+				if (!enabled || busy || agentRun.current?.locked) return;
 				setBusy(true);
 				setError("");
 				try {
@@ -2342,13 +2826,36 @@ window.__ModuleLoader__.load({
 				link.remove();
 				setTimeout(() => URL.revokeObjectURL(url), 1e4);
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
+			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: "×"
+				})]
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
 				ref: dialog,
 				className: "codexSketchDialog codexSketchStudio codexLayerStudio",
 				"aria-label": t("sketchTitle"),
 				onKeyDown: keyDown,
 				onKeyUp: navigation.keyUp,
 				onPaste: (event) => {
+					if (agentRun.current?.locked) {
+						event.preventDefault();
+						event.stopPropagation();
+						return;
+					}
 					if (event.target.closest("input,textarea")) return;
 					const file = Array.from(event.clipboardData.items).find((item) => item.type.startsWith("image/"))?.getAsFile();
 					if (file) {
@@ -2383,7 +2890,7 @@ window.__ModuleLoader__.load({
 								type: "button",
 								"aria-label": t("sketchCancel"),
 								title: t("sketchCancel"),
-								disabled: busy,
+								disabled: busy && !agentLocked,
 								onClick: close,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, { name: "close" })
 							}),
@@ -2394,7 +2901,7 @@ window.__ModuleLoader__.load({
 								importImage,
 								download,
 								hasContent: doc.current.layers.some((l) => l.visible && (l.image || l.strokes.length)),
-								disabled: busy,
+								disabled: agentLocked || busy,
 								t,
 								report: setError,
 								onWorking: setBusy
@@ -2413,7 +2920,7 @@ window.__ModuleLoader__.load({
 											className: "codexSketchRound",
 											"aria-label": t(name === "undo" ? "sketchUndo" : "sketchRedo"),
 											title: t(name === "undo" ? "sketchUndo" : "sketchRedo"),
-											disabled: busy || !(name === "undo" ? undo : redo).current.length,
+											disabled: agentLocked || busy || !(name === "undo" ? undo : redo).current.length,
 											onClick: () => history(name),
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
 												name,
@@ -2426,9 +2933,9 @@ window.__ModuleLoader__.load({
 										"aria-label": t("sketchRatio"),
 										title: t("sketchRatioHint"),
 										value: doc.current.ratio ?? "1:1",
-										disabled: busy,
+										disabled: agentLocked || busy,
 										onChange: (event) => {
-											if (active.current) return;
+											if (active.current || agentRun.current?.locked) return;
 											const next = resizeSketch(doc.current, event.target.value);
 											if (next === doc.current) return;
 											checkpoint();
@@ -2469,7 +2976,7 @@ window.__ModuleLoader__.load({
 								type: "button",
 								className: "codexSketchConfirm",
 								"aria-label": t("sketchAttach"),
-								disabled: busy || !enabled || !doc.current.layers.some((l) => l.visible && (l.strokes.length || l.image)),
+								disabled: agentLocked || busy || !enabled || !doc.current.layers.some((l) => l.visible && (l.strokes.length || l.image)),
 								onClick: () => void attach(),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
 									name: "check",
@@ -2478,6 +2985,25 @@ 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]
+					}) : null,
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: `codexLayerBody ${layersOpen ? "withLayers" : ""}`,
 						children: [
@@ -2485,7 +3011,7 @@ window.__ModuleLoader__.load({
 								tabIndex: 0,
 								style: {
 									transform: `translate(${navigation.view.x}px,${navigation.view.y}px) scale(${navigation.view.scale})`,
-									cursor: navigation.space ? "grab" : "none",
+									cursor: navigation.space ? "grab" : agentLocked ? "default" : tool === "select" ? "default" : tool === "text" ? "text" : "none",
 									"--sketch-ratio": (doc.current.width ?? 1024) / (doc.current.height ?? 1024)
 								},
 								ref: canvas,
@@ -2495,7 +3021,69 @@ window.__ModuleLoader__.load({
 								onPointerDown: (event) => {
 									if (busy || !enabled || active.current) return;
 									if (navigation.down(event)) return;
+									if (agentRun.current?.locked) return;
 									if (event.button !== 0) return;
+									const point = sketchPoint(event.clientX, event.clientY, canvas.current.getBoundingClientRect());
+									if (!point) return;
+									if (tool === "text") {
+										setTextEdit({
+											point,
+											value: ""
+										});
+										return;
+									}
+									if (tool === "select") {
+										doc.current = identifyObjects(doc.current);
+										if (selected) {
+											const b = objectBounds(selected), end = ["line", "arrow"].includes(selected.shape) ? selected.points.at(-1) : {
+												x: b.x + b.width,
+												y: b.y + b.height
+											}, rect = canvas.current.getBoundingClientRect();
+											if (Math.hypot((end.x - point.x) * rect.width, (end.y - point.y) * rect.height) < 12) {
+												checkpoint();
+												active.current = {
+													id: event.pointerId,
+													layer: selection.layer,
+													object: {
+														...selected,
+														id: selection.id
+													},
+													start: point,
+													handle: ["line", "arrow"].includes(selected.shape) ? "end" : "size"
+												};
+												canvas.current.setPointerCapture(event.pointerId);
+												return;
+											}
+										}
+										let hit;
+										for (const l of doc.current.layers.slice().reverse()) {
+											if (!l.visible) continue;
+											const stroke = l.strokes.slice().reverse().find((s) => s.shape !== "eraser" && strokeHit(s, point, 6, doc.current.width, doc.current.height));
+											if (stroke) {
+												hit = {
+													layer: l.id,
+													stroke
+												};
+												break;
+											}
+										}
+										setSelection(hit ? {
+											layer: hit.layer,
+											id: hit.stroke.id
+										} : null);
+										if (hit) {
+											checkpoint();
+											active.current = {
+												id: event.pointerId,
+												layer: hit.layer,
+												object: hit.stroke,
+												start: point
+											};
+											canvas.current.setPointerCapture(event.pointerId);
+										}
+										return;
+									}
+									setSelection(null);
 									cursor.down(event);
 									if (!current.visible) {
 										setError(t("sketchHiddenLayer"));
@@ -2523,6 +3111,7 @@ window.__ModuleLoader__.load({
 									const layer = layers.find((layer) => layer.id === doc.current.active);
 									const eraseStroke = tool === "eraser" && eraser === "stroke";
 									if (!eraseStroke) layer.strokes.push({
+										id: crypto.randomUUID(),
 										color,
 										opacity: flow / 100,
 										shape: tool,
@@ -2554,11 +3143,131 @@ window.__ModuleLoader__.load({
 								onPointerUp: (event) => end(event),
 								onPointerCancel: (event) => end(event, true)
 							}),
+							selected && tool === "select" && !agentLocked ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+								className: "codexSketchSelection",
+								viewBox: "0 0 1 1",
+								preserveAspectRatio: "none",
+								style: {
+									"--sketch-ratio": (doc.current.width ?? 1024) / (doc.current.height ?? 1024),
+									transform: `translate(${navigation.view.x}px,${navigation.view.y}px) scale(${navigation.view.scale})`
+								},
+								"aria-hidden": "true",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+									...objectBounds(selected),
+									fill: "none",
+									stroke: "#0088ff",
+									strokeWidth: ".002",
+									strokeDasharray: ".008 .005"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+									cx: ["line", "arrow"].includes(selected.shape) ? selected.points.at(-1).x : objectBounds(selected).x + objectBounds(selected).width,
+									cy: ["line", "arrow"].includes(selected.shape) ? selected.points.at(-1).y : objectBounds(selected).y + objectBounds(selected).height,
+									r: ".007",
+									fill: "white",
+									stroke: "#0088ff",
+									strokeWidth: ".002"
+								})]
+							}) : null,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchSizeControl, {
+								label: t(opacityMode ? "sketchFlow" : selected?.shape === "text" || tool === "text" ? "sketchTextSize" : "sketchWidth"),
+								mode: opacityMode ? "opacity" : "size",
+								modes: showOpacity ? [{
+									value: "size",
+									label: t(selected?.shape === "text" || tool === "text" ? "sketchTextSize" : "sketchSizeShort")
+								}, {
+									value: "opacity",
+									label: t("sketchFlow")
+								}] : void 0,
+								onModeChange: setSizeMode,
+								min: opacityMode ? 5 : 1,
+								max: opacityMode ? 100 : 256,
+								suffix: opacityMode ? "%" : "",
+								value: opacityMode ? (selected?.opacity ?? flow / 100) * 100 : selected?.width ?? width,
+								disabled: agentLocked || busy,
+								onStart: () => {
+									if (selected) {
+										checkpoint();
+										sizeGesture.current = true;
+									}
+								},
+								onEnd: () => {
+									sizeGesture.current = false;
+								},
+								onChange: (value) => {
+									if (opacityMode) {
+										setFlow(value);
+										if (selected) editObject({ opacity: value / 100 });
+									} else {
+										setWidth(value);
+										if (selected) editObject({ width: value });
+									}
+								}
+							}),
+							textEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+								className: "codexSketchTextEditor",
+								onSubmit: (event) => {
+									event.preventDefault();
+									if (!textEdit.value.trim()) {
+										setTextEdit(null);
+										return;
+									}
+									try {
+										if (textEdit.selection) editObject({ text: textEdit.value });
+										else {
+											const a = textEdit.point, b = {
+												x: Math.min(1, a.x + .35),
+												y: Math.min(1, a.y + .15)
+											}, id = crypto.randomUUID();
+											const next = applySketchCommands(doc.current, [{
+												op: "stroke",
+												id,
+												shape: "text",
+												text: textEdit.value,
+												color,
+												width: Math.max(24, width),
+												points: [a, b]
+											}]);
+											checkpoint();
+											doc.current = next;
+											setSelection({
+												layer: doc.current.active,
+												id
+											});
+											schedule();
+										}
+										setTextEdit(null);
+										setTool("select");
+									} catch (e) {
+										setError(e.message);
+									}
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+										autoFocus: true,
+										"aria-label": t("sketchText"),
+										maxLength: 500,
+										value: textEdit.value,
+										onChange: (e) => setTextEdit({
+											...textEdit,
+											value: e.target.value
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "submit",
+										children: t("sketchTextDone")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										onClick: () => setTextEdit(null),
+										children: t("sketchCancel")
+									})
+								]
+							}) : null,
 							picturesOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
 								className: "codexSketchPictures",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchPictures") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
+										disabled: agentLocked || busy,
 										onClick: () => pictureInput.current.click(),
 										children: t("sketchPictureAdd")
 									})] }),
@@ -2577,6 +3286,7 @@ window.__ModuleLoader__.load({
 										"data-active": layer.id === doc.current.active,
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
+											disabled: agentLocked || busy,
 											"aria-label": `${t("sketchPictureSelect")} ${layer.name}`,
 											onClick: () => change("select", layer.id),
 											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
@@ -2585,6 +3295,7 @@ window.__ModuleLoader__.load({
 											})
 										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
+											disabled: agentLocked || busy,
 											"aria-label": `${t("sketchDeleteDraft")} ${layer.name}`,
 											onClick: () => change(doc.current.layers.length === 1 ? "clear" : "delete", layer.id),
 											children: "×"
@@ -2601,7 +3312,7 @@ window.__ModuleLoader__.load({
 										type: "button",
 										title: t("sketchLayerAdd"),
 										"aria-label": t("sketchLayerAdd"),
-										disabled: busy || doc.current.layers.length >= 8,
+										disabled: agentLocked || busy || doc.current.layers.length >= 8,
 										onClick: () => change("add"),
 										children: "＋"
 									})] }),
@@ -2612,6 +3323,7 @@ window.__ModuleLoader__.load({
 											"data-active": layer.id === doc.current.active,
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 												type: "button",
+												disabled: agentLocked || busy,
 												"aria-label": `${t("sketchLayerVisible")} ${layer.id}`,
 												"aria-pressed": layer.visible,
 												onClick: () => change("visible", layer.id),
@@ -2621,6 +3333,7 @@ window.__ModuleLoader__.load({
 												})
 											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 												type: "button",
+												disabled: agentLocked || busy,
 												"aria-pressed": layer.id === doc.current.active,
 												onClick: () => change("select", layer.id),
 												children: layer.name || `${t("sketchLayer")} ${layer.id}`
@@ -2632,6 +3345,7 @@ window.__ModuleLoader__.load({
 										children: t("sketchLayerName")
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										disabled: agentLocked || busy,
 										"aria-label": t("sketchLayerName"),
 										defaultValue: current.name,
 										placeholder: `${t("sketchLayer")} ${current.id}`,
@@ -2654,7 +3368,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 > 2e3) || action === "up" && current === doc.current.layers.at(-1) || action === "down" && current === doc.current.layers[0],
+											disabled: agentLocked || 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,
@@ -2665,7 +3379,7 @@ window.__ModuleLoader__.load({
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 										type: "button",
 										className: "codexSketchClearLayer",
-										disabled: busy || !current.strokes.length && !current.image,
+										disabled: agentLocked || busy || !current.strokes.length && !current.image,
 										onClick: () => change("clear"),
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
 											name: "clear",
@@ -2690,57 +3404,123 @@ window.__ModuleLoader__.load({
 								navigation,
 								t
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "codexSketchPill",
 								role: "toolbar",
 								"aria-label": t("sketchTitle"),
 								title: t("sketchShortcuts"),
 								children: [
-									"pen",
-									"pencil",
-									"marker",
-									"eraser",
-									"line",
-									"rectangle",
-									"circle"
-								].map((name) => {
-									const drawing = [
+									[
+										"select",
 										"pen",
-										"pencil",
-										"marker"
-									].includes(name);
-									const label = t(drawing ? `sketchBrush_${name}` : `sketchTool_${name}`);
-									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										"text",
+										"eraser"
+									].map((name) => {
+										const drawing = [
+											"pen",
+											"pencil",
+											"marker"
+										].includes(name);
+										const label = t(drawing ? `sketchBrush_${name}` : `sketchTool_${name}`);
+										return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											"aria-label": label,
+											title: 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);
+											},
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+												name,
+												size: 23
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+										}, name);
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										className: "codexSketchShapeToggle",
 										type: "button",
-										"aria-label": label,
-										title: label,
-										"aria-pressed": drawing ? tool === "pen" && brush === name : tool === name,
-										disabled: busy,
-										onClick: () => {
-											setTool(drawing ? "pen" : name);
-											if (drawing) setBrush(name);
-										},
+										"aria-expanded": shapesOpen,
+										disabled: agentLocked || busy,
+										onClick: () => setShapesOpen((v) => !v),
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-											name,
+											name: "rectangle",
 											size: 23
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
-									}, name);
-								})
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchShapes") })]
+									}),
+									shapesOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "codexSketchShapeMenu",
+										children: [
+											"line",
+											"arrow",
+											"rectangle",
+											"circle"
+										].map((name) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											onClick: () => {
+												setTool(name);
+												setSelection(null);
+												setShapesOpen(false);
+											},
+											children: t(`sketchTool_${name}`)
+										}, name))
+									}) : null
+								]
 							}),
 							/* @__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",
+										disabled: agentLocked || busy,
 										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: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												disabled: agentLocked || busy,
+												onClick: () => editObject({}, "duplicate"),
+												children: t("sketchObjectDuplicate")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												disabled: agentLocked || busy,
+												onClick: () => editObject({}, "delete"),
+												children: t("sketchObjectDelete")
+											}),
+											selected.shape === "text" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												disabled: agentLocked || busy,
+												onClick: () => setTextEdit({
+													selection,
+													value: selected.text
+												}),
+												children: t("sketchText")
+											}) : null
+										]
+									}) : null,
 									tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 										className: "codexSketchStability",
 										children: [t("sketchStability"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
 											"aria-label": t("sketchStability"),
 											value: stability,
-											disabled: busy,
+											disabled: agentLocked || busy,
 											onChange: (e) => setStability(Number(e.target.value)),
 											children: [
 												0,
@@ -2760,43 +3540,11 @@ window.__ModuleLoader__.load({
 										children: ["pixel", "stroke"].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 											type: "button",
 											"aria-pressed": eraser === value,
-											disabled: busy,
+											disabled: agentLocked || busy,
 											onClick: () => setEraser(value),
 											children: t(`sketchErase_${value}`)
 										}, value))
-									}) : null,
-									tool !== "eraser" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "codexSketchWidth",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchFlow") }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-												type: "range",
-												min: 5,
-												max: 100,
-												step: 5,
-												value: flow,
-												"aria-label": t("sketchFlow"),
-												onChange: (e) => setFlow(Number(e.target.value))
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", { children: flow })
-										]
-									}) : null,
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-										className: "codexSketchWidth",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchWidth") }),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-												type: "range",
-												min: 2,
-												max: 64,
-												value: width,
-												"aria-label": t("sketchWidth"),
-												onChange: (e) => setWidth(Number(e.target.value)),
-												disabled: busy
-											}),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", { children: width })
-										]
-									})
+									}) : null
 								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2808,9 +3556,9 @@ window.__ModuleLoader__.load({
 									className: "codexSketchSwatch",
 									style: { "--swatch": value },
 									"aria-label": `${t("sketchColor")} ${value}`,
-									"aria-pressed": color === value,
-									disabled: busy,
-									onClick: () => setColor(value)
+									"aria-pressed": (selected?.color ?? color) === value,
+									disabled: agentLocked || busy,
+									onClick: () => pickColor(value)
 								}, value)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 									className: "codexSketchCustom",
 									title: t("sketchColor"),
@@ -2818,8 +3566,8 @@ window.__ModuleLoader__.load({
 										type: "color",
 										"aria-label": t("sketchColor"),
 										value: color,
-										disabled: busy,
-										onChange: (e) => setColor(e.target.value)
+										disabled: agentLocked || busy,
+										onChange: (e) => pickColor(e.target.value)
 									})]
 								})]
 							})
@@ -2831,11 +3579,26 @@ window.__ModuleLoader__.load({
 						children: error
 					}) : null
 				]
-			});
+			})] });
 		}
 		//#endregion
 		//#region src/sketch-styles.js
 		const SKETCH_CSS = `
+.codexSketchSizeModes{display:flex;flex-direction:column;gap:3px}.codexSketchSizeModes button{font-size:11px;padding:4px 6px;border-radius:10px;color:var(--sketch-muted)}.codexSketchSizeModes button[aria-pressed=true]{background:var(--sketch-line);color:var(--sketch-fg)}
+
+.codexSketchSizeControl{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 6px;border:1px solid var(--sketch-line);border-radius:24px;background:var(--sketch-glass);backdrop-filter:blur(18px);box-shadow:0 3px 14px #0001}
+.codexSketchSizeControl>span{font-size:10px;color:var(--sketch-muted);max-width:42px;text-align:center}.codexSketchSizeControl output{font-size:11px;font-variant-numeric:tabular-nums;color:var(--sketch-muted)}
+.codexSketchSizeControl input{writing-mode:vertical-lr;direction:rtl;width:28px;height:150px;appearance:none;background:transparent;cursor:ns-resize;touch-action:none}
+.codexSketchSizeControl input::-webkit-slider-runnable-track{width:4px;border-radius:4px;background:var(--sketch-line)}
+.codexSketchSizeControl input::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-left:-8px;border-radius:50%;background:var(--sketch-fg);border:2px solid var(--sketch-bg);box-shadow:0 1px 5px #0004}
+.codexSketchSelection{position:absolute;width:min(100cqw,calc(100cqh * var(--sketch-ratio,1)));height:auto;aspect-ratio:var(--sketch-ratio);pointer-events:none;overflow:visible}
+.codexSketchShapeMenu{position:absolute;bottom:65px;display:grid;grid-template-columns:1fr 1fr;padding:8px;border:1px solid var(--sketch-line);border-radius:14px;background:var(--sketch-bg);box-shadow:0 8px 24px #0003;z-index:5}.codexSketchShapeMenu button{min-height:40px;padding:8px 14px}
+.codexSketchTextEditor{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-wrap:wrap;gap:8px;width:min(320px,80%);padding:12px;background:var(--sketch-bg);border:1px solid var(--sketch-line);border-radius:12px;box-shadow:0 6px 24px #0003}.codexSketchTextEditor textarea{width:100%;min-height:72px;resize:vertical;background:transparent;color:inherit;border:1px solid var(--sketch-line);border-radius:8px;padding:8px;font:inherit}.codexSketchTextEditor button{padding:6px 10px;border-radius:8px;background:var(--sketch-line)}
+.codexSketchObjectActions{display:flex;gap:8px}.codexSketchObjectActions button{padding:6px 8px;border-radius:8px;background:var(--sketch-line)}
+.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)}
 .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)}
@@ -2906,6 +3669,7 @@ window.__ModuleLoader__.load({
 				}
 			}), [registerOpen]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchStudio, {
+				agentPreview: settings.imageSketchAgentPreview,
 				agentEnabled: settings.imageSketchAgent,
 				onOpen: () => {
 					opener.current = document.activeElement;
@@ -2953,7 +3717,7 @@ window.__ModuleLoader__.load({
 			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchWorkspace, {
 				...props,
 				registerOpen: registerWorkspace
-			})] });
+			}, props.sessionId)] });
 		}
 		//#endregion
 		//#region src/image-composer.js
@@ -3000,9 +3764,10 @@ window.__ModuleLoader__.load({
 		}
 		const createSketchTrigger = (options) => createWorkspaceTrigger({
 			...options,
+			open: () => {},
 			name: "Sketch · Beta",
 			aliases: ["sketch", "草图"],
-			description: "Draw a reference image"
+			description: "Ask the Agent to draw or edit a sketch"
 		});
 		const createImageTrigger = (options) => createWorkspaceTrigger({
 			...options,
@@ -3013,6 +3778,17 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client-locales.js
 		const zh = {
+			sketchSizeShort: "粗细",
+			sketchObjectDuplicate: "复制对象",
+			sketchObjectDelete: "删除对象",
+			sketchTool_select: "选择",
+			sketchTool_text: "文字",
+			sketchTool_arrow: "箭头",
+			sketchShapes: "图形",
+			sketchText: "编辑文字",
+			sketchTextDone: "完成",
+			sketchTextSize: "字号",
+			sketchBrush: "笔型",
 			sketchFill: "填色",
 			sketchDownload: "下载",
 			sketchExportFormat: "导出格式",
@@ -3122,7 +3898,17 @@ window.__ModuleLoader__.load({
 			sketchCanvas_on: "开启",
 			sketchCanvas_off: "关闭",
 			sketchAgent: "Agent 绘图 · Beta",
-			sketchAgentHint: "默认关闭；开启后向模型提供绘图工具，需要同时开启草图画板。",
+			sketchAgentHint: "默认关闭；开启后可用 @sketch 请求 Agent 绘图，需要同时开启草图画板。",
+			sketchRun_drawing: "Agent 正在绘制…",
+			sketchRun_finished: "绘制完成",
+			sketchRun_stopped: "绘制已停止",
+			sketchRun_failed: "绘制失败",
+			sketchRunStop: "停止绘制",
+			sketchRunResume: "允许继续绘制",
+			sketchAgentPreview: "完成后返回预览 · Beta",
+			sketchAgentPreviewHint: "默认关闭；完成绘制后向模型返回画布图片，会增加图片输入用量。",
+			sketchAgentPreview_on: "开启",
+			sketchAgentPreview_off: "关闭",
 			sketchAgent_on: "开启",
 			sketchAgent_off: "关闭",
 			imageSettings: "图片",
@@ -3398,6 +4184,17 @@ window.__ModuleLoader__.load({
 			imageRemoveAnnotation: "删除标注"
 		};
 		const en = {
+			sketchSizeShort: "Size",
+			sketchObjectDuplicate: "Duplicate object",
+			sketchObjectDelete: "Delete object",
+			sketchTool_select: "Select",
+			sketchTool_text: "Text",
+			sketchTool_arrow: "Arrow",
+			sketchShapes: "Shapes",
+			sketchText: "Edit text",
+			sketchTextDone: "Done",
+			sketchTextSize: "Text size",
+			sketchBrush: "Brush",
 			sketchFill: "Fill",
 			sketchDownload: "Download",
 			sketchExportFormat: "Export format",
@@ -3507,7 +4304,17 @@ window.__ModuleLoader__.load({
 			sketchCanvas_on: "On",
 			sketchCanvas_off: "Off",
 			sketchAgent: "Agent drawing · Beta",
-			sketchAgentHint: "Off by default. Exposes drawing tools to the model; requires the sketch canvas.",
+			sketchAgentHint: "Off by default. Use @sketch to ask the Agent to draw; requires the sketch canvas.",
+			sketchRun_drawing: "Agent is drawing…",
+			sketchRun_finished: "Drawing complete",
+			sketchRun_stopped: "Drawing stopped",
+			sketchRun_failed: "Drawing failed",
+			sketchRunStop: "Stop drawing",
+			sketchRunResume: "Allow drawing again",
+			sketchAgentPreview: "Preview on completion · Beta",
+			sketchAgentPreviewHint: "Off by default. Returns the canvas to the model on completion, adding image input usage.",
+			sketchAgentPreview_on: "On",
+			sketchAgentPreview_off: "Off",
 			sketchAgent_on: "On",
 			sketchAgent_off: "Off",
 			imageSettings: "Images",
@@ -4964,7 +5771,8 @@ window.__ModuleLoader__.load({
 			imageViewer: true,
 			imageAnnotations: true,
 			imageSketch: false,
-			imageSketchAgent: false
+			imageSketchAgent: false,
+			imageSketchAgentPreview: false
 		});
 		function readImageFeatures(value = {}) {
 			return Object.fromEntries(Object.entries(IMAGE_FEATURE_DEFAULTS).map(([key, fallback]) => [key, typeof value?.[key] === "boolean" ? value[key] : fallback]));
@@ -5602,7 +6410,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.1.0-beta.2";
+		const PACKAGE_VERSION = "2.1.0-beta.3";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -6172,6 +6980,7 @@ window.__ModuleLoader__.load({
 			imageEntryPoints: ["imageShortcut"],
 			sketchCanvas: ["imageSketch"],
 			sketchAgent: ["imageSketchAgent"],
+			sketchAgentPreview: ["imageSketchAgentPreview"],
 			imageBrowsing: ["imageViewer", "imageAnnotations"]
 		});
 		function imageGroupValue(snapshot, group) {
@@ -7921,15 +8730,14 @@ window.__ModuleLoader__.load({
 			ctx.inject(["inputTriggers"], (triggerContext) => triggerContext.effect(() => triggerContext.get("inputTriggers").registerSource(createSketchTrigger({
 				enabled: () => {
 					const value = preference.getSnapshot();
-					return value.imageSketch && value.imageEditing;
+					return value.imageSketchAgent && value.imageSketch && value.imageEditing;
 				},
-				open: (sessionId) => sketchOpeners.get(sessionId)?.(),
 				consume: (sessionId, span) => {
 					const actx = sessions.scope(sessionId);
-					return sketchOpeners.has(sessionId) && actx?.bail(actx, "slash/input-consume-token", { guard: {
-						kind: "span",
+					return sketchOpeners.has(sessionId) && actx?.bail(actx, "slash/input-insert-text", {
+						text: "@sketch ",
 						span
-					} }) === true;
+					}) === true;
 				}
 			})), "codex-subscription: Sketch trigger"));
 			ctx.inject(["inputTriggers"], (triggerContext) => triggerContext.effect(() => triggerContext.get("inputTriggers").registerSource(createImageTrigger({