minecodex 0.2.2 → 1.0.1

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

@@ -165,7 +165,11 @@ export function createInjectionSource(features, {
       "--color-token-bg-primary",
       "--color-token-bg-secondary",
       "--color-token-bg-tertiary",
+      "--color-surface-tertiary",
+      "--color-surface-elevated-secondary",
       "--color-background-elevated-primary-opaque",
+      "--color-background-primary-ghost-hover",
+      "--color-chart-blue",
       "--color-background-panel",
       "--color-background-control",
       "--color-background-primary-solid",
@@ -181,11 +185,13 @@ export function createInjectionSource(features, {
       "--color-text-foreground",
       "--color-text-foreground-secondary",
       "--color-text-foreground-tertiary",
+      "--color-text-inverse",
       "--color-text-on-accent",
       "--color-text-button-primary",
       "--color-text-accent",
       "--color-token-text-link-foreground",
       "--color-border",
+      "--color-border-subtle",
       "--color-border-heavy",
       "--color-border-focus",
       "--color-token-scrollbar-slider-background",
@@ -306,6 +312,7 @@ export function createInjectionSource(features, {
     let modelSelectorSuppressOutsidePointerSequence = false;
     let modelSelectorTriggerObserver = null;
     let modelSelectorObservedTrigger = null;
+    let modelSelectorControllerMenu = null;
     let modelSelectorNativeFastIcons = null;
     // Fast 图标来源标记：bundle 静态提取 vs DOM 克隆，DOM 克隆优先以保持像素一致。
     let modelSelectorNativeFastIconSources = null;
@@ -318,6 +325,15 @@ export function createInjectionSource(features, {
     modelSelectorStyle.setAttribute("data-codex-model-slider-style", "");
     modelSelectorStyle.textContent = `
       [data-codex-model-slider-menu] { width: 264px !important; min-width: 264px; overflow-x: hidden; }
+      [data-codex-model-slider-controller-menu] {
+        position: absolute !important;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        background-color: var(--color-surface-elevated-secondary);
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+      }
       [data-codex-model-slider-menu][data-codex-model-slider-overflow] {
         max-height: var(--codex-model-slider-menu-max-height) !important;
         overflow-y: auto;
@@ -935,7 +951,7 @@ export function createInjectionSource(features, {
     function modelDisplayLabel(identity, selector) {
       const model = catalogModelFor(identity, selector) ?? nativeCatalogModelFor(identity);
       const source = model?.displayName || model?.slug || identity.backend;
-      return formatIdentifier(modelIdentity(source).backend);
+      return formatIdentifier(source.slice(source.lastIndexOf("/") + 1));
     }
 
     function brandForModel(identity, selector) {
@@ -952,10 +968,21 @@ export function createInjectionSource(features, {
         .trim();
     }
 
+    function currentReactFiber(element) {
+      const fiberKey = Object.getOwnPropertyNames(element ?? {}).find((key) => key.startsWith("__reactFiber$"));
+      const propsKey = Object.getOwnPropertyNames(element ?? {}).find((key) => key.startsWith("__reactProps$"));
+      let fiber = fiberKey ? element[fiberKey] : null;
+      if (
+        propsKey
+        && fiber?.alternate?.memoizedProps === element[propsKey]
+        && fiber.memoizedProps !== element[propsKey]
+      ) return fiber.alternate;
+      return fiber;
+    }
+
     function nativeComposerModelController() {
       const trigger = document.querySelector("[data-codex-intelligence-trigger]");
-      const fiberKey = Object.getOwnPropertyNames(trigger ?? {}).find((key) => key.startsWith("__reactFiber$"));
-      let fiber = fiberKey ? trigger[fiberKey] : null;
+      let fiber = currentReactFiber(trigger);
       for (let depth = 0; fiber && depth < 40; depth += 1, fiber = fiber.return) {
         const props = fiber.memoizedProps;
         if (Array.isArray(props?.models) && typeof props.onSelectReasoningEffort === "function") return props;
@@ -1480,8 +1507,12 @@ export function createInjectionSource(features, {
       renderEnhancedModelMenu(menu, selector);
     }
 
-    function enhanceModelItem(item, menu, selector, index) {
-      const observedRaw = modelItemRawValue(item);
+    function enhanceModelItem(item, menu, selector, index, {
+      rawValue = null,
+      selected = null,
+      scheduleReturn = true,
+    } = {}) {
+      const observedRaw = rawValue ?? modelItemRawValue(item);
       if (!observedRaw) return;
       const observedIdentity = modelIdentity(observedRaw);
       const nativeDescriptor = nativeModelDescriptorForItem(item, observedRaw);
@@ -1499,7 +1530,10 @@ export function createInjectionSource(features, {
       const display = modelDisplayLabel(identity, selector);
       const provider = providerLabel(identity.provider, selector);
       const brand = brandForModel(identity, selector);
-      item.toggleAttribute("data-codex-model-slider-selected", Boolean(item.querySelector("svg")));
+      item.toggleAttribute(
+        "data-codex-model-slider-selected",
+        selected ?? Boolean(item.querySelector("svg")),
+      );
       const favorites = loadModelFavorites(selector);
       const starred = favorites.has(raw);
       const row = document.createElement("span");
@@ -1528,7 +1562,7 @@ export function createInjectionSource(features, {
       star.append(createModelSelectorIcon(starred ? selector.icons.unstar : selector.icons.star));
       row.append(star);
       item.replaceChildren(row);
-      if (!item.hasAttribute("data-codex-model-slider-return-listener")) {
+      if (scheduleReturn && !item.hasAttribute("data-codex-model-slider-return-listener")) {
         item.setAttribute("data-codex-model-slider-return-listener", "");
         item.addEventListener("click", (event) => {
           if (!event.target.closest?.("[data-codex-model-slider-star]")) scheduleModelSliderReturn();
@@ -1665,6 +1699,106 @@ export function createInjectionSource(features, {
       }
     }
 
+    function closeControllerModelMenu() {
+      const record = modelSelectorControllerMenu;
+      if (!record) return false;
+      record.button.setAttribute("aria-expanded", "false");
+      record.parentMenu.style.position = record.position;
+      record.parentMenu.style.overflow = record.overflow;
+      for (const item of modelMenuItems(record.menu)) modelSelectorOriginalItems.delete(item);
+      record.menu.remove();
+      modelSelectorControllerMenu = null;
+      return true;
+    }
+
+    function controllerModelReasoningEffort(controller, model) {
+      const current = String(controller?.reasoningEffort ?? "").toLowerCase();
+      const supported = (model?.supportedReasoningEfforts ?? []).map((entry) => (
+        String(entry?.reasoningEffort ?? entry ?? "").toLowerCase()
+      )).filter(Boolean);
+      return supported.includes(current)
+        ? current
+        : String(model?.defaultReasoningEffort ?? supported[0] ?? "none").toLowerCase();
+    }
+
+    function openControllerModelMenu(parentMenu, modelButton, selector) {
+      if (modelSelectorControllerMenu) {
+        closeControllerModelMenu();
+        return;
+      }
+      const controller = nativeComposerModelController();
+      if (!Array.isArray(controller?.models) || typeof controller.onSelectModel !== "function") return;
+      const models = controller.models.filter((model) => !model.hidden && String(model.model ?? "").trim());
+      if (!models.length) return;
+
+      const menu = document.createElement("div");
+      menu.className = parentMenu.className;
+      menu.setAttribute("role", "menu");
+      menu.setAttribute("data-state", "open");
+      menu.setAttribute("data-codex-model-slider-menu", "");
+      menu.setAttribute("data-codex-model-slider-controller-menu", "");
+      models.forEach((model, index) => {
+        const item = document.createElement("div");
+        item.className = "no-drag outline-hidden rounded-lg px-[var(--padding-row-x)] py-[var(--padding-row-y)] text-sm text-default group hover:bg-primary-ghost-hover focus:bg-primary-ghost-hover cursor-interaction flex flex-col";
+        item.setAttribute("role", "menuitem");
+        item.setAttribute("tabindex", "-1");
+        enhanceModelItem(item, menu, selector, index, {
+          rawValue: String(model.model),
+          selected: String(model.model) === String(controller.model),
+          scheduleReturn: false,
+        });
+        menu.append(item);
+      });
+      menu.addEventListener("click", (event) => {
+        const star = event.target.closest?.("[data-codex-model-slider-star]");
+        const item = event.target.closest?.("[data-codex-model-slider-item]");
+        if (!item) return;
+        if (star) {
+          const raw = item.dataset.codexModelSliderRaw;
+          const label = item.querySelector("[data-codex-model-slider-name]")?.textContent ?? raw;
+          toggleModelFavorite(event, menu, selector, raw, label);
+          return;
+        }
+        const currentController = nativeComposerModelController();
+        const raw = item.dataset.codexModelSliderRaw;
+        const model = currentController?.models?.find((candidate) => String(candidate.model) === raw);
+        if (!model || typeof currentController.onSelectModel !== "function") return;
+        const reasoningEffort = controllerModelReasoningEffort(currentController, model);
+        currentController.onSelectModel(raw, reasoningEffort);
+        closeControllerModelMenu();
+        queueEnsure();
+      });
+      menu.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeControllerModelMenu();
+          modelButton.focus();
+          return;
+        }
+        if (event.key !== "Enter" && event.key !== " ") return;
+        const item = event.target.closest?.("[data-codex-model-slider-item]");
+        if (!item) return;
+        event.preventDefault();
+        item.click();
+      });
+      renderEnhancedModelMenu(menu, selector);
+
+      modelSelectorControllerMenu = {
+        menu,
+        parentMenu,
+        button: modelButton,
+        position: parentMenu.style.position,
+        overflow: parentMenu.style.overflow,
+      };
+      parentMenu.style.position = "relative";
+      parentMenu.style.overflow = "visible";
+      parentMenu.append(menu);
+      sizeModelMenuViewport(menu, selector.maxVisibleItems);
+      modelButton.setAttribute("aria-expanded", "true");
+      (menu.querySelector('[data-codex-model-slider-selected]')
+        ?? menu.querySelector('[role="menuitem"]'))?.focus();
+    }
+
     function openNativeModelSubmenu(parentMenu) {
       let attempts = 0;
       const open = () => {
@@ -1942,6 +2076,8 @@ export function createInjectionSource(features, {
       modelButton.setAttribute("tabindex", "0");
       modelButton.setAttribute("data-codex-model-slider-model-button", "");
       modelButton.setAttribute("aria-label", `Model ${modelDisplayLabel(identity, selector)}`);
+      modelButton.setAttribute("aria-haspopup", "menu");
+      modelButton.setAttribute("aria-expanded", "false");
       const buttonContent = document.createElement("span");
       buttonContent.className = classes.ViewToggleContent;
       const buttonLabel = document.createElement("span");
@@ -1955,7 +2091,7 @@ export function createInjectionSource(features, {
         buttonContent.append(buttonLabel);
       }
       modelButton.append(buttonContent);
-      const openModels = () => openNativeModelSubmenu(parentMenu);
+      const openModels = () => openControllerModelMenu(parentMenu, modelButton, selector);
       modelButton.addEventListener("click", openModels);
       modelButton.addEventListener("keydown", (event) => {
         if (event.key !== "Enter" && event.key !== " ") return;
@@ -2006,6 +2142,11 @@ export function createInjectionSource(features, {
         viewControls.append(modelButton);
       }
 
+      if (efforts.length < 2) {
+        shell.append(viewControls);
+        return shell;
+      }
+
       const nativeSlider = cloneNativePowerSlider(parentMenu, efforts.length, fastEnabled);
       const rail = nativeSlider?.querySelector('[role="slider"]') ?? document.createElement("div");
       rail.setAttribute("data-codex-model-slider-rail", "");
@@ -2126,7 +2267,7 @@ export function createInjectionSource(features, {
         supportedReasoningLevels: model?.supportedReasoningLevels ?? catalogModel?.supportedReasoningLevels ?? [],
       };
       const efforts = visibleReasoningLevelsFor(modelWithCapability);
-      if (!model || efforts.length < 2) return false;
+      if (!model) return false;
       // 控制器推导的任务内实际 effort 优先，避免子任务/主任务切换后触发器属性滞后；
       // 触发器属性仅在控制器无法解析时作为实时回退，静态目录默认值最后兜底。
       const nativeModel = nativeCatalogModelFor(identity);
@@ -2134,7 +2275,8 @@ export function createInjectionSource(features, {
         ?? document.querySelector("[data-codex-intelligence-trigger]")
           ?.getAttribute("data-selected-reasoning-effort")
         ?? model.defaultReasoningLevel
-        ?? efforts[0].effort;
+        ?? efforts[0]?.effort
+        ?? "none";
       const effortRank = (value) => {
         const order = ["none", "minimal", "low", "medium", "high", "xhigh", "max", "ultra"];
         const index = order.indexOf(String(value ?? "").toLowerCase());
@@ -2143,7 +2285,8 @@ export function createInjectionSource(features, {
       const visibleEffort = efforts.find((level) => level.effort === selectedEffort)?.effort
         ?? efforts.filter((level) => effortRank(level.effort) <= effortRank(selectedEffort))
           .sort((left, right) => effortRank(right.effort) - effortRank(left.effort))[0]?.effort
-        ?? efforts[0].effort;
+        ?? efforts[0]?.effort
+        ?? "none";
       const selectedEffortValue = visibleEffort;
       const selectedServiceTier = nativeComposerModelController()?.selectedServiceTier;
       const serviceTierKey = selectedServiceTier?.id ?? selectedServiceTier ?? "standard";
@@ -2252,12 +2395,18 @@ export function createInjectionSource(features, {
       if (!modelSelectorStyle.isConnected) document.head?.append(modelSelectorStyle);
       enhanceComposerModelTrigger(selector);
       const parentMenu = nativeModelPickerMenu();
+      if (modelSelectorControllerMenu && modelSelectorControllerMenu.parentMenu !== parentMenu) {
+        closeControllerModelMenu();
+      }
       if (!parentMenu) {
-        if (modelSelectorPendingReturn && !visibleBlockingDialog() && modelSelectorReturnTimer == null) {
-          modelSelectorReturnTimer = setTimeout(() => {
-            modelSelectorReturnTimer = null;
-            returnToNativeModelSlider();
-          }, 80);
+        if (
+          modelSelectorPendingReturn
+          && !visibleBlockingDialog()
+          && nativeModelPickerSubmenus().length === 0
+        ) {
+          clearTimeout(modelSelectorReturnTimer);
+          modelSelectorReturnTimer = null;
+          returnToNativeModelSlider();
         }
       } else {
         enhanceNativeModelPicker(parentMenu, selector);
@@ -2273,6 +2422,7 @@ export function createInjectionSource(features, {
     }
 
     function restoreModelSelectorEnhancements() {
+      closeControllerModelMenu();
       clearTimeout(modelSelectorReturnTimer);
       clearTimeout(modelSelectorEffortTransactionTimer);
       modelSelectorTriggerObserver?.disconnect();
@@ -2432,6 +2582,8 @@ export function createInjectionSource(features, {
       const dialogShadow = "0 16px 32px -8px rgba(0,0,0,.19)";
       const surfaceTokens = {
         ...tokens,
+        // 部分 Codex 版本仅提供等价的正文前景 token。
+        "--color-token-input-foreground": tokens["--color-token-input-foreground"] ?? tokens["--color-text-foreground"],
         "--codex-summary-section-title-font-size": "14px",
         "--codex-summary-section-title-line-height": "21px",
         "--codex-summary-section-title-font-weight": tokens["--font-weight-normal"] ?? "400",
@@ -2687,8 +2839,9 @@ export function createInjectionSource(features, {
         postSurfaceActive(record, false);
       }
       const existing = pageSurfaces.get(featureId);
-      const surface = existing ?? createPageSurface(feature);
-      if (existing) reloadSurfaceIfUnready(surfaceKey(feature.id, "page"), feature.surfaceUrl);
+      const reusable = existing?.isConnected ? existing : null;
+      const surface = reusable ?? createPageSurface(feature);
+      if (reusable) reloadSurfaceIfUnready(surfaceKey(feature.id, "page"), feature.surfaceUrl);
       surface.hidden = false;
       activePageFeatureId = featureId;
       const record = surfaceRecords.get(surfaceKey(feature.id, "page"));
@@ -3821,7 +3974,7 @@ export function createInjectionSource(features, {
           respondToSurface(record, requestId, { ok: true, result: { paths } });
           return;
         }
-        if (action === "attach-file") {
+        if (["attach-file", "create-image-edit-thread"].includes(action)) {
           if (typeof globalThis[config.bindingName] !== "function") {
             throw new Error("The native file bridge is unavailable");
           }
@@ -3863,6 +4016,11 @@ export function createInjectionSource(features, {
     document.addEventListener(
       "click",
       (event) => {
+        if (
+          modelSelectorControllerMenu
+          && !modelSelectorControllerMenu.menu.contains(event.target)
+          && !modelSelectorControllerMenu.button.contains(event.target)
+        ) closeControllerModelMenu();
         if (isNativeSummaryButton(event.target) && activePinnedFeatureId) hidePinnedSurfaces();
         if (activePinnedFeatureId && summaryDisplayMode() === "overlay") {
           const state = summaryState(activePinnedFeatureId);
@@ -4010,6 +4168,7 @@ export function createInjectionSource(features, {
         stopToolbarReadiness();
         mainContentObserver?.observer.disconnect();
         restoreThreadContentShift();
+        for (const entry of document.querySelectorAll(`[${entryMarker}]`)) entry.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();
@@ -4659,6 +4818,143 @@ export class CodexRuntime {
     }
   }
 
+  async attachFilesToComposer(client, filePaths, requestId) {
+    if (!Array.isArray(filePaths) || !filePaths.length || filePaths.length > 2) {
+      throw new Error("One or two image edit attachments are required");
+    }
+    for (const filePath of filePaths) {
+      if (typeof filePath !== "string" || !path.isAbsolute(filePath) || !(await stat(filePath)).isFile()) {
+        throw new Error("Only absolute regular files can be attached");
+      }
+    }
+    const fileNames = filePaths.map((filePath) => path.basename(filePath));
+    const requiredLabels = fileNames.reduce((counts, fileName) => {
+      const label = `Remove ${fileName}`;
+      counts[label] = (counts[label] ?? 0) + 1;
+      return counts;
+    }, {});
+    const marker = `codex-personal-${requestId}-batch`;
+
+    try {
+      evaluationValue(await client.send("Runtime.evaluate", {
+        expression: `(() => {
+          document.querySelectorAll('[data-codex-personal-file-input]').forEach((input) => input.remove());
+          const input = document.createElement("input");
+          input.type = "file";
+          input.multiple = true;
+          input.dataset.codexPersonalFileInput = ${JSON.stringify(marker)};
+          input.style.display = "none";
+          document.body.append(input);
+          return true;
+        })()`,
+        returnByValue: true,
+      }));
+      const { root } = await client.send("DOM.getDocument", { depth: 0 });
+      const { nodeId } = await client.send("DOM.querySelector", {
+        nodeId: root.nodeId,
+        selector: `[data-codex-personal-file-input="${marker}"]`,
+      });
+      if (!nodeId) throw new Error("The temporary multi-file bridge could not be resolved");
+      await client.send("DOM.setFileInputFiles", { files: filePaths, nodeId });
+      const dropped = evaluationValue(await client.send("Runtime.evaluate", {
+        expression: `(() => {
+          const input = document.querySelector(${JSON.stringify(`[data-codex-personal-file-input="${marker}"]`)});
+          const composer = document.querySelector('[data-codex-composer="true"][contenteditable="true"]');
+          if (!input?.files?.length || !composer) return false;
+          const transfer = new DataTransfer();
+          for (const file of input.files) transfer.items.add(file);
+          for (const type of ["dragenter", "dragover", "drop"]) {
+            composer.dispatchEvent(new DragEvent(type, {
+              bubbles: true,
+              cancelable: true,
+              composed: true,
+              dataTransfer: transfer,
+            }));
+          }
+          return transfer.files.length === ${filePaths.length};
+        })()`,
+        returnByValue: true,
+      }));
+      if (!dropped) throw new Error("The native Composer rejected the image edit drop");
+      await waitForExpression(client, `(() => {
+        const required = ${JSON.stringify(requiredLabels)};
+        const observed = {};
+        for (const button of document.querySelectorAll('button[aria-label^="Remove "]')) {
+          const label = button.getAttribute("aria-label");
+          observed[label] = (observed[label] ?? 0) + 1;
+        }
+        return Object.entries(required).every(([label, count]) => (observed[label] ?? 0) >= count);
+      })()`, 10_000);
+      return fileNames.map((name) => ({ mode: "attach", name }));
+    } finally {
+      await client.send("Runtime.evaluate", {
+        expression: `document.querySelectorAll('[data-codex-personal-file-input]').forEach((input) => input.remove())`,
+      }).catch(() => {});
+    }
+  }
+
+  async createImageEditThread(client, feature, payload, requestId) {
+    const draftId = typeof payload?.draftId === "string" ? payload.draftId : "";
+    const prompt = typeof payload?.prompt === "string" ? payload.prompt.trim() : "";
+    if (!/^[a-f0-9-]{36}$/.test(draftId) || !prompt || prompt.length > 2_000 || !feature?.surfaceUrl) {
+      throw Object.assign(new Error("The image edit request is incomplete"), { code: "INVALID_EDIT_REQUEST" });
+    }
+    const draftResponse = await this.fetchImpl(new URL(`/api/image-edit-draft/${draftId}`, feature.surfaceUrl), {
+      headers: { Origin: CODEX_APP_ORIGIN },
+    });
+    if (!draftResponse?.ok) {
+      throw Object.assign(new Error("The image edit draft is unavailable"), { code: "EDIT_DRAFT_UNAVAILABLE" });
+    }
+    const draft = await draftResponse.json();
+    const paths = [draft?.sourcePath, draft?.auxiliaryPath].filter(Boolean);
+    if (!paths.length || paths.length > 2) {
+      throw Object.assign(new Error("The image edit attachments are unavailable"), { code: "INVALID_EDIT_ATTACHMENT" });
+    }
+    for (const filePath of paths) {
+      if (typeof filePath !== "string" || !path.isAbsolute(filePath) || !(await stat(filePath)).isFile()) {
+        throw Object.assign(new Error("The image edit attachment is unavailable"), { code: "INVALID_EDIT_ATTACHMENT" });
+      }
+    }
+
+    const opened = evaluationValue(await client.send("Runtime.evaluate", {
+      expression: `(() => {
+        const candidates = Array.from(document.querySelectorAll('button, [role="button"]'));
+        const trigger = candidates.find((element) => /^new chat$/i.test(
+          (element.getAttribute('aria-label') || element.textContent || '').trim(),
+        ));
+        if (!trigger) return false;
+        trigger.click();
+        return true;
+      })()`,
+      returnByValue: true,
+    }));
+    if (!opened) throw Object.assign(new Error("The native New chat control is unavailable"), {
+      code: "NEW_CHAT_UNAVAILABLE",
+    });
+    await waitForExpression(client, `Boolean(document.querySelector('[data-testid="home-icon"]')) && Boolean(document.querySelector('[data-codex-composer="true"][contenteditable="true"]'))`);
+    const attached = await this.attachFilesToComposer(client, paths, requestId);
+    evaluationValue(await client.send("Runtime.evaluate", {
+      expression: `window.__codexPersonalRuntime?.insertText(${JSON.stringify(prompt)})`,
+      returnByValue: true,
+    }));
+    const sent = evaluationValue(await client.send("Runtime.evaluate", {
+      expression: `(() => {
+        const send = document.querySelector('button[aria-label="Send message"]')
+          || document.querySelector('button[aria-label="Send"]')
+          || document.querySelector('button[data-testid="send-button"]');
+        if (!send || send.disabled) return false;
+        send.click();
+        return true;
+      })()`,
+      returnByValue: true,
+    }));
+    if (!sent) throw Object.assign(new Error("The new Chat is ready but its Send button is unavailable"), {
+      code: "SEND_UNAVAILABLE",
+    });
+    await waitForExpression(client, `!document.querySelector('[data-testid="home-icon"]') && Boolean(document.querySelector('[data-codex-composer="true"][contenteditable="true"]'))`);
+    return { attached, threadStarted: true };
+  }
+
   async fetchSurfaceResource(url, label) {
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), this.surfaceLoadTimeoutMs);
@@ -4793,8 +5089,9 @@ export class CodexRuntime {
       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);
+      const result = request.action === "create-image-edit-thread"
+        ? await this.createImageEditThread(client, feature, request.payload, request.requestId)
+        : await this.attachFileToComposer(client, request.payload?.path, request.requestId);
       await this.resolveHostAction(client, request.requestId, { ok: true, result });
     } catch (error) {
       await this.resolveHostAction(client, request.requestId, {

package/packages/runtime-host/src/feature-registry.mjs

@@ -12,6 +12,7 @@ const HOST_ACTIONS = new Set([
   "open-editor-modal",
   "resolve-file-paths",
   "import-generated-image",
+  "create-image-edit-thread",
 ]);
 
 const PAGE_SCRIPT_ENTRY_KINDS = new Set(["page-script"]);
@@ -359,6 +360,12 @@ export async function loadConfiguredModelCatalog(
         id: String(tier.id ?? "").trim(),
         name: String(tier.name ?? "").trim(),
       })),
+      capabilityKey: [
+        model.opencodex_capability_provenance?.provider,
+        model.opencodex_capability_provenance?.model_id,
+      ].every((value) => typeof value === "string" && value.trim())
+        ? `${model.opencodex_capability_provenance.provider.trim()}/${model.opencodex_capability_provenance.model_id.trim()}`
+        : null,
     })).filter((model) => model.slug);
   } catch (error) {
     if (error.code === "ENOENT") return [];

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

@@ -29,7 +29,7 @@ for (const feature of features) {
     feature.modelSelector.models = modelCatalog.map((model) => (
       applyVisibleReasoningLevels(
         model,
-        modelCapabilities.get(String(model.slug ?? "").toLowerCase()),
+        modelCapabilities.get(String(model.capabilityKey ?? model.slug ?? "").toLowerCase()),
         model.supportedReasoningLevels,
       )
     ));