dsh-codex-subscription 2.1.0-beta.5 → 2.1.1-beta.1

package/lib/client.js

@@ -71,6 +71,40 @@ window.__ModuleLoader__.load({
 			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;
@@ -96,10 +130,7 @@ window.__ModuleLoader__.load({
 				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);
+				configureSketchBrush(context, stroke);
 				context.beginPath();
 				const last = stroke.points.at(-1);
 				if (stroke.shape === "text") {
@@ -148,7 +179,8 @@ window.__ModuleLoader__.load({
 					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);
+					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);
@@ -340,21 +372,55 @@ window.__ModuleLoader__.load({
 				dirty: ref(false),
 				documentId: ref(crypto.randomUUID()),
 				documentRevision: ref(0),
+				restoreId: ref(null),
+				mounts: 0,
 				agentAdapter: ref({}),
 				agentSession: ref(null),
 				agentRun: ref(null)
 			};
 		}
-		function createSketchSessionRegistry() {
-			const sessions = /* @__PURE__ */ new Map();
+		function createSketchSessionRegistry({ maxIdle = 8 } = {}) {
+			const sessions = /* @__PURE__ */ new Map(), archived = /* @__PURE__ */ new Map();
+			const prune = () => {
+				const idle = [...sessions].filter(([, s]) => !s.mounts && !s.dirty.current && !s.agentRun.current?.locked && s.agentRun.current?.state !== "stopped");
+				for (const [id, state] of idle.slice(0, Math.max(0, idle.length - maxIdle))) {
+					if (!state.saved.current && state.doc.current.layers.some((l) => l.image || l.strokes.length)) continue;
+					const restoreId = state.saved.current?.id ?? state.restoreId.current;
+					if (restoreId) archived.set(id, restoreId);
+					state.agentRun.current?.dispose();
+					state.images.current.clear();
+					sessions.delete(id);
+				}
+			};
 			return {
 				get(id) {
-					if (!sessions.has(id)) sessions.set(id, createSketchSessionState());
-					return sessions.get(id);
+					let state = sessions.get(id);
+					if (!state) {
+						state = createSketchSessionState();
+						state.restoreId.current = archived.get(id) ?? null;
+						archived.delete(id);
+						sessions.set(id, state);
+					}
+					state.retain = () => {
+						state.mounts++;
+						return () => {
+							state.mounts--;
+							prune();
+						};
+					};
+					sessions.delete(id);
+					sessions.set(id, state);
+					return state;
 				},
+				prune,
+				stats: () => ({
+					resident: sessions.size,
+					archived: archived.size
+				}),
 				dispose() {
 					for (const value of sessions.values()) value.agentRun.current?.dispose();
 					sessions.clear();
+					archived.clear();
 				}
 			};
 		}
@@ -995,55 +1061,272 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/sketch-layer-renderer.js
-		const NO_IMAGES = /* @__PURE__ */ new Map();
-		const surface = (width, height) => {
-			const c = document.createElement("canvas");
-			c.width = width;
-			c.height = height;
-			return c;
-		};
-		function paintSketchLayers(context, doc, cache, size = doc.width ?? 1024, height = doc.height ?? size, activeLayer, images = NO_IMAGES) {
-			context.globalCompositeOperation = "source-over";
-			context.globalAlpha = 1;
-			context.fillStyle = "#fff";
-			context.fillRect(0, 0, size, height);
-			for (const id of cache.keys()) if (!doc.layers.some((layer) => layer.id === id)) cache.delete(id);
-			for (const layer of doc.layers) {
-				if (!layer.visible) continue;
-				let entry = cache.get(layer.id);
-				if (!entry || entry.surface.width !== size || entry.surface.height !== height) {
-					entry = {
-						surface: surface(size, height),
-						base: surface(size, height)
-					};
-					cache.set(layer.id, entry);
-				}
-				const moving = layer.id === activeLayer;
-				const count = Math.max(0, layer.strokes.length - (moving ? 1 : 0));
-				const prefix = layer.strokes[count - 1];
-				if (entry.count !== count || entry.prefix !== prefix || entry.image !== layer.image || entry.strokes !== layer.strokes) {
-					const ctx = entry.base.getContext("2d");
-					const append = entry.count !== void 0 && count >= entry.count && entry.image === layer.image && (entry.strokes === layer.strokes || entry.strokes.slice(0, entry.count).every((stroke, index) => stroke === layer.strokes[index]));
-					if (!append) {
-						ctx.clearRect(0, 0, size, height);
-						const ref = layer.image, image = ref && images.get(ref.src);
-						if (image) ctx.drawImage(image, ref.x * size, ref.y * height, ref.width * size, ref.height * height);
-					}
-					paintSketch(ctx, layer.strokes, size, true, height, append ? entry.count : 0, count);
-					entry.count = count;
-					entry.prefix = prefix;
-					entry.image = layer.image;
-					entry.strokes = layer.strokes;
-				}
-				if (moving) {
-					const ctx = entry.surface.getContext("2d");
-					ctx.clearRect(0, 0, size, height);
-					ctx.drawImage(entry.base, 0, 0);
-					paintSketch(ctx, layer.strokes, size, true, height, layer.strokes.length - 1);
-					context.drawImage(entry.surface, 0, 0);
-				} else context.drawImage(entry.base, 0, 0);
-			}
+		//#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-layer-panel.jsx
+		function SketchLayerPanel({ document, disabled, change, t }) {
+			const current = document.layers.find((layer) => layer.id === document.active);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+				className: "codexSketchLayers",
+				"aria-label": t("sketchLayers"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchLayers") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						title: t("sketchLayerAdd"),
+						"aria-label": t("sketchLayerAdd"),
+						disabled: disabled || document.layers.length >= 8,
+						onClick: () => change("add"),
+						children: "＋"
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "codexLayerList",
+						children: document.layers.slice().reverse().map((layer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "codexLayerRow",
+							"data-active": layer.id === document.active,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled,
+								"aria-label": `${t("sketchLayerVisible")} ${layer.id}`,
+								"aria-pressed": layer.visible,
+								onClick: () => change("visible", layer.id),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+									name: layer.visible ? "eye" : "eyeOff",
+									size: 18
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								disabled,
+								"aria-pressed": layer.id === document.active,
+								onClick: () => change("select", layer.id),
+								children: layer.name || `${t("sketchLayer")} ${layer.id}`
+							})]
+						}, layer.id))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						className: "codexSketchLayerLabel",
+						children: t("sketchLayerName")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						disabled,
+						"aria-label": t("sketchLayerName"),
+						defaultValue: current.name,
+						placeholder: `${t("sketchLayer")} ${current.id}`,
+						maxLength: 40,
+						onBlur: (e) => {
+							if (e.target.value !== current.name) change("rename", current.id, e.target.value);
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Enter") e.currentTarget.blur();
+						}
+					}, current.id + "-" + current.name),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "codexLayerActions",
+						children: [
+							"duplicate",
+							"up",
+							"down",
+							"delete"
+						].map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							title: t(`sketchLayer_${action}`),
+							"aria-label": t(`sketchLayer_${action}`),
+							disabled: disabled || action === "delete" && document.layers.length === 1 || action === "duplicate" && (document.layers.length >= 8 || strokeCount(document) + current.strokes.length > 2e3) || action === "up" && current === document.layers.at(-1) || action === "down" && current === document.layers[0],
+							onClick: () => change(action),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+								name: action === "delete" ? "clear" : action,
+								size: 17
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(`sketchLayer_${action}`) })]
+						}, action))
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "codexSketchClearLayer",
+						disabled: disabled || !current.strokes.length && !current.image,
+						onClick: () => change("clear"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+							name: "clear",
+							size: 16
+						}), t("sketchClearLayer")]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/sketch-tool-picker.jsx
+		function SketchToolPicker({ t, disabled, tool, brush, chooseBrush, chooseTool, shapesOpen, setShapesOpen }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "codexSketchPill",
+				role: "toolbar",
+				"aria-label": t("sketchTitle"),
+				title: t("sketchShortcuts"),
+				children: [
+					[
+						"select",
+						"pen",
+						"pencil",
+						"marker",
+						"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: drawing ? `${label} · ${t(`sketchBrushHint_${name}`)}` : label,
+							"aria-pressed": drawing ? tool === "pen" && brush === name : tool === name,
+							disabled,
+							onClick: () => {
+								if (drawing) chooseBrush(name);
+								else chooseTool(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": t("sketchShapes"),
+						"aria-expanded": shapesOpen,
+						"aria-pressed": [
+							"line",
+							"arrow",
+							"rectangle",
+							"circle"
+						].includes(tool),
+						disabled,
+						onClick: () => setShapesOpen((v) => !v),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
+							name: [
+								"line",
+								"arrow",
+								"rectangle",
+								"circle"
+							].includes(tool) ? tool : "rectangle",
+							size: 23
+						}), /* @__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",
+						children: [
+							"line",
+							"arrow",
+							"rectangle",
+							"circle"
+						].map((name) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							disabled,
+							type: "button",
+							"aria-pressed": tool === name,
+							onClick: () => {
+								chooseTool(name);
+								setShapesOpen(false);
+							},
+							children: t(`sketchTool_${name}`)
+						}, name))
+					}) : null
+				]
+			});
+		}
+		//#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 } : {}
+			})));
 		}
 		//#endregion
 		//#region src/sketch-input.js
@@ -1075,39 +1358,192 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/sketch-gesture.js
+		function updateSketchGesture(doc, gesture, samples, rect, width, shiftKey = false) {
+			if (!samples.length) return doc;
+			if (gesture.object) {
+				const point = sketchPoint(samples.at(-1).clientX, samples.at(-1).clientY, rect);
+				if (!point) return doc;
+				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 = {
+					...doc,
+					layers: doc.layers.map((l) => l.id === gesture.layer ? {
+						...l,
+						strokes: l.strokes.map((s) => s.id === gesture.object.id ? stroke : s)
+					} : l)
+				};
+				return doc;
+			}
+			for (const sample of samples) {
+				let point = sketchPoint(sample.clientX, sample.clientY, rect);
+				if (!point) continue;
+				const layer = doc.layers.find((layer) => layer.id === gesture.layer);
+				if (!layer) return doc;
+				if (gesture.eraseStroke) {
+					const previous = gesture.last ?? point;
+					const steps = Math.min(256, Math.max(1, Math.ceil(Math.hypot(point.x - previous.x, point.y - previous.y) * SKETCH_SIZE / Math.max(2, width / 2))));
+					layer.strokes = layer.strokes.filter((stroke) => {
+						for (let i = 1; i <= steps; i++) if (strokeHit(stroke, {
+							x: previous.x + (point.x - previous.x) * i / steps,
+							y: previous.y + (point.y - previous.y) * i / steps
+						}, width / 2, doc.width, doc.height)) return false;
+						return true;
+					});
+				} else {
+					const stroke = layer.strokes.at(-1);
+					if (!stroke) return doc;
+					if ([
+						"line",
+						"arrow",
+						"rectangle",
+						"circle"
+					].includes(stroke.shape)) {
+						if (stroke.shape === "line" && shiftKey) {
+							const w = doc.width ?? 1024, h = doc.height ?? 1024, a = stroke.points[0];
+							const snapped = snapLine({
+								x: a.x * w,
+								y: a.y * h
+							}, {
+								x: point.x * w,
+								y: point.y * h
+							});
+							point = {
+								x: snapped.x / w,
+								y: snapped.y / h
+							};
+						}
+						stroke.points = [stroke.points[0], point];
+					} else {
+						const last = stroke.points.at(-1);
+						if (Math.hypot(last.x - point.x, last.y - point.y) < 1e-4) continue;
+						if (stroke.points.length >= 2e3) stroke.points = stroke.points.filter((_, i) => i % 2 === 0);
+						stroke.points.push(point);
+					}
+				}
+				gesture.last = point;
+			}
+			return doc;
+		}
+		//#endregion
 		//#region src/sketch-drafts.js
 		const DATABASE = "dsh-codex-sketches-v1";
-		async function sketchDrafts(action, value) {
+		const MAX_STORAGE = 32 * 1024 * 1024;
+		const metadata = (kind, row) => ({
+			key: `${kind}:${row.id}`,
+			kind,
+			id: row.id,
+			name: row.name,
+			updated: row.updated,
+			size: JSON.stringify(row).length
+		});
+		async function sketchDrafts(action, value, recoverySession) {
 			const db = await new Promise((resolve, reject) => {
-				const request = indexedDB.open(DATABASE, 1);
-				request.onupgradeneeded = () => request.result.createObjectStore("drafts", { keyPath: "id" });
-				request.onsuccess = () => resolve(request.result);
+				let blocked = false;
+				const request = indexedDB.open(DATABASE, 2);
+				request.onblocked = () => {
+					blocked = true;
+					reject(Object.assign(Error("Close other sketch windows and retry"), { code: "SKETCH_STORAGE_BLOCKED" }));
+				};
+				request.onupgradeneeded = () => {
+					if (blocked) {
+						request.transaction.abort();
+						return;
+					}
+					const db = request.result, tx = request.transaction;
+					if (!db.objectStoreNames.contains("drafts")) db.createObjectStore("drafts", { keyPath: "id" });
+					const meta = db.createObjectStore("metadata", { keyPath: "key" });
+					db.createObjectStore("recovery", { keyPath: "id" });
+					const cursor = tx.objectStore("drafts").openCursor();
+					cursor.onsuccess = () => {
+						const row = cursor.result;
+						if (row) {
+							meta.put(metadata("drafts", row.value));
+							row.continue();
+						}
+					};
+				};
+				request.onsuccess = () => {
+					if (blocked) {
+						request.result.close();
+						return;
+					}
+					request.result.onversionchange = () => request.result.close();
+					resolve(request.result);
+				};
 				request.onerror = () => reject(request.error);
 			});
 			try {
 				return await new Promise((resolve, reject) => {
-					const tx = db.transaction("drafts", action === "list" ? "readonly" : "readwrite"), store = tx.objectStore("drafts");
-					let result;
+					const write = [
+						"save",
+						"delete",
+						"checkpoint",
+						"clearRecovery"
+					].includes(action);
+					const tx = db.transaction([
+						"drafts",
+						"metadata",
+						"recovery"
+					], write ? "readwrite" : "readonly");
+					const meta = tx.objectStore("metadata"), kind = [
+						"checkpoint",
+						"recover",
+						"clearRecovery"
+					].includes(action) ? "recovery" : "drafts", store = tx.objectStore(kind);
+					let result, failure;
 					tx.oncomplete = () => resolve(result);
 					tx.onerror = () => reject(tx.error);
-					tx.onabort = () => reject(tx.error ?? Error("Draft limit reached"));
-					const request = store.getAll();
+					tx.onabort = () => reject(failure ?? tx.error ?? Error("Draft transaction aborted"));
+					if (action === "get" || action === "recover") {
+						const req = store.get(value);
+						req.onsuccess = () => {
+							result = req.result;
+						};
+						return;
+					}
+					if (action === "delete" || action === "clearRecovery") {
+						store.delete(value);
+						meta.delete(`${kind}:${value}`);
+						return;
+					}
+					if (![
+						"list",
+						"save",
+						"checkpoint"
+					].includes(action)) {
+						tx.abort();
+						return;
+					}
+					const request = meta.getAll();
 					request.onsuccess = () => {
 						const rows = request.result;
 						if (action === "list") {
-							result = rows.sort((a, b) => b.updated - a.updated);
-							return;
-						}
-						if (action === "delete") {
-							store.delete(value);
+							result = rows.filter((row) => row.kind === "drafts").sort((a, b) => b.updated - a.updated);
 							return;
 						}
-						const others = rows.filter((row) => row.id !== value.id);
-						if (others.length >= 20 || JSON.stringify([...others, value]).length > 32 * 1024 * 1024) {
+						const next = metadata(kind, value), others = rows.filter((row) => row.key !== next.key && !(action === "save" && recoverySession && row.key === `recovery:${recoverySession}`));
+						const code = others.filter((row) => row.kind === kind).length >= 20 ? "SKETCH_DRAFT_LIMIT" : others.reduce((n, row) => n + row.size, 0) + next.size > MAX_STORAGE ? "SKETCH_STORAGE_LIMIT" : null;
+						if (code) {
+							failure = Object.assign(Error("Draft storage limit reached"), { code });
 							tx.abort();
 							return;
 						}
 						store.put(value);
+						meta.put(next);
+						if (action === "save" && recoverySession) {
+							tx.objectStore("recovery").delete(recoverySession);
+							meta.delete(`recovery:${recoverySession}`);
+						}
 						result = value;
 					};
 				});
@@ -1149,846 +1585,1118 @@ window.__ModuleLoader__.load({
 				bitmap.close();
 			}
 		}
-		//#endregion
-		//#region src/sketch-interactions.js
-		function useSketchDismiss(open, close, host, selectors) {
-			const latest = (0, react.useRef)(close);
-			latest.current = close;
-			(0, react.useEffect)(() => {
-				if (!open) return;
-				const dialog = host.current?.closest("dialog") ?? host.current;
-				if (!dialog) return;
-				const pointer = (event) => {
-					if (selectors.some((selector) => event.target.closest?.(selector))) return;
-					latest.current(false);
-					if (event.target.matches?.("canvas")) {
-						event.preventDefault();
-						event.stopPropagation();
-						event.target.focus({ preventScroll: true });
+		const SKETCH_COMMAND_HELP = {
+			coordinates: "Assign short meaningful stroke id values for later edits. Text uses two opposite box corners and text content; width is font size in pixels, automatic fitting within the box. Arrow uses two endpoints. Normalized x/y in [0,1]; width is canvas pixels. Read documentId and revision before editing.",
+			shapes: "line: exactly two endpoints; rectangle/circle (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: "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\"}"
+			},
+			limits: {
+				strokes: MAX_SKETCH_STROKES,
+				pointsPerStroke: MAX_STROKE_POINTS,
+				pointsTotal: 2e5,
+				commandsPerBatch: 256
+			}
+		};
+		const finite = (value, min, max) => typeof value === "number" && Number.isFinite(value) && value >= min && value <= max;
+		function applySketchCommands(source, commands) {
+			if (!Array.isArray(commands) || !commands.length || commands.length > 256) throw Error("Expected 1–256 commands");
+			let doc = identifyObjects(source);
+			for (const command of commands) {
+				if (!command || typeof command !== "object") throw Error("Invalid command");
+				if (command.op === "resize") {
+					doc = resizeSketch(doc, command.ratio);
+					continue;
+				}
+				if (command.op === "layer") {
+					if (![
+						"add",
+						"select",
+						"rename",
+						"visible",
+						"duplicate",
+						"up",
+						"down",
+						"delete",
+						"clear"
+					].includes(command.action)) throw Error("Unknown layer action");
+					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;
+					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 } : {},
+							...original.brushVersion === 2 ? { brushVersion: 2 } : {}
+						};
+					} 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 shape = command.shape === "ellipse" ? "circle" : command.shape ?? "pen";
+				const { color, width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
+				let points = command.points;
+				if (command.start !== void 0 || command.segments !== void 0) {
+					if (shape !== "bezier" || points !== void 0 || !command.start || !Array.isArray(command.segments) || !command.segments.length || command.segments.length > 64) throw Error("Bezier requires start and 1–64 segments, without points");
+					points = [command.start, ...command.segments.flatMap((s) => [
+						s?.control1,
+						s?.control2,
+						s?.end
+					])];
+				}
+				if (![
+					"pen",
+					"line",
+					"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(`commands[${commands.indexOf(command)}]: Bezier has ${points.length} points; expected 4, 7, 10, ... 193 (start + control1/control2/end per segment). No commands in this batch were applied.`);
+				if (fill && ![
+					"rectangle",
+					"circle",
+					"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,
+					opacity,
+					fill,
+					brush: "pen",
+					points: points.map((p) => ({
+						x: p.x,
+						y: p.y
+					}))
 				};
-				const key = (event) => {
-					if (event.key !== "Escape") return;
-					event.preventDefault();
-					event.stopPropagation();
-					latest.current(false);
-					dialog.querySelector("canvas")?.focus({ preventScroll: true });
-				};
-				const hidden = () => latest.current(false);
-				document.addEventListener("pointerdown", pointer, true);
-				document.addEventListener("keydown", key, true);
-				dialog.addEventListener("close", hidden);
-				return () => {
-					document.removeEventListener("pointerdown", pointer, true);
-					document.removeEventListener("keydown", key, true);
-					dialog.removeEventListener("close", hidden);
+				doc = {
+					...doc,
+					layers: doc.layers.map((item) => item === layer ? {
+						...item,
+						strokes: [...item.strokes, stroke]
+					} : item)
 				};
-			}, [
-				open,
-				host,
-				selectors.join("|")
-			]);
+			}
+			if (strokeCount(doc) > 2e3 || doc.layers.reduce((n, l) => n + l.strokes.reduce((m, s) => m + s.points.length, 0), 0) > 2e5) throw Error("Sketch resource budget exceeded");
+			return doc;
 		}
-		function useSketchCursor(canvas, ring, width, brush, zoom, hidden) {
-			const last = (0, react.useRef)(null), heldPressure = (0, react.useRef)(1);
-			const update = (event, bounds) => {
-				if (event) last.current = event;
-				const pointer = last.current, node = canvas.current, cursor = ring.current;
-				if (!pointer || !node || !cursor) return;
-				const rect = bounds ?? node.getBoundingClientRect();
-				if (hidden || pointer.pointerType === "touch" || pointer.clientX < rect.left || pointer.clientX > rect.right || pointer.clientY < rect.top || pointer.clientY > rect.bottom) {
-					cursor.hidden = true;
-					return;
+		function createSketchCommandSession(adapter) {
+			const completed = /* @__PURE__ */ new Map();
+			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") {
+					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,
+						protocolVersion: 2,
+						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
+					};
 				}
-				const pressure = node.hasPointerCapture(pointer.pointerId) && pointer.pointerType === "pen" ? heldPressure.current : 1;
-				const diameter = width * (brush === "pencil" ? .55 : 1) * pressure * rect.width / node.width;
-				cursor.hidden = false;
-				cursor.style.width = `${diameter}px`;
-				cursor.style.height = `${diameter}px`;
-				cursor.style.transform = `translate(${pointer.clientX - diameter / 2}px,${pointer.clientY - diameter / 2}px)`;
-			};
-			(0, react.useEffect)(() => {
-				update();
-				const observer = new ResizeObserver(() => update());
-				if (canvas.current) observer.observe(canvas.current);
-				return () => observer.disconnect();
-			}, [
-				width,
-				brush,
-				zoom,
-				hidden
-			]);
-			return {
-				down: (event) => {
-					heldPressure.current = event.pointerType === "pen" ? Math.max(.2, event.pressure) : 1;
-				},
-				move: (event, bounds) => update({
-					clientX: event.clientX,
-					clientY: event.clientY,
-					pointerId: event.pointerId,
-					pointerType: event.pointerType,
-					pressure: event.pressure
-				}, bounds),
-				leave: () => {
-					last.current = null;
-					if (ring.current) ring.current.hidden = true;
+				if (request.documentId !== current.documentId) throw Error("Document changed; inspect again");
+				if (pending || adapter.busy()) throw Error("Sketch is being edited; retry after it settles");
+				if (request.action === "preview") return {
+					...current,
+					png: await adapter.preview()
+				};
+				if (!["apply", "save"].includes(request.action)) throw Error("Unknown sketch action");
+				if (typeof request.requestId !== "string" || !request.requestId.length || request.requestId.length > 100) throw Error("A unique requestId is required");
+				const key = `${current.documentId}:${request.requestId}`, fingerprint = JSON.stringify({
+					...request,
+					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 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) => ({
+						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;
+					try {
+						await adapter.save(request.name);
+					} finally {
+						pending = false;
+					}
+				}
+				const result = {
+					...adapter.snapshot(),
+					...changedObjects ? {
+						changedObjects: changedObjects.slice(0, 100),
+						changedObjectCount: changedObjects.length
+					} : {}
+				};
+				completed.set(key, {
+					fingerprint,
+					result,
+					receipt: {
+						requestId: request.requestId,
+						action: request.action,
+						revision: result.revision
+					}
+				});
+				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;
 			};
 		}
 		//#endregion
-		//#region src/sketch-view.jsx
-		const DEFAULT_KEYS = {
-			pen: "b",
-			eraser: "e",
-			line: "l",
-			rectangle: "r",
-			circle: "o",
-			pan: " ",
-			zoomIn: "=",
-			zoomOut: "-",
-			fit: "0"
+		//#region src/sketch-formats.js
+		const SKETCH_FILE_ACCEPT = ".psd,.dsh-sketch.json,image/png,image/jpeg,image/webp";
+		const canvas = (w, h) => {
+			const c = document.createElement("canvas");
+			c.width = w;
+			c.height = h;
+			return c;
 		};
-		function useSketchView(canvas, open) {
-			const [view, setView] = (0, react.useState)({
-				scale: 1,
-				x: 0,
-				y: 0
-			}), [keys, setKeys] = (0, react.useState)(() => {
-				try {
-					return {
-						...DEFAULT_KEYS,
-						...JSON.parse(localStorage.getItem("codex-sketch-keys"))
+		function runPsdCodec(action, payload) {
+			return new Promise((resolve, reject) => {
+				const worker = new Worker("/api/codex-subscription/sketch-psd-worker", { type: "module" });
+				const finish = (callback, value) => {
+					clearTimeout(timer);
+					worker.terminate();
+					callback(value);
+				};
+				const timer = setTimeout(() => finish(reject, Error("PSD operation timed out")), 3e4);
+				worker.onerror = () => finish(reject, Error("PSD codec could not be loaded"));
+				worker.onmessage = (event) => event.data.ok ? finish(resolve, event.data.value) : finish(reject, Error(event.data.error));
+				worker.postMessage({
+					action,
+					payload
+				});
+			});
+		}
+		function encodeSketchDocument(doc) {
+			return JSON.stringify({
+				format: "dsh-sketch",
+				version: 1,
+				doc
+			});
+		}
+		function decodeSketchDocument(text) {
+			if (text.length > 32 * 1024 * 1024) throw Error("Draft exceeds 32 MB");
+			const file = JSON.parse(text), source = file.doc;
+			if (file.format !== "dsh-sketch" || file.version !== 1 || !source || !Array.isArray(source.layers) || !source.layers.length || source.layers.length > 8) throw Error("Invalid sketch file");
+			const w = source.width ?? 1024, h = source.height ?? 1024;
+			if (!Number.isInteger(w) || !Number.isInteger(h) || w < 1 || h < 1 || w > 2048 || h > 2048) throw Error("Invalid canvas size");
+			let doc = {
+				...createSketchLayers(),
+				width: w,
+				height: h,
+				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === w && SKETCH_RATIOS[k][1] === h) ?? "custom"
+			};
+			for (let i = 0; i < source.layers.length; i++) {
+				const layer = source.layers[i];
+				if (i) doc = applySketchCommands(doc, [{
+					op: "layer",
+					action: "add"
+				}]);
+				if (!Array.isArray(layer.strokes)) throw Error("Invalid strokes");
+				for (let j = 0; j < layer.strokes.length; j += 256) {
+					const strokes = layer.strokes.slice(j, j + 256);
+					doc = applySketchCommands(doc, strokes.map((s) => ({
+						...s,
+						op: "stroke",
+						layer: doc.active,
+						fill: s.fill ?? false
+					})));
+					const added = doc.layers.at(-1).strokes;
+					for (let k = 0; k < strokes.length; k++) {
+						const s = strokes[k];
+						if (s.brush !== void 0 && ![
+							"pen",
+							"pencil",
+							"marker"
+						].includes(s.brush)) throw Error("Invalid brush");
+						if (s.pressure !== void 0 && (!Number.isFinite(s.pressure) || s.pressure < .2 || s.pressure > 1)) throw Error("Invalid pressure");
+						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,
+							...s.brushVersion === 2 ? { brushVersion: 2 } : {}
+						});
+					}
+				}
+				const target = doc.layers.at(-1);
+				target.name = String(layer.name ?? "").slice(0, 40);
+				target.visible = layer.visible !== false;
+				if (layer.image) {
+					const image = layer.image;
+					if (typeof image.src !== "string" || !/^data:image\/png;base64,/.test(image.src) || image.src.length > 8 * 1024 * 1024 || [
+						"x",
+						"y",
+						"width",
+						"height"
+					].some((k) => !Number.isFinite(image[k]) || image[k] < 0 || image[k] > 1)) throw Error("Invalid draft image");
+					const bytes = Uint8Array.from(atob(image.src.slice(image.src.indexOf(",") + 1)), (c) => c.charCodeAt(0));
+					if (bytes.length < 24) throw Error("Invalid draft image");
+					const header = new DataView(bytes.buffer);
+					if (header.getUint32(0) !== 2303741511 || header.getUint32(4) !== 218765834 || header.getUint32(16) < 1 || header.getUint32(20) < 1 || header.getUint32(16) > 4096 || header.getUint32(20) > 4096) throw Error("Invalid draft image size");
+					target.image = {
+						src: image.src,
+						x: image.x,
+						y: image.y,
+						width: image.width,
+						height: image.height
 					};
-				} catch {
-					return DEFAULT_KEYS;
 				}
+			}
+			const activeIndex = source.layers.findIndex((layer) => layer.id === source.active);
+			doc.active = doc.layers[Math.max(0, activeIndex)].id;
+			return doc;
+		}
+		async function exportSketchPsd(doc, images, composite) {
+			const width = doc.width ?? 1024, height = doc.height ?? 1024;
+			const children = doc.layers.map((layer, i) => {
+				const ctx = canvas(width, height).getContext("2d"), ref = layer.image;
+				if (ref) ctx.drawImage(images.get(ref.src), ref.x * width, ref.y * height, ref.width * width, ref.height * height);
+				paintSketch(ctx, layer.strokes, width, true, height);
+				return {
+					name: layer.name || `Layer ${i + 1}`,
+					hidden: !layer.visible,
+					opacity: 1,
+					blendMode: "normal",
+					imageData: ctx.getImageData(0, 0, width, height)
+				};
 			});
-			const [shortcuts, setShortcuts] = (0, react.useState)(() => {
-				try {
-					return localStorage.getItem("codex-sketch-shortcuts") !== "off";
-				} catch {
-					return true;
-				}
-			}), [space, setSpace] = (0, react.useState)(false);
-			const drag = (0, react.useRef)(null), viewRef = (0, react.useRef)(view);
-			viewRef.current = view;
-			const zoom = (factor) => setView((v) => ({
-				...v,
-				scale: Math.max(.25, Math.min(8, v.scale * factor))
-			}));
-			const reset = () => setView({
-				scale: 1,
-				x: 0,
-				y: 0
+			const context = canvas(width, height).getContext("2d");
+			context.fillStyle = "#fff";
+			context.fillRect(0, 0, width, height);
+			if (children[0] && !children[0].hidden) {
+				const bottom = canvas(width, height);
+				bottom.getContext("2d").putImageData(children[0].imageData, 0, 0);
+				context.drawImage(bottom, 0, 0);
+				children[0].imageData = context.getImageData(0, 0, width, height);
+			} else {
+				if (children.length >= 8) throw Error("Show the bottom layer before exporting this eight-layer drawing");
+				children.unshift({
+					name: "Paper",
+					opacity: 1,
+					blendMode: "normal",
+					imageData: context.getImageData(0, 0, width, height)
+				});
+			}
+			return runPsdCodec("write", {
+				width,
+				height,
+				children,
+				imageData: composite.getContext("2d").getImageData(0, 0, width, height)
 			});
-			(0, react.useEffect)(() => {
-				const node = canvas.current;
-				if (!node || !open) return;
-				const wheel = (e) => {
-					if (!shortcuts || !e.altKey) return;
-					e.preventDefault();
-					zoom(e.deltaY < 0 ? 1.1 : 1 / 1.1);
-				};
-				node.addEventListener("wheel", wheel, { passive: false });
-				return () => node.removeEventListener("wheel", wheel);
-			}, [open, shortcuts]);
-			(0, react.useEffect)(() => {
-				const stop = () => {
-					drag.current = null;
-					setSpace(false);
-				};
-				window.addEventListener("blur", stop);
-				return () => window.removeEventListener("blur", stop);
-			}, []);
-			(0, react.useEffect)(() => {
-				if (!open || !shortcuts) {
-					setSpace(false);
-					drag.current = null;
-				}
-			}, [open, shortcuts]);
-			const setKey = (action, key) => {
-				key = key.toLowerCase();
-				if (!key || Object.entries(keys).some(([a, k]) => a !== action && k === key) || ["[", "]"].includes(key)) return;
-				const next = {
-					...keys,
-					[action]: key
+		}
+		async function importSketchPsd(file) {
+			if (file.size > 32 * 1024 * 1024) throw Error("PSD exceeds 32 MB");
+			const psd = await runPsdCodec("read", await file.arrayBuffer());
+			const scale = Math.min(1, 1024 / Math.max(psd.width, psd.height)), width = Math.max(1, Math.round(psd.width * scale)), height = Math.max(1, Math.round(psd.height * scale));
+			const doc = {
+				...createSketchLayers(),
+				width,
+				height,
+				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === width && SKETCH_RATIOS[k][1] === height) ?? "custom",
+				layers: [],
+				nextId: psd.layers.length + 1
+			};
+			for (const [i, layer] of psd.layers.entries()) {
+				const src = canvas(layer.imageData.width, layer.imageData.height);
+				src.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(layer.imageData.data), layer.imageData.width, layer.imageData.height), 0, 0);
+				const out = canvas(width, height), ctx = out.getContext("2d");
+				ctx.globalAlpha = layer.opacity;
+				ctx.drawImage(src, layer.left * scale, layer.top * scale, src.width * scale, src.height * scale);
+				doc.layers.push({
+					id: i + 1,
+					name: layer.name,
+					visible: !layer.hidden,
+					strokes: [],
+					image: {
+						src: out.toDataURL("image/png"),
+						x: 0,
+						y: 0,
+						width: 1,
+						height: 1
+					}
+				});
+			}
+			return doc;
+		}
+		//#endregion
+		//#region src/sketch-document-lifecycle.js
+		function createSketchDocumentLifecycle(state, { sessionId, t, schedule, checkpoint, cache, setSelection, setTextEdit, setRecovered, store = sketchDrafts, decodeImages = decodeSketchImages, readImage = importSketchImage }) {
+			const { doc, undo, redo, images, saved, dirty, documentId, documentRevision } = state;
+			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()}`,
+					updated: Date.now(),
+					doc: structuredClone(doc.current)
 				};
-				setKeys(next);
 				try {
-					localStorage.setItem("codex-sketch-keys", JSON.stringify(next));
-				} catch {}
-			};
-			return {
-				view,
-				keys,
-				shortcuts,
-				space,
-				zoom,
-				reset,
-				setKey,
-				toggle: () => setShortcuts((v) => {
-					try {
-						localStorage.setItem("codex-sketch-shortcuts", v ? "off" : "on");
-					} catch {}
-					return !v;
-				}),
-				keyDown: (e) => {
-					if (!shortcuts || e.ctrlKey || e.metaKey || e.altKey) return false;
-					const key = e.key.toLowerCase();
-					if (key === keys.pan && !e.ctrlKey && !e.metaKey) {
-						e.preventDefault();
-						setSpace(true);
-						return true;
-					}
-					if (key === keys.zoomIn || key === "+" || key === keys.zoomOut || key === keys.fit) {
-						e.preventDefault();
-						if (key === keys.fit) reset();
-						else zoom(key === keys.zoomOut ? 1 / 1.2 : 1.2);
-						return true;
-					}
-					return false;
-				},
-				keyUp: (e) => {
-					if (e.key.toLowerCase() === keys.pan) setSpace(false);
-				},
-				down: (e) => {
-					if (e.button !== 1 && !space) return false;
-					e.preventDefault();
-					drag.current = {
-						id: e.pointerId,
-						x: e.clientX,
-						y: e.clientY,
-						view: viewRef.current
+					await store("save", row, sessionId);
+				} catch (error) {
+					if (error.code === "SKETCH_DRAFT_LIMIT") error.message = t("sketchDraftLimit");
+					if (error.code === "SKETCH_STORAGE_LIMIT") error.message = t("sketchStorageLimit");
+					throw error;
+				}
+				if (documentId.current === savingDocument) {
+					saved.current = {
+						id: row.id,
+						name: row.name
 					};
-					canvas.current.setPointerCapture(e.pointerId);
-					return true;
-				},
-				move: (e) => {
-					const d = drag.current;
-					if (!d || d.id !== e.pointerId) return false;
-					setView({
-						...d.view,
-						x: d.view.x + e.clientX - d.x,
-						y: d.view.y + e.clientY - d.y
-					});
-					return true;
-				},
-				end: (e) => {
-					if (drag.current?.id !== e.pointerId) return false;
-					drag.current = null;
-					if (canvas.current.hasPointerCapture(e.pointerId)) canvas.current.releasePointerCapture(e.pointerId);
-					return true;
+					if (documentRevision.current === savingRevision) {
+						dirty.current = false;
+						setRecovered(false);
+					}
 				}
 			};
-		}
-		function SketchViewControls({ navigation, t }) {
-			const [open, setOpen] = (0, react.useState)(false), [placement, setPlacement] = (0, react.useState)(null);
-			const host = (0, react.useRef)(null), trigger = (0, react.useRef)(null);
-			const close = () => {
-				setOpen(false);
-				trigger.current?.focus({ preventScroll: true });
+			const saveChanges = async () => {
+				if (!dirty.current) return;
+				if (hasContent() || saved.current) return save();
+				const id = documentId.current, revision = documentRevision.current;
+				await store("clearRecovery", sessionId);
+				if (documentId.current === id && documentRevision.current === revision) {
+					dirty.current = false;
+					setRecovered(false);
+				}
+			};
+			const replace = (next, decoded, identity) => {
+				documentId.current = crypto.randomUUID();
+				documentRevision.current++;
+				doc.current = identifyObjects(structuredClone(next));
+				setSelection(null);
+				setTextEdit(null);
+				images.current = decoded;
+				cache.current.clear();
+				undo.current = [];
+				redo.current = [];
+				saved.current = identity;
+				dirty.current = false;
+				schedule();
+			};
+			const fresh = async () => {
+				await saveChanges();
+				replace(createSketchLayers(), /* @__PURE__ */ new Map(), null);
+			};
+			const load = async (row) => {
+				if (row.id === saved.current?.id) return;
+				row = await store("get", row.id);
+				if (!row) throw Error("Draft no longer exists");
+				await saveChanges();
+				const decoded = /* @__PURE__ */ new Map();
+				await decodeImages(row.doc, decoded);
+				replace(row.doc, decoded, {
+					id: row.id,
+					name: row.name
+				});
+			};
+			const importImage = async (file) => {
+				if (file.name?.toLowerCase().endsWith(".psd") || file.name?.toLowerCase().endsWith(".dsh-sketch.json")) {
+					if (file.size > 32 * 1024 * 1024) throw Error("File exceeds 32 MB");
+					const next = file.name.toLowerCase().endsWith(".psd") ? await importSketchPsd(file) : decodeSketchDocument(await file.text());
+					const decoded = /* @__PURE__ */ new Map();
+					await decodeImages(next, decoded);
+					await saveChanges();
+					replace(next, decoded, null);
+					dirty.current = true;
+					return;
+				}
+				if (doc.current.layers.length >= 8) throw Error("Layer limit");
+				const image = await readImage(file), w = doc.current.width ?? 1024, h = doc.current.height ?? 1024;
+				const scale = Math.min(w / image.width, h / image.height), width = image.width * scale / w, height = image.height * scale / h;
+				const layer = {
+					id: doc.current.nextId,
+					name: file.name?.slice(0, 40) || t("sketchImport"),
+					visible: true,
+					strokes: [],
+					image: {
+						src: image.src,
+						x: (1 - width) / 2,
+						y: (1 - height) / 2,
+						width,
+						height
+					}
+				};
+				await decodeImages({ layers: [layer] }, images.current);
+				checkpoint();
+				doc.current = {
+					...doc.current,
+					nextId: layer.id + 1,
+					active: layer.id,
+					layers: [...doc.current.layers, layer]
+				};
+				schedule();
+			};
+			const restore = async (isCurrent = () => true) => {
+				if (dirty.current || hasContent()) return;
+				const id = documentId.current, revision = documentRevision.current;
+				const recovery = await store("recover", sessionId);
+				const archived = state.restoreId.current;
+				const row = recovery ?? (archived ? await store("get", archived) : null);
+				const decoded = /* @__PURE__ */ new Map();
+				if (row) await decodeImages(row.doc, decoded);
+				if (!isCurrent() || documentId.current !== id || documentRevision.current !== revision || dirty.current) return;
+				if (row) {
+					replace(row.doc, decoded, recovery ? null : {
+						id: row.id,
+						name: row.name
+					});
+					dirty.current = Boolean(recovery);
+					setRecovered(Boolean(recovery));
+				}
+				state.restoreId.current = null;
 			};
-			useSketchDismiss(open, setOpen, host, [".codexSketchViewControls", ".codexSketchKeyPanel"]);
-			(0, react.useLayoutEffect)(() => {
-				if (!open) return;
-				const dialog = host.current.closest("dialog");
-				const place = () => {
-					const box = dialog.getBoundingClientRect(), anchor = trigger.current.getBoundingClientRect();
-					const width = Math.min(360, box.width - 24);
-					setPlacement({
-						dialog,
-						style: {
-							width,
-							left: Math.max(12, Math.min(anchor.left - box.left, box.width - width - 12)),
-							bottom: box.bottom - anchor.top + 8,
-							maxHeight: Math.max(80, anchor.top - box.top - 24)
-						}
-					});
-				};
-				place();
-				const observer = new ResizeObserver(place);
-				observer.observe(dialog);
-				observer.observe(host.current);
-				window.addEventListener("resize", place);
-				return () => {
-					observer.disconnect();
-					window.removeEventListener("resize", place);
-				};
-			}, [open]);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				ref: host,
-				className: "codexSketchViewControls",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-label": t("sketchZoomOut"),
-						onClick: () => navigation.zoom(1 / 1.2),
-						children: "−"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						title: t("sketchFit"),
-						onClick: navigation.reset,
-						children: [Math.round(navigation.view.scale * 100), "%"]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-label": t("sketchZoomIn"),
-						onClick: () => navigation.zoom(1.2),
-						children: "＋"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						ref: trigger,
-						type: "button",
-						"aria-expanded": open,
-						onClick: () => setOpen(!open),
-						children: t("sketchKeys")
-					}),
-					open && placement ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "codexSketchKeyPanel",
-						"aria-label": t("sketchKeys"),
-						style: placement.style,
-						onKeyDown: (e) => {
-							if (e.key === "Escape") {
-								e.preventDefault();
-								e.stopPropagation();
-								close();
-							}
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchKeys") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								"aria-label": t("sketchFileClose"),
-								onClick: close,
-								children: "×"
-							})] }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-								className: "codexSketchKeysEnabled",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchKeysEnabled") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									type: "checkbox",
-									checked: navigation.shortcuts,
-									onChange: navigation.toggle
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("sketchNavigationHint") }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "codexSketchKeyGrid",
-								children: Object.entries(navigation.keys).map(([action, key]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t(`sketchKey_${action}`), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-									"aria-label": t(`sketchKey_${action}`),
-									value: key === " " ? "Space" : key,
-									readOnly: true,
-									onKeyDown: (e) => {
-										if (e.key === "Tab" || e.key === "Escape") return;
-										e.preventDefault();
-										e.stopPropagation();
-										if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) navigation.setKey(action, e.key);
-									}
-								})] }, action))
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchKeyHint") })
-						]
-					}), placement.dialog) : null
-				]
-			});
-		}
-		//#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)
+				hasContent,
+				save,
+				saveChanges,
+				replace,
+				fresh,
+				load,
+				importImage,
+				restore
 			};
 		}
-		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");
+		//#endregion
+		//#region src/sketch-operation-gate.js
+		function createSketchOperationGate() {
+			let running = false;
 			return {
-				...stroke,
-				points
+				get running() {
+					return running;
+				},
+				async run(operation, { blocked = false, working, report, rethrow = false }) {
+					if (blocked || running) return false;
+					running = true;
+					try {
+						working(true);
+						report(null);
+						await operation();
+						return true;
+					} catch (error) {
+						report(error);
+						if (rethrow) throw error;
+						return false;
+					} finally {
+						running = false;
+						working(false);
+					}
+				}
 			};
 		}
-		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 } : {}
-			})));
+		//#endregion
+		//#region src/sketch-agent-export.js
+		async function exportSketchAgentFile(format, { gate, blocked, working, report, exportFile }) {
+			let result;
+			if (!await gate.run(async () => {
+				const { blob, extension } = await exportFile(format);
+				const data = new Uint8Array(await blob.arrayBuffer());
+				let raw = "";
+				for (let i = 0; i < data.length; i += 8192) raw += String.fromCharCode(...data.subarray(i, i + 8192));
+				result = {
+					extension,
+					mediaType: blob.type,
+					base64: btoa(raw)
+				};
+			}, {
+				blocked,
+				working,
+				report,
+				rethrow: true
+			})) throw Error("Sketch is being edited; retry after it settles");
+			return result;
 		}
-		const SKETCH_COMMAND_HELP = {
-			coordinates: "Assign short meaningful stroke id values for later edits. Text uses two opposite box corners and text content; width is font size in pixels, automatic fitting within the box. Arrow uses two endpoints. Normalized x/y in [0,1]; width is canvas pixels. Read documentId and revision before editing.",
-			shapes: "line: exactly two endpoints; rectangle/circle (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: "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\"}"
-			},
-			limits: {
-				strokes: MAX_SKETCH_STROKES,
-				pointsPerStroke: MAX_STROKE_POINTS,
-				pointsTotal: 2e5,
-				commandsPerBatch: 256
-			}
+		//#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-tool-widths.js
+		const defaults = {
+			pen: 12,
+			pencil: 6,
+			marker: 28,
+			eraser: 24,
+			text: 32,
+			line: 12,
+			arrow: 12,
+			rectangle: 12,
+			circle: 12
 		};
-		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 = identifyObjects(source);
-			for (const command of commands) {
-				if (!command || typeof command !== "object") throw Error("Invalid command");
-				if (command.op === "resize") {
-					doc = resizeSketch(doc, command.ratio);
-					continue;
-				}
-				if (command.op === "layer") {
-					if (![
-						"add",
-						"select",
-						"rename",
-						"visible",
-						"duplicate",
-						"up",
-						"down",
-						"delete",
-						"clear"
-					].includes(command.action)) throw Error("Unknown layer action");
-					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;
-					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 shape = command.shape === "ellipse" ? "circle" : command.shape ?? "pen";
-				const { color, width = shape === "text" ? 24 : 2, opacity = 1, fill = false } = command;
-				let points = command.points;
-				if (command.start !== void 0 || command.segments !== void 0) {
-					if (shape !== "bezier" || points !== void 0 || !command.start || !Array.isArray(command.segments) || !command.segments.length || command.segments.length > 64) throw Error("Bezier requires start and 1–64 segments, without points");
-					points = [command.start, ...command.segments.flatMap((s) => [
-						s?.control1,
-						s?.control2,
-						s?.end
-					])];
-				}
-				if (![
-					"pen",
-					"line",
-					"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(`commands[${commands.indexOf(command)}]: Bezier has ${points.length} points; expected 4, 7, 10, ... 193 (start + control1/control2/end per segment). No commands in this batch were applied.`);
-				if (fill && ![
-					"rectangle",
-					"circle",
-					"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,
-					opacity,
-					fill,
-					brush: "pen",
-					points: points.map((p) => ({
-						x: p.x,
-						y: p.y
-					}))
+		const keyFor = ({ tool, brush }) => tool === "pen" ? brush : tool;
+		function switchSketchToolWidth(memory, current, next) {
+			if (current.tool !== "select") memory[keyFor(current)] = current.width;
+			if (next.tool === "select") return current.width;
+			const key = keyFor(next);
+			return memory[key] ?? defaults[key] ?? 12;
+		}
+		function stepSketchWidth(width, direction) {
+			return Math.max(1, Math.min(256, width + direction * 2));
+		}
+		//#endregion
+		//#region src/sketch-shortcuts.js
+		function sketchShortcutAction(keys, key) {
+			key = key.toLowerCase();
+			return Object.entries(keys).find(([, value]) => value === key)?.[0] ?? {
+				v: "select",
+				t: "text",
+				"+": "zoomIn"
+			}[key];
+		}
+		//#endregion
+		//#region src/sketch-layer-renderer.js
+		const NO_IMAGES = /* @__PURE__ */ new Map();
+		const surface = (width, height) => {
+			const c = document.createElement("canvas");
+			c.width = width;
+			c.height = height;
+			return c;
+		};
+		function paintSketchLayers(context, doc, cache, size = doc.width ?? 1024, height = doc.height ?? size, activeLayer, images = NO_IMAGES) {
+			context.globalCompositeOperation = "source-over";
+			context.globalAlpha = 1;
+			context.fillStyle = "#fff";
+			context.fillRect(0, 0, size, height);
+			for (const id of cache.keys()) if (!doc.layers.some((layer) => layer.id === id)) cache.delete(id);
+			for (const layer of doc.layers) {
+				if (!layer.visible) continue;
+				let entry = cache.get(layer.id);
+				if (!entry || entry.surface.width !== size || entry.surface.height !== height) {
+					entry = {
+						surface: surface(size, height),
+						base: surface(size, height)
+					};
+					cache.set(layer.id, entry);
+				}
+				const moving = layer.id === activeLayer;
+				const count = Math.max(0, layer.strokes.length - (moving ? 1 : 0));
+				const prefix = layer.strokes[count - 1];
+				if (entry.count !== count || entry.prefix !== prefix || entry.image !== layer.image || entry.strokes !== layer.strokes) {
+					const ctx = entry.base.getContext("2d");
+					const append = entry.count !== void 0 && count >= entry.count && entry.image === layer.image && (entry.strokes === layer.strokes || entry.strokes.slice(0, entry.count).every((stroke, index) => stroke === layer.strokes[index]));
+					if (!append) {
+						ctx.clearRect(0, 0, size, height);
+						const ref = layer.image, image = ref && images.get(ref.src);
+						if (image) ctx.drawImage(image, ref.x * size, ref.y * height, ref.width * size, ref.height * height);
+					}
+					paintSketch(ctx, layer.strokes, size, true, height, append ? entry.count : 0, count);
+					entry.count = count;
+					entry.prefix = prefix;
+					entry.image = layer.image;
+					entry.strokes = layer.strokes;
+				}
+				if (moving) {
+					const ctx = entry.surface.getContext("2d");
+					ctx.clearRect(0, 0, size, height);
+					ctx.drawImage(entry.base, 0, 0);
+					paintSketch(ctx, layer.strokes, size, true, height, layer.strokes.length - 1);
+					context.drawImage(entry.surface, 0, 0);
+				} else context.drawImage(entry.base, 0, 0);
+			}
+		}
+		//#endregion
+		//#region src/sketch-interactions.js
+		function useSketchDismiss(open, close, host, selectors) {
+			const latest = (0, react.useRef)(close);
+			latest.current = close;
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const dialog = host.current?.closest("dialog") ?? host.current;
+				if (!dialog) return;
+				const pointer = (event) => {
+					if (selectors.some((selector) => event.target.closest?.(selector))) return;
+					latest.current(false);
+					if (event.target.matches?.("canvas")) {
+						event.preventDefault();
+						event.stopPropagation();
+						event.target.focus({ preventScroll: true });
+					}
 				};
-				doc = {
-					...doc,
-					layers: doc.layers.map((item) => item === layer ? {
-						...item,
-						strokes: [...item.strokes, stroke]
-					} : item)
+				const key = (event) => {
+					if (event.key !== "Escape") return;
+					event.preventDefault();
+					event.stopPropagation();
+					latest.current(false);
+					dialog.querySelector("canvas")?.focus({ preventScroll: true });
 				};
-			}
-			if (strokeCount(doc) > 2e3 || doc.layers.reduce((n, l) => n + l.strokes.reduce((m, s) => m + s.points.length, 0), 0) > 2e5) throw Error("Sketch resource budget exceeded");
-			return doc;
+				const hidden = () => latest.current(false);
+				document.addEventListener("pointerdown", pointer, true);
+				document.addEventListener("keydown", key, true);
+				dialog.addEventListener("close", hidden);
+				return () => {
+					document.removeEventListener("pointerdown", pointer, true);
+					document.removeEventListener("keydown", key, true);
+					dialog.removeEventListener("close", hidden);
+				};
+			}, [
+				open,
+				host,
+				selectors.join("|")
+			]);
 		}
-		function createSketchCommandSession(adapter) {
-			const completed = /* @__PURE__ */ new Map();
-			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") {
-					const offset = request.offset ?? 0, objects = adapter.objects?.() ?? [];
-					if (!Number.isInteger(offset) || offset < 0) throw Error("offset must be a non-negative integer");
+		function useSketchCursor(canvas, ring, width, brush, zoom, hidden) {
+			const last = (0, react.useRef)(null), heldPressure = (0, react.useRef)(1);
+			const update = (event, bounds) => {
+				if (event) last.current = event;
+				const pointer = last.current, node = canvas.current, cursor = ring.current;
+				if (!pointer || !node || !cursor) return;
+				const rect = bounds ?? node.getBoundingClientRect();
+				if (hidden || pointer.pointerType === "touch" || pointer.clientX < rect.left || pointer.clientX > rect.right || pointer.clientY < rect.top || pointer.clientY > rect.bottom) {
+					cursor.hidden = true;
+					return;
+				}
+				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`;
+				cursor.style.transform = `translate(${pointer.clientX - diameter / 2}px,${pointer.clientY - diameter / 2}px)`;
+			};
+			(0, react.useEffect)(() => {
+				update();
+				const observer = new ResizeObserver(() => update());
+				if (canvas.current) observer.observe(canvas.current);
+				return () => observer.disconnect();
+			}, [
+				width,
+				brush,
+				zoom,
+				hidden
+			]);
+			return {
+				down: (event) => {
+					heldPressure.current = event.pointerType === "pen" ? Math.max(.2, event.pressure) : 1;
+				},
+				move: (event, bounds) => update({
+					clientX: event.clientX,
+					clientY: event.clientY,
+					pointerId: event.pointerId,
+					pointerType: event.pointerType,
+					pressure: event.pressure
+				}, bounds),
+				leave: () => {
+					last.current = null;
+					if (ring.current) ring.current.hidden = true;
+				}
+			};
+		}
+		//#endregion
+		//#region src/sketch-view.jsx
+		const DEFAULT_KEYS = {
+			pen: "b",
+			eraser: "e",
+			line: "l",
+			rectangle: "r",
+			circle: "o",
+			pan: " ",
+			zoomIn: "=",
+			zoomOut: "-",
+			fit: "0"
+		};
+		function useSketchView(canvas, open) {
+			const [view, setView] = (0, react.useState)({
+				scale: 1,
+				x: 0,
+				y: 0
+			}), [keys, setKeys] = (0, react.useState)(() => {
+				try {
 					return {
-						...current,
-						protocolVersion: 2,
-						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
+						...DEFAULT_KEYS,
+						...JSON.parse(localStorage.getItem("codex-sketch-keys"))
 					};
+				} catch {
+					return DEFAULT_KEYS;
 				}
-				if (request.documentId !== current.documentId) throw Error("Document changed; inspect again");
-				if (pending || adapter.busy()) throw Error("Sketch is being edited; retry after it settles");
-				if (request.action === "preview") return {
-					...current,
-					png: await adapter.preview()
-				};
-				if (!["apply", "save"].includes(request.action)) throw Error("Unknown sketch action");
-				if (typeof request.requestId !== "string" || !request.requestId.length || request.requestId.length > 100) throw Error("A unique requestId is required");
-				const key = `${current.documentId}:${request.requestId}`, fingerprint = JSON.stringify({
-					...request,
-					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 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) => ({
-						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;
-					try {
-						await adapter.save(request.name);
-					} finally {
-						pending = false;
-					}
+			});
+			const [shortcuts, setShortcuts] = (0, react.useState)(() => {
+				try {
+					return localStorage.getItem("codex-sketch-shortcuts") !== "off";
+				} catch {
+					return true;
 				}
-				const result = {
-					...adapter.snapshot(),
-					...changedObjects ? {
-						changedObjects: changedObjects.slice(0, 100),
-						changedObjectCount: changedObjects.length
-					} : {}
+			}), [space, setSpace] = (0, react.useState)(false);
+			const drag = (0, react.useRef)(null), viewRef = (0, react.useRef)(view);
+			viewRef.current = view;
+			const zoom = (factor) => setView((v) => ({
+				...v,
+				scale: Math.max(.25, Math.min(8, v.scale * factor))
+			}));
+			const reset = () => setView({
+				scale: 1,
+				x: 0,
+				y: 0
+			});
+			(0, react.useEffect)(() => {
+				const node = canvas.current;
+				if (!node || !open) return;
+				const wheel = (e) => {
+					if (!shortcuts || !e.altKey) return;
+					e.preventDefault();
+					zoom(e.deltaY < 0 ? 1.1 : 1 / 1.1);
+				};
+				node.addEventListener("wheel", wheel, { passive: false });
+				return () => node.removeEventListener("wheel", wheel);
+			}, [open, shortcuts]);
+			(0, react.useEffect)(() => {
+				const stop = () => {
+					drag.current = null;
+					setSpace(false);
 				};
-				completed.set(key, {
-					fingerprint,
-					result,
-					receipt: {
-						requestId: request.requestId,
-						action: request.action,
-						revision: result.revision
-					}
-				});
-				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);
+				window.addEventListener("blur", stop);
+				return () => window.removeEventListener("blur", stop);
+			}, []);
+			(0, react.useEffect)(() => {
+				if (!open || !shortcuts) {
+					setSpace(false);
+					drag.current = null;
 				}
-				return result;
-			};
-		}
-		//#endregion
-		//#region src/sketch-formats.js
-		const SKETCH_FILE_ACCEPT = ".psd,.dsh-sketch.json,image/png,image/jpeg,image/webp";
-		const canvas = (w, h) => {
-			const c = document.createElement("canvas");
-			c.width = w;
-			c.height = h;
-			return c;
-		};
-		function runPsdCodec(action, payload) {
-			return new Promise((resolve, reject) => {
-				const worker = new Worker("/api/codex-subscription/sketch-psd-worker", { type: "module" });
-				const finish = (callback, value) => {
-					clearTimeout(timer);
-					worker.terminate();
-					callback(value);
+			}, [open, shortcuts]);
+			const setKey = (action, key) => {
+				key = key.toLowerCase();
+				if (!key || Object.entries(keys).some(([a, k]) => a !== action && k === key) || ["[", "]"].includes(key)) return;
+				const next = {
+					...keys,
+					[action]: key
 				};
-				const timer = setTimeout(() => finish(reject, Error("PSD operation timed out")), 3e4);
-				worker.onerror = () => finish(reject, Error("PSD codec could not be loaded"));
-				worker.onmessage = (event) => event.data.ok ? finish(resolve, event.data.value) : finish(reject, Error(event.data.error));
-				worker.postMessage({
-					action,
-					payload
-				});
-			});
-		}
-		function encodeSketchDocument(doc) {
-			return JSON.stringify({
-				format: "dsh-sketch",
-				version: 1,
-				doc
-			});
-		}
-		function decodeSketchDocument(text) {
-			if (text.length > 32 * 1024 * 1024) throw Error("Draft exceeds 32 MB");
-			const file = JSON.parse(text), source = file.doc;
-			if (file.format !== "dsh-sketch" || file.version !== 1 || !source || !Array.isArray(source.layers) || !source.layers.length || source.layers.length > 8) throw Error("Invalid sketch file");
-			const w = source.width ?? 1024, h = source.height ?? 1024;
-			if (!Number.isInteger(w) || !Number.isInteger(h) || w < 1 || h < 1 || w > 2048 || h > 2048) throw Error("Invalid canvas size");
-			let doc = {
-				...createSketchLayers(),
-				width: w,
-				height: h,
-				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === w && SKETCH_RATIOS[k][1] === h) ?? "custom"
+				setKeys(next);
+				try {
+					localStorage.setItem("codex-sketch-keys", JSON.stringify(next));
+				} catch {}
 			};
-			for (let i = 0; i < source.layers.length; i++) {
-				const layer = source.layers[i];
-				if (i) doc = applySketchCommands(doc, [{
-					op: "layer",
-					action: "add"
-				}]);
-				if (!Array.isArray(layer.strokes)) throw Error("Invalid strokes");
-				for (let j = 0; j < layer.strokes.length; j += 256) {
-					const strokes = layer.strokes.slice(j, j + 256);
-					doc = applySketchCommands(doc, strokes.map((s) => ({
-						...s,
-						op: "stroke",
-						layer: doc.active,
-						fill: s.fill ?? false
-					})));
-					const added = doc.layers.at(-1).strokes;
-					for (let k = 0; k < strokes.length; k++) {
-						const s = strokes[k];
-						if (s.brush !== void 0 && ![
-							"pen",
-							"pencil",
-							"marker"
-						].includes(s.brush)) throw Error("Invalid brush");
-						if (s.pressure !== void 0 && (!Number.isFinite(s.pressure) || s.pressure < .2 || s.pressure > 1)) throw Error("Invalid pressure");
-						Object.assign(added[added.length - strokes.length + k], {
-							brush: s.brush ?? "pen",
-							pressure: s.pressure ?? 1
-						});
+			return {
+				view,
+				keys,
+				shortcuts,
+				space,
+				zoom,
+				reset,
+				setKey,
+				toggle: () => setShortcuts((v) => {
+					try {
+						localStorage.setItem("codex-sketch-shortcuts", v ? "off" : "on");
+					} catch {}
+					return !v;
+				}),
+				keyDown: (e) => {
+					if (!shortcuts || e.ctrlKey || e.metaKey || e.altKey) return false;
+					const action = sketchShortcutAction(keys, e.key);
+					if (action === "pan") {
+						e.preventDefault();
+						setSpace(true);
+						return true;
 					}
-				}
-				const target = doc.layers.at(-1);
-				target.name = String(layer.name ?? "").slice(0, 40);
-				target.visible = layer.visible !== false;
-				if (layer.image) {
-					const image = layer.image;
-					if (typeof image.src !== "string" || !/^data:image\/png;base64,/.test(image.src) || image.src.length > 8 * 1024 * 1024 || [
-						"x",
-						"y",
-						"width",
-						"height"
-					].some((k) => !Number.isFinite(image[k]) || image[k] < 0 || image[k] > 1)) throw Error("Invalid draft image");
-					const bytes = Uint8Array.from(atob(image.src.slice(image.src.indexOf(",") + 1)), (c) => c.charCodeAt(0));
-					if (bytes.length < 24) throw Error("Invalid draft image");
-					const header = new DataView(bytes.buffer);
-					if (header.getUint32(0) !== 2303741511 || header.getUint32(4) !== 218765834 || header.getUint32(16) < 1 || header.getUint32(20) < 1 || header.getUint32(16) > 4096 || header.getUint32(20) > 4096) throw Error("Invalid draft image size");
-					target.image = {
-						src: image.src,
-						x: image.x,
-						y: image.y,
-						width: image.width,
-						height: image.height
+					if ([
+						"zoomIn",
+						"zoomOut",
+						"fit"
+					].includes(action)) {
+						e.preventDefault();
+						if (action === "fit") reset();
+						else zoom(action === "zoomOut" ? 1 / 1.2 : 1.2);
+						return true;
+					}
+					return false;
+				},
+				keyUp: (e) => {
+					if (e.key.toLowerCase() === keys.pan) setSpace(false);
+				},
+				down: (e) => {
+					if (e.button !== 1 && !space) return false;
+					e.preventDefault();
+					drag.current = {
+						id: e.pointerId,
+						x: e.clientX,
+						y: e.clientY,
+						view: viewRef.current
 					};
+					canvas.current.setPointerCapture(e.pointerId);
+					return true;
+				},
+				move: (e) => {
+					const d = drag.current;
+					if (!d || d.id !== e.pointerId) return false;
+					setView({
+						...d.view,
+						x: d.view.x + e.clientX - d.x,
+						y: d.view.y + e.clientY - d.y
+					});
+					return true;
+				},
+				end: (e) => {
+					if (drag.current?.id !== e.pointerId) return false;
+					drag.current = null;
+					if (canvas.current.hasPointerCapture(e.pointerId)) canvas.current.releasePointerCapture(e.pointerId);
+					return true;
 				}
-			}
-			const activeIndex = source.layers.findIndex((layer) => layer.id === source.active);
-			doc.active = doc.layers[Math.max(0, activeIndex)].id;
-			return doc;
+			};
 		}
-		async function exportSketchPsd(doc, images, composite) {
-			const width = doc.width ?? 1024, height = doc.height ?? 1024;
-			const children = doc.layers.map((layer, i) => {
-				const ctx = canvas(width, height).getContext("2d"), ref = layer.image;
-				if (ref) ctx.drawImage(images.get(ref.src), ref.x * width, ref.y * height, ref.width * width, ref.height * height);
-				paintSketch(ctx, layer.strokes, width, true, height);
-				return {
-					name: layer.name || `Layer ${i + 1}`,
-					hidden: !layer.visible,
-					opacity: 1,
-					blendMode: "normal",
-					imageData: ctx.getImageData(0, 0, width, height)
+		function SketchViewControls({ navigation, t }) {
+			const [open, setOpen] = (0, react.useState)(false), [placement, setPlacement] = (0, react.useState)(null);
+			const host = (0, react.useRef)(null), trigger = (0, react.useRef)(null);
+			const close = () => {
+				setOpen(false);
+				trigger.current?.focus({ preventScroll: true });
+			};
+			useSketchDismiss(open, setOpen, host, [".codexSketchViewControls", ".codexSketchKeyPanel"]);
+			(0, react.useLayoutEffect)(() => {
+				if (!open) return;
+				const dialog = host.current.closest("dialog");
+				const place = () => {
+					const box = dialog.getBoundingClientRect(), anchor = trigger.current.getBoundingClientRect();
+					const width = Math.min(360, box.width - 24);
+					setPlacement({
+						dialog,
+						style: {
+							width,
+							left: Math.max(12, Math.min(anchor.left - box.left, box.width - width - 12)),
+							bottom: box.bottom - anchor.top + 8,
+							maxHeight: Math.max(80, anchor.top - box.top - 24)
+						}
+					});
 				};
+				place();
+				const observer = new ResizeObserver(place);
+				observer.observe(dialog);
+				observer.observe(host.current);
+				window.addEventListener("resize", place);
+				return () => {
+					observer.disconnect();
+					window.removeEventListener("resize", place);
+				};
+			}, [open]);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: host,
+				className: "codexSketchViewControls",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("sketchZoomOut"),
+						onClick: () => navigation.zoom(1 / 1.2),
+						children: "−"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						title: t("sketchFit"),
+						onClick: navigation.reset,
+						children: [Math.round(navigation.view.scale * 100), "%"]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-label": t("sketchZoomIn"),
+						onClick: () => navigation.zoom(1.2),
+						children: "＋"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						ref: trigger,
+						type: "button",
+						"aria-expanded": open,
+						onClick: () => setOpen(!open),
+						children: t("sketchKeys")
+					}),
+					open && placement ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "codexSketchKeyPanel",
+						"aria-label": t("sketchKeys"),
+						style: placement.style,
+						onKeyDown: (e) => {
+							if (e.key === "Escape") {
+								e.preventDefault();
+								e.stopPropagation();
+								close();
+							}
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchKeys") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-label": t("sketchFileClose"),
+								onClick: close,
+								children: "×"
+							})] }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "codexSketchKeysEnabled",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("sketchKeysEnabled") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "checkbox",
+									checked: navigation.shortcuts,
+									onChange: navigation.toggle
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: t("sketchNavigationHint") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSketchKeyGrid",
+								children: Object.entries(navigation.keys).map(([action, key]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [t(`sketchKey_${action}`), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									"aria-label": t(`sketchKey_${action}`),
+									value: key === " " ? "Space" : key,
+									readOnly: true,
+									onKeyDown: (e) => {
+										if (e.key === "Tab" || e.key === "Escape") return;
+										e.preventDefault();
+										e.stopPropagation();
+										if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) navigation.setKey(action, e.key);
+									}
+								})] }, action))
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchKeyHint") })
+						]
+					}), placement.dialog) : null
+				]
 			});
-			const context = canvas(width, height).getContext("2d");
-			context.fillStyle = "#fff";
-			context.fillRect(0, 0, width, height);
-			if (children[0] && !children[0].hidden) {
-				const bottom = canvas(width, height);
-				bottom.getContext("2d").putImageData(children[0].imageData, 0, 0);
-				context.drawImage(bottom, 0, 0);
-				children[0].imageData = context.getImageData(0, 0, width, height);
-			} else {
-				if (children.length >= 8) throw Error("Show the bottom layer before exporting this eight-layer drawing");
-				children.unshift({
-					name: "Paper",
-					opacity: 1,
-					blendMode: "normal",
-					imageData: context.getImageData(0, 0, width, height)
-				});
-			}
-			return runPsdCodec("write", {
-				width,
-				height,
-				children,
-				imageData: composite.getContext("2d").getImageData(0, 0, width, height)
-			});
-		}
-		async function importSketchPsd(file) {
-			if (file.size > 32 * 1024 * 1024) throw Error("PSD exceeds 32 MB");
-			const psd = await runPsdCodec("read", await file.arrayBuffer());
-			const scale = Math.min(1, 1024 / Math.max(psd.width, psd.height)), width = Math.max(1, Math.round(psd.width * scale)), height = Math.max(1, Math.round(psd.height * scale));
-			const doc = {
-				...createSketchLayers(),
-				width,
-				height,
-				ratio: Object.keys(SKETCH_RATIOS).find((k) => SKETCH_RATIOS[k][0] === width && SKETCH_RATIOS[k][1] === height) ?? "custom",
-				layers: [],
-				nextId: psd.layers.length + 1
-			};
-			for (const [i, layer] of psd.layers.entries()) {
-				const src = canvas(layer.imageData.width, layer.imageData.height);
-				src.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(layer.imageData.data), layer.imageData.width, layer.imageData.height), 0, 0);
-				const out = canvas(width, height), ctx = out.getContext("2d");
-				ctx.globalAlpha = layer.opacity;
-				ctx.drawImage(src, layer.left * scale, layer.top * scale, src.width * scale, src.height * scale);
-				doc.layers.push({
-					id: i + 1,
-					name: layer.name,
-					visible: !layer.hidden,
-					strokes: [],
-					image: {
-						src: out.toDataURL("image/png"),
-						x: 0,
-						y: 0,
-						width: 1,
-						height: 1
-					}
-				});
-			}
-			return doc;
 		}
 		//#endregion
 		//#region src/sketch-files.jsx
-		function SketchFiles({ save, load, fresh, importImage, download, hasContent, disabled, t, report, onWorking }) {
+		function SketchFiles({ save, load, fresh, importImage, download, hasContent, disabled, t, runOperation }) {
 			const [open, setOpen] = (0, react.useState)(false), [rows, setRows] = (0, react.useState)([]), [name, setName] = (0, react.useState)(""), [remove, setRemove] = (0, react.useState)(null), [working, setWorking] = (0, react.useState)(false);
 			const [format, setFormat] = (0, react.useState)("png");
 			const input = (0, react.useRef)(null), host = (0, react.useRef)(null);
@@ -2000,19 +2708,14 @@ window.__ModuleLoader__.load({
 				}
 			}, [open, working]);
 			useSketchDismiss(open, setOpen, host, [".codexSketchFiles"]);
-			const run = async (operation) => {
-				if (disabled || working) return;
+			const run = (operation) => runOperation(async () => {
 				setWorking(true);
-				onWorking(true);
 				try {
 					await operation();
-				} catch (error) {
-					report(error?.message || t("sketchStorageFailed"));
 				} finally {
 					setWorking(false);
-					onWorking(false);
 				}
-			};
+			});
 			const refresh = async () => setRows(await sketchDrafts("list"));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: host,
@@ -2154,46 +2857,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);
@@ -2349,13 +3012,15 @@ 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, failures = 0;
+			let stopped = false, token, timer, attempts = 0, failures = 0, pending = false;
 			const call = (endpoint, payload) => rpc.call(CHANNEL, `sketch/${endpoint}`, {
 				sessionId,
 				token,
 				...payload
 			}).then(unwrap);
 			const poll = async () => {
+				if (stopped || pending) return;
+				pending = true;
 				try {
 					const tasks = await call("poll");
 					for (const task of tasks) {
@@ -2390,25 +3055,53 @@ window.__ModuleLoader__.load({
 						timer = setTimeout(connect, Math.min(1e4, 1e3 * 2 ** (failures - 1)));
 					}
 					return;
+				} finally {
+					pending = false;
 				}
 				failures = 0;
 				if (!stopped) timer = setTimeout(poll, pollDelay());
 			};
-			const connect = () => void call("connect").then((value) => {
-				token = value.token;
+			const connect = () => {
+				if (stopped || pending) return;
+				pending = true;
+				call("connect").then((value) => {
+					pending = false;
+					token = value.token;
+					attempts = 0;
+					if (stopped) call("disconnect").catch(() => {});
+					else poll();
+				}, (error) => {
+					pending = false;
+					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);
+				});
+			};
+			const wake = () => {
+				if (stopped || pending) return;
+				clearTimeout(timer);
 				attempts = 0;
-				if (stopped) call("disconnect").catch(() => {});
-				else poll();
-			}, (error) => {
-				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);
-			});
+				failures = 0;
+				token ? poll() : connect();
+			};
+			const visible = () => {
+				if (document.visibilityState === "visible") wake();
+			};
+			if (typeof window !== "undefined") {
+				window.addEventListener("online", wake);
+				window.addEventListener("focus", wake);
+				document.addEventListener("visibilitychange", visible);
+			}
 			connect();
 			return () => {
 				stopped = true;
 				clearTimeout(timer);
+				if (typeof window !== "undefined") {
+					window.removeEventListener("online", wake);
+					window.removeEventListener("focus", wake);
+					document.removeEventListener("visibilitychange", visible);
+				}
 				if (token) call("disconnect").catch(() => {});
 			};
 		}
@@ -2435,6 +3128,7 @@ window.__ModuleLoader__.load({
 			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 toolWidths = (0, react.useRef)({});
 			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);
@@ -2464,8 +3158,24 @@ window.__ModuleLoader__.load({
 				setColor(value);
 				if (selected) editObject({ color: value });
 			};
+			const chooseTool = (name, nextBrush = brush) => {
+				setWidth(switchSketchToolWidth(toolWidths.current, {
+					tool,
+					brush,
+					width
+				}, {
+					tool: name,
+					brush: nextBrush
+				}));
+				setBrush(nextBrush);
+				setTool(name);
+				if (name !== "select") setSelection(null);
+			};
+			const chooseBrush = (name) => chooseTool("pen", name);
 			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 [hydrated, setHydrated] = (0, react.useState)(false), [recovered, setRecovered] = (0, react.useState)(false);
+			const [restoreAttempt, retryRestore] = (0, react.useState)(0);
+			const [layersOpen, setLayersOpen] = (0, react.useState)(false), [busy, setBusy] = (0, react.useState)(true), [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 || agentLocked || tool === "select" || tool === "text");
 			useSketchDismiss(shapesOpen, setShapesOpen, dialog, [".codexSketchShapeMenu", ".codexSketchShapeToggle"]);
@@ -2500,147 +3210,103 @@ window.__ModuleLoader__.load({
 			const change = (action, id, value) => {
 				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();
-				else documentRevision.current++;
-				doc.current = next;
-				setError("");
-				schedule();
-			};
-			(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();
-			}, []);
-			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()}`,
-					updated: Date.now(),
-					doc: structuredClone(doc.current)
-				};
-				await sketchDrafts("save", row);
-				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();
-			};
-			const replace = (next, decoded, identity) => {
-				documentId.current = crypto.randomUUID();
-				documentRevision.current++;
-				doc.current = identifyObjects(structuredClone(next));
-				setSelection(null);
-				setTextEdit(null);
-				images.current = decoded;
-				cache.current.clear();
-				undo.current = [];
-				redo.current = [];
-				saved.current = identity;
-				dirty.current = false;
-				schedule();
-			};
-			const fresh = async () => {
-				await saveChanges();
-				replace(createSketchLayers(), /* @__PURE__ */ new Map(), null);
-			};
-			const load = async (row) => {
-				if (row.id === saved.current?.id) return;
-				await saveChanges();
-				const decoded = /* @__PURE__ */ new Map();
-				await decodeSketchImages(row.doc, decoded);
-				replace(row.doc, decoded, {
-					id: row.id,
-					name: row.name
-				});
-			};
-			const importImage = async (file) => {
-				if (file.name?.toLowerCase().endsWith(".psd") || file.name?.toLowerCase().endsWith(".dsh-sketch.json")) {
-					if (file.size > 32 * 1024 * 1024) throw Error("File exceeds 32 MB");
-					const next = file.name.toLowerCase().endsWith(".psd") ? await importSketchPsd(file) : decodeSketchDocument(await file.text());
-					const decoded = /* @__PURE__ */ new Map();
-					await decodeSketchImages(next, decoded);
-					await saveChanges();
-					replace(next, decoded, null);
-					dirty.current = true;
-					return;
-				}
-				if (doc.current.layers.length >= 8) throw Error("Layer limit");
-				const image = await importSketchImage(file), w = doc.current.width ?? 1024, h = doc.current.height ?? 1024;
-				const scale = Math.min(w / image.width, h / image.height), width = image.width * scale / w, height = image.height * scale / h;
-				const layer = {
-					id: doc.current.nextId,
-					name: file.name?.slice(0, 40) || t("sketchImport"),
-					visible: true,
-					strokes: [],
-					image: {
-						src: image.src,
-						x: (1 - width) / 2,
-						y: (1 - height) / 2,
-						width,
-						height
-					}
-				};
-				await decodeSketchImages({ layers: [layer] }, images.current);
-				checkpoint();
-				doc.current = {
-					...doc.current,
-					nextId: layer.id + 1,
-					active: layer.id,
-					layers: [...doc.current.layers, layer]
-				};
+				if (next === doc.current) return;
+				if (action !== "select") checkpoint();
+				else documentRevision.current++;
+				doc.current = next;
+				setError("");
 				schedule();
 			};
-			const close = async () => {
-				if (agentRun.current?.locked) {
+			(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();
+			}, []);
+			const { save, saveChanges, fresh, load, importImage, restore } = createSketchDocumentLifecycle(localSession.current, {
+				sessionId,
+				t,
+				schedule,
+				checkpoint,
+				cache,
+				setSelection,
+				setTextEdit,
+				setRecovered
+			});
+			(0, react.useEffect)(() => localSession.current.retain?.(), []);
+			(0, react.useEffect)(() => {
+				let live = true;
+				setHydrated(false);
+				setBusy(true);
+				setError("");
+				(enabled ? restore(() => live) : Promise.resolve()).then(() => {
+					if (live) {
+						setHydrated(true);
+						setBusy(false);
+					}
+				}).catch((error) => {
+					if (live) setError(t(error.code === "SKETCH_STORAGE_BLOCKED" ? "sketchStorageBlocked" : "sketchStorageFailed"));
+				});
+				return () => {
+					live = false;
+				};
+			}, [
+				enabled,
+				sessionId,
+				restoreAttempt
+			]);
+			(0, react.useEffect)(() => {
+				if (!hydrated || !enabled || !dirty.current || busy || agentLocked) return;
+				const timer = setTimeout(() => {
+					if (active.current || sizeGesture.current || !dirty.current) return;
+					sketchDrafts("checkpoint", {
+						id: sessionId,
+						updated: Date.now(),
+						doc: structuredClone(doc.current)
+					}).catch(() => setError(t("sketchRecoveryFailed")));
+				}, 1500);
+				return () => clearTimeout(timer);
+			}, [
+				revision,
+				hydrated,
+				enabled,
+				busy,
+				agentLocked,
+				sessionId
+			]);
+			const close = () => {
+				if (!hydrated || agentRun.current?.locked) {
 					onClose();
 					return;
 				}
-				if (busy || active.current) return;
-				setBusy(true);
-				try {
+				return runFile(async () => {
 					await saveChanges();
 					onClose();
-				} catch {
-					setError(t("sketchStorageFailed"));
-				} finally {
-					setBusy(false);
-				}
-			};
-			const runFile = async (operation) => {
-				if (busy || agentRun.current?.locked || active.current) return;
-				setBusy(true);
-				setError("");
-				try {
-					await operation();
-				} catch {
-					setError(t("sketchStorageFailed"));
-				} finally {
-					setBusy(false);
-				}
+				});
 			};
+			const operationGate = (0, react.useRef)(null);
+			operationGate.current ??= createSketchOperationGate();
+			const runFile = (operation) => operationGate.current.run(operation, {
+				blocked: busy || agentRun.current?.locked || Boolean(active.current),
+				working: setBusy,
+				report: (error) => setError(error ? error?.message || t("sketchStorageFailed") : "")
+			});
 			(0, react.useEffect)(() => {
-				if (open && !agentLocked && incoming && incoming !== received.current) {
+				if (open && hydrated && !busy && !agentLocked && incoming && incoming !== received.current) {
 					received.current = incoming;
 					runFile(() => importImage(incoming.file));
 				}
 			}, [
 				open,
 				incoming,
-				agentLocked
+				agentLocked,
+				hydrated,
+				busy
 			]);
 			const keyDown = (event) => {
 				if (event.target.closest("input,textarea,select,[contenteditable=true]") || event.isComposing || busy || active.current) return;
@@ -2652,14 +3318,6 @@ window.__ModuleLoader__.load({
 					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",
@@ -2673,21 +3331,24 @@ window.__ModuleLoader__.load({
 					return;
 				}
 				if (command || event.altKey) return;
-				const tools = Object.fromEntries([
+				const action = sketchShortcutAction(navigation.keys, key);
+				if ([
 					"pen",
 					"eraser",
 					"line",
 					"rectangle",
-					"circle"
-				].map((action) => [navigation.keys[action], action]));
-				if (tools[key]) {
+					"circle",
+					"select",
+					"text"
+				].includes(action)) {
 					event.preventDefault();
-					setTool(tools[key]);
-					if (tools[key] === "pen") setBrush("pen");
+					chooseTool(action);
 				}
 				if (key === "[" || key === "]") {
 					event.preventDefault();
-					setWidth((value) => Math.max(2, Math.min(64, value + (key === "]" ? 2 : -2))));
+					const value = stepSketchWidth(selected?.width ?? width, key === "]" ? 1 : -1);
+					if (selected) editObject({ width: value });
+					else setWidth(value);
 				}
 			};
 			const current = doc.current.layers.find((layer) => layer.id === doc.current.active);
@@ -2696,81 +3357,14 @@ 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]) {
-					let point = sketchPoint(sample.clientX, sample.clientY, rect);
-					if (!point) continue;
-					const layer = doc.current.layers.find((layer) => layer.id === gesture.layer);
-					if (gesture.eraseStroke) {
-						const previous = gesture.last ?? point;
-						const steps = Math.min(256, Math.max(1, Math.ceil(Math.hypot(point.x - previous.x, point.y - previous.y) * SKETCH_SIZE / Math.max(2, width / 2))));
-						layer.strokes = layer.strokes.filter((stroke) => {
-							for (let i = 1; i <= steps; i++) if (strokeHit(stroke, {
-								x: previous.x + (point.x - previous.x) * i / steps,
-								y: previous.y + (point.y - previous.y) * i / steps
-							}, width / 2, doc.current.width, doc.current.height)) return false;
-							return true;
-						});
-					} else {
-						const stroke = layer.strokes.at(-1);
-						if ([
-							"line",
-							"arrow",
-							"rectangle",
-							"circle"
-						].includes(stroke.shape)) {
-							if (stroke.shape === "line" && event.shiftKey) {
-								const w = doc.current.width ?? 1024, h = doc.current.height ?? 1024, a = stroke.points[0];
-								const snapped = snapLine({
-									x: a.x * w,
-									y: a.y * h
-								}, {
-									x: point.x * w,
-									y: point.y * h
-								});
-								point = {
-									x: snapped.x / w,
-									y: snapped.y / h
-								};
-							}
-							stroke.points = [stroke.points[0], point];
-						} else {
-							const last = stroke.points.at(-1);
-							if (Math.hypot(last.x - point.x, last.y - point.y) < 1e-4) continue;
-							if (stroke.points.length >= 2e3) stroke.points = stroke.points.filter((_, i) => i % 2 === 0);
-							stroke.points.push(point);
-						}
-					}
-					gesture.last = point;
+				const samples = native.getCoalescedEvents?.() ?? [];
+				try {
+					doc.current = updateSketchGesture(doc.current, gesture, samples.length ? [...samples, native] : [native], rect, width, event.shiftKey);
+					schedule(Boolean(gesture.object));
+				} catch (error) {
+					setError(error?.message || t("sketchFailed"));
 				}
-				schedule(false);
 			};
 			const end = (event, cancel = false) => {
 				if (navigation.end(event)) return;
@@ -2793,7 +3387,7 @@ window.__ModuleLoader__.load({
 							layer: drawn.layer,
 							id: stroke.id
 						});
-						setTool("select");
+						chooseTool("select");
 					}
 				}
 				active.current = null;
@@ -2819,7 +3413,7 @@ window.__ModuleLoader__.load({
 				available: () => enabled && agentEnabled,
 				previewEnabled: () => agentPreview,
 				open: () => onOpen(),
-				busy: () => busy || Boolean(active.current) || Boolean(textEdit) || sizeGesture.current,
+				busy: () => operationGate.current.running || busy || Boolean(active.current) || Boolean(textEdit) || sizeGesture.current,
 				document: () => doc.current,
 				snapshot: () => ({
 					documentId: documentId.current,
@@ -2866,23 +3460,18 @@ window.__ModuleLoader__.load({
 				previewEnabled: () => agentAdapter.current.previewEnabled()
 			});
 			(0, react.useEffect)(() => {
-				if (!enabled || !agentEnabled) return;
+				if (!enabled || !agentEnabled || !hydrated) return;
 				const api = Object.freeze({
 					version: 2,
 					sessionId,
 					execute: (request) => agentRun.current.execute(request),
-					export: async (format) => {
-						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 = "";
-						for (let i = 0; i < data.length; i += 8192) raw += String.fromCharCode(...data.subarray(i, i + 8192));
-						return {
-							extension,
-							mediaType: blob.type,
-							base64: btoa(raw)
-						};
-					}
+					export: (format) => exportSketchAgentFile(format, {
+						gate: operationGate.current,
+						blocked: agentAdapter.current.busy() || agentRun.current.locked,
+						working: setBusy,
+						report: (error) => setError(error ? error.message || t("sketchFailed") : ""),
+						exportFile: (value) => agentAdapter.current.export(value)
+					})
 				});
 				window.dshSketchAgent = api;
 				return () => {
@@ -2892,14 +3481,15 @@ window.__ModuleLoader__.load({
 				enabled,
 				agentEnabled,
 				rpc,
-				sessionId
+				sessionId,
+				hydrated
 			]);
 			(0, react.useEffect)(() => {
 				if (!enabled || !agentEnabled) {
 					if (agentRun.current.locked) agentRun.current.stop();
 					return;
 				}
-				if (!rpc || !sessionId) return;
+				if (!rpc || !sessionId || !hydrated) return;
 				let live = true;
 				const disconnect = connectSketchAgent(rpc, sessionId, (request) => {
 					if (!live) throw Error("Sketch session disconnected");
@@ -2907,7 +3497,7 @@ window.__ModuleLoader__.load({
 				}, (message) => {
 					agentRun.current.fail();
 					setError(message);
-				}, () => 350);
+				}, () => agentRun.current.locked ? 350 : 2e3);
 				return () => {
 					live = false;
 					disconnect();
@@ -2916,23 +3506,18 @@ window.__ModuleLoader__.load({
 				enabled,
 				agentEnabled,
 				rpc,
-				sessionId
+				sessionId,
+				hydrated
 			]);
-			const attach = async () => {
-				if (!enabled || busy || agentRun.current?.locked) return;
-				setBusy(true);
-				setError("");
-				try {
+			const attach = () => {
+				if (!enabled) return;
+				return runFile(async () => {
 					paint();
-					const blob = await new Promise((resolve, reject) => canvas.current.toBlob((blob) => blob ? resolve(blob) : reject(Error("PNG")), "image/png"));
+					const blob = await new Promise((resolve, reject) => canvas.current.toBlob((blob) => blob ? resolve(blob) : reject(Error(t("sketchFailed"))), "image/png"));
 					await saveChanges();
 					await attachSketch(blob);
 					onClose();
-				} catch {
-					setError(t("sketchFailed"));
-				} finally {
-					setBusy(false);
-				}
+				});
 			};
 			const exportFile = async (format = "png") => {
 				paint();
@@ -2952,8 +3537,8 @@ window.__ModuleLoader__.load({
 			};
 			agentAdapter.current.export = exportFile;
 			const download = async (format) => {
+				setError("");
 				const { blob, extension } = await exportFile(format);
-				await saveChanges();
 				const url = URL.createObjectURL(blob), link = document.createElement("a");
 				link.href = url;
 				link.download = `${(saved.current?.name || "sketch").replace(/[\\/:*?"<>|\u0000-\u001f]/g, "-").slice(0, 80)}.${extension}`;
@@ -2962,24 +3547,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",
@@ -3026,7 +3604,7 @@ window.__ModuleLoader__.load({
 								type: "button",
 								"aria-label": t("sketchCancel"),
 								title: t("sketchCancel"),
-								disabled: busy && !agentLocked,
+								disabled: busy && hydrated && !agentLocked,
 								onClick: close,
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, { name: "close" })
 							}),
@@ -3039,8 +3617,7 @@ window.__ModuleLoader__.load({
 								hasContent: doc.current.layers.some((l) => l.visible && (l.image || l.strokes.length)),
 								disabled: agentLocked || busy,
 								t,
-								report: setError,
-								onWorking: setBusy
+								runOperation: runFile
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "codexSketchHeading",
@@ -3121,24 +3698,28 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-					enabled && agentEnabled && agentState !== "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					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,
+					recovered ? /* @__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", {
+						children: [t("sketchRecovered"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
-							"aria-label": t("sketchRunStop"),
-							title: t("sketchRunStop"),
-							onClick: () => agentRun.current.stop(),
+							onClick: () => setRecovered(false),
+							"aria-label": t("sketchDismissStatus"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
 								name: "close",
-								size: 16
+								size: 14
 							})
-						}) : 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" : ""}`,
@@ -3254,6 +3835,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]
 									});
@@ -3329,13 +3911,10 @@ window.__ModuleLoader__.load({
 									sizeGesture.current = false;
 								},
 								onChange: (value) => {
-									if (opacityMode) {
-										setFlow(value);
-										if (selected) editObject({ opacity: value / 100 });
-									} else {
-										setWidth(value);
-										if (selected) editObject({ width: value });
-									}
+									if (opacityMode) if (selected) editObject({ opacity: value / 100 });
+									else setFlow(value);
+									else if (selected) editObject({ width: value });
+									else setWidth(value);
 								}
 							}),
 							textEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
@@ -3371,7 +3950,7 @@ window.__ModuleLoader__.load({
 											schedule();
 										}
 										setTextEdit(null);
-										setTool("select");
+										chooseTool("select");
 									} catch (e) {
 										setError(e.message);
 									}
@@ -3440,89 +4019,11 @@ window.__ModuleLoader__.load({
 									!doc.current.layers.some((layer) => layer.image) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: t("sketchPicturesEmpty") }) : null
 								]
 							}) : null,
-							layersOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-								className: "codexSketchLayers",
-								"aria-label": t("sketchLayers"),
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("sketchLayers") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										title: t("sketchLayerAdd"),
-										"aria-label": t("sketchLayerAdd"),
-										disabled: agentLocked || busy || doc.current.layers.length >= 8,
-										onClick: () => change("add"),
-										children: "＋"
-									})] }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "codexLayerList",
-										children: doc.current.layers.slice().reverse().map((layer) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-											className: "codexLayerRow",
-											"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),
-												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-													name: layer.visible ? "eye" : "eyeOff",
-													size: 18
-												})
-											}), /* @__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}`
-											})]
-										}, layer.id))
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-										className: "codexSketchLayerLabel",
-										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}`,
-										maxLength: 40,
-										onBlur: (e) => {
-											if (e.target.value !== current.name) change("rename", current.id, e.target.value);
-										},
-										onKeyDown: (e) => {
-											if (e.key === "Enter") e.currentTarget.blur();
-										}
-									}, current.id + "-" + current.name),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: "codexLayerActions",
-										children: [
-											"duplicate",
-											"up",
-											"down",
-											"delete"
-										].map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-											type: "button",
-											title: t(`sketchLayer_${action}`),
-											"aria-label": t(`sketchLayer_${action}`),
-											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,
-												size: 17
-											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(`sketchLayer_${action}`) })]
-										}, action))
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-										type: "button",
-										className: "codexSketchClearLayer",
-										disabled: agentLocked || busy || !current.strokes.length && !current.image,
-										onClick: () => change("clear"),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-											name: "clear",
-											size: 16
-										}), t("sketchClearLayer")]
-									})
-								]
+							layersOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SketchLayerPanel, {
+								document: doc.current,
+								disabled: agentLocked || busy,
+								change,
+								t
 							}) : null
 						]
 					}),
@@ -3540,70 +4041,15 @@ window.__ModuleLoader__.load({
 								navigation,
 								t
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "codexSketchPill",
-								role: "toolbar",
-								"aria-label": t("sketchTitle"),
-								title: t("sketchShortcuts"),
-								children: [
-									[
-										"select",
-										"pen",
-										"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-expanded": shapesOpen,
-										disabled: agentLocked || busy,
-										onClick: () => setShapesOpen((v) => !v),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceIcon, {
-											name: "rectangle",
-											size: 23
-										}), /* @__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.jsx)(SketchToolPicker, {
+								t,
+								disabled: agentLocked || busy,
+								tool,
+								brush,
+								chooseBrush,
+								chooseTool,
+								shapesOpen,
+								setShapesOpen
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "codexLayerBrush",
@@ -3614,20 +4060,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: [
@@ -3709,10 +4141,14 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-					error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					error ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 						className: "codexSketchHint",
 						role: "alert",
-						children: error
+						children: [error, !hydrated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => retryRestore((value) => value + 1),
+							children: t("accountRetry")
+						}) : null]
 					}) : null
 				]
 			})] });
@@ -3734,7 +4170,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)}
@@ -3915,9 +4351,27 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client-locales.js
 		const zh = {
+			advancedModelSearch: "模型与搜索",
+			subagentBackendTitle: "独立子任务",
+			subagentBackend_dsh: "DSH",
+			subagentBackend_codex: "Codex",
+			connectionTitle: "连接方式",
+			connectionHint: "默认 SSE。WebSocket 实验性复用连接与上下文传输，跟随现有代理；连接失败可回退 SSE。下次请求生效，不扩大上下文容量。",
+			subagentBackendHint: "Codex 复用订阅登录，跟随当前订阅模型和工作区权限；其他模型会话使用 Luna low。共享上下文子任务仍用 DSH。",
+			subagentBackendUnavailable: "当前宿主缺少子代理服务，请更新 DSH。",
+			sketchRecovered: "已恢复未保存草稿",
+			sketchRecoveryFailed: "恢复检查点保存失败，请手动保存或导出草稿。",
+			sketchStorageBlocked: "草稿正被其他窗口占用，请关闭其他草图窗口后重试。",
+			sketchDraftLimit: "已达 20 份草稿上限。请先导出，或删除不需要的草稿后保存。",
+			sketchStorageLimit: "草稿存储空间已满。请先导出，或删除不需要的草稿后保存。",
 			sketchSizeShort: "粗细",
 			sketchObjectDuplicate: "复制对象",
 			sketchObjectDelete: "删除对象",
+			sketchBrushHint_pen: "实色圆头墨线",
+			sketchBrushHint_pencil: "细腻颗粒，叠画加深",
+			sketchBrushHint_marker: "半透明平头，适合高亮",
+			sketchDismissStatus: "收起提示",
+			sketchRunResumeHint: "允许 Agent 接收后续绘图请求，不会自动重发消息",
 			sketchTool_select: "选择",
 			sketchTool_text: "文字",
 			sketchTool_arrow: "箭头",
@@ -4321,9 +4775,27 @@ window.__ModuleLoader__.load({
 			imageRemoveAnnotation: "删除标注"
 		};
 		const en = {
+			advancedModelSearch: "Models and search",
+			subagentBackendTitle: "Independent subtasks",
+			subagentBackend_dsh: "DSH",
+			subagentBackend_codex: "Codex",
+			connectionTitle: "Connection",
+			connectionHint: "SSE by default. Experimental WebSocket reuses connections and context transfers, follows your proxy, and can fall back to SSE on connection failure. Applies to the next request; context limits stay the same.",
+			subagentBackendHint: "Codex uses your subscription login, current subscription model and workspace permissions; other model sessions use Luna low. Shared-context subtasks stay in DSH.",
+			subagentBackendUnavailable: "Subagent services are unavailable. Update DSH to use this option.",
+			sketchRecovered: "Unsaved sketch recovered",
+			sketchRecoveryFailed: "Recovery checkpoint failed. Save or export your draft.",
+			sketchStorageBlocked: "Draft storage is in use. Close other sketch windows and retry.",
+			sketchDraftLimit: "The 20-draft limit is reached. Export first, or remove an unwanted draft before saving.",
+			sketchStorageLimit: "Draft storage is full. Export first, or remove an unwanted draft before saving.",
 			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",
@@ -4729,6 +5201,15 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client-styles.js
 		const STYLE = `
+.codexSubscriptionAdvancedPreferences{display:flex;flex-direction:column;gap:10px}
+.codexSubscriptionSearchChoices.codexSubscriptionQuotaModes{display:flex;flex:0 0 auto;gap:0;grid-template-columns:none}
+.codexSubscriptionSettingsDisclosure>summary{display:flex;align-items:center;gap:10px;min-height:28px;cursor:pointer;list-style:none;font-size:14px;font-weight:500}
+.codexSubscriptionSettingsDisclosure>summary::-webkit-details-marker{display:none}
+.codexSubscriptionSettingsDisclosure>summary>.codexSubscriptionPreferenceHint{margin-left:auto;font-weight:400}
+.codexSubscriptionSettingsDisclosure>summary>svg{flex:none;transition:transform .15s}
+.codexSubscriptionSettingsDisclosure[open]>summary>svg{transform:rotate(180deg)}
+.codexSubscriptionSettingsDisclosure>summary:focus-visible{outline:2px solid var(--dsw-alias-border-l3);outline-offset:4px;border-radius:4px}
+.codexSubscriptionSettingsDisclosureBody{padding-top:8px;margin-top:8px;border-top:1px solid var(--dsw-alias-border-l2)}
 .codexComposerQuota[data-warning=true]{color:var(--dsw-alias-state-error-primary)}
 .codexComposerQuota[data-warning=true] progress{accent-color:var(--dsw-alias-state-error-primary)}
 .codexComposerQuota[data-warning=true] progress::-webkit-progress-value{background:var(--dsw-alias-state-error-primary)}
@@ -4781,20 +5262,9 @@ window.__ModuleLoader__.load({
 .codexSubscriptionContextModelCopy span{font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
 .codexSubscriptionContextInput{width:116px}
 .codexSubscriptionSearch{display:flex;flex-direction:column;gap:7px}
-.codexSubscriptionSearchChoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
-.codexSubscriptionSearchChoice{display:grid;grid-template-columns:14px minmax(0,1fr);align-items:center;column-gap:8px;min-width:0;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);padding:9px 10px;text-align:left;cursor:pointer}
-.codexSubscriptionSearchChoice:has(input:disabled){cursor:not-allowed;opacity:.5}
-.codexSubscriptionSearchChoice:has(input:checked){border-color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2)}
-.codexSubscriptionSearchChoice:has(input:focus-visible){outline:2px solid var(--dsw-alias-border-l3);outline-offset:2px}
-.codexSubscriptionSearchInput{width:14px;height:14px;margin:0;accent-color:var(--dsw-alias-label-primary);cursor:inherit}
-.codexSubscriptionSearchCopy{display:block;min-width:0;pointer-events:none}
-.codexSubscriptionSearchCopy strong,.codexSubscriptionSearchCopy span{display:block}
-.codexSubscriptionSearchCopy strong{font-size:12px;line-height:18px;font-weight:500;color:var(--dsw-alias-label-secondary)}
-.codexSubscriptionSearchChoice:has(input:checked) strong{color:var(--dsw-alias-label-primary)}
-.codexSubscriptionSearchCopy span{font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
 .codexSubscriptionDivider{height:1px;background:var(--dsw-alias-border-l2)}
 .codexSubscriptionQuotaModes[data-saving=true] .codexSubscriptionQuotaMode:has(input:disabled){cursor:wait;opacity:1}
-.codexSubscriptionSearchChoices[data-saving=true] .codexSubscriptionSearchChoice:has(input:disabled){cursor:wait;opacity:1}
+.codexSubscriptionSearchChoices[data-saving=true] .codexSubscriptionQuotaMode:has(input:disabled){cursor:wait;opacity:1}
 .codexSubscriptionAccountRow,.codexSubscriptionSectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
 .codexSubscriptionStatus{display:flex;align-items:center;gap:8px;font-size:14px;line-height:22px;font-weight:500}
 .codexSubscriptionAccounts{display:flex;flex-direction:column;border-top:1px solid var(--dsw-alias-border-l2)}
@@ -6082,6 +6552,7 @@ window.__ModuleLoader__.load({
 			let modelRefreshGeneration = 0;
 			let modelRefreshStarted = false;
 			let disposed = false;
+			let subagentBackendAvailable = false;
 			const sameModels = (left, right) => left.length === right.length && left.every((model, index) => JSON.stringify(model) === JSON.stringify(right[index]));
 			const nativeSnapshot = () => scope.getSnapshot();
 			const read = () => {
@@ -6095,6 +6566,9 @@ window.__ModuleLoader__.load({
 				return Object.freeze({
 					status: current.status,
 					...capabilities,
+					connectionMode: value?.connectionMode === "websocket" ? "websocket" : "sse",
+					subagentBackend: value?.subagentBackend === "codex" ? "codex" : "dsh",
+					subagentBackendAvailable,
 					quickQuotaMode: normalizeQuickQuotaMode(value?.[QUICK_QUOTA_MODE_FIELD], value?.[LEGACY_QUICK_QUOTA_FIELD]),
 					searchProvider: normalizeSearchProvider(value?.[SEARCH_PROVIDER_FIELD]),
 					speedMode: normalizeSpeedMode(value?.[SPEED_MODE_FIELD]),
@@ -6128,6 +6602,7 @@ window.__ModuleLoader__.load({
 				publish();
 			});
 			const acceptFallback = (value) => {
+				subagentBackendAvailable = value?.subagentBackendAvailable === true;
 				if (!modelRefreshStarted) {
 					contextModels = Array.isArray(value?.contextModels) ? value.contextModels : [];
 					verbosityModels = Array.isArray(value?.verbosityModels) ? value.verbosityModels : [];
@@ -6138,6 +6613,8 @@ window.__ModuleLoader__.load({
 				fallback = {
 					status: "ready",
 					value: {
+						connectionMode: value?.connectionMode === "websocket" ? "websocket" : "sse",
+						subagentBackend: value?.subagentBackend === "codex" ? "codex" : "dsh",
 						...readCapabilitySettings(value),
 						[QUICK_QUOTA_MODE_FIELD]: normalizeQuickQuotaMode(value?.[QUICK_QUOTA_MODE_FIELD], value?.[LEGACY_QUICK_QUOTA_FIELD]),
 						[SEARCH_PROVIDER_FIELD]: normalizeSearchProvider(value?.[SEARCH_PROVIDER_FIELD]),
@@ -6161,6 +6638,7 @@ window.__ModuleLoader__.load({
 				try {
 					const value = unwrap(await rpc.call(CHANNEL, "preferences/status", {}));
 					if (current !== generation || disposed) return;
+					subagentBackendAvailable = value?.subagentBackendAvailable === true;
 					if (nativeSnapshot().status === "ready") {
 						if (!modelRefreshStarted) {
 							contextModels = Array.isArray(value?.contextModels) ? value.contextModels : [];
@@ -6221,7 +6699,7 @@ window.__ModuleLoader__.load({
 				failedPatch = void 0;
 				publish();
 				try {
-					if (nativeSnapshot().status === "ready") {
+					if (nativeSnapshot().status === "ready" && !Object.hasOwn(patch, "subagentBackend")) {
 						for (const [field, value] of entries) {
 							if (current !== generation) return;
 							await scope.set(field, value);
@@ -6547,7 +7025,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/version.js
-		const PACKAGE_VERSION = "2.1.0-beta.5";
+		const PACKAGE_VERSION = "2.1.1-beta.1";
 		//#endregion
 		//#region src/client-recovery.js
 		async function recoveryCall(rpc, endpoint, payload = {}, timeoutMs = 1e4) {
@@ -7186,64 +7664,76 @@ window.__ModuleLoader__.load({
 			const snapshot = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
 			const disabled = snapshot.status !== "ready" || !snapshot.writable || snapshot.saving;
 			const active = snapshot.imageGeneration || snapshot.imageEditing;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 				className: "codexSubscriptionCard codexImageSettings",
 				"aria-label": t("imageSettings"),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("imageSettings") }),
-					Object.keys(IMAGE_SETTING_GROUPS).map((group) => {
-						const value = imageGroupValue(snapshot, group);
-						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
-							label: t(group),
-							hint: t(`${group}Hint`),
-							value,
-							text: t(value === "mixed" ? "imageGroupMixed" : `${group}_${value}`),
-							disabled,
-							items: ["on", "off"].map((id) => ({
-								id,
-								label: t(`${group}_${id}`)
-							})),
-							onSelect: (id) => {
-								preference.set(imageGroupPatch(group, id === "on"));
-							}
-						}, group);
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexImageDefaultsGroup",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
-							label: t("imageModel"),
-							value: snapshot.imageModel,
-							text: modelLabel(snapshot.imageModel),
-							disabled: disabled || !active,
-							items: Object.keys(IMAGE_MODELS).map((id) => ({
-								id,
-								label: `${modelLabel(id)}${id.includes("2.5") ? ` · ${t("imageExperimental")}` : ""}`
-							})),
-							onSelect: (imageModel) => {
-								preference.set({
-									imageModel,
-									imageQuality: "auto"
-								});
-							}
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
-							label: t("imageQuality"),
-							value: snapshot.imageQuality,
-							text: t(`imageQuality_${snapshot.imageQuality}`),
-							disabled: disabled || !active,
-							items: IMAGE_MODELS[snapshot.imageModel].map((id) => ({
-								id,
-								label: t(`imageQuality_${id}`)
-							})),
-							onSelect: (imageQuality) => {
-								preference.set({ imageQuality });
-							}
-						})]
-					}),
-					snapshot.imageModel.includes("2.5") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "codexSubscriptionPreferenceHint",
-						children: t("imageModelHint")
-					}) : null
-				]
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+					className: "codexSubscriptionSettingsDisclosure",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("summary", { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("imageSettings") }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "codexSubscriptionPreferenceHint",
+							children: active ? modelLabel(snapshot.imageModel) : t("imageCapability_off")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, {})
+					] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionSettingsDisclosureBody",
+						children: [
+							Object.keys(IMAGE_SETTING_GROUPS).map((group) => {
+								const value = imageGroupValue(snapshot, group);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
+									label: t(group),
+									hint: t(`${group}Hint`),
+									value,
+									text: t(value === "mixed" ? "imageGroupMixed" : `${group}_${value}`),
+									disabled,
+									items: ["on", "off"].map((id) => ({
+										id,
+										label: t(`${group}_${id}`)
+									})),
+									onSelect: (id) => {
+										preference.set(imageGroupPatch(group, id === "on"));
+									}
+								}, group);
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "codexImageDefaultsGroup",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
+									label: t("imageModel"),
+									value: snapshot.imageModel,
+									text: modelLabel(snapshot.imageModel),
+									disabled: disabled || !active,
+									items: Object.keys(IMAGE_MODELS).map((id) => ({
+										id,
+										label: `${modelLabel(id)}${id.includes("2.5") ? ` · ${t("imageExperimental")}` : ""}`
+									})),
+									onSelect: (imageModel) => {
+										preference.set({
+											imageModel,
+											imageQuality: "auto"
+										});
+									}
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageChoice, {
+									label: t("imageQuality"),
+									value: snapshot.imageQuality,
+									text: t(`imageQuality_${snapshot.imageQuality}`),
+									disabled: disabled || !active,
+									items: IMAGE_MODELS[snapshot.imageModel].map((id) => ({
+										id,
+										label: t(`imageQuality_${id}`)
+									})),
+									onSelect: (imageQuality) => {
+										preference.set({ imageQuality });
+									}
+								})]
+							}),
+							snapshot.imageModel.includes("2.5") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "codexSubscriptionPreferenceHint",
+								children: t("imageModelHint")
+							}) : null
+						]
+					})]
+				})
 			});
 		}
 		//#endregion
@@ -7458,10 +7948,9 @@ window.__ModuleLoader__.load({
 		function SearchProviderPreference({ preference, t }) {
 			const snapshot = usePreferenceSnapshot(preference);
 			const writable = snapshot.status === "ready" && snapshot.writable === true;
-			const choice = (value, label, hint) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: "codexSubscriptionSearchChoice",
+			const choice = (value, label) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "codexSubscriptionQuotaMode",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					className: "codexSubscriptionSearchInput",
 					type: "radio",
 					name: "codex-subscription-search-provider",
 					checked: snapshot.searchProvider === value,
@@ -7469,39 +7958,39 @@ window.__ModuleLoader__.load({
 					onChange: () => {
 						preference.set({ [SEARCH_PROVIDER_FIELD]: value });
 					}
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "codexSubscriptionSearchCopy",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hint })]
-				})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
 			});
+			const hint = snapshot.searchProvider === "dsh" ? "searchDshHint" : snapshot.searchProvider === "codex" ? "searchCodexHint" : "searchAutoHint";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "codexSubscriptionSearch",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexSubscriptionSearchHead",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("searchTitle") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "codexSubscriptionSearchScope",
-							children: t("searchScope")
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "codexSubscriptionPreference",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionPreferenceCopy",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "codexSubscriptionPreferenceLabel",
+							children: t("searchTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "codexSubscriptionPreferenceHint",
+							children: t(hint)
 						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "codexSubscriptionSearchChoices",
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "codexSubscriptionSearchChoices codexSubscriptionQuotaModes",
 						"data-saving": snapshot.saving || void 0,
 						"aria-busy": snapshot.saving || void 0,
 						role: "radiogroup",
 						"aria-label": t("searchTitle"),
 						children: [
-							choice(SEARCH_PROVIDER_AUTO, t("searchAuto"), t("searchAutoHint")),
-							choice("dsh", t("searchDsh"), t("searchDshHint")),
-							choice(SEARCH_PROVIDER_CODEX, t("searchCodex"), t("searchCodexHint"))
+							choice(SEARCH_PROVIDER_AUTO, t("searchAuto")),
+							choice("dsh", "DSH"),
+							choice(SEARCH_PROVIDER_CODEX, "Codex")
 						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilityPreferences, {
-						preference,
-						t,
-						section: "search"
-					})
-				]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CapabilityPreferences, {
+					preference,
+					t,
+					section: "search"
+				})]
 			});
 		}
 		function ContextWindowPreference({ preference, t }) {
@@ -7667,16 +8156,99 @@ window.__ModuleLoader__.load({
 		function PreferencesCard({ preference, t, section = "display" }) {
 			const snapshot = usePreferenceSnapshot(preference);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "codexSubscriptionCard codexSubscriptionPreferencesCard",
+				className: section === "advanced" ? "codexSubscriptionAdvancedPreferences" : "codexSubscriptionCard codexSubscriptionPreferencesCard",
 				children: [section === "advanced" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchProviderPreference, {
-						preference,
-						t
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "codexSubscriptionCard codexSubscriptionPreferencesCard",
+						"aria-label": t("advancedModelSearch"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: t("advancedModelSearch") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchProviderPreference, {
+								preference,
+								t
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "codexSubscriptionDivider" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextWindowPreference, {
+								preference,
+								t
+							})
+						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "codexSubscriptionDivider" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextWindowPreference, {
-						preference,
-						t
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+						className: "codexSubscriptionCard codexSubscriptionPreferencesCard",
+						"aria-label": t("connectionTitle"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "codexSubscriptionPreference",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "codexSubscriptionPreferenceCopy",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "codexSubscriptionPreferenceLabel",
+									children: [
+										t("connectionTitle"),
+										" ",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: "Beta" })
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "codexSubscriptionPreferenceHint",
+									children: t("connectionHint")
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSubscriptionQuotaModes",
+								role: "radiogroup",
+								"aria-label": t("connectionTitle"),
+								"aria-busy": snapshot.saving || void 0,
+								children: ["sse", "websocket"].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "codexSubscriptionQuotaMode",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "radio",
+										name: "codex-connection-mode",
+										checked: snapshot.connectionMode === value,
+										disabled: !snapshot.writable,
+										onChange: () => {
+											preference.set({ connectionMode: value });
+										}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: value === "sse" ? "SSE" : "WebSocket" })]
+								}, value))
+							})]
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+						className: "codexSubscriptionCard codexSubscriptionPreferencesCard",
+						"aria-label": t("subagentBackendTitle"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "codexSubscriptionPreference",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "codexSubscriptionPreferenceCopy",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "codexSubscriptionPreferenceLabel",
+									children: [
+										t("subagentBackendTitle"),
+										" ",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: "Beta" })
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "codexSubscriptionPreferenceHint",
+									children: t(snapshot.subagentBackendAvailable ? "subagentBackendHint" : "subagentBackendUnavailable")
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "codexSubscriptionQuotaModes",
+								role: "radiogroup",
+								"aria-label": t("subagentBackendTitle"),
+								"aria-busy": snapshot.saving || void 0,
+								children: ["dsh", "codex"].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "codexSubscriptionQuotaMode",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "radio",
+										name: "codex-subagent-backend",
+										checked: snapshot.subagentBackend === value,
+										disabled: !snapshot.writable || !snapshot.subagentBackendAvailable,
+										onChange: () => {
+											preference.set({ subagentBackend: value });
+										}
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(`subagentBackend_${value}`) })]
+								}, value))
+							})]
+						})
 					})
 				] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickQuotaPreference, {
 					preference,