minecodex 0.2.3 → 1.0.2

package/features/images/codex-feature.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "id": "images",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "label": {
     "en": "Images",
     "zh-CN": "图片"
@@ -16,7 +16,7 @@
   "pageScript": {
     "resource": "src/chatgpt-image-source-page.mjs"
   },
-  "hostActions": ["import-generated-image"],
+  "hostActions": ["import-generated-image", "create-image-edit-thread"],
   "placement": {
     "after": "sites",
     "order": 10

package/features/images/src/http-server.mjs

@@ -1,6 +1,7 @@
 import { createReadStream } from "node:fs";
-import { readFile, stat } from "node:fs/promises";
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
 import { createServer as createNodeServer } from "node:http";
+import { randomUUID } from "node:crypto";
 import path from "node:path";
 import { MAX_IMPORTED_IMAGE_BYTES } from "./image-library.mjs";
 import { saveImageAs } from "./save-as.mjs";
@@ -11,6 +12,7 @@ const DEFAULT_PAGE_LIMIT = 36;
 const MAX_PAGE_LIMIT = 72;
 const MAX_PAGE_OFFSET = Number.MAX_SAFE_INTEGER;
 const MAX_IMPORT_BODY_BYTES = Math.ceil(MAX_IMPORTED_IMAGE_BYTES * 4 / 3) + 64 * 1024;
+const MAX_EDIT_AUXILIARY_BYTES = 8 * 1024 * 1024;
 
 const STATIC_FILES = new Map([
   ["/", ["index.html", "text/html; charset=utf-8"]],
@@ -134,6 +136,34 @@ async function readImportPayload(request) {
   return { ...payload, bytes };
 }
 
+async function readEditDraftPayload(request) {
+  if (!String(request.headers["content-type"] ?? "").toLowerCase().startsWith("application/json")) {
+    throw Object.assign(new Error("Image edit draft requires application/json"), { status: 415, code: "UNSUPPORTED_CONTENT_TYPE" });
+  }
+  let payload;
+  try {
+    payload = JSON.parse((await readRequestBody(request, Math.ceil(MAX_EDIT_AUXILIARY_BYTES * 4 / 3) + 8 * 1024)).toString("utf8"));
+  } catch (error) {
+    if (error.code === "BODY_TOO_LARGE") throw error;
+    throw Object.assign(new Error("Image edit draft must be valid JSON"), { status: 400, code: "INVALID_JSON" });
+  }
+  if (!payload || typeof payload !== "object" || Array.isArray(payload)
+    || !/^[a-f0-9]{24}$/.test(payload.imageId ?? "")) {
+    throw Object.assign(new Error("Image edit draft requires an image id"), { status: 400, code: "INVALID_EDIT_DRAFT" });
+  }
+  if (payload.auxiliaryPngBase64 === undefined) return { imageId: payload.imageId, auxiliary: null };
+  if (typeof payload.auxiliaryPngBase64 !== "string") {
+    throw Object.assign(new Error("Image edit auxiliary image must be base64"), { status: 400, code: "INVALID_EDIT_AUXILIARY" });
+  }
+  const auxiliary = Buffer.from(payload.auxiliaryPngBase64, "base64");
+  if (!auxiliary.length || auxiliary.length > MAX_EDIT_AUXILIARY_BYTES
+    || auxiliary.toString("base64") !== payload.auxiliaryPngBase64.replace(/\s/g, "")
+    || auxiliary.readUInt32BE(0) !== 0x89504e47) {
+    throw Object.assign(new Error("Image edit auxiliary image must be a bounded PNG"), { status: 400, code: "INVALID_EDIT_AUXILIARY" });
+  }
+  return { imageId: payload.imageId, auxiliary };
+}
+
 function contentTypeForPath(sourcePath) {
   const extension = path.extname(sourcePath).toLowerCase();
   return extension === ".jpg" || extension === ".jpeg"
@@ -225,6 +255,7 @@ export async function createHttpServer({
 }) {
   if (!library) throw new Error("library is required");
   if (!LOOPBACK_HOSTS.has(host)) throw new Error("Images only supports loopback hosts");
+  const editDrafts = new Map();
   const server = createNodeServer(async (request, response) => {
     try {
       applyCodexEmbedCors(request, response);
@@ -324,6 +355,41 @@ export async function createHttpServer({
         return;
       }
 
+      if (request.method === "POST" && url.pathname === "/api/image-edit-draft") {
+        const payload = await readEditDraftPayload(request);
+        const image = library.get(payload.imageId);
+        if (!image) {
+          json(response, 404, { error: "Image not found" });
+          return;
+        }
+        let auxiliaryPath = null;
+        if (payload.auxiliary) {
+          const editDir = path.join(library.dataDir, "edit-drafts");
+          await mkdir(editDir, { recursive: true });
+          auxiliaryPath = path.join(editDir, `${randomUUID()}.png`);
+          await writeFile(auxiliaryPath, payload.auxiliary, { mode: 0o600 });
+        }
+        const draftId = randomUUID();
+        editDrafts.set(draftId, { sourcePath: image.sourcePath, auxiliaryPath });
+        json(response, 201, { draftId });
+        return;
+      }
+
+      const editDraftMatch = url.pathname.match(/^\/api\/image-edit-draft\/([a-f0-9-]{36})$/);
+      if (request.method === "GET" && editDraftMatch) {
+        if (request.headers.origin !== CODEX_EMBED_ORIGIN) {
+          throw mutationError("Image edit attachments are available only to RuntimeHost", "ORIGIN_NOT_ALLOWED");
+        }
+        const draft = editDrafts.get(editDraftMatch[1]);
+        if (!draft) {
+          json(response, 404, { error: "Image edit draft not found" });
+          return;
+        }
+        editDrafts.delete(editDraftMatch[1]);
+        json(response, 200, draft);
+        return;
+      }
+
       const saveAsMatch = url.pathname.match(/^\/api\/images\/([a-f0-9]{24})\/save-as$/);
       if (request.method === "POST" && saveAsMatch) {
         const image = library.get(saveAsMatch[1]);

package/features/images/src/prompt-index.mjs

@@ -22,26 +22,61 @@ async function findThreadLogs(directory, threadId, output = []) {
   return output;
 }
 
-function promptFromEventLine(line) {
-  if (!line.includes('"image_generation_end"')) return null;
+function legacyPromptFromPayload(payload) {
+  if (payload?.type !== "image_generation_end") return null;
+  if (typeof payload.call_id !== "string" || typeof payload.revised_prompt !== "string") return null;
+  return { imageGenerationItemId: payload.call_id, prompt: payload.revised_prompt };
+}
+
+function wrappedImagegenPrompt(payload) {
+  if (payload?.type !== "custom_tool_call" || payload.name !== "exec") return null;
+  if (typeof payload.call_id !== "string" || typeof payload.input !== "string") return null;
+  const marker = "tools.image_gen__imagegen";
+  const markerIndex = payload.input.indexOf(marker);
+  if (markerIndex < 0) return null;
+  const generatedImageIndex = payload.input.indexOf("generatedImage(", markerIndex + marker.length);
+  const callSource = payload.input.slice(markerIndex, generatedImageIndex < 0 ? undefined : generatedImageIndex);
+  const match = callSource.match(/\bprompt\s*:\s*("(?:\\.|[^"\\])*")/s);
+  if (!match) return null;
   try {
-    const event = JSON.parse(line);
-    const payload = event?.payload ?? event;
-    if (payload?.type !== "image_generation_end") return null;
-    if (typeof payload.call_id !== "string" || typeof payload.revised_prompt !== "string") return null;
-    return { imageGenerationItemId: payload.call_id, prompt: payload.revised_prompt };
+    const prompt = JSON.parse(match[1]);
+    return typeof prompt === "string" ? { callId: payload.call_id, prompt } : null;
   } catch {
     return null;
   }
 }
 
+function generatedItemIdsFromOutputLine(line) {
+  if (!line.includes('"type":"custom_tool_call_output"') || !line.includes("generated_images")) return null;
+  const callId = line.match(/"call_id":"([a-zA-Z0-9_-]+)"/)?.[1];
+  if (!callId) return null;
+  const itemIds = new Set();
+  const pattern = /generated_images[\\/][^\\/\s]+[\\/]([a-zA-Z0-9_-]+)\.png\b/g;
+  for (const match of line.matchAll(pattern)) itemIds.add(match[1]);
+  return { callId, itemIds };
+}
+
 async function readPrompts(logPath, prompts) {
   const input = createReadStream(logPath, { encoding: "utf8" });
   const lines = createInterface({ input, crlfDelay: Infinity });
+  const wrappedPrompts = new Map();
   for await (const line of lines) {
-    const entry = promptFromEventLine(line);
-    if (entry && !prompts.has(entry.imageGenerationItemId)) {
-      prompts.set(entry.imageGenerationItemId, entry.prompt);
+    if (line.includes('"image_generation_end"') || line.includes("image_gen__imagegen")) {
+      let event;
+      try { event = JSON.parse(line); } catch { continue; }
+      const payload = event?.payload ?? event;
+      const legacy = legacyPromptFromPayload(payload);
+      if (legacy && !prompts.has(legacy.imageGenerationItemId)) {
+        prompts.set(legacy.imageGenerationItemId, legacy.prompt);
+      }
+      const wrapped = wrappedImagegenPrompt(payload);
+      if (wrapped) wrappedPrompts.set(wrapped.callId, wrapped.prompt);
+    }
+    const generated = generatedItemIdsFromOutputLine(line);
+    const prompt = generated ? wrappedPrompts.get(generated.callId) : null;
+    if (!prompt) continue;
+    for (const itemId of generated.itemIds) {
+      if (!prompts.has(itemId)) prompts.set(itemId, prompt);
     }
   }
 }

package/features/images/web/app.js

@@ -33,6 +33,19 @@ const sourceButton = drawer.querySelector(".source-button");
 const saveButton = drawer.querySelector(".save-button");
 const statusAnnouncer = document.querySelector(".status-announcer");
 const root = document.documentElement;
+const editor = document.querySelector(".image-editor");
+const editorControls = editor.querySelector(".image-editor-controls");
+const editorStage = editor.querySelector(".image-editor-stage");
+const editActions = editor.querySelector("[data-edit-actions]");
+const editModeRoot = editor.querySelector("[data-edit-mode]");
+const resizeMenu = editor.querySelector("[data-resize-menu]");
+const zoomMenu = editor.querySelector("[data-zoom-menu]");
+const zoomTrigger = editor.querySelector("[data-zoom-trigger]");
+const zoomTriggerValue = zoomTrigger.querySelector("[data-zoom-value]");
+const editMask = editor.querySelector(".image-edit-mask");
+const commentLayer = editor.querySelector(".image-comment-layer");
+const commentPopover = editor.querySelector(".image-comment-popover");
+const brushSlider = editor.querySelector(".image-brush-slider input");
 
 const PAGE_SIZE = 36;
 const DENSITY_STORAGE_KEY = "codex-image-host:grid-density";
@@ -78,6 +91,13 @@ let drawerOriginThreadId = null;
 let groupOrigin = null;
 let groupOriginImageId = null;
 let groupOriginThreadId = null;
+let editMode = null;
+let editComments = [];
+let editStrokes = [];
+let editUndo = [];
+let editRedo = [];
+let editDrawing = false;
+let zoomScale = null;
 
 try {
   const storedDensity = Number.parseInt(localStorage.getItem(DENSITY_STORAGE_KEY) ?? "", 10);
@@ -100,6 +120,17 @@ function applyHostTheme(payload) {
     root.style.setProperty(name, value);
     appliedHostTokens.add(name);
   }
+  const editorTokens = [
+    "--color-surface-tertiary", "--color-surface-elevated-secondary",
+    "--color-border-subtle", "--color-background-primary-ghost-hover",
+    "--color-chart-blue", "--color-text-inverse",
+    "--color-token-main-surface-primary", "--color-token-input-foreground",
+    "--color-text-foreground", "--color-text-foreground-tertiary", "--color-text-on-accent",
+    "--color-border", "--color-border-focus", "--color-token-list-hover-background",
+    "--color-text-accent", "--font-sans-default", "--font-weight-normal", "--text-sm", "--text-sm--line-height",
+    "--radius-md", "--radius-xl", "--shadow-md", "--shadow-xl",
+  ];
+  editorControls.hidden = !editorTokens.every((name) => appliedHostTokens.has(name));
 }
 
 function announce(message) {
@@ -589,6 +620,9 @@ function scheduleUpdateCheck(delay = 3000) {
 function setHostSurfaceActive(active) {
   const changed = hostSurfaceActive !== Boolean(active);
   hostSurfaceActive = Boolean(active);
+  if (!hostSurfaceActive && editMode === "comment" && !commentPopover.hidden) {
+    cancelActiveCommentEditor();
+  }
   refreshUpdatePolling({ immediate: changed && hostSurfaceActive });
 }
 
@@ -738,6 +772,7 @@ function trapDetailContextFocus(event) {
 }
 
 function showImageDetails(image) {
+  if (activeImage?.id !== image.id) resetImageEditor();
   activeImage = image;
   const isProject = image.sourceKind === "project";
   const isWork = image.sourceKind === "work";
@@ -1029,6 +1064,16 @@ document.addEventListener("keydown", (event) => {
     trapDetailContextFocus(event);
   }
   if (event.key !== "Escape") return;
+  if (!resizeMenu.hidden || !zoomMenu.hidden) {
+    event.preventDefault();
+    closeEditorMenus();
+    return;
+  }
+  if (editMode === "comment" && !commentPopover.hidden) {
+    event.preventDefault();
+    cancelActiveCommentEditor();
+    return;
+  }
   if (!sourceMenu.hidden) {
     event.preventDefault();
     closeSourceMenu({ restoreFocus: true });
@@ -1038,6 +1083,520 @@ document.addEventListener("keydown", (event) => {
   }
 });
 
+const RESIZE_OPTIONS = [["Square", "1:1"], ["Portrait", "3:4"], ["Story", "9:16"], ["Landscape", "4:3"], ["Widescreen", "16:9"]];
+const ZOOM_OPTIONS = [25, 50, 100, 150, 200];
+const RATIO_ICON_PATHS = {
+  "1:1": "M16.0015 7.33334C16.0015 6.62231 16.0016 6.12897 15.9702 5.74545C15.9472 5.4635 15.9094 5.27399 15.8579 5.13022L15.8022 5.00034C15.6483 4.69823 15.4139 4.4452 15.1265 4.26889L14.9995 4.19858C14.8415 4.11812 14.63 4.0613 14.2544 4.03061C13.8709 3.99929 13.3774 3.99838 12.6665 3.99838H7.3335C6.62246 3.99838 6.12913 3.99928 5.74561 4.03061C5.3699 4.06131 5.1585 4.11807 5.00049 4.19858C4.65524 4.3745 4.37465 4.65509 4.19873 5.00034C4.11822 5.15834 4.06146 5.36975 4.03076 5.74545C3.99943 6.12897 3.99854 6.62231 3.99854 7.33334V12.6664C3.99854 13.3772 3.99945 13.8708 4.03076 14.2542C4.06145 14.6298 4.11827 14.8414 4.19873 14.9994L4.26904 15.1263C4.44535 15.4137 4.69838 15.6482 5.00049 15.8021L5.13037 15.8578C5.27414 15.9092 5.46365 15.947 5.74561 15.9701C6.12912 16.0014 6.62246 16.0013 7.3335 16.0013H12.6665C13.3774 16.0013 13.8709 16.0014 14.2544 15.9701C14.6298 15.9394 14.8415 15.8825 14.9995 15.8021C15.3448 15.6262 15.6263 15.3446 15.8022 14.9994L15.8579 14.8695C15.9093 14.7257 15.9472 14.536 15.9702 14.2542C16.0015 13.8708 16.0015 13.3772 16.0015 12.6664V7.33334ZM17.3315 12.6664C17.3315 13.3554 17.3322 13.9124 17.2954 14.3626C17.2627 14.7636 17.1977 15.1248 17.0532 15.4613L16.9868 15.6039C16.6834 16.1992 16.1993 16.6833 15.604 16.9867C15.2272 17.1786 14.8208 17.2578 14.3628 17.2953C13.9126 17.332 13.3555 17.3314 12.6665 17.3314H7.3335C6.64441 17.3314 6.08745 17.332 5.63721 17.2953C5.23652 17.2625 4.87587 17.1973 4.53955 17.0531L4.39697 16.9867C3.87586 16.7211 3.43936 16.3174 3.13525 15.8216L3.01318 15.6039C2.82122 15.2271 2.74201 14.8206 2.70459 14.3626C2.66782 13.9124 2.66846 13.3553 2.66846 12.6664V7.33334C2.66846 6.64425 2.6678 6.0873 2.70459 5.63706C2.742 5.17926 2.82138 4.77344 3.01318 4.39682C3.31662 3.80129 3.80144 3.31647 4.39697 3.01303C4.77359 2.82123 5.17942 2.74185 5.63721 2.70444C6.08745 2.66765 6.6444 2.66831 7.3335 2.66831H12.6665C13.3555 2.66831 13.9126 2.66767 14.3628 2.70444C14.8208 2.74186 15.2272 2.82106 15.604 3.01303L15.8218 3.1351C16.3176 3.4392 16.7213 3.8757 16.9868 4.39682L17.0532 4.5394C17.1975 4.87572 17.2627 5.23637 17.2954 5.63706C17.3322 6.0873 17.3315 6.64425 17.3315 7.33334V12.6664Z",
+  "3:4": "M15.1687 6.5C15.1687 5.78896 15.1678 5.29563 15.1365 4.91211C15.1134 4.6301 15.0756 4.44066 15.0242 4.29688L14.9685 4.16699C14.8145 3.8648 14.5803 3.61186 14.2927 3.43555L14.1667 3.36524C14.0088 3.28475 13.7971 3.22797 13.4216 3.19727C13.0382 3.16594 12.5446 3.16504 11.8337 3.16504H8.16675C7.45571 3.16504 6.96238 3.16593 6.57886 3.19727C6.20315 3.22797 5.99175 3.28473 5.83374 3.36524C5.4885 3.54116 5.2079 3.82175 5.03198 4.16699C4.95147 4.325 4.89472 4.5364 4.86401 4.91211C4.83268 5.29563 4.83179 5.78896 4.83179 6.5V13.5C4.83179 14.211 4.83268 14.7044 4.86401 15.0879C4.89472 15.4636 4.95147 15.675 5.03198 15.833L5.1023 15.959C5.27861 16.2466 5.53148 16.4807 5.83374 16.6348L5.96362 16.6914C6.10737 16.7428 6.297 16.7797 6.57886 16.8027C6.96238 16.8341 7.45571 16.835 8.16675 16.835H11.8337C12.5446 16.835 13.0382 16.8341 13.4216 16.8027C13.7971 16.772 14.0088 16.7153 14.1667 16.6348L14.2927 16.5645C14.5803 16.3881 14.8145 16.1352 14.9685 15.833L15.0242 15.7031C15.0756 15.5593 15.1134 15.3699 15.1365 15.0879C15.1678 14.7044 15.1687 14.211 15.1687 13.5V6.5ZM16.4988 13.5C16.4988 14.1891 16.4985 14.746 16.4617 15.1963C16.4289 15.5969 16.3647 15.9577 16.2205 16.2939L16.1531 16.4365C15.8875 16.9577 15.484 17.3941 14.988 17.6982L14.7703 17.8203C14.3937 18.0122 13.9878 18.0915 13.53 18.1289C13.0799 18.1657 12.5227 18.165 11.8337 18.165H8.16675C7.47766 18.165 6.9207 18.1657 6.47046 18.1289C6.06981 18.0962 5.70909 18.031 5.3728 17.8867L5.23023 17.8203C4.70919 17.5548 4.2726 17.151 3.96851 16.6553L3.84644 16.4365C3.65463 16.0599 3.57525 15.6541 3.53784 15.1963C3.50106 14.746 3.50171 14.1891 3.50171 13.5V6.5C3.50171 5.81091 3.50106 5.25395 3.53784 4.80371C3.57525 4.34592 3.65463 3.94009 3.84644 3.56348C4.14988 2.96794 4.63469 2.48313 5.23023 2.17969C5.60684 1.98788 6.01267 1.90851 6.47046 1.87109C6.9207 1.83431 7.47766 1.83496 8.16675 1.83496H11.8337C12.5227 1.83496 13.0799 1.83431 13.53 1.87109C13.9878 1.90853 14.3937 1.98783 14.7703 2.17969L14.988 2.30176C15.484 2.60587 15.8875 3.04228 16.1531 3.56348L16.2205 3.70606C16.3647 4.0423 16.4289 4.40313 16.4617 4.80371C16.4985 5.25395 16.4988 5.81091 16.4988 6.5V13.5Z",
+  "9:16": "M9.16504 2.33154C8.454 2.33154 7.96067 2.33243 7.57715 2.36377C7.29514 2.38681 7.1057 2.4246 6.96191 2.47607L6.83203 2.53174C6.52984 2.68571 6.2769 2.91997 6.10059 3.20752L6.03027 3.3335C5.94979 3.49146 5.89301 3.70311 5.86231 4.07861C5.83098 4.46207 5.83008 4.95564 5.83008 5.6665V14.3335C5.83008 15.0445 5.83097 15.5379 5.86231 15.9214C5.89301 16.2971 5.94977 16.5085 6.03027 16.6665C6.2062 17.0117 6.48679 17.2923 6.83203 17.4683C6.99004 17.5488 7.20144 17.6055 7.57715 17.6362C7.96067 17.6676 8.454 17.6685 9.16504 17.6685L10.835 17.7056C11.546 17.7056 12.0393 17.7047 12.4229 17.6733C12.7986 17.6426 13.01 17.5859 13.168 17.5054L13.2939 17.4351C13.5816 17.2587 13.8157 17.0059 13.9697 16.7036L14.0264 16.5737C14.0778 16.43 14.1147 16.2404 14.1377 15.9585C14.169 15.575 14.1699 15.0816 14.1699 14.3706V5.70361C14.1699 4.99275 14.169 4.49918 14.1377 4.11572C14.107 3.74022 14.0502 3.52857 13.9697 3.3706L13.8994 3.24463C13.7231 2.95708 13.4702 2.72282 13.168 2.56885L13.0381 2.51318C12.8943 2.46171 12.7049 2.42392 12.4229 2.40088C12.0393 2.36954 11.546 2.36865 10.835 2.36865L9.16504 2.33154ZM10.835 1.03857C11.5241 1.03857 12.081 1.0389 12.5312 1.07568C12.9318 1.10842 13.2927 1.1727 13.6289 1.31689L13.7715 1.38428C14.2927 1.64984 14.7291 2.05339 15.0332 2.54932L15.1553 2.76709C15.3471 3.14369 15.4264 3.54956 15.4639 4.00732C15.5006 4.45749 15.5 5.01467 15.5 5.70361V14.3706C15.5 15.0597 15.5007 15.6167 15.4639 16.0669C15.4311 16.4675 15.3659 16.8283 15.2217 17.1646L15.1553 17.3071C14.8898 17.8282 14.4859 18.2648 13.9902 18.5688L13.7715 18.6909C13.3949 18.8827 12.989 18.9621 12.5312 18.9995C12.081 19.0363 11.5241 19.0356 10.835 19.0356L9.16504 18.9985C8.47595 18.9985 7.91899 18.9992 7.46875 18.9624C7.01096 18.925 6.60513 18.8456 6.22852 18.6538C5.63298 18.3504 5.14817 17.8656 4.84473 17.27C4.65292 16.8934 4.57355 16.4876 4.53613 16.0298C4.49935 15.5795 4.5 15.0226 4.5 14.3335V5.6665C4.5 4.97756 4.49935 4.42038 4.53613 3.97021C4.57356 3.51245 4.65287 3.10658 4.84473 2.72998L4.9668 2.51221C5.2709 2.01628 5.70732 1.61273 6.22852 1.34717L6.37109 1.27979C6.70734 1.13559 7.06817 1.07131 7.46875 1.03857C7.91899 1.00179 8.47595 1.00146 9.16504 1.00146L10.835 1.03857Z",
+  "4:3": "M16.835 8.16666C16.835 7.45562 16.8341 6.96229 16.8027 6.57877C16.7797 6.29691 16.7428 6.10728 16.6914 5.96353L16.6348 5.83365C16.4807 5.53139 16.2466 5.27852 15.959 5.1022L15.833 5.03189C15.675 4.95138 15.4636 4.89462 15.0879 4.86392C14.7044 4.83259 14.211 4.8317 13.5 4.8317H6.5C5.78896 4.8317 5.29563 4.83259 4.91211 4.86392C4.5364 4.89462 4.325 4.95138 4.16699 5.03189C3.82175 5.20781 3.54116 5.48841 3.36524 5.83365C3.28473 5.99166 3.22797 6.20306 3.19727 6.57877C3.16593 6.96229 3.16504 7.45562 3.16504 8.16666V11.8336C3.16504 12.5445 3.16594 13.0381 3.19727 13.4215C3.22797 13.797 3.28475 14.0087 3.36524 14.1667L3.43555 14.2926C3.61186 14.5802 3.8648 14.8144 4.16699 14.9684L4.29688 15.0241C4.44066 15.0756 4.6301 15.1133 4.91211 15.1364C5.29563 15.1677 5.78896 15.1686 6.5 15.1686H13.5C14.211 15.1686 14.7044 15.1677 15.0879 15.1364C15.4635 15.1057 15.675 15.0489 15.833 14.9684L15.959 14.8971C16.2464 14.7209 16.4808 14.4687 16.6348 14.1667L16.6914 14.0358C16.7427 13.8922 16.7797 13.7028 16.8027 13.4215C16.8341 13.0381 16.835 12.5445 16.835 11.8336V8.16666ZM18.165 11.8336C18.165 12.5226 18.1657 13.0798 18.1289 13.5299C18.0961 13.9306 18.031 14.2913 17.8867 14.6276L17.8203 14.7702C17.5549 15.2911 17.1509 15.7268 16.6553 16.0309L16.4365 16.153C16.0598 16.3449 15.6542 16.4242 15.1963 16.4616C14.746 16.4984 14.1891 16.4987 13.5 16.4987H6.5C5.81091 16.4987 5.25395 16.4984 4.80371 16.4616C4.40313 16.4288 4.0423 16.3646 3.70606 16.2204L3.56348 16.153C3.04228 15.8874 2.60587 15.4839 2.30176 14.9879L2.17969 14.7702C1.98783 14.3936 1.90853 13.9877 1.87109 13.5299C1.83431 13.0798 1.83496 12.5226 1.83496 11.8336V8.16666C1.83496 7.47757 1.83431 6.92061 1.87109 6.47037C1.90851 6.01258 1.98788 5.60675 2.17969 5.23013C2.48313 4.6346 2.96794 4.14978 3.56348 3.84634C3.94009 3.65454 4.34592 3.57516 4.80371 3.53775C5.25395 3.50096 5.81091 3.50162 6.5 3.50162H13.5C14.1891 3.50162 14.746 3.50096 15.1963 3.53775C15.6541 3.57516 16.0599 3.65454 16.4365 3.84634L16.6553 3.96842C17.151 4.27251 17.5548 4.7091 17.8203 5.23013L17.8867 5.37271C18.031 5.709 18.0962 6.06972 18.1289 6.47037C18.1657 6.92061 18.165 7.47756 18.165 8.16666V11.8336Z",
+  "16:9": "M17.6685 9C17.6685 8.28896 17.6676 7.79563 17.6362 7.41211C17.6132 7.1301 17.5754 6.94066 17.5239 6.79688L17.4683 6.66699C17.3143 6.3648 17.08 6.11186 16.7925 5.93555L16.6665 5.86524C16.5085 5.78475 16.2969 5.72797 15.9214 5.69727C15.5379 5.66594 15.0444 5.66504 14.3335 5.66504H5.6665C4.95547 5.66504 4.46213 5.66593 4.07861 5.69727C3.70291 5.72797 3.4915 5.78473 3.3335 5.86524C2.98825 6.04116 2.70766 6.32175 2.53174 6.66699C2.45123 6.825 2.39447 7.0364 2.36377 7.41211C2.33244 7.79563 2.33154 8.28896 2.33154 9V11C2.33154 11.711 2.33244 12.2044 2.36377 12.5879C2.39447 12.9636 2.45123 13.175 2.53174 13.333L2.60205 13.459C2.77837 13.7466 3.03124 13.9807 3.3335 14.1348L3.46338 14.1914C3.60713 14.2428 3.79676 14.2797 4.07861 14.3027C4.46213 14.3341 4.95547 14.335 5.6665 14.335H14.3335C15.0444 14.335 15.5379 14.3341 15.9214 14.3027C16.2969 14.272 16.5085 14.2153 16.6665 14.1348L16.7925 14.0645C17.08 13.8881 17.3143 13.6352 17.4683 13.333L17.5239 13.2031C17.5754 13.0593 17.6132 12.8699 17.6362 12.5879C17.6676 12.2044 17.6685 11.711 17.6685 11V9ZM18.9985 11C18.9985 11.6891 18.9982 12.246 18.9614 12.6963C18.9287 13.0969 18.8644 13.4577 18.7202 13.7939L18.6528 13.9365C18.3873 14.4577 17.9837 14.8941 17.4878 15.1982L17.27 15.3203C16.8934 15.5122 16.4876 15.5915 16.0298 15.6289C15.5796 15.6657 15.0224 15.665 14.3335 15.665H5.6665C4.97741 15.665 4.42046 15.6657 3.97022 15.6289C3.56957 15.5962 3.20885 15.531 2.87256 15.3867L2.72998 15.3203C2.20895 15.0548 1.77236 14.651 1.46826 14.1553L1.34619 13.9365C1.15439 13.5599 1.07501 13.1541 1.0376 12.6963C1.00081 12.246 1.00147 11.6891 1.00147 11V9C1.00147 8.31091 1.00081 7.75395 1.0376 7.30371C1.07501 6.84592 1.15439 6.44009 1.34619 6.06348C1.64963 5.46794 2.13445 4.98313 2.72998 4.67969C3.1066 4.48788 3.51242 4.40851 3.97022 4.37109C4.42046 4.33431 4.97741 4.33496 5.6665 4.33496H14.3335C15.0224 4.33496 15.5796 4.33431 16.0298 4.37109C16.4876 4.40853 16.8934 4.48783 17.27 4.67969L17.4878 4.80176C17.9837 5.10587 18.3873 5.54228 18.6528 6.06348L18.7202 6.20606C18.8644 6.5423 18.9287 6.90313 18.9614 7.30371C18.9982 7.75395 18.9985 8.31091 18.9985 9V11Z",
+};
+
+function ratioIcon(ratio) {
+  return `<svg class="image-ratio-icon" viewBox="0 0 20 20" aria-hidden="true"><path d="${RATIO_ICON_PATHS[ratio]}" /></svg>`;
+}
+
+function menuCheck(selected) {
+  return `<svg class="image-menu-check${selected ? "" : " is-hidden"}" viewBox="0 0 17 17" aria-hidden="true"><path d="M12.8961 3.64101C13.1297 3.41418 13.4984 3.37523 13.7779 3.56581C14.0571 3.75635 14.1554 4.11331 14.0299 4.41347L13.9615 4.53847L7.71151 13.7045C7.59411 13.8767 7.4063 13.9877 7.19881 14.0072C6.99136 14.0267 6.78564 13.9533 6.63826 13.806L2.88826 10.056C2.6192 9.67407 2.64927 9.30496 2.88826 9.06581C3.12738 8.82669 3.49647 8.79676 3.76815 8.97597L7.03084 12.2182L12.8053 3.74941Z" /></svg>`;
+}
+
+function fitZoomScale() {
+  if (!drawerImage.naturalWidth || !drawerImage.naturalHeight) return 1;
+  const widthScale = drawerImage.clientWidth / drawerImage.naturalWidth;
+  const heightScale = drawerImage.clientHeight / drawerImage.naturalHeight;
+  return Math.min(widthScale, heightScale);
+}
+
+function fitZoomPercent() {
+  return Math.max(1, Math.round(fitZoomScale() * 100));
+}
+
+function updateZoomLabel() {
+  zoomTriggerValue.textContent = `${zoomScale == null ? fitZoomPercent() : Math.round(zoomScale * 100)}%`;
+}
+
+function resetImageEditor() {
+  editMode = null;
+  editComments = [];
+  editStrokes = [];
+  editUndo = [];
+  editRedo = [];
+  resetZoom();
+  closeEditorMenus();
+  editActions.hidden = false;
+  editModeRoot.hidden = true;
+  editMask.hidden = true;
+  commentLayer.hidden = true;
+  commentPopover.hidden = true;
+  brushSlider.closest(".image-brush-slider").hidden = true;
+  renderComments();
+}
+
+function resetZoom() {
+  zoomScale = null;
+  drawerImage.style.transform = "";
+  zoomTriggerValue.textContent = `${fitZoomPercent()}%`;
+}
+
+function requestHostAction(action, payload) {
+  if (window.parent === window) return Promise.reject(new Error("Image editing is available inside Codex only."));
+  const requestId = crypto.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      window.removeEventListener("message", onResult);
+      reject(new Error("Codex did not respond to the image edit request."));
+    }, 30_000);
+    function onResult(event) {
+      if (event.source !== window.parent || event.data?.type !== "codex-personal:host-result" || event.data?.requestId !== requestId) return;
+      clearTimeout(timeout);
+      window.removeEventListener("message", onResult);
+      if (event.data.ok) resolve(event.data.result);
+      else reject(new Error(event.data.error?.message || "Codex could not start the image edit."));
+    }
+    window.addEventListener("message", onResult);
+    window.parent.postMessage({ type: "codex-personal:host-action", requestId, action, payload }, "*");
+  });
+}
+
+function canvasBase64(canvas) {
+  return canvas.toDataURL("image/png").replace(/^data:image\/png;base64,/, "");
+}
+
+function annotationPng(comments) {
+  const canvas = document.createElement("canvas");
+  canvas.width = drawerImage.naturalWidth;
+  canvas.height = drawerImage.naturalHeight;
+  const context = canvas.getContext("2d");
+  const radius = Math.max(14, Math.round(Math.min(canvas.width, canvas.height) / 28));
+  context.font = `700 ${Math.round(radius * 1.05)}px ui-sans-serif, system-ui`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  for (const [index, comment] of comments.entries()) {
+    context.fillStyle = "#111";
+    context.beginPath();
+    context.arc(comment.x * canvas.width, comment.y * canvas.height, radius, 0, Math.PI * 2);
+    context.fill();
+    context.fillStyle = "#fff";
+    context.fillText(String(index + 1), comment.x * canvas.width, comment.y * canvas.height + 1);
+  }
+  return canvasBase64(canvas);
+}
+
+function committedCommentText(comment) {
+  return comment.editingExisting ? comment.originalText : comment.text;
+}
+
+function removeMaskPng() {
+  const canvas = document.createElement("canvas");
+  canvas.width = drawerImage.naturalWidth;
+  canvas.height = drawerImage.naturalHeight;
+  const context = canvas.getContext("2d");
+  context.fillStyle = "#000";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  context.strokeStyle = "#fff";
+  context.lineCap = context.lineJoin = "round";
+  for (const stroke of editStrokes) {
+    context.lineWidth = Math.min(canvas.width, canvas.height) * stroke.size / 250;
+    context.beginPath();
+    context.moveTo(stroke.points[0].x * canvas.width, stroke.points[0].y * canvas.height);
+    for (const point of stroke.points.slice(1)) context.lineTo(point.x * canvas.width, point.y * canvas.height);
+    context.stroke();
+  }
+  return canvasBase64(canvas);
+}
+
+async function sendImageEdit(kind, detail) {
+  if (!activeImage || !drawerImage.naturalWidth) throw new Error("The original image is not ready.");
+  let auxiliaryPngBase64 = null;
+  let prompt;
+  if (kind === "comment") {
+    const comments = editComments
+      .map((comment) => ({ ...comment, text: committedCommentText(comment) }))
+      .filter((comment) => comment.text?.trim());
+    if (!comments.length) throw new Error("Add at least one comment before sending.");
+    auxiliaryPngBase64 = annotationPng(comments);
+    prompt = `Edit the first attached image according to the numbered comments. The second attachment is a transparent position overlay aligned exactly to the first image.\n${comments.map((comment, index) => `${index + 1}. ${comment.text} (at ${Math.round(comment.x * 100)}% from left, ${Math.round(comment.y * 100)}% from top)`).join("\n")}`;
+  } else if (kind === "remove") {
+    auxiliaryPngBase64 = removeMaskPng();
+    prompt = "Remove the areas marked white in the attached black-and-white mask. Preserve everything outside the mask and fill the removed areas naturally.";
+  } else {
+    prompt = `Resize and recompose the attached image to the ${detail} aspect ratio. Preserve the subject and visual intent.`;
+  }
+  const draft = await fetch("/api/image-edit-draft", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ imageId: activeImage.id, auxiliaryPngBase64 }),
+  });
+  if (!draft.ok) throw new Error((await draft.json().catch(() => null))?.error || "Could not prepare the image edit.");
+  const { draftId } = await draft.json();
+  await requestHostAction("create-image-edit-thread", {
+    draftId,
+    prompt,
+  });
+}
+
+function closeEditorMenus() {
+  resizeMenu.hidden = true;
+  zoomMenu.hidden = true;
+  editActions.querySelector('[data-edit-action="resize"]').setAttribute("aria-expanded", "false");
+  zoomTrigger.setAttribute("aria-expanded", "false");
+}
+
+function setEditMode(next) {
+  editMode = next;
+  closeEditorMenus();
+  editActions.hidden = Boolean(next);
+  editModeRoot.hidden = !next;
+  editMask.hidden = next !== "remove";
+  commentLayer.hidden = next !== "comment";
+  brushSlider.closest(".image-brush-slider").hidden = true;
+  commentPopover.hidden = true;
+  if (next) {
+    resetZoom();
+  }
+  if (!next) {
+    editComments = [];
+    editStrokes = [];
+    editUndo = [];
+    editRedo = [];
+    repaintMask();
+    renderComments();
+  }
+  renderEditMode();
+}
+
+function renderEditMode() {
+  editModeRoot.replaceChildren();
+  if (!editMode) return;
+  const committedComments = editComments.filter((comment) => committedCommentText(comment)?.trim());
+  const helper = document.createElement("span");
+  helper.textContent = editMode === "comment"
+    ? (committedComments.length ? `${committedComments.length} comment${committedComments.length === 1 ? "" : "s"}` : "Click on the image to add comments")
+    : "Brush over what you want to remove";
+  const send = document.createElement("button");
+  send.dataset.editSend = "";
+  send.textContent = "Send";
+  send.disabled = editMode === "comment" ? committedComments.length === 0 : editStrokes.length === 0;
+  send.addEventListener("click", async () => {
+    send.disabled = true;
+    try {
+      await sendImageEdit(editMode);
+    } catch (error) {
+      announce(error.message);
+      send.disabled = editMode === "comment" ? committedComments.length === 0 : editStrokes.length === 0;
+    }
+  });
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.dataset.editCancel = "";
+  cancel.setAttribute("aria-label", "Cancel");
+  cancel.innerHTML = '<svg viewBox="0 0 21 21" aria-hidden="true"><path d="M14.6549 5.57307C14.9283 5.2997 15.3718 5.2997 15.6451 5.57307C15.9185 5.84643 15.9185 6.28993 15.6451 6.5633L11.3903 10.8182L15.6451 15.0731L15.735 15.1834C15.9141 15.4551 15.8842 15.8242 15.6451 16.0633C15.4061 16.3024 15.0369 16.3322 14.7653 16.1531L14.6549 16.0633L10.4 11.8084L6.14515 16.0633C5.87178 16.3367 5.42828 16.3367 5.15492 16.0633C4.88155 15.7899 4.88155 15.3464 5.15492 15.0731L9.4098 10.8182L5.15492 6.5633L5.06507 6.45295C4.88597 6.18128 4.91584 5.81214 5.15492 5.57307C5.39399 5.33399 5.76313 5.30413 6.0348 5.48322L6.14515 5.57307L10.4 9.82795L14.6549 5.57307Z" /></svg>';
+  cancel.addEventListener("click", () => setEditMode(null));
+  editModeRoot.append(helper);
+  if (editMode === "remove") {
+    const historyVisible = editUndo.length > 0 || editRedo.length > 0;
+    const historyIcon = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M15.998 10.833C15.9978 8.439 14.0571 6.49805 11.663 6.49805H4.9355L7.13374 8.69629L7.2187 8.80078C7.38911 9.05884 7.36084 9.40947 7.13374 9.63672C6.90652 9.86394 6.55592 9.89207 6.2978 9.72168L6.19331 9.63672L2.85932 6.30371C2.5999 6.04411 2.60001 5.62295 2.85932 5.36328L6.19331 2.0293C6.45298 1.76998 6.87414 1.76987 7.13374 2.0293C7.39344 2.289 7.39344 2.711 7.13374 2.9707L4.93647 5.16797H11.663C14.7916 5.16797 17.3279 7.70446 17.3281 10.833C17.3281 13.9617 14.7917 16.498 11.663 16.498H8.33003C7.96276 16.498 7.66499 16.2003 7.66499 15.833C7.66516 15.4659 7.96287 15.168 8.33003 15.168H11.663C14.0572 15.168 15.998 13.2272 15.998 10.833Z" /></svg>';
+    const undo = document.createElement("button"); undo.type = "button"; undo.setAttribute("aria-label", "Undo"); undo.innerHTML = historyIcon;
+    undo.disabled = editUndo.length === 0;
+    undo.hidden = !historyVisible;
+    undo.addEventListener("click", () => { const previous = editUndo.pop(); if (!previous) return; editRedo.push(editStrokes); editStrokes = previous; repaintMask(); renderEditMode(); });
+    const redo = document.createElement("button"); redo.type = "button"; redo.setAttribute("aria-label", "Redo"); redo.innerHTML = historyIcon;
+    redo.disabled = editRedo.length === 0;
+    redo.hidden = !historyVisible;
+    redo.addEventListener("click", () => { const next = editRedo.pop(); if (!next) return; editUndo.push(editStrokes); editStrokes = next; repaintMask(); renderEditMode(); });
+    editModeRoot.append(undo, redo);
+  }
+  editModeRoot.append(send, cancel);
+}
+
+function imagePoint(event) {
+  const rect = drawerImage.getBoundingClientRect();
+  if (!rect.width || !rect.height) return null;
+  return { x: (event.clientX - rect.left) / rect.width, y: (event.clientY - rect.top) / rect.height };
+}
+
+function commentEditorPosition({ markerX, markerY, stageWidth, stageHeight, popoverHeight }) {
+  const inset = 8;
+  const markerGap = 26;
+  const popoverWidth = Math.min(294, stageWidth - inset * 2);
+  const right = markerX + markerGap;
+  const left = right + popoverWidth <= stageWidth - inset
+    ? right
+    : Math.max(inset, markerX - markerGap - popoverWidth);
+
+  return {
+    left,
+    top: Math.max(inset, Math.min(stageHeight - popoverHeight - inset, markerY - 22)),
+  };
+}
+
+function syncEditorOverlay() {
+  const stageRect = editorStage.getBoundingClientRect();
+  const imageRect = drawerImage.getBoundingClientRect();
+  if (!stageRect.width || !imageRect.width) return;
+  const bounds = {
+    left: `${imageRect.left - stageRect.left}px`,
+    top: `${imageRect.top - stageRect.top}px`,
+    width: `${imageRect.width}px`,
+    height: `${imageRect.height}px`,
+  };
+  for (const overlay of [editMask, commentLayer]) Object.assign(overlay.style, bounds);
+  brushSlider.closest(".image-brush-slider").style.left = `${imageRect.left - stageRect.left + 16}px`;
+}
+
+function renderComments() {
+  syncEditorOverlay();
+  commentLayer.replaceChildren();
+  for (const [index, comment] of editComments.entries()) {
+    if (comment.editingExisting) continue;
+    const marker = document.createElement(comment.draft ? "div" : "button");
+    marker.className = "image-comment-marker";
+    if (!comment.draft) {
+      marker.type = "button";
+      marker.setAttribute("aria-label", `Edit comment ${index + 1}`);
+      marker.addEventListener("click", () => openCommentEditor(comment));
+    }
+    marker.style.left = `${comment.x * 100}%`; marker.style.top = `${comment.y * 100}%`;
+    marker.innerHTML = `<svg viewBox="0 0 26 25" aria-hidden="true"><path d="M12.6504 0.824799C6.21496 0.824799 0.825466 5.77554 0.825195 12.0885C0.825245 14.2375 1.46183 16.2421 2.55176 17.943L2.02148 20.235L1.99316 20.3756C1.77603 21.655 2.78945 22.7791 4.02832 22.7691L4.0791 22.8209L4.53418 22.7047L7.12305 22.0426C8.77593 22.8778 10.6577 23.3531 12.6504 23.3531C19.086 23.3531 24.4754 18.4014 24.4756 12.0885C24.4753 5.77554 19.0858 0.824799 12.6504 0.824799Z" /></svg><span>${index + 1}</span>`;
+    commentLayer.append(marker);
+  }
+}
+
+function cancelActiveCommentEditor() {
+  for (const comment of editComments.filter((entry) => entry.editingExisting)) {
+    comment.text = comment.originalText;
+    comment.draft = false;
+    comment.editingExisting = false;
+    delete comment.originalText;
+  }
+  editComments = editComments.filter((entry) => !entry.draft);
+  commentPopover.hidden = true;
+  commentPopover.classList.remove("is-existing-comment");
+  renderComments();
+  renderEditMode();
+}
+
+function repaintMask() {
+  const context = editMask.getContext("2d");
+  if (!context || !drawerImage.naturalWidth) return;
+  editMask.width = drawerImage.naturalWidth; editMask.height = drawerImage.naturalHeight;
+  context.clearRect(0, 0, editMask.width, editMask.height);
+  context.strokeStyle = context.fillStyle = getComputedStyle(root).getPropertyValue("--color-text-accent");
+  context.lineCap = context.lineJoin = "round";
+  for (const stroke of editStrokes) {
+    context.lineWidth = Math.min(editMask.width, editMask.height) * stroke.size / 250;
+    context.beginPath(); context.moveTo(stroke.points[0].x * editMask.width, stroke.points[0].y * editMask.height);
+    for (const point of stroke.points.slice(1)) context.lineTo(point.x * editMask.width, point.y * editMask.height);
+    context.stroke();
+  }
+}
+
+for (const button of editActions.querySelectorAll("[data-edit-action]")) {
+  button.addEventListener("click", () => {
+    const action = button.dataset.editAction;
+    if (action === "resize") {
+      resetZoom();
+      closeEditorMenus();
+      resizeMenu.hidden = false;
+      button.setAttribute("aria-expanded", "true");
+      return;
+    }
+    setEditMode(action);
+  });
+}
+
+for (const [label, ratio] of RESIZE_OPTIONS) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.innerHTML = `${ratioIcon(ratio)}<span class="image-ratio-label"><span>${label}</span><small>${ratio}</small></span>`;
+  button.setAttribute("role", "menuitem");
+  button.addEventListener("click", async () => {
+    closeEditorMenus();
+    try { await sendImageEdit("resize", ratio); } catch (error) { announce(error.message); }
+  });
+  resizeMenu.append(button);
+}
+
+function renderZoomMenu() {
+  zoomMenu.replaceChildren();
+  for (const value of ZOOM_OPTIONS) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.setAttribute("role", "menuitem");
+    button.innerHTML = `<span class="image-ratio-label"><span>${value}%</span>${menuCheck(zoomScale === value / 100)}</span>`;
+    button.addEventListener("click", () => {
+      zoomScale = value / 100;
+      drawerImage.style.transform = `scale(${zoomScale / fitZoomScale()})`;
+      updateZoomLabel();
+      closeEditorMenus();
+    });
+    zoomMenu.append(button);
+  }
+  const separator = document.createElement("div");
+  separator.className = "image-menu-separator";
+  separator.setAttribute("role", "separator");
+  const fit = document.createElement("button");
+  fit.type = "button";
+  fit.setAttribute("role", "menuitem");
+  fit.innerHTML = `<span class="image-ratio-label"><span>Zoom to fit</span>${menuCheck(zoomScale == null)}</span>`;
+  fit.addEventListener("click", () => {
+    resetZoom();
+    closeEditorMenus();
+  });
+  zoomMenu.append(separator, fit);
+}
+
+zoomTrigger.addEventListener("click", () => {
+  const open = zoomMenu.hidden;
+  closeEditorMenus();
+  if (open) renderZoomMenu();
+  zoomMenu.hidden = !open;
+  zoomTrigger.setAttribute("aria-expanded", String(open));
+});
+
+function openCommentEditor(comment) {
+  const isNew = comment.draft && !comment.text;
+  if (!isNew) {
+    editComments = editComments.filter((entry) => entry === comment || !entry.draft);
+  }
+  comment.originalText = comment.text;
+  comment.draft = true;
+  comment.editingExisting = !isNew;
+  renderComments();
+  syncEditorOverlay();
+  const imageRect = drawerImage.getBoundingClientRect();
+  const stageRect = editorStage.getBoundingClientRect();
+  const markerX = imageRect.left - stageRect.left + comment.x * imageRect.width;
+  const markerY = imageRect.top - stageRect.top + comment.y * imageRect.height;
+  const popoverPosition = commentEditorPosition({
+    markerX,
+    markerY,
+    stageWidth: stageRect.width,
+    stageHeight: stageRect.height,
+    popoverHeight: isNew ? 44 : 120,
+  });
+  commentPopover.replaceChildren();
+  commentPopover.style.left = `${popoverPosition.left}px`;
+  commentPopover.style.top = `${popoverPosition.top}px`;
+  commentPopover.classList.toggle("is-existing-comment", !isNew);
+  const finishExistingEdit = ({ restore = false, remove = false } = {}) => {
+    if (remove) editComments = editComments.filter((entry) => entry !== comment);
+    else {
+      if (restore) comment.text = comment.originalText;
+      else comment.text = comment.text.trim();
+      comment.draft = false;
+      comment.editingExisting = false;
+      delete comment.originalText;
+    }
+    commentPopover.hidden = true;
+    commentPopover.classList.remove("is-existing-comment");
+    renderComments();
+    renderEditMode();
+  };
+  if (!isNew) {
+    const textarea = document.createElement("textarea");
+    textarea.name = "image-comment-instruction";
+    textarea.setAttribute("aria-label", "Edit comment");
+    textarea.value = comment.text;
+    const footer = document.createElement("div");
+    footer.className = "image-comment-editor-footer";
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "image-comment-delete";
+    remove.setAttribute("aria-label", "Delete comment");
+    remove.innerHTML = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10.6299 1.33496C12.0335 1.33496 13.2695 2.25996 13.666 3.60645L13.8809 4.33496H17L17.1338 4.34863C17.4369 4.41057 17.665 4.67858 17.665 5C17.665 5.32142 17.4369 5.58943 17.1338 5.65137L17 5.66504H16.6543L15.8574 14.9912C15.7177 16.629 14.3478 17.8877 12.7041 17.8877H7.2959C5.75502 17.8877 4.45439 16.7815 4.18262 15.2939L4.14258 14.9912L3.34668 5.66504H3C2.63273 5.66504 2.33496 5.36727 2.33496 5C2.33496 4.63273 2.63273 4.33496 3 4.33496H6.11914L6.33398 3.60645L6.41797 3.3584C6.88565 2.14747 8.05427 1.33496 9.37012 1.33496H10.6299ZM5.46777 14.8779L5.49121 15.0537C5.64881 15.9161 6.40256 16.5576 7.2959 16.5576H12.7041C13.6571 16.5576 14.4512 15.8275 14.5322 14.8779L15.3193 5.66504H4.68164L5.46777 14.8779ZM7.66797 12.8271V8.66016C7.66797 8.29299 7.96588 7.99528 8.33301 7.99512C8.70028 7.99512 8.99805 8.29289 8.99805 8.66016V12.8271C8.99779 13.1942 8.70012 13.4912 8.33301 13.4912C7.96604 13.491 7.66823 13.1941 7.66797 12.8271ZM11.002 12.8271V8.66016C11.002 8.29289 11.2997 7.99512 11.667 7.99512C12.0341 7.9953 12.332 8.293 12.332 8.66016V12.8271C12.3318 13.1941 12.0339 13.491 11.667 13.4912C11.2999 13.4912 11.0022 13.1942 11.002 12.8271ZM9.37012 2.66504C8.60726 2.66504 7.92938 3.13589 7.6582 3.83789L7.60938 3.98145L7.50586 4.33496H12.4941L12.3906 3.98145C12.1607 3.20084 11.4437 2.66504 10.6299 2.66504H9.37012Z" /></svg>';
+    remove.addEventListener("click", () => finishExistingEdit({ remove: true }));
+    const actions = document.createElement("span");
+    actions.className = "image-comment-editor-actions";
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.textContent = "Cancel";
+    cancel.addEventListener("click", () => finishExistingEdit({ restore: true }));
+    const save = document.createElement("button");
+    save.type = "button";
+    save.className = "image-comment-save";
+    save.textContent = "Save";
+    save.disabled = !textarea.value.trim();
+    save.addEventListener("click", () => { if (!save.disabled) finishExistingEdit(); });
+    textarea.addEventListener("input", () => {
+      comment.text = textarea.value;
+      save.disabled = !textarea.value.trim();
+    });
+    textarea.addEventListener("keydown", (keyEvent) => {
+      if (keyEvent.key !== "Escape") return;
+      keyEvent.stopPropagation();
+      finishExistingEdit({ restore: true });
+    });
+    actions.append(cancel, save);
+    footer.append(remove, actions);
+    commentPopover.append(textarea, footer);
+    commentPopover.hidden = false;
+    textarea.focus();
+    return;
+  }
+  const input = document.createElement("input");
+  input.setAttribute("aria-label", "Add comment");
+  input.name = "image-comment-instruction";
+  input.placeholder = "Add a comment…";
+  input.value = comment.text;
+  input.addEventListener("input", () => { comment.text = input.value; });
+  input.addEventListener("keydown", (keyEvent) => {
+    if (keyEvent.key === "Enter") {
+      keyEvent.preventDefault();
+      const text = input.value.trim();
+      if (!text) {
+        input.focus();
+        return;
+      }
+      comment.text = text;
+      comment.draft = false;
+      comment.editingExisting = false;
+      delete comment.originalText;
+      commentPopover.hidden = true;
+      commentPopover.classList.remove("is-existing-comment");
+      renderComments();
+      renderEditMode();
+      return;
+    }
+    if (keyEvent.key === "Escape") {
+      keyEvent.stopPropagation();
+      cancelActiveCommentEditor();
+    }
+  });
+  commentPopover.append(input); commentPopover.hidden = false; input.focus();
+}
+
+editorStage.addEventListener("click", (event) => {
+  if (editMode !== "comment" || event.target !== drawerImage || editComments.some((comment) => comment.draft)) return;
+  const point = imagePoint(event); if (!point) return;
+  const comment = { ...point, text: "", draft: true };
+  editComments.push(comment);
+  openCommentEditor(comment);
+});
+editMask.addEventListener("pointerdown", (event) => {
+  if (editMode !== "remove") return;
+  const point = imagePoint(event); if (!point) return;
+  editMask.setPointerCapture(event.pointerId); editDrawing = true; editUndo.push(editStrokes.map((stroke) => ({ ...stroke, points: stroke.points.slice() }))); editRedo = [];
+  editStrokes.push({ size: Number(brushSlider.value), points: [point] }); repaintMask(); renderEditMode();
+});
+editMask.addEventListener("pointermove", (event) => { if (!editDrawing) return; const point = imagePoint(event); if (!point) return; editStrokes.at(-1)?.points.push(point); repaintMask(); });
+editMask.addEventListener("pointerup", () => { editDrawing = false; renderEditMode(); });
+document.addEventListener("pointerdown", (event) => {
+  if (event.target instanceof Element && event.target.closest('.image-edit-menu, [data-zoom-trigger], [data-edit-action="resize"]')) return;
+  closeEditorMenus();
+});
+drawerImage.addEventListener("load", () => {
+  syncEditorOverlay();
+  repaintMask();
+  renderComments();
+  if (zoomScale == null) updateZoomLabel();
+});
+new ResizeObserver(() => {
+  syncEditorOverlay();
+  if (zoomScale == null) updateZoomLabel();
+}).observe(editorStage);
+
 drawer.inert = true;
 applyDensity();
 await Promise.all([loadFacets(), loadPage({ reset: true })]);

package/features/images/web/index.html

@@ -114,7 +114,22 @@
           </header>
 
           <div class="drawer-scroll">
-            <figure class="drawer-figure"><img alt="" decoding="async" /></figure>
+            <section class="image-editor" aria-label="Image editor">
+              <div class="image-editor-controls" hidden>
+              <div class="image-editor-toolbar">
+                <div class="image-edit-actions" data-edit-actions>
+                  <button type="button" class="image-edit-action" data-edit-action="comment"><svg viewBox="0 0 20 20" data-native-image-icon="comment" aria-hidden="true"><path d="M10.02 6.70483C9.66589 6.70516 9.37778 6.9928 9.37778 7.34698V9.36292H7.36187C7.00755 9.36292 6.71983 9.65081 6.71973 10.005C6.71973 10.3595 7.00749 10.6473 7.36187 10.6473H9.37778V12.6644C9.37812 13.0184 9.666 13.3061 10.02 13.3065C10.3742 13.3065 10.6619 13.0186 10.6621 12.6644V10.6473H12.6792C13.0337 10.6473 13.3214 10.3595 13.3214 10.005C13.3213 9.65081 13.0336 9.36292 12.6792 9.36292H10.6621V7.34698C10.6621 6.9926 10.3743 6.70483 10.02 6.70483Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.9994 2.43188C5.62998 2.43188 2.02393 5.78683 2.02393 10.0003C2.02401 11.5112 2.49346 12.9166 3.29509 14.0943C3.29768 14.0982 3.29903 14.1028 3.29986 14.1051V14.1086L2.80334 16.0339C2.61585 16.7426 3.27268 17.3856 3.97781 17.1845L3.97901 17.1856L6.08567 16.5961L6.08806 16.5949H6.09164C7.24756 17.2136 8.58138 17.5676 9.9994 17.5676C14.3687 17.5676 17.9746 14.2136 17.9748 10.0003C17.9748 5.78683 14.3688 2.43188 9.9994 2.43188ZM9.9994 3.71617C13.7302 3.71617 16.6906 6.56372 16.6906 10.0003C16.6904 13.4369 13.7301 16.2845 9.9994 16.2845C8.79575 16.2845 7.66933 15.9853 6.69678 15.4645L6.6932 15.4622L6.58339 15.4109C6.3226 15.3028 6.02191 15.2753 5.72998 15.3619L4.19027 15.7928L4.54238 14.4285L4.54118 14.4273C4.64035 14.0542 4.55881 13.6756 4.36215 13.3818L4.35857 13.377L4.12224 13.0022C3.6023 12.1093 3.30829 11.087 3.30821 10.0003C3.30821 6.56372 6.26865 3.71617 9.9994 3.71617Z"></path></svg><span>Comment</span></button>
+                  <button type="button" class="image-edit-action" data-edit-action="remove"><svg viewBox="0 0 20 20" data-native-image-icon="remove" aria-hidden="true"><path d="M6.92077 0.123893C7.42924 -0.041319 7.97791 -0.0412761 8.48639 0.123893C8.80784 0.228404 9.08213 0.413537 9.36217 0.651236C9.63764 0.885089 9.95291 1.20057 10.3426 1.5903L11.1505 2.39811C11.5401 2.78778 11.8557 3.10237 12.0895 3.3778C12.3274 3.65799 12.5123 3.93273 12.6169 4.25436C12.7821 4.76279 12.782 5.31076 12.6169 5.81921C12.5123 6.14087 12.3274 6.41557 12.0895 6.69577C11.8557 6.97121 11.5402 7.28576 11.1505 7.67546L7.67546 11.1505C7.28576 11.5402 6.97122 11.8557 6.69577 12.0895C6.41557 12.3274 6.14087 12.5123 5.81921 12.6169C5.31076 12.782 4.76279 12.7821 4.25436 12.6169C3.93273 12.5123 3.65799 12.3274 3.3778 12.0895C3.10237 11.8557 2.78778 11.5401 2.39811 11.1505L1.5903 10.3426C1.20057 9.95291 0.885089 9.63764 0.651236 9.36217C0.413537 9.08213 0.228404 8.80784 0.123893 8.48639C-0.0412761 7.97791 -0.041319 7.42924 0.123893 6.92077C0.228432 6.59929 0.41349 6.32506 0.651236 6.04499C0.885121 5.76948 1.2005 5.45432 1.5903 5.06452L5.06452 1.5903C5.45432 1.2005 5.76949 0.885121 6.04499 0.651236C6.32506 0.41349 6.59929 0.228432 6.92077 0.123893ZM2.34264 5.81686C1.94043 6.21908 1.6614 6.49859 1.46217 6.73327C1.26715 6.963 1.17948 7.11482 1.13561 7.24967C1.03983 7.54445 1.03988 7.8627 1.13561 8.15749C1.17946 8.29233 1.26721 8.4442 1.46217 8.67389C1.66137 8.90854 1.94051 9.18816 2.34264 9.5903L3.15046 10.3981C3.55252 10.8002 3.83224 11.0794 4.06686 11.2786C4.29643 11.4734 4.44847 11.5605 4.58327 11.6044C4.87802 11.7001 5.19553 11.7001 5.4903 11.6044C5.62522 11.5605 5.77759 11.4737 6.00749 11.2786C6.24212 11.0794 6.52102 10.8002 6.92311 10.3981L6.95046 10.37L2.36999 5.78874L2.34264 5.81686ZM8.15749 1.13561C7.8627 1.03988 7.54445 1.03983 7.24967 1.13561C7.11482 1.17948 6.963 1.26715 6.73327 1.46217C6.49859 1.6614 6.21908 1.94043 5.81686 2.34264L3.12233 5.03639L7.70358 9.61686L10.3981 6.92311C10.8002 6.52102 11.0794 6.24212 11.2786 6.00749C11.4737 5.77759 11.5605 5.62522 11.6044 5.4903C11.7001 5.19553 11.7001 4.87802 11.6044 4.58327C11.5605 4.44847 11.4734 4.29643 11.2786 4.06686C11.0794 3.83224 10.8002 3.55252 10.3981 3.15046L9.5903 2.34264C9.18816 1.94051 8.90854 1.66137 8.67389 1.46217C8.4442 1.26721 8.29233 1.17946 8.15749 1.13561Z" transform="translate(2 2) scale(1.25)"></path></svg><span>Remove</span></button>
+                  <button type="button" class="image-edit-action" data-edit-action="resize" aria-haspopup="menu" aria-expanded="false"><svg viewBox="0 0 20 20" data-native-image-icon="resize" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.667 4.80762C15.6931 4.80779 16.5252 5.63994 16.5254 6.66602V13.333C16.5254 14.3592 15.6932 15.1912 14.667 15.1914H5.33301C4.30683 15.1912 3.47461 14.3592 3.47461 13.333V6.66602C3.47478 5.63994 4.30694 4.80779 5.33301 4.80762H14.667ZM5.33301 5.8584C4.88683 5.85857 4.52557 6.21984 4.52539 6.66602V8.99414C4.76984 8.87578 5.04327 8.80767 5.33301 8.80762H10.667C11.6931 8.80779 12.5252 9.63995 12.5254 10.666V13.333C12.5254 13.6232 12.4566 13.8969 12.3379 14.1416H14.667C15.1133 14.1414 15.4746 13.7793 15.4746 13.333V6.66602C15.4744 6.21984 15.1132 5.85857 14.667 5.8584H5.33301ZM5.33301 9.8584C4.88684 9.85857 4.52557 10.2198 4.52539 10.666V13.333C4.52539 13.7793 4.88673 14.1414 5.33301 14.1416H10.667C11.1133 14.1414 11.4746 13.7793 11.4746 13.333V10.666C11.4744 10.2198 11.1132 9.85857 10.667 9.8584H5.33301Z"></path></svg><span>Resize</span></button>
+                </div>
+                <div class="image-edit-mode" data-edit-mode hidden></div>
+                <button type="button" class="image-zoom-trigger" data-zoom-trigger aria-haspopup="menu" aria-expanded="false"><span data-zoom-value>100%</span><svg viewBox="0 0 20 20" data-zoom-chevron aria-hidden="true"><path d="m5.75 7.75 4.25 4.25 4.25-4.25"></path></svg></button>
+              </div>
+              <div class="image-edit-menu" data-resize-menu role="menu" hidden></div>
+              <div class="image-edit-menu image-zoom-menu" data-zoom-menu role="menu" hidden></div>
+              </div>
+              <figure class="drawer-figure image-editor-stage"><img alt="" decoding="async" /><canvas class="image-edit-mask" hidden></canvas><div class="image-comment-layer" hidden></div><div class="image-comment-popover" hidden></div><div class="image-brush-slider" hidden><input type="range" min="5" max="130" value="70" aria-label="Brush size" /></div></figure>
+            </section>
 
             <section class="detail-section prompt-section">
               <div class="detail-section-heading">

package/features/images/web/styles.css

@@ -4,6 +4,12 @@
   --color-token-main-surface-primary: #fff;
   --color-token-bg-primary: #f9f9f9;
   --color-token-bg-secondary: color-mix(in srgb, #f9f9f9 92%, transparent);
+  --color-surface-tertiary: #f0f0f0;
+  --color-surface-elevated-secondary: #fff;
+  --color-border-subtle: color-mix(in oklab, #1a1c1f 4%, transparent);
+  --color-background-primary-ghost-hover: color-mix(in oklab, #1a1c1f 5%, transparent);
+  --color-chart-blue: #339cff;
+  --color-text-inverse: #fff;
   --color-background-elevated-primary-opaque: #fff;
   --color-background-panel: #f5f5f5;
   --color-background-primary-solid: #1a1c1f;
@@ -48,6 +54,12 @@
   --color-token-main-surface-primary: #181818;
   --color-token-bg-primary: #141414;
   --color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
+  --color-surface-tertiary: rgb(40 40 40);
+  --color-surface-elevated-secondary: rgb(45 45 45);
+  --color-border-subtle: rgb(255 255 255 / 4.2%);
+  --color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
+  --color-chart-blue: #339cff;
+  --color-text-inverse: rgb(13 13 13);
   --color-background-elevated-primary-opaque: #363636;
   --color-background-panel: #232323;
   --color-background-primary-solid: #fff;
@@ -76,6 +88,12 @@
     --color-token-main-surface-primary: #181818;
     --color-token-bg-primary: #141414;
     --color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
+    --color-surface-tertiary: rgb(40 40 40);
+    --color-surface-elevated-secondary: rgb(45 45 45);
+    --color-border-subtle: rgb(255 255 255 / 4.2%);
+    --color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
+    --color-chart-blue: #339cff;
+    --color-text-inverse: rgb(13 13 13);
     --color-background-elevated-primary-opaque: #363636;
     --color-background-panel: #232323;
     --color-background-primary-solid: #fff;
@@ -810,6 +828,68 @@ h1,
   background: var(--color-token-bg-primary);
 }
 
+/* Native-token image editor: tokens arrive from RuntimeHost with the active Codex theme. */
+.image-editor { position: relative; background: var(--color-token-bg-primary); }
+.image-editor [hidden] { display: none !important; }
+.image-editor-controls { position: sticky; z-index: 6; top: 0; background: var(--color-token-bg-primary); }
+.image-editor-toolbar { position: relative; display: flex; justify-content: center; min-height: 48px; padding: 8px 16px; }
+.image-edit-actions, .image-edit-mode { display: flex; min-width: 0; align-items: center; gap: 2px; padding: 2px; overflow: hidden; border-radius: 9999px; background: color-mix(in srgb, var(--color-surface-tertiary) 95%, transparent); box-shadow: 0 0 0 1px var(--color-border-subtle), var(--shadow-md); backdrop-filter: blur(4px); }
+.image-edit-action, .image-edit-mode button { display: inline-flex; height: 28px; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 999px; padding: 0 6px; background: transparent; color: var(--color-text-foreground); font-family: var(--font-sans-default); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 18px; white-space: nowrap; cursor: pointer; }
+.image-edit-action:hover, .image-edit-action[aria-expanded="true"], .image-edit-mode button:hover { background: var(--color-background-primary-ghost-hover); }
+.image-edit-action:focus-visible, .image-edit-mode button:focus-visible, .image-zoom-trigger:focus-visible, .image-edit-menu button:focus-visible { outline: 1px solid var(--color-border-focus); outline-offset: 1px; }
+.image-edit-mode button:disabled { color: var(--color-text-foreground-tertiary); cursor: default; }
+.image-edit-mode > span { min-width: 0; overflow: hidden; padding: 0 6px; color: var(--color-text-foreground-tertiary); font-size: var(--text-base); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
+.image-edit-mode button { width: 28px; padding: 0; flex: 0 0 auto; }
+.image-edit-mode button > svg { width: 16px; height: 16px; fill: currentColor; }
+.image-edit-mode button[aria-label="Redo"] > svg { transform: scaleX(-1); }
+.image-edit-mode [data-edit-cancel] { color: var(--color-text-foreground-tertiary); }
+.image-edit-mode [data-edit-cancel] > svg { width: 14px; height: 14px; }
+.image-edit-mode [data-edit-send] { width: auto; padding: 0 6px; background: var(--color-chart-blue); color: var(--color-text-inverse); }
+.image-edit-mode [data-edit-send]:hover { background: color-mix(in srgb, var(--color-chart-blue) 90%, transparent); }
+.image-edit-mode [data-edit-send]:disabled { color: var(--color-text-inverse); opacity: .4; }
+.image-zoom-trigger { position: absolute; top: 8px; right: 10px; height: 28px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: var(--radius-lg); padding: 0 8px; background: transparent; color: var(--color-text-foreground-tertiary); cursor: pointer; font-family: var(--font-sans-default); font-size: var(--text-sm); font-weight: var(--font-weight-normal); line-height: 20px; font-variant-numeric: tabular-nums; }
+.image-zoom-trigger:hover, .image-zoom-trigger[aria-expanded="true"] { background: var(--color-background-primary-ghost-hover); }
+.image-zoom-trigger [data-zoom-chevron] { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .5; }
+.image-edit-menu { position: absolute; z-index: 8; width: 160px; padding: 4px; border: 0; border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-surface-elevated-secondary) 90%, transparent); box-shadow: 0 0 0 .5px var(--color-border), var(--shadow-xl); backdrop-filter: blur(4px); }
+.image-edit-menu button { display: flex; width: 100%; align-items: center; gap: 6px; border: 0; border-radius: var(--radius-lg); padding: 5px 8px; background: transparent; color: var(--color-text-foreground); font-family: var(--font-sans-default); font-size: var(--text-sm); font-weight: var(--font-weight-normal); line-height: var(--text-sm--line-height); text-align: left; cursor: pointer; }
+.image-edit-menu button:hover { background: var(--color-background-primary-ghost-hover); }
+.image-ratio-label { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.image-ratio-label small { margin: 0; color: var(--color-text-foreground-tertiary); font-size: inherit; }
+.image-ratio-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; opacity: .75; }
+.image-menu-check { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; opacity: .75; }
+.image-menu-check.is-hidden { visibility: hidden; }
+.image-menu-separator { height: 1px; margin: 0 8px; background: var(--color-border); }
+.image-zoom-menu { width: 136px; padding: 6px; border-radius: 10px; }
+.image-zoom-menu button { border-radius: 6px; padding: 5px 5px 5px 8px; line-height: 20px; }
+.image-editor-stage { position: relative; overflow: auto; touch-action: none; }
+.image-editor-stage img { transform-origin: center; transition: transform 120ms ease-out; }
+.image-edit-mask, .image-comment-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
+.image-edit-mask { cursor: crosshair; opacity: .5; color: var(--color-text-accent); }
+.image-comment-layer { pointer-events: none; }
+.image-comment-marker { position: absolute; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; color: var(--color-text-accent); font-family: var(--font-sans-default); transform: translate(-50%, -50%); }
+button.image-comment-marker { pointer-events: auto; cursor: pointer; }
+.image-comment-marker > svg { position: absolute; inset: 0; width: 30px; height: 30px; fill: currentColor; overflow: visible; stroke: white; stroke-width: 1.65; }
+.image-comment-marker > span { position: relative; z-index: 1; color: white; font-size: 10px; font-weight: 700; line-height: 10px; transform: translate(-1px, -1px); }
+.image-comment-popover { position: absolute; z-index: 4; width: min(294px, calc(100% - 16px)); height: 44px; padding: 8px 8px 8px 16px; border: 0; border-radius: 22px; background: var(--color-surface-elevated-secondary); box-shadow: 0 0 0 1px var(--color-border-subtle), var(--shadow-md); }
+.image-comment-popover input { width: 100%; height: 28px; border: 0; padding: 0; outline: 0; background: transparent; color: var(--color-token-input-foreground); font-family: var(--font-sans-default); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 21px; }
+.image-comment-popover.is-existing-comment { height: 120px; padding: 8px 12px 8px 16px; }
+.image-comment-popover textarea { display: block; width: 100%; height: 60px; resize: none; border: 0; padding: 2px 0 0; outline: 0; background: transparent; color: var(--color-token-input-foreground); font-family: var(--font-sans-default); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: 24px; }
+.image-comment-editor-footer { height: 44px; display: flex; align-items: end; justify-content: space-between; }
+.image-comment-editor-actions { display: flex; gap: 6px; }
+.image-comment-editor-footer button { height: 28px; border: 1px solid var(--color-border); border-radius: 999px; padding: 0 8px; background: color-mix(in srgb, var(--color-token-main-surface-primary) 96%, transparent); color: var(--color-text-foreground); font-family: var(--font-sans-default); font-size: var(--text-sm); font-weight: var(--font-weight-normal); line-height: 18px; cursor: pointer; }
+.image-comment-editor-footer button:hover { background: var(--color-background-primary-ghost-hover); }
+.image-comment-editor-footer .image-comment-delete { width: 28px; padding: 0; border-color: transparent; background: transparent; }
+.image-comment-delete > svg { width: 20px; height: 20px; fill: currentColor; }
+.image-comment-editor-footer .image-comment-save { border-color: transparent; background: var(--color-background-primary-solid); color: var(--color-text-button-primary); }
+.image-comment-editor-footer button:disabled { cursor: default; opacity: .4; }
+.image-brush-slider { position: absolute; z-index: 3; top: 50%; left: 16px; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
+.image-brush-slider input { accent-color: var(--color-text-accent); }
+.image-edit-menu[data-resize-menu] { top: 48px; left: 50%; transform: translateX(-50%); }
+.image-zoom-menu { top: 48px; right: 10px; }
+.image-edit-action > svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
+.image-edit-action > [data-native-image-icon="resize"] { width: 18px; height: 18px; }
+@media (max-width: 520px) { .image-edit-action span { display: none; } .image-edit-action { width: 28px; padding: 0; } }
+
 .drawer-figure img {
   max-width: 100%;
   max-height: min(68vh, 720px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecodex",
-  "version": "0.2.3",
+  "version": "1.0.2",
   "description": "Lightweight, local-first plugins for the Codex desktop app.",
   "license": "MIT",
   "type": "module",

package/packages/runtime-host/src/codex-runtime.mjs

@@ -165,7 +165,11 @@ export function createInjectionSource(features, {
       "--color-token-bg-primary",
       "--color-token-bg-secondary",
       "--color-token-bg-tertiary",
+      "--color-surface-tertiary",
+      "--color-surface-elevated-secondary",
       "--color-background-elevated-primary-opaque",
+      "--color-background-primary-ghost-hover",
+      "--color-chart-blue",
       "--color-background-panel",
       "--color-background-control",
       "--color-background-primary-solid",
@@ -181,11 +185,13 @@ export function createInjectionSource(features, {
       "--color-text-foreground",
       "--color-text-foreground-secondary",
       "--color-text-foreground-tertiary",
+      "--color-text-inverse",
       "--color-text-on-accent",
       "--color-text-button-primary",
       "--color-text-accent",
       "--color-token-text-link-foreground",
       "--color-border",
+      "--color-border-subtle",
       "--color-border-heavy",
       "--color-border-focus",
       "--color-token-scrollbar-slider-background",
@@ -319,7 +325,15 @@ export function createInjectionSource(features, {
     modelSelectorStyle.setAttribute("data-codex-model-slider-style", "");
     modelSelectorStyle.textContent = `
       [data-codex-model-slider-menu] { width: 264px !important; min-width: 264px; overflow-x: hidden; }
-      [data-codex-model-slider-controller-menu] { position: absolute !important; right: 0; bottom: 0; z-index: 1; }
+      [data-codex-model-slider-controller-menu] {
+        position: absolute !important;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        background-color: var(--color-surface-elevated-secondary);
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+      }
       [data-codex-model-slider-menu][data-codex-model-slider-overflow] {
         max-height: var(--codex-model-slider-menu-max-height) !important;
         overflow-y: auto;
@@ -937,7 +951,7 @@ export function createInjectionSource(features, {
     function modelDisplayLabel(identity, selector) {
       const model = catalogModelFor(identity, selector) ?? nativeCatalogModelFor(identity);
       const source = model?.displayName || model?.slug || identity.backend;
-      return formatIdentifier(modelIdentity(source).backend);
+      return formatIdentifier(source.slice(source.lastIndexOf("/") + 1));
     }
 
     function brandForModel(identity, selector) {
@@ -2568,6 +2582,8 @@ export function createInjectionSource(features, {
       const dialogShadow = "0 16px 32px -8px rgba(0,0,0,.19)";
       const surfaceTokens = {
         ...tokens,
+        // 部分 Codex 版本仅提供等价的正文前景 token。
+        "--color-token-input-foreground": tokens["--color-token-input-foreground"] ?? tokens["--color-text-foreground"],
         "--codex-summary-section-title-font-size": "14px",
         "--codex-summary-section-title-line-height": "21px",
         "--codex-summary-section-title-font-weight": tokens["--font-weight-normal"] ?? "400",
@@ -2823,8 +2839,9 @@ export function createInjectionSource(features, {
         postSurfaceActive(record, false);
       }
       const existing = pageSurfaces.get(featureId);
-      const surface = existing ?? createPageSurface(feature);
-      if (existing) reloadSurfaceIfUnready(surfaceKey(feature.id, "page"), feature.surfaceUrl);
+      const reusable = existing?.isConnected ? existing : null;
+      const surface = reusable ?? createPageSurface(feature);
+      if (reusable) reloadSurfaceIfUnready(surfaceKey(feature.id, "page"), feature.surfaceUrl);
       surface.hidden = false;
       activePageFeatureId = featureId;
       const record = surfaceRecords.get(surfaceKey(feature.id, "page"));
@@ -3957,7 +3974,7 @@ export function createInjectionSource(features, {
           respondToSurface(record, requestId, { ok: true, result: { paths } });
           return;
         }
-        if (action === "attach-file") {
+        if (["attach-file", "create-image-edit-thread"].includes(action)) {
           if (typeof globalThis[config.bindingName] !== "function") {
             throw new Error("The native file bridge is unavailable");
           }
@@ -4151,6 +4168,7 @@ export function createInjectionSource(features, {
         stopToolbarReadiness();
         mainContentObserver?.observer.disconnect();
         restoreThreadContentShift();
+        for (const entry of document.querySelectorAll(`[${entryMarker}]`)) entry.remove();
         for (const root of document.querySelectorAll("[data-codex-personal-toolbar-entry]")) root.remove();
         for (const group of document.querySelectorAll("[data-codex-personal-summary-toolbar-group]")) group.remove();
         for (const surface of pageSurfaces.values()) surface.remove();
@@ -4800,6 +4818,143 @@ export class CodexRuntime {
     }
   }
 
+  async attachFilesToComposer(client, filePaths, requestId) {
+    if (!Array.isArray(filePaths) || !filePaths.length || filePaths.length > 2) {
+      throw new Error("One or two image edit attachments are required");
+    }
+    for (const filePath of filePaths) {
+      if (typeof filePath !== "string" || !path.isAbsolute(filePath) || !(await stat(filePath)).isFile()) {
+        throw new Error("Only absolute regular files can be attached");
+      }
+    }
+    const fileNames = filePaths.map((filePath) => path.basename(filePath));
+    const requiredLabels = fileNames.reduce((counts, fileName) => {
+      const label = `Remove ${fileName}`;
+      counts[label] = (counts[label] ?? 0) + 1;
+      return counts;
+    }, {});
+    const marker = `codex-personal-${requestId}-batch`;
+
+    try {
+      evaluationValue(await client.send("Runtime.evaluate", {
+        expression: `(() => {
+          document.querySelectorAll('[data-codex-personal-file-input]').forEach((input) => input.remove());
+          const input = document.createElement("input");
+          input.type = "file";
+          input.multiple = true;
+          input.dataset.codexPersonalFileInput = ${JSON.stringify(marker)};
+          input.style.display = "none";
+          document.body.append(input);
+          return true;
+        })()`,
+        returnByValue: true,
+      }));
+      const { root } = await client.send("DOM.getDocument", { depth: 0 });
+      const { nodeId } = await client.send("DOM.querySelector", {
+        nodeId: root.nodeId,
+        selector: `[data-codex-personal-file-input="${marker}"]`,
+      });
+      if (!nodeId) throw new Error("The temporary multi-file bridge could not be resolved");
+      await client.send("DOM.setFileInputFiles", { files: filePaths, nodeId });
+      const dropped = evaluationValue(await client.send("Runtime.evaluate", {
+        expression: `(() => {
+          const input = document.querySelector(${JSON.stringify(`[data-codex-personal-file-input="${marker}"]`)});
+          const composer = document.querySelector('[data-codex-composer="true"][contenteditable="true"]');
+          if (!input?.files?.length || !composer) return false;
+          const transfer = new DataTransfer();
+          for (const file of input.files) transfer.items.add(file);
+          for (const type of ["dragenter", "dragover", "drop"]) {
+            composer.dispatchEvent(new DragEvent(type, {
+              bubbles: true,
+              cancelable: true,
+              composed: true,
+              dataTransfer: transfer,
+            }));
+          }
+          return transfer.files.length === ${filePaths.length};
+        })()`,
+        returnByValue: true,
+      }));
+      if (!dropped) throw new Error("The native Composer rejected the image edit drop");
+      await waitForExpression(client, `(() => {
+        const required = ${JSON.stringify(requiredLabels)};
+        const observed = {};
+        for (const button of document.querySelectorAll('button[aria-label^="Remove "]')) {
+          const label = button.getAttribute("aria-label");
+          observed[label] = (observed[label] ?? 0) + 1;
+        }
+        return Object.entries(required).every(([label, count]) => (observed[label] ?? 0) >= count);
+      })()`, 10_000);
+      return fileNames.map((name) => ({ mode: "attach", name }));
+    } finally {
+      await client.send("Runtime.evaluate", {
+        expression: `document.querySelectorAll('[data-codex-personal-file-input]').forEach((input) => input.remove())`,
+      }).catch(() => {});
+    }
+  }
+
+  async createImageEditThread(client, feature, payload, requestId) {
+    const draftId = typeof payload?.draftId === "string" ? payload.draftId : "";
+    const prompt = typeof payload?.prompt === "string" ? payload.prompt.trim() : "";
+    if (!/^[a-f0-9-]{36}$/.test(draftId) || !prompt || prompt.length > 2_000 || !feature?.surfaceUrl) {
+      throw Object.assign(new Error("The image edit request is incomplete"), { code: "INVALID_EDIT_REQUEST" });
+    }
+    const draftResponse = await this.fetchImpl(new URL(`/api/image-edit-draft/${draftId}`, feature.surfaceUrl), {
+      headers: { Origin: CODEX_APP_ORIGIN },
+    });
+    if (!draftResponse?.ok) {
+      throw Object.assign(new Error("The image edit draft is unavailable"), { code: "EDIT_DRAFT_UNAVAILABLE" });
+    }
+    const draft = await draftResponse.json();
+    const paths = [draft?.sourcePath, draft?.auxiliaryPath].filter(Boolean);
+    if (!paths.length || paths.length > 2) {
+      throw Object.assign(new Error("The image edit attachments are unavailable"), { code: "INVALID_EDIT_ATTACHMENT" });
+    }
+    for (const filePath of paths) {
+      if (typeof filePath !== "string" || !path.isAbsolute(filePath) || !(await stat(filePath)).isFile()) {
+        throw Object.assign(new Error("The image edit attachment is unavailable"), { code: "INVALID_EDIT_ATTACHMENT" });
+      }
+    }
+
+    const opened = evaluationValue(await client.send("Runtime.evaluate", {
+      expression: `(() => {
+        const candidates = Array.from(document.querySelectorAll('button, [role="button"]'));
+        const trigger = candidates.find((element) => /^new chat$/i.test(
+          (element.getAttribute('aria-label') || element.textContent || '').trim(),
+        ));
+        if (!trigger) return false;
+        trigger.click();
+        return true;
+      })()`,
+      returnByValue: true,
+    }));
+    if (!opened) throw Object.assign(new Error("The native New chat control is unavailable"), {
+      code: "NEW_CHAT_UNAVAILABLE",
+    });
+    await waitForExpression(client, `Boolean(document.querySelector('[data-testid="home-icon"]')) && Boolean(document.querySelector('[data-codex-composer="true"][contenteditable="true"]'))`);
+    const attached = await this.attachFilesToComposer(client, paths, requestId);
+    evaluationValue(await client.send("Runtime.evaluate", {
+      expression: `window.__codexPersonalRuntime?.insertText(${JSON.stringify(prompt)})`,
+      returnByValue: true,
+    }));
+    const sent = evaluationValue(await client.send("Runtime.evaluate", {
+      expression: `(() => {
+        const send = document.querySelector('button[aria-label="Send message"]')
+          || document.querySelector('button[aria-label="Send"]')
+          || document.querySelector('button[data-testid="send-button"]');
+        if (!send || send.disabled) return false;
+        send.click();
+        return true;
+      })()`,
+      returnByValue: true,
+    }));
+    if (!sent) throw Object.assign(new Error("The new Chat is ready but its Send button is unavailable"), {
+      code: "SEND_UNAVAILABLE",
+    });
+    await waitForExpression(client, `!document.querySelector('[data-testid="home-icon"]') && Boolean(document.querySelector('[data-codex-composer="true"][contenteditable="true"]'))`);
+    return { attached, threadStarted: true };
+  }
+
   async fetchSurfaceResource(url, label) {
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), this.surfaceLoadTimeoutMs);
@@ -4934,8 +5089,9 @@ export class CodexRuntime {
       return;
     }
     try {
-      if (request.action !== "attach-file") throw new Error("Unsupported native Host action");
-      const result = await this.attachFileToComposer(client, request.payload?.path, request.requestId);
+      const result = request.action === "create-image-edit-thread"
+        ? await this.createImageEditThread(client, feature, request.payload, request.requestId)
+        : await this.attachFileToComposer(client, request.payload?.path, request.requestId);
       await this.resolveHostAction(client, request.requestId, { ok: true, result });
     } catch (error) {
       await this.resolveHostAction(client, request.requestId, {

package/packages/runtime-host/src/feature-registry.mjs

@@ -12,6 +12,7 @@ const HOST_ACTIONS = new Set([
   "open-editor-modal",
   "resolve-file-paths",
   "import-generated-image",
+  "create-image-edit-thread",
 ]);
 
 const PAGE_SCRIPT_ENTRY_KINDS = new Set(["page-script"]);