codex-plus-patcher 0.6.0 → 0.7.1

package/src/runtime/api/settings.js

@@ -0,0 +1,76 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+  const { core, safeId } = globalObject.__CodexPlusRuntime;
+
+  function getPluginStore(pluginId) {
+    const key = `${core.storagePrefix}${pluginId}`;
+    try {
+      return JSON.parse(globalObject.localStorage?.getItem(key) || "{}") || {};
+    } catch {
+      return {};
+    }
+  }
+
+  function writePluginStore(pluginId, store) {
+    const key = `${core.storagePrefix}${pluginId}`;
+    globalObject.localStorage?.setItem(key, JSON.stringify(store));
+  }
+
+  function emitSetting(pluginId, key, value) {
+    const listenerKey = `${pluginId}:${key}`;
+    for (const listener of core.settingsListeners.get(listenerKey) || []) listener(value);
+  }
+
+  function define(pluginId, definitions) {
+    const id = safeId(pluginId);
+    const store = getPluginStore(id);
+    for (const [key, definition] of Object.entries(definitions || {})) {
+      if (!(key in store) && "default" in definition) store[key] = definition.default;
+    }
+    writePluginStore(id, store);
+    return {
+      definitions,
+      get(key) {
+        return getPluginStore(id)[key];
+      },
+      set(key, value) {
+        const next = getPluginStore(id);
+        next[key] = value;
+        writePluginStore(id, next);
+        emitSetting(id, key, value);
+      },
+      use(key, listener) {
+        const listenerKey = `${id}:${key}`;
+        const listeners = core.settingsListeners.get(listenerKey) || new Set();
+        listeners.add(listener);
+        core.settingsListeners.set(listenerKey, listeners);
+        listener(getPluginStore(id)[key]);
+        return () => listeners.delete(listener);
+      },
+    };
+  }
+
+  function AppearanceRowHost({ row, deps, variant }) {
+    return row.render?.({ ...deps, variant, row }) ?? null;
+  }
+
+  const appearance = {
+    rows: [],
+    addRow(row) {
+      this.rows.push(row);
+      return row;
+    },
+    renderRows({ deps, variant, section = "appearance" } = {}) {
+      const jsx = deps?.jsx;
+      if (typeof jsx !== "function") return [];
+      return this.rows
+        .filter((row) => (row.section || "appearance") === section)
+        .slice()
+        .sort((left, right) => (left.order || 0) - (right.order || 0))
+        .map((row) => jsx(AppearanceRowHost, { row, deps, variant }, row.id));
+    },
+  };
+
+  globalObject.CodexPlus.ui.settings = { appearance };
+  globalObject.CodexPlus.settings = { define };
+})();

package/src/runtime/api/sidebar.js

@@ -0,0 +1,24 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+  const { applyDecorators, mergeDataAttributes } = globalObject.__CodexPlusRuntime;
+  const sidebar = {
+    projectDecorators: [],
+    threadDecorators: [],
+    decorateProjectRow(fn) {
+      this.projectDecorators.push(fn);
+      return fn;
+    },
+    decorateThreadRow(fn) {
+      this.threadDecorators.push(fn);
+      return fn;
+    },
+    mergeDataAttributes,
+    projectRowProps(props) {
+      return applyDecorators(props, this.projectDecorators);
+    },
+    threadRowProps(props) {
+      return applyDecorators(props, this.threadDecorators);
+    },
+  };
+  globalObject.CodexPlus.ui.sidebar = sidebar;
+})();

package/src/runtime/api/styles.js

@@ -0,0 +1,28 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+  const { core, safeId } = globalObject.__CodexPlusRuntime;
+
+  function register(pluginId, cssText) {
+    if (typeof document === "undefined") return null;
+    const id = `codex-plus-style-${safeId(pluginId)}`;
+    let element = core.styleElements.get(id) || document.getElementById(id);
+    if (!element) {
+      element = document.createElement("style");
+      element.id = id;
+      document.head?.appendChild(element);
+    }
+    element.textContent = cssText;
+    core.styleElements.set(id, element);
+    return element;
+  }
+
+  function setRootVars(vars) {
+    if (typeof document === "undefined") return;
+    for (const [key, value] of Object.entries(vars || {})) {
+      if (value == null) document.documentElement.style.removeProperty(key);
+      else document.documentElement.style.setProperty(key, value);
+    }
+  }
+
+  globalObject.CodexPlus.styles = { register, setRootVars };
+})();

package/src/runtime/api/threadHeader.js

@@ -0,0 +1,41 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+
+  function ThreadHeaderAccessoryHost({ accessory, context, deps }) {
+    const rendered = accessory?.({ context, ...deps }) ?? null;
+    globalObject.CodexPlus.diagnostics.log("threadHeader.accessoryHost.render", {
+      accessoryName: accessory?.name || null,
+      cwd: typeof context?.cwd === "string" ? context.cwd : null,
+      rendered: rendered != null,
+    });
+    return rendered;
+  }
+
+  function renderAccessories({ context, deps } = {}) {
+    const jsx = deps?.jsx;
+    if (typeof jsx !== "function") {
+      globalObject.CodexPlus.diagnostics.log("threadHeader.render.skip", { reason: "missing-jsx" });
+      return null;
+    }
+    globalObject.CodexPlus.diagnostics.log("threadHeader.render", {
+      accessoryCount: globalObject.CodexPlus.ui.threadHeader.accessories.length,
+      cwd: typeof context?.cwd === "string" ? context.cwd : null,
+      hostId: context?.hostId ?? null,
+      header: context?.header ?? null,
+    });
+    const rendered = globalObject.CodexPlus.ui.threadHeader.accessories.map((accessory, index) =>
+      jsx(ThreadHeaderAccessoryHost, { accessory, context, deps }, `thread-header-accessory:${index}`),
+    );
+    return rendered.length === 0 ? null : rendered;
+  }
+
+  globalObject.CodexPlus.ui.threadHeader = {
+    accessories: [],
+    addAccessory(fn) {
+      this.accessories.push(fn);
+      globalObject.CodexPlus.diagnostics.log("threadHeader.addAccessory", { accessoryName: fn?.name || null, accessoryCount: this.accessories.length });
+      return fn;
+    },
+    renderAccessories,
+  };
+})();

package/src/runtime/assets.js

@@ -2,31 +2,72 @@ const fs = require("node:fs");
 const path = require("node:path");
 
 const runtimeRoot = __dirname;
-const runtimeFiles = [
+const browserRuntimeFiles = [
+  "api/index.js",
+  "api/diagnostics.js",
+  "api/modules.js",
+  "api/settings.js",
+  "api/patches.js",
+  "api/commands.js",
+  "api/styles.js",
+  "api/sidebar.js",
+  "api/message.js",
+  "api/composer.js",
+  "api/about.js",
+  "api/review.js",
+  "api/native.js",
+  "api/errors.js",
+  "api/threadHeader.js",
+  "api/mermaid.js",
+  "host/review.js",
+  "host/sidebar.js",
+  "host/messageComposer.js",
+  "host/projectSelector.js",
+  "host/threadHeader.js",
+  "vendor/fzf.umd.js",
+  "plugins/aboutMetadata.js",
+  "plugins/nestedRepositories.js",
+  "plugins/diagnosticErrors.js",
+  "plugins/userBubbleColors.js",
+  "plugins/projectColors.js",
+  "plugins/projectPathHeader.js",
+  "plugins/sidebarNameBlur.js",
+  "plugins/devTools.js",
+  "plugins/projectSelectorShortcut.js",
+  "plugins/mermaidFullscreen.js",
+];
+
+const nodeRuntimeFiles = [
   [".vite/build/codex-plus-aboutMetadata.js", "plugins/aboutMetadata.js"],
-  [".vite/build/codex-plus-worker.js", "worker.js"],
+  [".vite/build/codex-plus-native-main.js", "host/nativeMain.js"],
+  [".vite/build/codex-plus-worker.js", "host/worker.js"],
   ["webview/assets/codex-plus/runtime.js", "runtime.js"],
-  ["webview/assets/codex-plus/plugins/aboutMetadata.js", "plugins/aboutMetadata.js"],
-  ["webview/assets/codex-plus/plugins/nestedRepositories.js", "plugins/nestedRepositories.js"],
-  ["webview/assets/codex-plus/plugins/diagnosticErrors.js", "plugins/diagnosticErrors.js"],
-  ["webview/assets/codex-plus/plugins/userBubbleColors.js", "plugins/userBubbleColors.js"],
-  ["webview/assets/codex-plus/plugins/projectColors.js", "plugins/projectColors.js"],
-  ["webview/assets/codex-plus/plugins/projectPathHeader.js", "plugins/projectPathHeader.js"],
-  ["webview/assets/codex-plus/plugins/sidebarNameBlur.js", "plugins/sidebarNameBlur.js"],
-  ["webview/assets/codex-plus/plugins/devTools.js", "plugins/devTools.js"],
-  ["webview/assets/codex-plus/vendor/fzf.umd.js", "../../node_modules/fzf/dist/fzf.umd.js"],
-  ["webview/assets/codex-plus/plugins/projectSelectorShortcut.js", "plugins/projectSelectorShortcut.js"],
-  ["webview/assets/codex-plus/plugins/mermaidFullscreen.js", "plugins/mermaidFullscreen.js"],
 ];
 
-function codexPlusRuntimeAssets() {
-  return runtimeFiles.map(([asarPath, localPath]) => [
-    asarPath,
-    fs.readFileSync(path.join(runtimeRoot, localPath), "utf8"),
-  ]);
+const browserRuntimeAssets = browserRuntimeFiles.map((filePath) => [
+  `webview/assets/codex-plus/${filePath}`,
+  filePath.startsWith("vendor/") ? "../../node_modules/fzf/dist/fzf.umd.js" : filePath,
+]);
+
+const runtimeFiles = [
+  ...nodeRuntimeFiles,
+  ["webview/assets/codex-plus/runtime-manifest.js", null],
+  ...browserRuntimeAssets,
+];
+
+function browserRuntimeManifest(config = {}) {
+  return `window.__CodexPlusRuntimeConfig=${JSON.stringify(config)};window.__CodexPlusRuntimeFiles=${JSON.stringify(browserRuntimeFiles)};window.__CodexPlusLoadRuntimeFiles?.(window.__CodexPlusRuntimeFiles);\n`;
+}
+
+function codexPlusRuntimeAssets(config = {}) {
+  return runtimeFiles.map(([asarPath, localPath]) => {
+    const content = localPath == null ? browserRuntimeManifest(config) : fs.readFileSync(path.join(runtimeRoot, localPath), "utf8");
+    return [asarPath, content];
+  });
 }
 
 module.exports = {
+  browserRuntimeFiles,
   codexPlusRuntimeAssets,
   runtimeFiles,
 };

package/src/runtime/host/messageComposer.js

@@ -0,0 +1,16 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+
+  function userBubbleProps(props) {
+    return globalObject.CodexPlus?.ui?.message?.userBubbleProps?.(props);
+  }
+
+  function composerSurfaceProps(props) {
+    return globalObject.CodexPlus?.ui?.composer?.surfaceProps?.(props);
+  }
+
+  globalObject.CodexPlusHost.adapters.messageComposer = {
+    composerSurfaceProps,
+    userBubbleProps,
+  };
+})();

package/src/runtime/host/nativeMain.js

@@ -0,0 +1,159 @@
+const fs = require("node:fs");
+const os = require("node:os");
+const path = require("node:path");
+const { randomUUID } = require("node:crypto");
+const { pathToFileURL } = require("node:url");
+
+function create({ electron }) {
+  let nativeMenuItems = [];
+  let refreshApplicationMenu = null;
+
+  function menuSnapshot(menu) {
+    return menu?.items?.map((item) => ({
+      id: item.id,
+      label: item.label,
+      enabled: item.enabled,
+      visible: item.visible,
+      accelerator: item.accelerator,
+      submenu: menuSnapshot(item.submenu),
+    }));
+  }
+
+  function logMenuDiagnostics() {
+    try {
+      const menu = menuSnapshot(electron.Menu.getApplicationMenu()) ?? [];
+      const text = JSON.stringify(menu);
+      const hasOpenDeveloperTools = text.includes("codexPlusOpenDevTools") || text.includes("Open Developer Tools");
+      if (process.env.CODEX_PLUS_MENU_DIAGNOSTICS === "1" || !hasOpenDeveloperTools) {
+        console.log(`[Codex Plus menu diagnostics] ${JSON.stringify({ hasOpenDeveloperTools, menu })}`);
+      }
+    } catch (error) {
+      console.log(`[Codex Plus menu diagnostics] ${JSON.stringify({ error: String(error?.message ?? error) })}`);
+    }
+  }
+
+  function openDevTools(event) {
+    try {
+      const webContents = event?.sender;
+      if (typeof webContents?.openDevTools !== "function") return { ok: false };
+      webContents.openDevTools();
+      return { ok: true };
+    } catch {
+      return { ok: false };
+    }
+  }
+
+  function focusedEvent() {
+    const window = electron.BrowserWindow.getFocusedWindow();
+    return window && !window.isDestroyed() ? { sender: window.webContents } : null;
+  }
+
+  function runNativeMenuRequest(request) {
+    switch (request?.method) {
+      case "devtools/open":
+        return openDevTools(focusedEvent());
+      default:
+        return { ok: false };
+    }
+  }
+
+  function templateItems(menuId) {
+    return nativeMenuItems
+      .filter((item) => item.menuId === menuId)
+      .map((item) => ({
+        id: item.id,
+        label: item.label,
+        click: () => {
+          runNativeMenuRequest(item.nativeRequest);
+        },
+      }));
+  }
+
+  function registerNativeMenuItem(item) {
+    if (item?.id == null || item?.menuId == null || item?.label == null || item?.nativeRequest?.method == null) {
+      return { ok: false };
+    }
+    const nextItem = {
+      id: String(item.id),
+      menuId: String(item.menuId),
+      label: String(item.label),
+      nativeRequest: {
+        method: String(item.nativeRequest.method),
+        params: item.nativeRequest.params,
+      },
+      afterId: item.afterId == null ? null : String(item.afterId),
+      afterLabel: item.afterLabel == null ? null : String(item.afterLabel),
+    };
+    nativeMenuItems = nativeMenuItems.filter((existing) => existing.id !== nextItem.id);
+    nativeMenuItems.push(nextItem);
+    try {
+      refreshApplicationMenu?.();
+    } catch {}
+    logMenuDiagnostics();
+    return { ok: true };
+  }
+
+  function openMermaidViewer(params) {
+    const html = params?.html;
+    if (typeof html !== "string" || html.length === 0) return { ok: false };
+    const filePath = path.join(os.tmpdir(), `codex-plus-mermaid-${randomUUID()}.html`);
+    fs.writeFileSync(filePath, html, "utf8");
+    const window = new electron.BrowserWindow({
+      height: 900,
+      resizable: true,
+      show: true,
+      title: "Mermaid diagram viewer",
+      webPreferences: {
+        contextIsolation: true,
+        nodeIntegration: false,
+        sandbox: true,
+      },
+      width: 1400,
+    });
+    window.webContents.setWindowOpenHandler((event) => {
+      try {
+        const url = new URL(event.url);
+        if (url.protocol === "https:" && url.hostname === "mermaid.live") electron.shell.openExternal(event.url);
+      } catch {}
+      return { action: "deny" };
+    });
+    window.on("closed", () => {
+      try {
+        fs.unlinkSync(filePath);
+      } catch {}
+    });
+    window.loadURL(pathToFileURL(filePath).toString()).catch(() => {});
+    return { ok: true };
+  }
+
+  function registerNativeRequest({ isTrustedIpcEvent }) {
+    return electron.ipcMain.handle("codex_plus:native-request", async (event, request) => {
+      if (!isTrustedIpcEvent(event)) return { ok: false };
+      switch (request?.method) {
+        case "native-menu/register-item":
+          return registerNativeMenuItem(request.params);
+        case "devtools/open":
+          return openDevTools(event);
+        case "mermaid/openViewer":
+          return openMermaidViewer(request.params);
+        default:
+          return { ok: false };
+      }
+    });
+  }
+
+  function setRefreshApplicationMenu(refresh) {
+    refreshApplicationMenu = refresh;
+  }
+
+  return {
+    logMenuDiagnostics,
+    registerNativeRequest,
+    setRefreshApplicationMenu,
+    templateItems,
+  };
+}
+
+module.exports = {
+  create,
+};

package/src/runtime/host/projectSelector.js

@@ -0,0 +1,58 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+
+  function fuzzyFilter(projects, query) {
+    const needle = String(query ?? "").trim().toLowerCase();
+    return globalObject.CodexPlus?.ui?.projectSelector?.fuzzyFilter?.(projects, query) ??
+      (needle
+        ? projects.filter((project) =>
+            [project.label, project.repositoryData?.rootFolder ?? "", project.path ?? "", project.hostDisplayName ?? ""].some((value) =>
+              String(value ?? "").toLowerCase().includes(needle),
+            ),
+          )
+        : projects);
+  }
+
+  function fuzzyHighlight(text, query, jsx) {
+    return globalObject.CodexPlus?.ui?.projectSelector?.fuzzyHighlight?.({ text, query, jsx }) ?? text;
+  }
+
+  function closeDropdown(event) {
+    const KeyboardEventConstructor = globalObject.KeyboardEvent;
+    if (typeof KeyboardEventConstructor !== "function") return;
+
+    const target = event?.target;
+    const dispatchTarget = typeof target?.dispatchEvent === "function" ? target : globalObject.document;
+    dispatchTarget?.dispatchEvent?.(new KeyboardEventConstructor("keydown", {
+      bubbles: true,
+      cancelable: true,
+      key: "Escape",
+    }));
+  }
+
+  function acceptFirst(event, projects, selectProjectId, query) {
+    const project = projects?.[0];
+    if (event?.key !== "Enter" || String(query ?? "").trim().length === 0 || project == null) return;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    selectProjectId(project.projectId);
+    closeDropdown(event);
+  }
+
+  function trigger(element, variant, React) {
+    return React.isValidElement(element)
+      ? React.cloneElement(element, {
+          ...element.props,
+          "data-codex-plus-project-selector-trigger": true,
+          "data-codex-plus-project-selector-variant": variant,
+        })
+      : element;
+  }
+
+  globalObject.CodexPlusHost.adapters.projectSelector = {
+    acceptFirst,
+    fuzzyFilter,
+    fuzzyHighlight,
+    trigger,
+  };
+})();

package/src/runtime/host/review.js

@@ -0,0 +1,62 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+
+  function renderBodyFromHost(props, hostDeps) {
+    const [
+      jsxRuntime,
+      React,
+      useStore,
+      useAtom,
+      routeAtom,
+      cwdAtom,
+      hostIdAtom,
+      hostConfigAtom,
+      conversationIdAtom,
+      gitRequest,
+      pathValue,
+      DefaultReview,
+      Button,
+      Tooltip,
+      Icon,
+      Dropdown,
+      DropdownMenu,
+      BranchPickerDropdownContent,
+      ReviewToolbar,
+      parseDiff,
+      DiffCard,
+    ] = hostDeps;
+    const deps = {
+      jsx: jsxRuntime.jsx,
+      jsxs: jsxRuntime.jsxs,
+      Fragment: jsxRuntime.Fragment,
+      createElement: React.createElement,
+      React,
+      useStore,
+      useAtom,
+      routeAtom,
+      cwdAtom,
+      hostIdAtom,
+      hostConfigAtom,
+      conversationIdAtom,
+      gitRequest,
+      pathValue,
+      DefaultReview,
+      Button,
+      Tooltip,
+      Icon,
+      Dropdown,
+      DropdownMenu,
+      BranchPickerDropdownContent,
+      ReviewToolbar,
+      parseDiff,
+      DiffCard,
+    };
+    return globalObject.CodexPlus.ui.review.renderBody({
+      props,
+      deps,
+      defaultBody: props.mainReviewContent ?? deps.jsx(DefaultReview, props),
+    });
+  }
+
+  globalObject.CodexPlusHost.adapters.review = { renderBodyFromHost };
+})();

package/src/runtime/host/sidebar.js

@@ -0,0 +1,21 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+
+  function projectRowProps(project) {
+    return globalObject.CodexPlus?.ui?.sidebar?.projectRowProps?.({ project });
+  }
+
+  function threadRowProps(project) {
+    return globalObject.CodexPlus?.ui?.sidebar?.threadRowProps?.({ project });
+  }
+
+  function mergeThreadRowAttributes(base, extra) {
+    return globalObject.CodexPlus?.ui?.sidebar?.mergeDataAttributes?.(base, extra);
+  }
+
+  globalObject.CodexPlusHost.adapters.sidebar = {
+    mergeThreadRowAttributes,
+    projectRowProps,
+    threadRowProps,
+  };
+})();

package/src/runtime/host/threadHeader.js

@@ -0,0 +1,9 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+
+  function accessories(context, deps) {
+    return globalObject.CodexPlus?.ui?.threadHeader?.renderAccessories?.({ context, deps }) ?? null;
+  }
+
+  globalObject.CodexPlusHost.adapters.threadHeader = { accessories };
+})();

package/src/runtime/{worker.js → host/worker.js}

@@ -221,8 +221,15 @@ function isReadOnlyBranchRequest(requestKind, source) {
   return source === "codex_plus_review" && (requestKind === "recent-branches" || requestKind === "search-branches");
 }
 
+function repositoryTargetsFromHost(gitManager, params, platform, signal, getSubmodulePaths) {
+  return repositoryTargets(gitManager, params, platform, signal, (root, submoduleSignal) =>
+    getSubmodulePaths(gitManager.getWorktreeRepositoryForRoot(root, platform), submoduleSignal),
+  );
+}
+
 module.exports = {
   isReadOnlyBranchRequest,
+  repositoryTargetsFromHost,
   repositoryTargets,
   traceRequest,
 };

package/src/runtime/plugins/mermaidFullscreen.js

@@ -4,7 +4,13 @@
   const BUTTON_CLASS = "codex-plus-mermaid-expand-button";
 
   function sourceFor(container) {
-    return container.querySelector("pre.sr-only")?.textContent || "";
+    return container.querySelector("pre.sr-only")?.textContent ||
+      container.parentElement?.querySelector(":scope > pre.sr-only")?.textContent ||
+      "";
+  }
+
+  function hostFor(container) {
+    return container.closest('[data-markdown-copy="code-block"]') || container;
   }
 
   function assetUrl(assetPath) {
@@ -13,6 +19,10 @@
     return new URL(`assets/${assetPath}`, document.baseURI).href;
   }
 
+  function mermaidCoreAsset() {
+    return CodexPlus.config?.mermaidCoreAsset || "mermaid.core.js";
+  }
+
   function escapeHtml(value) {
     return String(value).replace(/[&<>"']/g, (char) => ({
       "&": "&amp;",
@@ -219,17 +229,19 @@ renderFromSource().catch((error) => {
     const isDark = document.documentElement.classList.contains("dark") || document.documentElement.classList.contains("electron-dark");
     const debug = localStorage.getItem("codexPlusMermaidDebug") === "1";
     const html = source
-      ? viewerHtml({ source, isDark, mermaidModuleUrl: assetUrl("mermaid.core-eIokQLcr.js"), debug })
+      ? viewerHtml({ source, isDark, mermaidModuleUrl: assetUrl(mermaidCoreAsset()), debug })
       : `<!doctype html><meta charset="utf-8"><body>${escapeHtml("No Mermaid source was found.")}</body>`;
     CodexPlus.native.request("mermaid/openViewer", { html }).catch(() => {});
   }
 
   function decorate(container) {
-    if (container.querySelector(`:scope > .${BUTTON_CLASS}`)) return;
-    container.style.position ||= "relative";
+    const host = hostFor(container);
+    if (host.querySelector(`:scope > .${BUTTON_CLASS}`)) return;
+    host.setAttribute("data-codex-plus-mermaid-host", "");
+    host.style.position ||= "relative";
     const control = button("Open Mermaid diagram fullscreen");
-    control.addEventListener("click", () => openViewer(container));
-    container.prepend(control);
+    control.addEventListener("click", () => openViewer(host));
+    host.prepend(control);
   }
 
   function decorateAll(root = document) {
@@ -243,6 +255,7 @@ renderFromSource().catch((error) => {
       description: "Adds a separate fullscreen viewer with zoom controls to rendered Mermaid diagrams.",
       required: true,
       styles:
+        `[data-codex-plus-mermaid-host]{position:relative}` +
         `[data-codex-plus-mermaid-diagram]{position:relative}` +
         `.${BUTTON_CLASS}{position:absolute;left:.5rem;top:.5rem;z-index:30;display:inline-flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;border:1px solid var(--color-token-input-border,rgba(127,127,127,.35));border-radius:.375rem;background:var(--color-background-elevated-primary,#fff);color:var(--color-token-foreground,#111);box-shadow:0 2px 8px rgba(0,0,0,.12);opacity:.82}` +
         `.${BUTTON_CLASS}::before,.${BUTTON_CLASS}::after{content:"";position:absolute;width:.42rem;height:.42rem;border-color:currentColor;border-style:solid}` +