minecodex 1.2.1 → 2.0.0

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

@@ -3,7 +3,7 @@
 // CodexRuntime 与 CDP 客户端在 codex-runtime.mjs / codex-cdp.mjs。
 
 import { randomBytes } from "node:crypto";
-import { CODEX_THEME_TOKENS } from "./codex-design-contract.mjs";
+import { CODEX_THEME_TOKENS, CODEX_THEME_TOKEN_ALIASES } from "./codex-design-contract.mjs";
 
 export const RUNTIME_VERSION = 101;
 export const HOST_BINDING_NAME = "__codexPersonalHostAction";
@@ -158,6 +158,7 @@ export function createInjectionSource(features, {
       temporaryChat: ["temporary chat", "临时聊天", "临时对话"],
     };
     const themeTokenNames = config.themeTokens;
+    const themeTokenAliases = config.themeTokenAliases;
 
     function normalizedLocale(value) {
       return String(value ?? "").toLowerCase().startsWith("zh") ? "zh-CN" : "en";
@@ -251,10 +252,6 @@ export function createInjectionSource(features, {
     let modelSelectorObservedTrigger = null;
     let modelSelectorControllerMenu = null;
     let modelSelectorNativeFastIcons = null;
-    // Fast 图标来源标记：bundle 静态提取 vs DOM 克隆，DOM 克隆优先以保持像素一致。
-    let modelSelectorNativeFastIconSources = null;
-    // DOM 克隆可见性门控：仅在 Fast 控件从无到有时扫描一次，常驻会话不逐帧扫描。
-    let modelSelectorFastControlVisible = false;
     // 持久化脏标记：仅在图标实际变化时写一次 localStorage。
     let modelSelectorNativeFastIconsDirty = false;
     const modelSelectorFastIconStorageKey = "codex-model-slider:fast-icons:v1";
@@ -344,10 +341,12 @@ export function createInjectionSource(features, {
       }
       [data-codex-model-slider-generic] { box-sizing: border-box; width: 100%; }
       [data-codex-model-slider-fast] { border: 0; background: transparent; cursor: pointer; }
+      [data-codex-model-slider-fast]:not(:hover) [data-codex-model-slider-fast-content] { background: transparent; }
       [data-codex-model-slider-fast]:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }
       [data-codex-model-slider-rail][data-codex-model-slider-fallback] { position: relative; height: 38px; margin: 1px 8px 0; outline: none; cursor: pointer; }
       [data-codex-model-slider-track] { position: absolute; top: 12px; right: 0; left: 0; height: 16px; border-radius: 999px; background: var(--color-background-control); }
       [data-codex-model-slider-range] { position: absolute; top: 0; bottom: 0; left: 0; width: var(--codex-model-slider-progress); border-radius: inherit; background: var(--color-text-accent); }
+      [data-codex-model-slider-rail][data-max="true"] [data-codex-model-slider-range] { background: var(--color-chart-purple); }
       [data-codex-model-slider-fallback] [data-codex-model-slider-tick] {
         position: absolute; top: 16px; width: 6px; height: 6px; transform: translate(-50%, -50%); border: 0; border-radius: 50%;
         padding: 0; background: var(--color-text-foreground-tertiary); pointer-events: none;
@@ -371,10 +370,6 @@ export function createInjectionSource(features, {
       const persistedIcons = loadPersistedNativeFastIcons(modelSelectorFastIconStorageKey);
       if (persistedIcons) {
         modelSelectorNativeFastIcons = persistedIcons;
-        modelSelectorNativeFastIconSources = {};
-        for (const state of Object.keys(persistedIcons)) {
-          modelSelectorNativeFastIconSources[state] = "persisted";
-        }
       }
       void loadNativeFastIconFromBundle();
     }
@@ -395,12 +390,14 @@ export function createInjectionSource(features, {
           "config",
           `"use strict";\n${source}`,
         );
+        const pageConfig = feature.pageScript.config ??= {};
+        pageConfig.requestHostAction = (action, payload) => requestPageHostAction(feature.id, action, payload);
         const cleanup = installer(
           lifetime.signal,
           window,
           document,
           MutationObserver,
-          feature.pageScript.config ?? {},
+          pageConfig,
         );
         if (typeof cleanup === "function") pageScriptCleanups.push(cleanup);
       } catch (error) {
@@ -789,7 +786,6 @@ export function createInjectionSource(features, {
         const source = await fetch(sourceLink.href).then((response) => response.text());
         if (!modelSelectorNativeFastIcons) {
           modelSelectorNativeFastIcons = {};
-          modelSelectorNativeFastIconSources = {};
         }
         let gained = false;
         const define = (state, prefix, definition) => {
@@ -806,7 +802,6 @@ export function createInjectionSource(features, {
           svg.setAttribute("width", "20");
           svg.setAttribute("height", "20");
           modelSelectorNativeFastIcons[state] = svg;
-          modelSelectorNativeFastIconSources[state] = "bundle";
           gained = true;
         };
         define("active", "M11\\.9125 21\\.4125", { viewBox: "0 0 24 24" });
@@ -822,50 +817,24 @@ export function createInjectionSource(features, {
       }
     }
 
-    function hasVisibleFastControl() {
-      return Boolean(
-        document.querySelector("[data-codex-model-slider-fast]")
-        || document.querySelector('[class*="_FastModeToggle_"]')
-        || document.querySelector('[class*="_ModelPickerTriggerFastIndicator_"] svg'),
-      );
-    }
-
     function captureNativeFastIcon() {
-      // Fast 图标只在 Fast 控件渲染后才出现在 DOM（打开菜单或 GPT 模型）；
-      // 只在控件可见性从无到有时做一次全页扫描（升级为 DOM 克隆），
-      // 常驻会话不逐帧扫描整个文档；缺图标时由 bundle/持久化兜底。
-      const visible = hasVisibleFastControl();
-      const justBecameVisible = visible && !modelSelectorFastControlVisible;
-      modelSelectorFastControlVisible = visible;
-      if (visible && justBecameVisible) {
-        const capture = (state, pathPrefix) => {
-          const current = modelSelectorNativeFastIcons?.[state];
-          const currentSource = modelSelectorNativeFastIconSources?.[state];
-          if (current && currentSource === "dom") return;
-          const path = Array.from(document.querySelectorAll("svg path")).find(
-            (candidate) => candidate.getAttribute("d")?.startsWith(pathPrefix),
-          );
-          const svg = path?.closest("svg");
-          if (!svg) return;
-          const template = svg.cloneNode(true);
-          template.removeAttribute("id");
-          // 统一呈现尺寸：保留原生 viewBox，固定 20px。DOM 克隆来源是
-          // 原生 active(24px)/inactive(20px) 两套 SVG，若不归一化，
-          // active 24px 放进 26px 的 Fast content 容器会显得大一圈。
-          template.setAttribute("width", "20");
-          template.setAttribute("height", "20");
-          if (!modelSelectorNativeFastIcons) {
-            modelSelectorNativeFastIcons = {};
-            modelSelectorNativeFastIconSources = {};
-          }
-          modelSelectorNativeFastIcons[state] = template;
-          modelSelectorNativeFastIconSources[state] = "dom";
-          modelSelectorNativeFastIconsDirty = true;
-        };
-        capture("active", "M11.9125 21.4125");
-        // 现版 app 的 inactive bolt 为 20x20，路径以 M9.80999 开头；
-        // 旧的 M7.38 前缀已匹配不到任何图标，导致 inactive 缺失。
-        capture("inactive", "M9.80999 17.8302");
+      // 原生控件每次只渲染当前状态；状态切换后按控件本身更新缓存。
+      const nativeContent = Array.from(document.querySelectorAll('[class*="_FastModeToggleContent_"]'))
+        .find((content) => !content.closest("[data-codex-model-slider-generic]"));
+      const toggle = nativeContent?.closest('[class*="_FastModeToggle_"]');
+      const state = toggle?.getAttribute("data-fast-mode-enabled") === "true" ? "active" : "inactive";
+      const svg = nativeContent?.querySelector("svg");
+      const current = modelSelectorNativeFastIcons?.[state];
+      if (svg && (current?.innerHTML !== svg.innerHTML
+        || current.getAttribute("viewBox") !== svg.getAttribute("viewBox")
+        || current.getAttribute("width") !== svg.getAttribute("width"))) {
+        const template = svg.cloneNode(true);
+        template.removeAttribute("id");
+        if (!modelSelectorNativeFastIcons) {
+          modelSelectorNativeFastIcons = {};
+        }
+        modelSelectorNativeFastIcons[state] = template;
+        modelSelectorNativeFastIconsDirty = true;
       }
       const ready = Boolean(
         modelSelectorNativeFastIcons?.active && modelSelectorNativeFastIcons?.inactive,
@@ -874,31 +843,42 @@ export function createInjectionSource(features, {
         persistNativeFastIcons();
         applyNativeFastIconsToShells();
       }
-      return modelSelectorNativeFastIcons;
     }
 
     function applyNativeFastIconsToShells() {
       document.querySelectorAll("[data-codex-model-slider-fast]").forEach((button) => {
         const content = button.querySelector("[data-codex-model-slider-fast-content]");
-        // 幂等补装：只给还没有图标的按钮补上，避免每次 ensure 都重建节点。
-        if (!content || content.querySelector("svg")) return;
+        if (!content) return;
         const icon = createNativeFastIcon(button.getAttribute("aria-pressed") === "true");
-        if (icon) content.replaceChildren(icon);
+        if (!icon) return;
+        const current = content.querySelector("svg");
+        if (!current || current.innerHTML !== icon.innerHTML
+          || current.getAttribute("viewBox") !== icon.getAttribute("viewBox")
+          || current.getAttribute("width") !== icon.getAttribute("width")) {
+          content.replaceChildren(icon);
+        }
       });
     }
 
     function createNativeFastIcon(active) {
       // 直接读取已就绪的图标存储（启动时由 bundle/持久化填充，运行期由
       // captureNativeFastIcon 升级为 DOM 克隆），避免再次触发捕获造成递归。
-      // 优先克隆当前面板的图标，保留原生尺寸和路径，不使用旧版图标规格。
-      const nativeContent = Array.from(document.querySelectorAll('[class*="_FastModeToggleContent_"]'))
-        .find((content) => !content.closest("[data-codex-model-slider-generic]")
-          && (content.getAttribute("data-fast-mode-enabled")
-            ?? content.closest('[class*="_FastModeToggle_"]')?.getAttribute("data-fast-mode-enabled")) === String(active));
+      // 优先克隆当前面板的图标；切换瞬间使用缓存时，也沿用原生图标尺寸。
+      const nativeContents = Array.from(document.querySelectorAll('[class*="_FastModeToggleContent_"]'))
+        .filter((content) => !content.closest("[data-codex-model-slider-generic]"));
+      const nativeContent = nativeContents.find((content) => (
+        (content.getAttribute("data-fast-mode-enabled")
+          ?? content.closest('[class*="_FastModeToggle_"]')?.getAttribute("data-fast-mode-enabled")) === String(active)
+      ));
+      const nativeSvg = nativeContent?.querySelector("svg") ?? nativeContents[0]?.querySelector("svg");
       const template = nativeContent?.querySelector("svg")
         ?? modelSelectorNativeFastIcons?.[active ? "active" : "inactive"];
       if (!template) return null;
       const icon = template.cloneNode(true);
+      if (nativeSvg) {
+        icon.setAttribute("width", nativeSvg.getAttribute("width") ?? "16");
+        icon.setAttribute("height", nativeSvg.getAttribute("height") ?? "16");
+      }
       icon.setAttribute("aria-hidden", "true");
       return icon;
     }
@@ -994,9 +974,25 @@ export function createInjectionSource(features, {
     function nativeComposerModelController() {
       const trigger = nativeComposerTrigger();
       let fiber = currentReactFiber(trigger);
+      let powerController = null;
       for (let depth = 0; fiber && depth < 40; depth += 1, fiber = fiber.return) {
         const props = fiber.memoizedProps;
+        if (
+          Array.isArray(props?.powerSelections)
+          && typeof props.onCommitPower === "function"
+        ) powerController ??= props;
         if (Array.isArray(props?.models) && typeof props.onSelectReasoningEffort === "function") return props;
+        if (Array.isArray(props?.models) && typeof props.onCommitPower === "function") {
+          const power = powerController ?? props;
+          return {
+            ...props,
+            powerSelections: power.powerSelections ?? props.powerSelections,
+            selectedPowerSelection: power.selectedPowerSelection ?? props.selectedPowerSelection,
+            fallbackPowerSelection: power.fallbackPowerSelection ?? props.fallbackPowerSelection,
+            onSelectPower: power.onSelectPower ?? props.onSelectPower,
+            onCommitPower: power.onCommitPower,
+          };
+        }
         // Chat／Temporary Chat 使用原生模型选择器，不进入任务模型适配。
         if (props?.selectedModel && typeof props.onModelChange === "function") return null;
       }
@@ -1663,7 +1659,11 @@ export function createInjectionSource(features, {
       if (!wrapper?.hasAttribute("data-radix-popper-content-wrapper")) return;
       const existing = modelSelectorPositionObservers.get(wrapper);
       if (existing) {
-        existing.menu = menu;
+        if (existing.menu !== menu) {
+          existing.resizeObserver.unobserve(existing.menu);
+          existing.resizeObserver.observe(menu);
+          existing.menu = menu;
+        }
         return;
       }
       const record = {
@@ -1713,6 +1713,32 @@ export function createInjectionSource(features, {
       }
     }
 
+    function restoreGenericModelPicker(container) {
+      const original = modelSelectorGenericContainers.get(container);
+      if (!original) return;
+      original.effectMirror?.disconnect();
+      if (container.isConnected) {
+        const menu = container.parentElement;
+        menu?.querySelector(":scope > [data-codex-model-slider-generic]")?.remove();
+        menu?.removeAttribute("data-codex-model-slider-generic-menu");
+        menu?.style.removeProperty("--codex-model-slider-menu-center-shift");
+        container.style.position = original.position;
+        container.style.inset = original.inset;
+        container.style.opacity = original.opacity;
+        container.style.pointerEvents = original.pointerEvents;
+        if (original.ariaHidden == null) container.removeAttribute("aria-hidden");
+        else container.setAttribute("aria-hidden", original.ariaHidden);
+        container.inert = original.inert;
+      }
+      modelSelectorGenericContainers.delete(container);
+    }
+
+    function pruneGenericModelPickerContainers() {
+      for (const container of modelSelectorGenericContainers.keys()) {
+        if (!container.isConnected) restoreGenericModelPicker(container);
+      }
+    }
+
     function closeControllerModelMenu() {
       const record = modelSelectorControllerMenu;
       if (!record) return false;
@@ -1853,22 +1879,6 @@ export function createInjectionSource(features, {
     // 原生 effort 子菜单与滑条视觉 — effort 事务、Fast/通用滑条视觉与状态同步
     // ========================================================================
 
-    function openNativeModelSubmenu(parentMenu) {
-      let attempts = 0;
-      const open = () => {
-        attempts += 1;
-        const currentMenu = nativeModelPickerMenu() ?? parentMenu;
-        const row = nativeModelPickerRow(currentMenu);
-        if (row) {
-          setReactControlledMenuOpen(row, true);
-          setTimeout(queueEnsure, 0);
-          return;
-        }
-        if (attempts < 12) requestAnimationFrame(open);
-      };
-      setTimeout(open, 80);
-    }
-
     function nativeEffortRow(parentMenu) {
       return Array.from(parentMenu?.querySelectorAll('[role="menuitem"][aria-haspopup="menu"]') ?? [])
         .filter((row) => !row.hasAttribute("data-model-picker-view-toggle"))[1] ?? null;
@@ -1895,6 +1905,30 @@ export function createInjectionSource(features, {
         queueEnsure();
         return;
       }
+      if (typeof controller?.onCommitPower === "function") {
+        const normalizedEffort = String(effort).toLowerCase();
+        const activeModel = String(controller.model ?? nativeCatalogModelFor(identity)?.slug ?? identity.raw);
+        const next = controller.powerSelections?.find((selection) => (
+          String(selection?.model ?? "") === activeModel
+          && String(selection?.reasoningEffort ?? "").toLowerCase() === normalizedEffort
+        ));
+        const previous = controller.selectedPowerSelection
+          ?? controller.powerSelections?.find((selection) => (
+            String(selection?.model ?? "") === activeModel
+            && String(selection?.reasoningEffort ?? "").toLowerCase()
+              === String(controller.reasoningEffort ?? "").toLowerCase()
+          ))
+          ?? controller.fallbackPowerSelection;
+        if (!next || !previous) return;
+        controller.onSelectPower?.(next);
+        controller.onCommitPower(next, previous);
+        if (modelSelectorPendingOutsideDismiss) {
+          closeReactControlledMenu(nativeComposerTrigger());
+          modelSelectorPendingOutsideDismiss = false;
+        }
+        queueEnsure();
+        return;
+      }
       const row = nativeEffortRow(parentMenu);
       if (!row) return;
       beginNativeEffortTransaction();
@@ -1960,6 +1994,19 @@ export function createInjectionSource(features, {
       rail.setAttribute("aria-valuenow", String(index));
     }
 
+    function syncGenericMaximumVisual(rail, effortText, fastButton, maximum) {
+      const value = String(maximum);
+      rail?.setAttribute("data-highlighted", value);
+      rail?.setAttribute("data-max", value);
+      effortText?.setAttribute("data-maximum", value);
+      fastButton?.setAttribute("data-max-power-selection", value);
+      const maxEffects = rail?.querySelector('[class*="_MaxEffects_"]');
+      if (maxEffects) {
+        maxEffects.style.opacity = maximum ? "1" : "0";
+        if (maximum) maxEffects.style.transform = "translateX(0)";
+      }
+    }
+
     function neutralizeStaleSliderVisual(rail) {
       for (const selector of [
         "[data-codex-model-slider-native-range]",
@@ -1983,9 +2030,21 @@ export function createInjectionSource(features, {
       return value - Math.floor(value);
     }
 
-    function syncNativeFastParticles(rail, enabled) {
+    function syncNativeFastParticles(rail, enabled, entering = false) {
       const track = Array.from(rail.children).find((element) => String(element.className).includes("_Track_"));
       if (!track) return;
+      const staticParticles = rail.querySelector('[class*="_ParticleTransition_"]');
+      if (staticParticles && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        staticParticles.__codexStaticParticleFade?.cancel();
+        staticParticles.style.opacity = enabled ? "0" : "1";
+        if (entering) {
+          // 动态粒子渐显时，让原有星点在同一时间淡出。
+          staticParticles.__codexStaticParticleFade = staticParticles.animate(
+            [{ opacity: 1 }, { opacity: 0 }],
+            { duration: 240, easing: "ease-out" },
+          );
+        }
+      }
       track.querySelectorAll('[class*="_FastParticleClip_"]').forEach((element) => element.remove());
       if (!enabled || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
       const clipClass = nativeCssModuleClass("FastParticleClip");
@@ -2025,6 +2084,10 @@ export function createInjectionSource(features, {
       clip.append(particles);
       const tickRail = Array.from(track.children).find((element) => String(element.className).includes("_TickRail_"));
       track.insertBefore(clip, tickRail ?? null);
+      if (entering) {
+        // 首帧沿用关闭 Fast 时的星点，再渐显流动粒子。
+        clip.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 240, easing: "ease-out" });
+      }
     }
 
     function syncGenericFastVisual(shell, enabled, maxPowerSelection, animate = false) {
@@ -2033,7 +2096,12 @@ export function createInjectionSource(features, {
       if (!button || !rail) return;
       button.setAttribute("aria-pressed", String(enabled));
       button.setAttribute("data-fast-mode-enabled", String(enabled));
-      button.setAttribute("data-max-power-selection", String(maxPowerSelection));
+      syncGenericMaximumVisual(
+        rail,
+        shell.querySelector("[data-codex-model-slider-effort-row] [data-maximum]"),
+        button,
+        maxPowerSelection,
+      );
       button.setAttribute("aria-label", enabled
         ? (locale === "zh-CN" ? "关闭 Fast 模式" : "Disable Fast mode")
         : (locale === "zh-CN" ? "开启 Fast 模式" : "Enable Fast mode"));
@@ -2042,8 +2110,18 @@ export function createInjectionSource(features, {
       if (icon && content) content.replaceChildren(icon);
       rail.setAttribute("data-fast-mode", String(enabled));
       rail.setAttribute("data-fast-mode-dot-transition", animate ? (enabled ? "entering" : "exiting") : (enabled ? "active" : "inactive"));
-      syncNativeFastParticles(rail, enabled);
+      syncNativeFastParticles(rail, enabled, animate && enabled);
       setGenericSliderVisual(rail, Number(rail.getAttribute("aria-valuenow") ?? 0), Number(rail.getAttribute("aria-valuemax") ?? 0) + 1);
+      if (animate && enabled) {
+        shell.setAttribute("data-codex-model-slider-fast-transitioning", "");
+        setTimeout(() => {
+          if (!shell.isConnected) return;
+          shell.removeAttribute("data-codex-model-slider-fast-transitioning");
+          queueEnsure();
+        }, 260);
+      } else {
+        shell.removeAttribute("data-codex-model-slider-fast-transitioning");
+      }
       if (animate) {
         setTimeout(() => {
           if (rail.isConnected && rail.getAttribute("data-fast-mode") === String(enabled)) {
@@ -2102,6 +2180,88 @@ export function createInjectionSource(features, {
       return clone;
     }
 
+    function syncClonedPowerEffects(nativeContainer, shell) {
+      const source = nativeContainer.querySelector("[data-model-picker-power-slider]");
+      const clone = shell.querySelector("[data-codex-model-slider-native-slider]");
+      if (!source || !clone) return null;
+      const sourceCanvas = source.querySelector("canvas");
+      const cloneCanvas = clone.querySelector("canvas");
+      let canvasTimer = null;
+      let observer = null;
+      const disconnect = () => {
+        observer?.disconnect();
+        if (canvasTimer != null) clearInterval(canvasTimer);
+      };
+      if (sourceCanvas && cloneCanvas) {
+        // 原生 canvas 可能在首次克隆时尚未绘制；持续同步其高光纹理。
+        const scratch = document.createElement("canvas");
+        const scratchContext = scratch.getContext("2d");
+        const cloneContext = cloneCanvas.getContext("2d");
+        const copyCanvas = () => {
+          if (!source.isConnected || !shell.isConnected) {
+            disconnect();
+            return;
+          }
+          if (scratch.width !== sourceCanvas.width || scratch.height !== sourceCanvas.height) {
+            scratch.width = sourceCanvas.width;
+            scratch.height = sourceCanvas.height;
+            cloneCanvas.width = sourceCanvas.width;
+            cloneCanvas.height = sourceCanvas.height;
+          }
+          scratchContext.clearRect(0, 0, scratch.width, scratch.height);
+          scratchContext.drawImage(sourceCanvas, 0, 0);
+          const y = Math.floor(scratch.height / 2);
+          const hasDrawing = [0.25, 0.5, 0.75].some((ratio) => (
+            scratchContext.getImageData(Math.floor(scratch.width * ratio), y, 1, 1).data[3] > 0
+          ));
+          if (!hasDrawing) return;
+          cloneContext.clearRect(0, 0, cloneCanvas.width, cloneCanvas.height);
+          cloneContext.drawImage(scratch, 0, 0);
+        };
+        copyCanvas();
+        canvasTimer = setInterval(copyCanvas, 80);
+      }
+      const sourceEffects = source.querySelector('[class*="_MaxEffects_"]');
+      const cloneEffects = clone.querySelector('[class*="_MaxEffects_"]');
+      if (!sourceEffects || !cloneEffects) return { disconnect };
+      const sync = () => {
+        if (!source.isConnected || !shell.isConnected) {
+          disconnect();
+          return;
+        }
+        const sourceTransition = sourceEffects.querySelector('[class*="_ParticleTransition_"]');
+        let cloneTransition = cloneEffects.querySelector('[class*="_ParticleTransition_"]');
+        if (!sourceTransition) {
+          if (clone.querySelector("[data-fast-mode]")?.getAttribute("data-fast-mode") !== "true") {
+            cloneTransition?.remove();
+          }
+          return;
+        }
+        const sourceParticles = sourceTransition.querySelectorAll('[class*="_TrackParticle_"]');
+        let cloneParticles = cloneTransition?.querySelectorAll('[class*="_TrackParticle_"]');
+        if (!cloneTransition || sourceParticles.length !== cloneParticles.length) {
+          cloneTransition?.remove();
+          cloneTransition = sourceTransition.cloneNode(true);
+          cloneEffects.append(cloneTransition);
+          cloneParticles = cloneTransition.querySelectorAll('[class*="_TrackParticle_"]');
+        }
+        cloneTransition.setAttribute("style", sourceTransition.getAttribute("style") ?? "");
+        sourceParticles.forEach((particle, index) => {
+          const style = particle.getAttribute("style") ?? "";
+          if (cloneParticles[index].getAttribute("style") !== style) {
+            cloneParticles[index].setAttribute("style", style);
+          }
+        });
+        if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          cloneTransition.style.opacity = clone.querySelector("[data-fast-mode]")?.getAttribute("data-fast-mode") === "true" ? "0" : "1";
+        }
+      };
+      observer = new MutationObserver(sync);
+      observer.observe(sourceEffects, { attributes: true, attributeFilter: ["style"], childList: true, subtree: true });
+      sync();
+      return { disconnect };
+    }
+
     function createGenericModelSlider(parentMenu, selector, identity, model, selectedEffort) {
       const efforts = model.supportedReasoningLevels.map((level) => level.effort);
       const selectedIndex = efforts.indexOf(selectedEffort);
@@ -2158,9 +2318,21 @@ export function createInjectionSource(features, {
       buttonLabel.className = classes.ViewToggleModelLabel;
       buttonLabel.setAttribute("data-codex-model-slider-model-label", "");
       buttonLabel.textContent = modelDisplayLabel(identity, selector);
+      const modelRow = document.createElement("span");
+      modelRow.setAttribute("data-codex-model-slider-model-row", "");
+      modelRow.style.display = "inline-flex";
+      modelRow.style.alignItems = "center";
+      modelRow.style.justifyContent = "center";
+      modelRow.style.gap = "calc(var(--spacing) / 2)";
+      modelRow.style.minWidth = "0";
+      modelRow.style.maxWidth = "100%";
+      modelRow.append(buttonLabel);
       const effortText = selectedEffortVisible ? document.createElement("span") : null;
       if (effortText) {
         effortText.className = classes.ViewToggleEffortLabel;
+        // 原生标签会跨满整行；收回中列，使上下两行各自居中。
+        effortText.style.gridColumn = "2";
+        effortText.style.gridRow = "1";
         effortText.textContent = effortLabel(selectedEffort);
         effortText.setAttribute("data-accent", "true");
         effortText.setAttribute("data-effort-only", "false");
@@ -2174,13 +2346,13 @@ export function createInjectionSource(features, {
       )?.cloneNode(true);
       if (nativeChevron) {
         nativeChevron.classList.add(classes.ViewToggleIcon);
+        nativeChevron.style.gridArea = "auto";
+        nativeChevron.style.flexShrink = "0";
         nativeChevron.setAttribute("aria-hidden", "true");
-        if (effortText) effortRow.append(effortText);
-        effortRow.append(nativeChevron);
-      } else {
-        if (effortText) effortRow.append(effortText);
+        modelRow.append(nativeChevron);
       }
-      buttonContent.append(effortRow, buttonLabel);
+      if (effortText) effortRow.append(effortText);
+      buttonContent.append(effortRow, modelRow);
       modelButton.append(buttonContent);
       const openModels = () => openControllerModelMenu(parentMenu, modelButton, selector);
       modelButton.addEventListener("click", openModels);
@@ -2297,7 +2469,12 @@ export function createInjectionSource(features, {
       }
       setGenericSliderVisual(rail, selectedIndex, efforts.length);
       syncNativeFastParticles(rail, fastEnabled);
-      setGenericSliderVisual(rail, selectedIndex, efforts.length);
+      syncGenericMaximumVisual(
+        rail,
+        effortText,
+        shell.querySelector("[data-codex-model-slider-fast]"),
+        selectedEffort === "ultra",
+      );
 
       let pendingIndex = selectedIndex;
       let dragging = false;
@@ -2316,10 +2493,9 @@ export function createInjectionSource(features, {
         rail.setAttribute("aria-valuetext", effortLabel(effort));
         if (effortText) {
           effortText.textContent = effortLabel(effort);
-          effortText.setAttribute("data-maximum", String(effort === "ultra"));
         }
         const fastButton = shell.querySelector("[data-codex-model-slider-fast]");
-        fastButton?.setAttribute("data-max-power-selection", String(effort === "ultra"));
+        syncGenericMaximumVisual(rail, effortText, fastButton, effort === "ultra");
       };
       const preview = (clientX) => previewIndex(indexAt(clientX));
       rail.addEventListener("pointerdown", (event) => {
@@ -2421,7 +2597,8 @@ export function createInjectionSource(features, {
       const selectedServiceTier = nativeComposerModelController()?.selectedServiceTier;
       const serviceTierKey = selectedServiceTier?.id ?? selectedServiceTier ?? "standard";
       const selectionMode = nativeComposerModelController()?.selectionMode ?? "";
-      const key = `${identity.raw}:${selectedEffortValue}:${serviceTierKey}:${selectionMode}:${efforts.map((level) => level.effort).join(",")}`;
+      const structureKey = `${identity.raw}:${selectedEffortValue}:${selectionMode}:${efforts.map((level) => level.effort).join(",")}`;
+      const key = `${structureKey}:${serviceTierKey}`;
       const existing = parentMenu.querySelector(":scope > [data-codex-model-slider-generic]");
       const nativeTemplateReady = Boolean(
         parentMenu.firstElementChild
@@ -2439,11 +2616,24 @@ export function createInjectionSource(features, {
       const canUpgradeFallback = Boolean(
         existing?.querySelector("[data-codex-model-slider-fallback]") && nativeTemplateReady,
       );
+      if (existing?.getAttribute("data-codex-model-slider-structure-key") === structureKey
+        && existing.hasAttribute("data-codex-model-slider-fast-transitioning") && !canUpgradeFallback) {
+        centerGenericModelPicker(parentMenu);
+        return true;
+      }
+      const currentFast = existing?.querySelector("[data-codex-model-slider-rail]")?.getAttribute("data-fast-mode");
+      const nativeFast = parentMenu.firstElementChild
+        ?.querySelector("[data-model-picker-power-slider] [data-fast-mode]")?.getAttribute("data-fast-mode");
+      if (existing?.getAttribute("data-codex-model-slider-structure-key") === structureKey
+        && currentFast != null && currentFast === nativeFast && !canUpgradeFallback) {
+        existing.setAttribute("data-codex-model-slider-generic", key);
+        centerGenericModelPicker(parentMenu);
+        return true;
+      }
       if (existing?.getAttribute("data-codex-model-slider-generic") === key && !canUpgradeFallback) {
         centerGenericModelPicker(parentMenu);
         return true;
       }
-      existing?.remove();
       const nativeContainer = parentMenu.firstElementChild;
       if (!nativeContainer) return false;
       const shell = createGenericModelSlider(
@@ -2453,29 +2643,37 @@ export function createInjectionSource(features, {
         displayModel,
         selectedEffortValue,
       );
-      if (!shell) return false;
+      if (!shell) {
+        restoreGenericModelPicker(nativeContainer);
+        return false;
+      }
+      modelSelectorGenericContainers.get(nativeContainer)?.effectMirror?.disconnect();
+      existing?.remove();
       if (!modelSelectorGenericContainers.has(nativeContainer)) {
-        modelSelectorGenericContainers.set(nativeContainer, nativeContainer.style.display);
+        modelSelectorGenericContainers.set(nativeContainer, {
+          position: nativeContainer.style.position,
+          inset: nativeContainer.style.inset,
+          opacity: nativeContainer.style.opacity,
+          pointerEvents: nativeContainer.style.pointerEvents,
+          ariaHidden: nativeContainer.getAttribute("aria-hidden"),
+          inert: nativeContainer.inert,
+        });
       }
       parentMenu.setAttribute("data-codex-model-slider-generic-menu", "");
-      nativeContainer.style.display = "none";
+      nativeContainer.style.position = "absolute";
+      nativeContainer.style.inset = "0";
+      nativeContainer.style.opacity = "0";
+      nativeContainer.style.pointerEvents = "none";
+      nativeContainer.setAttribute("aria-hidden", "true");
+      nativeContainer.inert = true;
       shell.setAttribute("data-codex-model-slider-generic", key);
+      shell.setAttribute("data-codex-model-slider-structure-key", structureKey);
       parentMenu.append(shell);
+      modelSelectorGenericContainers.get(nativeContainer).effectMirror = syncClonedPowerEffects(nativeContainer, shell);
       centerGenericModelPicker(parentMenu);
       return true;
     }
 
-    function restoreGenericModelPicker(parentMenu) {
-      parentMenu.querySelector(":scope > [data-codex-model-slider-generic]")?.remove();
-      parentMenu.removeAttribute("data-codex-model-slider-generic-menu");
-      parentMenu.style.removeProperty("--codex-model-slider-menu-center-shift");
-      const nativeContainer = parentMenu.firstElementChild;
-      if (nativeContainer && modelSelectorGenericContainers.has(nativeContainer)) {
-        nativeContainer.style.display = modelSelectorGenericContainers.get(nativeContainer);
-        modelSelectorGenericContainers.delete(nativeContainer);
-      }
-    }
-
     function enhanceNativeModelPicker(parentMenu, selector) {
       if (enhanceGenericModelPicker(parentMenu, selector)) return;
       const toggle = parentMenu.querySelector("[data-model-picker-view-toggle]");
@@ -2583,9 +2781,10 @@ export function createInjectionSource(features, {
       }
       // 原生开合的临时 min-width 钉定与弹层水平居中都基于对 Measurement
       // 探针的测量；把探针文本同步为 MCX 显示标签，原生机制即可测得
-      // 真实显示宽度（含 110px 名称上限与 160px Content 上限）。
+      // 真实显示宽度。保留 React 持有的子节点，避免切模型时卸载失败。
       const measurement = trigger.querySelector('[class*="_ModelPickerTriggerMeasurement_"]');
-      if (measurement && measurement.textContent !== label) measurement.textContent = label;
+      const measurementText = measurement && firstVisibleTextNode(measurement);
+      if (measurementText && measurementText.nodeValue !== label) measurementText.nodeValue = label;
     }
 
     function ensureModelSelector() {
@@ -2597,6 +2796,7 @@ export function createInjectionSource(features, {
       }
       pruneModelSubmenuPositionObservers();
       pruneNativeModelToggleHandlers();
+      pruneGenericModelPickerContainers();
       document.documentElement.setAttribute("data-codex-model-slider-catalog-ready", "");
       if (!modelSelectorStyle.isConnected) document.head?.append(modelSelectorStyle);
       enhanceComposerModelTrigger(selector);
@@ -2667,8 +2867,8 @@ export function createInjectionSource(features, {
         if (handlers.originalAriaExpanded == null) toggle.removeAttribute("aria-expanded");
         else toggle.setAttribute("aria-expanded", handlers.originalAriaExpanded);
       }
-      for (const [container, display] of modelSelectorGenericContainers) {
-        if (container.isConnected) container.style.display = display;
+      for (const container of modelSelectorGenericContainers.keys()) {
+        restoreGenericModelPicker(container);
       }
       document.querySelectorAll("[data-codex-model-slider-divider]")
         .forEach((element) => element.remove());
@@ -2685,7 +2885,6 @@ export function createInjectionSource(features, {
       document.documentElement.removeAttribute("data-codex-model-slider-catalog-ready");
       modelSelectorStyle.remove();
       modelSelectorOriginalToggleLabels.clear();
-      modelSelectorGenericContainers.clear();
       modelSelectorNativeToggleHandlers.clear();
     }
 
@@ -2728,6 +2927,10 @@ export function createInjectionSource(features, {
       // CDP 重连会轮换 token；保留已有页面和草稿，只重试未就绪的页面。
       config.bindingName = bindingName;
       config.bindingToken = bindingToken;
+      for (const feature of pageScriptFeatures) {
+        feature.pageScript.config.bindingName = bindingName;
+        feature.pageScript.config.bindingToken = bindingToken;
+      }
       for (const [requestId, pending] of pendingHostActions) {
         if (pending.kind === "surface-load") pendingHostActions.delete(requestId);
       }
@@ -2821,7 +3024,17 @@ export function createInjectionSource(features, {
           .map((name) => [name, style.getPropertyValue(name).trim()])
           .filter(([, value]) => value),
       );
-      const mode = root.classList.contains("electron-dark") || style.colorScheme === "dark"
+      // 按语义和命名空间解析，不依赖构建哈希或猜测近似名称。
+      for (const name of themeTokenNames) {
+        if (tokens[name]) continue;
+        const semanticNames = [name, ...(themeTokenAliases[name] ?? [])];
+        const candidates = semanticNames.flatMap((candidate) => candidate.startsWith("--color-")
+          ? [candidate, candidate.replace("--color-", "--app-color-")]
+          : [candidate]);
+        const value = candidates.map((candidate) => style.getPropertyValue(candidate).trim()).find(Boolean);
+        if (value) tokens[name] = value;
+      }
+      const mode = root.dataset.theme === "dark" || root.classList.contains("electron-dark") || style.colorScheme === "dark"
         ? "dark"
         : "light";
       return { root, style, tokens, mode };
@@ -3091,6 +3304,8 @@ export function createInjectionSource(features, {
       frame.title = title;
       frame.allow = "clipboard-write";
       frame.style.cssText = "width:100%;height:100%;border:0;display:block;background:transparent";
+      // 图片页覆盖原生标题栏，避免控件点击被窗口拖拽区域吞掉。
+      if (featureId === "images") frame.style.setProperty("-webkit-app-region", "no-drag");
       return frame;
     }
 
@@ -4290,7 +4505,7 @@ export function createInjectionSource(features, {
           respondToSurface(record, requestId, { ok: true, result: { paths } });
           return;
         }
-        if (["attach-file", "create-image-edit-thread"].includes(action)) {
+        if (["attach-file", "create-image-edit-thread", "list-cloud-images", "import-cloud-image"].includes(action)) {
           if (typeof globalThis[config.bindingName] !== "function") {
             throw new Error("The native file bridge is unavailable");
           }
@@ -4313,10 +4528,36 @@ export function createInjectionSource(features, {
       }
     }
 
+    function requestPageHostAction(featureId, action, payload) {
+      if (!featureById.get(featureId)?.hostActions.has(action)) return Promise.reject(new Error("Host action is not registered"));
+      if (typeof globalThis[config.bindingName] !== "function") return Promise.reject(new Error("Host bridge is unavailable"));
+      return new Promise((resolve, reject) => {
+        const requestId = crypto.randomUUID();
+        const timer = setTimeout(() => {
+          pendingHostActions.delete(requestId);
+          reject(new Error("Host request timed out"));
+        }, 10_000);
+        pendingHostActions.set(requestId, { kind: "page-script", resolve, reject, timer });
+        try {
+          globalThis[config.bindingName](JSON.stringify({ token: config.bindingToken, featureId, requestId, action, payload }));
+        } catch (error) {
+          clearTimeout(timer);
+          pendingHostActions.delete(requestId);
+          reject(error);
+        }
+      });
+    }
+
     function resolveHostAction(requestId, response) {
       const pending = pendingHostActions.get(requestId);
       if (!pending) return false;
       pendingHostActions.delete(requestId);
+      if (pending.kind === "page-script") {
+        clearTimeout(pending.timer);
+        if (response.ok) pending.resolve(response.result);
+        else pending.reject(new Error(response.error?.message ?? "Host request failed"));
+        return true;
+      }
       const record = surfaceRecords.get(pending.recordKey);
       if (!record) return false;
       if (pending.kind === "surface-load") {
@@ -4472,7 +4713,7 @@ export function createInjectionSource(features, {
     const themeObserver = new MutationObserver(queueTheme);
     themeObserver.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["class", "style"],
+      attributeFilter: ["class", "style", "data-theme"],
     });
     domObservers.push(themeObserver);
 
@@ -4499,6 +4740,12 @@ export function createInjectionSource(features, {
       resolveHostAction,
       dispose: () => {
         lifetime.abort();
+        for (const [id, pending] of pendingHostActions) {
+          if (pending.kind !== "page-script") continue;
+          clearTimeout(pending.timer);
+          pending.reject(new Error("Runtime disposed"));
+          pendingHostActions.delete(id);
+        }
         for (const cleanup of pageScriptCleanups.splice(0)) {
           try { cleanup(); } catch (error) {
             console.warn("[codex-personal] page-script cleanup failed", error);
@@ -4559,6 +4806,7 @@ export function createInjectionSource(features, {
     summaryLayout: RESPONSIVE_SUMMARY_LAYOUT,
     rightPanelRouteKinds: RIGHT_PANEL_ROUTE_KINDS,
     themeTokens: CODEX_THEME_TOKENS,
+    themeTokenAliases: CODEX_THEME_TOKEN_ALIASES,
     features: runtimeFeatures,
   })})`;
 }