codex-plus-patcher 0.4.0 → 0.5.0

package/README.md

@@ -30,6 +30,7 @@ patches plus readable runtime plugins:
 - add user-message bubble color controls in Appearance settings
 - add adaptive project colors for sidebar projects, grouped threads, pinned threads, user-message accents, and the composer
 - add the `Toggle sidebar blur` command palette entry to blur sidebar chat and project names for the current session
+- add a fullscreen Mermaid diagram viewer with zoom controls
 
 The generated app includes a readable Codex Plus runtime under
 `webview/assets/codex-plus/`. Versioned ASAR patches install the runtime,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-plus-patcher",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "description": "Patch queue tool for building a local Codex Plus.app from an installed Codex.app.",
   "repository": {

package/src/patches/26.616.71553-4265.js

@@ -16,6 +16,7 @@ module.exports = buildCodexPlusPatchSet({
     "userMessageAttachments": "webview/assets/user-message-attachments-5G1ZKim-.js",
     "composer": "webview/assets/composer-DlMDPaCL.js",
     "localTaskRow": "webview/assets/local-task-row-CoPNn6SW.js",
+    "mermaidDiagramShell": "webview/assets/mermaid-diagram-shell-BO-t9BGx.js",
     "keyboardShortcutsSearchInput": "webview/assets/keyboard-shortcuts-search-input-C1dmntOi.js",
     "src": "src-l0hbMZ-p.js",
     "sidebarThreadKeys": "sidebar-thread-keys-Ch_amVKz.js",

package/src/patches/26.616.81150-4306.js

@@ -16,6 +16,7 @@ module.exports = buildCodexPlusPatchSet({
     "userMessageAttachments": "webview/assets/user-message-attachments-5G1ZKim-.js",
     "composer": "webview/assets/composer-DlMDPaCL.js",
     "localTaskRow": "webview/assets/local-task-row-CoPNn6SW.js",
+    "mermaidDiagramShell": "webview/assets/mermaid-diagram-shell-BO-t9BGx.js",
     "keyboardShortcutsSearchInput": "webview/assets/keyboard-shortcuts-search-input-C1dmntOi.js",
     "src": "src-l0hbMZ-p.js",
     "sidebarThreadKeys": "sidebar-thread-keys-Ch_amVKz.js",

package/src/patches/lib/common-patches.js

@@ -7,6 +7,7 @@ function buildCodexPlusPatchSet(config) {
   const newTitle = '<title>Codex Plus</title><script src="./assets/codex-plus/runtime.js"></script>';
   const titleFile = "webview/index.html";
   const workerFile = ".vite/build/worker.js";
+  const preloadFile = ".vite/build/preload.js";
   const files = config.files;
   const anchors = config.anchors;
   const mainFile = files.main;
@@ -19,6 +20,7 @@ function buildCodexPlusPatchSet(config) {
   const userMessageAttachmentsFile = files.userMessageAttachments;
   const composerFile = files.composer;
   const localTaskRowFile = files.localTaskRow;
+  const mermaidDiagramShellFile = files.mermaidDiagramShell;
   const electronMenuShortcutsFile = files.electronMenuShortcuts;
   const keyboardShortcutsSearchInputFile = files.keyboardShortcutsSearchInput;
   const srcFile = files.src;
@@ -50,8 +52,8 @@ function patchAboutDialog(text, context = {}) {
   );
   patched = replaceOnce(
     patched,
-    "function V0(e){return[]}",
-    "function V0(e){return CPXAbout.buildInfoLines}",
+    "g=d.formatMessage({messageId:A0,defaultMessage:j0}),_=V0(o),v=_.length===0?h:[h,``,..._].join(`\n`),",
+    "g=d.formatMessage({messageId:A0,defaultMessage:j0}),_=CPXAbout.buildInfoLines,v=_.length===0?h:[h,``,..._].join(`\n`),",
     "about dialog build information anchor",
   );
   patched = replaceOnce(
@@ -128,6 +130,12 @@ const codexPlusSubrepoDiffHelpers = `
 const codexPlusDiagnosticHelpers = `
 function CPXDiagnosticDetails(e){return window.CodexPlus?.ui?.errors?.renderDetails?.(e)??null}`;
 
+const codexPlusMermaidHelpers = `
+function CPXMermaidDiagramProps(e){return window.CodexPlus?.ui?.mermaid?.diagramProps?.(e)}`;
+
+const codexPlusNativeMainHelpers = `
+function CPXOpenMermaidViewer(e){let t=e?.html;if(typeof t!==\`string\`||t.length===0)return{ok:!1};let n=(0,s.join)((0,o.tmpdir)(),\`codex-plus-mermaid-\${(0,u.randomUUID)()}.html\`);(0,l.writeFileSync)(n,t,\`utf8\`);let r=new a.BrowserWindow({height:900,resizable:!0,show:!0,title:\`Mermaid diagram viewer\`,webPreferences:{contextIsolation:!0,nodeIntegration:!1,sandbox:!0},width:1400});return r.webContents.setWindowOpenHandler(e=>{try{let t=new URL(e.url);if(t.protocol===\`https:\`&&t.hostname===\`mermaid.live\`)a.shell.openExternal(e.url)}catch{}return{action:\`deny\`}}),r.on(\`closed\`,()=>{try{(0,l.unlinkSync)(n)}catch{}}),r.loadURL((0,S.pathToFileURL)(n).toString()).catch(()=>{}),{ok:!0}}function CPXRegisterNativeRequest(e){return a.ipcMain.handle(\`codex_plus:native-request\`,async(t,n)=>{if(!e.isTrustedIpcEvent(t))return{ok:!1};switch(n?.method){case\`mermaid/openViewer\`:return CPXOpenMermaidViewer(n.params);default:return{ok:!1}}})}`;
+
 function patchThreadSidePanelTabs(text) {
   let patched = replaceOnce(
     text,
@@ -536,6 +544,45 @@ function patchLocalTaskRow(text) {
   );
 }
 
+function patchMermaidDiagramShell(text) {
+  let patched = replaceOnce(
+    text,
+    "function d(e){let t=(0,s.c)(18),{Renderer:n,className:r,code:i,fallback:d,isCodeFenceOpen:f,wideBlockKind:p}=e,",
+    `${codexPlusMermaidHelpers}function d(e){let t=(0,s.c)(18),{Renderer:n,className:r,code:i,fallback:d,isCodeFenceOpen:f,wideBlockKind:p}=e,`,
+    "mermaid diagram shell helper insertion anchor",
+  );
+  return replaceOnce(
+    patched,
+    "O=(0,c.jsx)(`div`,{className:T,\"data-wide-markdown-block\":E,\"data-wide-markdown-block-kind\":p,children:D})",
+    "O=(0,c.jsx)(`div`,{className:T,...CPXMermaidDiagramProps({code:i}),\"data-wide-markdown-block\":E,\"data-wide-markdown-block-kind\":p,children:D})",
+    "mermaid diagram shell host props anchor",
+  );
+}
+
+function patchPreloadNativeBridge(text) {
+  return replaceOnce(
+    text,
+    "e.contextBridge.exposeInMainWorld(`codexWindowType`,m),e.contextBridge.exposeInMainWorld(`electronBridge`,D),typeof window<`u`",
+    "e.contextBridge.exposeInMainWorld(`codexWindowType`,m),e.contextBridge.exposeInMainWorld(`electronBridge`,D),e.contextBridge.exposeInMainWorld(`codexPlusNative`,{request:(t,n)=>e.ipcRenderer.invoke(`codex_plus:native-request`,{method:t,params:n})}),typeof window<`u`",
+    "codex plus native preload bridge anchor",
+  );
+}
+
+function patchMainNativeBridge(text) {
+  let patched = replaceOnce(
+    text,
+    "function z1(e){return a.ipcMain.handle(Tl,async(t,n)=>{",
+    `${codexPlusNativeMainHelpers}function z1(e){return a.ipcMain.handle(Tl,async(t,n)=>{`,
+    "codex plus native main helper insertion anchor",
+  );
+  return replaceOnce(
+    patched,
+    "v0({buildFlavor:i,getContextForWebContents:N.getContextForWebContents,isTrustedIpcEvent:te,usesOwlAppShell:y}),a.ipcMain.on(kl,",
+    "v0({buildFlavor:i,getContextForWebContents:N.getContextForWebContents,isTrustedIpcEvent:te,usesOwlAppShell:y}),CPXRegisterNativeRequest({isTrustedIpcEvent:te}),a.ipcMain.on(kl,",
+    "codex plus native main registration anchor",
+  );
+}
+
 return makePatchSet({
     id: config.id,
     codexVersion: config.codexVersion,
@@ -597,6 +644,17 @@ return makePatchSet({
         [keyboardShortcutsSearchInputFile, patchKeyboardShortcutsSearchInput],
       ],
     },
+    ...(mermaidDiagramShellFile ? [{
+      id: "codex-plus-native-bridge",
+      fileTransforms: [
+        [preloadFile, patchPreloadNativeBridge],
+        [mainFile, patchMainNativeBridge],
+      ],
+    }] : []),
+    ...(mermaidDiagramShellFile ? [{
+      id: "mermaid-fullscreen-viewer",
+      fileTransforms: [[mermaidDiagramShellFile, patchMermaidDiagramShell]],
+    }] : []),
     ],
   });
 }

package/src/runtime/assets.js

@@ -12,6 +12,7 @@ const runtimeFiles = [
   ["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/sidebarNameBlur.js", "plugins/sidebarNameBlur.js"],
+  ["webview/assets/codex-plus/plugins/mermaidFullscreen.js", "plugins/mermaidFullscreen.js"],
 ];
 
 function codexPlusRuntimeAssets() {

package/src/runtime/plugins/mermaidFullscreen.js

@@ -0,0 +1,275 @@
+(function () {
+  const CodexPlus = window.CodexPlus;
+  const SELECTOR = "[data-codex-plus-mermaid-diagram]";
+  const BUTTON_CLASS = "codex-plus-mermaid-expand-button";
+
+  function sourceFor(container) {
+    return container.querySelector("pre.sr-only")?.textContent || "";
+  }
+
+  function assetUrl(assetPath) {
+    const appScript = document.querySelector('script[type="module"][src*="/assets/"],script[type="module"][src^="./assets/"]');
+    if (appScript?.src) return new URL(assetPath, new URL(".", appScript.src)).href;
+    return new URL(`assets/${assetPath}`, document.baseURI).href;
+  }
+
+  function escapeHtml(value) {
+    return String(value).replace(/[&<>"']/g, (char) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+    })[char]);
+  }
+
+  function mermaidLiveUrl(source) {
+    const state = JSON.stringify({
+      code: source,
+      mermaid: { theme: "default" },
+      updateEditor: false,
+    });
+    return `https://mermaid.live/edit#base64:${btoa(unescape(encodeURIComponent(state))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")}`;
+  }
+
+  function viewerHtml({ source, isDark, mermaidModuleUrl, debug }) {
+    return `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Mermaid diagram viewer</title>
+<style>
+:root{color-scheme:${isDark ? "dark" : "light"};--viewer-bg:${isDark ? "#0a0a0a" : "#fff"};--viewer-fg:${isDark ? "#fff" : "#111"};--viewer-toolbar-bg:${isDark ? "#252525" : "#f7f7f7"};--viewer-border:${isDark ? "rgba(255,255,255,.18)" : "rgba(0,0,0,.16)"};--viewer-button-border:${isDark ? "rgba(255,255,255,.22)" : "rgba(0,0,0,.18)"};--viewer-button-bg:${isDark ? "rgba(255,255,255,.08)" : "rgba(0,0,0,.06)"};--viewer-muted:${isDark ? "#cfcfcf" : "#333"}}
+:root[data-theme="dark"]{color-scheme:dark;--viewer-bg:#0a0a0a;--viewer-fg:#fff;--viewer-toolbar-bg:#252525;--viewer-border:rgba(255,255,255,.18);--viewer-button-border:rgba(255,255,255,.22);--viewer-button-bg:rgba(255,255,255,.08);--viewer-muted:#cfcfcf}
+:root[data-theme="light"]{color-scheme:light;--viewer-bg:#fff;--viewer-fg:#111;--viewer-toolbar-bg:#f7f7f7;--viewer-border:rgba(0,0,0,.16);--viewer-button-border:rgba(0,0,0,.18);--viewer-button-bg:rgba(0,0,0,.06);--viewer-muted:#333}
+*{box-sizing:border-box}
+html,body{height:100%;margin:0}
+body{display:flex;flex-direction:column;background:var(--viewer-bg);color:var(--viewer-fg);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
+.toolbar{display:flex;gap:8px;justify-content:flex-end;padding:10px;border-bottom:1px solid var(--viewer-border);background:var(--viewer-toolbar-bg)}
+button{min-width:42px;border:1px solid var(--viewer-button-border);border-radius:6px;background:var(--viewer-button-bg);color:inherit;padding:6px 10px}
+button:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
+.viewport{flex:1;overflow:auto;padding:16px}
+.stage{width:max-content;min-width:100%}
+.stage svg{display:block;max-width:none;background:var(--viewer-bg)}
+.render-status{position:fixed;left:12px;bottom:10px;z-index:10;color:var(--viewer-muted);font-size:12px}
+.render-status[hidden]{display:none}
+</style>
+</head>
+<body>
+<div class="toolbar">
+  <button id="zoom-fit" type="button" aria-label="Zoom to fit">Fit</button>
+  <button id="zoom-width" type="button" aria-label="Zoom to width">Width</button>
+  <button id="zoom-height" type="button" aria-label="Zoom to height">Height</button>
+  <button id="zoom-out" type="button" aria-label="Zoom out">-</button>
+  <button id="zoom-reset" type="button" aria-label="Reset zoom">100%</button>
+  <button id="zoom-in" type="button" aria-label="Zoom in">+</button>
+  <button id="theme-toggle" type="button" aria-label="Toggle Mermaid theme">${isDark ? "Dark" : "Light"}</button>
+  <button id="open-live" type="button" aria-label="Open in Mermaid Live">Live</button>
+  <button id="close" type="button" aria-label="Close Mermaid diagram viewer">Close</button>
+</div>
+<div class="viewport"><div class="stage" id="stage"></div></div>
+<div class="render-status" id="render-status" hidden>Rendering Mermaid source...</div>
+<script type="module">
+let scale = 1;
+let darkTheme = ${isDark ? "true" : "false"};
+const source = ${JSON.stringify(source)};
+const mermaidModuleUrl = ${JSON.stringify(mermaidModuleUrl)};
+const liveUrl = ${JSON.stringify(mermaidLiveUrl(source))};
+const debug = ${debug ? "true" : "false"} || localStorage.getItem("codexPlusMermaidDebug") === "1";
+const stage = document.getElementById("stage");
+const viewport = document.querySelector(".viewport");
+const reset = document.getElementById("zoom-reset");
+const themeToggle = document.getElementById("theme-toggle");
+const renderStatus = document.getElementById("render-status");
+let fitMode = "fit";
+let renderCount = 0;
+let renderInFlight = false;
+let renderQueued = false;
+function diagram() {
+  return stage.querySelector("svg");
+}
+function baseSize() {
+  const svg = diagram();
+  const viewBox = svg?.viewBox?.baseVal;
+  if (viewBox && viewBox.width > 0 && viewBox.height > 0) return { width: viewBox.width, height: viewBox.height };
+  const rect = svg?.getBoundingClientRect();
+  return { width: rect?.width || 800, height: rect?.height || 600 };
+}
+let base = { width: 800, height: 600 };
+function setScale(next, mode = null) {
+  fitMode = mode;
+  scale = Math.max(0.05, Math.min(8, next));
+  const svg = diagram();
+  if (svg) {
+    svg.removeAttribute("width");
+    svg.removeAttribute("height");
+    svg.style.width = Math.round(base.width * scale) + "px";
+    svg.style.height = Math.round(base.height * scale) + "px";
+  }
+  reset.textContent = Math.round(scale * 100) + "%";
+}
+function fitScale(mode) {
+  const width = Math.max(1, viewport.clientWidth - 32);
+  const height = Math.max(1, viewport.clientHeight - 32);
+  const byWidth = width / base.width;
+  const byHeight = height / base.height;
+  if (mode === "width") return byWidth;
+  if (mode === "height") return byHeight;
+  return Math.min(byWidth, byHeight);
+}
+function applyFit(mode) {
+  setScale(fitScale(mode), mode);
+}
+function applyThemeChrome() {
+  document.documentElement.dataset.theme = darkTheme ? "dark" : "light";
+  document.documentElement.style.colorScheme = darkTheme ? "dark" : "light";
+  themeToggle.textContent = darkTheme ? "Dark" : "Light";
+  themeToggle.setAttribute("aria-pressed", String(darkTheme));
+}
+function themeDirective() {
+  return "%%{init: " + JSON.stringify({ theme: darkTheme ? "dark" : "default" }) + "}%%" + String.fromCharCode(10);
+}
+function sourceForTheme() {
+  const trimmed = source.trimStart();
+  if (!trimmed.startsWith("%%{")) return themeDirective() + source;
+  const markerEnd = trimmed.indexOf("}%%");
+  if (markerEnd < 0) return themeDirective() + source;
+  const directive = trimmed.slice(0, markerEnd + 3).toLowerCase();
+  if (!directive.startsWith("%%{init:") && !directive.startsWith("%%{initialize:")) return themeDirective() + source;
+  let rest = trimmed.slice(markerEnd + 3);
+  while ([9, 10, 13, 32].includes(rest.charCodeAt(0))) rest = rest.slice(1);
+  return themeDirective() + rest;
+}
+async function renderFromSource() {
+  if (renderInFlight) {
+    renderQueued = true;
+    return;
+  }
+  renderInFlight = true;
+  renderStatus.hidden = !debug;
+  renderStatus.textContent = "Rendering Mermaid source...";
+  themeToggle.disabled = true;
+  try {
+    const mermaid = (await import(mermaidModuleUrl)).default;
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: "strict",
+      suppressErrorRendering: true,
+      deterministicIds: true,
+      deterministicIDSeed: "codex-plus-mermaid-viewer",
+      htmlLabels: false,
+      flowchart: { htmlLabels: false },
+      darkMode: darkTheme,
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      theme: darkTheme ? "dark" : "default",
+    });
+    applyThemeChrome();
+    const rendered = await mermaid.render("codex-plus-mermaid-viewer-" + String(renderCount += 1), sourceForTheme());
+    stage.innerHTML = rendered.svg;
+    renderStatus.textContent = "Rendered from Mermaid source";
+    base = baseSize();
+    applyFit(fitMode || "fit");
+  } finally {
+    renderInFlight = false;
+    themeToggle.disabled = false;
+    if (renderQueued) {
+      renderQueued = false;
+      renderFromSource();
+    }
+  }
+}
+document.getElementById("zoom-fit").addEventListener("click", () => applyFit("fit"));
+document.getElementById("zoom-width").addEventListener("click", () => applyFit("width"));
+document.getElementById("zoom-height").addEventListener("click", () => applyFit("height"));
+document.getElementById("zoom-out").addEventListener("click", () => setScale(scale - 0.2));
+reset.addEventListener("click", () => setScale(1));
+document.getElementById("zoom-in").addEventListener("click", () => setScale(scale + 0.2));
+themeToggle.addEventListener("click", () => { darkTheme = !darkTheme; applyThemeChrome(); renderQueued = true; renderFromSource(); });
+document.getElementById("open-live").addEventListener("click", () => window.open(liveUrl, "_blank", "noopener"));
+document.getElementById("close").addEventListener("click", () => window.close());
+window.addEventListener("resize", () => { if (fitMode) applyFit(fitMode); });
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") window.close();
+  if ((event.metaKey || event.ctrlKey) && event.key === "=") { event.preventDefault(); setScale(scale + 0.2); }
+  if ((event.metaKey || event.ctrlKey) && event.key === "-") { event.preventDefault(); setScale(scale - 0.2); }
+  if ((event.metaKey || event.ctrlKey) && event.key === "0") { event.preventDefault(); setScale(1); }
+});
+applyThemeChrome();
+renderFromSource().catch((error) => {
+  renderStatus.hidden = false;
+  renderStatus.textContent = "Mermaid render failed: " + String(error?.message || error);
+  console.error("[Codex Plus] Mermaid source render failed", error);
+});
+</script>
+</body>
+</html>`;
+  }
+
+  function button(label) {
+    const element = document.createElement("button");
+    element.type = "button";
+    element.className = BUTTON_CLASS;
+    element.setAttribute("aria-label", label);
+    element.title = label;
+    return element;
+  }
+
+  function openViewer(container) {
+    const source = sourceFor(container);
+    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 })
+      : `<!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 control = button("Open Mermaid diagram fullscreen");
+    control.addEventListener("click", () => openViewer(container));
+    container.prepend(control);
+  }
+
+  function decorateAll(root = document) {
+    for (const container of root.querySelectorAll(SELECTOR)) decorate(container);
+  }
+
+  CodexPlus.registerPlugin(
+    CodexPlus.definePlugin({
+      id: "mermaidFullscreen",
+      name: "Mermaid Fullscreen Viewer",
+      description: "Adds a separate fullscreen viewer with zoom controls to rendered Mermaid diagrams.",
+      required: true,
+      styles:
+        `[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}` +
+        `.${BUTTON_CLASS}::before{right:.42rem;top:.42rem;border-width:2px 2px 0 0}` +
+        `.${BUTTON_CLASS}::after{left:.42rem;bottom:.42rem;border-width:0 0 2px 2px}` +
+        `.${BUTTON_CLASS}:hover,.${BUTTON_CLASS}:focus-visible{opacity:1;outline:2px solid var(--color-token-focus-border,#3b82f6);outline-offset:2px}` +
+        `:root.dark .${BUTTON_CLASS},:root.electron-dark .${BUTTON_CLASS}{background:var(--color-background-elevated-primary,#111);color:var(--color-token-foreground,#fff);box-shadow:0 2px 10px rgba(0,0,0,.45)}`,
+      exports: { decorateAll, openViewer },
+      start(api) {
+        api.ui.mermaid.decorateDiagram(() => ({ "data-codex-plus-mermaid-diagram": "" }));
+        const install = () => {
+          if (!document.body) return;
+          decorateAll();
+          const observer = new MutationObserver((records) => {
+            for (const record of records) {
+              for (const node of record.addedNodes) {
+                if (node.nodeType !== Node.ELEMENT_NODE) continue;
+                if (node.matches?.(SELECTOR)) decorate(node);
+                decorateAll(node);
+              }
+            }
+          });
+          observer.observe(document.body, { childList: true, subtree: true });
+        };
+        if (document.body) install();
+        else document.addEventListener("DOMContentLoaded", install, { once: true });
+      },
+    }),
+  );
+})();

package/src/runtime/runtime.js

@@ -330,10 +330,15 @@
       composer: { surfaceDecorators: [], decorateSurface(fn) { this.surfaceDecorators.push(fn); return fn; }, surfaceProps(props) { return applyDecorators(props, this.surfaceDecorators); } },
       about: { buildInfo: [], addBuildInfo(fn) { this.buildInfo.push(fn); return fn; } },
       errors: { boundaryDecorators: [], decorateBoundary(fn) { this.boundaryDecorators.push(fn); return fn; }, renderDetails: renderErrorDetails },
+      mermaid: {
+        diagramDecorators: [],
+        decorateDiagram(fn) { this.diagramDecorators.push(fn); return fn; },
+        diagramProps(props) { return applyDecorators(props, this.diagramDecorators); },
+      },
     },
     commands: { register: registerCommand, run: runCommand, all: () => Array.from(commands.values()), menuItems: (group) => Array.from(commands.values()).filter((command) => commandGroups(command).includes(group)) },
     settings: { define: defineSettings },
-    native: { async request(method, params) { return globalObject.CodexPlusHost?.nativeRequest?.(method, params); } },
+    native: { async request(method, params) { return globalObject.codexPlusNative?.request?.(method, params) ?? globalObject.CodexPlusHost?.nativeRequest?.(method, params); } },
     styles: { register: registerStyle, setRootVars },
   };
 
@@ -348,6 +353,7 @@
     "plugins/userBubbleColors.js",
     "plugins/projectColors.js",
     "plugins/sidebarNameBlur.js",
+    "plugins/mermaidFullscreen.js",
   ];
 
   if (typeof document !== "undefined") {