From e8f9f285ce5dcd3fedbc4945b6a9d361c8181c62 Mon Sep 17 00:00:00 2001
From: JackeryTU <243411584+JackeryTU@users.noreply.github.com>
Date: Fri, 23 Oct 2026 16:08:18 +0800
Subject: [PATCH 1/6] fix(adapter-codex): keep wallpaper shell rounded and
 overlays readable

- stop forcing border-radius: 0 on the left panel, main surface and home hero

- keep tooltips on the host dark surface instead of a white fill that hid light labels

- make the Radix popper wrapper transparent so rounded menus keep their shape

- show the wallpaper through full-page webview routes (host and guest CSS)

- keep composer bands, the notice, scroll fade and content-route surfaces tint-free
---
 .../src/renderer/background-runtime.js        | 70 +++++++++++++++++++
 .../adapter-codex/src/renderer/background.css | 70 +++++++++++++++++--
 2 files changed, 135 insertions(+), 5 deletions(-)

diff --git a/packages/adapter-codex/src/renderer/background-runtime.js b/packages/adapter-codex/src/renderer/background-runtime.js
index abc5579..8b97935 100644
--- a/packages/adapter-codex/src/renderer/background-runtime.js
+++ b/packages/adapter-codex/src/renderer/background-runtime.js
@@ -53,6 +53,73 @@
   const root = document.documentElement;
   const previous = window.__BEAUTICODE_BG__;
 
+  // Full-page ChatGPT routes (Plugins, Skills, Library, Plans) live in an
+  // Electron <webview>. Host CSS cannot cross that document boundary, so clear
+  // the guest's opaque shell tokens from the host through executeJavaScript.
+  // Controls keep their own borders and foregrounds; only page-sized surfaces
+  // are made transparent so the full-window wallpaper remains the base layer.
+  const GUEST_STYLE_ID = "beauticode-guest-wallpaper-style";
+  const GUEST_CSS = `
+    html, body {
+      background: transparent !important;
+      background-color: transparent !important;
+      background-image: none !important;
+    }
+    body > #root,
+    body > #__next {
+      background-color: transparent !important;
+      background-image: none !important;
+    }
+  `;
+  const guestExpression = `(() => {
+    const id = ${JSON.stringify(GUEST_STYLE_ID)};
+    let style = document.getElementById(id);
+    if (!style) {
+      style = document.createElement("style");
+      style.id = id;
+      (document.head || document.documentElement).appendChild(style);
+    }
+    style.textContent = ${JSON.stringify(GUEST_CSS)};
+    return true;
+  })()`;
+  const clearGuestExpression = `(() => {
+    document.getElementById(${JSON.stringify(GUEST_STYLE_ID)})?.remove();
+    return true;
+  })()`;
+  const installGuestTransparency = (webview) => {
+    if (!webview || typeof webview.executeJavaScript !== "function") return;
+    try {
+      const result = webview.executeJavaScript(guestExpression);
+      if (result && typeof result.catch === "function") result.catch(() => {});
+    } catch (_) {}
+    if (!webview.__beauticodeGuestTransparencyBound) {
+      webview.__beauticodeGuestTransparencyBound = true;
+      const refresh = () => installGuestTransparency(webview);
+      try { webview.addEventListener("dom-ready", refresh); } catch (_) {}
+      try { webview.addEventListener("did-finish-load", refresh); } catch (_) {}
+    }
+  };
+  const syncGuestTransparency = () => {
+    try {
+      document.querySelectorAll('webview:not([src^="codex-sandbox:"])')
+        .forEach(installGuestTransparency);
+    } catch (_) {}
+  };
+  const clearGuestTransparency = () => {
+    try {
+      document.querySelectorAll('webview:not([src^="codex-sandbox:"])')
+        .forEach((webview) => {
+          if (typeof webview.executeJavaScript !== "function") return;
+          try {
+            const result = webview.executeJavaScript(clearGuestExpression);
+            if (result && typeof result.catch === "function") {
+              result.catch(() => {});
+            }
+          } catch (_) {}
+        });
+    } catch (_) {}
+  };
+
   // ---- Same-generation short-circuit (critical anti-flash) ----
   // The tray watch loop re-publishes the active payload every ~1s. Rebuilding
   // the stage on every poll creates stacked <video> nodes + poster flashes.
@@ -111,6 +178,7 @@
             }
           } catch (_) {}
         }
+        syncGuestTransparency();
         return { skipped: true, generation: gen, reason: "same-generation" };
       }
     } catch (_) {
@@ -1889,6 +1957,7 @@
       } catch (_) {}
       if (!handoff) {
         window.__BEAUTICODE_THEME__?.stop();
+        clearGuestTransparency();
         clearStage();
         root.removeAttribute("data-bc-active");
         root.removeAttribute("data-bc-media");
@@ -2005,6 +2074,7 @@
   };
 
   window.__BEAUTICODE_BG__ = api;
+  syncGuestTransparency();
   // Runtime.evaluate(awaitPromise) must wait until the stage exists.
   // Returning {installed} immediately used to let CDP setFileInputFiles
   // attach a blob, then this apply() rebuilt <video> and threw it away —
diff --git a/packages/adapter-codex/src/renderer/background.css b/packages/adapter-codex/src/renderer/background.css
index 4690952..60ae8f4 100644
--- a/packages/adapter-codex/src/renderer/background.css
+++ b/packages/adapter-codex/src/renderer/background.css
@@ -198,7 +198,6 @@ html[data-bc-active="true"] aside[class*="_ResponsiveLeftPanel_"] {
   background-color: transparent !important;
   background-image: none !important;
   border: 0 !important;
-  border-radius: 0 !important;
   box-shadow: none !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
@@ -232,7 +231,6 @@ html[data-bc-active="true"] body > #root main {
   background: transparent !important;
   background-image: none !important;
   border: 0 !important;
-  border-radius: 0 !important;
   box-shadow: none !important;
 }
 
@@ -274,7 +272,6 @@ html[data-bc-active="true"] body > #root main
   > div:first-child
   > div:first-child {
   border: 0 !important;
-  border-radius: 0 !important;
   background: transparent !important;
   background-image: none !important;
   box-shadow: none !important;
@@ -350,8 +347,7 @@ html[data-bc-active="true"][data-bc-fish="true"] #beauticode-video-input {
    palette — by id (works for already-mounted UI) and by the data-bc-ui marker
    (covers surfaces added later). */
 html[data-bc-active="true"] :is([role="dialog"], [role="alertdialog"],
-  [role="menu"], [role="listbox"], [role="tooltip"],
-  [data-radix-popper-content-wrapper], [data-composer-body],
+  [role="menu"], [role="listbox"], [data-composer-body],
   form:has(textarea),
   form:has([contenteditable="true"])):not([data-bc-ui], [data-bc-ui] *,
     #beauticode-console, #beauticode-console *,
@@ -360,3 +356,67 @@ html[data-bc-active="true"] :is([role="dialog"], [role="alertdialog"],
     #beauticode-name-dialog, #beauticode-name-dialog *) {
   background-color: var(--bc-readable-fill) !important;
 }
+
+/* A tooltip keeps the host's own dark surface and light label; forcing the
+   readable fill here left near-white text on white. The Radix popper wrapper
+   only positions a rounded panel, so painting it leaves a square plate behind
+   an otherwise correct menu. */
+html[data-bc-active="true"] [data-radix-popper-content-wrapper] {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+/* Full-page ChatGPT routes mount in an Electron <webview>. Keep the host frame
+   clear so the wallpaper stays the window base; the runtime also clears the
+   guest document's own opaque surfaces. */
+html[data-bc-active="true"] body > #root
+  webview:not([src^="codex-sandbox:"]) {
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+/* Composer chrome: Codex paints a tinted band behind the input and a tinted
+   notice above it. Drop that wash so the wallpaper stays the base layer; the
+   input body keeps its own white card. */
+html[data-bc-active="true"] body > #root main
+  [class*="_background_"][class*="_surface_"],
+html[data-bc-active="true"] body > #root main
+  [class*="_ComposerLayoutRoot_"] {
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+html[data-bc-active="true"] body > #root main aside {
+  background-color: rgba(255, 255, 255, 0.9) !important;
+  background-image: none !important;
+}
+
+/* Scroll fade above the composer: Codex fades into the themed surface, which
+   leaves a tinted strip over the wallpaper. Let the wallpaper carry it. */
+html[data-bc-active="true"] body > #root main
+  [class*="_background_"][class*="_fade_"] {
+  background-image: none !important;
+  background-color: transparent !important;
+}
+
+/* Content routes (Library, Sites, Images) paint a page-sized tinted surface
+   plus a header plate on the shell's ::before. Keep both on the wallpaper. */
+html[data-bc-active="true"] body > #root main
+  div.bg-surface:has([class*="_shell_"]) {
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+html[data-bc-active="true"] body > #root main
+  [class*="_shell_"]::before {
+  background-color: transparent !important;
+  background-image: none !important;
+}
+
+html[data-bc-active="true"] body > #root main
+  div.bg-surface:has([class*="empty-state-pag"]) {
+  background-color: transparent !important;
+  background-image: none !important;
+}

From 158c265b308f89680450999796f95e7cf4932538 Mon Sep 17 00:00:00 2001
From: JackeryTU <243411584+JackeryTU@users.noreply.github.com>
Date: Fri, 23 Oct 2026 17:02:58 +0800
Subject: [PATCH 2/6] fix(adapter-codex): detach guest listeners when the
 runtime disposes

clearGuestTransparency removed the injected guest style but kept the dom-ready/did-finish-load listeners and the bound marker, so a webview that stayed mounted could re-inject after cleanup. Release the listeners and reset the marker; a new runtime rebinds via syncGuestTransparency().
---
 .../adapter-codex/src/renderer/background-runtime.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/adapter-codex/src/renderer/background-runtime.js b/packages/adapter-codex/src/renderer/background-runtime.js
index 8b97935..96a92a1 100644
--- a/packages/adapter-codex/src/renderer/background-runtime.js
+++ b/packages/adapter-codex/src/renderer/background-runtime.js
@@ -95,6 +95,7 @@
     if (!webview.__beauticodeGuestTransparencyBound) {
       webview.__beauticodeGuestTransparencyBound = true;
       const refresh = () => installGuestTransparency(webview);
+      webview.__beauticodeGuestTransparencyRefresh = refresh;
       try { webview.addEventListener("dom-ready", refresh); } catch (_) {}
       try { webview.addEventListener("did-finish-load", refresh); } catch (_) {}
     }
@@ -116,6 +117,17 @@
               result.catch(() => {});
             }
           } catch (_) {}
+          const refresh = webview.__beauticodeGuestTransparencyRefresh;
+          if (refresh) {
+            try { webview.removeEventListener("dom-ready", refresh); } catch (_) {}
+            try {
+              webview.removeEventListener("did-finish-load", refresh);
+            } catch (_) {}
+          }
+          try {
+            webview.__beauticodeGuestTransparencyBound = false;
+            delete webview.__beauticodeGuestTransparencyRefresh;
+          } catch (_) {}
         });
     } catch (_) {}
   };

From 403fe811c7c95443468cc58d1f43610e9c54aa67 Mon Sep 17 00:00:00 2001
From: JackeryTU <243411584+JackeryTU@users.noreply.github.com>
Date: Fri, 23 Oct 2026 18:39:51 +0800
Subject: [PATCH 3/6] fix(adapter-codex): round hover preview cards and clip
 their inner plate

The peek card already carried a radius, but its inner wrapper painted a square white plate across the full box, hiding the rounded shell. Inherit the radius on that wrapper and clip overflow; also give overlay surfaces a light plate so previews separate from the page.
---
 .../adapter-codex/src/renderer/background.css | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/packages/adapter-codex/src/renderer/background.css b/packages/adapter-codex/src/renderer/background.css
index 60ae8f4..9d587dd 100644
--- a/packages/adapter-codex/src/renderer/background.css
+++ b/packages/adapter-codex/src/renderer/background.css
@@ -420,3 +420,40 @@ html[data-bc-active="true"] body > #root main
   background-color: transparent !important;
   background-image: none !important;
 }
+
+/* Hover previews and other floating cards keep a light plate so the card
+   separates from the page behind it. Only overlay surfaces match, so a page
+   stays on the wallpaper after navigating there. */
+html[data-bc-active="true"]
+  :is([data-overlay-owner], [data-overlay-owner] *)
+  :is(.bg-surface, .bg-surface-secondary, .bg-surface-elevated,
+      .bg-surface-elevated-secondary):not([role="tooltip"], [role="tooltip"] *) {
+  background-color: rgba(253, 252, 254, 0.94) !important;
+  background-image: none !important;
+}
+
+html[data-bc-active="true"] [data-overlay-owner]:is(
+  .bg-surface, .bg-surface-secondary, .bg-surface-elevated,
+  .bg-surface-elevated-secondary) {
+  background-color: rgba(253, 252, 254, 0.94) !important;
+  background-image: none !important;
+}
+
+/* Project and page peeks: the card's inner wrapper paints a square white
+   plate over the rounded shell, so the preview reads as a hard rectangle.
+   Inherit the radius and clip the wrapper; a hairline ring keeps the rounded
+   silhouette visible on light wallpapers. */
+html[data-bc-active="true"]
+  [role="tooltip"][data-overlay-owner="slate-sidebar"] {
+  border-radius: 18px !important;
+  background-color: rgba(250, 249, 253, 0.97) !important;
+  overflow: hidden !important;
+  box-shadow:
+    0 18px 44px rgba(40, 22, 54, 0.22),
+    0 0 0 1px rgba(74, 35, 95, 0.1) !important;
+}
+
+html[data-bc-active="true"]
+  [role="tooltip"][data-overlay-owner="slate-sidebar"] > * {
+  border-radius: inherit !important;
+}

From 9d0f4e0ba44496c95d61b41f2e3046dd0b0dd80d Mon Sep 17 00:00:00 2001
From: JackeryTU <243411584+JackeryTU@users.noreply.github.com>
Date: Fri, 23 Oct 2026 18:46:50 +0800
Subject: [PATCH 4/6] fix(adapter-codex): keep tooltips dark and unbind
 sandboxed webviews

- the overlay plate rule could outrank the earlier tooltip exclusion; exclude role=tooltip there as well

- clearGuestTransparency matched only non-sandbox webviews, so a bound webview that switched to codex-sandbox: kept its listeners and marker; scan all webviews by bound state and reject sandbox targets in refresh
---
 .../src/renderer/background-runtime.js        | 43 +++++++++++++------
 .../adapter-codex/src/renderer/background.css |  2 +-
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/adapter-codex/src/renderer/background-runtime.js b/packages/adapter-codex/src/renderer/background-runtime.js
index 96a92a1..b64d398 100644
--- a/packages/adapter-codex/src/renderer/background-runtime.js
+++ b/packages/adapter-codex/src/renderer/background-runtime.js
@@ -86,8 +86,22 @@
     document.getElementById(${JSON.stringify(GUEST_STYLE_ID)})?.remove();
     return true;
   })()`;
+  const guestTransparencyAllowed = (webview) => {
+    try {
+      const src = webview.getAttribute("src") || "";
+      return !src.startsWith("codex-sandbox:");
+    } catch (_) {
+      return false;
+    }
+  };
   const installGuestTransparency = (webview) => {
-    if (!webview || typeof webview.executeJavaScript !== "function") return;
+    if (
+      !webview ||
+      !guestTransparencyAllowed(webview) ||
+      typeof webview.executeJavaScript !== "function"
+    ) {
+      return;
+    }
     try {
       const result = webview.executeJavaScript(guestExpression);
       if (result && typeof result.catch === "function") result.catch(() => {});
@@ -108,27 +122,28 @@
   };
   const clearGuestTransparency = () => {
     try {
-      document.querySelectorAll('webview:not([src^="codex-sandbox:"])')
-        .forEach((webview) => {
-          if (typeof webview.executeJavaScript !== "function") return;
+      document.querySelectorAll("webview").forEach((webview) => {
+        if (!webview.__beauticodeGuestTransparencyBound) return;
+        if (typeof webview.executeJavaScript === "function") {
           try {
             const result = webview.executeJavaScript(clearGuestExpression);
             if (result && typeof result.catch === "function") {
               result.catch(() => {});
             }
           } catch (_) {}
-          const refresh = webview.__beauticodeGuestTransparencyRefresh;
-          if (refresh) {
-            try { webview.removeEventListener("dom-ready", refresh); } catch (_) {}
-            try {
-              webview.removeEventListener("did-finish-load", refresh);
-            } catch (_) {}
-          }
+        }
+        const refresh = webview.__beauticodeGuestTransparencyRefresh;
+        if (refresh) {
+          try { webview.removeEventListener("dom-ready", refresh); } catch (_) {}
           try {
-            webview.__beauticodeGuestTransparencyBound = false;
-            delete webview.__beauticodeGuestTransparencyRefresh;
+            webview.removeEventListener("did-finish-load", refresh);
           } catch (_) {}
-        });
+        }
+        try {
+          webview.__beauticodeGuestTransparencyBound = false;
+          delete webview.__beauticodeGuestTransparencyRefresh;
+        } catch (_) {}
+      });
     } catch (_) {}
   };
 
diff --git a/packages/adapter-codex/src/renderer/background.css b/packages/adapter-codex/src/renderer/background.css
index 9d587dd..5ab3662 100644
--- a/packages/adapter-codex/src/renderer/background.css
+++ b/packages/adapter-codex/src/renderer/background.css
@@ -434,7 +434,7 @@ html[data-bc-active="true"]
 
 html[data-bc-active="true"] [data-overlay-owner]:is(
   .bg-surface, .bg-surface-secondary, .bg-surface-elevated,
-  .bg-surface-elevated-secondary) {
+  .bg-surface-elevated-secondary):not([role="tooltip"]) {
   background-color: rgba(253, 252, 254, 0.94) !important;
   background-image: none !important;
 }

From a038814d60f5a9837b120e45baf39e951e47764b Mon Sep 17 00:00:00 2001
From: JackeryTU <243411584+JackeryTU@users.noreply.github.com>
Date: Sat, 24 Oct 2026 16:30:36 +0800
Subject: [PATCH 5/6] fix(adapter-codex): scope guest transparency to the
 active background

- sync guest styles only while a background is active; clearing removes the injected style, restores inline backgrounds and detaches listeners instead of installing them

- observe webview additions and src changes so routes mounted after apply still get injected

- clear opaque full-page containers inside the guest with a depth-limited scan and restore them on clear
---
 .../src/renderer/background-runtime.js        | 100 ++++++++++++++++--
 1 file changed, 91 insertions(+), 9 deletions(-)

diff --git a/packages/adapter-codex/src/renderer/background-runtime.js b/packages/adapter-codex/src/renderer/background-runtime.js
index b64d398..fa10e60 100644
--- a/packages/adapter-codex/src/renderer/background-runtime.js
+++ b/packages/adapter-codex/src/renderer/background-runtime.js
@@ -60,16 +60,11 @@
   // are made transparent so the full-window wallpaper remains the base layer.
   const GUEST_STYLE_ID = "beauticode-guest-wallpaper-style";
   const GUEST_CSS = `
-    html, body {
+    html, body, body > #root, body > #__next {
       background: transparent !important;
       background-color: transparent !important;
       background-image: none !important;
     }
-    body > #root,
-    body > #__next {
-      background-color: transparent !important;
-      background-image: none !important;
-    }
   `;
   const guestExpression = `(() => {
     const id = ${JSON.stringify(GUEST_STYLE_ID)};
@@ -80,10 +75,57 @@
       (document.head || document.documentElement).appendChild(style);
     }
     style.textContent = ${JSON.stringify(GUEST_CSS)};
+    const ATTR = "data-beauticode-guest-cleared";
+    const paint = () => {
+      if (!document.body) return;
+      const vw = window.innerWidth || 1;
+      const vh = window.innerHeight || 1;
+      const visit = (el, depth) => {
+        if (!(el instanceof HTMLElement) || depth > 6) return;
+        if (!el.hasAttribute(ATTR)) {
+          const rect = el.getBoundingClientRect();
+          if (rect.width >= vw * 0.9 && rect.height >= vh * 0.9) {
+            const bg = getComputedStyle(el).backgroundColor;
+            if (bg && bg !== "transparent" && bg !== "rgba(0, 0, 0, 0)") {
+              el.setAttribute(ATTR, el.style.backgroundColor || "");
+              el.style.setProperty("background-color", "transparent", "important");
+            }
+          }
+        }
+        for (const child of el.children) visit(child, depth + 1);
+      };
+      for (const child of document.body.children) visit(child, 0);
+    };
+    paint();
+    if (!window.__beauticodeGuestObserver) {
+      const observer = new MutationObserver(() => {
+        if (window.__beauticodeGuestPaintTimer) return;
+        window.__beauticodeGuestPaintTimer = setTimeout(() => {
+          window.__beauticodeGuestPaintTimer = 0;
+          try { paint(); } catch (_) {}
+        }, 300);
+      });
+      observer.observe(document.documentElement, { childList: true, subtree: true });
+      window.__beauticodeGuestObserver = observer;
+    }
     return true;
   })()`;
   const clearGuestExpression = `(() => {
     document.getElementById(${JSON.stringify(GUEST_STYLE_ID)})?.remove();
+    try {
+      window.__beauticodeGuestObserver?.disconnect();
+      window.__beauticodeGuestObserver = null;
+      if (window.__beauticodeGuestPaintTimer) {
+        clearTimeout(window.__beauticodeGuestPaintTimer);
+        window.__beauticodeGuestPaintTimer = 0;
+      }
+    } catch (_) {}
+    document.querySelectorAll("[data-beauticode-guest-cleared]").forEach((el) => {
+      const prev = el.getAttribute("data-beauticode-guest-cleared");
+      el.removeAttribute("data-beauticode-guest-cleared");
+      if (prev) el.style.backgroundColor = prev;
+      else el.style.removeProperty("background-color");
+    });
     return true;
   })()`;
   const guestTransparencyAllowed = (webview) => {
@@ -146,6 +188,42 @@
       });
     } catch (_) {}
   };
+  const isBackgroundActive = () =>
+    root.getAttribute("data-bc-active") === "true";
+  let guestSyncTimer = null;
+  const scheduleGuestSync = () => {
+    if (!isBackgroundActive() || guestSyncTimer) return;
+    guestSyncTimer = setTimeout(() => {
+      guestSyncTimer = null;
+      if (isBackgroundActive()) syncGuestTransparency();
+    }, 200);
+  };
+  try {
+    new MutationObserver((records) => {
+      for (const record of records) {
+        if (
+          record.type === "attributes" &&
+          record.target instanceof Element &&
+          record.target.tagName === "WEBVIEW"
+        ) {
+          scheduleGuestSync();
+          return;
+        }
+        for (const node of record.addedNodes) {
+          if (!(node instanceof Element)) continue;
+          if (node.tagName === "WEBVIEW" || node.querySelector("webview")) {
+            scheduleGuestSync();
+            return;
+          }
+        }
+      }
+    }).observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["src"],
+    });
+  } catch (_) {}
 
   // ---- Same-generation short-circuit (critical anti-flash) ----
   // The tray watch loop re-publishes the active payload every ~1s. Rebuilding
@@ -205,7 +283,7 @@
             }
           } catch (_) {}
         }
-        syncGuestTransparency();
+        if (isBackgroundActive()) syncGuestTransparency();
         return { skipped: true, generation: gen, reason: "same-generation" };
       }
     } catch (_) {
@@ -1817,6 +1895,7 @@
       teardownImageBlob();
       releaseHandoff();
       clearStage();
+      clearGuestTransparency();
       resolvedPoster = null;
       stopWorkingWatch();
       setAttrs();
@@ -2101,14 +2180,17 @@
   };
 
   window.__BEAUTICODE_BG__ = api;
-  syncGuestTransparency();
   // Runtime.evaluate(awaitPromise) must wait until the stage exists.
   // Returning {installed} immediately used to let CDP setFileInputFiles
   // attach a blob, then this apply() rebuilt <video> and threw it away —
   // every Codex video import then sat in verify until the console timed out.
   return Promise.resolve()
     .then(apply)
-    .then(() => ({ installed: true, generation: gen }))
+    .then(() => {
+      if (isBackgroundActive()) syncGuestTransparency();
+      else clearGuestTransparency();
+      return { installed: true, generation: gen };
+    })
     .catch((err) => {
       if (isCurrent()) {
         imageFailed = true;

From d5f3252ed33f895eac8d4af92b4009a5da263339 Mon Sep 17 00:00:00 2001
From: JackeryTU <243411584+JackeryTU@users.noreply.github.com>
Date: Sat, 24 Oct 2026 16:37:30 +0800
Subject: [PATCH 6/6] fix(adapter-codex): stop host watchers on dispose and
 sync guests on activation

- keep the webview MutationObserver and debounce timer, disconnect and cancel them in dispose (handoff included)

- sync or clear guest transparency inside setAttrs when data-bc-active flips, so a late first video frame or a media failure updates embedded pages
---
 .../src/renderer/background-runtime.js        | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/adapter-codex/src/renderer/background-runtime.js b/packages/adapter-codex/src/renderer/background-runtime.js
index fa10e60..30d0ab1 100644
--- a/packages/adapter-codex/src/renderer/background-runtime.js
+++ b/packages/adapter-codex/src/renderer/background-runtime.js
@@ -198,8 +198,9 @@
       if (isBackgroundActive()) syncGuestTransparency();
     }, 200);
   };
+  let guestObserver = null;
   try {
-    new MutationObserver((records) => {
+    guestObserver = new MutationObserver((records) => {
       for (const record of records) {
         if (
           record.type === "attributes" &&
@@ -217,13 +218,24 @@
           }
         }
       }
-    }).observe(document.documentElement, {
+    });
+    guestObserver.observe(document.documentElement, {
       childList: true,
       subtree: true,
       attributes: true,
       attributeFilter: ["src"],
     });
   } catch (_) {}
+  const stopGuestWatchers = () => {
+    try {
+      guestObserver?.disconnect();
+    } catch (_) {}
+    guestObserver = null;
+    if (guestSyncTimer) {
+      clearTimeout(guestSyncTimer);
+      guestSyncTimer = null;
+    }
+  };
 
   // ---- Same-generation short-circuit (critical anti-flash) ----
   // The tray watch loop re-publishes the active payload every ~1s. Rebuilding
@@ -962,6 +974,7 @@
   };
 
   const setAttrs = () => {
+    const wasActive = root.getAttribute("data-bc-active") === "true";
     const handoffReady =
       videoEnabled &&
       !videoFailed &&
@@ -989,9 +1002,11 @@
       root.removeAttribute("data-bc-tone");
       fishMode = false;
       stopWorkingWatch();
+      if (wasActive) clearGuestTransparency();
       return;
     }
     root.setAttribute("data-bc-active", "true");
+    if (!wasActive) syncGuestTransparency();
     // Keep media=video during handoff so CSS does not snap back to image-only
     // while the previous frame is still covering the stage.
     const media =
@@ -2037,6 +2052,7 @@
       // Always stop working-state watchers; the next generation starts its own.
       // Do not leave MutationObservers / intervals from a superseded runtime.
       stopWorkingWatch();
+      stopGuestWatchers();
       const handoff = Boolean(opts && opts.handoff);
       if (!handoff) {
         teardownVideo();