minecodex 0.1.20 → 0.2.1

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

@@ -37,7 +37,7 @@ export function responsiveSummaryVisibleSurface({ displayMode, isPinned, isPopov
 }
 
 export function responsiveSummaryContentShift({ displayMode, isPinned }, layout = RESPONSIVE_SUMMARY_LAYOUT) {
-  return displayMode === "shift" && isPinned
+  return displayMode !== "overlay" && isPinned
     ? -(layout.panelWidth + layout.panelInset) / 2
     : 0;
 }
@@ -78,6 +78,18 @@ function requireDeclaredLoopbackSurface(feature, value) {
   return url;
 }
 
+export function pageScriptServiceOrigin(feature) {
+  if (!feature.pageScript || !feature.surfaceUrl || !feature.healthUrl) return null;
+  const surfaceUrl = new URL(feature.surfaceUrl);
+  const healthUrl = new URL(feature.healthUrl);
+  if (
+    surfaceUrl.origin !== healthUrl.origin
+    || surfaceUrl.protocol !== "http:"
+    || !LOOPBACK_SURFACE_HOSTS.has(surfaceUrl.hostname)
+  ) return null;
+  return surfaceUrl.origin;
+}
+
 function findFrameByName(frameTree, frameName) {
   if (frameTree.frame?.name === frameName) return frameTree.frame;
   for (const child of frameTree.childFrames ?? []) {
@@ -127,9 +139,6 @@ export function createInjectionSource(features, {
     const pinnedSurfaceMarker = "data-codex-personal-pinned-summary";
     const modalSurfaceMarker = "data-codex-personal-modal";
     const promptPreviewMarker = "data-codex-personal-prompt-preview";
-    const threadShiftStyle = document.createElement("style");
-    threadShiftStyle.setAttribute("data-codex-personal-summary-shift-style", "");
-    threadShiftStyle.textContent = "[data-codex-personal-summary-shift] { transform: none !important; --thread-wide-block-inline-shift: 0px !important; }";
     const nativeLabels = {
       sites: ["sites", "站点"],
       scheduled: ["scheduled", "计划任务"],
@@ -254,7 +263,7 @@ export function createInjectionSource(features, {
     const modelSelectorFeature = features.find(
       (feature) => feature.entry?.kind === "composer-model-selector",
     ) ?? null;
-    const pageScriptFeatures = features.filter((feature) => feature.entry?.kind === "page-script");
+    const pageScriptFeatures = features.filter((feature) => feature.pageScript);
     const pageSurfaces = new Map();
     const pinnedSurfaces = new Map();
     const surfaceRecords = new Map();
@@ -273,9 +282,9 @@ export function createInjectionSource(features, {
     let savedComposerThread = null;
     let currentThread = null;
     let currentSummaryDisplayMode = null;
-    let shiftedThreadContent = null;
-    let shiftedThreadOriginal = null;
+    let shiftedConversationOwners = [];
     let mainContentObserver = null;
+    let toolbarReadiness = null;
     const domObservers = [];
     const pageScriptCleanups = [];
     const pendingHostActions = new Map();
@@ -304,6 +313,7 @@ export function createInjectionSource(features, {
     let modelSelectorFastControlVisible = false;
     // 持久化脏标记：仅在图标实际变化时写一次 localStorage。
     let modelSelectorNativeFastIconsDirty = false;
+    const modelSelectorFastIconStorageKey = "codex-model-slider:fast-icons:v1";
     const modelSelectorStyle = document.createElement("style");
     modelSelectorStyle.setAttribute("data-codex-model-slider-style", "");
     modelSelectorStyle.textContent = `
@@ -384,7 +394,7 @@ export function createInjectionSource(features, {
       document.documentElement.append(modelSelectorStyle);
       // 启动阶段就解析 Fast 图标：先读持久化的原生克隆，再从 app bundle 静态提取兜底，
       // 避免首次会话必须等用户点开弹窗后 DOM 里才出现图标。
-      const persistedIcons = loadPersistedNativeFastIcons();
+      const persistedIcons = loadPersistedNativeFastIcons(modelSelectorFastIconStorageKey);
       if (persistedIcons) {
         modelSelectorNativeFastIcons = persistedIcons;
         modelSelectorNativeFastIconSources = {};
@@ -404,9 +414,16 @@ export function createInjectionSource(features, {
           "window",
           "document",
           "MutationObserver",
+          "config",
           `"use strict";\n${source}`,
         );
-        const cleanup = installer(lifetime.signal, window, document, MutationObserver);
+        const cleanup = installer(
+          lifetime.signal,
+          window,
+          document,
+          MutationObserver,
+          feature.pageScript.config ?? {},
+        );
         if (typeof cleanup === "function") pageScriptCleanups.push(cleanup);
       } catch (error) {
         console.warn(`[codex-personal] page-script feature failed: ${feature.id}`, error);
@@ -471,6 +488,57 @@ export function createInjectionSource(features, {
       }) ?? null;
     }
 
+    function structuralToolbarAnchor() {
+      const buttons = Array.from(document.querySelectorAll("button"));
+      return buttons.find((button) => /temporary chat/i.test(button.getAttribute("aria-label") ?? ""))
+        ?? buttons.find((button) => new Set(["Toggle summary", "Toggle pinned summary"])
+          .has(button.getAttribute("aria-label")))
+        ?? buttons.find((button) => button.getAttribute("aria-label") === "Toggle bottom panel")
+        ?? buttons.find((button) => button.getAttribute("aria-label") === "Toggle side panel")
+        ?? null;
+    }
+
+    function stopToolbarReadiness() {
+      if (!toolbarReadiness) return;
+      toolbarReadiness.observer.disconnect();
+      if (toolbarReadiness.retryTimer != null) clearTimeout(toolbarReadiness.retryTimer);
+      if (toolbarReadiness.deadlineTimer != null) clearTimeout(toolbarReadiness.deadlineTimer);
+      toolbarReadiness = null;
+    }
+
+    function ensureToolbarReadiness(candidate) {
+      const thread = threadIdentity();
+      if (toolbarReadiness?.candidate === candidate && toolbarReadiness.thread === thread) return;
+      stopToolbarReadiness();
+      const record = {
+        candidate,
+        thread,
+        attempts: 0,
+        retryTimer: null,
+        deadlineTimer: null,
+        observer: null,
+      };
+      const wake = () => {
+        if (toolbarReadiness !== record) return;
+        queueEnsure();
+      };
+      record.observer = new ResizeObserver(wake);
+      record.observer.observe(candidate);
+      const header = candidate.closest("header");
+      if (header) record.observer.observe(header);
+      const retry = () => {
+        if (toolbarReadiness !== record || record.attempts >= 8) return;
+        record.attempts += 1;
+        wake();
+        record.retryTimer = setTimeout(retry, 75);
+      };
+      record.retryTimer = setTimeout(retry, 75);
+      record.deadlineTimer = setTimeout(() => {
+        if (toolbarReadiness === record) stopToolbarReadiness();
+      }, 1_500);
+      toolbarReadiness = record;
+    }
+
     function toolbarControlRoot(button) {
       return button?.parentElement?.parentElement ?? button?.parentElement ?? button ?? null;
     }
@@ -525,8 +593,10 @@ export function createInjectionSource(features, {
     }
 
     function mainContentViewport() {
-      return document.querySelector("[data-app-shell-main-content-layout]")
+      const composer = currentComposer();
+      return composer?.closest("main[data-app-shell-main-surface]")
         ?? document.querySelector("main[data-app-shell-main-surface]")
+        ?? document.querySelector("[data-app-shell-main-content-layout]")
         ?? document.querySelector("main");
     }
 
@@ -666,8 +736,6 @@ export function createInjectionSource(features, {
       return null;
     }
 
-    const modelSelectorFastIconStorageKey = "codex-model-slider:fast-icons:v1";
-
     function persistNativeFastIcons() {
       if (!modelSelectorNativeFastIcons || !modelSelectorNativeFastIconsDirty) return;
       try {
@@ -682,22 +750,29 @@ export function createInjectionSource(features, {
       }
     }
 
-    function loadPersistedNativeFastIcons() {
+    function loadPersistedNativeFastIcons(storageKey) {
+      let stored;
       try {
-        const payload = JSON.parse(localStorage.getItem(modelSelectorFastIconStorageKey) ?? "null");
-        if (!payload || typeof payload !== "object") return null;
-        const icons = {};
-        for (const [state, markup] of Object.entries(payload)) {
-          if (typeof markup !== "string") continue;
-          const container = document.createElement("template");
-          container.innerHTML = markup;
-          const svg = container.content.querySelector("svg");
-          if (svg) icons[state] = svg;
-        }
-        return Object.keys(icons).length ? icons : null;
+        stored = localStorage.getItem(storageKey);
       } catch {
         return null;
       }
+      let payload;
+      try {
+        payload = JSON.parse(stored ?? "null");
+      } catch {
+        return null;
+      }
+      if (!payload || typeof payload !== "object") return null;
+      const icons = {};
+      for (const [state, markup] of Object.entries(payload)) {
+        if (typeof markup !== "string") continue;
+        const container = document.createElement("template");
+        container.innerHTML = markup;
+        const svg = container.content.querySelector("svg");
+        if (svg) icons[state] = svg;
+      }
+      return Object.keys(icons).length ? icons : null;
     }
 
     function extractFastIconPath(source, prefix) {
@@ -911,14 +986,16 @@ export function createInjectionSource(features, {
         (option) => String(option.thinkingEffort ?? "") === String(selected.thinkingEffort ?? ""),
       );
       const selectedEffort = selectedOption ? effortFor(selectedOption) : (efforts[0] ?? "instant");
+      const defaultEffort = String(version.defaultReasoningEffort ?? efforts[0] ?? "instant").toLowerCase();
       const models = [{
         model: String(selected.slug ?? ""),
         displayName: String(version?.label ?? selected.slug ?? ""),
-        defaultReasoningEffort: selectedEffort,
+        defaultReasoningEffort: defaultEffort,
         supportedReasoningEfforts: efforts.map((effort) => ({ reasoningEffort: effort })),
       }];
       return {
         models,
+        reasoningEffort: selectedEffort,
         onSelectReasoningEffort(effort) {
           const target = options.find((option) => effortFor(option) === String(effort).toLowerCase());
           if (!target) return;
@@ -930,8 +1007,9 @@ export function createInjectionSource(features, {
       };
     }
 
-    function nativeCatalogModelFor(identity) {
-      const models = nativeComposerModelController()?.models ?? [];
+    function nativeCatalogModelFor(identity, selector = modelSelectorFeature?.modelSelector) {
+      const controller = nativeComposerModelController();
+      const models = controller?.models ?? [];
       const exact = models.find((model) => String(model.model ?? "").toLowerCase() === identity.raw.toLowerCase());
       const target = comparableModelLabel(identity.backend);
       const aliases = exact ? [] : models.filter((model) => (
@@ -939,13 +1017,25 @@ export function createInjectionSource(features, {
       ));
       const model = exact ?? (aliases.length === 1 ? aliases[0] : null);
       if (!model) return null;
+      const nativeReasoningLevels = (model.supportedReasoningEfforts ?? []).map((level) => ({
+        effort: String(level?.reasoningEffort ?? level?.effort ?? level ?? "").toLowerCase(),
+      })).filter((level) => level.effort);
+      const allowed = selector?.reasoningEffortOverrides?.[identity.raw.toLowerCase()];
+      const supportedReasoningLevels = allowed
+        ? nativeReasoningLevels.filter((level) => allowed.includes(level.effort))
+        : nativeReasoningLevels;
+      const currentReasoningLevel = String(controller?.reasoningEffort ?? "").toLowerCase();
       return {
         slug: String(model.model ?? ""),
         displayName: String(model.displayName ?? model.model ?? ""),
-        defaultReasoningLevel: String(model.defaultReasoningEffort ?? ""),
-        supportedReasoningLevels: (model.supportedReasoningEfforts ?? []).map((level) => ({
-          effort: String(level?.reasoningEffort ?? level?.effort ?? level ?? ""),
-        })).filter((level) => level.effort),
+        currentReasoningLevel: nativeReasoningLevels.some(
+          (level) => level.effort === currentReasoningLevel,
+        ) ? currentReasoningLevel : null,
+        currentReasoningLevelVisible: supportedReasoningLevels.some(
+          (level) => level.effort === currentReasoningLevel,
+        ),
+        defaultReasoningLevel: String(model.defaultReasoningEffort ?? "").toLowerCase(),
+        supportedReasoningLevels,
       };
     }
 
@@ -1591,6 +1681,9 @@ export function createInjectionSource(features, {
     }
 
     function selectNativeEffort(parentMenu, effort) {
+      const identity = modelIdentity(nativeModelValue(parentMenu));
+      const model = modelDefinitionFor(identity, modelSelectorFeature?.modelSelector);
+      if (!model?.supportedReasoningLevels?.some((level) => level.effort === String(effort).toLowerCase())) return;
       const controller = nativeComposerModelController();
       if (typeof controller?.onSelectReasoningEffort === "function") {
         controller.onSelectReasoningEffort(effort);
@@ -1666,6 +1759,24 @@ export function createInjectionSource(features, {
       rail.setAttribute("aria-valuenow", String(index));
     }
 
+    function neutralizeStaleSliderVisual(rail) {
+      for (const selector of [
+        "[data-codex-model-slider-native-range]",
+        "[data-codex-model-slider-native-thumb]",
+        "[data-codex-model-slider-range]",
+        "[data-codex-model-slider-thumb]",
+      ]) {
+        rail.querySelectorAll(selector).forEach((element) => {
+          element.style.setProperty("visibility", "hidden");
+        });
+      }
+      rail.querySelectorAll("[data-codex-model-slider-tick]").forEach((tick) => {
+        tick.removeAttribute("data-selected");
+      });
+      rail.removeAttribute("aria-valuenow");
+      rail.style.removeProperty("--codex-model-slider-progress");
+    }
+
     function nativeParticleSeed(index, salt) {
       const value = Math.sin((index + 1) * 12.9898 + salt * 78.233) * 43758.5453;
       return value - Math.floor(value);
@@ -1792,7 +1903,8 @@ export function createInjectionSource(features, {
 
     function createGenericModelSlider(parentMenu, selector, identity, model, selectedEffort) {
       const efforts = model.supportedReasoningLevels.map((level) => level.effort);
-      const selectedIndex = Math.max(0, efforts.indexOf(selectedEffort));
+      const selectedIndex = efforts.indexOf(selectedEffort);
+      const selectedEffortVisible = selectedIndex >= 0;
       const classes = Object.fromEntries([
         "Menu",
         "ViewToggle",
@@ -1890,7 +2002,20 @@ export function createInjectionSource(features, {
       rail.setAttribute("aria-label", locale === "zh-CN" ? "推理强度" : "Reasoning effort");
       rail.setAttribute("aria-valuemin", "0");
       rail.setAttribute("aria-valuemax", String(efforts.length - 1));
-      rail.setAttribute("aria-valuetext", effortLabel(efforts[selectedIndex]));
+      rail.setAttribute("aria-valuetext", selectedEffortVisible
+        ? effortLabel(selectedEffort)
+        : (locale === "zh-CN" ? "当前档位不可用" : "Current effort unavailable"));
+      rail.toggleAttribute("data-stale-reasoning-effort", !selectedEffortVisible);
+      if (!selectedEffortVisible) {
+        rail.setAttribute("aria-disabled", "true");
+        rail.removeAttribute("tabindex");
+        neutralizeStaleSliderVisual(rail);
+        const staleView = document.createElement("div");
+        staleView.className = classes.SimpleView;
+        staleView.append(nativeSlider ?? rail);
+        shell.append(viewControls, staleView);
+        return shell;
+      }
       if (!nativeSlider) {
         const track = document.createElement("div");
         track.setAttribute("data-codex-model-slider-track", "");
@@ -1986,7 +2111,7 @@ export function createInjectionSource(features, {
       // 控制器推导的任务内实际 effort 优先，避免子任务/主任务切换后触发器属性滞后；
       // 触发器属性仅在控制器无法解析时作为实时回退，静态目录默认值最后兜底。
       const nativeModel = nativeCatalogModelFor(identity);
-      const selectedEffort = nativeModel?.defaultReasoningLevel
+      const selectedEffort = nativeModel?.currentReasoningLevel
         ?? document.querySelector("[data-codex-intelligence-trigger]")
           ?.getAttribute("data-selected-reasoning-effort")
         ?? model.defaultReasoningLevel
@@ -2357,9 +2482,11 @@ export function createInjectionSource(features, {
       }
       if (next === currentThread) return;
       currentThread = next;
+      stopToolbarReadiness();
       savedComposerRange = null;
       savedComposerThread = null;
       hidePinnedSurfaces();
+      queueEnsure();
     }
 
     function currentComposer() {
@@ -2560,24 +2687,23 @@ export function createInjectionSource(features, {
       }
     }
 
-    function threadScrollContent() {
-      const scrollContainer = mainContentViewport()?.querySelector(".thread-scroll-container");
-      return scrollContainer?.firstElementChild instanceof HTMLElement
-        ? scrollContainer.firstElementChild
-        : null;
-    }
-
     function restoreThreadContentShift() {
-      if (!shiftedThreadContent || !shiftedThreadOriginal) return;
-      const { element, position, left, transition } = shiftedThreadOriginal;
-      if (element.isConnected) {
-        element.style.setProperty("position", position.value, position.priority);
-        element.style.setProperty("left", left.value, left.priority);
-        element.style.setProperty("transition", transition.value, transition.priority);
+      for (const { element, shift, translate } of shiftedConversationOwners) {
+        if (!element.isConnected) continue;
+        if (shift.value) {
+          element.style.setProperty(
+            "--thread-wide-block-inline-shift",
+            shift.value,
+            shift.priority,
+          );
+        } else {
+          element.style.removeProperty("--thread-wide-block-inline-shift");
+        }
+        if (translate.value) element.style.setProperty("translate", translate.value, translate.priority);
+        else element.style.removeProperty("translate");
         element.removeAttribute("data-codex-personal-summary-shift");
       }
-      shiftedThreadContent = null;
-      shiftedThreadOriginal = null;
+      shiftedConversationOwners = [];
     }
 
     function applyThreadContentShift(value) {
@@ -2585,45 +2711,40 @@ export function createInjectionSource(features, {
         restoreThreadContentShift();
         return;
       }
-      if (!threadShiftStyle.isConnected) {
-        (document.head ?? document.documentElement)?.append(threadShiftStyle);
-      }
-      const content = threadScrollContent();
-      if (!content) {
+      const viewport = mainContentViewport();
+      const owners = viewport
+        ? Array.from(viewport.querySelectorAll('[style*="--thread-wide-block-inline-shift"]'))
+        : [];
+      if (!owners.length) {
         restoreThreadContentShift();
         return;
       }
-      if (shiftedThreadContent !== content) {
+      if (
+        shiftedConversationOwners.length !== owners.length
+        || owners.some((owner, index) => shiftedConversationOwners[index]?.element !== owner)
+      ) {
         restoreThreadContentShift();
-        shiftedThreadContent = content;
-        shiftedThreadOriginal = {
-          element: content,
-          position: {
-            value: content.style.getPropertyValue("position"),
-            priority: content.style.getPropertyPriority("position"),
+        shiftedConversationOwners = owners.map((owner) => ({
+          element: owner,
+          shift: {
+            value: owner.style.getPropertyValue("--thread-wide-block-inline-shift"),
+            priority: owner.style.getPropertyPriority("--thread-wide-block-inline-shift"),
           },
-          left: {
-            value: content.style.getPropertyValue("left"),
-            priority: content.style.getPropertyPriority("left"),
+          translate: {
+            value: owner.style.getPropertyValue("translate"),
+            priority: owner.style.getPropertyPriority("translate"),
           },
-          transition: {
-            value: content.style.getPropertyValue("transition"),
-            priority: content.style.getPropertyPriority("transition"),
-          },
-        };
+        }));
+      }
+      for (const owner of owners) {
+        owner.style.setProperty(
+          "--thread-wide-block-inline-shift",
+          `${Number(value)}px`,
+          "important",
+        );
+        owner.style.setProperty("translate", `${Number(value)}px 0`, "important");
+        owner.setAttribute("data-codex-personal-summary-shift", String(value));
       }
-      const duration = reducedMotion() ? 0 : 300;
-      content.style.setProperty("transition", duration
-        ? "left 300ms cubic-bezier(.2,.8,.2,1)"
-        : "none", "important");
-      content.style.setProperty("position", "relative", "important");
-      content.style.setProperty("left", `${value}px`, "important");
-      content.setAttribute("data-codex-personal-summary-shift", String(value));
-      if (duration) window.setTimeout(() => {
-        if (content.getAttribute("data-codex-personal-summary-shift") !== String(value)) return;
-        content.style.setProperty("transition", "none", "important");
-        content.style.setProperty("left", `${value}px`, "important");
-      }, duration + 50);
     }
 
     function setSummarySurfaceVisible(surface, visible, mode) {
@@ -2728,7 +2849,7 @@ export function createInjectionSource(features, {
       surface.setAttribute("data-codex-personal-summary-presentation", displayMode);
       setSummarySurfaceVisible(surface, true, displayMode);
 
-      const shift = displayMode === "shift"
+      const shift = displayMode !== "overlay"
         ? -(layout.panelWidth + layout.panelInset) / 2
         : 0;
       applyThreadContentShift(shift);
@@ -3373,8 +3494,12 @@ export function createInjectionSource(features, {
       const detail = feature?.detailTabs?.find((candidate) => candidate.id === detailId);
       if (!feature || !detail) throw new Error("The requested detail Tab is not registered");
       const result = await openNativeDetailTab(feature, detail);
-      if (!result) throw nativeTabCapabilityError
-        ?? new Error("Codex native right-panel tabs are unavailable");
+      if (!result) {
+        const error = nativeTabCapabilityError
+          ?? new Error("Codex native right-panel tabs are unavailable");
+        error.code = "NATIVE_TAB_UNAVAILABLE";
+        throw error;
+      }
       return result;
     }
 
@@ -3489,13 +3614,20 @@ export function createInjectionSource(features, {
     }
 
     function ensureToolbarEntries() {
-      if (!toolbarFeatures.length) return;
+      if (!toolbarFeatures.length) {
+        stopToolbarReadiness();
+        return;
+      }
       const temporaryChatButton = nativeTemporaryChatButton();
       const summaryButton = nativeSummaryButton();
       const bottomPanelButton = nativeBottomPanelButton();
       const sidePanelButton = nativeSidePanelButton();
       const anchorButton = temporaryChatButton ?? summaryButton ?? bottomPanelButton ?? sidePanelButton;
-      if (!anchorButton) return;
+      if (!anchorButton) {
+        const candidate = structuralToolbarAnchor();
+        if (candidate) ensureToolbarReadiness(candidate);
+        return;
+      }
       const anchorRoot = toolbarControlRoot(anchorButton);
       // The bottom/side-panel toggles sit in narrow fixed containers that
       // travel with the native panels. Entries anchored to them must live in
@@ -3506,7 +3638,10 @@ export function createInjectionSource(features, {
       const useFallbackAnchor = anchorButton === sidePanelButton || anchorButton === bottomPanelButton;
       const summaryGroup = useFallbackAnchor ? null : nativeSummaryToolbarGroup(anchorButton);
       let targetGroup = summaryGroup ?? ensureFallbackSummaryToolbarGroup(anchorButton);
-      if (!targetGroup) return;
+      if (!targetGroup) {
+        ensureToolbarReadiness(anchorButton);
+        return;
+      }
       let cursor = useFallbackAnchor ? null : anchorRoot;
       for (const feature of toolbarFeatures) {
         const entries = Array.from(document.querySelectorAll(`[${entryMarker}="${feature.id}"]`));
@@ -3542,6 +3677,11 @@ export function createInjectionSource(features, {
           if (!used) group.remove();
         });
       }
+      if (toolbarFeatures.every((feature) => findEntry(feature.id)?.isConnected)) {
+        stopToolbarReadiness();
+      } else {
+        ensureToolbarReadiness(anchorButton);
+      }
     }
 
     function ensureEntries() {
@@ -3600,6 +3740,13 @@ export function createInjectionSource(features, {
       }, record.origin);
     }
 
+    function hostActionFailure(error) {
+      return {
+        code: typeof error?.code === "string" ? error.code : "HOST_ACTION_FAILED",
+        message: error?.message ?? "Host action failed",
+      };
+    }
+
     async function handleSurfaceHostAction(record, message) {
       const feature = featureById.get(record.featureId);
       const { requestId, action, payload = {} } = message;
@@ -3663,7 +3810,7 @@ export function createInjectionSource(features, {
       } catch (error) {
         respondToSurface(record, requestId, {
           ok: false,
-          error: { code: "HOST_ACTION_FAILED", message: error.message },
+          error: hostActionFailure(error),
         });
       }
     }
@@ -3831,9 +3978,9 @@ export function createInjectionSource(features, {
         if (ensureFrame != null) cancelAnimationFrame(ensureFrame);
         if (ensureTimer != null) clearTimeout(ensureTimer);
         for (const observer of domObservers) observer.disconnect();
+        stopToolbarReadiness();
         mainContentObserver?.observer.disconnect();
         restoreThreadContentShift();
-        threadShiftStyle.remove();
         for (const root of document.querySelectorAll("[data-codex-personal-toolbar-entry]")) root.remove();
         for (const group of document.querySelectorAll("[data-codex-personal-summary-toolbar-group]")) group.remove();
         for (const surface of pageSurfaces.values()) surface.remove();
@@ -3864,7 +4011,15 @@ export function createInjectionSource(features, {
     detailTabs: feature.detailTabs ?? [],
     hostActions: feature.hostActions ?? [],
     modelSelector: feature.modelSelector ?? null,
-    pageScript: feature.pageScript ?? null,
+    pageScript: feature.pageScript ? {
+      ...feature.pageScript,
+      config: {
+        serviceOrigin: pageScriptServiceOrigin(feature),
+        bindingName,
+        bindingToken,
+        featureId: feature.id,
+      },
+    } : null,
   }));
   return `(${install.toString()})(${JSON.stringify({
     version: RUNTIME_VERSION,
@@ -3886,7 +4041,9 @@ export function createRuntimeReadyContract({
   runtimeSessionId,
 }) {
   const discovered = Boolean(renderer.discovered);
+  const discoveredTargets = Math.max(0, Number(renderer.discoveredTargets) || 0);
   const injectedTargets = Math.max(0, Number(renderer.injectedTargets) || 0);
+  const targetFailures = Array.isArray(renderer.targetFailures) ? renderer.targetFailures : [];
   const active = Boolean(renderer.active) && discovered && injectedTargets > 0;
   return {
     pid,
@@ -3904,8 +4061,11 @@ export function createRuntimeReadyContract({
     })),
     renderer: {
       discovered,
+      discoveredTargets,
       injectedTargets,
       active,
+      healthy: active && targetFailures.length === 0 && injectedTargets === discoveredTargets,
+      targetFailures,
       runtimeSessionId: renderer.runtimeSessionId ?? runtimeSessionId,
     },
   };
@@ -4106,6 +4266,8 @@ export class CodexRuntime {
     this.onStatusChange = onStatusChange;
     this.onManagedCodexPidChange = onManagedCodexPidChange;
     this.injectedTargets = new Set();
+    this.rendererTargetIds = new Set();
+    this.targetFailures = new Map();
     this.clients = new Map();
     this.scriptIds = new Map();
     this.bindingTokens = new Map();
@@ -4159,10 +4321,21 @@ export class CodexRuntime {
 
   getRendererStatus() {
     const injectedTargets = this.injectedTargets.size;
+    const discoveredTargets = this.rendererTargetIds.size;
+    const targetFailures = Array.from(this.targetFailures, ([targetId, failure]) => ({
+      targetId,
+      attempts: failure.attempts,
+      state: "retrying",
+      lastFailure: failure.lastFailure,
+    })).sort((left, right) => left.targetId.localeCompare(right.targetId));
+    const active = !this.stopping && this.rendererDiscovered && injectedTargets > 0;
     return {
       discovered: this.rendererDiscovered,
+      discoveredTargets,
       injectedTargets,
-      active: !this.stopping && this.rendererDiscovered && injectedTargets > 0,
+      active,
+      healthy: active && targetFailures.length === 0 && injectedTargets === discoveredTargets,
+      targetFailures,
       runtimeSessionId: this.runtimeSessionId,
     };
   }
@@ -4173,8 +4346,11 @@ export class CodexRuntime {
     if (
       previous
       && previous.discovered === status.discovered
+      && previous.discoveredTargets === status.discoveredTargets
       && previous.injectedTargets === status.injectedTargets
       && previous.active === status.active
+      && previous.healthy === status.healthy
+      && JSON.stringify(previous.targetFailures) === JSON.stringify(status.targetFailures)
       && previous.runtimeSessionId === status.runtimeSessionId
     ) return;
     this.lastRendererStatus = status;
@@ -4218,6 +4394,8 @@ export class CodexRuntime {
     this.bindingTokens.clear();
     this.hostActionChains.clear();
     this.injectedTargets.clear();
+    this.rendererTargetIds.clear();
+    this.targetFailures.clear();
     this.rendererDiscovered = false;
     this.browserClient?.socket.close();
     this.browserClient = null;
@@ -4581,6 +4759,10 @@ export class CodexRuntime {
       });
       return;
     }
+    if (request.action === "import-generated-image") {
+      await this.importGeneratedImage(feature, request.payload);
+      return;
+    }
     try {
       if (request.action !== "attach-file") throw new Error("Unsupported native Host action");
       const result = await this.attachFileToComposer(client, request.payload?.path, request.requestId);
@@ -4593,6 +4775,22 @@ export class CodexRuntime {
     }
   }
 
+  async importGeneratedImage(feature, payload) {
+    const origin = pageScriptServiceOrigin(feature);
+    if (!origin) throw new Error("Generated image import service is unavailable");
+    const response = await this.fetchImpl(new URL("/api/import-generated-image", origin), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Origin: CODEX_APP_ORIGIN,
+      },
+      body: JSON.stringify(payload),
+    });
+    if (!response?.ok) {
+      throw new Error(`Generated image import returned HTTP ${response?.status ?? "error"}`);
+    }
+  }
+
   async refreshTargets() {
     let response;
     try {
@@ -4619,8 +4817,14 @@ export class CodexRuntime {
         .filter((target) => target.type === "page" && target.url === "app://-/index.html")
         .map((target) => target.id),
     );
+    this.rendererTargetIds = liveRendererIds;
     let removedTarget = false;
-    for (const id of this.injectedTargets) {
+    const trackedTargetIds = new Set([
+      ...this.injectedTargets,
+      ...this.clients.keys(),
+      ...this.targetFailures.keys(),
+    ]);
+    for (const id of trackedTargetIds) {
       if (liveRendererIds.has(id)) continue;
       removedTarget = true;
       this.clients.get(id)?.socket.close();
@@ -4629,6 +4833,7 @@ export class CodexRuntime {
       this.bindingTokens.delete(id);
       this.hostActionChains.delete(id);
       this.injectedTargets.delete(id);
+      this.targetFailures.delete(id);
     }
     const rendererDiscovered = liveRendererIds.size > 0;
     const rendererChanged = rendererDiscovered !== this.rendererDiscovered;
@@ -4639,8 +4844,12 @@ export class CodexRuntime {
       if (target.type !== "page" || target.url !== "app://-/index.html" || this.injectedTargets.has(target.id)) {
         continue;
       }
-      const client = await this.connectClient(target.webSocketDebuggerUrl);
+      const previousFailure = this.targetFailures.get(target.id);
+      if (previousFailure && Date.now() < previousFailure.nextRetryAt) continue;
+      let client;
+      let scriptIdentifier = null;
       try {
+        client = await this.connectClient(target.webSocketDebuggerUrl);
         await Promise.all([
           client.send("Page.enable"),
           client.send("Runtime.enable"),
@@ -4662,6 +4871,7 @@ export class CodexRuntime {
         const script = await client.send("Page.addScriptToEvaluateOnNewDocument", {
           source: createDocumentBootstrapSource(source),
         });
+        scriptIdentifier = script.identifier;
         await waitForExpression(
           client,
           `document.readyState === "interactive" || document.readyState === "complete"`,
@@ -4674,15 +4884,33 @@ export class CodexRuntime {
             + ` && window.__codexPersonalRuntime?.sessionId === ${JSON.stringify(this.runtimeSessionId)}`,
         );
         this.clients.set(target.id, client);
-        this.scriptIds.set(target.id, script.identifier);
+        this.scriptIds.set(target.id, scriptIdentifier);
         this.injectedTargets.add(target.id);
+        this.targetFailures.delete(target.id);
         this.notifyStatusChange();
       } catch (error) {
         this.bindingTokens.delete(target.id);
-        client.socket.close();
-        throw error;
+        if (client) {
+          if (scriptIdentifier) {
+            await client.send("Page.removeScriptToEvaluateOnNewDocument", {
+              identifier: scriptIdentifier,
+            }).catch(() => {});
+          }
+          await client.send("Runtime.removeBinding", { name: HOST_BINDING_NAME }).catch(() => {});
+          client.socket.close();
+        }
+        const attempts = (previousFailure?.attempts ?? 0) + 1;
+        const retryDelay = Math.min(5_000, 250 * (2 ** Math.min(attempts - 1, 5)));
+        this.targetFailures.set(target.id, {
+          attempts,
+          lastFailure: error.message,
+          nextRetryAt: Date.now() + retryDelay,
+        });
+        this.logger.warn?.(`Renderer injection failed for ${target.id}; retrying`, error.message);
+        this.notifyStatusChange();
       }
     }
+    this.notifyStatusChange();
   }
 
   async stop() {
@@ -4712,6 +4940,8 @@ export class CodexRuntime {
       this.bindingTokens.clear();
       this.hostActionChains.clear();
       this.injectedTargets.clear();
+      this.rendererTargetIds.clear();
+      this.targetFailures.clear();
       this.rendererDiscovered = false;
       this.notifyStatusChange();
       this.monitorPromise = null;