Upload 23 files

Dockerfile

@@ -1,17 +1,17 @@
-FROM python:3.11-slim
-
-WORKDIR /app
-
-RUN apt-get update \
-  && apt-get install -y --no-install-recommends libgl1 libglib2.0-0 \
-  && rm -rf /var/lib/apt/lists/*
-
-COPY requirements.txt ./requirements.txt
-RUN pip install --no-cache-dir -r requirements.txt
-
-COPY backend ./backend
-
-ENV PORT=7860
-EXPOSE 7860
-
-CMD ["bash", "-lc", "uvicorn backend.server:app --host 0.0.0.0 --port ${PORT}"]
+{
+  "defaultApiUrl": "https://plan291037-textphantom-ocr-api2.hf.space",
+  "resetApiUrl": "https://plan291037-textphantom-ocr-api2.hf.space",
+  "AI_PROMPT_SYSTEM_BASE": "You are a professional manga translator and dialogue localizer.\nRewrite each paragraph as natural dialogue in the target language while preserving meaning, tone, intent, and character voice.\nKeep lines concise for speech bubbles. Do not add new information. Do not omit meaning. Do not explain.\nPreserve emphasis (… ! ?). Avoid excessive punctuation.\nIf the input is already in the target language, improve it (dialogue polish) without changing meaning.",
+  "AI_LANG_STYLE": {
+    "th": "Target language: Thai\\nWrite natural Thai manga/anime dialogue: short, punchy, in-character.\\nKeep lines concise for speech bubbles. Preserve emotion and emphasis (… ! ?).\\nOutput only Thai text. No explanations.\\n\\nZero-subject / Zero-pronoun (VERY IMPORTANT)\\n- Default: omit subjects/objects when clear. Thai can drop pronouns.\\n- Do NOT automatically translate English pronouns.\\n- Avoid \\\"ฉัน/ชั้น\\\" and \\\"นาย\\\" as much as possible.\\n- If first-person is truly required (identity contrast, ambiguous multi-speaker, or to avoid misunderstanding): prefer \\\"เรา\\\". Use \\\"ข้า\\\" only when fantasy/archaic tone is clearly indicated. Do not guess gender.\\n- If second-person is truly required: prefer name/role/title. Otherwise use tone-matching neutral/casual (e.g., \\\"แก\\\", \\\"เธอ\\\", \\\"คุณ\\\", \\\"พวกแก\\\", \\\"พวกเจ้า\\\") and keep consistent. Never use \\\"นาย\\\".\\n\\nEnglish -> Thai patterns (drop pronouns)\\n- \\\"I + verb\\\" -> drop subject: just the verb/phrase.\\n- \\\"I'm / I am + adj\\\" -> \\\"...อยู่ / ...นี่ / ...แล้ว\\\" (pick by tone).\\n- \\\"I will\\\" -> \\\"จะ...\\\"\\n- \\\"I can't\\\" -> \\\"ทำไม่ได้/ไม่ไหว\\\"\\n- \\\"I need to\\\" -> \\\"ต้อง...\\\"\\n- \\\"I want to\\\" -> \\\"อยาก...\\\"\\n- \\\"my + noun\\\" -> avoid \\\"ของฉัน\\\"; prefer dropping possession or using context (\\\"...ของ\\\" only when necessary).\\n- \\\"you + verb\\\" -> drop \\\"you\\\"; use direct imperative/statement.\\n\\nFinal rewrite check\\n- Before output, rewrite once to remove unnecessary \\\"ฉัน/ชั้น\\\" and \\\"นาย\\\". Keep them only if meaning becomes unclear without them.",
+    "en": "Target language: English\nWrite natural English manga dialogue: concise, conversational, with contractions where natural.\nLocalize tone and character voice; keep emotion and emphasis.\nKeep proper nouns consistent; do not over-explain.",
+    "ja": "Target language: Japanese\nWrite natural Japanese manga dialogue: concise, spoken.\nChoose 丁寧語/タメ口 to match context; keep emotion and emphasis.\nKeep proper nouns consistent; keep SFX natural in Japanese.",
+    "default": "Write natural manga dialogue in the target language: concise, spoken, faithful to meaning and tone."
+  },
+  "AI_PROMPT_USER_BY_LANG": {
+    "th": "แนวทางแปลภาษาไทย\\n\\nเป้าหมาย\\n- แปลให้เป็นบทพูด/คำบรรยายแบบนักแปลอนิเมะ-มังงะมืออาชีพ: ธรรมชาติ กระชับ เข้าปาก เข้าคาแรกเตอร์\\n- รักษาความหมาย โทน อารมณ์ และจังหวะคำเดิม\\n- ห้ามอธิบาย ห้ามขยายความ ห้ามเติมข้อมูล\\n\\nกฎสำคัญที่สุด: ตัดสรรพนามเป็นค่าเริ่มต้น (Zero-subject)\\n- ภาษาไทยไม่จำเป็นต้องมีประธาน/กรรมเสมอไป ให้ตัดได้ถ้าเข้าใจ\\n- ห้ามแปล \\\"I/me/my\\\" เป็น \\\"ฉัน/ชั้น/ผม/ดิฉัน\\\" อัตโนมัติ\\n- หลีกเลี่ยง \\\"ฉัน/ชั้น\\\" และ \\\"นาย\\\" ให้มากที่สุด\\n- ถ้าจำเป็นต้องมีบุรุษที่ 1 จริง ๆ: ใช้ \\\"เรา\\\" เป็นตัวเลือกแรก และคงให้สม่ำเสมอ\\n- ใช้ \\\"ข้า\\\" เฉพาะเมื่อโทนแฟนตาซี/โบราณชัดเจนเท่านั้น\\n- ถ้าจำเ��็นต้องมีบุรุษที่ 2: ใช้ชื่อ/ตำแหน่งก่อน (อย่าเติมสรรพนามตามหลังชื่อ) ถ้าต้องใช้จริง ๆ ให้เลือกคำกลาง/กันเองตามโทน (\\\"แก/เธอ/คุณ/พวกแก/พวกเจ้า\\\") และคงให้สม่ำเสมอ\\n- ห้ามเดาเพศผู้พูด/ผู้ถูกพูดถึง\\n\\nแพทเทิร์นแปลงจากอังกฤษ (ห้ามยัด \\\"ฉัน\\\" เพราะมี I)\\n- I think... -> \\\"ว่า...\\\" / \\\"คิดว่า...\\\" (ตัด I ได้)\\n- I’m / I am + adj -> \\\"...อยู่\\\" / \\\"...นี่\\\" / \\\"...แล้ว\\\"\\n- I will... -> \\\"จะ...\\\"\\n- I can’t... -> \\\"ทำไม่ได้\\\" / \\\"ไม่ไหว\\\"\\n- I need to... -> \\\"ต้อง...\\\"\\n- I want to... -> \\\"อยาก...\\\"\\n- It’s my... / my + noun -> ตัดความเป็นเจ้าของถ้าไม่จำเป็น หลีกเลี่ยง \\\"ของฉัน\\\"\\n- You + verb -> ตัด you แล้วใช้ประโยคสั่ง/บอกตรง ๆ (เช่น \\\"ถอยไปซะ\\\")\\n\\nระดับภาษา & โทน\\n- ไม่เน้นทางการ: เลี่ยง \\\"ครับ/ค่ะ\\\" และคำสุภาพจัด ๆ เว้นแต่ต้นฉบับบังคับชัดเจน\\n- เลี่ยงคำลงท้ายที่บอกเพศโดยไม่จำเป็น\\n- ใช้คำอุทาน/คำลงท้ายเท่าที่ช่วยโทน ไม่พร่ำ\\n\\nประเภทข้อความ\\n- บทพูด: ภาษาพูดไทยธรรมชาติ สั้น ชัด\\n- คำบรรยาย/ความคิด: ลื่นไหล แต่ยังสั้น\\n- ป้าย/สถานะ/UI: สั้น ชัด จัดรูปแบบเป็นรายการได้\\n\\nกรณีข้อความเพี้ยน/พิมพ์ผิด (เช่นจาก OCR)\\n- แก้เฉพาะที่มั่นใจสูงและชัด (ผิด 1–2 ตัวและเดาได้แน่)\\n- ไม่เดาคำใหม่ ไม่แก้ชื่อเฉพาะ/คำทับศัพท์มั่ว\\n\\nตรวจรอบสุดท้ายก่อนส่ง\\n- เขียนใหม่ 1 รอบเพื่อตัด \\\"ฉัน/ชั้น\\\" และ \\\"นาย\\\" ที่ไม่จำเป็น\\n- ตอบเฉพาะข้อความแปลไทย\\n- รักษาการขึ้นบรรทัด/ย่อหน้าเดิม และเรียงตามต้นฉบับ",
+    "en": "Style preferences:\n- Keep English dialogue concise and conversational.\n- Keep lines short for speech bubbles.\n- Keep names and recurring terms consistent.\n- Keep SFX short; avoid very long repeated characters.",
+    "ja": "Style preferences:\n- Keep Japanese dialogue concise and natural for manga.\n- Keep lines short for speech bubbles.\n- Keep names and recurring terms consistent.\n- Keep SFX short; avoid very long repeated characters.",
+    "default": "Style preferences:\n- Keep dialogue concise, spoken, and faithful to tone.\n- Keep lines short for speech bubbles.\n- Keep names and recurring terms consistent.\n- Keep SFX short; avoid very long repeated characters."
+  }
+}

README (1).md

@@ -0,0 +1,40 @@
+{
+  "manifest_version": 3,
+  "name": "TextPhantom - OCR Overlay",
+  "version": "2026.03.15",
+  "description": "🧠 Right-click any image → translate images",
+  "permissions": [
+    "contextMenus",
+    "storage",
+    "activeTab"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "background-service.js",
+    "type": "module"
+  },
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "48": "icons/48.png"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content-service.js"
+      ],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "icons": {
+    "48": "icons/48.png",
+    "128": "icons/128.png"
+  }
+}

README.md

@@ -1,31 +1,2263 @@
----
-title: TextPhantom OCR API
-emoji: "🪄"
-colorFrom: indigo
-colorTo: pink
-sdk: docker
-app_port: 7860
-pinned: false
----
-
-FastAPI backend for TextPhantom (Chrome extension).
-
-## Endpoints
-
-- `GET /health`
-- `GET /version`
-- `GET /warmup?lang=th`
-- `POST /translate`
-- `GET /translate/{job_id}`
-- `POST /ai/resolve`
-- `GET /ai/models`
-- `POST /ws` (WebSocket)
-
-## Environment
-
-- `AI_API_KEY` (optional)
-- `SERVER_MAX_WORKERS` (default: 15)
-- `JOB_TTL_SEC` (default: 3600)
-- `TP_DEBUG` (set to `1` to enable debug logs)
-
-For Spaces on small CPU, setting `SERVER_MAX_WORKERS=2` is usually enough.
+(function () {
+  if (globalThis.__TextPhantomContentLoaded) return;
+  globalThis.__TextPhantomContentLoaded = true;
+
+  const LEVELS = { debug: 0, info: 1, warn: 2, error: 3 };
+  const CURRENT_LEVEL_NAME = "debug";
+  const CURRENT_LEVEL = LEVELS[CURRENT_LEVEL_NAME] ?? 0;
+
+  function formatTimestamp() {
+    return new Date().toISOString();
+  }
+
+  function createLogger(namespace) {
+    function _log(level, ...args) {
+      if (LEVELS[level] >= CURRENT_LEVEL) {
+        const prefix = `[${formatTimestamp()}][${namespace}][${level.toUpperCase()}]`;
+        if (level === "debug") console.debug(prefix, ...args);
+        else if (level === "info") console.info(prefix, ...args);
+        else if (level === "warn") console.warn(prefix, ...args);
+        else if (level === "error") console.error(prefix, ...args);
+        else console.log(prefix, ...args);
+      }
+    }
+    const logger = (...a) => _log("info", ...a);
+    logger.debug = (...a) => _log("debug", ...a);
+    logger.info = (...a) => _log("info", ...a);
+    logger.warn = (...a) => _log("warn", ...a);
+    logger.error = (...a) => _log("error", ...a);
+    return logger;
+  }
+
+  window.createLogger = window.createLogger || createLogger;
+
+  const log = window.createLogger
+    ? window.createLogger("content_bootstrap")
+    : console;
+
+  const KEEPALIVE_PORT_NAME = "TP_KEEPALIVE";
+  const KEEPALIVE_PING_MS = 20_000;
+  let keepAlivePort = null;
+  let keepAliveTimer = null;
+  let keepAliveStopAt = 0;
+
+  function stopKeepAlive() {
+    keepAliveStopAt = 0;
+    if (keepAliveTimer) {
+      clearInterval(keepAliveTimer);
+      keepAliveTimer = null;
+    }
+    if (keepAlivePort) {
+      try {
+        keepAlivePort.disconnect();
+      } catch {}
+      keepAlivePort = null;
+    }
+  }
+
+  function startKeepAlive(ms) {
+    const dur = Number(ms) > 0 ? Number(ms) : 10 * 60 * 1000;
+    keepAliveStopAt = Math.max(keepAliveStopAt || 0, Date.now() + dur);
+    if (!keepAlivePort) {
+      try {
+        keepAlivePort = chrome.runtime.connect({ name: KEEPALIVE_PORT_NAME });
+        keepAlivePort.onDisconnect.addListener(() => stopKeepAlive());
+      } catch {
+        stopKeepAlive();
+        return;
+      }
+    }
+    const ping = () => {
+      if (!keepAlivePort) return;
+      if (keepAliveStopAt && Date.now() >= keepAliveStopAt) {
+        stopKeepAlive();
+        return;
+      }
+      try {
+        keepAlivePort.postMessage({ type: "TP_KEEPALIVE", ts: Date.now() });
+      } catch {
+        stopKeepAlive();
+      }
+    };
+    ping();
+    if (!keepAliveTimer) keepAliveTimer = setInterval(ping, KEEPALIVE_PING_MS);
+  }
+
+  const __tpVer = (() => {
+    try {
+      return (chrome?.runtime?.getManifest?.() || {}).version || "";
+    } catch {
+      return "";
+    }
+  })();
+  const __tpIsTop = (() => {
+    try {
+      return window.top === window;
+    } catch {
+      return false;
+    }
+  })();
+
+  try {
+    chrome.runtime.sendMessage(
+      {
+        type: "TP_CONTENT_READY",
+        href: location.href,
+        ver: __tpVer,
+        top: __tpIsTop,
+      },
+      () => void chrome.runtime.lastError,
+    );
+  } catch {}
+
+  function setupLocationChangeNotifier() {
+    if (!__tpIsTop) return;
+    if (globalThis.__tpLocationNotifyInstalled) return;
+    globalThis.__tpLocationNotifyInstalled = true;
+    let lastHref = location.href;
+    let canSend = true;
+    const send = () => {
+      if (!canSend) return;
+      const href = location.href;
+      if (href === lastHref) return;
+      lastHref = href;
+      try {
+        chrome.runtime.sendMessage(
+          { type: "TP_LOCATION_CHANGED", href, top: true, ver: __tpVer },
+          () => void chrome.runtime.lastError,
+        );
+      } catch {
+        canSend = false;
+      }
+    };
+    const wrap = (name) => {
+      const orig = history[name];
+      if (typeof orig !== "function") return;
+      history[name] = function (...args) {
+        const r = orig.apply(this, args);
+        Promise.resolve().then(send);
+        return r;
+      };
+    };
+    wrap("pushState");
+    wrap("replaceState");
+    addEventListener("popstate", send, { passive: true });
+    addEventListener("hashchange", send, { passive: true });
+  }
+
+  setupLocationChangeNotifier();
+
+  try {
+    console.info("[TextPhantom][content] loaded", {
+      href: location.href,
+      ver: __tpVer,
+      top: __tpIsTop,
+    });
+  } catch {}
+
+  function truncate(s, len = 180) {
+    if (!s) return s;
+    try {
+      s = String(s);
+    } catch {}
+    return s.length > len ? s.slice(0, len) + "…" : s;
+  }
+
+  const replaceStateByOriginal = new Map();
+
+  function noteReplaceState(original, state) {
+    const key = _normUrl(original);
+    if (!key) return;
+    replaceStateByOriginal.set(key, { state, ts: Date.now() });
+  }
+
+  function shouldShowReplaceError(original) {
+    const key = _normUrl(original);
+    if (!key) return true;
+    const s = replaceStateByOriginal.get(key);
+    if (!s) return true;
+    if (s.state === "ok") return false;
+    if (s.state === "pending" && Date.now() - s.ts < 12000) return false;
+    return true;
+  }
+
+  function markImageError(original, msg) {
+    if (!shouldShowReplaceError(original)) {
+      log.debug("markImageError skipped (replace ok/pending)", {
+        original: truncate(original),
+      });
+      return;
+    }
+    const img = findTargetImage(original);
+    if (!img || img.dataset.lensError) {
+      log.info("markImageError", {
+        count: 0,
+        original: truncate(original),
+        message: msg,
+      });
+      return;
+    }
+
+    const alreadyReplaced =
+      !!img.dataset.tpBlobUrl ||
+      (img.currentSrc || img.src || "").startsWith("blob:") ||
+      (img.currentSrc || img.src || "").startsWith("data:");
+    if (alreadyReplaced) {
+      log.debug("markImageError skipped (image replaced)", {
+        original: truncate(original),
+      });
+      return;
+    }
+
+    img.style.outline = "3px solid red";
+
+    const badge = document.createElement("div");
+    badge.textContent = "⚠️";
+    badge.title = msg || "OCR error";
+
+    const r = img.getBoundingClientRect();
+    badge.style.position = "absolute";
+    badge.style.left = `${r.left + window.scrollX + 4}px`;
+    badge.style.top = `${r.top + window.scrollY + 4}px`;
+    badge.style.background = "rgba(255,255,255,0.9)";
+    badge.style.padding = "2px 4px";
+    badge.style.borderRadius = "4px";
+    badge.style.zIndex = 9999;
+
+    document.body.appendChild(badge);
+    img.dataset.lensError = "1";
+    log.info("markImageError", {
+      count: 1,
+      original: truncate(original),
+      message: msg,
+    });
+  }
+
+  async function getSettings() {
+    return new Promise((res) => {
+      chrome.storage.local.get(
+        ["mode", "lang", "sources", "aiKey"],
+        (items) => {
+          res({
+            mode: typeof items.mode === "string" ? items.mode : "lens_images",
+            lang: typeof items.lang === "string" ? items.lang : "th",
+            sources:
+              typeof items.sources === "string" ? items.sources : "translated",
+            aiKey: typeof items.aiKey === "string" ? items.aiKey : "",
+          });
+        },
+      );
+    });
+  }
+
+  function removeLazyScriptsAndForceSrc() {
+    const lazyScripts = document.querySelectorAll('script[src*="lazy"]');
+    lazyScripts.forEach((script) => script.remove());
+
+    const lazyImgs = document.querySelectorAll("img[data-src]");
+    lazyImgs.forEach((img) => {
+      img.removeAttribute("loading");
+      img.classList.remove("lazyload", "lazy", "lazyloaded");
+      if (img.dataset.src) {
+        img.src = img.dataset.src;
+      }
+    });
+
+    log.info("lazy removed + src forced from data-src", {
+      lazyScripts: lazyScripts.length,
+      lazyImgs: lazyImgs.length,
+    });
+  }
+
+  function buildPipelineEvent(stage) {
+    return { stage, at: new Date().toISOString() };
+  }
+
+  function buildPositionFromElement(img) {
+    const rect = img.getBoundingClientRect();
+    return {
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+      viewport_width: window.innerWidth,
+      viewport_height: window.innerHeight,
+      scroll_x: window.scrollX,
+      scroll_y: window.scrollY,
+    };
+  }
+
+  function getBestImgUrl(img) {
+    const tp =
+      img?.dataset?.tpOriginal ||
+      (typeof img?.getAttribute === "function"
+        ? img.getAttribute("data-tp-original")
+        : "");
+    if (tp && /^https?:/i.test(tp)) return tp;
+    return (
+      img.currentSrc ||
+      img.src ||
+      img.getAttribute("data-src") ||
+      img.getAttribute("data-original") ||
+      img.getAttribute("data-lazy-src") ||
+      ""
+    );
+  }
+
+  function _normUrl(u) {
+    if (!u) return "";
+    try {
+      u = String(u);
+    } catch {
+      return "";
+    }
+    u = u.trim();
+    if (!u) return "";
+    try {
+      const x = new URL(u, location.href);
+      x.hash = "";
+      return x.toString();
+    } catch {
+      return u.split("#")[0].split("?")[0];
+    }
+  }
+
+  let __tp_lastRightClick = { img: null, ts: 0, urls: [] };
+  const __tp_recentImgByUrl = new Map();
+  function rememberImgUrls(img, urls) {
+    const ts = Date.now();
+    for (const u of urls || []) {
+      const k = _normUrl(u);
+      if (!k) continue;
+      __tp_recentImgByUrl.set(k, { img, ts });
+    }
+    if (__tp_recentImgByUrl.size > 200) {
+      const cutoff = ts - 5 * 60 * 1000;
+      for (const [k, v] of __tp_recentImgByUrl.entries()) {
+        if (!v?.img || !v.img.isConnected || (v.ts || 0) < cutoff)
+          __tp_recentImgByUrl.delete(k);
+      }
+      while (__tp_recentImgByUrl.size > 220)
+        __tp_recentImgByUrl.delete(__tp_recentImgByUrl.keys().next().value);
+    }
+  }
+  document.addEventListener(
+    "contextmenu",
+    (e) => {
+      const img = e?.target?.closest ? e.target.closest("img") : null;
+      if (!img) return;
+      const urls = [img.currentSrc, img.src, getBestImgUrl(img)]
+        .filter(Boolean)
+        .map(_normUrl)
+        .filter(Boolean);
+      if (urls[0] && img?.dataset) img.dataset.tpOriginal = urls[0];
+      __tp_lastRightClick = {
+        img,
+        ts: Date.now(),
+        urls,
+      };
+      rememberImgUrls(img, urls);
+    },
+    true,
+  );
+
+  function findTargetImage(original) {
+    const o = _normUrl(original);
+
+    const mdKey = mdKeyFromUrl(original);
+    if (mdKey) {
+      const byKey = Array.from(document.images || []).find(
+        (img) => String(img.dataset.tpOriginalKey || "") === mdKey,
+      );
+      if (byKey) return byKey;
+    }
+
+    if (o) {
+      const byData = Array.from(document.images || []).find(
+        (img) => _normUrl(img.dataset.tpOriginal) === o,
+      );
+      if (byData) return byData;
+    }
+
+    if (o) {
+      const rec = __tp_recentImgByUrl.get(o);
+      if (rec?.img && rec.img.isConnected) return rec.img;
+    }
+
+    const now = Date.now();
+    if (__tp_lastRightClick.img && now - __tp_lastRightClick.ts < 8000) {
+      const urls = __tp_lastRightClick.urls || [];
+      if (!o || urls.includes(o)) return __tp_lastRightClick.img;
+    }
+
+    const imgs = Array.from(document.images || []);
+    for (const img of imgs) {
+      const a = _normUrl(img.currentSrc);
+      const b = _normUrl(img.src);
+      if (o && (a === o || b === o)) return img;
+    }
+    return null;
+  }
+  function isHttpish(u) {
+    return typeof u === "string" && /^https?:/i.test(u);
+  }
+
+  function isInlineableImageUrl(u) {
+    return typeof u === "string" && /^(?:data:|blob:|file:|chrome-extension:)/i.test(u);
+  }
+
+  async function blobToDataUri(blob) {
+    return await new Promise((resolve) => {
+      try {
+        const reader = new FileReader();
+        reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : "");
+        reader.onerror = () => resolve("");
+        reader.readAsDataURL(blob);
+      } catch {
+        resolve("");
+      }
+    });
+  }
+
+  async function getImageDataUriFromElement(img) {
+    const src = _normUrl(getBestImgUrl(img));
+    if (!src) return "";
+    if (src.startsWith("data:")) return src;
+
+    try {
+      const w = Number(img?.naturalWidth) || Number(img?.width) || 0;
+      const h = Number(img?.naturalHeight) || Number(img?.height) || 0;
+      if (w > 0 && h > 0) {
+        const canvas = document.createElement("canvas");
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext("2d", { willReadFrequently: false });
+        if (ctx) {
+          ctx.drawImage(img, 0, 0, w, h);
+          const du = canvas.toDataURL("image/png");
+          if (du && du.startsWith("data:image/")) return du;
+        }
+      }
+    } catch {}
+
+    try {
+      const res = await fetch(src, { cache: "force-cache" });
+      const blob = await res.blob();
+      const du = await blobToDataUri(blob);
+      if (du) return du;
+    } catch {}
+
+    return "";
+  }
+
+  async function buildPayloadFromImage(
+    img,
+    mode,
+    lang,
+    menuSource = "page_scan",
+    customStage,
+    includeDataUri = false,
+  ) {
+    const src = _normUrl(getBestImgUrl(img));
+    const imageDataUri = includeDataUri && isInlineableImageUrl(src)
+      ? await getImageDataUriFromElement(img)
+      : "";
+    if (!src && !imageDataUri) return null;
+    return buildPayload(
+      {
+        original_image_url: src || null,
+        position: buildPositionFromElement(img),
+        imageDataUri: imageDataUri || null,
+      },
+      mode,
+      lang,
+      menuSource,
+      customStage,
+    );
+  }
+
+  function emitViewerEvent(type, detail) {
+    try {
+      window.dispatchEvent(
+        new CustomEvent(type, {
+          detail: detail && typeof detail === "object" ? detail : {},
+        }),
+      );
+    } catch {}
+  }
+
+  function normalizeLazyImages() {
+    document.querySelectorAll("img").forEach((img) => {
+      const candSet =
+        img.getAttribute("data-srcset") || img.getAttribute("data-lazy-srcset");
+      if (candSet && !img.srcset) img.srcset = candSet;
+
+      const candSrc =
+        img.getAttribute("data-original") || img.getAttribute("data-lazy-src");
+      if (candSrc && !img.src) img.src = candSrc;
+
+      img.loading = "eager";
+      img.decoding = "sync";
+    });
+  }
+  async function collectImagesForScan(mode, lang, sourceTag) {
+    const seen = new Set();
+    const imgs = Array.from(document.images || []);
+    const out = [];
+    for (const img of imgs) {
+      const r =
+        typeof img.getBoundingClientRect === "function"
+          ? img.getBoundingClientRect()
+          : null;
+      const w = Math.max(Number(r?.width) || 0, Number(img.naturalWidth) || 0);
+      const h = Math.max(
+        Number(r?.height) || 0,
+        Number(img.naturalHeight) || 0,
+      );
+      if (w && h) {
+        if (Math.min(w, h) < 120) continue;
+        if (w * h < 60000) continue;
+      }
+      const payload = await buildPayloadFromImage(img, mode, lang, sourceTag);
+      const key = _normUrl(payload?.src) || String(payload?.metadata?.image_id || "");
+      if (!key || seen.has(key)) continue;
+      seen.add(key);
+      out.push(payload);
+    }
+    return out.filter(Boolean);
+  }
+
+  const OVERLAY_STYLE_ID = "textphantom_overlay_css";
+
+  const sendBg = (msg) =>
+    new Promise((resolve) => {
+      try {
+        chrome.runtime.sendMessage(msg, (r) => resolve(r || null));
+      } catch (_e) {
+        resolve(null);
+      }
+    });
+
+  const mdCacheGet = (keys, includeNewImg = false, lang = "", mode = "") =>
+    sendBg({
+      type: "TP_MD_CACHE_GET",
+      keys,
+      includeNewImg: !!includeNewImg,
+      lang,
+      mode,
+    });
+
+  const mdCacheGetNewImg = async (key, lang, mode) => {
+    const resp = await mdCacheGet([key], true, lang, mode);
+    const rec = resp?.items?.[key] || null;
+    return (
+      rec?.newImg ||
+      extractNewImageSrc(rec?.result || null) ||
+      extractNewImageSrc(rec || null) ||
+      null
+    );
+  };
+
+  const mdApplyCachedNewImg = (
+    originalUrl,
+    key,
+    isTextMode,
+    imgElement,
+    lang,
+    mode,
+  ) => {
+    mdCacheGetNewImg(key, lang, mode).then((newSrc) => {
+      if (!newSrc) return;
+      if (isTextMode) {
+        const mdKey = mdKeyFromUrl(originalUrl);
+        if (!mdKey) return;
+        const existing = mdHtmlOverlaysByKey.get(mdKey) || null;
+        const rec =
+          existing ||
+          (() => {
+            const rect = imgElement.getBoundingClientRect();
+            const r = upsertMangaDexHtmlOverlay(
+              mdKey,
+              imgElement,
+              Math.max(1, rect.width),
+              Math.max(1, rect.height),
+              "badge",
+            );
+            r.scope.textContent = "";
+            return r;
+          })();
+        rec.isTextMode = true;
+        updateCleanLayer(rec, imgElement, newSrc);
+        mdScheduleUpdate();
+        return;
+      }
+      replaceImageInDOM(originalUrl, newSrc).then((applied) => {
+        if (!applied)
+          mdRememberPending(originalUrl, {
+            needNewImg: true,
+            needMode: "replace",
+            needLang: lang,
+            needCacheMode: mode,
+          });
+      });
+    });
+  };
+
+  function ensureOverlayStyle(cssText) {
+    if (!cssText) cssText = "";
+    let styleEl = document.getElementById(OVERLAY_STYLE_ID);
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = OVERLAY_STYLE_ID;
+      styleEl.type = "text/css";
+      document.head.appendChild(styleEl);
+    }
+
+    const harden =
+      `\n/* TextPhantom harden */\n` +
+      `.tp-ol-root{position:absolute!important;left:0!important;top:0!important;pointer-events:none!important;z-index:2147483647!important;` +
+      `display:block!important;opacity:1!important;visibility:visible!important;overflow:visible!important;transform-origin:0 0!important;}` +
+      `.tp-ol-scope{position:absolute!important;left:0!important;top:0!important;pointer-events:none!important;` +
+      `display:block!important;opacity:1!important;visibility:visible!important;overflow:visible!important;}` +
+      `.tp-ol-scope *{box-sizing:border-box!important;pointer-events:none!important;}` +
+      `.tp-ol-container{position:relative!important;display:inline-block!important;line-height:0!important;overflow:visible!important;}`;
+
+    const next = String(cssText) + harden;
+    if (styleEl.textContent !== next) styleEl.textContent = next;
+  }
+
+  function computeScale(imgElement, baseW, baseH, preferRect = false) {
+    const rect = imgElement.getBoundingClientRect();
+    const cw = preferRect
+      ? rect.width || 1
+      : imgElement.offsetWidth ||
+        imgElement.clientWidth ||
+        imgElement.width ||
+        rect.width ||
+        1;
+    const ch = preferRect
+      ? rect.height || 1
+      : imgElement.offsetHeight ||
+        imgElement.clientHeight ||
+        imgElement.height ||
+        rect.height ||
+        1;
+    const nw =
+      (Number.isFinite(baseW) && baseW > 0 ? baseW : imgElement.naturalWidth) ||
+      cw ||
+      1;
+    const nh =
+      (Number.isFinite(baseH) && baseH > 0
+        ? baseH
+        : imgElement.naturalHeight) ||
+      ch ||
+      1;
+    const cs = getComputedStyle(imgElement);
+    const fit = cs.objectFit || "fill";
+    const transform = cs.transform || "none";
+    const transformOrigin = cs.transformOrigin || "0 0";
+
+    const parsePos = (v, pad) => {
+      if (!pad) return 0;
+      if (!v) return pad * 0.5;
+      const s = String(v).trim();
+      if (s.endsWith("%")) return (pad * parseFloat(s)) / 100;
+      if (s.endsWith("px")) return Math.min(pad, Math.max(0, parseFloat(s)));
+      const n = parseFloat(s);
+      return Number.isFinite(n) ? Math.min(pad, Math.max(0, n)) : pad * 0.5;
+    };
+
+    const posParts = (cs.objectPosition || "50% 50%").trim().split(/\s+/);
+    const posX = posParts[0];
+    const posY = posParts[1] || posParts[0];
+
+    let sx = cw / nw;
+    let sy = ch / nh;
+    let offX = 0;
+    let offY = 0;
+
+    if (fit !== "fill") {
+      let scale = 1;
+      if (fit === "contain") scale = Math.min(sx, sy);
+      else if (fit === "cover") scale = Math.max(sx, sy);
+      else if (fit === "scale-down") scale = Math.min(1, Math.min(sx, sy));
+      else if (fit === "none") scale = 1;
+      sx = scale;
+      sy = scale;
+      const drawnW = nw * scale;
+      const drawnH = nh * scale;
+      const padX = Math.max(0, cw - drawnW);
+      const padY = Math.max(0, ch - drawnH);
+      offX = parsePos(posX, padX);
+      offY = parsePos(posY, padY);
+    }
+
+    return {
+      rect,
+      cw,
+      ch,
+      nw,
+      nh,
+      sx: isFinite(sx) && sx > 0 ? sx : 1,
+      sy: isFinite(sy) && sy > 0 ? sy : 1,
+      offX,
+      offY,
+      transform,
+      transformOrigin,
+    };
+  }
+
+  function createOverlayBadge(label) {
+    const badge = document.createElement("div");
+    badge.textContent = label || "AI…";
+    badge.style.position = "absolute";
+    badge.style.left = "6px";
+    badge.style.top = "6px";
+    badge.style.padding = "4px 6px";
+    badge.style.borderRadius = "6px";
+    badge.style.background = "rgba(255,255,255,.75)";
+    badge.style.color = "rgba(20,20,20,.95)";
+    badge.style.fontFamily = "var(--tp-font,system-ui)";
+    badge.style.fontSize = "12px";
+    badge.style.lineHeight = "1.2";
+    badge.style.textShadow =
+      "0 0 2px rgba(255,255,255,.90),0 1px 1px rgba(0,0,0,.25)";
+    return badge;
+  }
+
+  function extractNewImageSrc(result) {
+    return (
+      result?.imageDataUri ||
+      result?.image ||
+      result?.imageUrl ||
+      result?.image_url ||
+      result?.imageURL ||
+      null
+    );
+  }
+
+  function ensureCleanLayer(rec) {
+    if (rec?.cleanImg && rec.cleanImg.isConnected) return rec.cleanImg;
+    if (!rec?.host) return null;
+    const img = document.createElement("img");
+    img.className = "tp-ol-clean-img";
+    img.decoding = "sync";
+    img.loading = "eager";
+    img.style.position = "absolute";
+    img.style.left = "0px";
+    img.style.top = "0px";
+    img.style.width = "100%";
+    img.style.height = "100%";
+    img.style.pointerEvents = "none";
+    img.style.maxWidth = "none";
+    img.style.maxHeight = "none";
+    img.style.objectFit = "contain";
+    img.style.objectPosition = "center center";
+    img.style.display = "none";
+    if (rec.host.firstChild) rec.host.insertBefore(img, rec.host.firstChild);
+    else rec.host.appendChild(img);
+    rec.cleanImg = img;
+    return img;
+  }
+
+  function syncCleanLayerFit(cleanImg, imgElement) {
+    try {
+      const cs = getComputedStyle(imgElement);
+      if (cs?.objectFit) cleanImg.style.objectFit = cs.objectFit;
+      if (cs?.objectPosition) cleanImg.style.objectPosition = cs.objectPosition;
+    } catch {}
+  }
+
+  function updateCleanLayer(rec, imgElement, newSrc) {
+    if (!rec?.host || !imgElement) return;
+    const layer = ensureCleanLayer(rec);
+    if (!layer) return;
+    if (!newSrc) {
+      layer.style.display = "none";
+      return;
+    }
+    syncCleanLayerFit(layer, imgElement);
+    if (layer.src !== newSrc) layer.src = newSrc;
+    layer.style.display = "block";
+  }
+
+  function applyHtmlOverlay(
+    imgElement,
+    result,
+    source,
+    isTextMode,
+    original = "",
+  ) {
+    const aiHtml = result?.Ai?.aihtml || result?.ai?.aihtml || "";
+    const translatedHtml =
+      result?.translated?.translatedhtml || result?.translatedhtml || "";
+    const originalHtml =
+      result?.original?.originalhtml || result?.originalhtml || "";
+
+    const req = String(source || "")
+      .trim()
+      .toLowerCase();
+
+    const chosen = req === "ai" || req === "original" ? req : "translated";
+    const html =
+      chosen === "ai"
+        ? aiHtml
+        : chosen === "original"
+          ? originalHtml
+          : translatedHtml;
+
+    const cssParts = [String(result?.htmlCss || "")];
+    if (chosen === "ai")
+      cssParts.push(
+        String(result?.Ai?.aihtmlCss || result?.ai?.aihtmlCss || ""),
+      );
+    const cssText = Array.from(
+      new Set(cssParts.map((s) => String(s || "").trim()).filter(Boolean)),
+    ).join("\n");
+
+    const meta =
+      chosen === "ai"
+        ? result?.Ai?.aihtmlMeta || result?.ai?.aihtmlMeta || {}
+        : result?.htmlMeta || {};
+
+    const baseW =
+      Number(meta.baseW || meta.sourceWidth) ||
+      imgElement.naturalWidth ||
+      imgElement.width ||
+      1;
+    const baseH =
+      Number(meta.baseH || meta.sourceHeight) ||
+      imgElement.naturalHeight ||
+      imgElement.height ||
+      1;
+
+    const newImgSrc = isTextMode ? extractNewImageSrc(result) : null;
+
+    log.debug("OVERLAY_HTML", {
+      source: req,
+      chosen,
+      aiHtmlLen: aiHtml ? String(aiHtml).length : 0,
+      translatedHtmlLen: translatedHtml ? String(translatedHtml).length : 0,
+      originalHtmlLen: originalHtml ? String(originalHtml).length : 0,
+      baseW,
+      baseH,
+    });
+
+    ensureOverlayStyle(cssText);
+
+    const mdKey = isMangaDexHost() ? mdGetKeyForImg(imgElement) : "";
+    if (mdKey) {
+      if (isTextMode && req === "ai" && !aiHtml) {
+        const rec = upsertMangaDexHtmlOverlay(
+          mdKey,
+          imgElement,
+          baseW,
+          baseH,
+          "badge",
+        );
+        updateCleanLayer(rec, imgElement, newImgSrc);
+        rec.scope.textContent = "";
+        const aiMeta = (result && result.Ai && result.Ai.meta) || {};
+        const reason = String(
+          aiMeta.skipped_reason || aiMeta.reason || "",
+        ).trim();
+        const badgeText =
+          reason === "no_text"
+            ? "No text"
+            : reason === "rate_limited"
+              ? "Rate limit"
+              : "AI…";
+        rec.scope.appendChild(createOverlayBadge(badgeText));
+        scheduleMangaDexOverlayUpdate();
+        if (!imgElement.complete) {
+          imgElement.addEventListener("load", scheduleMangaDexOverlayUpdate, {
+            once: true,
+            passive: true,
+          });
+        }
+        setTimeout(scheduleMangaDexOverlayUpdate, 50);
+        return;
+      }
+
+      if (!html) {
+        if (isTextMode && newImgSrc) {
+          const rec = upsertMangaDexHtmlOverlay(
+            mdKey,
+            imgElement,
+            baseW,
+            baseH,
+            "badge",
+          );
+          updateCleanLayer(rec, imgElement, newImgSrc);
+          rec.scope.textContent = "";
+          scheduleMangaDexOverlayUpdate();
+          if (!imgElement.complete) {
+            imgElement.addEventListener("load", scheduleMangaDexOverlayUpdate, {
+              once: true,
+              passive: true,
+            });
+          }
+          setTimeout(scheduleMangaDexOverlayUpdate, 50);
+          return;
+        }
+        hideMangaDexHtmlOverlay(mdKey);
+        return;
+      }
+
+      const rec = upsertMangaDexHtmlOverlay(
+        mdKey,
+        imgElement,
+        baseW,
+        baseH,
+        "html",
+      );
+      updateCleanLayer(rec, imgElement, newImgSrc);
+      rec.scope.textContent = "";
+      const tmp = document.createElement("div");
+      tmp.innerHTML = String(html || "")
+        .replace(/<<TP_P\d+>>/g, "")
+        .replace(/<<TP_P/g, "");
+      while (tmp.firstChild) rec.scope.appendChild(tmp.firstChild);
+      scheduleMangaDexOverlayUpdate();
+      if (!imgElement.complete) {
+        imgElement.addEventListener("load", scheduleMangaDexOverlayUpdate, {
+          once: true,
+          passive: true,
+        });
+      }
+      setTimeout(scheduleMangaDexOverlayUpdate, 50);
+      return;
+    }
+
+    const key = _normUrl(original) || _normUrl(getBestImgUrl(imgElement));
+    if (!key) return;
+
+    if (isTextMode && req === "ai" && !aiHtml) {
+      const rec = upsertHtmlOverlay(key, imgElement, baseW, baseH, "badge");
+      updateCleanLayer(rec, imgElement, newImgSrc);
+      rec.scope.textContent = "";
+      rec.scope.appendChild(createOverlayBadge("AI…"));
+      scheduleHtmlOverlayUpdate();
+      if (!imgElement.complete) {
+        imgElement.addEventListener("load", scheduleHtmlOverlayUpdate, {
+          once: true,
+          passive: true,
+        });
+      }
+      setTimeout(scheduleHtmlOverlayUpdate, 50);
+      return;
+    }
+
+    if (!html) {
+      if (isTextMode && newImgSrc) {
+        const rec = upsertHtmlOverlay(key, imgElement, baseW, baseH, "badge");
+        updateCleanLayer(rec, imgElement, newImgSrc);
+        rec.scope.textContent = "";
+        scheduleHtmlOverlayUpdate();
+        if (!imgElement.complete) {
+          imgElement.addEventListener("load", scheduleHtmlOverlayUpdate, {
+            once: true,
+            passive: true,
+          });
+        }
+        setTimeout(scheduleHtmlOverlayUpdate, 50);
+        return;
+      }
+      hideHtmlOverlay(key);
+      return;
+    }
+
+    const rec = upsertHtmlOverlay(key, imgElement, baseW, baseH, "html");
+    updateCleanLayer(rec, imgElement, newImgSrc);
+    rec.scope.textContent = "";
+    const tmp = document.createElement("div");
+    tmp.innerHTML = String(html || "")
+      .replace(/<<TP_P\d+>>/g, "")
+      .replace(/<<TP_P/g, "");
+    while (tmp.firstChild) rec.scope.appendChild(tmp.firstChild);
+    scheduleHtmlOverlayUpdate();
+    if (!imgElement.complete) {
+      imgElement.addEventListener("load", scheduleHtmlOverlayUpdate, {
+        once: true,
+        passive: true,
+      });
+    }
+    setTimeout(scheduleHtmlOverlayUpdate, 50);
+    emitViewerEvent("textphantom:overlay-updated", {
+      original,
+      result,
+      mode: isTextMode ? "lens_text" : "lens_images",
+      source: req,
+    });
+  }
+
+  function buildPayload(
+    { original_image_url, position, imageDataUri },
+    mode,
+    lang,
+    menuSource = "page_scan",
+    customStage,
+  ) {
+    const pipeline = customStage
+      ? [buildPipelineEvent(customStage)]
+      : [buildPipelineEvent("collected")];
+
+    const payload = {
+      mode,
+      lang,
+      type: "image",
+      src: original_image_url || null,
+      imageDataUri: imageDataUri || null,
+      menu: menuSource,
+      context: {
+        page_url: location.href,
+        timestamp: new Date().toISOString(),
+      },
+      metadata: {
+        image_id: crypto.randomUUID(),
+        original_image_url: original_image_url || null,
+        position,
+        pipeline,
+        ocr_image: null,
+        extra: null,
+      },
+    };
+    log.info("Built payload", {
+      src: truncate(original_image_url),
+      hasData: Boolean(imageDataUri),
+      menu: menuSource,
+      mode,
+      lang,
+    });
+    return payload;
+  }
+
+  function mdKeyFromUrl(u) {
+    const s = _normUrl(u);
+    if (!s) return "";
+    try {
+      const x = new URL(s, location.href);
+      const parts = String(x.pathname || "")
+        .split("/")
+        .filter(Boolean);
+      for (let i = parts.length - 1; i >= 0; i--) {
+        const p = parts[i];
+        if (p === "data" || p === "data-saver") {
+          if (parts.length >= i + 3)
+            return `md:${parts[i]}/${parts[i + 1]}/${parts[i + 2]}`;
+          break;
+        }
+      }
+      return "";
+    } catch {
+      return "";
+    }
+  }
+
+  const mdPendingByOriginal = new Map();
+
+  function mdPendingTrim(maxSize = 80) {
+    if (mdPendingByOriginal.size <= maxSize) return;
+    const items = Array.from(mdPendingByOriginal.entries()).sort(
+      (a, b) => (a[1]?.ts || 0) - (b[1]?.ts || 0),
+    );
+    const drop = Math.max(0, items.length - maxSize);
+    for (let i = 0; i < drop; i++) mdPendingByOriginal.delete(items[i][0]);
+  }
+
+  function mdRememberPending(original, patch) {
+    const key = mdKeyFromUrl(original) || _normUrl(original);
+    if (!key) return;
+    const prev = mdPendingByOriginal.get(key) || {};
+    mdPendingByOriginal.set(key, { ...prev, ...(patch || {}), ts: Date.now() });
+    mdPendingTrim();
+  }
+
+  function mdTakePending(key) {
+    const v = mdPendingByOriginal.get(key);
+    if (v) mdPendingByOriginal.delete(key);
+    return v || null;
+  }
+
+  function isMangaDexHost() {
+    return /(^|\.)mangadex\.org$/i.test(String(location.hostname || ""));
+  }
+
+  function getMangaDexChapterId() {
+    const m = String(location.pathname || "").match(
+      /\/chapter\/([a-f0-9-]{8,})/i,
+    );
+    return m ? m[1] : "";
+  }
+
+  function getMangaDexPageIndexFromUrl() {
+    const parts = String(location.pathname || "")
+      .split("/")
+      .filter(Boolean);
+    const ci = parts.indexOf("chapter");
+    if (ci >= 0 && parts.length >= ci + 3) {
+      const p = parts[ci + 2];
+      if (/^\d+$/.test(p)) return Math.max(0, Number(p) - 1);
+    }
+    try {
+      const qs = new URLSearchParams(String(location.search || ""));
+      const q = qs.get("page") || qs.get("p");
+      if (q && /^\d+$/.test(q)) return Math.max(0, Number(q) - 1);
+    } catch {}
+    const hm = String(location.hash || "").match(/(?:^|[?#&])page=(\d+)/i);
+    if (hm) return Math.max(0, Number(hm[1]) - 1);
+    return null;
+  }
+
+  const MD_CACHE_TTL_MS = 180000;
+  let mdCache = null;
+
+  async function fetchMangaDexChapterUrls() {
+    if (!isMangaDexHost()) return null;
+
+    const chapterId = getMangaDexChapterId();
+    if (!chapterId) return null;
+
+    const now = Date.now();
+    if (
+      mdCache &&
+      mdCache.chapterId === chapterId &&
+      now - (mdCache.ts || 0) < MD_CACHE_TTL_MS &&
+      Array.isArray(mdCache.urls) &&
+      mdCache.urls.length
+    )
+      return mdCache;
+
+    const apiUrl = `https://api.mangadex.org/at-home/server/${chapterId}`;
+
+    try {
+      const res = await fetch(apiUrl, { credentials: "omit" });
+      if (!res.ok) throw new Error(`MangaDex API ${res.status}`);
+      const baseInfo = await res.json();
+
+      const baseUrl = baseInfo?.baseUrl;
+      const chapter = baseInfo?.chapter;
+      const hash = chapter?.hash;
+
+      const data = Array.isArray(chapter?.data) ? chapter.data : [];
+      const dataSaver = Array.isArray(chapter?.dataSaver)
+        ? chapter.dataSaver
+        : [];
+
+      let path = "data";
+      let files = data;
+      if (!files.length && dataSaver.length) {
+        path = "data-saver";
+        files = dataSaver;
+      }
+
+      if (!baseUrl || !hash || !files.length)
+        throw new Error("Unexpected MangaDex API shape");
+
+      const urls = files.map(
+        (filename) => `${baseUrl}/${path}/${hash}/${filename}`,
+      );
+
+      mdCache = { chapterId, ts: now, urls, path };
+      return mdCache;
+    } catch (e) {
+      console.warn(
+        "[TextPhantom][content] MangaDex API error",
+        e?.message || e,
+      );
+      mdCache = { chapterId, ts: now, urls: [], path: "data" };
+      return null;
+    }
+  }
+
+  async function hydrateMangaDexFromCache() {
+    if (!isMangaDexHost() || !__tpIsTop) return null;
+
+    const info = await fetchMangaDexChapterUrls();
+    const urls = info?.urls;
+    if (!Array.isArray(urls) || !urls.length) return null;
+
+    const pairs = urls
+      .map((u) => ({ url: u, key: mdKeyFromUrl(u) }))
+      .filter((p) => !!p.key);
+    const keys = Array.from(new Set(pairs.map((p) => p.key))).slice(0, 600);
+    if (!keys.length) return null;
+
+    const st = await getSettings();
+
+    const resp = await mdCacheGet(keys, false, st.lang, st.mode);
+
+    const items = resp?.items || null;
+    if (!items) return null;
+    const isText = String(st.mode || "lens_text") === "lens_text";
+    const source = isText ? String(st.sources || "translated") : "translated";
+
+    for (const p of pairs) {
+      const rec = items[p.key];
+      if (!rec) continue;
+
+      if (rec.result) {
+        const img = findTargetImage(p.url);
+        if (img) applyHtmlOverlay(img, rec.result, source, isText, p.url);
+        else
+          mdRememberPending(p.url, {
+            overlay: { result: rec.result, source, isTextMode: isText },
+          });
+      }
+
+      const hasNewImg =
+        Boolean(rec?.hasNewImg) ||
+        Boolean(rec?.newImg) ||
+        Boolean(extractNewImageSrc(rec?.result || null));
+
+      if (hasNewImg) {
+        const img = findTargetImage(p.url);
+        if (img)
+          mdApplyCachedNewImg(p.url, p.key, isText, img, st.lang, st.mode);
+        else
+          mdRememberPending(p.url, {
+            needNewImg: true,
+            needMode: isText ? "clean" : "replace",
+            needLang: st.lang,
+            needCacheMode: st.mode,
+          });
+      }
+    }
+
+    return { pairs, items };
+  }
+
+  function isProbableMangaDexPageImage(img) {
+    if (!img || !img.getBoundingClientRect) return false;
+    const u = String(getBestImgUrl(img) || "");
+    if (!u) return false;
+    const rect = img.getBoundingClientRect();
+    const area = Math.max(0, rect.width) * Math.max(0, rect.height);
+    if (area < 65000 && (rect.width < 260 || rect.height < 260)) return false;
+    if (u.startsWith("blob:") || u.startsWith("data:")) return true;
+    if (/mangadex\.network|uploads\.mangadex\.org/i.test(u)) return true;
+    return false;
+  }
+
+  function getMangaDexPageImagesInDOM() {
+    const root = document;
+    const nodes = Array.from(root.querySelectorAll(".md--page img"));
+    const imgs = nodes.length ? nodes : Array.from(document.images || []);
+    return imgs.filter(isProbableMangaDexPageImage);
+  }
+
+  function inferMangaDexPageIndexForImg(img) {
+    const alt = String(
+      img?.getAttribute?.("alt") || img?.getAttribute?.("aria-label") || "",
+    );
+    const m0 = alt.match(/^\s*(\d+)\s*[-_]/);
+    if (m0) return Math.max(0, Number(m0[1]) - 1);
+    const m1 = alt.match(/(?:^|\D)(\d+)\s*\/\s*(\d+)/);
+    if (m1) return Math.max(0, Number(m1[1]) - 1);
+    const m2 = alt.match(/page\s*(\d+)/i);
+    if (m2) return Math.max(0, Number(m2[1]) - 1);
+
+    const tpPage =
+      img?.dataset?.tpMdPage ||
+      (typeof img?.getAttribute === "function"
+        ? img.getAttribute("data-tp-md-page")
+        : "");
+    if (tpPage && /^\d+$/.test(String(tpPage)))
+      return Math.max(0, Number(tpPage) - 1);
+
+    const key = String(img?.dataset?.tpOriginalKey || "");
+    const km = key.match(/\/(\d+)\s*[-_]/);
+    if (km) return Math.max(0, Number(km[1]) - 1);
+
+    const cur = String(img?.dataset?.tpOriginal || "");
+    const cm = cur.match(/\/(\d+)\s*[-_]/);
+    if (cm) return Math.max(0, Number(cm[1]) - 1);
+
+    const direct =
+      img?.getAttribute?.("data-page") ||
+      img?.dataset?.page ||
+      img?.dataset?.pageIndex ||
+      "";
+    if (direct && /^\d+$/.test(String(direct)))
+      return Math.max(0, Number(direct) - 1);
+
+    const near =
+      img?.closest?.("[data-page]")?.getAttribute?.("data-page") || "";
+    if (near && /^\d+$/.test(String(near)))
+      return Math.max(0, Number(near) - 1);
+
+    return null;
+  }
+
+  function mdApplyOriginalToImg(img, idx, urls) {
+    if (!img || !Array.isArray(urls) || idx == null) return;
+    if (idx < 0 || idx >= urls.length) return;
+    const url = _normUrl(urls[idx]);
+    if (!url) return;
+    const key = mdKeyFromUrl(url) || url;
+    if (img.dataset.tpOriginalKey !== key) img.dataset.tpOriginalKey = key;
+    if (_normUrl(img.dataset.tpOriginal) !== url) img.dataset.tpOriginal = url;
+    img.dataset.tpMdPage = String(idx + 1);
+    const pending = mdTakePending(key);
+    if (pending) {
+      if (pending.newSrc)
+        replaceImageInDOM(url, pending.newSrc).catch(() => {});
+      if (pending.cleanSrc) {
+        const existing = mdHtmlOverlaysByKey.get(key) || null;
+        const rec =
+          existing ||
+          (() => {
+            const rect = img.getBoundingClientRect();
+            const r = upsertMangaDexHtmlOverlay(
+              key,
+              img,
+              Math.max(1, rect.width),
+              Math.max(1, rect.height),
+              "badge",
+            );
+            r.scope.textContent = "";
+            return r;
+          })();
+        rec.isTextMode = true;
+        updateCleanLayer(rec, img, pending.cleanSrc);
+        mdScheduleUpdate();
+      }
+      if (pending.overlay) {
+        try {
+          applyHtmlOverlay(
+            img,
+            pending.overlay.result,
+            pending.overlay.source,
+            pending.overlay.isTextMode,
+            url,
+          );
+        } catch {}
+      }
+      if (pending.needNewImg)
+        mdApplyCachedNewImg(
+          url,
+          key,
+          pending.needMode === "clean",
+          img,
+          pending.needLang,
+          pending.needCacheMode,
+        );
+    }
+  }
+
+  async function ensureMangaDexDomMapping() {
+    if (!isMangaDexHost()) return;
+    const info = await fetchMangaDexChapterUrls();
+    const urls = info?.urls || [];
+    if (!urls.length) return;
+
+    const imgs = getMangaDexPageImagesInDOM();
+    if (!imgs.length) return;
+
+    imgs.forEach((img) => {
+      const idx = inferMangaDexPageIndexForImg(img);
+      if (idx == null) return;
+      mdApplyOriginalToImg(img, idx, urls);
+    });
+  }
+
+  let mdMappingScheduled = false;
+  function scheduleMangaDexMapping() {
+    if (!isMangaDexHost()) return;
+    if (mdMappingScheduled) return;
+    mdMappingScheduled = true;
+    setTimeout(() => {
+      mdMappingScheduled = false;
+      ensureMangaDexDomMapping()
+        .then(() => {
+          if (mdOverlaysByKey.size) scheduleMangaDexOverlayUpdate();
+        })
+        .catch(() => {});
+    }, 60);
+  }
+
+  async function resolveMangaDexOriginalForBlob(blobUrl) {
+    if (!isMangaDexHost()) return null;
+    if (!blobUrl?.startsWith("blob:")) return null;
+
+    scheduleMangaDexMapping();
+    const info = await fetchMangaDexChapterUrls();
+    const urls = info?.urls || [];
+    if (!urls.length) return null;
+
+    const img = Array.from(document.images || []).find(
+      (i) => (i.currentSrc || i.src) === blobUrl,
+    );
+    if (!img) return null;
+
+    if (img.dataset.tpOriginal) return _normUrl(img.dataset.tpOriginal);
+
+    const byAlt = inferMangaDexPageIndexForImg(img);
+    if (byAlt != null) {
+      mdApplyOriginalToImg(img, byAlt, urls);
+      return _normUrl(img.dataset.tpOriginal);
+    }
+
+    const byUrl = getMangaDexPageIndexFromUrl();
+    if (byUrl != null) {
+      mdApplyOriginalToImg(img, byUrl, urls);
+      return _normUrl(img.dataset.tpOriginal);
+    }
+
+    const pageImgs = getMangaDexPageImagesInDOM();
+    const pos = pageImgs.indexOf(img);
+    if (pos >= 0) {
+      mdApplyOriginalToImg(img, pos, urls);
+      return _normUrl(img.dataset.tpOriginal);
+    }
+
+    return null;
+  }
+
+  let toastEl = null;
+  let toastTimer = 0;
+  function showToast(text, ms = 2000) {
+    if (!text) return;
+    if (!toastEl) {
+      toastEl = document.createElement("div");
+      toastEl.style.position = "fixed";
+      toastEl.style.right = "10px";
+      toastEl.style.bottom = "10px";
+      toastEl.style.zIndex = 2147483647;
+      toastEl.style.padding = "8px 10px";
+      toastEl.style.borderRadius = "10px";
+      toastEl.style.background = "rgba(0,0,0,.75)";
+      toastEl.style.color = "#fff";
+      toastEl.style.fontSize = "12px";
+      toastEl.style.lineHeight = "1.2";
+      toastEl.style.maxWidth = "68vw";
+      toastEl.style.pointerEvents = "none";
+      document.documentElement.appendChild(toastEl);
+    }
+    toastEl.textContent = String(text);
+    toastEl.style.display = "block";
+    if (toastTimer) clearTimeout(toastTimer);
+    toastTimer = setTimeout(
+      () => {
+        if (toastEl) toastEl.style.display = "none";
+      },
+      Math.max(800, Number(ms) || 0),
+    );
+  }
+
+  if (isMangaDexHost() && __tpIsTop) {
+    scheduleMangaDexMapping();
+    try {
+      const mo = new MutationObserver(() => scheduleMangaDexMapping());
+      mo.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["src", "srcset", "data-src", "alt", "aria-label"],
+      });
+      window.addEventListener("popstate", () => {
+        mdCache = null;
+        scheduleMangaDexMapping();
+      });
+      window.addEventListener("hashchange", () => {
+        mdCache = null;
+        scheduleMangaDexMapping();
+      });
+
+      if (!history.__tpMdPatched) {
+        history.__tpMdPatched = true;
+        const ps = history.pushState;
+        history.pushState = function (...args) {
+          const r = ps.apply(this, args);
+          scheduleMangaDexMapping();
+          return r;
+        };
+        const rs = history.replaceState;
+        history.replaceState = function (...args) {
+          const r = rs.apply(this, args);
+          scheduleMangaDexMapping();
+          return r;
+        };
+      }
+    } catch {}
+  }
+
+  async function dataUriToBlobUrl(dataUri) {
+    try {
+      const res = await fetch(dataUri);
+      const blob = await res.blob();
+      return URL.createObjectURL(blob);
+    } catch {
+      return null;
+    }
+  }
+
+  const mdOverlaysByKey = new Map();
+  const mdHtmlOverlaysByKey = new Map();
+  let mdOverlayRaf = 0;
+
+  const htmlOverlaysByKey = new Map();
+  let htmlOverlayRaf = 0;
+
+  function updateHtmlOverlays() {
+    if (!htmlOverlaysByKey.size) return;
+    for (const [key, rec] of htmlOverlaysByKey.entries()) {
+      const host = rec?.host;
+      const scope = rec?.scope;
+      if (!host || !scope) {
+        htmlOverlaysByKey.delete(key);
+        continue;
+      }
+
+      const prevImg = rec.img;
+      let img = prevImg;
+      if (!img || !img.isConnected) img = findTargetImage(key);
+      if (!img) {
+        host.style.display = "none";
+        rec.img = null;
+        continue;
+      }
+
+      const curKey = _normUrl(getBestImgUrl(img));
+      if (curKey && curKey !== key) {
+        host.style.display = "none";
+        rec.img = null;
+        continue;
+      }
+
+      if (img !== prevImg) {
+        if (img?.dataset) img.dataset.tpOriginal = key;
+        if (rec.ro) {
+          try {
+            rec.ro.disconnect();
+          } catch {}
+        }
+        rec.ro = new ResizeObserver(() => scheduleHtmlOverlayUpdate());
+        rec.ro.observe(img);
+      }
+
+      const parent = ensureOverlayHostMountedNearImage(rec, img);
+      if (!parent) {
+        host.style.display = "none";
+        rec.img = img;
+        continue;
+      }
+
+      const { r, left, top } = getOverlayBoxFromParent(img, parent);
+      if (r.width < 2 || r.height < 2) {
+        host.style.display = "none";
+        rec.img = img;
+        continue;
+      }
+
+      rec.img = img;
+      host.style.display = "block";
+      host.style.setProperty("left", `${left}px`, "important");
+      host.style.setProperty("top", `${top}px`, "important");
+      host.style.setProperty("width", `${r.width}px`, "important");
+      host.style.setProperty("height", `${r.height}px`, "important");
+
+      if (rec.kind === "badge") {
+        scope.style.width = `${r.width}px`;
+        scope.style.height = `${r.height}px`;
+        scope.style.transform = "";
+        scope.style.transformOrigin = "0 0";
+        host.style.transform = "";
+        host.style.transformOrigin = "";
+        continue;
+      }
+
+      const { nw, nh, sx, sy, offX, offY } = computeScale(
+        img,
+        rec.baseW,
+        rec.baseH,
+        true,
+      );
+
+      scope.style.width = `${nw}px`;
+      scope.style.height = `${nh}px`;
+      scope.style.transform = `translate(${offX}px, ${offY}px) scale(${sx}, ${sy})`;
+      scope.style.transformOrigin = "0 0";
+      host.style.transform = "";
+      host.style.transformOrigin = "";
+    }
+  }
+
+  function scheduleHtmlOverlayUpdate() {
+    if (htmlOverlayRaf) return;
+    htmlOverlayRaf = requestAnimationFrame(() => {
+      htmlOverlayRaf = 0;
+      updateHtmlOverlays();
+    });
+  }
+
+  function ensureOverlayHostMountedNearImage(rec, img) {
+    const host = rec?.host;
+    if (!host || !img?.isConnected) return null;
+    const parent = img.parentElement;
+    if (!parent) return null;
+
+    if (host.parentElement !== parent || host.nextSibling !== img) {
+      try {
+        if (host.parentElement) host.parentElement.removeChild(host);
+      } catch {}
+      try {
+        parent.insertBefore(host, img);
+      } catch {
+        try {
+          parent.appendChild(host);
+        } catch {}
+      }
+    }
+
+    try {
+      if (getComputedStyle(parent).position === "static") {
+        parent.style.position = "relative";
+      }
+    } catch {}
+
+    return host.parentElement === parent ? parent : null;
+  }
+
+  function getOverlayBoxFromParent(img, parent) {
+    const r = img.getBoundingClientRect();
+    if (!parent) return { r, left: 0, top: 0 };
+    const pr = parent.getBoundingClientRect();
+    return {
+      r,
+      left: r.left - pr.left + (parent.scrollLeft || 0),
+      top: r.top - pr.top + (parent.scrollTop || 0),
+    };
+  }
+
+  function ensureHtmlOverlayListeners() {
+    if (window.__tpHtmlOverlayListeners) return;
+    window.__tpHtmlOverlayListeners = true;
+    window.addEventListener("scroll", scheduleHtmlOverlayUpdate, {
+      passive: true,
+      capture: true,
+    });
+    window.addEventListener("resize", scheduleHtmlOverlayUpdate, {
+      passive: true,
+    });
+    try {
+      const mo = new MutationObserver(() => scheduleHtmlOverlayUpdate());
+      mo.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["src", "srcset", "data-src", "data-srcset", "style", "class"],
+      });
+    } catch {}
+  }
+
+  function upsertHtmlOverlay(key, img, baseW, baseH, kind) {
+    let rec = htmlOverlaysByKey.get(key);
+    if (!rec) {
+      const host = document.createElement("div");
+      host.className = "tp-ol-root";
+      host.style.position = "absolute";
+      host.style.left = "0px";
+      host.style.top = "0px";
+      host.style.zIndex = 2147483647;
+      host.style.pointerEvents = "none";
+      host.style.display = "none";
+      const scope = document.createElement("div");
+      scope.className = "tp-ol-scope";
+      scope.style.position = "relative";
+      host.appendChild(scope);
+      rec = {
+        host,
+        scope,
+        img: null,
+        baseW: 1,
+        baseH: 1,
+        kind: "html",
+        ro: null,
+      };
+      htmlOverlaysByKey.set(key, rec);
+      ensureHtmlOverlayListeners();
+    }
+
+    if (img) ensureOverlayHostMountedNearImage(rec, img);
+    rec.img = img;
+    rec.baseW = Number.isFinite(baseW) && baseW > 0 ? baseW : 1;
+    rec.baseH = Number.isFinite(baseH) && baseH > 0 ? baseH : 1;
+    rec.kind = kind || "html";
+    if (img?.dataset && !img.dataset.tpOriginal) img.dataset.tpOriginal = key;
+    if (rec.ro) {
+      try {
+        rec.ro.disconnect();
+      } catch {}
+    }
+    rec.ro = new ResizeObserver(() => scheduleHtmlOverlayUpdate());
+    rec.ro.observe(img);
+    return rec;
+  }
+
+  function hideHtmlOverlay(key) {
+    const rec = htmlOverlaysByKey.get(key);
+    if (rec?.cleanImg) rec.cleanImg.style.display = "none";
+    if (rec?.host) rec.host.style.display = "none";
+  }
+
+  function findMangaDexImgByKey(key) {
+    if (!key) return null;
+    return Array.from(document.images || []).find(
+      (img) => String(img.dataset.tpOriginalKey || "") === key,
+    );
+  }
+
+  function updateMangaDexOverlays() {
+    if (!mdOverlaysByKey.size && !mdHtmlOverlaysByKey.size) return;
+    for (const [key, rec] of mdOverlaysByKey.entries()) {
+      const el = rec?.el;
+      if (!el) {
+        mdOverlaysByKey.delete(key);
+        continue;
+      }
+
+      let img = rec.img;
+      if (!img || !img.isConnected) img = findMangaDexImgByKey(key);
+      if (!img) {
+        el.style.display = "none";
+        rec.img = null;
+        continue;
+      }
+
+      const r = img.getBoundingClientRect();
+      if (r.width < 2 || r.height < 2) {
+        el.style.display = "none";
+        rec.img = img;
+        continue;
+      }
+
+      rec.img = img;
+      el.style.display = "block";
+      el.style.left = `${r.left + window.scrollX}px`;
+      el.style.top = `${r.top + window.scrollY}px`;
+      el.style.width = `${r.width}px`;
+      el.style.height = `${r.height}px`;
+    }
+
+    for (const [key, rec] of mdHtmlOverlaysByKey.entries()) {
+      const host = rec?.host;
+      const scope = rec?.scope;
+      if (!host || !scope) {
+        mdHtmlOverlaysByKey.delete(key);
+        continue;
+      }
+
+      let img = rec.img;
+      if (!img || !img.isConnected) img = findMangaDexImgByKey(key);
+      if (!img) {
+        host.style.display = "none";
+        rec.img = null;
+        continue;
+      }
+
+      const curKey = mdKeyFromUrl(getBestImgUrl(img));
+      if (curKey && curKey !== key) {
+        host.style.display = "none";
+        rec.img = null;
+        continue;
+      }
+
+      const parent = ensureOverlayHostMountedNearImage(rec, img);
+      if (!parent) {
+        host.style.display = "none";
+        rec.img = img;
+        continue;
+      }
+
+      const { r, left, top } = getOverlayBoxFromParent(img, parent);
+      if (r.width < 2 || r.height < 2) {
+        host.style.display = "none";
+        rec.img = img;
+        continue;
+      }
+
+      rec.img = img;
+      host.style.display = "block";
+      host.style.setProperty("left", `${left}px`, "important");
+      host.style.setProperty("top", `${top}px`, "important");
+      host.style.setProperty("width", `${r.width}px`, "important");
+      host.style.setProperty("height", `${r.height}px`, "important");
+
+      if (rec.kind === "badge") {
+        scope.style.width = `${r.width}px`;
+        scope.style.height = `${r.height}px`;
+        scope.style.transform = "";
+        scope.style.transformOrigin = "0 0";
+        host.style.transform = "";
+        host.style.transformOrigin = "";
+        continue;
+      }
+
+      const { nw, nh, sx, sy, offX, offY, transform, transformOrigin } =
+        computeScale(img, rec.baseW, rec.baseH, true);
+
+      scope.style.width = `${nw}px`;
+      scope.style.height = `${nh}px`;
+      scope.style.transform = `translate(${offX}px, ${offY}px) scale(${sx}, ${sy})`;
+      scope.style.transformOrigin = "0 0";
+
+      if (transform && transform !== "none") {
+        host.style.transform = transform;
+        host.style.transformOrigin = transformOrigin || "0 0";
+      } else {
+        host.style.transform = "";
+        host.style.transformOrigin = "";
+      }
+    }
+  }
+
+  function mdScheduleUpdate() {
+    scheduleMangaDexOverlayUpdate();
+  }
+
+  function scheduleMangaDexOverlayUpdate() {
+    if (mdOverlayRaf) return;
+    mdOverlayRaf = requestAnimationFrame(() => {
+      mdOverlayRaf = 0;
+      updateMangaDexOverlays();
+    });
+  }
+
+  function ensureMangaDexOverlayListeners() {
+    if (window.__tpMdOverlayListeners) return;
+    window.__tpMdOverlayListeners = true;
+    window.addEventListener("scroll", scheduleMangaDexOverlayUpdate, {
+      passive: true,
+    });
+    window.addEventListener("resize", scheduleMangaDexOverlayUpdate, {
+      passive: true,
+    });
+    try {
+      const mo = new MutationObserver(() => scheduleMangaDexOverlayUpdate());
+      mo.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ["src", "srcset", "data-src", "data-srcset", "style", "class"],
+      });
+    } catch {}
+  }
+
+  function mdGetKeyForImg(img) {
+    const k = String(img?.dataset?.tpOriginalKey || "");
+    if (k) return k;
+    const u = String(img?.dataset?.tpOriginal || "");
+    return mdKeyFromUrl(u);
+  }
+
+  function upsertMangaDexHtmlOverlay(mdKey, img, baseW, baseH, kind) {
+    let rec = mdHtmlOverlaysByKey.get(mdKey);
+    if (!rec) {
+      const host = document.createElement("div");
+      host.className = "tp-ol-root";
+      host.style.zIndex = 2147483647;
+      host.style.pointerEvents = "none";
+      host.style.display = "none";
+      const scope = document.createElement("div");
+      scope.className = "tp-ol-scope";
+      host.appendChild(scope);
+      rec = { host, scope, img: null, baseW: 1, baseH: 1, kind: "html" };
+      mdHtmlOverlaysByKey.set(mdKey, rec);
+      ensureMangaDexOverlayListeners();
+    }
+
+    if (img) ensureOverlayHostMountedNearImage(rec, img);
+    rec.img = img;
+    rec.baseW = Number.isFinite(baseW) && baseW > 0 ? baseW : 1;
+    rec.baseH = Number.isFinite(baseH) && baseH > 0 ? baseH : 1;
+    rec.kind = kind || "html";
+    return rec;
+  }
+
+  function hideMangaDexHtmlOverlay(mdKey) {
+    const rec = mdHtmlOverlaysByKey.get(mdKey);
+    if (rec?.cleanImg) rec.cleanImg.style.display = "none";
+    if (rec?.host) rec.host.style.display = "none";
+  }
+
+  async function replaceMangaDexImageWithOverlay(original, newSrc) {
+    const mdKey = mdKeyFromUrl(original);
+    if (!mdKey) return 0;
+
+    let img = findMangaDexImgByKey(mdKey);
+    if (!img) img = findTargetImage(original);
+    if (!img) {
+      log.warn("REPLACE_IMAGE target not found", {
+        original: truncate(original),
+      });
+      return 0;
+    }
+
+    img.dataset.tpOriginalKey = mdKey;
+    const key = _normUrl(original);
+    if (key) img.dataset.tpOriginal = key;
+    noteReplaceState(original, "pending");
+
+    let rec = mdOverlaysByKey.get(mdKey);
+    if (!rec) {
+      const el = document.createElement("img");
+      el.decoding = "sync";
+      el.loading = "eager";
+      el.style.position = "absolute";
+      el.style.zIndex = 2147483647;
+      el.style.pointerEvents = "none";
+      el.style.objectFit = "contain";
+      el.style.maxWidth = "none";
+      el.style.maxHeight = "none";
+      el.style.display = "none";
+      document.documentElement.appendChild(el);
+      rec = { el, img: null, blobUrl: "", original: "" };
+      mdOverlaysByKey.set(mdKey, rec);
+      ensureMangaDexOverlayListeners();
+      el.addEventListener(
+        "load",
+        () => {
+          const okKey = rec.original;
+          if (okKey)
+            replaceStateByOriginal.set(okKey, { state: "ok", ts: Date.now() });
+        },
+        { passive: true },
+      );
+      el.addEventListener(
+        "error",
+        () => {
+          const errKey = rec.original;
+          if (errKey) {
+            replaceStateByOriginal.set(errKey, {
+              state: "fail",
+              ts: Date.now(),
+            });
+            markImageError(errKey, "Failed to load replaced image");
+          }
+        },
+        { passive: true },
+      );
+    }
+
+    rec.img = img;
+    rec.original = _normUrl(original);
+
+    let nextSrc = newSrc;
+    if (typeof newSrc === "string" && newSrc.startsWith("data:")) {
+      const blobUrl = await dataUriToBlobUrl(newSrc);
+      if (blobUrl) nextSrc = blobUrl;
+    }
+
+    if (
+      rec.blobUrl &&
+      rec.blobUrl.startsWith("blob:") &&
+      rec.blobUrl !== nextSrc
+    ) {
+      try {
+        URL.revokeObjectURL(rec.blobUrl);
+      } catch {}
+    }
+    rec.blobUrl =
+      typeof nextSrc === "string" && nextSrc.startsWith("blob:") ? nextSrc : "";
+    rec.el.src = nextSrc;
+
+    scheduleMangaDexOverlayUpdate();
+    return 1;
+  }
+
+  async function replaceImageInDOM(original, newSrc) {
+    if (isMangaDexHost() && mdKeyFromUrl(original))
+      return replaceMangaDexImageWithOverlay(original, newSrc);
+
+    const img = findTargetImage(original);
+    if (!img) {
+      log.warn("REPLACE_IMAGE target not found", {
+        original: truncate(original),
+      });
+      return 0;
+    }
+
+    const mdKey = mdKeyFromUrl(original);
+    if (mdKey) img.dataset.tpOriginalKey = mdKey;
+    const key = _normUrl(original);
+    if (key) img.dataset.tpOriginal = key;
+    noteReplaceState(original, "pending");
+
+    if (!img.dataset.tpReplaceTracked) {
+      img.dataset.tpReplaceTracked = "1";
+      img.addEventListener(
+        "load",
+        () => {
+          const k = _normUrl(img.dataset.tpOriginal);
+          if (k) replaceStateByOriginal.set(k, { state: "ok", ts: Date.now() });
+        },
+        { passive: true },
+      );
+      img.addEventListener(
+        "error",
+        () => {
+          const k = _normUrl(img.dataset.tpOriginal);
+          if (k) {
+            replaceStateByOriginal.set(k, { state: "fail", ts: Date.now() });
+            markImageError(k, "Failed to load replaced image");
+          }
+        },
+        { passive: true },
+      );
+    }
+    const before = img.currentSrc || img.src;
+
+    let nextSrc = newSrc;
+    if (typeof newSrc === "string" && newSrc.startsWith("data:")) {
+      const blobUrl = await dataUriToBlobUrl(newSrc);
+      if (blobUrl) nextSrc = blobUrl;
+    }
+
+    const prevBlob = img.dataset.tpBlobUrl;
+    if (prevBlob && prevBlob.startsWith("blob:")) {
+      try {
+        URL.revokeObjectURL(prevBlob);
+      } catch {}
+      delete img.dataset.tpBlobUrl;
+    }
+    if (typeof nextSrc === "string" && nextSrc.startsWith("blob:")) {
+      img.dataset.tpBlobUrl = nextSrc;
+    }
+
+    img.src = nextSrc;
+    img.removeAttribute("srcset");
+    img.removeAttribute("sizes");
+    img.removeAttribute("data-src");
+    img.removeAttribute("data-srcset");
+    img.removeAttribute("loading");
+    img.decoding = "sync";
+    img.loading = "eager";
+    emitViewerEvent("textphantom:image-updated", {
+      original,
+      newSrc: nextSrc,
+      rawNewSrc: newSrc,
+    });
+    log.info("REPLACE_IMAGE done", {
+      before: truncate(before),
+      original: truncate(original),
+    });
+    return 1;
+  }
+
+  chrome.runtime.onMessage.addListener((msg, _sender, sendResp) => {
+    (async () => {
+      if (msg?.type === "TP_PING") {
+        sendResp({ ok: true });
+        return;
+      }
+      if (msg?.type === "TP_KEEPALIVE_START") {
+        startKeepAlive(msg?.ms);
+        sendResp({ ok: true });
+        return;
+      }
+      if (msg?.type === "TP_KEEPALIVE_STOP") {
+        stopKeepAlive();
+        sendResp({ ok: true });
+        return;
+      }
+      if (msg?.type === "TP_TOAST") {
+        showToast(msg?.text || msg?.message || "", msg?.ms || 1600);
+        sendResp({ ok: true });
+        return;
+      }
+      const { mode, lang } = await getSettings();
+      try {
+        log.debug("MSG", {
+          type: msg?.type,
+          original: truncate(msg?.original),
+        });
+      } catch {}
+      if (
+        msg?.type === "WS_STATUS_UPDATE" ||
+        msg?.type === "API_STATUS_UPDATE"
+      ) {
+        sendResp({ ok: true });
+        return;
+      }
+
+      if (msg.type === "GET_IMAGES") {
+        removeLazyScriptsAndForceSrc();
+        normalizeLazyImages();
+        let infos = [];
+        const isMangaDex = isMangaDexHost();
+
+        if (isMangaDex) {
+          showToast("TextPhantom: loading MangaDex pages…", 2600);
+          scheduleMangaDexMapping();
+          await ensureMangaDexDomMapping();
+          const hyd = await hydrateMangaDexFromCache().catch(() => null);
+          const mdCacheItems = hyd?.items || null;
+          const wantsHtml = String(mode || "").includes("text");
+          const isCachedUrl = (src) => {
+            if (!mdCacheItems) return false;
+            const k = mdKeyFromUrl(String(src || ""));
+            if (!k) return false;
+            const rec = mdCacheItems[k];
+            if (!rec) return false;
+            return wantsHtml ? Boolean(rec.result) : Boolean(rec.hasNewImg);
+          };
+          const seen = new Set();
+          const posBySrc = new Map();
+          getMangaDexPageImagesInDOM().forEach((img) => {
+            const src = _normUrl(getBestImgUrl(img));
+            if (!isHttpish(src) || isCachedUrl(src)) return;
+            if (!posBySrc.has(src))
+              posBySrc.set(src, buildPositionFromElement(img));
+          });
+
+          const md = await fetchMangaDexChapterUrls();
+          const urls = Array.isArray(md?.urls) ? md.urls : [];
+          const all = [];
+
+          for (const src of urls) {
+            const u = _normUrl(src);
+            if (!isHttpish(u) || isCachedUrl(u) || seen.has(u)) continue;
+            seen.add(u);
+            all.push(
+              buildPayload(
+                { original_image_url: u, position: posBySrc.get(u) || null },
+                mode,
+                lang,
+                "page_scan",
+                "collected_mangadex_api",
+              ),
+            );
+          }
+
+          for (const [src, pos] of posBySrc.entries()) {
+            if (!isHttpish(src) || isCachedUrl(src) || seen.has(src)) continue;
+            seen.add(src);
+            all.push(
+              buildPayload(
+                { original_image_url: src, position: pos || null },
+                mode,
+                lang,
+                "page_scan",
+                "collected_mangadex_dom",
+              ),
+            );
+          }
+
+          infos = all.filter(Boolean);
+        } else {
+          infos = await collectImagesForScan(mode, lang, "page_scan");
+        }
+
+        log.info("GET_IMAGES", {
+          returned: infos.length,
+          host: location.host,
+          href: location.href,
+        });
+        sendResp(infos);
+        return;
+      }
+
+      if (msg.type === "GET_CONTEXT_IMAGE_PAYLOAD") {
+        const img =
+          __tp_lastRightClick.img && __tp_lastRightClick.img.isConnected
+            ? __tp_lastRightClick.img
+            : null;
+        const payload = img
+          ? await buildPayloadFromImage(
+              img,
+              mode,
+              lang,
+              "img_one",
+              "context_menu_single",
+              true,
+            )
+          : null;
+        sendResp({ ok: Boolean(payload), payload });
+        return;
+      }
+
+      if (msg.type === "REPLACE_IMAGE") {
+        const { original, newSrc } = msg;
+        log.info("REPLACE_IMAGE request", { original: truncate(original) });
+        const applied = await replaceImageInDOM(original, newSrc);
+        if (!applied && isMangaDexHost())
+          mdRememberPending(original, { newSrc });
+        sendResp({ ok: true, applied: !!applied });
+        return;
+      }
+
+      if (msg.type === "RESOLVE_AND_REPLACE_MANGADEX_BLOB") {
+        const real = await resolveMangaDexOriginalForBlob(msg.blobUrl);
+        sendResp({ resolved: real });
+        return;
+      }
+
+      if (msg.type === "IMAGE_ERROR") {
+        const original = msg.original;
+        const message = msg.message;
+        const isNoOverlay = /no overlay data/i.test(String(message || ""));
+        setTimeout(() => {
+          if (isNoOverlay)
+            log.warn("overlay.noData", { original: truncate(original) });
+          if (shouldShowReplaceError(original)) {
+            markImageError(
+              original,
+              isNoOverlay ? "No text detected" : message,
+            );
+          } else {
+            log.debug("IMAGE_ERROR skipped (image replaced)", {
+              original: truncate(original),
+            });
+          }
+        }, 1200);
+        sendResp({ ok: true });
+        return;
+      }
+
+      if (msg.type === "OVERLAY_HTML") {
+        try {
+          const mode = typeof msg?.mode === "string" ? msg.mode : "";
+          if (!mode) {
+            log.warn("OVERLAY_HTML missing mode", {
+              original: truncate(msg.original),
+            });
+            sendResp({ ok: true, ignored: true });
+            return;
+          }
+          const isText = mode === "lens_text";
+          const source = isText
+            ? String(msg?.source || "")
+                .trim()
+                .toLowerCase()
+            : "translated";
+          if (isText && !source) {
+            log.warn("OVERLAY_HTML missing source", {
+              original: truncate(msg.original),
+            });
+            sendResp({ ok: true, ignored: true });
+            return;
+          }
+          const img = findTargetImage(msg.original);
+
+          if (img) {
+            applyHtmlOverlay(img, msg.result, source, isText, msg.original);
+            log.info("OVERLAY_HTML applied", {
+              original: truncate(msg.original),
+            });
+          } else if (isMangaDexHost()) {
+            mdRememberPending(msg.original, {
+              overlay: { result: msg.result, source, isTextMode: isText },
+            });
+          }
+        } catch (e) {
+          console.warn("[LensOCR content] OVERLAY_HTML failed", e);
+        }
+        sendResp({ ok: true });
+        return;
+      }
+      sendResp({ ok: true, ignored: true });
+    })();
+    return true;
+  });
+})();

__init__.py

@@ -0,0 +1,103 @@
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub-pink?logo=githubsponsors)](https://github.com/sponsors/Kuju29)
+
+*Note: ผมทำอีกโปรเจคอยู่ เดี๋ยวกลับมาอัพเดตแก้ปัญหาที่มีอยู่ครับ มันต้องไปแก้ตั้งแต่การแกะโครงสร้างเวลา ai แปลเลยต้องรอให้ว่างจริงๆ อัพเดตรอบต่อไปจะใช้ claude ai โค๊ดขยะน่าจะน้อยลงและเป็นมิตรกับระบบมากขึ้น* 
+
+![Desktop2026 02 06-08 11 52 01-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/43cc9a1e-eb79-46f0-b4a1-08ca9bcd49f5)
+
+# ✨ TextPhantomOCR Overlay 
+[![Installation](https://img.shields.io/badge/-Installation-red.svg?logo=youtube&labelColor=555555&style=for-the-badge)](https://www.youtube.com/watch?v=WQ7p7zsz_kc "Installation Guide") [![Run API Online](https://img.shields.io/badge/-Run_API_Online-blue.svg?logo=youtube&labelColor=555555&style=for-the-badge)](https://www.youtube.com/watch?v=NMHwaI8mn4c "Run API Online")
+
+## 📥 Download & Install Options
+
+| Version  | Extension Download | API Download | Note |
+|----------|-------------------|--------------|------|
+| [Chrome Web Store](https://chromewebstore.google.com/detail/cjbaepobgmickhgebgagklfcfacbbpem?utm_source=item-share-cb) | [![Install Extension](https://img.shields.io/badge/Install%20from-Chrome%20Web%20Store-yellow?logo=googlechrome)](https://chromewebstore.google.com/detail/cjbaepobgmickhgebgagklfcfacbbpem?utm_source=item-share-cb) | [![Run API from Hugging Face](https://img.shields.io/badge/Run%20API%20from-Hugging%20Face-blue?logo=huggingface)](https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main) | Easiest option, but still requires API |
+| **[v3.0.0](https://github.com/Kuju29/TextPhantomOCR_Overlay/tree/v3.0.0)** | [![Install Extension](https://img.shields.io/badge/Download%20ZIP%20from-Source%20Code-yellow?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/archive/refs/heads/main.zip) | [![Run API from Hugging Face](https://img.shields.io/badge/Run%20API%20from-Hugging%20Face-blue?logo=huggingface)](https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main) | Manual install |
+| **[v2.0.2](https://github.com/Kuju29/TextPhantomOCR_Overlay/tree/backup_V2.0.2)** | [![Install Extension](https://img.shields.io/badge/Download%20ZIP%20from-Source%20Code-yellow?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/archive/refs/heads/main.zip) | [![Download API](https://img.shields.io/badge/Download-API%20v2.0.2-blue?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/releases/tag/v2.0.2) | Manual install |
+| **[v1.0.1](https://github.com/Kuju29/TextPhantomOCR_Overlay/tree/v1.0.1)** | [![Install Extension](https://img.shields.io/badge/Download%20ZIP%20from-Source%20Code-yellow?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/archive/refs/tags/v1.0.1.zip) | [![Download API](https://img.shields.io/badge/Download-API%20v1.0.1-blue?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/releases/tag/v1.0.1) | Manual install |
+
+## 🧩 1. Extension Installation
+
+#### **Option – Chrome Web Store**
+1. Install from [Chrome Web Store](https://chromewebstore.google.com/detail/cjbaepobgmickhgebgagklfcfacbbpem?utm_source=item-share-cb).  
+
+#### **Option – Manual Install**
+1. Download and extract the **Source Code** for your version.  
+2. Open Chrome → Go to `chrome://extensions/`.  
+3. Enable **Developer Mode** (top right).  
+4. Click **Load unpacked**.  
+5. Select the extracted folder.  
+
+## 🌐 2. Using the API on Hugging Face (Run API for v3.0.0)
+1. Go to: [https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main](https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main)
+2. Click the **three dots** in the top-right and select **Duplicate this Space**.
+3. The build will start automatically — wait until you see **Running**.
+4. Click the **three dots** again and choose **Embed this Space**.
+5. Copy the link and use it in your API extension.
+
+**Notes:**
+* If unused, the Space will shut down automatically within 48 hours.
+* To stop it manually, go to **Settings** and click the small **Pause Space** link.
+* This API works only in **images** mode.
+
+## 🖱️ 3. Getting Started with the Extension
+  - Navigate to the page you want to translate.  
+  - **Right-click** anywhere → choose **🔍 Translate...** from the context menu.
+
+## 🤖 Free AI Option (Hugging Face – Google Gemma)
+
+TextPhantom can use **Google Gemma** models via Hugging Face.  
+This option is **free to start** (you use your own Hugging Face API key).
+
+
+#### Step 1: Enable Access to Gemma Model
+
+Google Gemma models require accepting a license before use.
+
+1. Log in to Hugging Face  
+   https://huggingface.co/login
+
+2. Open the model page  
+   https://huggingface.co/google/gemma-3-27b-it
+
+3. Click **“Agree and access”** (or **“Request access”**)
+
+4. Wait for approval (usually a few minutes)
+
+> You only need to do this **once per account**.
+
+
+#### Step 2: Create a Hugging Face API Key
+
+This API key will be used by TextPhantom to call the AI model.
+
+1. Go to  
+   https://huggingface.co/settings/tokens
+
+2. Click **New token**
+
+3. Set:
+   - **Name**: `textphantom-ai`
+   - **Role**: `Read`
+
+4. Create the token and **copy it**
+5. Required Token Permissions
+When creating your Hugging Face API key, make sure the following permissions are enabled:
+
+- ✅ **Read access to contents of all public gated repos you can access**  
+  Required to use gated models such as **Google Gemma**.
+
+
+## 🖼️ DEMO / UI PREVIEW
+
+<p align="center">
+  <img src="https://github.com/user-attachments/assets/52135c1a-ba52-46e7-9174-9fdd1cc6b26d" width="40%" alt="UI Preview" />
+  <br><br>
+  <img src="https://github.com/user-attachments/assets/6f7beaad-2f92-48bc-a8ef-776a0886a8eb" width="40%" alt="UI Preview" />
+  <br><br>
+  <img src="https://github.com/user-attachments/assets/998e8a9e-ae27-4911-9e59-aef28245f60c" width="100%" alt="Example 1" />
+  <br><br>
+  <img src="https://github.com/user-attachments/assets/205a97d9-718d-4599-8511-ccf63e30691f" width="100%" alt="Example 2" />
+  <br><br>
+  <img src="https://github.com/user-attachments/assets/92427293-8ec7-40c3-b797-a2b27fedb8a6" width="100%" alt="Example 3" />
+</p>

ai_prompt.js

@@ -0,0 +1,1074 @@
+import { normalizeUrl } from "../shared/url.js";
+import { ensureApiDefaults } from "../shared/api_defaults.js";
+import { AI_PROMPT_MAX_CHARS, makePromptKey, migratePromptMap, normalizeAiModel, normalizePrompt } from "../shared/prompt.js";
+import { filterImageFiles, saveLocalSession, sortLocalPages, toLocalPageRecord } from "../shared/local_gallery.js";
+
+const MODES = [
+  { id: "lens_images", name: "Google Lens (image)", needLang: true },
+  { id: "lens_text", name: "Google Lens (text)", needLang: true },
+];
+
+const FALLBACK_LANGS = [
+  { code: "en", name: "English" },
+  { code: "th", name: "Thai" },
+  { code: "ja", name: "Japanese" },
+  { code: "ko", name: "Korean" },
+  { code: "zh-CN", name: "Chinese (Simplified)" },
+  { code: "zh-TW", name: "Chinese (Traditional)" },
+  { code: "vi", name: "Vietnamese" },
+  { code: "id", name: "Indonesian" },
+  { code: "ms", name: "Malay" },
+  { code: "tl", name: "Tagalog" },
+  { code: "fil", name: "Filipino" },
+  { code: "hi", name: "Hindi" },
+  { code: "bn", name: "Bengali" },
+  { code: "ur", name: "Urdu" },
+  { code: "ta", name: "Tamil" },
+  { code: "te", name: "Telugu" },
+  { code: "ml", name: "Malayalam" },
+  { code: "mr", name: "Marathi" },
+  { code: "gu", name: "Gujarati" },
+  { code: "kn", name: "Kannada" },
+  { code: "pa", name: "Punjabi" },
+  { code: "ne", name: "Nepali" },
+  { code: "si", name: "Sinhala" },
+  { code: "my", name: "Myanmar (Burmese)" },
+  { code: "km", name: "Khmer" },
+  { code: "lo", name: "Lao" },
+  { code: "jv", name: "Javanese" },
+  { code: "su", name: "Sundanese" },
+  { code: "es", name: "Spanish" },
+  { code: "fr", name: "French" },
+  { code: "de", name: "German" },
+  { code: "it", name: "Italian" },
+  { code: "pt", name: "Portuguese" },
+  { code: "nl", name: "Dutch" },
+  { code: "pl", name: "Polish" },
+  { code: "ro", name: "Romanian" },
+  { code: "ru", name: "Russian" },
+  { code: "uk", name: "Ukrainian" },
+  { code: "cs", name: "Czech" },
+  { code: "sk", name: "Slovak" },
+  { code: "sl", name: "Slovenian" },
+  { code: "hr", name: "Croatian" },
+  { code: "sr", name: "Serbian" },
+  { code: "bs", name: "Bosnian" },
+  { code: "bg", name: "Bulgarian" },
+  { code: "mk", name: "Macedonian" },
+  { code: "el", name: "Greek" },
+  { code: "tr", name: "Turkish" },
+  { code: "hu", name: "Hungarian" },
+  { code: "fi", name: "Finnish" },
+  { code: "sv", name: "Swedish" },
+  { code: "da", name: "Danish" },
+  { code: "no", name: "Norwegian" },
+  { code: "et", name: "Estonian" },
+  { code: "lv", name: "Latvian" },
+  { code: "lt", name: "Lithuanian" },
+  { code: "is", name: "Icelandic" },
+  { code: "ga", name: "Irish" },
+  { code: "cy", name: "Welsh" },
+  { code: "mt", name: "Maltese" },
+  { code: "sq", name: "Albanian" },
+  { code: "hy", name: "Armenian" },
+  { code: "ka", name: "Georgian" },
+  { code: "az", name: "Azerbaijani" },
+  { code: "kk", name: "Kazakh" },
+  { code: "ky", name: "Kyrgyz" },
+  { code: "tg", name: "Tajik" },
+  { code: "uz", name: "Uzbek" },
+  { code: "tk", name: "Turkmen" },
+  { code: "mn", name: "Mongolian" },
+  { code: "ar", name: "Arabic" },
+  { code: "fa", name: "Persian" },
+  { code: "iw", name: "Hebrew" },
+  { code: "ps", name: "Pashto" },
+  { code: "ug", name: "Uyghur" },
+  { code: "ku", name: "Kurdish (Kurmanji)" },
+  { code: "sw", name: "Swahili" },
+  { code: "am", name: "Amharic" },
+  { code: "ha", name: "Hausa" },
+  { code: "ig", name: "Igbo" },
+  { code: "yo", name: "Yoruba" },
+  { code: "zu", name: "Zulu" },
+  { code: "xh", name: "Xhosa" },
+  { code: "so", name: "Somali" },
+  { code: "rw", name: "Kinyarwanda" },
+  { code: "mg", name: "Malagasy" },
+  { code: "af", name: "Afrikaans" },
+  { code: "ca", name: "Catalan" },
+  { code: "eu", name: "Basque" },
+  { code: "gl", name: "Galician" },
+  { code: "eo", name: "Esperanto" },
+  { code: "be", name: "Belarusian" },
+  { code: "ceb", name: "Cebuano" },
+  { code: "co", name: "Corsican" },
+  { code: "fy", name: "Frisian" },
+  { code: "haw", name: "Hawaiian" },
+  { code: "hmn", name: "Hmong" },
+  { code: "ht", name: "Haitian Creole" },
+  { code: "lb", name: "Luxembourgish" },
+  { code: "la", name: "Latin" },
+  { code: "mi", name: "Maori" },
+  { code: "or", name: "Odia (Oriya)" },
+  { code: "gd", name: "Scots Gaelic" },
+  { code: "sm", name: "Samoan" },
+  { code: "sn", name: "Shona" },
+  { code: "st", name: "Sesotho" },
+  { code: "sd", name: "Sindhi" },
+  { code: "tt", name: "Tatar" },
+  { code: "yi", name: "Yiddish" },
+  { code: "ny", name: "Chichewa" }
+];
+
+const FALLBACK_SOURCES = [
+  { id: "original", name: "Original" },
+  { id: "translated", name: "Translated" },
+  { id: "ai", name: "Ai" },
+];
+
+const HEALTH_PATH = "/health";
+const META_PATH = "/meta";
+const AI_RESOLVE_PATH = "/ai/resolve";
+const AI_PROMPT_DEFAULT_PATH = "/ai/prompt/default";
+const WARMUP_PATH = "/warmup";
+
+const HEALTH_TIMEOUT_MS = 5000;
+const AI_META_TIMEOUT_MS = 8000;
+const PROMPT_TIMEOUT_MS = 8000;
+const WARMUP_TIMEOUT_MS = 2500;
+const RETRY_DELAYS_MS = [600, 1200, 2500, 5000];
+
+const modeSel = document.getElementById("mode");
+const langSel = document.getElementById("lang");
+const sourcesSel = document.getElementById("sources");
+const langWrap = document.getElementById("lang-wrap");
+const sourcesWrap = document.getElementById("sources-wrap");
+const aiKeyWrap = document.getElementById("ai-key-wrap");
+const aiKeyInput = document.getElementById("ai-key");
+const aiModelWrap = document.getElementById("ai-model-wrap");
+const aiModelSel = document.getElementById("ai-model");
+const aiPromptWrap = document.getElementById("ai-prompt-wrap");
+const aiPromptInput = document.getElementById("ai-prompt");
+const aiPromptCountEl = document.getElementById("ai-prompt-count");
+const aiPromptResetBtn = document.getElementById("ai-prompt-reset");
+const apiInput = document.getElementById("api-url");
+const emojiEl = document.getElementById("api-status-emoji");
+const resetBtn = document.getElementById("reset-api");
+const openLocalImagesBtn = document.getElementById("open-local-images");
+const openLocalFolderBtn = document.getElementById("open-local-folder");
+const localImagesInput = document.getElementById("local-images-input");
+const localFolderInput = document.getElementById("local-folder-input");
+
+const runStatusTextEl = document.getElementById("run-status-text");
+const runProgressEl = document.querySelector(".run-progress");
+const runProgressBarEl = document.getElementById("run-progress-bar");
+const runStatusSubEl = document.getElementById("run-status-sub");
+
+aiPromptResetBtn?.addEventListener("click", async () => {
+  await resetPromptForLang(langSel.value);
+});
+
+let userInteractedApi = false;
+let lastApiOk = false;
+let lastSavedApiUrl = "";
+let retryTimer = null;
+let metaCache = null;
+let modelDirty = false;
+let aiMetaSeq = 0;
+let promptSeq = 0;
+let lastResolvedProvider = "";
+let lastResolvedKey = "";
+
+let desiredLang = "en";
+let desiredSources = "translated";
+let desiredAiModel = "auto";
+
+let aiPromptByLangState = {};
+let aiPromptDefaultsByLang = {};
+let aiPromptDirtyByLang = {};
+
+let pendingApiSave = false;
+let pendingAiSave = false;
+let aiResolveDebounce = null;
+
+let apiDefaults = { defaultApiUrl: "", resetApiUrl: "", fetchedAt: 0 };
+
+const inFlight = {
+  seq: 0,
+  controller: null,
+};
+
+function updatePromptCount(text = null) {
+  if (!aiPromptCountEl) return;
+  const s = typeof text === "string" ? text : String(aiPromptInput?.value || "");
+  aiPromptCountEl.textContent = `${s.length}/${AI_PROMPT_MAX_CHARS}`;
+}
+
+function buildUrl(path, params = null) {
+  const base = normalizeUrl(apiInput?.value);
+  if (!base) return "";
+  const u = new URL(`${base}${path}`);
+  if (params && typeof params === "object") {
+    for (const [k, v] of Object.entries(params)) {
+      const vv = String(v ?? "").trim();
+      if (vv) u.searchParams.set(k, vv);
+    }
+  }
+  return u.toString();
+}
+
+function setEmojiStatus(type, detail) {
+  if (!emojiEl) return;
+  if (type === "loading") {
+    emojiEl.textContent = "⏳";
+    emojiEl.title = detail || "Checking API...";
+  } else if (type === "ok") {
+    emojiEl.textContent = "✅";
+    emojiEl.title = detail || "Online";
+  } else {
+    emojiEl.textContent = "❌";
+    emojiEl.title = detail || "Offline / Not reachable";
+  }
+}
+
+function renderBatchStatus(b) {
+  if (!runStatusTextEl || !runProgressEl || !runProgressBarEl) return;
+  const batch = b && typeof b === "object" ? b : null;
+  const stats = batch && batch.stats && typeof batch.stats === "object" ? batch.stats : null;
+  const total = Number(stats?.total) || 0;
+  const finished = Number(stats?.finished) || 0;
+  const msg = typeof batch?.message === "string" && batch.message ? batch.message : "Idle";
+  runStatusTextEl.textContent = msg;
+  const pct = total ? Math.max(0, Math.min(100, Math.round((finished / total) * 100))) : 0;
+  runProgressBarEl.style.width = pct + "%";
+  runProgressEl.setAttribute("aria-valuenow", String(pct));
+  if (runStatusSubEl) {
+    if (total) {
+      const pass = Number(batch?.pass) || 1;
+      const stage = typeof batch?.stage === "string" ? batch.stage : "";
+      const extra = stage ? `• ${stage}` : "";
+      runStatusSubEl.textContent = `pass ${pass} • ${finished}/${total} ${extra}`.trim();
+    } else {
+      runStatusSubEl.textContent = "";
+    }
+  }
+}
+
+function initRunStatus() {
+  try {
+    chrome.runtime.sendMessage({ type: "GET_BATCH_STATUS" }, (resp) => {
+      renderBatchStatus(resp?.batch);
+    });
+  } catch {}
+
+  try {
+    chrome.runtime.onMessage.addListener((msg) => {
+      if (!msg || typeof msg !== "object") return;
+      if (msg.type === "BATCH_STATUS_UPDATE") renderBatchStatus(msg.batch);
+    });
+  } catch {}
+}
+
+
+const warmedApi = new Set();
+async function warmupApi(base) {
+  const b = normalizeUrl(base);
+  if (!b || warmedApi.has(b)) return;
+  warmedApi.add(b);
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), WARMUP_TIMEOUT_MS);
+  try {
+    await fetch(`${b}${WARMUP_PATH}`, {
+      method: "GET",
+      cache: "no-store",
+      signal: controller.signal,
+    });
+  } catch {
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+function abortInFlight() {
+  if (inFlight.controller) {
+    try {
+      inFlight.controller.abort();
+    } catch {}
+  }
+  inFlight.controller = null;
+}
+
+function scheduleRetry(url, attemptIndex) {
+  clearTimeout(retryTimer);
+  if (attemptIndex >= RETRY_DELAYS_MS.length) return;
+  const delay = RETRY_DELAYS_MS[attemptIndex];
+  retryTimer = setTimeout(() => {
+    if (normalizeUrl(apiInput.value) === url) checkHealth(url, attemptIndex);
+  }, delay);
+}
+
+async function parseHealth(res) {
+  try {
+    const ct = res.headers.get("content-type") || "";
+    if (ct.includes("application/json")) return await res.json();
+  } catch {}
+  try {
+    const txt = await res.text();
+    return { ok: /\bok\b/i.test(txt), raw: txt };
+  } catch {
+    return null;
+  }
+}
+
+async function checkHealthOnce(url, seq) {
+  const controller = new AbortController();
+  inFlight.controller = controller;
+  const timeout = setTimeout(() => controller.abort(), HEALTH_TIMEOUT_MS);
+  try {
+    const res = await fetch(`${url}${HEALTH_PATH}`, {
+      method: "GET",
+      headers: { accept: "application/json, text/plain;q=0.8" },
+      cache: "no-store",
+      signal: controller.signal,
+    });
+    if (!res.ok) throw new Error(`status ${res.status}`);
+    const data = await parseHealth(res);
+    if (!data || !data.ok) throw new Error("unhealthy");
+    if (seq !== inFlight.seq) return false;
+    return true;
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+async function checkHealth(url, attemptIndex = 0) {
+  const cleaned = normalizeUrl(url);
+  if (!cleaned) return;
+  inFlight.seq += 1;
+  const seq = inFlight.seq;
+  abortInFlight();
+  setEmojiStatus(
+    userInteractedApi ? "loading" : "loading",
+    userInteractedApi ? "Checking API..." : "Waiting…",
+  );
+  try {
+    const healthy = await checkHealthOnce(cleaned, seq);
+    if (seq !== inFlight.seq) return;
+    lastApiOk = healthy;
+    if (healthy) {
+      clearTimeout(retryTimer);
+      setEmojiStatus("ok", "Online");
+      warmupApi(cleaned);
+      refreshMeta(cleaned);
+    } else {
+      setEmojiStatus("error", userInteractedApi ? "Health failed" : "Waiting…");
+      scheduleRetry(cleaned, attemptIndex);
+    }
+  } catch (err) {
+    if (seq !== inFlight.seq) return;
+    lastApiOk = false;
+    const msg =
+      err && err.name === "AbortError"
+        ? "Timed out"
+        : err?.message || "Offline";
+    setEmojiStatus(
+      userInteractedApi ? "error" : "loading",
+      userInteractedApi ? msg : "Waiting…",
+    );
+    scheduleRetry(cleaned, attemptIndex);
+  }
+}
+
+async function fetchJson(url, body, timeoutMs) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const res = await fetch(url, {
+      method: body ? "POST" : "GET",
+      headers: body
+        ? { "Content-Type": "application/json", accept: "application/json" }
+        : { accept: "application/json" },
+      cache: "no-store",
+      body: body ? JSON.stringify(body) : undefined,
+      signal: controller.signal,
+    });
+    if (!res.ok) throw new Error(`status ${res.status}`);
+    return await res.json();
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+function setSelectOptions(
+  sel,
+  list,
+  { valueKey = "id", labelKey = "name", keepValue = "" } = {},
+) {
+  const prev = keepValue || sel.value || "";
+  sel.innerHTML = "";
+  const items = Array.isArray(list) ? list : [];
+  for (const it of items) {
+    const opt = document.createElement("option");
+    opt.value = String(it?.[valueKey] ?? "");
+    opt.textContent = String(it?.[labelKey] ?? opt.value);
+    sel.appendChild(opt);
+  }
+  const canKeep = [...sel.options].some((o) => o.value === prev);
+  if (canKeep) sel.value = prev;
+}
+
+function populateModes() {
+  setSelectOptions(modeSel, MODES, {
+    valueKey: "id",
+    labelKey: "name",
+    keepValue: modeSel.value,
+  });
+}
+
+function toggleUi() {
+  const modeId = modeSel.value || "lens_text";
+  const isText = modeId === "lens_text";
+  sourcesWrap.style.display = isText ? "" : "none";
+
+  const source = (sourcesSel.value || "").trim() || "translated";
+  const needLang = MODES.find((m) => m.id === modeId)?.needLang ?? true;
+  const showLang = needLang && !(isText && source === "original");
+  langWrap.style.display = showLang ? "" : "none";
+  const showAi = isText && source === "ai";
+
+  const hasEnv = Boolean(metaCache?.has_env_ai_key);
+  const hasKey = (aiKeyInput.value || "").trim().length > 0;
+  const canConfigureAi = hasKey || hasEnv;
+
+  aiKeyWrap.style.display = showAi ? "" : "none";
+  aiModelWrap.style.display = showAi && canConfigureAi ? "" : "none";
+  aiPromptWrap.style.display = showAi && canConfigureAi ? "" : "none";
+}
+
+async function refreshMeta(baseUrl) {
+  const url = `${baseUrl}${META_PATH}`;
+  try {
+    const data = await fetchJson(url, null, HEALTH_TIMEOUT_MS);
+    if (data && data.ok) {
+      metaCache = data;
+      const langs =
+        Array.isArray(data.languages) && data.languages.length
+          ? data.languages
+          : FALLBACK_LANGS;
+      const sources =
+        Array.isArray(data.sources) && data.sources.length
+          ? data.sources
+          : FALLBACK_SOURCES;
+      const beforeLang = langSel.value;
+      const beforeSources = sourcesSel.value;
+      setSelectOptions(langSel, langs, {
+        valueKey: "code",
+        labelKey: "name",
+        keepValue: desiredLang || beforeLang,
+      });
+      setSelectOptions(sourcesSel, sources, {
+        valueKey: "id",
+        labelKey: "name",
+        keepValue: desiredSources || beforeSources,
+      });
+
+      const afterLang = langSel.value;
+      const afterSources = sourcesSel.value;
+      const patch = {};
+      if (afterLang && afterLang !== desiredLang) {
+        desiredLang = afterLang;
+        patch.lang = afterLang;
+      }
+      if (afterSources && afterSources !== desiredSources) {
+        desiredSources = afterSources;
+        patch.sources = afterSources;
+      }
+      if (Object.keys(patch).length) await chrome.storage.local.set(patch);
+      toggleUi();
+    }
+  } catch {}
+}
+
+async function ensureAiAvailableOrFallback() {
+  const modeId = modeSel.value || "lens_text";
+  if (modeId !== "lens_text") return true;
+
+  const source = (sourcesSel.value || "").trim() || "translated";
+  if (source !== "ai") return true;
+
+  const hasEnv = Boolean(metaCache?.has_env_ai_key);
+  const hasKey = (aiKeyInput.value || "").trim().length > 0;
+  if (hasKey || hasEnv) return true;
+
+  toggleUi();
+  return false;
+}
+
+function setModelOptions(models, { keepValue = "", strict = true } = {}) {
+  const prev =
+    (keepValue || aiModelSel.value || desiredAiModel || "auto").trim() ||
+    "auto";
+  aiModelSel.innerHTML = "";
+  const base = [{ id: "auto", name: "auto" }];
+  const list = (Array.isArray(models) ? models : [])
+    .map((m) => ({
+      id: String(m || ""),
+      name: String(m || ""),
+    }))
+    .filter((m) => m.id)
+    .sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+    );
+  const canKeep = prev && [...new Set(list.map((m) => m.id))].includes(prev);
+  if (!strict && prev && prev !== "auto" && !canKeep)
+    list.unshift({ id: prev, name: prev });
+  for (const it of base.concat(list)) {
+    const opt = document.createElement("option");
+    opt.value = it.id;
+    opt.textContent = it.name;
+    aiModelSel.appendChild(opt);
+  }
+  aiModelSel.value = canKeep ? prev : "auto";
+}
+
+async function refreshAiMeta({ forcePrompt = false } = {}) {
+  const modeId = modeSel.value || "lens_text";
+  if (modeId !== "lens_text") return;
+
+  const ok = await ensureAiAvailableOrFallback();
+  if (!ok) return;
+
+  const base = normalizeUrl(apiInput.value);
+  if (!base) return;
+
+  const source = (sourcesSel.value || "").trim() || "translated";
+  if (source !== "ai") {
+    setModelOptions([], { keepValue: "auto" });
+    return;
+  }
+
+  const seq = ++aiMetaSeq;
+  try {
+    const lang = langSel.value || "en";
+    const aiKey = (aiKeyInput.value || "").trim();
+    const currentModel =
+      (aiModelSel.value || "").trim() || desiredAiModel || "auto";
+
+    const data = await fetchJson(
+      `${base}${AI_RESOLVE_PATH}`,
+      { api_key: aiKey, model: currentModel, lang },
+      AI_META_TIMEOUT_MS,
+    );
+    if (seq !== aiMetaSeq) return;
+
+    if (!data || !data.ok) {
+      setModelOptions([], { keepValue: currentModel, strict: false });
+      toggleUi();
+      return;
+    }
+
+    const provider = String(data.provider || "").trim();
+    const keyChanged = aiKey !== lastResolvedKey;
+    const providerChanged = Boolean(
+      lastResolvedProvider &&
+      provider &&
+      provider !== lastResolvedProvider &&
+      keyChanged,
+    );
+
+    if (provider) lastResolvedProvider = provider;
+    lastResolvedKey = aiKey;
+
+    const models = Array.isArray(data.models) ? data.models : [];
+    const preferred =
+      (modelDirty
+        ? (aiModelSel.value || "").trim()
+        : (desiredAiModel || "").trim()) ||
+      currentModel ||
+      "auto";
+    setModelOptions(models, { keepValue: preferred, strict: true });
+
+    const optionValues = [...aiModelSel.options].map((o) => o.value);
+    let nextModel = (aiModelSel.value || "").trim() || "auto";
+    if (!optionValues.includes(nextModel) || nextModel === "") {
+      const suggested = String(data.model || "").trim();
+      if (suggested && optionValues.includes(suggested)) nextModel = suggested;
+      else nextModel = "auto";
+    } else if (
+      providerChanged &&
+      nextModel !== "auto" &&
+      !optionValues.includes(nextModel)
+    ) {
+      nextModel = "auto";
+    }
+
+    if ((aiModelSel.value || "").trim() !== nextModel) aiModelSel.value = nextModel;
+
+    if (nextModel !== currentModel) {
+      desiredAiModel = nextModel;
+      await chrome.storage.local.set({ aiKey, aiModel: nextModel });
+    } else {
+      await chrome.storage.local.set({ aiKey });
+    }
+
+    if (forcePrompt) await applyPromptForLang(lang, { forceFetch: true });
+
+    toggleUi();
+  } catch {}
+}
+
+function canUseAiUi() {
+  const modeId = modeSel.value || "lens_text";
+  if (modeId !== "lens_text") return false;
+  const source = (sourcesSel.value || "").trim() || "translated";
+  return source === "ai";
+}
+
+async function fetchDefaultPromptForLang(lang, model = 'auto') {
+  const l = (lang || 'en').trim() || 'en';
+  const m2 = normalizeAiModel(model);
+  const url = buildUrl(AI_PROMPT_DEFAULT_PATH, { lang: l, model: m2 });
+  if (!url) return '';
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), PROMPT_TIMEOUT_MS);
+  const resp = await fetch(url, { signal: ctrl.signal }).catch(() => null);
+  clearTimeout(timer);
+  const data = resp ? await resp.json().catch(() => null) : null;
+  const p2 = data && data.ok ? String(data.prompt_editable_default || '').trim() : '';
+  return normalizePrompt(p2);
+}
+
+async function resetPromptForLang(lang) {
+  if (!canUseAiUi()) return;
+  const l = (lang || desiredLang || langSel.value || 'en').trim() || 'en';
+  const model = normalizeAiModel(desiredAiModel);
+  const key = makePromptKey(l, model);
+  const seq = ++promptSeq;
+
+  const cached = String(aiPromptDefaultsByLang[key] || '').trim();
+  const def = cached ? normalizePrompt(cached) : await fetchDefaultPromptForLang(l, model);
+  if (seq !== promptSeq) return;
+
+  aiPromptDefaultsByLang[key] = def;
+  aiPromptByLangState[key] = def;
+  aiPromptDirtyByLang[key] = false;
+
+  aiPromptInput.value = def;
+  updatePromptCount(def);
+  await chrome.storage.local.set({ aiPromptByLang: aiPromptByLangState });
+  chrome.runtime.sendMessage({ type: 'AI_SETTINGS_CHANGED' });
+}
+
+async function applyPromptForLang(lang, { forceFetch = false } = {}) {
+  if (!canUseAiUi()) return;
+  const l = (lang || desiredLang || langSel.value || 'en').trim() || 'en';
+  const model = normalizeAiModel(desiredAiModel);
+  const key = makePromptKey(l, model);
+  if (aiPromptDirtyByLang[key]) return;
+  if (Object.prototype.hasOwnProperty.call(aiPromptByLangState, key) && !forceFetch) {
+    const saved = String(aiPromptByLangState[key] || '');
+    aiPromptInput.value = saved;
+    updatePromptCount(saved);
+    return;
+  }
+  if (Object.prototype.hasOwnProperty.call(aiPromptDefaultsByLang, key) && !forceFetch) {
+    const def = String(aiPromptDefaultsByLang[key] || '');
+    aiPromptInput.value = def;
+    updatePromptCount(def);
+    return;
+  }
+  const def = await fetchDefaultPromptForLang(l, model);
+  aiPromptDefaultsByLang[key] = def;
+  aiPromptInput.value = def;
+  updatePromptCount(def);
+}
+
+async function flushPromptForLang(lang, model = null) {
+  if (!canUseAiUi()) return;
+  const l = (lang || desiredLang || langSel.value || 'en').trim() || 'en';
+  const m2 = normalizeAiModel(model || desiredAiModel);
+  const key = makePromptKey(l, m2);
+  if (!aiPromptDirtyByLang[key]) return;
+  const prompt = normalizePrompt(String(aiPromptInput.value || ''));
+  aiPromptByLangState[key] = prompt;
+  aiPromptDirtyByLang[key] = false;
+  await chrome.storage.local.set({ aiPromptByLang: aiPromptByLangState });
+}
+
+let debounceTimer = null;
+function scheduleSaveApi(raw) {
+  clearTimeout(debounceTimer);
+  pendingApiSave = true;
+  debounceTimer = setTimeout(async () => {
+    pendingApiSave = false;
+    const normalized = normalizeUrl(raw);
+    if (!normalized) return;
+
+    if (normalized === lastSavedApiUrl) {
+      checkHealth(normalized);
+      return;
+    }
+
+    userInteractedApi = true;
+    await chrome.storage.local.set({ customApiUrl: normalized });
+    lastSavedApiUrl = normalized;
+    chrome.runtime.sendMessage({ type: "API_URL_CHANGED" });
+    setEmojiStatus("loading", "Checking API...");
+    checkHealth(normalized);
+    refreshAiMeta({ forcePrompt: false });
+  }, 800);
+}
+
+let aiDebounce = null;
+function scheduleSaveAi() {
+  clearTimeout(aiDebounce);
+  pendingAiSave = true;
+  aiDebounce = setTimeout(async () => {
+    pendingAiSave = false;
+    const modeId = modeSel.value || "lens_text";
+    if (modeId !== "lens_text") {
+      const aiKey = (aiKeyInput.value || "").trim();
+      const aiModel = normalizeAiModel((aiModelSel.value || "").trim() || desiredAiModel || "auto");
+      desiredAiModel = aiModel;
+      await chrome.storage.local.set({ aiKey, aiModel });
+      chrome.runtime.sendMessage({ type: "AI_SETTINGS_CHANGED" });
+      return;
+    }
+
+    const source = (sourcesSel.value || "").trim() || "translated";
+    const lang = desiredLang || langSel.value || "en";
+    const aiKey = (aiKeyInput.value || "").trim();
+    const aiModel = normalizeAiModel((aiModelSel.value || "").trim() || desiredAiModel || "auto");
+    desiredAiModel = aiModel;
+
+    const key = makePromptKey(lang, aiModel);
+    if (aiPromptDirtyByLang[key]) {
+      const prompt = normalizePrompt(String(aiPromptInput.value || ""));
+      aiPromptByLangState[key] = prompt;
+      aiPromptDirtyByLang[key] = false;
+    }
+
+    await chrome.storage.local.set({
+      aiKey,
+      aiModel,
+      aiPromptByLang: aiPromptByLangState,
+    });
+    chrome.runtime.sendMessage({ type: "AI_SETTINGS_CHANGED" });
+    modelDirty = true;
+    toggleUi();
+    if (source === "ai") refreshAiMeta({ forcePrompt: false });
+  }, 400);
+}
+
+function scheduleResolveAiMeta({ immediate = false } = {}) {
+  if (aiResolveDebounce) clearTimeout(aiResolveDebounce);
+  const run = () => {
+    if ((modeSel.value || "lens_text") !== "lens_text") return;
+    if ((sourcesSel.value || "").trim() !== "ai") return;
+    refreshAiMeta({ forcePrompt: false });
+  };
+  if (immediate) {
+    run();
+    return;
+  }
+  aiResolveDebounce = setTimeout(run, 350);
+}
+
+
+function resetFileInput(input) {
+  if (input) input.value = "";
+}
+
+async function openLocalViewerFromFiles(fileList, sourceLabel) {
+  const images = filterImageFiles(fileList);
+  if (!images.length) return;
+  const session = await saveLocalSession({
+    id: crypto.randomUUID(),
+    createdAt: Date.now(),
+    title: sourceLabel,
+    pages: sortLocalPages(images.map((file, index) => toLocalPageRecord(file, index))),
+  });
+  const url = chrome.runtime.getURL(
+    `viewer/viewer.html?sid=${encodeURIComponent(session.id)}`,
+  );
+  await chrome.tabs.create({ url });
+  window.close();
+}
+
+async function handleLocalPickerChange(input, sourceLabel) {
+  const files = [...(input?.files || [])];
+  resetFileInput(input);
+  await openLocalViewerFromFiles(files, sourceLabel);
+}
+
+function handleWsStatus(status) {
+  if (lastApiOk) return;
+  if (status === "connected") setEmojiStatus("ok", "WS connected");
+  else if (status === "connecting") setEmojiStatus("loading", "Connecting…");
+  else setEmojiStatus("error", "WS disconnected");
+}
+
+async function loadSettings() {
+  populateModes();
+  setEmojiStatus("loading", "Initializing…");
+
+  const stored = await chrome.storage.local.get([
+    "mode",
+    "lang",
+    "sources",
+    "customApiUrl",
+    "aiKey",
+    "aiModel",
+    "aiPromptByLang",
+  ]);
+
+  modeSel.value = stored.mode || "lens_text";
+  desiredLang =
+    typeof stored.lang === "string" && stored.lang ? stored.lang : "en";
+  desiredSources =
+    typeof stored.sources === "string" && stored.sources
+      ? stored.sources
+      : "translated";
+  desiredAiModel =
+    typeof stored.aiModel === "string" && stored.aiModel
+      ? stored.aiModel
+      : "auto";
+
+  setSelectOptions(langSel, FALLBACK_LANGS, {
+    valueKey: "code",
+    labelKey: "name",
+    keepValue: desiredLang,
+  });
+  setSelectOptions(sourcesSel, FALLBACK_SOURCES, {
+    valueKey: "id",
+    labelKey: "name",
+    keepValue: desiredSources,
+  });
+
+  langSel.value = desiredLang;
+  sourcesSel.value = desiredSources;
+
+  const storedCustom = String(stored.customApiUrl || "");
+  lastSavedApiUrl = storedCustom;
+  apiInput.value = storedCustom;
+
+  if (storedCustom) userInteractedApi = true;
+
+  const aiKey = String(stored.aiKey || "");
+  aiPromptByLangState =
+    stored.aiPromptByLang && typeof stored.aiPromptByLang === "object"
+      ? stored.aiPromptByLang
+      : {};
+  const mig = migratePromptMap(aiPromptByLangState);
+  aiPromptByLangState = mig.map;
+  if (mig.changed) await chrome.storage.local.set({ aiPromptByLang: aiPromptByLangState });
+
+  const key = makePromptKey(desiredLang, desiredAiModel);
+  const prompt = Object.prototype.hasOwnProperty.call(aiPromptByLangState, key)
+    ? String(aiPromptByLangState[key] || "")
+    : "";
+
+  aiKeyInput.value = aiKey;
+  setModelOptions([], { keepValue: desiredAiModel });
+  aiPromptInput.value = prompt;
+  updatePromptCount(prompt);
+
+  toggleUi();
+
+  const initial = normalizeUrl(apiInput.value);
+  if (initial) checkHealth(initial);
+
+  ensureApiDefaults()
+    .then((d) => {
+      apiDefaults = d || apiDefaults;
+      if (storedCustom) return;
+      const def = apiDefaults.defaultApiUrl || "";
+      if (!def) return;
+      if (!normalizeUrl(apiInput.value)) {
+        apiInput.value = def;
+        checkHealth(def);
+      }
+    })
+    .catch(() => {});
+
+  if ((sourcesSel.value || "").trim() === "ai" && modeSel.value === "lens_text") {
+    applyPromptForLang(desiredLang, { forceFetch: false }).catch(() => {});
+    refreshAiMeta({ forcePrompt: false });
+  }
+
+  chrome.runtime.sendMessage({ type: "GET_API_STATUS" }, (resp) => {
+    if (chrome.runtime.lastError) return;
+    if (resp && typeof resp.ok === "boolean" && resp.ok) {
+      lastApiOk = true;
+      setEmojiStatus("ok", "Online");
+    }
+  });
+
+  chrome.runtime.sendMessage({ type: "GET_WS_STATUS" }, (resp) => {
+    if (chrome.runtime.lastError) return;
+    if (resp && typeof resp.status === "string") handleWsStatus(resp.status);
+  });
+}
+
+window.addEventListener("offline", () => {
+  lastApiOk = false;
+  setEmojiStatus("error", "No internet");
+});
+window.addEventListener("online", () => {
+  if (apiInput.value) checkHealth(apiInput.value);
+});
+
+window.addEventListener("pagehide", () => {
+  try {
+    if (pendingApiSave) {
+      const normalized = normalizeUrl(apiInput.value);
+      if (normalized) chrome.storage.local.set({ customApiUrl: normalized });
+    }
+
+    const modeId = modeSel.value || "lens_text";
+    const aiKey = (aiKeyInput.value || "").trim();
+    const aiModel = normalizeAiModel((aiModelSel.value || "").trim() || desiredAiModel || "auto");
+    desiredAiModel = aiModel;
+
+    if (modeId === "lens_text") {
+      const lang = desiredLang || langSel.value || "en";
+      const key = makePromptKey(lang, aiModel);
+      const needSave = pendingAiSave || Boolean(aiPromptDirtyByLang[key]);
+      if (aiPromptDirtyByLang[key]) {
+        const prompt = normalizePrompt(String(aiPromptInput.value || ""));
+        aiPromptByLangState[key] = prompt;
+        aiPromptDirtyByLang[key] = false;
+      }
+      if (needSave)
+        chrome.storage.local.set({
+          aiKey,
+          aiModel,
+          aiPromptByLang: aiPromptByLangState,
+        });
+    } else if (pendingAiSave) {
+      chrome.storage.local.set({ aiKey, aiModel });
+    }
+  } catch {}
+});
+
+chrome.runtime.onMessage?.addListener((msg) => {
+  if (msg.type === "WS_STATUS_UPDATE") handleWsStatus(msg.status);
+  else if (msg.type === "API_STATUS_UPDATE") {
+    if (typeof msg.ok === "boolean") {
+      lastApiOk = msg.ok;
+      if (msg.ok) setEmojiStatus("ok", "Online");
+      else
+        setEmojiStatus(
+          userInteractedApi ? "error" : "loading",
+          userInteractedApi ? "API unhealthy" : "Waiting…",
+        );
+    }
+  }
+});
+
+modeSel.addEventListener("change", async () => {
+  await chrome.storage.local.set({ mode: modeSel.value });
+  modelDirty = false;
+  toggleUi();
+  await applyPromptForLang(desiredLang, { forceFetch: false });
+  refreshAiMeta({ forcePrompt: false });
+});
+
+langSel.addEventListener("change", async () => {
+  const prevLang = desiredLang;
+  desiredLang = langSel.value || desiredLang;
+  if (canUseAiUi()) await flushPromptForLang(prevLang, desiredAiModel);
+  await chrome.storage.local.set({ lang: desiredLang });
+  modelDirty = false;
+  await applyPromptForLang(desiredLang, { forceFetch: false });
+  toggleUi();
+  refreshAiMeta({ forcePrompt: false });
+});
+
+sourcesSel.addEventListener("change", async () => {
+  if (canUseAiUi()) await flushPromptForLang(desiredLang, desiredAiModel);
+  modelDirty = false;
+  const ok = await ensureAiAvailableOrFallback();
+  desiredSources = sourcesSel.value || desiredSources;
+  await chrome.storage.local.set({ sources: desiredSources });
+  toggleUi();
+  if (ok) await applyPromptForLang(desiredLang, { forceFetch: false });
+  refreshAiMeta({ forcePrompt: false });
+  chrome.runtime.sendMessage({ type: "AI_SETTINGS_CHANGED" });
+});
+
+apiInput.addEventListener("input", (e) => scheduleSaveApi(e.target.value));
+apiInput.addEventListener("blur", (e) => scheduleSaveApi(e.target.value));
+
+aiKeyInput.addEventListener("input", () => {
+  modelDirty = false;
+  scheduleSaveAi();
+  scheduleResolveAiMeta();
+});
+aiKeyInput.addEventListener("blur", () => {
+  scheduleSaveAi();
+  scheduleResolveAiMeta({ immediate: true });
+});
+
+aiModelSel.addEventListener("change", async () => {
+  const prevModel = desiredAiModel;
+  desiredAiModel = normalizeAiModel(aiModelSel.value || prevModel);
+  if (canUseAiUi()) await flushPromptForLang(desiredLang, prevModel);
+  modelDirty = true;
+  await applyPromptForLang(desiredLang, { forceFetch: false });
+  scheduleSaveAi();
+});
+
+aiPromptInput.addEventListener("input", () => {
+  const key = makePromptKey(desiredLang, desiredAiModel);
+  aiPromptDirtyByLang[key] = true;
+  updatePromptCount();
+  scheduleSaveAi();
+});
+aiPromptInput.addEventListener("blur", async () => {
+  const key = makePromptKey(desiredLang, desiredAiModel);
+  aiPromptDirtyByLang[key] = true;
+  updatePromptCount();
+  await flushPromptForLang(desiredLang, desiredAiModel);
+  scheduleSaveAi();
+});
+
+
+
+openLocalImagesBtn?.addEventListener("click", () => {
+  resetFileInput(localImagesInput);
+  localImagesInput?.click();
+});
+
+openLocalFolderBtn?.addEventListener("click", () => {
+  resetFileInput(localFolderInput);
+  localFolderInput?.click();
+});
+
+localImagesInput?.addEventListener("change", async () => {
+  await handleLocalPickerChange(localImagesInput, "images");
+});
+
+localFolderInput?.addEventListener("change", async () => {
+  await handleLocalPickerChange(localFolderInput, "folder");
+});
+
+resetBtn.addEventListener("click", () => {
+  ensureApiDefaults({ force: true }).then((d) => {
+    apiDefaults = d;
+    const def = apiDefaults.resetApiUrl || apiDefaults.defaultApiUrl || "";
+    apiInput.value = def;
+    const normalized = normalizeUrl(def);
+    chrome.storage.local.set({ customApiUrl: normalized });
+    lastSavedApiUrl = normalized;
+    userInteractedApi = Boolean(normalized);
+    setEmojiStatus("loading", "Reset to default");
+    chrome.runtime.sendMessage({ type: "API_URL_CHANGED" });
+    checkHealth(normalized);
+    apiInput.focus();
+  });
+});
+
+loadSettings();
+initRunStatus();

background-service.js

@@ -0,0 +1,356 @@
+:root {
+  color-scheme: dark;
+  --bg: #0b1020;
+  --panel: rgba(11, 17, 31, 0.92);
+  --panel-2: rgba(18, 27, 47, 0.92);
+  --line: rgba(255, 255, 255, 0.08);
+  --line-2: rgba(255, 255, 255, 0.16);
+  --text: #edf2ff;
+  --muted: #8ea0c1;
+  --accent: #7aa2ff;
+  --accent-2: rgba(122, 162, 255, 0.16);
+  --danger: #ff8a8a;
+  --ok: #6ed3a5;
+  --radius: 16px;
+  --radius-sm: 12px;
+  --reader-width: 980px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background: radial-gradient(circle at top, #162241, var(--bg) 56%);
+  color: var(--text);
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+body {
+  min-height: 100vh;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px;
+  background: var(--panel);
+  border-right: 1px solid var(--line);
+  backdrop-filter: blur(12px);
+}
+
+.sidebar-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.eyebrow {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--muted);
+  margin-bottom: 4px;
+}
+
+.sidebar-head h1,
+.reader-head h2 {
+  margin: 0;
+  font-size: 24px;
+}
+
+.sidebar-meta,
+.selection-summary,
+.sidebar-note,
+.status,
+.page-meta,
+.zoom-indicator,
+.page-actions {
+  color: var(--muted);
+}
+
+.toolbar.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toolbar-row.dual,
+.toolbar-row.triple {
+  display: grid;
+  gap: 10px;
+}
+
+.toolbar-row.dual {
+  grid-template-columns: 1fr 1fr;
+}
+
+.toolbar-row.triple {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.zoom-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  gap: 10px;
+  align-items: center;
+}
+
+#zoom-range {
+  width: 100%;
+}
+
+.btn {
+  appearance: none;
+  border: 1px solid var(--line-2);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  border-color: rgba(255, 255, 255, 0.28);
+}
+
+.btn.primary {
+  background: var(--accent-2);
+  border-color: rgba(122, 162, 255, 0.36);
+}
+
+.btn.danger {
+  color: var(--danger);
+}
+
+.sidebar-note {
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.status {
+  font-size: 13px;
+  line-height: 1.45;
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.page-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.page-list-item {
+  display: grid;
+  grid-template-columns: 18px auto 1fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid transparent;
+  cursor: grab;
+}
+
+.page-list-item:hover,
+.page-list-item.active,
+.page-list-item.drag-over {
+  border-color: rgba(122, 162, 255, 0.32);
+  background: rgba(122, 162, 255, 0.08);
+}
+
+.drag-handle {
+  font-size: 16px;
+  color: var(--muted);
+  user-select: none;
+}
+
+.page-list-item input,
+.page-strip input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--accent);
+}
+
+.page-name {
+  font-size: 13px;
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.page-meta {
+  font-size: 11px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 68px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.badge.ok {
+  color: var(--ok);
+  border-color: rgba(110, 211, 165, 0.24);
+  background: rgba(110, 211, 165, 0.1);
+}
+
+.reader-shell {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px;
+}
+
+.reader-head {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: var(--radius);
+  background: rgba(8, 13, 26, 0.82);
+  border: 1px solid var(--line);
+  backdrop-filter: blur(10px);
+}
+
+.reader-head-main {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.zoom-indicator {
+  font-size: 13px;
+}
+
+.reader {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.page-strip {
+  width: min(100%, var(--reader-width));
+  margin: 0 auto;
+  padding: 0;
+}
+
+.page-strip.active .page-strip-head {
+  border-color: rgba(122, 162, 255, 0.34);
+}
+
+.page-strip-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 2px 10px 4px;
+  border-bottom: 1px solid transparent;
+}
+
+.page-strip-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.page-strip-title strong {
+  font-size: 14px;
+}
+
+.page-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.page-actions .btn {
+  padding: 7px 10px;
+  font-size: 12px;
+}
+
+.page-frame {
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  background: transparent;
+  border: 0;
+}
+
+.page-frame img {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.empty-state {
+  width: min(100%, 720px);
+  margin: 48px auto 0;
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--muted);
+  border: 1px dashed var(--line-2);
+  border-radius: var(--radius);
+}
+
+@media (max-width: 1120px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    position: static;
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .page-strip {
+    width: 100%;
+  }
+}

content-service.js

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>TextPhantom Local Viewer</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="stylesheet" href="viewer.css" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <aside class="sidebar">
+        <div class="sidebar-head">
+          <div>
+            <div class="eyebrow">TextPhantom</div>
+            <h1>Local Viewer</h1>
+          </div>
+          <div id="page-count" class="sidebar-meta">0 pages</div>
+        </div>
+
+        <div class="toolbar stack">
+          <div class="toolbar-row dual">
+            <button type="button" id="viewer-open-images" class="btn primary">Open image(s)</button>
+            <button type="button" id="viewer-open-folder" class="btn">Open folder</button>
+          </div>
+          <div class="toolbar-row triple">
+            <button type="button" id="toggle-select-pages" class="btn">Select all</button>
+            <button type="button" id="reverse-page-order" class="btn">Reverse</button>
+            <button type="button" id="clear-viewer" class="btn danger">Clear viewer</button>
+          </div>
+          <div class="toolbar-row zoom-row">
+            <button type="button" id="zoom-out" class="btn">−</button>
+            <input id="zoom-range" type="range" min="420" max="2200" step="20" value="980" />
+            <button type="button" id="zoom-in" class="btn">+</button>
+            <button type="button" id="fit-width" class="btn">Fit</button>
+          </div>
+          <div class="toolbar-row dual">
+            <button type="button" id="download-selected-images" class="btn primary">Download image(s)</button>
+            <button type="button" id="download-selected-html" class="btn">Download HTML</button>
+          </div>
+        </div>
+
+        <div class="sidebar-note">Drag names below to reorder the reader. Use Ctrl/Cmd + mouse wheel to zoom.</div>
+        <div id="viewer-status" class="status">Open local images or a folder, then right-click an image to translate.</div>
+        <div id="page-list" class="page-list"></div>
+      </aside>
+
+      <main class="reader-shell">
+        <header class="reader-head">
+          <div class="reader-head-main">
+            <h2>Reader</h2>
+            <div id="selection-summary" class="selection-summary">0 selected</div>
+          </div>
+          <div id="zoom-indicator" class="zoom-indicator">980px</div>
+        </header>
+        <section id="reader" class="reader"></section>
+      </main>
+    </div>
+
+    <input id="viewer-images-input" type="file" accept="image/*" multiple hidden />
+    <input id="viewer-folder-input" type="file" accept="image/*" multiple webkitdirectory hidden />
+    <script src="../content-service.js"></script>
+    <script type="module" src="viewer.js"></script>
+  </body>
+</html>

defaults_api.json

@@ -0,0 +1,709 @@
+import {
+  deleteLocalSession,
+  filterImageFiles,
+  loadLocalSession,
+  saveLocalSession,
+  sortLocalPages,
+  toLocalPageRecord,
+} from "../shared/local_gallery.js";
+
+const readerEl = document.getElementById("reader");
+const pageListEl = document.getElementById("page-list");
+const pageCountEl = document.getElementById("page-count");
+const viewerStatusEl = document.getElementById("viewer-status");
+const selectionSummaryEl = document.getElementById("selection-summary");
+const zoomIndicatorEl = document.getElementById("zoom-indicator");
+
+const openImagesBtn = document.getElementById("viewer-open-images");
+const openFolderBtn = document.getElementById("viewer-open-folder");
+const toggleSelectBtn = document.getElementById("toggle-select-pages");
+const reverseOrderBtn = document.getElementById("reverse-page-order");
+const clearViewerBtn = document.getElementById("clear-viewer");
+const zoomOutBtn = document.getElementById("zoom-out");
+const zoomInBtn = document.getElementById("zoom-in");
+const fitWidthBtn = document.getElementById("fit-width");
+const zoomRange = document.getElementById("zoom-range");
+const downloadSelectedImagesBtn = document.getElementById("download-selected-images");
+const downloadSelectedHtmlBtn = document.getElementById("download-selected-html");
+const imagesInput = document.getElementById("viewer-images-input");
+const folderInput = document.getElementById("viewer-folder-input");
+
+const params = new URLSearchParams(location.search);
+const sessionId = String(params.get("sid") || "").trim();
+const READER_WIDTH_KEY = "textphantom.viewer.width";
+
+const pagesById = new Map();
+const originalToPageId = new Map();
+const selectedPageIds = new Set();
+const objectUrls = new Map();
+let pageOrder = [];
+let currentSession = null;
+let dragPageId = "";
+let readerWidth = Number(localStorage.getItem(READER_WIDTH_KEY) || 980);
+
+function setStatus(text) {
+  if (viewerStatusEl) viewerStatusEl.textContent = String(text || "");
+}
+
+function resetInput(input) {
+  if (input) input.value = "";
+}
+
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+
+function sanitizeFilenamePart(text) {
+  return String(text || "")
+    .replace(/\.[^.]+$/, "")
+    .replace(/[\\/:*?"<>|]+/g, "_")
+    .replace(/\s+/g, " ")
+    .trim() || "page";
+}
+
+function getPageLabel(page) {
+  return String(page?.relativePath || page?.name || page?.id || "page");
+}
+
+function escapeHtml(text) {
+  return String(text || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function extFromMime(mime) {
+  const m = String(mime || "").toLowerCase();
+  if (m.includes("png")) return "png";
+  if (m.includes("webp")) return "webp";
+  if (m.includes("gif")) return "gif";
+  if (m.includes("jpeg") || m.includes("jpg")) return "jpg";
+  return "png";
+}
+
+function parseDataUriMeta(dataUri) {
+  const m = String(dataUri || "").match(/^data:([^;,]+)?/i);
+  const mime = m?.[1] || "image/png";
+  return { mime, ext: extFromMime(mime) };
+}
+
+async function blobToDataUri(blob) {
+  return await new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(typeof reader.result === "string" ? reader.result : "");
+    reader.onerror = () => resolve("");
+    reader.readAsDataURL(blob);
+  });
+}
+
+function articleForPage(pageId) {
+  return document.querySelector(`.page-strip[data-page-id="${CSS.escape(pageId)}"]`);
+}
+
+function imageForPage(pageId) {
+  return articleForPage(pageId)?.querySelector("img") || null;
+}
+
+function overlayRootForPage(pageId) {
+  return articleForPage(pageId)?.querySelector(".tp-ol-root") || null;
+}
+
+function badgeText(page) {
+  if (page?.overlayApplied) return "Overlay ready";
+  if (page?.translatedImageDataUri) return "Image ready";
+  return "Original";
+}
+
+function badgeClass(page) {
+  return page?.overlayApplied || page?.translatedImageDataUri ? "badge ok" : "badge";
+}
+
+function revokeObjectUrls() {
+  for (const url of objectUrls.values()) {
+    try {
+      URL.revokeObjectURL(url);
+    } catch {}
+  }
+  objectUrls.clear();
+}
+
+function getOrderedPages() {
+  return pageOrder.map((id) => pagesById.get(id)).filter(Boolean);
+}
+
+function getSelectedPages() {
+  return getOrderedPages().filter((page) => selectedPageIds.has(page.id));
+}
+
+function updateSelectionSummary() {
+  const selected = selectedPageIds.size;
+  if (selectionSummaryEl) selectionSummaryEl.textContent = `${selected} selected`;
+  if (toggleSelectBtn) {
+    const total = pageOrder.length;
+    toggleSelectBtn.textContent = total && selected === total ? "Deselect all" : "Select all";
+  }
+}
+
+function applyReaderWidth(px) {
+  readerWidth = clamp(Number(px) || 980, Number(zoomRange.min), Number(zoomRange.max));
+  document.documentElement.style.setProperty("--reader-width", `${readerWidth}px`);
+  localStorage.setItem(READER_WIDTH_KEY, String(readerWidth));
+  if (zoomRange) zoomRange.value = String(readerWidth);
+  if (zoomIndicatorEl) zoomIndicatorEl.textContent = `${readerWidth}px`;
+}
+
+function pageCountText() {
+  const total = pageOrder.length;
+  return `${total} page${total === 1 ? "" : "s"}`;
+}
+
+function syncPageUi(pageId) {
+  const page = pagesById.get(pageId);
+  if (!page) return;
+  const checked = selectedPageIds.has(pageId);
+  document
+    .querySelectorAll(`[data-page-id="${CSS.escape(pageId)}"] input[data-role="select-page"]`)
+    .forEach((el) => {
+      el.checked = checked;
+    });
+  document
+    .querySelectorAll(`[data-page-id="${CSS.escape(pageId)}"] .page-state-badge`)
+    .forEach((badge) => {
+      badge.className = `page-state-badge ${badgeClass(page)}`;
+      badge.textContent = badgeText(page);
+    });
+  articleForPage(pageId)?.classList.toggle("active", checked);
+  pageListEl
+    .querySelector(`.page-list-item[data-page-id="${CSS.escape(pageId)}"]`)
+    ?.classList.toggle("active", checked);
+}
+
+function syncUi() {
+  if (pageCountEl) pageCountEl.textContent = pageCountText();
+  updateSelectionSummary();
+  for (const id of pageOrder) syncPageUi(id);
+}
+
+function setPageSelection(pageId, checked) {
+  if (checked) selectedPageIds.add(pageId);
+  else selectedPageIds.delete(pageId);
+  syncPageUi(pageId);
+  updateSelectionSummary();
+}
+
+function movePage(beforeId, afterId) {
+  const from = pageOrder.indexOf(beforeId);
+  const to = pageOrder.indexOf(afterId);
+  if (from < 0 || to < 0 || from === to) return;
+  const next = [...pageOrder];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  pageOrder = next;
+}
+
+async function persistCurrentOrder() {
+  if (!currentSession?.id) return;
+  const pages = getOrderedPages().map((page) => ({
+    id: page.id,
+    name: page.name,
+    relativePath: page.relativePath,
+    type: page.type,
+    size: page.size,
+    lastModified: page.lastModified,
+    blob: page.blob,
+  }));
+  currentSession = await saveLocalSession({
+    id: currentSession.id,
+    createdAt: currentSession.createdAt,
+    title: currentSession.title,
+    pages,
+  });
+}
+
+function scrollToPage(pageId) {
+  articleForPage(pageId)?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+function findPageIdByOriginal(original) {
+  const key = String(original || "");
+  if (!key) return "";
+  const direct = originalToPageId.get(key);
+  if (direct) return direct;
+  for (const id of pageOrder) {
+    const page = pagesById.get(id);
+    if (page && (page.originalKey === key || page.currentSrc === key)) return id;
+  }
+  return "";
+}
+
+async function getCurrentSettings() {
+  const stored = await chrome.storage.local.get(["mode", "lang"]);
+  return {
+    mode: String(stored.mode || "lens_text") || "lens_text",
+    lang: String(stored.lang || "en") || "en",
+  };
+}
+
+async function makeExportFilename(page, ext) {
+  const { mode, lang } = await getCurrentSettings();
+  const stem = sanitizeFilenamePart(page?.name || page?.relativePath || page?.id || "page");
+  const safeMode = sanitizeFilenamePart(mode || "mode").replace(/\s+/g, "-");
+  const safeLang = sanitizeFilenamePart(lang || "en").replace(/\s+/g, "-");
+  return `${stem}.${safeMode}.${safeLang}.${ext}`;
+}
+
+function isLocalDownloadUrl(url) {
+  const value = String(url || "");
+  return value.startsWith("data:") || value.startsWith("blob:") || value.startsWith("chrome-extension:");
+}
+
+function triggerAnchorDownload(url, filename) {
+  const link = document.createElement("a");
+  link.href = String(url || "");
+  link.download = String(filename || "download");
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+async function dataUriToBlob(dataUri) {
+  const res = await fetch(String(dataUri || ""));
+  return await res.blob();
+}
+
+async function downloadUrl(url, filename) {
+  const targetUrl = String(url || "");
+  const targetName = String(filename || "download");
+  if (!targetUrl) return;
+  if (isLocalDownloadUrl(targetUrl) || !chrome?.downloads?.download) {
+    triggerAnchorDownload(targetUrl, targetName);
+    return;
+  }
+  await chrome.downloads.download({
+    url: targetUrl,
+    filename: targetName,
+    saveAs: false,
+  });
+}
+
+async function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  try {
+    triggerAnchorDownload(url, filename);
+  } finally {
+    setTimeout(() => {
+      try {
+        URL.revokeObjectURL(url);
+      } catch {}
+    }, 1500);
+  }
+}
+
+function currentImageUrlForPage(pageId) {
+  const page = pagesById.get(pageId);
+  const img = imageForPage(pageId);
+  if (!page || !img) return "";
+  return String(page.translatedImageDataUri || img.currentSrc || img.src || "");
+}
+
+async function downloadImageForPage(pageId) {
+  const page = pagesById.get(pageId);
+  if (!page) return;
+  const src = currentImageUrlForPage(pageId);
+  if (!src) return;
+  if (src.startsWith("data:")) {
+    const meta = parseDataUriMeta(src);
+    const blob = await dataUriToBlob(src);
+    await downloadBlob(blob, await makeExportFilename(page, meta.ext));
+    return;
+  }
+  const res = await fetch(src);
+  const blob = await res.blob();
+  const ext = extFromMime(blob.type || page.type);
+  await downloadBlob(blob, await makeExportFilename(page, ext));
+}
+
+async function buildStandaloneHtml(pageId) {
+  const page = pagesById.get(pageId);
+  const img = imageForPage(pageId);
+  if (!page || !img) return "";
+  const overlayRoot = overlayRootForPage(pageId);
+  const overlayScope = overlayRoot?.querySelector(".tp-ol-scope") || null;
+  const styleText = document.getElementById("textphantom_overlay_css")?.textContent || "";
+  const cleanImg = overlayRoot?.querySelector(".tp-ol-clean-img") || null;
+  const width = Number(img.naturalWidth) || 1;
+  const height = Number(img.naturalHeight) || 1;
+  const overlayHtml = overlayScope ? overlayScope.innerHTML : "";
+  let bgSrc = String(page.translatedImageDataUri || "");
+  if (!bgSrc) {
+    const src = String(cleanImg?.currentSrc || cleanImg?.src || img.currentSrc || img.src || "");
+    if (src.startsWith("data:")) {
+      bgSrc = src;
+    } else if (src) {
+      const res = await fetch(src);
+      const blob = await res.blob();
+      bgSrc = await blobToDataUri(blob);
+    }
+  }
+  if (!bgSrc) return "";
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>${escapeHtml(page.name)}</title>
+    <style>
+      html,body{margin:0;background:#111;color:#fff;font-family:system-ui,sans-serif;}
+      .tp-export{position:relative;width:min(100vw,${width}px);margin:0 auto;}
+      .tp-export img{display:block;width:100%;height:auto;}
+      .tp-export .tp-ol-root{position:absolute!important;inset:0!important;display:block!important;}
+      .tp-export .tp-ol-scope{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;}
+      ${styleText}
+    </style>
+  </head>
+  <body>
+    <div class="tp-export" style="aspect-ratio:${width}/${height}">
+      <img src="${bgSrc}" width="${width}" height="${height}" alt="${escapeHtml(page.name)}" />
+      <div class="tp-ol-root"><div class="tp-ol-scope">${overlayHtml}</div></div>
+    </div>
+  </body>
+</html>`;
+}
+
+async function downloadHtmlForPage(pageId) {
+  const page = pagesById.get(pageId);
+  if (!page) return;
+  const html = await buildStandaloneHtml(pageId);
+  if (!html) return;
+  const blob = new Blob([html], { type: "text/html;charset=utf-8" });
+  await downloadBlob(blob, await makeExportFilename(page, "html"));
+}
+
+async function downloadSelected(kind) {
+  const selected = getSelectedPages();
+  if (!selected.length) return;
+  setStatus(
+    kind === "html"
+      ? `Downloading ${selected.length} HTML file(s)…`
+      : `Downloading ${selected.length} image file(s)…`,
+  );
+  for (const page of selected) {
+    if (kind === "html") await downloadHtmlForPage(page.id);
+    else await downloadImageForPage(page.id);
+  }
+  setStatus(
+    `Downloaded ${selected.length} ${kind === "html" ? "HTML" : "image"} file(s).`,
+  );
+}
+
+function renderEmpty() {
+  pageListEl.innerHTML = "";
+  readerEl.innerHTML = '<div class="empty-state">No local images loaded.</div>';
+  syncUi();
+}
+
+function renderSession() {
+  const pages = getOrderedPages();
+  if (!pages.length) {
+    renderEmpty();
+    return;
+  }
+
+  pageListEl.innerHTML = pages
+    .map(
+      (page, index) => `
+        <label class="page-list-item ${selectedPageIds.has(page.id) ? "active" : ""}" data-page-id="${page.id}" draggable="true">
+          <span class="drag-handle">⋮⋮</span>
+          <input type="checkbox" data-role="select-page" data-page-id="${page.id}" ${selectedPageIds.has(page.id) ? "checked" : ""} />
+          <div>
+            <div class="page-name">${escapeHtml(page.name)}</div>
+            <div class="page-meta">${escapeHtml(page.relativePath || `Page ${index + 1}`)}</div>
+          </div>
+          <span class="page-state-badge ${badgeClass(page)}">${badgeText(page)}</span>
+        </label>
+      `,
+    )
+    .join("");
+
+  readerEl.innerHTML = pages
+    .map(
+      (page, index) => `
+        <article class="page-strip ${selectedPageIds.has(page.id) ? "active" : ""}" data-page-id="${page.id}">
+          <div class="page-strip-head">
+            <div class="page-strip-title">
+              <input type="checkbox" data-role="select-page" data-page-id="${page.id}" ${selectedPageIds.has(page.id) ? "checked" : ""} />
+              <div>
+                <strong>${escapeHtml(page.name)}</strong>
+                <div class="page-meta">${escapeHtml(page.relativePath || `Page ${index + 1}`)}</div>
+              </div>
+              <span class="page-state-badge ${badgeClass(page)}">${badgeText(page)}</span>
+            </div>
+            <div class="page-actions">
+              <button type="button" class="btn" data-role="download-image" data-page-id="${page.id}">Image</button>
+              <button type="button" class="btn" data-role="download-html" data-page-id="${page.id}">HTML</button>
+            </div>
+          </div>
+          <div class="page-frame">
+            <img src="${page.objectUrl}" alt="${escapeHtml(page.name)}" loading="eager" data-tp-original="${page.originalKey}" />
+          </div>
+        </article>
+      `,
+    )
+    .join("");
+
+  syncUi();
+}
+
+async function loadSessionIntoView(id) {
+  currentSession = await loadLocalSession(id);
+  pagesById.clear();
+  selectedPageIds.clear();
+  originalToPageId.clear();
+  revokeObjectUrls();
+  pageOrder = [];
+
+  const pages = Array.isArray(currentSession?.pages) ? currentSession.pages : [];
+  for (const raw of pages) {
+    const objectUrl = URL.createObjectURL(raw.blob);
+    objectUrls.set(raw.id, objectUrl);
+    const page = {
+      ...raw,
+      objectUrl,
+      blob: raw.blob,
+      originalKey: objectUrl,
+      currentSrc: objectUrl,
+      translatedImageDataUri: "",
+      overlayApplied: false,
+    };
+    pagesById.set(page.id, page);
+    originalToPageId.set(page.originalKey, page.id);
+    selectedPageIds.add(page.id);
+    pageOrder.push(page.id);
+  }
+
+  renderSession();
+  if (pages.length) {
+    setStatus(`Loaded ${pages.length} local image(s). Right-click any image to translate.`);
+  } else {
+    setStatus("No local images found in this session.");
+  }
+}
+
+async function replaceSessionFromFiles(fileList, sourceLabel) {
+  const files = filterImageFiles(fileList);
+  if (!files.length) return;
+  const next = await saveLocalSession({
+    id: crypto.randomUUID(),
+    createdAt: Date.now(),
+    title: sourceLabel,
+    pages: sortLocalPages(files.map((file, index) => toLocalPageRecord(file, index))),
+  });
+  if (currentSession?.id) {
+    deleteLocalSession(currentSession.id).catch(() => {});
+  }
+  location.href = `${location.pathname}?sid=${encodeURIComponent(next.id)}`;
+}
+
+async function clearViewer() {
+  if (currentSession?.id) {
+    await deleteLocalSession(currentSession.id).catch(() => {});
+  }
+  currentSession = null;
+  pagesById.clear();
+  selectedPageIds.clear();
+  originalToPageId.clear();
+  pageOrder = [];
+  revokeObjectUrls();
+  renderEmpty();
+  setStatus("Viewer cleared.");
+}
+
+function handleTranslatedImage(detail) {
+  const pageId = findPageIdByOriginal(detail?.original);
+  if (!pageId) return;
+  const page = pagesById.get(pageId);
+  if (!page) return;
+  page.currentSrc = String(detail?.newSrc || page.currentSrc || "");
+  if (page.currentSrc) originalToPageId.set(page.currentSrc, pageId);
+  if (String(detail?.rawNewSrc || "").startsWith("data:")) {
+    page.translatedImageDataUri = detail.rawNewSrc;
+  }
+  pagesById.set(pageId, page);
+  syncPageUi(pageId);
+  setStatus(`Updated ${page.name}`);
+}
+
+function handleOverlayUpdated(detail) {
+  const pageId = findPageIdByOriginal(detail?.original);
+  if (!pageId) return;
+  const page = pagesById.get(pageId);
+  if (!page) return;
+  page.overlayApplied = true;
+  const imageDataUri = String(detail?.result?.imageDataUri || "");
+  if (imageDataUri.startsWith("data:")) page.translatedImageDataUri = imageDataUri;
+  pagesById.set(pageId, page);
+  syncPageUi(pageId);
+  setStatus(`Overlay ready for ${page.name}`);
+}
+
+pageListEl.addEventListener("click", (event) => {
+  const item = event.target.closest(".page-list-item");
+  if (!item) return;
+  const pageId = String(item.dataset.pageId || "");
+  if (!pageId) return;
+  if (event.target.closest('input[type="checkbox"]')) return;
+  scrollToPage(pageId);
+});
+
+pageListEl.addEventListener("dragstart", (event) => {
+  const item = event.target.closest(".page-list-item");
+  if (!item) return;
+  dragPageId = String(item.dataset.pageId || "");
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", dragPageId);
+  }
+});
+
+pageListEl.addEventListener("dragover", (event) => {
+  const item = event.target.closest(".page-list-item");
+  if (!item || !dragPageId) return;
+  event.preventDefault();
+  pageListEl.querySelectorAll(".page-list-item.drag-over").forEach((el) => {
+    el.classList.remove("drag-over");
+  });
+  item.classList.add("drag-over");
+});
+
+pageListEl.addEventListener("dragleave", (event) => {
+  const item = event.target.closest(".page-list-item");
+  item?.classList.remove("drag-over");
+});
+
+pageListEl.addEventListener("drop", async (event) => {
+  const item = event.target.closest(".page-list-item");
+  if (!item || !dragPageId) return;
+  event.preventDefault();
+  item.classList.remove("drag-over");
+  const targetId = String(item.dataset.pageId || "");
+  if (!targetId || targetId === dragPageId) return;
+  movePage(dragPageId, targetId);
+  dragPageId = "";
+  renderSession();
+  await persistCurrentOrder();
+  setStatus("Reader order updated.");
+});
+
+pageListEl.addEventListener("dragend", () => {
+  dragPageId = "";
+  pageListEl.querySelectorAll(".page-list-item.drag-over").forEach((el) => {
+    el.classList.remove("drag-over");
+  });
+});
+
+for (const root of [pageListEl, readerEl]) {
+  root.addEventListener("change", (event) => {
+    const input = event.target.closest('input[data-role="select-page"]');
+    if (!input) return;
+    setPageSelection(String(input.dataset.pageId || ""), Boolean(input.checked));
+  });
+  root.addEventListener("click", async (event) => {
+    const button = event.target.closest("button[data-role]");
+    if (!button) return;
+    const pageId = String(button.dataset.pageId || "");
+    const role = String(button.dataset.role || "");
+    if (!pageId || !role) return;
+    if (role === "download-image") await downloadImageForPage(pageId);
+    if (role === "download-html") await downloadHtmlForPage(pageId);
+  });
+}
+
+openImagesBtn?.addEventListener("click", () => {
+  resetInput(imagesInput);
+  imagesInput?.click();
+});
+
+openFolderBtn?.addEventListener("click", () => {
+  resetInput(folderInput);
+  folderInput?.click();
+});
+
+imagesInput?.addEventListener("change", async () => {
+  const files = [...(imagesInput.files || [])];
+  resetInput(imagesInput);
+  await replaceSessionFromFiles(files, "images");
+});
+
+folderInput?.addEventListener("change", async () => {
+  const files = [...(folderInput.files || [])];
+  resetInput(folderInput);
+  await replaceSessionFromFiles(files, "folder");
+});
+
+toggleSelectBtn?.addEventListener("click", () => {
+  const total = pageOrder.length;
+  if (!total) return;
+  if (selectedPageIds.size === total) selectedPageIds.clear();
+  else pageOrder.forEach((id) => selectedPageIds.add(id));
+  syncUi();
+});
+
+reverseOrderBtn?.addEventListener("click", async () => {
+  pageOrder.reverse();
+  renderSession();
+  await persistCurrentOrder();
+  setStatus("Reader order reversed.");
+});
+
+clearViewerBtn?.addEventListener("click", async () => {
+  await clearViewer();
+});
+
+zoomOutBtn?.addEventListener("click", () => applyReaderWidth(readerWidth - 120));
+zoomInBtn?.addEventListener("click", () => applyReaderWidth(readerWidth + 120));
+fitWidthBtn?.addEventListener("click", () => {
+  const sidebarOffset = window.innerWidth > 1120 ? 420 : 48;
+  applyReaderWidth(window.innerWidth - sidebarOffset);
+});
+zoomRange?.addEventListener("input", () => applyReaderWidth(zoomRange.value));
+
+document.addEventListener(
+  "wheel",
+  (event) => {
+    if (!(event.ctrlKey || event.metaKey)) return;
+    event.preventDefault();
+    applyReaderWidth(readerWidth + (event.deltaY > 0 ? -80 : 80));
+  },
+  { passive: false },
+);
+
+downloadSelectedImagesBtn?.addEventListener("click", async () => {
+  await downloadSelected("image");
+});
+
+downloadSelectedHtmlBtn?.addEventListener("click", async () => {
+  await downloadSelected("html");
+});
+
+window.addEventListener("textphantom:image-updated", (event) => {
+  handleTranslatedImage(event.detail || {});
+});
+
+window.addEventListener("textphantom:overlay-updated", (event) => {
+  handleOverlayUpdated(event.detail || {});
+});
+
+window.addEventListener("beforeunload", () => {
+  revokeObjectUrls();
+});
+
+(async () => {
+  applyReaderWidth(readerWidth);
+  if (!sessionId) {
+    renderEmpty();
+    setStatus("Missing local viewer session.");
+    return;
+  }
+  await loadSessionIntoView(sessionId);
+})();

local_gallery.js

@@ -0,0 +1,16 @@
+export function promptKey(lang, model) {
+  const l = String(lang || "en").trim() || "en";
+  const m = String(model || "auto").trim() || "auto";
+  return `${l}::${m}`;
+}
+
+export function sanitizeAiPrompt(raw, { maxChars = 1200 } = {}) {
+  let s = typeof raw === "string" ? raw : String(raw || "");
+  s = s.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  s = s.trim();
+  if (!s) return "";
+  s = s.replace(/[\t ]+$/gm, "");
+  s = s.replace(/\n{3,}/g, "\n\n");
+  if (s.length > maxChars) s = s.slice(0, maxChars).trimEnd();
+  return s;
+}

logger.js

@@ -0,0 +1,110 @@
+import { normalizeUrl } from "./url.js";
+
+const REMOTE_DEFAULTS_URL ="https://raw.githubusercontent.com/Kuju29/TextPhantomOCR_Overlay/refs/heads/main/defaults_api.json";
+
+const DEFAULT_API_URL_FALLBACK = "";
+const RESET_API_URL_FALLBACK = "";
+
+const FETCH_TIMEOUT_MS = 2000;
+const TTL_MS = 12 * 60 * 60 * 1000;
+
+function now() {
+  return Date.now();
+}
+
+function coerceUrl(v) {
+  return typeof v === "string" ? normalizeUrl(v) : "";
+}
+
+function parseMaybeJson(raw) {
+  if (typeof raw !== "string") return null;
+  const t = raw.trim();
+  if (!t) return null;
+  try {
+    return JSON.parse(t);
+  } catch {
+    if (!(t.startsWith("{") && t.endsWith("}"))) return null;
+    const q1 = t.replace(/([{,]\s*)([A-Za-z0-9_]+)\s*:/g, '$1"$2":');
+    const q2 = q1.includes("'") && !q1.includes('"') ? q1.replace(/'/g, '"') : q1;
+    try {
+      return JSON.parse(q2);
+    } catch {
+      return null;
+    }
+  }
+}
+
+async function fetchRemoteDefaults() {
+  const ctrl = new AbortController();
+  const t = setTimeout(() => ctrl.abort(), FETCH_TIMEOUT_MS);
+  try {
+    const res = await fetch(REMOTE_DEFAULTS_URL, {
+      method: "GET",
+      headers: { accept: "application/json" },
+      cache: "no-store",
+      signal: ctrl.signal,
+    });
+    if (!res.ok) return null;
+    const raw = await res.text();
+    const data = parseMaybeJson(raw);
+    if (!data || typeof data !== "object") return null;
+    const defaultApiUrl =
+      coerceUrl(data.defaultApiUrl) ||
+      coerceUrl(data.DEFAULTS_API) ||
+      coerceUrl(data.apiUrlDefault) ||
+      coerceUrl(data.default_api_url);
+    const resetApiUrl =
+      coerceUrl(data.resetApiUrl) ||
+      coerceUrl(data.apiUrlReset) ||
+      coerceUrl(data.reset_api_url);
+    if (!defaultApiUrl && !resetApiUrl) return null;
+    return {
+      defaultApiUrl: defaultApiUrl || "",
+      resetApiUrl: resetApiUrl || "",
+    };
+  } catch {
+    return null;
+  } finally {
+    clearTimeout(t);
+  }
+}
+
+export async function ensureApiDefaults({ force = false } = {}) {
+  const stored = await chrome.storage.local.get({
+    apiUrlDefault: DEFAULT_API_URL_FALLBACK,
+    apiUrlReset: RESET_API_URL_FALLBACK,
+    apiDefaultsFetchedAt: 0,
+  });
+
+  const current = {
+    defaultApiUrl: coerceUrl(stored.apiUrlDefault) || DEFAULT_API_URL_FALLBACK,
+    resetApiUrl: coerceUrl(stored.apiUrlReset) || RESET_API_URL_FALLBACK,
+    fetchedAt: Number(stored.apiDefaultsFetchedAt) || 0,
+  };
+
+  const fresh = current.fetchedAt && now() - current.fetchedAt <= TTL_MS;
+  if (!force && fresh) return current;
+
+  const remote = await fetchRemoteDefaults();
+  if (!remote) return current;
+
+  const next = {
+    defaultApiUrl: remote.defaultApiUrl || current.defaultApiUrl,
+    resetApiUrl: remote.resetApiUrl || current.resetApiUrl,
+    fetchedAt: now(),
+  };
+
+  await chrome.storage.local.set({
+    apiUrlDefault: next.defaultApiUrl,
+    apiUrlReset: next.resetApiUrl,
+    apiDefaultsFetchedAt: next.fetchedAt,
+  });
+
+  return next;
+}
+
+export const API_DEFAULTS = {
+  REMOTE_DEFAULTS_URL,
+  DEFAULT_API_URL_FALLBACK,
+  RESET_API_URL_FALLBACK,
+};

manifest.json

@@ -0,0 +1,2321 @@
+import { createLogger } from "./shared/logger.js";
+import { normalizeUrl, toWs } from "./shared/url.js";
+import { ensureApiDefaults } from "./shared/api_defaults.js";
+import { makePromptKey, migratePromptMap, normalizeAiModel, normalizePrompt } from "./shared/prompt.js";
+
+const { debug: log, info, warn, error } = createLogger("LensSW");
+
+ensureApiDefaults().catch(() => {});
+
+const t0 = () =>
+  typeof performance !== "undefined" && performance.now
+    ? performance.now()
+    : Date.now();
+
+const fmtMs = (ms) => ms.toFixed(1) + "ms";
+
+function ev(tag, obj = {}) {
+  info(`[EV] ${tag}`, obj);
+}
+
+function evWarn(tag, obj = {}) {
+  warn(`[EV] ${tag}`, obj);
+}
+
+const PREFLIGHT_TIMEOUT_MS = 10000;
+const WS_OPEN_TIMEOUT_MS = 20000;
+const WS_RETRIES = 6;
+const MAX_FIRST_TRY_RETRIES = 2;
+const FIRST_TRY_GAP_MS = 3000;
+
+const WARMUP_PATH = "/warmup";
+const WARMUP_TIMEOUT_MS = 2500;
+const WARMUP_TTL_MS = 20 * 60 * 1000;
+
+const SOFT_MAX_CONCURRENCY_DEFAULT = 15;
+
+let MAX_CONCURRENCY = 10;
+let softMaxConcurrency = SOFT_MAX_CONCURRENCY_DEFAULT;
+let forceSoftMaxConcurrency = false;
+let ws = null;
+let wsReady = false;
+let wsStatus = "idle";
+let currentBase = null;
+let currentBatchId = null;
+let blockSendsBecauseWsEnded = false;
+let running = 0;
+
+const queue = [];
+const pendingByJob = new Map();
+const pendingByImage = new Map();
+
+function shouldPreferRest(base, mode, source) {
+  const m = String(mode || "").trim();
+  if (m === "lens_images") return true;
+  if (m === "lens_text") return true;
+  try {
+    const host = new URL(String(base || "")).hostname.toLowerCase();
+    if (!host) return true;
+    if (host.endsWith(".hf.space")) return true;
+    if (host.endsWith("huggingface.co")) return true;
+    return true;
+  } catch {
+    return true;
+  }
+}
+
+function effectiveMaxConcurrency() {
+  const soft =
+    Number(softMaxConcurrency) > 0
+      ? Number(softMaxConcurrency)
+      : SOFT_MAX_CONCURRENCY_DEFAULT;
+  const n = Number(MAX_CONCURRENCY) || 0;
+  if (forceSoftMaxConcurrency) {
+    if (n > 0 && n < soft) return n;
+    return soft;
+  }
+  return n;
+}
+
+function aiSoftMaxConcurrencyFromKey(key) {
+  const k = String(key || "").trim();
+  if (k.startsWith("hf_")) return 3;
+  return 10;
+}
+
+function statusTextFor(code, fallback = "") {
+  if (code === 200) return "OK";
+  if (code === 201) return "Created";
+  if (code === 202) return "Accepted";
+  if (code === 204) return "No Content";
+  if (code === 400) return "Bad Request";
+  if (code === 401) return "Unauthorized";
+  if (code === 403) return "Forbidden";
+  if (code === 404) return "Not Found";
+  if (code === 408) return "Request Timeout";
+  if (code === 409) return "Conflict";
+  if (code === 413) return "Payload Too Large";
+  if (code === 415) return "Unsupported Media Type";
+  if (code === 429) return "Too Many Requests";
+  if (code === 500) return "Internal Server Error";
+  if (code === 502) return "Bad Gateway";
+  if (code === 503) return "Service Unavailable";
+  if (code === 504) return "Gateway Timeout";
+  return fallback || "";
+}
+
+function logImageRestAccessLine(base, fullUrl, statusCode, statusText = "") {
+  try {
+    const b = new URL(String(base || ""));
+    const u = new URL(String(fullUrl || ""));
+    const host = b.hostname === "localhost" ? "127.0.0.1" : b.hostname;
+    const st = statusTextFor(Number(statusCode) || 0, statusText);
+    info(`${host} - "GET ${u.pathname} HTTP/1.1" ${statusCode} ${st}`);
+  } catch {}
+}
+
+const BATCH_TOAST_MIN_INTERVAL_MS = 350;
+const BATCH_RETRY_GAP_MS = 1800;
+const BATCH_TTL_MS = 20 * 60 * 1000;
+
+const batches = new Map();
+
+let lastBatchStatus = null;
+
+function normImgSrc(src) {
+  const s = String(src || "").trim();
+  if (!s) return "";
+  try {
+    const u = new URL(s);
+    u.hash = "";
+    return u.toString();
+  } catch {
+    return s;
+  }
+}
+
+function imageKeyFromPayload(payload) {
+  const id = String(payload?.metadata?.image_id || "").trim();
+  if (id) return id;
+  return normImgSrc(payload?.src);
+}
+
+function ensureBatch(batchId, tabId, frameId) {
+  const id = String(batchId || "");
+  if (!id) return null;
+  const now = Date.now();
+  let b = batches.get(id);
+  if (!b) {
+    b = {
+      id,
+      tabId: Number.isFinite(tabId) ? tabId : 0,
+      frameId: Number(frameId) || 0,
+      createdAt: now,
+      pass: 1,
+      total1: 0,
+      total2: 0,
+      lastToastTs: 0,
+      retryScheduled: false,
+      items: new Map(),
+    };
+    batches.set(id, b);
+  } else {
+    if (Number.isFinite(tabId)) b.tabId = tabId;
+    if (Number.isFinite(frameId)) b.frameId = Number(frameId) || 0;
+  }
+  return b;
+}
+
+function pruneBatches(now = Date.now()) {
+  for (const [id, b] of batches.entries()) {
+    if (!b || now - (b.createdAt || now) > BATCH_TTL_MS) batches.delete(id);
+  }
+}
+
+function batchPassTotal(b) {
+  if (!b) return 0;
+  return b.pass === 2 ? Number(b.total2) || 0 : Number(b.total1) || 0;
+}
+
+function batchPassStats(b) {
+  const pass = b?.pass || 1;
+  const total = batchPassTotal(b);
+  let queued = 0;
+  let processing = 0;
+  let inserting = 0;
+  let done = 0;
+  let error = 0;
+  let aborted = 0;
+
+  for (const it of b?.items?.values?.() || []) {
+    if (!it || it.attempt !== pass) continue;
+    const st = it.status;
+    if (st === "queued") queued++;
+    else if (st === "processing") processing++;
+    else if (st === "inserting") inserting++;
+    else if (st === "done") done++;
+    else if (st === "error") error++;
+    else if (st === "aborted") aborted++;
+  }
+  const finished = done + error + aborted;
+  return {
+    pass,
+    total,
+    queued,
+    processing,
+    inserting,
+    done,
+    error,
+    aborted,
+    finished,
+  };
+}
+
+function batchToast(b, text, ms = 2000, force = false) {
+  if (!b || !b.tabId || !text) return;
+  const now = Date.now();
+  if (!force && now - (b.lastToastTs || 0) < BATCH_TOAST_MIN_INTERVAL_MS)
+    return;
+  b.lastToastTs = now;
+  sendToastToTab(b.tabId, b.frameId || 0, text, ms);
+}
+
+function batchUpdateToast(b, stage, force = false) {
+  if (!b) return;
+  pruneBatches();
+  const s = batchPassStats(b);
+  const total = s.total;
+  const head = b.pass === 2 ? "TextPhantom: รอบแก้ไข" : "TextPhantom:";
+  const parts = [];
+  if (total) parts.push(`รับภาพ ${total}`);
+  if (s.processing || s.inserting || s.queued)
+    parts.push(`ประมวลผล ${s.processing + s.inserting}/${total}`);
+  if (s.done) parts.push(`แทรกกลับ ${s.done}/${total}`);
+  if (s.error) parts.push(`ผิดพลาด ${s.error}`);
+  if (s.aborted) parts.push(`ยกเลิก ${s.aborted}`);
+  const extra = stage ? `• ${stage}` : "";
+  const msg = `${head} ${parts.join(" | ")} ${extra}`.trim();
+  const ms = s.finished >= total && total ? 2400 : 60000;
+  batchToast(b, msg, ms, force);
+  lastBatchStatus = {
+    id: b.id,
+    tabId: b.tabId || 0,
+    frameId: b.frameId || 0,
+    pass: s.pass,
+    stage: String(stage || ""),
+    message: msg,
+    stats: s,
+    ts: Date.now(),
+  };
+  try {
+    chrome.runtime.sendMessage(
+      { type: "BATCH_STATUS_UPDATE", batch: lastBatchStatus },
+      () => void chrome.runtime.lastError,
+    );
+  } catch {}
+}
+
+function batchMark(batchId, imageKey, patch) {
+  const b = batches.get(String(batchId || ""));
+  if (!b) return null;
+  const k = String(imageKey || "").trim();
+  if (!k) return b;
+  const cur = b.items.get(k);
+  if (!cur) return b;
+  b.items.set(k, { ...cur, ...patch });
+  return b;
+}
+
+async function batchStopKeepAlive(b) {
+  if (!b?.tabId) return;
+  try {
+    await sendToTab(b.tabId, { type: "TP_KEEPALIVE_STOP" }, b.frameId || 0);
+  } catch {}
+}
+
+function batchFinalizeIfComplete(b) {
+  if (!b) return;
+  const s = batchPassStats(b);
+  if (!s.total || s.finished < s.total) return;
+
+  if (b.pass === 1) {
+    if (b.retryScheduled) return;
+    const failed = [];
+    let permanentErr = 0;
+    for (const [k, it] of b.items.entries()) {
+      if (it?.attempt !== 1 || it.status !== "error") continue;
+      if (it?.permanent) {
+        permanentErr++;
+        continue;
+      }
+      failed.push(k);
+    }
+    if (!failed.length) {
+      const msg = permanentErr
+        ? `เสร็จสิ้น (ผิดพลาดถาวร ${permanentErr})`
+        : "เสร็จสิ้น";
+      batchUpdateToast(b, msg, true);
+      batchStopKeepAlive(b);
+      return;
+    }
+    b.retryScheduled = true;
+    b.pass = 2;
+    b.total2 = failed.length;
+    for (const k of failed) {
+      const it = b.items.get(k);
+      if (!it) continue;
+      const base = it.payload || null;
+      const meta =
+        base?.metadata && typeof base.metadata === "object"
+          ? base.metadata
+          : {};
+      const pipe = Array.isArray(meta.pipeline) ? meta.pipeline : [];
+      const nextPayload = {
+        ...base,
+        metadata: {
+          ...meta,
+          pipeline: pipe.concat({
+            stage: "retry_failed_once",
+            at: new Date().toISOString(),
+          }),
+          timestamp: new Date().toISOString(),
+        },
+      };
+      b.items.set(k, {
+        ...it,
+        payload: nextPayload,
+        attempt: 2,
+        status: "queued",
+      });
+    }
+    batchUpdateToast(
+      b,
+      `พักก่อน แล้วลองแก้ไขอีกครั้ง ${failed.length} ภาพ`,
+      true,
+    );
+    addTask(async () => {
+      await new Promise((r) => setTimeout(r, BATCH_RETRY_GAP_MS));
+      const again = [];
+      for (const it of b.items.values()) {
+        if (it?.attempt === 2 && it.status === "queued" && it.payload)
+          again.push(it.payload);
+      }
+      batchUpdateToast(b, "เริ่มรอบแก้ไข", true);
+      for (const pl of again) {
+        let nextPayload = pl;
+        let skip = false;
+        try {
+          const src = String(pl?.src || "").trim();
+          if (src && /^https?:/i.test(src) && !pl?.imageDataUri) {
+            const pageUrl = pl?.context?.page_url || "";
+            const key = normImgSrc(src);
+            pruneMdDataUriCache();
+            const cached = key ? mdDataUriCache.get(key) : null;
+            const du =
+              cached?.du &&
+              Date.now() - (cached.ts || 0) <= MD_DATAURI_CACHE_TTL_MS
+                ? cached.du
+                : await fetchImageDataUriFromUrl(src, pageUrl);
+            if (du) {
+              const meta =
+                pl?.metadata && typeof pl.metadata === "object"
+                  ? pl.metadata
+                  : {};
+              const pipe = Array.isArray(meta.pipeline) ? meta.pipeline : [];
+              nextPayload = {
+                ...pl,
+                imageDataUri: du,
+                metadata: {
+                  ...meta,
+                  pipeline: pipe.concat({
+                    stage: "retry_attach_datauri",
+                    at: new Date().toISOString(),
+                  }),
+                  timestamp: new Date().toISOString(),
+                },
+              };
+              if (key && !cached?.du)
+                mdDataUriCache.set(key, { du, ts: Date.now() });
+              const k = imageKeyFromPayload(nextPayload);
+              if (k && b.items.has(k)) {
+                const it = b.items.get(k);
+                b.items.set(k, { ...it, payload: nextPayload });
+              }
+            }
+          }
+        } catch (e) {
+          const msg = String(e?.message || e);
+          const cls = classifyJobError(msg);
+          const k = imageKeyFromPayload(pl);
+          if (k && b.items.has(k)) {
+            const it = b.items.get(k);
+            b.items.set(k, {
+              ...it,
+              lastError: msg,
+              status: cls?.permanent ? "error" : it.status,
+              permanent: !!cls?.permanent,
+            });
+            if (cls?.permanent) {
+              batchUpdateToast(b, "ผิดพลาด (ถาวร)");
+              batchFinalizeIfComplete(b);
+            }
+          }
+          if (cls?.permanent) skip = true;
+        }
+        if (!skip) enqueue(nextPayload, b.tabId, b.frameId || 0);
+      }
+    });
+    return;
+  }
+
+  if (b.pass === 2) {
+    const s2 = batchPassStats(b);
+    const msg =
+      s2.error > 0 ? `เสร็จสิ้น (ยังผิดพลาด ${s2.error})` : "เสร็จสิ้น";
+    batchUpdateToast(b, msg, true);
+    batchStopKeepAlive(b);
+  }
+  return;
+}
+
+let settingsEpoch = 0;
+
+chrome.storage.onChanged.addListener((changes, areaName) => {
+  if (areaName !== "local" || !changes) return;
+  if (!changes.mode && !changes.lang && !changes.sources) return;
+  settingsEpoch = (settingsEpoch + 1) >>> 0;
+});
+
+const tabSessionById = new Map();
+function bumpTabSession(tabId, href) {
+  if (!Number.isFinite(tabId)) return "";
+  const id = crypto.randomUUID();
+  tabSessionById.set(tabId, { id, href: String(href || ""), ts: Date.now() });
+  return id;
+}
+function getTabSessionId(tabId) {
+  return tabSessionById.get(tabId)?.id || "";
+}
+
+function getTabSession(tabId) {
+  return tabSessionById.get(tabId) || null;
+}
+
+function ensureTabSession(tabId, href) {
+  const cur = getTabSession(tabId);
+  const h = String(href || "");
+  if (!cur?.id) return bumpTabSession(tabId, h);
+  if (h && String(cur.href || "") !== h) {
+    tabSessionById.set(tabId, { ...cur, href: h, ts: Date.now() });
+  }
+  return cur.id;
+}
+
+function isMangaDexPageUrl(u) {
+  try {
+    const host = new URL(String(u || "")).hostname.toLowerCase();
+    return host === "mangadex.org" || host.endsWith(".mangadex.org");
+  } catch {
+    return false;
+  }
+}
+
+function mdChapterIdFromUrl(u) {
+  try {
+    const url = new URL(String(u || ""));
+    const m = String(url.pathname || "").match(/\/chapter\/([a-f0-9-]{8,})/i);
+    return m ? String(m[1] || "") : "";
+  } catch {
+    return "";
+  }
+}
+
+function isSameMangaDexChapter(a, b) {
+  const ca = mdChapterIdFromUrl(a);
+  const cb = mdChapterIdFromUrl(b);
+  return !!ca && !!cb && ca === cb;
+}
+
+function cancelTabWork(tabId, reason = "navigation") {
+  if (!Number.isFinite(tabId)) return;
+  const msg = String(reason || "navigation");
+  for (const [jid, ctx] of Array.from(pendingByJob.entries())) {
+    if ((ctx?.tabId || 0) !== tabId) continue;
+
+    const batchId = String(
+      ctx?.batchId || ctx?.metadata?.batch_id || "",
+    ).trim();
+    const imageKey = String(
+      ctx?.imageKey || ctx?.metadata?.image_id || "",
+    ).trim();
+    const batch = batchId
+      ? ensureBatch(batchId, tabId, ctx?.frameId || 0)
+      : null;
+
+    pendingByJob.delete(jid);
+    if (ctx?.metadata?.image_id) pendingByImage.delete(ctx.metadata.image_id);
+
+    if (batch && imageKey) {
+      batchMark(batchId, imageKey, { status: "aborted", lastError: msg });
+      batchUpdateToast(batch, "ยกเลิก");
+      batchFinalizeIfComplete(batch);
+      batchStopKeepAlive(batch);
+    }
+  }
+
+  for (const [iid, rec] of Array.from(pendingByImage.entries())) {
+    if ((rec?.tabId || 0) === tabId) pendingByImage.delete(iid);
+  }
+
+  for (const b of Array.from(batches.values())) {
+    if ((b?.tabId || 0) !== tabId) continue;
+    batchStopKeepAlive(b);
+  }
+}
+
+const MD_CACHE_TTL_MS = 15 * 60 * 1000;
+const mdCacheByKey = new Map();
+
+const MD_DATAURI_CACHE_TTL_MS = 15 * 60 * 1000;
+const MD_DATAURI_CACHE_MAX = 80;
+const mdDataUriCache = new Map();
+
+const API_BASE_FALLBACK = "";
+
+const KEEPALIVE_PORT_NAME = "TP_KEEPALIVE";
+const keepAlivePorts = new Set();
+
+function bytesToBase64(bytes) {
+  let binary = "";
+  const chunk = 0x8000;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  }
+  return btoa(binary);
+}
+
+async function blobToDataUri(blob, mimeOverride) {
+  const ab = await blob.arrayBuffer();
+  const mime = String(mimeOverride || blob.type || "application/octet-stream");
+  const b64 = bytesToBase64(new Uint8Array(ab));
+  return `data:${mime};base64,${b64}`;
+}
+
+async function fetchImageDataUriFromUrl(url, pageUrl) {
+  const u = String(url || "").trim();
+  if (!u) return "";
+  const res = await fetch(u, {
+    credentials: "include",
+    redirect: "follow",
+    cache: "force-cache",
+    referrer: pageUrl || "about:client",
+  });
+  if (!res.ok) throw new Error("HTTP " + res.status);
+  const ct = String(res.headers.get("content-type") || "");
+  const mime = ct.split(";")[0].trim();
+  if (mime && !mime.toLowerCase().startsWith("image/")) {
+    const body = await readLimitedText(res);
+    throw new Error(`Not an image: ${mime}${body ? ` - ${body}` : ""}`);
+  }
+  const blob = await res.blob();
+  if (blob.size < 64) throw new Error("Image too small");
+  if (blob.size > 25 * 1024 * 1024) throw new Error("Image too large");
+  return await blobToDataUri(blob, mime || blob.type);
+}
+
+function classifyJobError(msg) {
+  const m = String(msg || "").toLowerCase();
+  if (!m) return { permanent: false };
+  if (m.includes("no overlay data")) return { permanent: true };
+  if (m.includes("no image data")) return { permanent: true };
+  if (/\bhttp\s*(401|403|404|410)\b/.test(m) || /\b(401|403|404|410)\b/.test(m))
+    return { permanent: true };
+  if (m.includes("not an image")) return { permanent: true };
+  if (
+    m.includes("cannot identify image") ||
+    m.includes("image file is truncated")
+  )
+    return { permanent: true };
+  if (m.includes("unsupported") && m.includes("image"))
+    return { permanent: true };
+  if (
+    m.includes("rate limit") ||
+    m.includes("ratelimit") ||
+    m.includes("too many requests") ||
+    m.includes("http 429") ||
+    m.includes(" 429")
+  )
+    return { permanent: false };
+  if (
+    m.includes("http 503") ||
+    m.includes(" 503") ||
+    m.includes("overloaded") ||
+    m.includes("temporarily")
+  )
+    return { permanent: false };
+  if (m.includes("timeout")) return { permanent: false };
+  return { permanent: false };
+}
+
+function mdKeyFromUrl(url) {
+  try {
+    const u = new URL(String(url || ""));
+    const parts = u.pathname.split("/").filter(Boolean);
+    for (let i = parts.length - 3; i >= 0; i--) {
+      const seg = parts[i];
+      if (seg === "data" || seg === "data-saver") {
+        const hash = parts[i + 1] || "";
+        const file = parts[i + 2] || "";
+        if (hash && file) return `md:${seg}/${hash}/${file}`;
+      }
+    }
+  } catch {}
+  return null;
+}
+
+function mdScopeFromMode(mode) {
+  if (mode === "lens_text") return "text";
+  if (mode === "lens_images") return "images";
+  return String(mode || "");
+}
+
+function mdCacheKey(mdKey, lang, mode) {
+  const k = String(mdKey || "");
+  const l = String(lang || "");
+  const s = mdScopeFromMode(mode);
+  if (!k || !l || !s) return "";
+  return k + "::" + l + "::" + s;
+}
+
+function stripImageFields(res) {
+  if (!res || typeof res !== "object") return res;
+  const out = { ...res };
+  delete out.imageDataUri;
+  delete out.imageDataURI;
+  delete out.image;
+  delete out.imageUrl;
+  delete out.image_url;
+  delete out.imageURL;
+  return out;
+}
+
+function pruneMdCache(now = Date.now()) {
+  for (const [k, rec] of mdCacheByKey.entries()) {
+    if (!rec || now - rec.ts > MD_CACHE_TTL_MS) mdCacheByKey.delete(k);
+  }
+}
+
+function pruneMdDataUriCache(now = Date.now()) {
+  for (const [k, rec] of mdDataUriCache.entries()) {
+    if (!rec || now - rec.ts > MD_DATAURI_CACHE_TTL_MS)
+      mdDataUriCache.delete(k);
+  }
+  while (mdDataUriCache.size > MD_DATAURI_CACHE_MAX) {
+    const first = mdDataUriCache.keys().next().value;
+    if (first === undefined) break;
+    mdDataUriCache.delete(first);
+  }
+}
+
+async function readLimitedText(res, limit = 1600) {
+  try {
+    const txt = await res.text();
+    const s = String(txt || "").trim();
+    if (!s) return "";
+    return s.length > limit ? s.slice(0, limit) + "…" : s;
+  } catch {
+    return "";
+  }
+}
+
+async function submitJobViaRest(base, payload) {
+  const url = base.replace(/\/+$/, "") + "/translate";
+  const res = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    cache: "force-cache",
+    redirect: "follow",
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    const body = await readLimitedText(res);
+    throw new Error(
+      `REST submit failed: HTTP ${res.status}${body ? ` - ${body}` : ""}`,
+    );
+  }
+  const data = await res.json();
+  if (!data?.id) throw new Error("REST submit failed: no id");
+  ev("job.submit.rest", { id: data.id });
+  return data.id;
+}
+
+async function pollJobViaRest(
+  base,
+  jid,
+  { timeoutMs = 180000, intervalMs = 800 } = {},
+) {
+  const start = Date.now();
+  const url =
+    base.replace(/\/+$/, "") + "/translate/" + encodeURIComponent(jid);
+  let lastSt = null;
+  let ticks = 0;
+  while (true) {
+    const ctx0 = pendingByJob.get(jid);
+    if (!ctx0) return;
+    const curSess = ctx0?.tabId ? getTabSessionId(ctx0.tabId) : "";
+    const isStale = Boolean(
+      ctx0?.sessionId && curSess && ctx0.sessionId !== curSess,
+    );
+    if (isStale && !ctx0?.keepCacheOnStale) {
+      pendingByJob.delete(jid);
+      if (ctx0?.metadata?.image_id)
+        pendingByImage.delete(ctx0.metadata.image_id);
+      ev("job.done", {
+        id: jid,
+        dt: fmtMs(Date.now() - (ctx0?.startedAt || Date.now())),
+      });
+      const batchId = String(
+        ctx0?.batchId || ctx0?.metadata?.batch_id || "",
+      ).trim();
+      const imageKey = String(
+        ctx0?.imageKey || ctx0?.metadata?.image_id || "",
+      ).trim();
+      const batch = batchId
+        ? ensureBatch(batchId, ctx0.tabId || 0, ctx0.frameId || 0)
+        : null;
+      if (batch && imageKey) {
+        batchMark(batchId, imageKey, { status: "aborted" });
+        batchUpdateToast(batch, "ยกเลิก", true);
+        batchFinalizeIfComplete(batch);
+      }
+      return;
+    }
+
+    if (Date.now() - start > timeoutMs) throw new Error("REST poll timeout");
+    const res = await fetch(url, { cache: "no-store" });
+    if (!res.ok) {
+      const body = await readLimitedText(res);
+      throw new Error(
+        `REST poll failed: HTTP ${res.status}${body ? ` - ${body}` : ""}`,
+      );
+    }
+    const data = await res.json();
+    const st = data?.status;
+    const ctx = pendingByJob.get(jid);
+    if (!ctx) return;
+    const isImageMode = String(ctx?.mode || "") === "lens_images";
+    ticks++;
+    if (st && st !== lastSt) {
+      lastSt = st;
+      ev("job.poll.status", { id: jid, status: st });
+      if (isImageMode)
+        logImageRestAccessLine(base, url, res.status, res.statusText);
+    } else if (ticks % 15 === 0) {
+      ev("job.poll.tick", { id: jid, status: st || "" });
+    }
+    if (st === "done") {
+      ev("job.poll.done", { id: jid });
+      await handleResult(jid, data.result);
+      return;
+    } else if (st === "error") {
+      handleJobError(
+        jid,
+        String(data?.result || data?.error || data?.message || "Unknown error"),
+      );
+      return;
+    }
+    await new Promise((r) => setTimeout(r, intervalMs));
+  }
+}
+
+function runtimeBroadcast(msg) {
+  try {
+    chrome.runtime.sendMessage(msg, () => void chrome.runtime.lastError);
+  } catch {}
+}
+const broadcast = runtimeBroadcast;
+
+function pingContent(tabId, frameId = 0) {
+  return new Promise((resolve) => {
+    try {
+      chrome.tabs.sendMessage(tabId, { type: "TP_PING" }, { frameId }, () => {
+        const ok = !chrome.runtime.lastError;
+        resolve(ok);
+      });
+    } catch {
+      resolve(false);
+    }
+  });
+}
+
+async function ensureContentScript(tabId) {
+  const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+  try {
+    for (let i = 0; i < 8; i++) {
+      const ok = await pingContent(tabId, 0);
+      if (ok) return true;
+      await wait(120);
+    }
+    return false;
+  } catch (e) {
+    evWarn("ping.fail", { tabId, message: e?.message || String(e) });
+    return false;
+  }
+}
+
+async function sendToTab(tabId, message, frameId = 0) {
+  const type = String(message?.type || "");
+  const opts = { frameId: Number(frameId) || 0 };
+  const attempt = (o) =>
+    new Promise((resolve) => {
+      try {
+        chrome.tabs.sendMessage(tabId, message, o, (resp) => {
+          const err = chrome.runtime.lastError;
+          resolve({ ok: !err, err: err?.message || null, resp: resp || null });
+        });
+      } catch (e) {
+        resolve({ ok: false, err: e?.message || String(e), resp: null });
+      }
+    });
+
+  ev("tab.send.begin", { tabId, frameId, type });
+
+  let r = await attempt(opts);
+  if (r.ok) {
+    ev("tab.send.ok", { tabId, frameId, type });
+    return true;
+  }
+  evWarn("tab.send.fail", { tabId, frameId, type, err: r.err || "" });
+
+  if (opts.frameId) {
+    const r2 = await attempt({ frameId: 0 });
+    if (r2.ok) {
+      ev("tab.send.ok.fallback", { tabId, frameId: 0, type });
+      return true;
+    }
+    evWarn("tab.send.fail.fallback", { tabId, type, err: r2.err || "" });
+  }
+
+  const injected = await ensureContentScript(tabId);
+  if (!injected) return false;
+
+  r = await attempt(opts);
+  if (r.ok) {
+    ev("tab.send.ok.afterInject", { tabId, frameId, type });
+    return true;
+  }
+  evWarn("tab.send.fail.afterInject", {
+    tabId,
+    frameId,
+    type,
+    err: r.err || "",
+  });
+
+  if (opts.frameId) {
+    const r3 = await attempt({ frameId: 0 });
+    if (r3.ok) {
+      ev("tab.send.ok.afterInject.fallback", { tabId, frameId: 0, type });
+      return true;
+    }
+    evWarn("tab.send.fail.afterInject.fallback", {
+      tabId,
+      type,
+      err: r3.err || "",
+    });
+  }
+
+  return false;
+}
+
+async function requestFromTab(tabId, message, frameId = 0) {
+  const type = String(message?.type || "");
+  const attempt = (o) =>
+    new Promise((resolve) => {
+      try {
+        chrome.tabs.sendMessage(tabId, message, o, (resp) => {
+          const err = chrome.runtime.lastError;
+          if (err) {
+            evWarn("tab.request.fail", {
+              tabId,
+              frameId: o?.frameId ?? 0,
+              type,
+              err: err.message,
+            });
+            resolve(null);
+            return;
+          }
+          resolve(resp || null);
+        });
+      } catch (e) {
+        evWarn("tab.request.fail", {
+          tabId,
+          frameId: o?.frameId ?? 0,
+          type,
+          err: e?.message || String(e),
+        });
+        resolve(null);
+      }
+    });
+
+  const primary = { frameId: Number(frameId) || 0 };
+  const resp = await attempt(primary);
+  if (resp != null) return resp;
+  if (primary.frameId) return await attempt({ frameId: 0 });
+  return null;
+}
+
+async function requestFromTabEnsured(tabId, message, frameId = 0) {
+  const resp = await requestFromTab(tabId, message, frameId);
+  if (resp != null) return resp;
+  const ok = await ensureContentScript(tabId);
+  if (!ok) return null;
+  return await requestFromTab(tabId, message, frameId);
+}
+
+function sendToastToTab(tabId, frameId, text, ms = 1600) {
+  if (!tabId || !text) return;
+  const opts = { frameId: Number(frameId) || 0 };
+  try {
+    chrome.tabs.sendMessage(tabId, { type: "TP_TOAST", text, ms }, opts, () => {
+      void chrome.runtime.lastError;
+    });
+  } catch {}
+}
+
+function setWsStatus(s) {
+  if (wsStatus !== s) {
+    wsStatus = s;
+    try {
+      broadcast({ type: "WS_STATUS_UPDATE", status: s });
+    } catch (e) {}
+    info(`[WS] status -> ${s}`);
+  }
+}
+
+const warmupByBase = new Map();
+async function warmupApi(base) {
+  const b = normalizeUrl(base);
+  if (!b) return;
+  const now = Date.now();
+  const last = warmupByBase.get(b) || 0;
+  if (now - last < WARMUP_TTL_MS) return;
+  warmupByBase.set(b, now);
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), WARMUP_TIMEOUT_MS);
+  try {
+    await fetch(b.replace(/\/+$/, "") + WARMUP_PATH, {
+      method: "GET",
+      cache: "force-cache",
+      signal: controller.signal,
+    });
+    ev("api.warmup", { base: b });
+  } catch {
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
+const getApiBase = () =>
+  new Promise((res) => {
+    chrome.storage.local.get(
+      { customApiUrl: "", apiUrlDefault: API_BASE_FALLBACK },
+      ({ customApiUrl, apiUrlDefault }) => {
+        const base =
+          normalizeUrl(customApiUrl) ||
+          normalizeUrl(apiUrlDefault) ||
+          API_BASE_FALLBACK;
+        info("[getApiBase]", base);
+        warmupApi(base);
+        res(base);
+      },
+    );
+  });
+
+let healthCache = { ok: false, ts: 0, build: "" };
+
+function onceOpen(socket) {
+  return new Promise((resolve, reject) => {
+    const onOpen = () => {
+      cleanup();
+      resolve();
+    };
+    const onErr = (e) => {
+      cleanup();
+      reject(e);
+    };
+    const onClose = () => {
+      cleanup();
+      reject(new Error("ws-closed-before-open"));
+    };
+    function cleanup() {
+      socket.removeEventListener("open", onOpen);
+      socket.removeEventListener("error", onErr);
+      socket.removeEventListener("close", onClose);
+    }
+    socket.addEventListener("open", onOpen);
+    socket.addEventListener("error", onErr);
+    socket.addEventListener("close", onClose);
+  });
+}
+
+function withTimeout(promise, ms, label = "op") {
+  return new Promise((resolve, reject) => {
+    const t = setTimeout(() => reject(new Error(label + "-timeout")), ms);
+    promise.then(
+      (v) => {
+        clearTimeout(t);
+        resolve(v);
+      },
+      (e) => {
+        clearTimeout(t);
+        reject(e);
+      },
+    );
+  });
+}
+
+let wsPromise = null;
+
+async function preflightWs(base, timeoutMs = PREFLIGHT_TIMEOUT_MS) {
+  const tryOnce = async (url, method = "GET") => {
+    const ctrl = new AbortController();
+    const t = setTimeout(() => ctrl.abort(), timeoutMs);
+    try {
+      await fetch(url, { method, cache: "no-store", signal: ctrl.signal });
+      return true;
+    } catch (e) {
+      return false;
+    } finally {
+      clearTimeout(t);
+    }
+  };
+
+  const ok1 = await tryOnce(base.replace(/\/$/, "") + "/health", "GET");
+  if (ok1) return true;
+  const ok2 = await tryOnce(base.replace(/\/$/, "") + "/health", "HEAD");
+  return ok2;
+}
+
+async function connectWebSocketOnce() {
+  const t_start = t0();
+  ev("ws.connect.begin");
+  const base = await getApiBase();
+  const wsUrl = toWs(base);
+  if (!wsUrl) {
+    setWsStatus("idle");
+    return false;
+  }
+  if (
+    ws &&
+    (ws.readyState === WebSocket.OPEN ||
+      ws.readyState === WebSocket.CONNECTING) &&
+    currentBase === base
+  ) {
+    return ws.readyState === WebSocket.OPEN;
+  }
+
+  const reachable = await preflightWs(base, PREFLIGHT_TIMEOUT_MS);
+  if (!reachable) {
+    setWsStatus("offline");
+    evWarn("ws.preflight.fail", { base });
+    return false;
+  }
+
+  if (wsPromise) {
+    try {
+      await wsPromise;
+    } catch (e) {}
+    const ok = !!(ws && ws.readyState === WebSocket.OPEN);
+    ev(ok ? "ws.connect.ok" : "ws.connect.fail", { dt: fmtMs(t0() - t_start) });
+    return ok;
+  }
+
+  wsPromise = (async () => {
+    const TIMEOUT_MS = WS_OPEN_TIMEOUT_MS;
+    const RETRIES = WS_RETRIES;
+    let lastErr = null;
+
+    for (let attempt = 0; attempt <= RETRIES; attempt++) {
+      try {
+        if (ws) {
+          try {
+            ws.close();
+          } catch (e) {}
+        }
+        currentBase = base;
+        wsReady = false;
+        setWsStatus("connecting");
+        blockSendsBecauseWsEnded = false;
+
+        ws = new WebSocket(wsUrl);
+        ws.addEventListener("open", () => {
+          ev("ws.open", { url: wsUrl });
+          wsReady = true;
+          setWsStatus("connected");
+        });
+        ws.addEventListener("message", (ev) => {
+          try {
+            const msg = JSON.parse(ev.data);
+            switch (msg.type) {
+              case "ack":
+                break;
+              case "result":
+                void handleResult(msg.id, msg.result).catch((e) =>
+                  evWarn("job.result.handle.fail", {
+                    id: msg.id,
+                    err: e?.message || String(e),
+                  }),
+                );
+                break;
+              case "error":
+                handleJobError(msg.id, msg.error || "Unknown error");
+                break;
+              default:
+                warn("[ws] unknown msg", msg);
+            }
+          } catch (e) {
+            error("WS parse error", e);
+          }
+        });
+        const onEnded = (evx) => {
+          evWarn("ws.end", {
+            code: evx?.code,
+            reason: evx?.reason || evx?.message || evx,
+          });
+          wsReady = false;
+          blockSendsBecauseWsEnded = true;
+          failAllPending(
+            "Connection lost before all images finished. Please run the menu again.",
+          );
+          setWsStatus("idle");
+        };
+        ws.addEventListener("close", onEnded);
+        ws.addEventListener("error", onEnded);
+
+        await withTimeout(onceOpen(ws), TIMEOUT_MS, "ws-open");
+        return true;
+      } catch (e) {
+        lastErr = e;
+        try {
+          if (ws) ws.close();
+        } catch (e2) {}
+        ws = null;
+        wsReady = false;
+        setWsStatus("idle");
+        const base = 500;
+        const jitter = Math.floor(Math.random() * 300);
+        const waitMs = Math.min(5000, base * Math.pow(2, attempt)) + jitter;
+        if (attempt < RETRIES) await new Promise((r) => setTimeout(r, waitMs));
+      }
+    }
+    throw lastErr || new Error("ws-failed");
+  })();
+
+  try {
+    await wsPromise;
+  } finally {
+    wsPromise = null;
+  }
+  const ok = !!(ws && ws.readyState === WebSocket.OPEN);
+  ev(ok ? "ws.connect.ok" : "ws.connect.fail", { dt: fmtMs(t0() - t_start) });
+  return ok;
+}
+
+function addTask(fn) {
+  queue.push(fn);
+  next();
+}
+
+function next() {
+  if (!queue.length) return;
+  const max = effectiveMaxConcurrency();
+  if (max && running >= max) return;
+  running++;
+  const task = queue.shift();
+  Promise.resolve(task())
+    .catch(error)
+    .finally(() => {
+      running--;
+      next();
+    });
+}
+
+function failJobImmediately(tabId, jobId, imgUrl, message, frameId = 0) {
+  if (tabId) {
+    sendToTab(
+      tabId,
+      { type: "IMAGE_ERROR", original: imgUrl, message },
+      frameId,
+    );
+  }
+}
+
+function failAllPending(message) {
+  const jobIds = Array.from(pendingByJob.keys());
+  for (const jobId of jobIds) {
+    const ctx = pendingByJob.get(jobId);
+
+    const batchId = String(
+      ctx?.batchId || ctx?.metadata?.batch_id || "",
+    ).trim();
+    const imageKey = String(
+      ctx?.imageKey || ctx?.metadata?.image_id || "",
+    ).trim();
+    const batch = batchId
+      ? ensureBatch(batchId, ctx?.tabId || 0, ctx?.frameId || 0)
+      : null;
+
+    failJobImmediately(
+      ctx?.tabId,
+      jobId,
+      ctx?.imgUrl || null,
+      message,
+      ctx?.frameId || 0,
+    );
+    pendingByJob.delete(jobId);
+    ev("job.done", {
+      id: jobId,
+      dt: fmtMs(Date.now() - (ctx?.startedAt || Date.now())),
+    });
+
+    if (batch && imageKey) {
+      batchMark(batchId, imageKey, { status: "aborted", lastError: message });
+      batchUpdateToast(batch, "ยกเลิก");
+      batchFinalizeIfComplete(batch);
+    }
+  }
+  pendingByImage.clear();
+}
+
+function handleJobError(jobId, errMsg = "Unknown error") {
+  const cls = classifyJobError(errMsg);
+  const ctx = pendingByJob.get(jobId);
+  const curSess = ctx?.tabId ? getTabSessionId(ctx.tabId) : "";
+  const isStale = Boolean(
+    ctx?.sessionId && curSess && ctx.sessionId !== curSess,
+  );
+
+  const batchId = String(ctx?.batchId || ctx?.metadata?.batch_id || "").trim();
+  const imageKey = String(
+    ctx?.imageKey || ctx?.metadata?.image_id || "",
+  ).trim();
+  const batch = batchId
+    ? ensureBatch(batchId, ctx?.tabId || 0, ctx?.frameId || 0)
+    : null;
+
+  if (ctx?.tabId && !isStale)
+    sendToTab(
+      ctx.tabId,
+      { type: "IMAGE_ERROR", original: ctx.imgUrl, message: errMsg },
+      ctx.frameId || 0,
+    );
+
+  pendingByJob.delete(jobId);
+  ev("job.done", {
+    id: jobId,
+    dt: fmtMs(Date.now() - (ctx?.startedAt || Date.now())),
+  });
+  if (ctx?.metadata?.image_id) pendingByImage.delete(ctx.metadata.image_id);
+
+  if (batch && imageKey) {
+    batchMark(batchId, imageKey, {
+      status: "error",
+      lastError: errMsg,
+      permanent: !!cls?.permanent,
+    });
+    batchUpdateToast(batch, cls?.permanent ? "ผิดพลาด (ถาวร)" : "ผิดพลาด");
+    batchFinalizeIfComplete(batch);
+  }
+}
+
+async function handleResult(jobId, result) {
+  let ctx = pendingByJob.get(jobId);
+  if (!ctx && result?.metadata?.image_id) {
+    const mapped = pendingByImage.get(result.metadata.image_id);
+    ctx = typeof mapped === "string" ? pendingByJob.get(mapped) : mapped;
+  }
+  if (!ctx) {
+    evWarn("job.ctx.missing", {
+      id: jobId,
+      metaImageId: String(result?.metadata?.image_id || ""),
+    });
+    return;
+  }
+
+  const { imgUrl, tabId } = ctx;
+  const frameId = ctx.frameId || 0;
+  const mode = ctx.mode || ctx.metadata?.mode || null;
+
+  const batchId = String(ctx?.batchId || ctx?.metadata?.batch_id || "").trim();
+  const imageKey = String(
+    ctx?.imageKey ||
+      ctx?.metadata?.image_id ||
+      result?.metadata?.image_id ||
+      "",
+  ).trim();
+  const batch = batchId ? ensureBatch(batchId, tabId, frameId) : null;
+
+  ev("job.result.recv", {
+    id: jobId,
+    tabId,
+    frameId,
+    keys: Object.keys(result || {}),
+  });
+
+  const curSess = getTabSessionId(tabId);
+  const isSettingsStale =
+    typeof ctx?.settingsEpoch === "number" &&
+    ctx.settingsEpoch !== settingsEpoch;
+  const isStale =
+    Boolean(ctx?.sessionId && curSess && ctx.sessionId !== curSess) ||
+    isSettingsStale;
+
+  const newImg =
+    result?.imageDataUri ||
+    result?.imageDataURI ||
+    result?.image ||
+    result?.imageUrl ||
+    result?.image_url ||
+    result?.imageURL ||
+    null;
+  const aiHtml = result?.Ai?.aihtml || result?.ai?.aihtml || null;
+  const translatedHtml =
+    result?.translated?.translatedhtml || result?.translatedhtml || null;
+  const originalHtml =
+    result?.original?.originalhtml || result?.originalhtml || null;
+
+  const hasHtml = !!(aiHtml || translatedHtml || originalHtml);
+
+  const mdKey = mdKeyFromUrl(imgUrl);
+  const lang = ctx.lang || ctx.metadata?.lang || null;
+  const cacheKey = mdCacheKey(mdKey, lang, mode);
+  if (cacheKey && (newImg || hasHtml)) {
+    pruneMdCache();
+    const prev = mdCacheByKey.get(cacheKey) || {};
+    mdCacheByKey.set(cacheKey, {
+      newImg: newImg || prev.newImg || null,
+      result: hasHtml ? stripImageFields(result) : prev.result || null,
+      ts: Date.now(),
+    });
+  }
+
+  if (isStale) {
+    pendingByJob.delete(jobId);
+    if (result?.metadata?.image_id)
+      pendingByImage.delete(result.metadata.image_id);
+    ev("job.done", {
+      id: jobId,
+      dt: fmtMs(Date.now() - (ctx?.startedAt || Date.now())),
+    });
+    if (batch && imageKey) {
+      if (ctx?.keepCacheOnStale) {
+        batchMark(batchId, imageKey, { status: "done", cachedOnly: true });
+        batchUpdateToast(batch, "บันทึกแล้ว", true);
+        batchFinalizeIfComplete(batch);
+      } else {
+        batchMark(batchId, imageKey, { status: "aborted" });
+        batchUpdateToast(batch, "ยกเลิก", true);
+        batchFinalizeIfComplete(batch);
+      }
+    }
+    return;
+  }
+
+  if (batch && imageKey) {
+    batchMark(batchId, imageKey, { status: "inserting" });
+    batchUpdateToast(batch, "แทรกกลับ");
+  }
+
+  let replaceResp = null;
+  if (newImg && mode !== "lens_text") {
+    ev("job.result.image", { id: jobId });
+    replaceResp = await requestFromTabEnsured(
+      tabId,
+      { type: "REPLACE_IMAGE", original: imgUrl, newSrc: newImg },
+      frameId,
+    );
+  }
+
+  let overlayResp = null;
+  if (hasHtml) {
+    ev("job.result.html", { id: jobId });
+    overlayResp = await requestFromTabEnsured(
+      tabId,
+      {
+        type: "OVERLAY_HTML",
+        original: imgUrl,
+        result,
+        mode: mode || "",
+        source: ctx?.source || "",
+      },
+      frameId,
+    );
+  }
+
+  let ok = true;
+  let errMsg = "";
+  if (!hasHtml && !(newImg && mode !== "lens_text")) ok = false;
+  if (newImg && mode !== "lens_text" && !replaceResp?.ok) {
+    ok = false;
+    errMsg = "DOM replace failed";
+  }
+  if (hasHtml && !overlayResp?.ok) {
+    ok = false;
+    errMsg = "Overlay insert failed";
+  }
+
+  if (!hasHtml) {
+    const keys = Object.keys(result || {});
+    if (!newImg) {
+      evWarn("job.result.none", { id: jobId, keys });
+      await requestFromTabEnsured(
+        tabId,
+        {
+          type: "IMAGE_ERROR",
+          original: imgUrl,
+          message: "API returned no overlay data",
+        },
+        frameId,
+      );
+      ok = false;
+      errMsg = "API returned no overlay data";
+    } else {
+      ev("job.result.imageOnly", { id: jobId, mode: mode || "unknown" });
+    }
+  }
+
+  pendingByJob.delete(jobId);
+  ev("job.done", {
+    id: jobId,
+    dt: fmtMs(Date.now() - (ctx?.startedAt || Date.now())),
+  });
+  if (result?.metadata?.image_id)
+    pendingByImage.delete(result.metadata.image_id);
+
+  if (batch && imageKey) {
+    if (ok) {
+      batchMark(batchId, imageKey, { status: "done" });
+      batchUpdateToast(batch, "เสร็จ 1 ภาพ");
+    } else {
+      const cls = classifyJobError(errMsg);
+      batchMark(batchId, imageKey, {
+        status: "error",
+        lastError: errMsg || "Unknown error",
+        permanent: !!cls?.permanent,
+      });
+      batchUpdateToast(batch, cls?.permanent ? "ผิดพลาด (ถาวร)" : "ผิดพลาด");
+    }
+    batchFinalizeIfComplete(batch);
+  }
+}
+
+async function processJob(payload, tabId, frameId = 0) {
+  ev("job.enqueue", {
+    type: payload?.type,
+    menu: payload?.menu,
+    src: payload?.src ? "url" : "none",
+  });
+
+  if (!payload || typeof payload !== "object") return;
+
+  if (!payload.metadata || typeof payload.metadata !== "object")
+    payload.metadata = {};
+  const batchId = String(
+    payload.metadata.batch_id || currentBatchId || "",
+  ).trim();
+  if (batchId) payload.metadata.batch_id = batchId;
+  const imageKey = imageKeyFromPayload(payload);
+  const batch = batchId ? ensureBatch(batchId, tabId, frameId) : null;
+
+  const pageUrl = payload?.context?.page_url || "";
+  const isMd = isMangaDexPageUrl(pageUrl);
+
+  const originSession = String(
+    payload?.context?.tp_tab_session || payload?.metadata?.tp_tab_session || "",
+  ).trim();
+  const curSession = getTabSessionId(tabId);
+  if (originSession && curSession && originSession !== curSession && !isMd) {
+    if (batch && imageKey) {
+      batchMark(batchId, imageKey, {
+        status: "aborted",
+        lastError: "navigation",
+      });
+      batchUpdateToast(batch, "ยกเลิก");
+      batchFinalizeIfComplete(batch);
+      batchStopKeepAlive(batch);
+    }
+    return;
+  }
+
+  if (batch && imageKey) {
+    const it = batch.items.get(imageKey);
+    if (it) batch.items.set(imageKey, { ...it, status: "processing" });
+    batchUpdateToast(batch, "ประมวลผล");
+  }
+
+  const base = await getApiBase();
+  const preferRest = shouldPreferRest(base, payload?.mode, payload?.source);
+
+  const src = String(payload?.src || "").trim();
+  const shouldPrefetchDataUri =
+    !payload?.imageDataUri &&
+    Boolean(src) &&
+    (/^(?:https?:|blob:|data:|file:|chrome-extension:)/i.test(src) ||
+      (payload?.mode === "lens_text" &&
+        String(payload?.source || "").toLowerCase() === "ai"));
+  if (shouldPrefetchDataUri) {
+    const key = normImgSrc(src);
+    pruneMdDataUriCache();
+    const cached = key ? mdDataUriCache.get(key) : null;
+    if (
+      cached?.du &&
+      Date.now() - (cached.ts || 0) <= MD_DATAURI_CACHE_TTL_MS
+    ) {
+      payload.imageDataUri = cached.du;
+      ev("image.datauri.cache.hit", { size: payload.imageDataUri.length });
+    } else {
+      try {
+        const du = src.startsWith("data:")
+          ? src
+          : await fetchImageDataUriFromUrl(src, pageUrl || "");
+        if (du) {
+          payload.imageDataUri = du;
+          if (key) mdDataUriCache.set(key, { du, ts: Date.now() });
+          const meta =
+            payload.metadata && typeof payload.metadata === "object"
+              ? payload.metadata
+              : (payload.metadata = {});
+          const pipe = Array.isArray(meta.pipeline) ? meta.pipeline : [];
+          meta.pipeline = pipe.concat({
+            stage: "prefetch_datauri",
+            at: new Date().toISOString(),
+          });
+          meta.timestamp = new Date().toISOString();
+          if (batch && imageKey) batchMark(batchId, imageKey, { payload });
+          ev("image.datauri.prefetch.ok", { size: du.length });
+        }
+      } catch (e) {
+        const msg = e?.message || String(e);
+        const cls = classifyJobError(msg);
+        evWarn("image.datauri.prefetch.fail", {
+          err: msg,
+          permanent: !!cls?.permanent,
+        });
+        if (cls?.permanent) {
+          if (payload?.metadata?.image_id)
+            pendingByImage.delete(payload.metadata.image_id);
+          if (batch && imageKey) {
+            batchMark(batchId, imageKey, {
+              status: "error",
+              lastError: msg,
+              permanent: true,
+            });
+            batchUpdateToast(batch, "ผิดพลาด (ถาวร)");
+            batchFinalizeIfComplete(batch);
+          }
+          const jobId = crypto.randomUUID();
+          failJobImmediately(tabId, jobId, payload?.src || null, msg, frameId);
+          return;
+        }
+      }
+    }
+  }
+
+  if (blockSendsBecauseWsEnded && !preferRest) {
+    const msg = "Connection closed. Please run the menu again.";
+    if (batch && imageKey) {
+      batchMark(batchId, imageKey, { status: "aborted", lastError: msg });
+      batchUpdateToast(batch, "ยกเลิก");
+      batchFinalizeIfComplete(batch);
+    }
+    const jobId = crypto.randomUUID();
+    failJobImmediately(tabId, jobId, payload?.src || null, msg, frameId);
+    return;
+  }
+  const sessionId = getTabSessionId(tabId) || bumpTabSession(tabId, pageUrl);
+
+  if (payload?.metadata?.image_id) {
+    pendingByImage.set(payload.metadata.image_id, {
+      imgUrl: payload.src,
+      tabId,
+      frameId,
+      mode: payload?.mode || null,
+      lang: payload?.lang || null,
+      source: payload?.source || null,
+      metadata: payload.metadata,
+      imageKey,
+      batchId,
+      pageUrl,
+      sessionId: originSession || sessionId,
+      keepCacheOnStale: isMd,
+      settingsEpoch,
+    });
+  }
+  if (preferRest) {
+    let jid = "";
+    try {
+      jid = await submitJobViaRest(base, payload);
+      pendingByJob.set(jid, {
+        imgUrl: payload.src,
+        tabId,
+        frameId,
+        mode: payload?.mode || null,
+        lang: payload?.lang || null,
+        source: payload?.source || null,
+        metadata: payload.metadata,
+        startedAt: Date.now(),
+        batchId,
+        imageKey,
+        pageUrl,
+        sessionId: originSession || sessionId,
+        keepCacheOnStale: isMd,
+        settingsEpoch,
+      });
+      await pollJobViaRest(base, jid);
+      return;
+    } catch (e) {
+      const msg = e?.message || String(e);
+      if (jid) {
+        handleJobError(jid, msg);
+        return;
+      }
+      if (payload?.metadata?.image_id)
+        pendingByImage.delete(payload.metadata.image_id);
+      if (batch && imageKey) {
+        const cls = classifyJobError(msg);
+        batchMark(batchId, imageKey, {
+          status: "error",
+          lastError: msg,
+          permanent: !!cls?.permanent,
+        });
+        batchUpdateToast(batch, cls?.permanent ? "ผิดพลาด (ถาวร)" : "ผิดพลาด");
+        batchFinalizeIfComplete(batch);
+      }
+      const jobId = crypto.randomUUID();
+      failJobImmediately(tabId, jobId, payload?.src || null, msg, frameId);
+      return;
+    }
+  }
+
+  for (let attempt = 0; attempt <= MAX_FIRST_TRY_RETRIES; attempt++) {
+    if (!wsReady || !ws || ws.readyState !== WebSocket.OPEN) {
+      const connected = await connectWebSocketOnce();
+      if (!connected) {
+        if (attempt < MAX_FIRST_TRY_RETRIES) {
+          await new Promise((r) => setTimeout(r, FIRST_TRY_GAP_MS));
+          continue;
+        } else {
+          let jid = "";
+          try {
+            jid = await submitJobViaRest(base, payload);
+            pendingByJob.set(jid, {
+              imgUrl: payload.src,
+              tabId,
+              frameId,
+              mode: payload?.mode || null,
+              lang: payload?.lang || null,
+              source: payload?.source || null,
+              metadata: payload.metadata,
+              startedAt: Date.now(),
+              batchId,
+              imageKey,
+              pageUrl,
+              sessionId: originSession || sessionId,
+              keepCacheOnStale: isMd,
+              settingsEpoch,
+            });
+            await pollJobViaRest(base, jid);
+            return;
+          } catch (e) {
+            const msg = e?.message || String(e);
+            if (jid) {
+              handleJobError(jid, msg);
+              return;
+            }
+            if (payload?.metadata?.image_id)
+              pendingByImage.delete(payload.metadata.image_id);
+            if (batch && imageKey) {
+              const cls = classifyJobError(msg);
+              batchMark(batchId, imageKey, {
+                status: "error",
+                lastError: msg,
+                permanent: !!cls?.permanent,
+              });
+              batchUpdateToast(
+                batch,
+                cls?.permanent ? "ผิดพลาด (ถาวร)" : "ผิดพลาด",
+              );
+              batchFinalizeIfComplete(batch);
+            }
+            const jobId = crypto.randomUUID();
+            failJobImmediately(
+              tabId,
+              jobId,
+              payload?.src || null,
+              msg,
+              frameId,
+            );
+            return;
+          }
+        }
+      }
+    }
+
+    const jobId = crypto.randomUUID();
+    pendingByJob.set(jobId, {
+      imgUrl: payload.src,
+      tabId,
+      frameId,
+      mode: payload?.mode || null,
+      lang: payload?.lang || null,
+      source: payload?.source || null,
+      metadata: payload.metadata,
+      startedAt: Date.now(),
+      batchId,
+      imageKey,
+      pageUrl,
+      sessionId: originSession || sessionId,
+      keepCacheOnStale: isMd,
+      settingsEpoch,
+    });
+    try {
+      ev("job.send", { id: jobId });
+      ws.send(JSON.stringify({ type: "job", id: jobId, payload }));
+      return;
+    } catch (e) {
+      handleJobError(jobId, "Send failed: " + (e?.message || e));
+      if (attempt < MAX_FIRST_TRY_RETRIES) {
+        await new Promise((r) => setTimeout(r, FIRST_TRY_GAP_MS));
+        continue;
+      } else {
+        return;
+      }
+    }
+  }
+}
+
+const enqueue = (payload, tabId, frameId = 0) => {
+  const expected = String(
+    payload?.context?.tp_tab_session || payload?.metadata?.tp_tab_session || "",
+  ).trim();
+  addTask(() => {
+    const cur = getTabSessionId(tabId);
+    if (expected && (!cur || expected !== cur)) return;
+    return processJob(payload, tabId, frameId);
+  });
+};
+
+function recreateMenus() {
+  chrome.contextMenus.removeAll(() => {
+    chrome.contextMenus.create({
+      id: "img_one",
+      title: "🔍 Translate this image",
+      contexts: ["image"],
+    });
+    chrome.contextMenus.create({
+      id: "img_all",
+      title: "🔍 Translate all images on page",
+      contexts: ["page", "selection"],
+    });
+  });
+}
+
+async function getSettings() {
+  return new Promise((res) => {
+    chrome.storage.local.get(
+      [
+        "mode",
+        "lang",
+        "sources",
+        "maxConcurrency",
+        "aiKey",
+        "aiModel",
+        "aiPromptByLang",
+        "aiPrompt",
+      ],
+      (it) => {
+        MAX_CONCURRENCY =
+          Number(it.maxConcurrency) >= 0 ? Number(it.maxConcurrency) : 0;
+        const lang = typeof it.lang === "string" ? it.lang : "en";
+        const aiModel = normalizeAiModel(
+          typeof it.aiModel === "string" ? it.aiModel : "auto",
+        );
+        const rawMap =
+          it.aiPromptByLang && typeof it.aiPromptByLang === "object"
+            ? it.aiPromptByLang
+            : {};
+        const mig = migratePromptMap(rawMap);
+        const map = mig.map;
+        const key = makePromptKey(lang, aiModel);
+        const autoKey = makePromptKey(lang, "auto");
+        let changed = mig.changed;
+        let aiPrompt = Object.prototype.hasOwnProperty.call(map, key)
+          ? String(map[key] || "")
+          : "";
+        if (!aiPrompt && Object.prototype.hasOwnProperty.call(map, autoKey)) {
+          aiPrompt = String(map[autoKey] || "");
+          if (key !== autoKey) {
+            map[key] = aiPrompt;
+            changed = true;
+          }
+        }
+        if (!aiPrompt) {
+          const legacy = typeof it.aiPrompt === "string" ? it.aiPrompt : "";
+          if (legacy) {
+            aiPrompt = legacy;
+            map[key] = legacy;
+            changed = true;
+          }
+        }
+        aiPrompt = normalizePrompt(aiPrompt);
+        if (changed) {
+          map[key] = aiPrompt;
+          chrome.storage.local.set({ aiPromptByLang: map, aiPrompt: "" });
+        }
+        res({
+          mode: typeof it.mode === "string" ? it.mode : "lens_images",
+          lang,
+          sources: typeof it.sources === "string" ? it.sources : "translated",
+          aiKey: typeof it.aiKey === "string" ? it.aiKey : "",
+          aiModel,
+          aiPrompt,
+        });
+      },
+    );
+  });
+}
+
+chrome.contextMenus.onClicked.addListener(async (menuInfo, tab) => {
+  ev("menu.click", { id: menuInfo.menuItemId });
+  try {
+    if (tab?.id) await ensureContentScript(tab.id);
+    const tabSessionId = tab?.id
+      ? ensureTabSession(tab.id, tab?.url || "")
+      : "";
+    const { mode, lang, sources, aiKey, aiModel, aiPrompt } =
+      await getSettings();
+    const source =
+      mode === "lens_text" ? sources || "translated" : "translated";
+    const aiPayload =
+      mode === "lens_text" && source === "ai"
+        ? {
+            api_key: aiKey || "",
+            model: aiModel || "auto",
+            prompt: aiPrompt || "",
+          }
+        : null;
+    forceSoftMaxConcurrency = mode === "lens_text" && source === "ai";
+    softMaxConcurrency = forceSoftMaxConcurrency
+      ? aiSoftMaxConcurrencyFromKey(aiKey)
+      : SOFT_MAX_CONCURRENCY_DEFAULT;
+    ev("batch.concurrency", {
+      soft: softMaxConcurrency,
+      max: MAX_CONCURRENCY || "unlimited",
+    });
+    currentBatchId = crypto.randomUUID();
+    blockSendsBecauseWsEnded = false;
+    const base = await getApiBase();
+    const preferRest = shouldPreferRest(base, mode, source);
+    if (!preferRest) {
+      const connected = await connectWebSocketOnce();
+      if (!connected) {
+        evWarn("ws.unavailable.fallback_rest");
+      }
+    }
+
+    let originalUrl = menuInfo.srcUrl;
+    const frameId = Number(menuInfo.frameId) || 0;
+    const scanFrameId = 0;
+    sendToastToTab(
+      tab?.id,
+      menuInfo.menuItemId === "img_all" ? scanFrameId : frameId,
+      menuInfo.menuItemId === "img_all"
+        ? "TextPhantom: กำลังรับภาพ…"
+        : "TextPhantom: กำลังประมวลผล…",
+      60000,
+    );
+    if (
+      tab?.url?.includes("mangadex.org") &&
+      originalUrl?.startsWith("blob:")
+    ) {
+      try {
+        const resp = await requestFromTab(
+          tab.id,
+          { type: "RESOLVE_AND_REPLACE_MANGADEX_BLOB", blobUrl: originalUrl },
+          frameId,
+        );
+        if (resp?.resolved) originalUrl = resp.resolved;
+      } catch (e) {
+        warn("resolve MangaDex blob error", e);
+      }
+    }
+
+    if (menuInfo.menuItemId === "img_one" && tab?.id) {
+      try {
+        await sendToTab(
+          tab.id,
+          { type: "TP_KEEPALIVE_START", ms: 10 * 60 * 1000 },
+          frameId,
+        );
+      } catch {}
+
+      let payload = null;
+      const wantsContextPayload =
+        !originalUrl || /^(?:blob:|data:|file:|chrome-extension:)/i.test(String(originalUrl || ""));
+      if (wantsContextPayload) {
+        try {
+          const resp = await requestFromTab(
+            tab.id,
+            { type: "GET_CONTEXT_IMAGE_PAYLOAD" },
+            frameId,
+          );
+          if (resp?.ok && resp?.payload) payload = resp.payload;
+        } catch (e) {
+          evWarn("context.payload.fail", { err: e?.message || String(e) });
+        }
+      }
+
+      const metadata0 =
+        payload?.metadata && typeof payload.metadata === "object"
+          ? payload.metadata
+          : {};
+      const pipeline0 = Array.isArray(metadata0.pipeline) ? metadata0.pipeline : [];
+      const imageId = String(metadata0.image_id || "").trim() || crypto.randomUUID();
+      const sourceUrl = payload?.src || originalUrl || null;
+
+      payload = {
+        ...(payload && typeof payload === "object" ? payload : {}),
+        mode,
+        lang,
+        type: "image",
+        src: sourceUrl,
+        imageDataUri:
+          typeof payload?.imageDataUri === "string" && payload.imageDataUri
+            ? payload.imageDataUri
+            : null,
+        menu: "img_one",
+        source,
+        ai: aiPayload,
+        context: {
+          ...(payload?.context && typeof payload.context === "object"
+            ? payload.context
+            : {}),
+          page_url: tab?.url || null,
+          timestamp: new Date().toISOString(),
+          tp_tab_session: tabSessionId,
+        },
+        metadata: {
+          ...metadata0,
+          image_id: imageId,
+          batch_id: currentBatchId,
+          original_image_url: sourceUrl,
+          position: metadata0.position || null,
+          ocr_image: null,
+          extra: null,
+          pipeline: pipeline0.concat({
+            stage: "context_menu_single",
+            at: new Date().toISOString(),
+          }),
+          timestamp: new Date().toISOString(),
+        },
+      };
+
+      if (
+        !payload.imageDataUri &&
+        String(sourceUrl || "").startsWith("blob:")
+      ) {
+        try {
+          const du = await fetchImageDataUriFromUrl(sourceUrl, tab?.url || null);
+          if (du) payload.imageDataUri = du;
+          ev("image.datauri.ok", { size: du ? du.length : 0 });
+        } catch (e) {
+          evWarn("image.datauri.fail", { err: e?.message || String(e) });
+        }
+      }
+
+      if (!payload.src && !payload.imageDataUri) return;
+
+      const b = ensureBatch(currentBatchId, tab.id, frameId);
+      b.total1 = 1;
+      const k = imageKeyFromPayload(payload);
+      if (k)
+        b.items.set(k, {
+          payload,
+          attempt: 1,
+          status: "queued",
+          lastError: "",
+        });
+      batchUpdateToast(b, "รับภาพ", true);
+
+      enqueue(payload, tab.id, frameId);
+      return;
+    }
+
+    if (menuInfo.menuItemId === "img_all" && tab?.id) {
+      try {
+        await sendToTab(
+          tab.id,
+          { type: "TP_KEEPALIVE_START", ms: 10 * 60 * 1000 },
+          scanFrameId,
+        );
+      } catch {}
+      let images = [];
+      let imagesFrameId = scanFrameId;
+      try {
+        images = await requestFromTab(
+          tab.id,
+          { type: "GET_IMAGES" },
+          scanFrameId,
+        );
+        if ((!images || !images.length) && frameId) {
+          const alt = await requestFromTab(
+            tab.id,
+            { type: "GET_IMAGES" },
+            frameId,
+          );
+          if (Array.isArray(alt) && alt.length) {
+            images = alt;
+            imagesFrameId = frameId;
+          }
+        }
+      } catch (e) {
+        error("GET_IMAGES failed", e);
+      }
+      let payloads = (Array.isArray(images) ? images : [])
+        .map((meta) => {
+          const m = meta?.metadata || {};
+          const imageId = m.image_id || crypto.randomUUID();
+          const src = m.original_image_url || meta.src || "";
+          return {
+            mode,
+            lang,
+            type: "image",
+            src: src || null,
+            imageDataUri:
+              typeof meta?.imageDataUri === "string" && meta.imageDataUri
+                ? meta.imageDataUri
+                : typeof m.imageDataUri === "string" && m.imageDataUri
+                  ? m.imageDataUri
+                  : null,
+            menu: "img_all",
+            source,
+            ai: aiPayload,
+            context: {
+              page_url: tab?.url || null,
+              timestamp: new Date().toISOString(),
+              tp_tab_session: tabSessionId,
+            },
+            metadata: {
+              image_id: imageId,
+              batch_id: currentBatchId,
+              original_image_url: src || null,
+              position: m.position || null,
+              ocr_image: null,
+              extra: null,
+              pipeline: (Array.isArray(m.pipeline) ? m.pipeline : []).concat({
+                stage: "context_menu_all",
+                at: new Date().toISOString(),
+              }),
+              timestamp: new Date().toISOString(),
+            },
+          };
+        })
+        .filter((p) => !!(p.src || p.imageDataUri));
+
+      const seen = new Set();
+      const uniq = [];
+      for (const pl of payloads) {
+        const k = imageKeyFromPayload(pl);
+        if (!k || seen.has(k)) continue;
+        seen.add(k);
+        uniq.push(pl);
+      }
+      payloads = uniq;
+
+      const b = ensureBatch(currentBatchId, tab.id, imagesFrameId);
+      b.total1 = payloads.length;
+      for (const pl of payloads) {
+        const k = imageKeyFromPayload(pl);
+        if (!k || b.items.has(k)) continue;
+        b.items.set(k, {
+          payload: pl,
+          attempt: 1,
+          status: "queued",
+          lastError: "",
+        });
+      }
+      batchUpdateToast(b, "รับภาพ", true);
+
+      payloads.forEach((p) => enqueue(p, tab.id, imagesFrameId));
+      return;
+    }
+  } catch (e) {
+    error("[menu] handler error", e);
+  }
+});
+
+chrome.runtime.onConnect.addListener((port) => {
+  if (!port || port.name !== KEEPALIVE_PORT_NAME) return;
+  keepAlivePorts.add(port);
+  const tabId = port.sender?.tab?.id;
+  const frameId = port.sender?.frameId;
+  try {
+    port.onMessage.addListener(() => void 0);
+    port.onDisconnect.addListener(() => {
+      keepAlivePorts.delete(port);
+      if (!Number.isFinite(tabId)) return;
+      if (Number.isFinite(frameId) && frameId !== 0) return;
+      bumpTabSession(tabId, "");
+      cancelTabWork(tabId, "page_unloaded");
+    });
+  } catch {
+    keepAlivePorts.delete(port);
+  }
+});
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (!Number.isFinite(tabId)) return;
+  if (changeInfo.status !== "loading") return;
+  const href = changeInfo.url || tab?.url || "";
+
+  if (isMangaDexPageUrl(href)) return;
+
+  bumpTabSession(tabId, href);
+  cancelTabWork(tabId, "navigation");
+});
+
+chrome.tabs.onRemoved.addListener((tabId) => {
+  cancelTabWork(tabId, "tab_closed");
+  tabSessionById.delete(tabId);
+});
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  const t = String(msg?.type || "");
+
+  if (t === "GET_WS_STATUS") {
+    sendResponse({ status: wsStatus, ready: wsReady });
+    return true;
+  }
+
+  if (t === "GET_BATCH_STATUS") {
+    sendResponse({ ok: true, batch: lastBatchStatus });
+    return true;
+  }
+
+  if (t === "GET_API_STATUS") {
+    sendResponse({
+      ok: healthCache.ok,
+      ts: healthCache.ts,
+      build: healthCache.build,
+    });
+    return true;
+  }
+
+  if (t === "API_URL_CHANGED") {
+    try {
+      ws?.close(1000, "api_url_changed");
+    } catch {}
+    ws = null;
+    wsReady = false;
+    wsPromise = null;
+    wsStatus = "disconnected";
+    blockSendsBecauseWsEnded = false;
+    healthCache.ts = 0;
+    connectWebSocketOnce().catch(() => {});
+    getApiBase()
+      .then((b) => warmupApi(b))
+      .catch(() => {});
+    sendResponse({ ok: true });
+    return true;
+  }
+
+  if (t === "TP_CONTENT_READY") {
+    const tabId = sender?.tab?.id;
+    if (msg?.top && Number.isFinite(tabId)) {
+      ensureTabSession(tabId, msg?.href);
+    }
+    ev("content.ready", {
+      tabId: sender?.tab?.id || 0,
+      frameId: sender?.frameId || 0,
+      href: String(msg?.href || ""),
+      ver: String(msg?.ver || ""),
+      top: Boolean(msg?.top),
+    });
+    sendResponse({ ok: true });
+    return true;
+  }
+
+  if (t === "TP_LOCATION_CHANGED") {
+    const tabId = sender?.tab?.id;
+    if (msg?.top && Number.isFinite(tabId)) {
+      ensureTabSession(tabId, msg?.href);
+    }
+    sendResponse({ ok: true });
+    return true;
+  }
+
+  if (t === "TP_MD_CACHE_GET") {
+    pruneMdCache();
+    const includeNewImg = Boolean(msg?.includeNewImg);
+    const lang = typeof msg?.lang === "string" ? msg.lang : "";
+    const mode = typeof msg?.mode === "string" ? msg.mode : "";
+    if (!lang || !mode) {
+      sendResponse({ items: {} });
+      return true;
+    }
+    const rawKeys = Array.isArray(msg?.keys) ? msg.keys : [];
+    const keys = rawKeys.slice(0, includeNewImg ? 6 : 600);
+    const items = {};
+    for (const k of keys) {
+      const mdKey = String(k || "");
+      if (!mdKey) continue;
+      const cacheKey = mdCacheKey(mdKey, lang, mode);
+      if (!cacheKey) continue;
+      const rec = mdCacheByKey.get(cacheKey);
+      if (!rec) continue;
+      const derivedNewImg =
+        rec.newImg ||
+        rec?.result?.imageDataUri ||
+        rec?.result?.imageDataURI ||
+        rec?.result?.image ||
+        rec?.result?.imageUrl ||
+        rec?.result?.image_url ||
+        rec?.result?.imageURL ||
+        null;
+      const hasNewImg = Boolean(derivedNewImg);
+      items[mdKey] = {
+        hasNewImg,
+        result: stripImageFields(rec.result),
+        ...(includeNewImg ? { newImg: derivedNewImg } : {}),
+      };
+    }
+    sendResponse({ items });
+    return true;
+  }
+
+  if (t === "TP_LOG") {
+    const lvl = String(msg?.level || "info");
+    const data = msg?.data || {};
+    const line = "[content] " + String(msg?.msg || "");
+    if (lvl === "error") error(line, data);
+    else if (lvl === "warn") warn(line, data);
+    else info(line, data);
+    sendResponse({ ok: true });
+    return true;
+  }
+
+  if (t === "CANCEL_BATCH") {
+    try {
+      const bid = String(msg.batchId || "");
+      if (bid && typeof pendingByJob?.keys === "function") {
+        for (const [jid, rec] of Array.from(pendingByJob.entries())) {
+          if (rec?.batchId === bid) pendingByJob.delete(jid);
+        }
+      }
+      sendResponse({ success: true });
+    } catch (e) {
+      sendResponse({ success: false, error: String((e && e.message) || e) });
+    }
+    return true;
+  }
+
+  if (t === "fetchImageBlob") {
+    (async () => {
+      try {
+        const u = String(msg.url || "").trim();
+        const res = await fetch(u, {
+          credentials: "include",
+          redirect: "follow",
+          referrer: msg.pageUrl || "about:client",
+        });
+        if (!res.ok) throw new Error("HTTP " + res.status);
+        const blob = await res.blob();
+        const dataUrl = await blobToDataUri(blob);
+        const comma = dataUrl.indexOf(",");
+        sendResponse({
+          success: true,
+          blobData: comma >= 0 ? dataUrl.slice(comma + 1) : "",
+          mimeType: blob.type || "application/octet-stream",
+        });
+      } catch (e) {
+        warn("fetchImageBlob failed", e);
+        sendResponse({
+          success: false,
+          error: e && e.message ? e.message : String(e),
+        });
+      }
+    })();
+    return true;
+  }
+
+  return false;
+});
+
+chrome.runtime.onInstalled.addListener(() => {
+  recreateMenus();
+  getApiBase()
+    .then((b) => warmupApi(b))
+    .catch(() => {});
+});
+
+chrome.runtime.onStartup?.addListener(() => {
+  recreateMenus();
+  getApiBase()
+    .then((b) => warmupApi(b))
+    .catch(() => {});
+});
+
+chrome.storage.local.get({ maxConcurrency: 0 }, ({ maxConcurrency }) => {
+  MAX_CONCURRENCY = Number(maxConcurrency) >= 0 ? Number(maxConcurrency) : 0;
+  const eff = effectiveMaxConcurrency();
+  info(
+    "MAX_CONCURRENCY =",
+    MAX_CONCURRENCY || "unlimited",
+    "soft =",
+    softMaxConcurrency,
+    "forceSoft =",
+    forceSoftMaxConcurrency,
+    "effective =",
+    eff || "unlimited",
+  );
+});

popup.html

@@ -0,0 +1,276 @@
+:root {
+  --bg: #f5f7fa;
+  --card-bg: rgba(255, 255, 255, 0.95);
+  --radius: 14px;
+  --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+  --border: 1px solid rgba(0, 0, 0, 0.06);
+  --radius-sm: 8px;
+  --transition: .25s cubic-bezier(.4, 0, .2, 1);
+  --text: #1f2d3a;
+  --muted: #6e7a89;
+  --focus: #5c9fff;
+  --input-bg: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f172a;
+    --card-bg: rgba(20, 30, 55, 0.9);
+    --text: #eef2f7;
+    --muted: #9aa3b1;
+    --border: 1px solid rgba(255, 255, 255, 0.07);
+    --shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.4);
+    --focus: #4d9fff;
+    --input-bg: rgba(255, 255, 255, 0.05);
+  }
+
+  option {
+    color: #000 !important;
+    background: #fff !important;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: var(--text);
+  min-width: 260px;
+  max-width: 360px;
+  width: auto;
+}
+
+body {
+  padding: 14px 16px;
+}
+
+.card {
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+  box-shadow: var(--shadow);
+  border: var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: background var(--transition), box-shadow var(--transition);
+}
+
+.card h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+label {
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 2px;
+}
+
+input[type="text"],
+input[type="password"],
+select,
+textarea {
+  appearance: none;
+  background: var(--input-bg);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: var(--radius-sm);
+  padding: 8px 10px;
+  font-size: 13px;
+  outline: none;
+  transition: border var(--transition), box-shadow var(--transition);
+  cursor: text;
+  width: 100%;
+  color: inherit;
+}
+
+select {
+  cursor: pointer;
+}
+
+.label-row {
+  justify-content: space-between;
+}
+
+.icon-btn {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: transparent;
+  border-radius: 999px;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+
+.icon-btn:focus {
+  outline: none;
+  border-color: var(--focus);
+  box-shadow: 0 0 0 3px rgba(92, 159, 255, 0.35);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--focus);
+  box-shadow: 0 0 0 3px rgba(92, 159, 255, 0.35);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 74px;
+  line-height: 1.25;
+  font-family: inherit;
+}
+
+.hint {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 2px;
+}
+
+.note {
+  font-size: 11px;
+  color: var(--muted);
+  margin-top: 4px;
+}
+
+label span#api-status-emoji {
+  font-size: 1.1em;
+  vertical-align: middle;
+}
+
+#reset-api {
+  background: transparent;
+  border: none;
+  padding: 4px;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--muted);
+  transition: color .2s ease;
+  border-radius: 6px;
+}
+
+#reset-api:hover {
+  color: var(--text);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+#ai-prompt-reset {
+  background: transparent;
+  border: none;
+  padding: 4px;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--muted);
+  transition: color .2s ease;
+  border-radius: 6px;
+}
+
+#ai-prompt-reset:hover {
+  color: var(--text);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+#ai-prompt-count {
+  text-align: right;
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+@media (max-width: 300px) {
+  body {
+    padding: 8px;
+  }
+
+  .card {
+    padding: 12px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+}
+.run-status {
+  font-size: 12px;
+  color: var(--text);
+  padding: 6px 8px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: var(--radius-sm);
+  background: var(--input-bg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.run-progress {
+  height: 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.run-progress-bar {
+  height: 100%;
+  background: var(--focus);
+  width: 0%;
+  transition: width var(--transition);
+}
+
+
+.file-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.action-btn {
+  appearance: none;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: var(--radius-sm);
+  background: var(--input-bg);
+  color: inherit;
+  padding: 8px 10px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border var(--transition), box-shadow var(--transition), background var(--transition);
+}
+
+.action-btn.secondary {
+  font-weight: 500;
+}
+
+.action-btn:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.action-btn:focus {
+  outline: none;
+  border-color: var(--focus);
+  box-shadow: 0 0 0 3px rgba(92, 159, 255, 0.35);
+}

popup.js

@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>TextPhantom OCR</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="stylesheet" href="popup.css" />
+  </head>
+  <body>
+    <div class="card">
+      <h2>TextPhantom OCR</h2>
+
+      <div class="field">
+        <label for="mode">Mode</label>
+        <select id="mode" aria-label="Mode"></select>
+      </div>
+
+      <div class="field" id="lang-wrap">
+        <label for="lang">Language</label>
+        <select id="lang" aria-label="Language"></select>
+      </div>
+
+      <div class="field" id="sources-wrap" style="display: none">
+        <label for="sources">Sources</label>
+        <select id="sources" aria-label="Sources"></select>
+      </div>
+
+      <div class="field" id="ai-key-wrap">
+        <label for="ai-key">AI Key (optional)</label>
+        <input
+          type="password"
+          id="ai-key"
+          placeholder="Paste your AI_API_KEY (Gemini/OpenRouter/HF/Groq/etc.)"
+        />
+        <div class="hint">
+          If empty, the extension will use translated overlay (no AI).
+        </div>
+      </div>
+
+      <div class="field" id="ai-model-wrap" style="display: none">
+        <label for="ai-model">AI Model (optional)</label>
+        <select id="ai-model" aria-label="AI Model"></select>
+      </div>
+
+      <div class="field" id="ai-prompt-wrap" style="display: none">
+        <label for="ai-prompt" class="label-row">
+          <span>AI Style (optional)</span>
+          <button
+            type="button"
+            id="ai-prompt-reset"
+            class="icon-btn"
+            title="Reset style for this language"
+            aria-label="Reset style for this language"
+            style="
+              background: none;
+              border: none;
+              padding: 4px;
+              font-size: 16px;
+              line-height: 1;
+              cursor: pointer;
+            "
+          >
+            ⟲
+          </button>
+        </label>
+        <textarea
+          id="ai-prompt"
+          rows="4"
+          placeholder="Your translation style notes. Leave empty to use language defaults."
+        ></textarea>
+        <div id="ai-prompt-count" class="prompt-count" aria-live="polite"></div>
+      </div>
+
+
+      <div class="field">
+        <label>Local Viewer</label>
+        <div class="file-actions">
+          <button type="button" id="open-local-images" class="action-btn">
+            Open image(s)
+          </button>
+          <button type="button" id="open-local-folder" class="action-btn secondary">
+            Open folder
+          </button>
+        </div>
+        <div class="hint">
+          Open local manga pages in a reader tab, then right-click an image to translate.
+        </div>
+        <input id="local-images-input" type="file" accept="image/*" multiple hidden />
+        <input id="local-folder-input" type="file" accept="image/*" multiple webkitdirectory hidden />
+      </div>
+
+      <div class="field">
+        <label for="api-url">
+          Custom API URL
+          <span
+            id="api-status-emoji"
+            aria-live="polite"
+            title="Loading…"
+            style="margin-left: 6px"
+            >⏳</span
+          >
+        </label>
+        <div
+          style="
+            position: relative;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+          "
+        >
+          <input
+            type="text"
+            id="api-url"
+            placeholder="https://plan291037-api-ocr-test.hf.space"
+          />
+          <button
+            id="reset-api"
+            aria-label="Reset to local"
+            title="Reset to local API"
+            style="
+              background: none;
+              border: none;
+              padding: 4px;
+              font-size: 16px;
+              line-height: 1;
+              cursor: pointer;
+            "
+          >
+            ⟲
+          </button>
+        </div>
+      </div>
+
+      <div class="field" id="run-status-wrap">
+        <label for="run-status-text">Run Status</label>
+        <div id="run-status-text" class="run-status" aria-live="polite">
+          Idle
+        </div>
+        <div
+          class="run-progress"
+          role="progressbar"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          aria-valuenow="0"
+        >
+          <div
+            id="run-progress-bar"
+            class="run-progress-bar"
+            style="width: 0%"
+          ></div>
+        </div>
+        <div id="run-status-sub" class="hint"></div>
+      </div>
+      <div class="note">Right-click an image to translate.</div>
+    </div>
+
+    <script type="module" src="popup.js"></script>
+  </body>
+</html>

prompt.js

@@ -0,0 +1,108 @@
+const DB_NAME = "textphantom_local_gallery";
+const DB_VERSION = 1;
+const STORE_NAME = "sessions";
+const IMAGE_PREFIX = "image/";
+
+let dbPromise = null;
+
+function openDb() {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, { keyPath: "id" });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error || new Error("indexeddb_open_failed"));
+  });
+  return dbPromise;
+}
+
+function txComplete(tx) {
+  return new Promise((resolve, reject) => {
+    tx.oncomplete = () => resolve();
+    tx.onabort = () => reject(tx.error || new Error("indexeddb_tx_aborted"));
+    tx.onerror = () => reject(tx.error || new Error("indexeddb_tx_failed"));
+  });
+}
+
+function trimString(v) {
+  return String(v || "").trim();
+}
+
+export function naturalCompare(a, b) {
+  return new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: "base",
+  }).compare(String(a || ""), String(b || ""));
+}
+
+export function sortLocalPages(pages) {
+  return [...(Array.isArray(pages) ? pages : [])].sort((a, b) => {
+    const pa = trimString(a?.relativePath || a?.name || a?.id);
+    const pb = trimString(b?.relativePath || b?.name || b?.id);
+    const byPath = naturalCompare(pa, pb);
+    if (byPath) return byPath;
+    return naturalCompare(a?.id, b?.id);
+  });
+}
+
+export function toLocalPageRecord(file, index = 0) {
+  const name = trimString(file?.name) || `image-${index + 1}`;
+  const type = trimString(file?.type) || "application/octet-stream";
+  const relativePath = trimString(file?.webkitRelativePath || "");
+  return {
+    id: crypto.randomUUID(),
+    name,
+    relativePath,
+    type,
+    size: Number(file?.size) || 0,
+    lastModified: Number(file?.lastModified) || 0,
+    blob: file,
+  };
+}
+
+export function filterImageFiles(files) {
+  return [...(files || [])].filter((file) => {
+    const type = trimString(file?.type).toLowerCase();
+    return type.startsWith(IMAGE_PREFIX);
+  });
+}
+
+export async function saveLocalSession(session) {
+  const db = await openDb();
+  const record = {
+    id: trimString(session?.id) || crypto.randomUUID(),
+    createdAt: Number(session?.createdAt) || Date.now(),
+    title: trimString(session?.title),
+    pages: Array.isArray(session?.pages) ? [...session.pages] : [],
+  };
+  const tx = db.transaction(STORE_NAME, 'readwrite');
+  tx.objectStore(STORE_NAME).put(record);
+  await txComplete(tx);
+  return record;
+}
+
+export async function loadLocalSession(id) {
+  const key = trimString(id);
+  if (!key) return null;
+  const db = await openDb();
+  return await new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, 'readonly');
+    const req = tx.objectStore(STORE_NAME).get(key);
+    req.onsuccess = () => resolve(req.result || null);
+    req.onerror = () => reject(req.error || new Error("indexeddb_get_failed"));
+  });
+}
+
+export async function deleteLocalSession(id) {
+  const key = trimString(id);
+  if (!key) return;
+  const db = await openDb();
+  const tx = db.transaction(STORE_NAME, 'readwrite');
+  tx.objectStore(STORE_NAME).delete(key);
+  await txComplete(tx);
+}

requirements.txt

@@ -1,7 +1,31 @@
-fastapi>=0.110
-uvicorn[standard]>=0.23
-httpx>=0.24
-numpy
-opencv-python-headless
-Pillow
-budoux
+---
+title: TextPhantom OCR API
+emoji: "🪄"
+colorFrom: indigo
+colorTo: pink
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+FastAPI backend for TextPhantom (Chrome extension).
+
+## Endpoints
+
+- `GET /health`
+- `GET /version`
+- `GET /warmup?lang=th`
+- `POST /translate`
+- `GET /translate/{job_id}`
+- `POST /ai/resolve`
+- `GET /ai/models`
+- `POST /ws` (WebSocket)
+
+## Environment
+
+- `AI_API_KEY` (optional)
+- `SERVER_MAX_WORKERS` (default: 15)
+- `JOB_TTL_SEC` (default: 3600)
+- `TP_DEBUG` (set to `1` to enable debug logs)
+
+For Spaces on small CPU, setting `SERVER_MAX_WORKERS=2` is usually enough.

server.py

@@ -0,0 +1,17 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends libgl1 libglib2.0-0 \
+  && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt ./requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend ./backend
+
+ENV PORT=7860
+EXPOSE 7860
+
+CMD ["bash", "-lc", "uvicorn backend.server:app --host 0.0.0.0 --port ${PORT}"]

settings_defaults.js

@@ -0,0 +1,44 @@
+const LEVELS = { debug: 0, info: 1, warn: 2, error: 3 };
+let CURRENT_LEVEL_NAME = "debug";
+
+try {
+  if (typeof window !== "undefined" && window.LOG_LEVEL)
+    CURRENT_LEVEL_NAME = String(window.LOG_LEVEL).toLowerCase();
+} catch {}
+
+const CURRENT_LEVEL = LEVELS[CURRENT_LEVEL_NAME] ?? 0;
+
+function formatTimestamp() {
+  return new Date().toISOString();
+}
+
+function safeSerialize(v) {
+  try {
+    if (typeof v === "string") {
+      return v.length > 500 ? v.slice(0, 500) + "…" : v;
+    }
+    return v;
+  } catch {
+    return v;
+  }
+}
+
+export function createLogger(namespace) {
+  function log(level, ...args) {
+    if (LEVELS[level] >= CURRENT_LEVEL) {
+      const prefix = `[${formatTimestamp()}][${namespace}][${level.toUpperCase()}]`;
+      const out = args.map(safeSerialize);
+      if (level === "debug") console.debug(prefix, ...out);
+      else if (level === "info") console.info(prefix, ...out);
+      else if (level === "warn") console.warn(prefix, ...out);
+      else if (level === "error") console.error(prefix, ...out);
+      else console.log(prefix, ...out);
+    }
+  }
+  return {
+    debug: (...a) => log("debug", ...a),
+    info: (...a) => log("info", ...a),
+    warn: (...a) => log("warn", ...a),
+    error: (...a) => log("error", ...a),
+  };
+}

url.js

@@ -0,0 +1,40 @@
+export const AI_PROMPT_MAX_CHARS = 1800;
+
+export function normalizeAiModel(model) {
+  const m = String(model || '').trim();
+  return m ? m : 'auto';
+}
+
+export function makePromptKey(lang, model) {
+  const l = String(lang || '').trim() || 'en';
+  const m = normalizeAiModel(model);
+  return `${l}::${m}`;
+}
+
+export function normalizePrompt(text, maxChars = AI_PROMPT_MAX_CHARS) {
+  let s = String(text ?? '');
+  s = s.replace(/\r\n?/g, '\n').trim();
+  if (s.length > maxChars) s = s.slice(0, maxChars).trimEnd();
+  return s;
+}
+
+export function migratePromptMap(input) {
+  if (!input || typeof input !== 'object') return { map: {}, changed: false };
+  const out = {};
+  let changed = false;
+  for (const [k, v] of Object.entries(input)) {
+    if (typeof v !== 'string') continue;
+    const raw = v;
+    const val = normalizePrompt(raw);
+    if (!val && !raw) continue;
+    if (k.includes('::')) {
+      out[k] = val;
+      if (val !== raw) changed = true;
+      continue;
+    }
+    const nk = makePromptKey(k, 'auto');
+    out[nk] = val;
+    changed = true;
+  }
+  return { map: out, changed };
+}

viewer.css

@@ -0,0 +1,17 @@
+export const DEFAULT_MODE = "lens_text";
+export const DEFAULT_LANG = "en";
+export const DEFAULT_SOURCE = "translated";
+
+export function normalizeMode(value) {
+  const v = String(value || "").trim();
+  return v === "lens_images" || v === "lens_text" ? v : DEFAULT_MODE;
+}
+
+export function normalizeLang(value) {
+  return String(value || "").trim() || DEFAULT_LANG;
+}
+
+export function normalizeSource(value) {
+  const v = String(value || "").trim().toLowerCase();
+  return v || DEFAULT_SOURCE;
+}

viewer.html

@@ -0,0 +1,24 @@
+export function normalizeUrl(raw) {
+  let url = (raw || "").trim();
+  if (!url) return "";
+  if (!/^https?:\/\//i.test(url)) url = "http://" + url;
+
+  try {
+    const cleaned = url.replace(/\/+$/, "");
+    const u = new URL(cleaned);
+    if (u.hostname === "0.0.0.0" || u.hostname === "127.0.0.1") {
+      u.hostname = "localhost";
+    } else if (u.hostname === "[::1]") {
+      u.hostname = "localhost";
+    }
+    return u.toString().replace(/\/+$/, "");
+  } catch {
+    return url.replace(/\/+$/, "");
+  }
+}
+
+export function toWs(httpBase) {
+  const base = normalizeUrl(httpBase);
+  if (!base) return "";
+  return base.replace(/^http/i, "ws") + "/ws";
+}