From 83fc9e6478151d0b440ee6440dec5b5e9eda162c Mon Sep 17 00:00:00 2001
From: heznpc <heznpc@gmail.com>
Date: Mon, 1 Jun 2026 22:17:06 +0900
Subject: [PATCH] fix(translate): inline lead-in dup + dark-mode FAB + sidebar
 i18n (v3.5.38)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Live debugging pass on anthropic.skilljar.com surfaced five issues:

- safeReplaceText duplicated text on inline lead-ins: a block like
  `<strong>Estimated time:</strong> 15 minutes` rendered as
  "Estimated time:예상 시간: 15분". It only rewrote direct child text
  nodes, leaving text inside inline children untranslated next to the
  full-element translation. Now writes the translation into the first
  meaningful descendant text node and blanks the rest (code/pre kept;
  inline <strong>/<a> preserved so links stay clickable). Unit-tested.
- Dark-mode FAB was #1a1a1a on a near-black page and disappeared; now a
  lightened accent with a white icon and a soft ring.
- "Course roadmap" widget (.crm-title / .crm-card-h) was outside the
  translatable selector set and its .crm wrapper stayed cream in dark
  mode; both addressed.
- resume.js touched chrome.storage with no guard, throwing an uncaught
  "Extension context invalidated" after an extension reload/update;
  now guarded + lastError-cleared.
- updateLocalizedLabels did not re-localize the Tools button, tools-menu
  items or example-question chips, so a post-build language switch left
  them frozen; now re-applied.

Adds tests/safe-replace-text.test.js (5 cases incl. the exact bug repro).
488/488 jest pass, lint/prettier/selectors/docs-sync clean.
---
 CHANGELOG.md                    |  9 ++++
 README.md                       |  2 +-
 docs/index.html                 |  4 +-
 manifest.json                   |  2 +-
 package.json                    |  2 +-
 src/content/content.css         | 28 ++++++++---
 src/content/content.js          | 61 ++++++++++++++++--------
 src/content/resume.js           | 50 ++++++++++++++++++--
 src/content/sidebar-chat.js     | 43 +++++++++++++++++
 src/data/de.json                |  2 +-
 src/data/es.json                |  2 +-
 src/data/fr.json                |  2 +-
 src/data/it.json                |  2 +-
 src/data/ja.json                |  2 +-
 src/data/ko.json                |  2 +-
 src/data/pt-BR.json             |  2 +-
 src/data/ru.json                |  2 +-
 src/data/vi.json                |  2 +-
 src/data/zh-CN.json             |  2 +-
 src/data/zh-TW.json             |  2 +-
 tests/safe-replace-text.test.js | 83 +++++++++++++++++++++++++++++++++
 21 files changed, 261 insertions(+), 45 deletions(-)
 create mode 100644 tests/safe-replace-text.test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e962b0c..d4e33c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [3.5.38] - 2026-06-01
+
+### Fixed — translation rendering & dark-mode polish (from a live debugging pass on anthropic.skilljar.com)
+- **No more duplicated text on inline lead-ins** — a paragraph like `<strong>Estimated time:</strong> 15 minutes` rendered as "Estimated time:예상 시간: 15분" (English original + translation side by side). `safeReplaceText` now writes the translation into the first descendant text node and clears every other one (code/pre preserved, inline elements like `<strong>`/`<a>` kept so links stay clickable), so any block with a bold/linked lead-in translates cleanly.
+- **Dark-mode floating button is visible again** — the AI Tutor launcher was `#1a1a1a` on a near-black page and effectively disappeared; it now uses a lightened accent with a white icon and a soft ring.
+- **"Course roadmap" widget translates** — the embedded `.crm-title` / `.crm-card-h` blocks were not in the translatable selector set (heading and step cards stayed English); they are now covered, and the `.crm` wrapper is re-skinned in dark mode instead of staying bright cream.
+- **No uncaught exception after an extension update** — `resume.js` now guards its `chrome.storage.local` calls against an invalidated context ("Extension context invalidated"), which previously surfaced as an uncaught error when a visit was recorded right after a reload/update.
+- **Language switch re-localizes the whole sidebar** — switching language after the Tutor sidebar was built left the Tools button, the tools-menu items and the example-question chips frozen at their build-time language; `updateLocalizedLabels` now re-applies all of them.
+
 ## [3.5.37] - 2026-06-01
 
 ### Fixed — learning-companion robustness (from code review)
diff --git a/README.md b/README.md
index 3168658..aab7229 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 <img src="assets/icons/icon128.png" alt="SkillBridge" width="90" />
 
-# SkillBridge — AI Course Translator <!-- VERSION_START -->v3.5.37<!-- VERSION_END -->
+# SkillBridge — AI Course Translator <!-- VERSION_START -->v3.5.38<!-- VERSION_END -->
 
 > Available in multiple languages at the [project landing page](https://heznpc.github.io/skillBridge/).
 
diff --git a/docs/index.html b/docs/index.html
index 0a6e66e..e23c88b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,7 +6,7 @@
   <title>SkillBridge — AI Course Translator for <!-- LANG_COUNT_START -->32+<!-- LANG_COUNT_END --> Languages</title>
   <meta name="description" content="Free Chrome extension to translate the free AI courses at anthropic.skilljar.com into <!-- LANG_COUNT_START -->32+<!-- LANG_COUNT_END --> languages with an in-page AI tutor. No API keys needed.">
   <meta property="og:title" content="SkillBridge — AI Course Translator">
-  <meta property="og:description" content="Translate the free AI courses at anthropic.skilljar.com into your language. <!-- VERSION_START -->v3.5.37<!-- VERSION_END -->.">
+  <meta property="og:description" content="Translate the free AI courses at anthropic.skilljar.com into your language. <!-- VERSION_START -->v3.5.38<!-- VERSION_END -->.">
   <meta property="og:type" content="website">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -255,7 +255,7 @@
 <body>
   <section class="hero">
     <div class="container">
-      <div class="hero-badge"><!-- VERSION_START -->v3.5.37<!-- VERSION_END --> &middot; Open Source &middot; Free &middot; No API Key</div>
+      <div class="hero-badge"><!-- VERSION_START -->v3.5.38<!-- VERSION_END --> &middot; Open Source &middot; Free &middot; No API Key</div>
       <h1>Translate AI Courses<br>Into Your Language</h1>
       <p>A Chrome extension that translates the free AI course pages at anthropic.skilljar.com into <!-- LANG_COUNT_START -->32+<!-- LANG_COUNT_END --> languages with an in-page AI tutor.</p>
       <p style="font-size:13px;opacity:0.85;margin-top:-16px;">Independent community project. Not affiliated with, endorsed by, or sponsored by Anthropic or Skilljar.</p>
diff --git a/manifest.json b/manifest.json
index 69d28ca..c562ce2 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_extName__",
   "description": "__MSG_extDescription__",
-  "version": "3.5.37",
+  "version": "3.5.38",
   "minimum_chrome_version": "124",
   "author": "SkillBridge Contributors",
   "homepage_url": "https://github.com/heznpc/skillbridge",
diff --git a/package.json b/package.json
index f82ef9e..a77b381 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "skillbridge",
-  "version": "3.5.37",
+  "version": "3.5.38",
   "private": true,
   "scripts": {
     "test": "jest --verbose",
diff --git a/src/content/content.css b/src/content/content.css
index 3fe72ea..a3b6038 100644
--- a/src/content/content.css
+++ b/src/content/content.css
@@ -1669,15 +1669,31 @@ html.si18n-dark .si18n-history-detail .si18n-chat-bubble code {
   background: rgba(255, 255, 255, 0.08) !important;
   color: #e0e0e0 !important;
 }
-/* Floating button in dark mode */
+/* Floating button in dark mode.
+   Was #1a1a1a on a near-black page (≈#0e0e0e) with a muted grey icon — the
+   launcher visually disappeared, so dark-mode users couldn't find the AI
+   Tutor entry point. Use a lightened tint of the brand accent with a white
+   icon and a soft light ring so it clearly reads against the dark canvas. */
 html.si18n-dark #skillbridge-fab {
-  background: #1a1a1a !important;
-  border-color: rgba(255, 255, 255, 0.1) !important;
-  color: #b0b0b0 !important;
+  background: #6b6f9e !important;
+  border: 1px solid rgba(255, 255, 255, 0.22) !important;
+  color: #ffffff !important;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55) !important;
 }
 html.si18n-dark #skillbridge-fab:hover {
-  background: #252525 !important;
-  color: #dedede !important;
+  background: #7c80b3 !important;
+  color: #ffffff !important;
+}
+
+/* Course-author "course roadmap" widget — its `.crm` wrapper ships a fixed
+   cream background, so in dark mode it rendered as a bright card floating on
+   the near-black page. Re-skin the wrapper + heading; the step cards
+   (.crm-c1…c5) carry their own colours and white text, so leave those. */
+html.si18n-dark .crm {
+  background: #1a1a1a !important;
+}
+html.si18n-dark .crm-title {
+  color: #ededed !important;
 }
 
 /* --- Enrolled Course Page — curriculum, lessons, progress --- */
diff --git a/src/content/content.js b/src/content/content.js
index bfd7e58..464b28c 100644
--- a/src/content/content.js
+++ b/src/content/content.js
@@ -110,6 +110,12 @@
     SKILLJAR_SELECTORS.faqTitle,
     `${SKILLJAR_SELECTORS.faqPost} p`,
     'div.title',
+    // Course-author "course roadmap" widget (embedded HTML block). Plain divs
+    // with text that `div.title` doesn't match — without these the roadmap
+    // heading and step cards stayed English while the rest of the lesson
+    // translated.
+    '.crm-title',
+    '.crm-card-h',
     `${SKILLJAR_SELECTORS.lessonRow} div.title, ${SKILLJAR_SELECTORS.lessonRow} .lesson-wrapper div`,
     SKILLJAR_SELECTORS.focusLink,
     SKILLJAR_SELECTORS.sectionTitle,
@@ -708,27 +714,44 @@
       return;
     }
 
-    const textNodes = [];
-    for (const node of el.childNodes) {
-      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().length > 0) {
-        textNodes.push(node);
-      }
+    // `newText` is the translation of the element's ENTIRE visible text,
+    // including any text that lives inside inline children (<strong>, <a>,
+    // <em>, …). We must therefore consider every descendant text node — not
+    // just the element's direct text-node children.
+    //
+    // The previous version only collected direct-child text nodes, so a block
+    // like `<p><strong>Estimated time:</strong> 15 minutes</p>` left the
+    // <strong> text untranslated and wrote the full translation into the
+    // trailing text node, rendering "Estimated time:예상 시간: 15분" — the
+    // English original and its translation duplicated side by side. Any
+    // paragraph with a bold/linked lead-in hit this.
+    //
+    // Writing the whole translation into the FIRST meaningful descendant text
+    // node and clearing every other one removes the duplication while keeping
+    // the inline elements in place (links stay clickable, the wrapping
+    // <strong> survives). Code/pre/script/style text is preserved untouched,
+    // so inline <code> fragments are never overwritten.
+    const meaningful = getTextNodes(el);
+    if (meaningful.length === 0) {
+      el.textContent = newText;
+      return;
     }
-
-    if (textNodes.length === 1) {
-      textNodes[0].textContent = newText;
-    } else if (textNodes.length > 1) {
-      textNodes[0].textContent = newText;
-      for (let i = 1; i < textNodes.length; i++) textNodes[i].textContent = '';
-    } else {
-      const deepTextNodes = getTextNodes(el);
-      if (deepTextNodes.length > 0) {
-        deepTextNodes[0].textContent = newText;
-        for (let i = 1; i < deepTextNodes.length; i++) deepTextNodes[i].textContent = '';
-      } else {
-        el.textContent = newText;
-      }
+    const target = meaningful[0];
+
+    // Blank ALL other descendant text nodes — not just the ones getTextNodes
+    // returns. getTextNodes skips sub-2-char nodes (punctuation), but those
+    // can still hold real original text inside a short inline tag (e.g.
+    // `<b>A</b>`) that would otherwise leak in next to the translation.
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+    const toBlank = [];
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      if (node === target) continue;
+      if (node.parentElement?.closest('code, pre, script, style')) continue;
+      toBlank.push(node);
     }
+    target.textContent = newText;
+    for (const node of toBlank) node.textContent = '';
   }
 
   // Local copy — gt-queue.js has its own (private to the GT pipeline).
diff --git a/src/content/resume.js b/src/content/resume.js
index ad64cdf..4b647f4 100644
--- a/src/content/resume.js
+++ b/src/content/resume.js
@@ -64,11 +64,37 @@
   // PERSISTENCE (chrome.storage.local)
   // ============================================================
 
+  // `chrome.runtime.id` goes undefined the moment the extension context is
+  // invalidated (dev reload, or an auto-update while this tab stays open).
+  // After that, touching `chrome.storage.*` throws "Extension context
+  // invalidated" synchronously. The old code called it unguarded, so a visit
+  // recorded right after an update surfaced an uncaught exception. Bail
+  // quietly instead — there is no live extension to persist to anyway.
+  function extensionAlive() {
+    try {
+      return !!chrome.runtime?.id;
+    } catch {
+      return false;
+    }
+  }
+
   function loadRecent(cb) {
-    chrome.storage.local.get([STORAGE_KEY], (res) => {
-      recent = Array.isArray(res[STORAGE_KEY]) ? res[STORAGE_KEY] : [];
+    if (!extensionAlive()) {
       if (cb) cb();
-    });
+      return;
+    }
+    try {
+      chrome.storage.local.get([STORAGE_KEY], (res) => {
+        if (chrome.runtime.lastError) {
+          if (cb) cb();
+          return;
+        }
+        recent = Array.isArray(res[STORAGE_KEY]) ? res[STORAGE_KEY] : [];
+        if (cb) cb();
+      });
+    } catch {
+      if (cb) cb();
+    }
   }
 
   let _saveQueue = Promise.resolve();
@@ -77,7 +103,23 @@
     data[STORAGE_KEY] = recent;
     _saveQueue = _saveQueue
       .catch(() => {})
-      .then(() => new Promise((resolve) => chrome.storage.local.set(data, resolve)));
+      .then(
+        () =>
+          new Promise((resolve) => {
+            if (!extensionAlive()) {
+              resolve();
+              return;
+            }
+            try {
+              chrome.storage.local.set(data, () => {
+                void chrome.runtime.lastError; // read to clear, ignore
+                resolve();
+              });
+            } catch {
+              resolve();
+            }
+          }),
+      );
   }
 
   // ============================================================
diff --git a/src/content/sidebar-chat.js b/src/content/sidebar-chat.js
index d4ea8da..9fb26ee 100644
--- a/src/content/sidebar-chat.js
+++ b/src/content/sidebar-chat.js
@@ -242,6 +242,49 @@
     if (sendBtn) sendBtn.textContent = sb.t(SEND_LABELS);
     const askLabel = document.querySelector('.si18n-ask-tutor-label');
     if (askLabel) askLabel.textContent = sb.t(ASK_TUTOR_LABELS);
+
+    // The sidebar chrome is built once and was previously not re-localized, so
+    // switching language after the sidebar existed left the tools button, the
+    // tools-menu items and the example-question chips frozen at their
+    // build-time language. Re-apply them here.
+    const toolsBtn = document.getElementById('si18n-tools-btn');
+    if (toolsBtn) {
+      const toolsLabel = sb.t(MENU_LABELS.tools);
+      toolsBtn.title = toolsLabel;
+      toolsBtn.setAttribute('aria-label', toolsLabel);
+    }
+    const closeBtn = document.getElementById('si18n-close');
+    if (closeBtn) closeBtn.setAttribute('aria-label', sb.t(A11Y_LABELS.closeSidebar));
+
+    const menuItems = [
+      ['si18n-recent-btn', sb.t(RESUME_LABELS.openRecent)],
+      ['si18n-bm-btn', sb.t(BOOKMARK_LABELS.openBookmarks)],
+      ['si18n-fc-btn', sb.t(FLASHCARD_LABELS.openFlashcards)],
+      ['si18n-history-btn', sb.t(A11Y_LABELS.chatHistory)],
+      ['si18n-pdf-btn', sb.t(PDF_EXPORT_LABELS.title)],
+    ];
+    for (const [id, label] of menuItems) {
+      const span = document.getElementById(id)?.querySelector('span');
+      if (span) span.textContent = label;
+    }
+
+    // Example-question chips are removed after the first one is clicked, so
+    // only rebuild while the container is still present. Build via DOM nodes
+    // (not innerHTML); the click handler is delegated on the container, so
+    // replacing the children keeps it bound.
+    const exampleContainer = document.getElementById('si18n-example-questions');
+    if (exampleContainer) {
+      const questions = sb.t(EXAMPLE_QUESTIONS) || EXAMPLE_QUESTIONS['en'];
+      exampleContainer.replaceChildren(
+        ...questions.map((q) => {
+          const chip = document.createElement('button');
+          chip.className = 'si18n-example-q';
+          chip.dataset.question = q;
+          chip.textContent = q;
+          return chip;
+        }),
+      );
+    }
   }
 
   // ============================================================
diff --git a/src/data/de.json b/src/data/de.json
index 087bb94..57b8fcf 100644
--- a/src/data/de.json
+++ b/src/data/de.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "de",
     "langName": "Deutsch",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/es.json b/src/data/es.json
index 7003762..991c3e6 100644
--- a/src/data/es.json
+++ b/src/data/es.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "es",
     "langName": "Español",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/fr.json b/src/data/fr.json
index 8f8f32e..fa57e6a 100644
--- a/src/data/fr.json
+++ b/src/data/fr.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "fr",
     "langName": "Français",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/it.json b/src/data/it.json
index 872f35d..b01accf 100644
--- a/src/data/it.json
+++ b/src/data/it.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "it",
     "langName": "Italiano",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-05-25",
     "translation_provenance": "v1 — derived from src/data/es.json via Spanish→Italian regex transformation (Romance proximity ~80%). Native Italian PRs welcome to replace any section wholesale; structural keys must remain identical to other premium dictionaries (enforced by scripts/check-dict-coverage.js)."
   },
diff --git a/src/data/ja.json b/src/data/ja.json
index 764b7e8..fe4a093 100644
--- a/src/data/ja.json
+++ b/src/data/ja.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "ja",
     "langName": "日本語",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/ko.json b/src/data/ko.json
index 5cf97e6..98b835f 100644
--- a/src/data/ko.json
+++ b/src/data/ko.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "ko",
     "langName": "한국어",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/pt-BR.json b/src/data/pt-BR.json
index 9601c8b..329e6e1 100644
--- a/src/data/pt-BR.json
+++ b/src/data/pt-BR.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "pt-BR",
     "langName": "Português (BR)",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/ru.json b/src/data/ru.json
index 688b1e3..1c6d136 100644
--- a/src/data/ru.json
+++ b/src/data/ru.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "ru",
     "langName": "Русский",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/vi.json b/src/data/vi.json
index 61040b2..dfab7f5 100644
--- a/src/data/vi.json
+++ b/src/data/vi.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "vi",
     "langName": "Tiếng Việt",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/zh-CN.json b/src/data/zh-CN.json
index 8710fd6..bdc9e1f 100644
--- a/src/data/zh-CN.json
+++ b/src/data/zh-CN.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "zh-CN",
     "langName": "简体中文",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/src/data/zh-TW.json b/src/data/zh-TW.json
index 50bf13a..8797e27 100644
--- a/src/data/zh-TW.json
+++ b/src/data/zh-TW.json
@@ -2,7 +2,7 @@
   "_meta": {
     "lang": "zh-TW",
     "langName": "中文(繁體)",
-    "version": "3.5.37",
+    "version": "3.5.38",
     "lastUpdated": "2026-04-02"
   },
   "ui": {
diff --git a/tests/safe-replace-text.test.js b/tests/safe-replace-text.test.js
new file mode 100644
index 0000000..7a4dc80
--- /dev/null
+++ b/tests/safe-replace-text.test.js
@@ -0,0 +1,83 @@
+/**
+ * @jest-environment jsdom
+ *
+ * Unit tests for `safeReplaceText` (content.js) — the function that writes a
+ * translated string back into a DOM element. Extracted via regex from the
+ * IIFE source so production code stays the source of truth (same pattern as
+ * gt-queue / content-helpers tests). `safeReplaceText` depends on
+ * `getTextNodes`, so both are pulled in together.
+ *
+ * Regression focus: a block with a bold/linked lead-in such as
+ * `<p><strong>Estimated time:</strong> 15 minutes</p>` used to render the
+ * English original AND its translation side by side ("Estimated time:예상
+ * 시간: 15분"), because only the trailing direct text node was rewritten and
+ * the <strong> text was left untouched.
+ */
+
+/* global describe, test, expect, beforeEach */
+
+const fs = require('fs');
+const path = require('path');
+
+const src = fs.readFileSync(path.join(__dirname, '..', 'src', 'content', 'content.js'), 'utf8');
+
+const getTextNodesSrc = src.match(/function getTextNodes\(element\)\s*\{[\s\S]*?\n {2}\}/);
+const safeReplaceSrc = src.match(/function safeReplaceText\(el, newText\)\s*\{[\s\S]*?\n {2}\}/);
+
+if (!getTextNodesSrc || !safeReplaceSrc) {
+  throw new Error('Could not extract safeReplaceText / getTextNodes from content.js — did the source shape change?');
+}
+
+// Established repo pattern for testing IIFE-internal functions against the
+// real source (see gt-queue.test.js / content-helpers.test.js).
+const safeReplaceText = new Function(`${getTextNodesSrc[0]}\n${safeReplaceSrc[0]}\nreturn safeReplaceText;`)();
+
+function makeEl(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  return wrap.firstElementChild;
+}
+
+describe('safeReplaceText', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('leaf element with no children -> full replace', () => {
+    const el = makeEl('<p>Hello world</p>');
+    safeReplaceText(el, '안녕하세요');
+    expect(el.textContent).toBe('안녕하세요');
+  });
+
+  test('bold lead-in does NOT duplicate (the reported bug)', () => {
+    const el = makeEl('<p><strong>Estimated time:</strong> 15 minutes</p>');
+    safeReplaceText(el, '예상 시간: 15분');
+    expect(el.textContent).toBe('예상 시간: 15분');
+    expect(el.textContent).not.toMatch(/Estimated time/);
+    expect(el.querySelector('strong')).not.toBeNull();
+  });
+
+  test('inline link is preserved and not duplicated', () => {
+    const el = makeEl('<p>See <a href="https://x.test">the docs</a> now</p>');
+    safeReplaceText(el, '지금 문서를 보세요');
+    expect(el.textContent.replace(/\s+/g, ' ').trim()).toBe('지금 문서를 보세요');
+    const link = el.querySelector('a');
+    expect(link).not.toBeNull();
+    expect(link.getAttribute('href')).toBe('https://x.test');
+  });
+
+  test('multiple inline children collapse to a single translation', () => {
+    const el = makeEl('<p><b>A</b> middle <em>B</em> end</p>');
+    safeReplaceText(el, '번역된 문장');
+    expect(el.textContent.replace(/\s+/g, '')).toBe('번역된문장');
+  });
+
+  test('text inside <code> is left intact (never translated)', () => {
+    const el = makeEl('<p>Run <code>npm test</code> to verify</p>');
+    safeReplaceText(el, '확인하려면 실행하세요');
+    expect(el.querySelector('code').textContent).toBe('npm test');
+    expect(el.textContent).toContain('확인하려면 실행하세요');
+    expect(el.textContent).toContain('npm test');
+    expect(el.textContent).not.toMatch(/Run|to verify/);
+  });
+});