codex-plus-patcher 0.2.0 → 0.3.0

package/src/runtime/plugins/projectColors.js

@@ -0,0 +1,153 @@
+(function () {
+  const CodexPlus = window.CodexPlus;
+  const STORAGE_KEY = "codex-plus:project-colors-enabled";
+  const EVENT = "codex-plus:project-colors-change";
+  const palette = [
+    ["#5b8ff9", "#dbeafe", "#1d4ed8", "#f8fbff"], ["#61dDAA", "#dcfce7", "#15803d", "#f7fff9"],
+    ["#65789b", "#e0e7ff", "#4338ca", "#f8faff"], ["#f6bd16", "#fef3c7", "#b45309", "#fffdf5"],
+    ["#7262fd", "#ede9fe", "#6d28d9", "#fbf8ff"], ["#78d3f8", "#e0f2fe", "#0369a1", "#f5fcff"],
+    ["#9661bc", "#f3e8ff", "#7e22ce", "#fdf7ff"], ["#f6903d", "#ffedd5", "#c2410c", "#fff9f4"],
+    ["#008685", "#ccfbf1", "#0f766e", "#f5fffd"], ["#f08bb4", "#fce7f3", "#be185d", "#fff7fb"],
+    ["#6dc8ec", "#e0f7ff", "#0e7490", "#f5fdff"], ["#8d70f8", "#ede9fe", "#5b21b6", "#faf8ff"],
+    ["#c2c8d5", "#e5e7eb", "#4b5563", "#fbfbfc"], ["#ff9d4d", "#fee2e2", "#b91c1c", "#fff7f7"],
+    ["#269a99", "#d1fae5", "#047857", "#f6fffb"], ["#ff99c3", "#fce7f3", "#be123c", "#fff8fb"],
+    ["#4c78a8", "#dbeafe", "#1e40af", "#f8fbff"], ["#72b7b2", "#ccfbf1", "#0f766e", "#f5fffd"],
+    ["#54a24b", "#dcfce7", "#166534", "#f7fff7"], ["#eeca3b", "#fef9c3", "#a16207", "#fffdf2"],
+    ["#b279a2", "#fce7f3", "#9d174d", "#fff7fb"], ["#ff9da6", "#ffe4e6", "#be123c", "#fff7f8"],
+    ["#9d755d", "#ffedd5", "#9a3412", "#fff9f4"], ["#bab0ac", "#e7e5e4", "#57534e", "#fbfaf9"],
+    ["#7f7f7f", "#e5e7eb", "#374151", "#fafafa"], ["#bcbd22", "#fef9c3", "#854d0e", "#fffdf2"],
+    ["#17becf", "#cffafe", "#0e7490", "#f5feff"], ["#1f77b4", "#dbeafe", "#1d4ed8", "#f7fbff"],
+    ["#2ca02c", "#dcfce7", "#15803d", "#f7fff7"], ["#9467bd", "#f3e8ff", "#7e22ce", "#fcf7ff"],
+    ["#8c564b", "#fee2e2", "#991b1b", "#fff7f6"], ["#e377c2", "#fce7f3", "#be185d", "#fff8fb"],
+  ];
+
+  function readEnabled() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored == null ? true : stored === "true";
+    } catch {
+      return true;
+    }
+  }
+
+  function writeEnabled(value) {
+    try {
+      localStorage.setItem(STORAGE_KEY, value ? "true" : "false");
+      window.dispatchEvent(new CustomEvent(EVENT, { detail: { key: STORAGE_KEY, value } }));
+    } catch {}
+  }
+
+  function fnv1a32(value) {
+    let result = 0x811c9dc5;
+    for (const char of String(value || "")) result = Math.imul(result ^ char.charCodeAt(0), 0x01000193);
+    return result >>> 0;
+  }
+
+  function colorKey(project) {
+    if (project == null) return "";
+    if (typeof project === "string") return project.trim();
+    const id = project.projectId ?? project.id;
+    if (id != null && String(id).trim() !== "") return String(id).trim();
+    const host = project.hostId ?? project.host ?? project.remoteHostId ?? "local";
+    const path = project.path ?? project.cwd ?? project.projectPath ?? project.remotePath ?? project.root ?? project.workspaceRoot;
+    if (path != null && String(path).trim() !== "") return `${host}:${path}`;
+    return [project.label, project.name].filter(Boolean).join(":");
+  }
+
+  function colorFor(project) {
+    return palette[fnv1a32(colorKey(project)) % palette.length];
+  }
+
+  function style(project) {
+    const key = colorKey(project);
+    if (!readEnabled() || key.trim() === "") return undefined;
+    const [accent, bgLight, fgLight, softLight] = colorFor(key);
+    return {
+      "--codex-plus-project-accent": accent,
+      "--codex-plus-project-bg-light": bgLight,
+      "--codex-plus-project-fg-light": fgLight,
+      "--codex-plus-project-soft-light": softLight,
+      "--codex-plus-project-bg-dark": `color-mix(in srgb, ${accent} 24%, transparent)`,
+      "--codex-plus-project-fg-dark": "#f8fafc",
+      "--codex-plus-project-border-dark": `color-mix(in srgb, ${accent} 62%, transparent)`,
+      "--codex-plus-project-separator-light": "rgba(17,24,39,.24)",
+      "--codex-plus-project-separator-dark": "rgba(255,255,255,.34)",
+      borderLeft: `6px solid ${accent}`,
+    };
+  }
+
+  function dataAttributes(project, sidebar) {
+    const inlineStyle = style(project);
+    if (inlineStyle == null) return undefined;
+    return {
+      "data-codex-plus-project-color": "",
+      ...(sidebar ? { "data-codex-plus-project-sidebar-color": "" } : {}),
+      style: inlineStyle,
+    };
+  }
+
+  function renderToggleRow({ React, jsx, SettingRow, Switch, label, ariaLabel }) {
+    const [enabled, setEnabled] = React.useState(readEnabled);
+    React.useEffect(() => {
+      const listener = () => setEnabled(readEnabled());
+      window.addEventListener(EVENT, listener);
+      return () => window.removeEventListener(EVENT, listener);
+    }, []);
+    return jsx(SettingRow, {
+      control: jsx(Switch, {
+        checked: enabled,
+        onChange: (next) => {
+          setEnabled(next);
+          writeEnabled(next);
+        },
+        ariaLabel,
+      }),
+      label,
+      variant: "nested",
+    });
+  }
+
+  CodexPlus.registerPlugin(
+    CodexPlus.definePlugin({
+      id: "projectColors",
+      name: "Project Colors",
+      description: "Provides deterministic project accent colors across sidebar, messages, and composer surfaces.",
+      required: true,
+      styles:
+        ":root:not(.dark):not(.electron-dark) [data-codex-plus-project-sidebar-color]{border-radius:0;background-color:var(--codex-plus-project-soft-light);border-left-color:var(--codex-plus-project-accent)}" +
+        ":root.dark [data-codex-plus-project-sidebar-color],:root.electron-dark [data-codex-plus-project-sidebar-color]{border-radius:0;background-color:var(--codex-plus-project-bg-dark);border-left-color:var(--codex-plus-project-border-dark)}" +
+        ":root:not(.dark):not(.electron-dark) [data-codex-plus-project-color]{border-left-color:var(--codex-plus-project-accent)}" +
+        ":root.dark [data-codex-plus-project-color],:root.electron-dark [data-codex-plus-project-color]{border-left-color:var(--codex-plus-project-border-dark)}" +
+        ":root:not(.dark):not(.electron-dark) [data-codex-plus-project-color]:not([data-codex-plus-project-sidebar-color]){background-image:linear-gradient(to right,var(--codex-plus-project-separator-light),var(--codex-plus-project-separator-light));background-repeat:no-repeat;background-size:2px 100%;background-position:left top}" +
+        ":root.dark [data-codex-plus-project-color]:not([data-codex-plus-project-sidebar-color]),:root.electron-dark [data-codex-plus-project-color]:not([data-codex-plus-project-sidebar-color]){background-image:linear-gradient(to right,var(--codex-plus-project-separator-dark),var(--codex-plus-project-separator-dark));background-repeat:no-repeat;background-size:2px 100%;background-position:left top}",
+      exports: {
+        colorFor,
+        colorKey,
+        dataAttributes,
+        eventName: EVENT,
+        fnv1a32,
+        palette,
+        readEnabled,
+        renderToggleRow,
+        style,
+        writeEnabled,
+      },
+      start(api) {
+        api.ui.settings.appearance.addRow({
+          id: "codex-plus-project-colors",
+          order: 20,
+          plugin: "projectColors",
+          render: (deps) => renderToggleRow({
+            ...deps,
+            label: "Project colors",
+            ariaLabel: `${deps.variant || "Current"} project colors`,
+          }),
+        });
+        api.ui.sidebar.decorateProjectRow((props) => dataAttributes(props?.project, true));
+        api.ui.sidebar.decorateThreadRow((props) => dataAttributes(props?.project, true));
+        api.ui.message.decorateUserBubble((props) => dataAttributes(props?.project, false));
+        api.ui.composer.decorateSurface((props) => dataAttributes(props?.project, false));
+      },
+    }),
+  );
+})();

package/src/runtime/plugins/sidebarNameBlur.js

@@ -0,0 +1,28 @@
+(function () {
+  const CodexPlus = window.CodexPlus;
+  CodexPlus.registerPlugin(
+    CodexPlus.definePlugin({
+      id: "sidebarNameBlur",
+      name: "Sidebar Name Blur",
+      description: "Registers the session-only Toggle sidebar blur command.",
+      required: true,
+      styles: ':root[data-codex-plus-sidebar-names-blurred="true"] :is([data-thread-title],[data-codex-plus-sidebar-name]){filter:blur(4px);user-select:none}',
+      commands: [
+        {
+          id: "codexPlusToggleSidebarNameBlur",
+          title: "Toggle sidebar blur",
+          description: "Blur or show sidebar chat and project names",
+          menu: { groups: ["suggested", "panels"] },
+          palette: { enabled: true, keywords: ["privacy", "blur"] },
+          shortcut: { defaultKeybindings: [] },
+          run() {
+            const root = document.documentElement;
+            const enabled = root.getAttribute("data-codex-plus-sidebar-names-blurred") === "true";
+            if (enabled) root.removeAttribute("data-codex-plus-sidebar-names-blurred");
+            else root.setAttribute("data-codex-plus-sidebar-names-blurred", "true");
+          },
+        },
+      ],
+    }),
+  );
+})();

package/src/runtime/plugins/userBubbleColors.js

@@ -0,0 +1,134 @@
+(function () {
+  const CodexPlus = window.CodexPlus;
+  const STORAGE_KEY = "codex-plus:user-message-bubble-colors";
+  const EVENT = "codex-plus:user-message-bubble-colors-change";
+
+  function isColor(value) {
+    return typeof value === "string" && /^#[0-9a-fA-F]{6}$/.test(value);
+  }
+
+  function defaultColor(variant) {
+    return variant === "dark" ? "#2f2f2f" : "#f2f2f2";
+  }
+
+  function isStoredColor(variant, value) {
+    return isColor(value) && value.toLowerCase() !== defaultColor(variant);
+  }
+
+  function readColors(emptyValue = null) {
+    try {
+      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}") || {};
+      return {
+        light: isStoredColor("light", stored.light) ? stored.light : emptyValue,
+        dark: isStoredColor("dark", stored.dark) ? stored.dark : emptyValue,
+      };
+    } catch {
+      return { light: emptyValue, dark: emptyValue };
+    }
+  }
+
+  function writeColor(variant, value) {
+    const next = readColors(undefined);
+    if (isStoredColor(variant, value)) next[variant] = value;
+    else delete next[variant];
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    window.dispatchEvent(new CustomEvent(EVENT, { detail: next }));
+  }
+
+  function textColor(background) {
+    const red = parseInt(background.slice(1, 3), 16);
+    const green = parseInt(background.slice(3, 5), 16);
+    const blue = parseInt(background.slice(5, 7), 16);
+    const channel = (value) => {
+      const normalized = value / 255;
+      return normalized <= 0.03928 ? normalized / 12.92 : Math.pow((normalized + 0.055) / 1.055, 2.4);
+    };
+    const luminance = 0.2126 * channel(red) + 0.7152 * channel(green) + 0.0722 * channel(blue);
+    const againstNearBlack = (luminance + 0.05) / (0.0056 + 0.05);
+    const againstBlack = (luminance + 0.05) / 0.05;
+    const againstWhite = 1.05 / (luminance + 0.05);
+    if (againstNearBlack >= 4.5 && againstNearBlack >= againstWhite) return "#111111";
+    return againstBlack >= againstWhite ? "#000000" : "#ffffff";
+  }
+
+  function setVars() {
+    const colors = readColors(null);
+    for (const variant of ["light", "dark"]) {
+      const color = colors[variant];
+      if (color == null) {
+        document.documentElement.style.removeProperty(`--codex-plus-user-bubble-${variant}-bg`);
+        document.documentElement.style.removeProperty(`--codex-plus-user-bubble-${variant}-fg`);
+      } else {
+        document.documentElement.style.setProperty(`--codex-plus-user-bubble-${variant}-bg`, color);
+        document.documentElement.style.setProperty(`--codex-plus-user-bubble-${variant}-fg`, textColor(color));
+      }
+    }
+  }
+
+  function renderColorRow({ React, jsx, SettingRow, ColorInput, variant, label, ariaLabel }) {
+    const [value, setValue] = React.useState(() => readColors("")[variant] || defaultColor(variant));
+    React.useEffect(() => {
+      const listener = () => setValue(readColors("")[variant] || defaultColor(variant));
+      window.addEventListener(EVENT, listener);
+      return () => window.removeEventListener(EVENT, listener);
+    }, [variant]);
+    return jsx(SettingRow, {
+      control: jsx(ColorInput, {
+        ariaLabel,
+        value,
+        onChange: (next) => {
+          setValue(next);
+          writeColor(variant, next);
+        },
+      }),
+      label,
+      variant: "nested",
+    });
+  }
+
+  CodexPlus.registerPlugin(
+    CodexPlus.definePlugin({
+      id: "userBubbleColors",
+      name: "User Bubble Colors",
+      description: "Manages user-message bubble color settings and CSS variables.",
+      required: true,
+      styles:
+        ':root:not(.dark):not(.electron-dark) :is([data-codex-plus-user-bubble],[data-codex-plus-user-entry]){background-color:var(--codex-plus-user-bubble-light-bg);color:var(--codex-plus-user-bubble-light-fg)}' +
+        ':root:not(.dark):not(.electron-dark) [data-codex-plus-user-entry] :is(.ProseMirror,.ProseMirror *,textarea,[contenteditable="true"],[data-placeholder]),:root:not(.dark):not(.electron-dark) [data-codex-plus-user-entry] :is(button:not([class*="bg-token-foreground"]),[role="button"]:not([class*="bg-token-foreground"]),button:not([class*="bg-token-foreground"]) svg,[role="button"]:not([class*="bg-token-foreground"]) svg,[class*="text-token-foreground"],[class*="text-token-description-foreground"],[class*="text-token-input-placeholder-foreground"],[class*="text-token-text-link-foreground"],[class*="text-token-editor-warning-foreground"]){color:var(--codex-plus-user-bubble-light-fg)}' +
+        ':root:not(.dark):not(.electron-dark) [data-codex-plus-user-entry] :is([data-placeholder],[class*="text-token-input-placeholder-foreground"])::before,:root:not(.dark):not(.electron-dark) [data-codex-plus-user-entry] :is([data-placeholder],[class*="text-token-input-placeholder-foreground"])::after,:root:not(.dark):not(.electron-dark) [data-codex-plus-user-entry] :is(input,textarea,[contenteditable="true"],[class*="placeholder:text-token-input-placeholder-foreground"])::placeholder{color:var(--codex-plus-user-bubble-light-fg)}' +
+        ':root.dark :is([data-codex-plus-user-bubble],[data-codex-plus-user-entry]),:root.electron-dark :is([data-codex-plus-user-bubble],[data-codex-plus-user-entry]){background-color:var(--codex-plus-user-bubble-dark-bg);color:var(--codex-plus-user-bubble-dark-fg)}' +
+        ':root.dark [data-codex-plus-user-entry] :is(.ProseMirror,.ProseMirror *,textarea,[contenteditable="true"],[data-placeholder]),:root.electron-dark [data-codex-plus-user-entry] :is(.ProseMirror,.ProseMirror *,textarea,[contenteditable="true"],[data-placeholder]),:root.dark [data-codex-plus-user-entry] :is(button:not([class*="bg-token-foreground"]),[role="button"]:not([class*="bg-token-foreground"]),button:not([class*="bg-token-foreground"]) svg,[role="button"]:not([class*="bg-token-foreground"]) svg,[class*="text-token-foreground"],[class*="text-token-description-foreground"],[class*="text-token-input-placeholder-foreground"],[class*="text-token-text-link-foreground"],[class*="text-token-editor-warning-foreground"]),:root.electron-dark [data-codex-plus-user-entry] :is(button:not([class*="bg-token-foreground"]),[role="button"]:not([class*="bg-token-foreground"]),button:not([class*="bg-token-foreground"]) svg,[role="button"]:not([class*="bg-token-foreground"]) svg,[class*="text-token-foreground"],[class*="text-token-description-foreground"],[class*="text-token-input-placeholder-foreground"],[class*="text-token-text-link-foreground"],[class*="text-token-editor-warning-foreground"]){color:var(--codex-plus-user-bubble-dark-fg)}' +
+        ':root.dark [data-codex-plus-user-entry] :is([data-placeholder],[class*="text-token-input-placeholder-foreground"])::before,:root.dark [data-codex-plus-user-entry] :is([data-placeholder],[class*="text-token-input-placeholder-foreground"])::after,:root.dark [data-codex-plus-user-entry] :is(input,textarea,[contenteditable="true"],[class*="placeholder:text-token-input-placeholder-foreground"])::placeholder,:root.electron-dark [data-codex-plus-user-entry] :is([data-placeholder],[class*="text-token-input-placeholder-foreground"])::before,:root.electron-dark [data-codex-plus-user-entry] :is([data-placeholder],[class*="text-token-input-placeholder-foreground"])::after,:root.electron-dark [data-codex-plus-user-entry] :is(input,textarea,[contenteditable="true"],[class*="placeholder:text-token-input-placeholder-foreground"])::placeholder{color:var(--codex-plus-user-bubble-dark-fg)}',
+      exports: {
+        defaultColor,
+        eventName: EVENT,
+        isColor,
+        isStoredColor,
+        readColors,
+        renderColorRow,
+        setVars,
+        textColor,
+        writeColor,
+      },
+      start(api) {
+        api.ui.settings.appearance.addRow({
+          id: "codex-plus-user-bubble-colors",
+          order: 10,
+          plugin: "userBubbleColors",
+          render: (deps) => renderColorRow({
+            ...deps,
+            label: "User bubble",
+            ariaLabel: `${deps.variant || "Current"} user message bubble color`,
+          }),
+        });
+        api.ui.message.decorateUserBubble(() => ({ "data-codex-plus-user-bubble": "" }));
+        api.ui.composer.decorateSurface(() => ({ "data-codex-plus-user-entry": "" }));
+        setVars();
+        window.addEventListener(EVENT, setVars);
+      },
+      stop() {
+        window.removeEventListener(EVENT, setVars);
+      },
+    }),
+  );
+})();

package/src/runtime/runtime.js

@@ -0,0 +1,363 @@
+(function () {
+  const globalObject = typeof window !== "undefined" ? window : globalThis;
+  const plugins = new Map();
+  const startedPlugins = new Set();
+  const hostModules = new Map();
+  const waiters = [];
+  const patchDescriptors = [];
+  const commands = new Map();
+  const styleElements = new Map();
+  const settingsListeners = new Map();
+  const storagePrefix = "codex-plus:plugin:";
+
+  function safeId(id) {
+    if (typeof id !== "string" || id.trim() === "") throw new Error("Codex Plus plugin ids must be non-empty strings");
+    return id.trim();
+  }
+
+  function definePlugin(definition) {
+    const id = safeId(definition.id || definition.name);
+    return { ...definition, id };
+  }
+
+  function notifyWaiters(name, value) {
+    for (let index = waiters.length - 1; index >= 0; index -= 1) {
+      const waiter = waiters[index];
+      if (!waiter.filter(value, name)) continue;
+      waiters.splice(index, 1);
+      waiter.resolve(value);
+    }
+  }
+
+  function registerHostModule(name, value) {
+    hostModules.set(name, value);
+    notifyWaiters(name, value);
+    return value;
+  }
+
+  function moduleValues() {
+    return Array.from(hostModules.values());
+  }
+
+  function findByProps(...props) {
+    return moduleValues().find((value) => value && props.every((prop) => prop in value));
+  }
+
+  function findByCode(text) {
+    return moduleValues().find((value) => {
+      try {
+        return String(value).includes(text);
+      } catch {
+        return false;
+      }
+    });
+  }
+
+  function findComponentByCode(text) {
+    return moduleValues().find((value) => {
+      try {
+        return typeof value === "function" && String(value).includes(text);
+      } catch {
+        return false;
+      }
+    });
+  }
+
+  function waitFor(filter) {
+    for (const [name, value] of hostModules) {
+      if (filter(value, name)) return Promise.resolve(value);
+    }
+    return new Promise((resolve) => waiters.push({ filter, resolve }));
+  }
+
+  function getPluginStore(pluginId) {
+    const key = `${storagePrefix}${pluginId}`;
+    try {
+      return JSON.parse(globalObject.localStorage?.getItem(key) || "{}") || {};
+    } catch {
+      return {};
+    }
+  }
+
+  function writePluginStore(pluginId, store) {
+    const key = `${storagePrefix}${pluginId}`;
+    globalObject.localStorage?.setItem(key, JSON.stringify(store));
+  }
+
+  function emitSetting(pluginId, key, value) {
+    const listenerKey = `${pluginId}:${key}`;
+    for (const listener of settingsListeners.get(listenerKey) || []) listener(value);
+  }
+
+  function defineSettings(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 = settingsListeners.get(listenerKey) || new Set();
+        listeners.add(listener);
+        settingsListeners.set(listenerKey, listeners);
+        listener(getPluginStore(id)[key]);
+        return () => listeners.delete(listener);
+      },
+    };
+  }
+
+  function registerPatch(descriptor) {
+    patchDescriptors.push(descriptor);
+    return descriptor;
+  }
+
+  function applyPatchDescriptors(source, descriptors = patchDescriptors) {
+    let output = source;
+    for (const descriptor of descriptors) {
+      const moduleMatches =
+        typeof descriptor.find === "string" ? output.includes(descriptor.find) : descriptor.find.test(output);
+      if (!moduleMatches) continue;
+      const replacements = Array.isArray(descriptor.replacement) ? descriptor.replacement : [descriptor.replacement];
+      const beforeGroup = output;
+      let appliedGroup = true;
+      for (const replacement of replacements) {
+        const before = output;
+        output = output.replace(replacement.match, replacement.replace);
+        if (before === output) appliedGroup = false;
+      }
+      if (descriptor.group && !appliedGroup) output = beforeGroup;
+      if (!descriptor.all) break;
+    }
+    return output;
+  }
+
+  function registerCommand(command) {
+    commands.set(safeId(command.id), command);
+    return command;
+  }
+
+  function runCommand(id, ...args) {
+    const command = commands.get(id);
+    if (!command) throw new Error(`Unknown Codex Plus command: ${id}`);
+    return command.run?.(...args);
+  }
+
+  function commandGroups(command) {
+    return command.menu?.groups || [];
+  }
+
+  function commandKeybindings(command) {
+    return command.shortcut?.defaultKeybindings || [];
+  }
+
+  function commandMetadata() {
+    return Array.from(commands.values())
+      .filter((command) => command.palette?.enabled !== false)
+      .map((command) => {
+        const groups = commandGroups(command);
+        return {
+          id: command.id,
+          title: command.title,
+          description: command.description,
+          menuGroups: groups,
+          defaultKeybindings: commandKeybindings(command),
+          commandMenuGroupKey: groups.includes("panels") ? "panels" : groups[0],
+          commandMenu: true,
+          electron: {
+            menuTitle: command.title,
+            defaultKeybindings: commandKeybindings(command),
+          },
+        };
+      });
+  }
+
+  function CommandMenuItemHost({ command, deps, group, close }) {
+    const jsx = deps?.jsx;
+    const MenuItem = deps?.MenuItem;
+    if (typeof jsx !== "function" || MenuItem == null) return null;
+    const render = (closeMenu) =>
+      jsx(
+        MenuItem,
+        {
+          value: command.title,
+          title: command.title,
+          description: command.description,
+          onSelect() {
+            runCommand(command.id);
+            closeMenu?.();
+            close?.();
+          },
+        },
+        command.id,
+      );
+    deps?.register?.(command.id, () => runCommand(command.id), {
+      menuItem: { id: command.id, groupKey: group, render },
+    });
+    return null;
+  }
+
+  function renderCommandMenuItems({ group, deps, close } = {}) {
+    const jsx = deps?.jsx;
+    if (typeof jsx !== "function") return [];
+    return Array.from(commands.values())
+      .filter((command) => commandGroups(command).includes(group))
+      .map((command) => jsx(CommandMenuItemHost, { command, deps, group, close }, command.id));
+  }
+
+  function mergeDataAttributes(base, extra) {
+    if (extra == null) return base;
+    if (base == null) return extra;
+    return { ...base, ...extra, style: { ...base.style, ...extra.style } };
+  }
+
+  function applyDecorators(props, decorators) {
+    let result;
+    for (const decorator of decorators) result = mergeDataAttributes(result, decorator(props));
+    return result;
+  }
+
+  function AppearanceRowHost({ row, deps, variant }) {
+    return row.render?.({ ...deps, variant, row }) ?? null;
+  }
+
+  function renderAppearanceRows({ deps, variant, section = "appearance" } = {}) {
+    const jsx = deps?.jsx;
+    if (typeof jsx !== "function") return [];
+    return CodexPlus.ui.settings.appearance.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));
+  }
+
+  function renderReviewBody({ props, deps, defaultBody } = {}) {
+    let body = defaultBody;
+    for (const wrapper of CodexPlus.ui.review.wrappers) {
+      body = wrapper({ ...props, mainReviewContent: body }, deps);
+    }
+    return body;
+  }
+
+  function renderErrorDetails({ jsx, error, componentStack } = {}) {
+    for (const decorator of CodexPlus.ui.errors.boundaryDecorators) {
+      const detail = decorator({ jsx, error, componentStack });
+      if (detail != null) return detail;
+    }
+    return null;
+  }
+
+  function registerStyle(pluginId, cssText) {
+    if (typeof document === "undefined") return null;
+    const id = `codex-plus-style-${safeId(pluginId)}`;
+    let element = styleElements.get(id) || document.getElementById(id);
+    if (!element) {
+      element = document.createElement("style");
+      element.id = id;
+      document.head?.appendChild(element);
+    }
+    element.textContent = cssText;
+    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);
+    }
+  }
+
+  function registerPlugin(definition) {
+    const plugin = definePlugin(definition);
+    plugins.set(plugin.id, plugin);
+    if (plugin.settings) plugin.settingsStore = defineSettings(plugin.id, plugin.settings);
+    for (const descriptor of plugin.patches || []) registerPatch({ ...descriptor, plugin: plugin.id });
+    for (const command of plugin.commands || []) registerCommand({ ...command, plugin: plugin.id });
+    if (plugin.styles) registerStyle(plugin.id, plugin.styles);
+    if (plugin.required || plugin.enabledByDefault) startPlugin(plugin.id);
+    return plugin;
+  }
+
+  function startPlugin(id) {
+    const plugin = plugins.get(id);
+    if (!plugin || startedPlugins.has(id)) return;
+    plugin.start?.(CodexPlus);
+    startedPlugins.add(id);
+  }
+
+  function stopPlugin(id) {
+    const plugin = plugins.get(id);
+    if (!plugin || !startedPlugins.has(id)) return;
+    plugin.stop?.(CodexPlus);
+    startedPlugins.delete(id);
+  }
+
+  const CodexPlus = {
+    definePlugin,
+    registerPlugin,
+    startPlugin,
+    stopPlugin,
+    plugins,
+    patches: { register: registerPatch, apply: applyPatchDescriptors, all: patchDescriptors },
+    modules: { registerHostModule, findByCode, findByProps, findComponentByCode, waitFor },
+    ui: {
+      commands: { renderMenuItems: renderCommandMenuItems, commandMetadata },
+      settings: { appearance: { rows: [], addRow(row) { this.rows.push(row); return row; }, renderRows: renderAppearanceRows } },
+      review: { wrappers: [], wrapBody(wrapper) { this.wrappers.push(wrapper); return wrapper; }, renderBody: renderReviewBody },
+      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); },
+      },
+      message: { userBubbleDecorators: [], decorateUserBubble(fn) { this.userBubbleDecorators.push(fn); return fn; }, userBubbleProps(props) { return applyDecorators(props, this.userBubbleDecorators); } },
+      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 },
+    },
+    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); } },
+    styles: { register: registerStyle, setRootVars },
+  };
+
+  globalObject.CodexPlus = CodexPlus;
+  globalObject.CodexPlusHost ||= {};
+  globalObject.CodexPlusHost.register = registerHostModule;
+
+  const pluginFiles = [
+    "plugins/aboutMetadata.js",
+    "plugins/nestedRepositories.js",
+    "plugins/diagnosticErrors.js",
+    "plugins/userBubbleColors.js",
+    "plugins/projectColors.js",
+    "plugins/sidebarNameBlur.js",
+  ];
+
+  if (typeof document !== "undefined") {
+    const base = new URL(".", document.currentScript?.src || globalObject.location?.href || "");
+    for (const file of pluginFiles) {
+      const script = document.createElement("script");
+      script.src = new URL(file, base).href;
+      script.async = false;
+      script.defer = false;
+      document.head?.appendChild(script);
+    }
+  }
+})();