codex-webstrapper 0.1.0

package/src/bridge-shim.js

@@ -0,0 +1,669 @@
+(() => {
+  const BRIDGE_PATH = "/__webstrapper/bridge";
+  const RECONNECT_MS = 1000;
+
+  const queuedEnvelopes = [];
+  const workerSubscribers = new Map();
+  const mainMessageHistory = [];
+  const CONTEXT_MENU_ROOT_ID = "__codex-webstrap-context-menu-root";
+  const CONTEXT_MENU_STYLE_ID = "__codex-webstrap-context-menu-style";
+
+  let ws = null;
+  let connected = false;
+  let reconnectTimer = null;
+  let activeContextMenu = null;
+  let lastContextMenuPoint = {
+    x: Math.floor(window.innerWidth / 2),
+    y: Math.floor(window.innerHeight / 2)
+  };
+
+  function isSentryIpcUrl(input) {
+    if (typeof input === "string") {
+      return input.startsWith("sentry-ipc://");
+    }
+    if (input && typeof input.url === "string") {
+      return input.url.startsWith("sentry-ipc://");
+    }
+    return false;
+  }
+
+  function resolveUrlString(input) {
+    if (typeof input === "string") {
+      return input;
+    }
+    if (input && typeof input.url === "string") {
+      return input.url;
+    }
+    return "";
+  }
+
+  function isStatsigRegistryUrl(input) {
+    const raw = resolveUrlString(input);
+    if (!raw) {
+      return false;
+    }
+    try {
+      const parsed = new URL(raw, window.location.href);
+      return parsed.hostname === "ab.chatgpt.com" && parsed.pathname.startsWith("/v1/rgstr");
+    } catch {
+      return false;
+    }
+  }
+
+  function installBrowserCompatibilityShims() {
+    if (typeof window.fetch === "function") {
+      const originalFetch = window.fetch.bind(window);
+      window.fetch = (input, init) => {
+        if (isSentryIpcUrl(input)) {
+          return Promise.resolve(new Response(null, { status: 204 }));
+        }
+        if (isStatsigRegistryUrl(input)) {
+          return Promise.resolve(
+            new Response(
+              JSON.stringify({
+                has_updates: false,
+                feature_gates: {},
+                dynamic_configs: {},
+                layer_configs: {},
+                time: Date.now()
+              }),
+              {
+                status: 200,
+                headers: {
+                  "content-type": "application/json"
+                }
+              }
+            )
+          );
+        }
+        return originalFetch(input, init);
+      };
+    }
+
+    if (typeof navigator.sendBeacon === "function") {
+      const originalSendBeacon = navigator.sendBeacon.bind(navigator);
+      navigator.sendBeacon = (url, data) => {
+        if (typeof url === "string" && url.startsWith("sentry-ipc://")) {
+          return true;
+        }
+        if (isStatsigRegistryUrl(url)) {
+          return true;
+        }
+        return originalSendBeacon(url, data);
+      };
+    }
+
+    const fallbackCopyText = (text) => {
+      if (typeof document === "undefined" || !document.body) {
+        return false;
+      }
+      const value = typeof text === "string" ? text : String(text ?? "");
+      const textarea = document.createElement("textarea");
+      textarea.value = value;
+      textarea.setAttribute("readonly", "true");
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      textarea.style.pointerEvents = "none";
+      textarea.style.left = "-9999px";
+      textarea.style.top = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      textarea.setSelectionRange(0, textarea.value.length);
+
+      let copied = false;
+      try {
+        copied = document.execCommand("copy");
+      } catch {
+        copied = false;
+      }
+      textarea.remove();
+      return copied;
+    };
+
+    const clipboard = navigator.clipboard;
+    if (clipboard && typeof clipboard.writeText === "function") {
+      const originalWriteText = clipboard.writeText.bind(clipboard);
+      try {
+        clipboard.writeText = async (text) => {
+          try {
+            return await originalWriteText(text);
+          } catch (error) {
+            if (fallbackCopyText(text)) {
+              return;
+            }
+            throw error;
+          }
+        };
+      } catch {
+        // Ignore immutable clipboard implementations.
+      }
+    }
+
+    if (clipboard && typeof clipboard.write === "function") {
+      const originalWrite = clipboard.write.bind(clipboard);
+      try {
+        clipboard.write = async (items) => {
+          try {
+            return await originalWrite(items);
+          } catch (error) {
+            try {
+              const firstItem = Array.isArray(items) ? items[0] : null;
+              if (!firstItem || typeof firstItem.getType !== "function") {
+                throw error;
+              }
+              const blob = await firstItem.getType("text/plain");
+              const text = await blob.text();
+              if (fallbackCopyText(text)) {
+                return;
+              }
+            } catch {
+              // Fall through to throw the original clipboard error.
+            }
+            throw error;
+          }
+        };
+      } catch {
+        // Ignore immutable clipboard implementations.
+      }
+    }
+
+    if (typeof console.error === "function") {
+      const originalConsoleError = console.error.bind(console);
+      console.error = (...args) => {
+        const text = args
+          .map((arg) => {
+            if (typeof arg === "string") {
+              return arg;
+            }
+            if (arg && typeof arg.message === "string") {
+              return arg.message;
+            }
+            return "";
+          })
+          .join(" ");
+
+        if (text.includes("Sentry SDK failed to establish connection with the Electron main process")) {
+          return;
+        }
+        if (text.includes("sentry-ipc://")) {
+          return;
+        }
+        if (text.includes("ab.chatgpt.com/v1/rgstr")) {
+          return;
+        }
+        if (text.includes("`DialogContent` requires a `DialogTitle`")) {
+          return;
+        }
+        originalConsoleError(...args);
+      };
+    }
+
+    if (typeof console.warn === "function") {
+      const originalConsoleWarn = console.warn.bind(console);
+      console.warn = (...args) => {
+        const text = args
+          .map((arg) => {
+            if (typeof arg === "string") {
+              return arg;
+            }
+            if (arg && typeof arg.message === "string") {
+              return arg.message;
+            }
+            return "";
+          })
+          .join(" ");
+
+        if (text.includes("Missing `Description` or `aria-describedby={undefined}` for {DialogContent}")) {
+          return;
+        }
+        originalConsoleWarn(...args);
+      };
+    }
+  }
+
+  function rememberContextMenuPosition(event) {
+    if (!event || !Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) {
+      return;
+    }
+    lastContextMenuPoint = {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+
+  function ensureContextMenuStyles() {
+    if (document.getElementById(CONTEXT_MENU_STYLE_ID)) {
+      return;
+    }
+
+    const style = document.createElement("style");
+    style.id = CONTEXT_MENU_STYLE_ID;
+    style.textContent = `
+      #${CONTEXT_MENU_ROOT_ID} {
+        position: fixed;
+        inset: 0;
+        z-index: 2147483647;
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-menu {
+        position: fixed;
+        min-width: 220px;
+        max-width: 320px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 12px;
+        background: rgba(26, 27, 31, 0.97);
+        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
+        padding: 6px;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        color: #f4f4f5;
+        font-size: 14px;
+        line-height: 1.35;
+        backdrop-filter: blur(16px);
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-item {
+        position: relative;
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-item-btn {
+        width: 100%;
+        appearance: none;
+        border: 0;
+        border-radius: 8px;
+        background: transparent;
+        color: inherit;
+        padding: 9px 10px;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        cursor: pointer;
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-item-btn:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-item-btn:disabled {
+        opacity: 0.45;
+        cursor: default;
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-separator {
+        height: 1px;
+        margin: 5px 2px;
+        background: rgba(255, 255, 255, 0.14);
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-item--submenu > .cw-menu {
+        display: none;
+        position: absolute;
+        top: -6px;
+        left: calc(100% + 4px);
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-item--submenu:hover > .cw-menu,
+      #${CONTEXT_MENU_ROOT_ID} .cw-item--submenu:focus-within > .cw-menu {
+        display: flex;
+      }
+
+      #${CONTEXT_MENU_ROOT_ID} .cw-submenu-arrow {
+        opacity: 0.7;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  function normalizeContextMenuItems(items) {
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return items.filter((item) => item && typeof item === "object");
+  }
+
+  function contextMenuAnchor() {
+    const margin = 8;
+    const x = Number.isFinite(lastContextMenuPoint.x) ? lastContextMenuPoint.x : window.innerWidth / 2;
+    const y = Number.isFinite(lastContextMenuPoint.y) ? lastContextMenuPoint.y : window.innerHeight / 2;
+    return {
+      x: Math.min(Math.max(margin, x), Math.max(margin, window.innerWidth - margin)),
+      y: Math.min(Math.max(margin, y), Math.max(margin, window.innerHeight - margin))
+    };
+  }
+
+  function closeContextMenu(result) {
+    if (!activeContextMenu) {
+      return;
+    }
+
+    const current = activeContextMenu;
+    activeContextMenu = null;
+
+    window.removeEventListener("keydown", current.onKeyDown, true);
+    window.removeEventListener("resize", current.onWindowChange, true);
+
+    current.root.remove();
+    current.resolve(result ?? null);
+  }
+
+  function positionContextMenu(menu, anchor) {
+    const margin = 8;
+    const rect = menu.getBoundingClientRect();
+    const maxLeft = Math.max(margin, window.innerWidth - rect.width - margin);
+    const maxTop = Math.max(margin, window.innerHeight - rect.height - margin);
+    const left = Math.min(Math.max(margin, anchor.x), maxLeft);
+    const top = Math.min(Math.max(margin, anchor.y), maxTop);
+    menu.style.left = `${Math.round(left)}px`;
+    menu.style.top = `${Math.round(top)}px`;
+  }
+
+  function buildContextMenu(items, onSelect, nested = false) {
+    const menu = document.createElement("div");
+    menu.className = "cw-menu";
+    menu.setAttribute("role", "menu");
+    if (!nested) {
+      menu.tabIndex = -1;
+    }
+
+    items.forEach((item, index) => {
+      if (item.type === "separator") {
+        const separator = document.createElement("div");
+        separator.className = "cw-separator";
+        separator.setAttribute("role", "separator");
+        separator.dataset.index = String(index);
+        menu.appendChild(separator);
+        return;
+      }
+
+      const container = document.createElement("div");
+      container.className = "cw-item";
+      container.dataset.itemId = String(item.id ?? "");
+
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "cw-item-btn";
+      button.setAttribute("role", "menuitem");
+      button.textContent = String(item.label ?? item.nativeLabel ?? item.id ?? "Menu item");
+
+      const submenuItems = normalizeContextMenuItems(item.submenu);
+      if (submenuItems.length > 0) {
+        container.classList.add("cw-item--submenu");
+        const arrow = document.createElement("span");
+        arrow.className = "cw-submenu-arrow";
+        arrow.textContent = ">";
+        button.appendChild(arrow);
+        container.appendChild(button);
+        container.appendChild(buildContextMenu(submenuItems, onSelect, true));
+      } else {
+        const enabled = item.enabled !== false;
+        if (!enabled) {
+          button.disabled = true;
+        } else if (item.id) {
+          button.addEventListener("click", (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onSelect(String(item.id));
+          });
+        }
+        container.appendChild(button);
+      }
+
+      menu.appendChild(container);
+    });
+
+    return menu;
+  }
+
+  function showBrowserContextMenu(items) {
+    const normalizedItems = normalizeContextMenuItems(items);
+    if (normalizedItems.length === 0) {
+      return Promise.resolve(null);
+    }
+
+    ensureContextMenuStyles();
+    closeContextMenu(null);
+
+    return new Promise((resolve) => {
+      const root = document.createElement("div");
+      root.id = CONTEXT_MENU_ROOT_ID;
+
+      const menu = buildContextMenu(normalizedItems, (id) => {
+        closeContextMenu({ id });
+      });
+      root.appendChild(menu);
+
+      const onRootMouseDown = (event) => {
+        if (event.target === root && event.button === 0) {
+          event.preventDefault();
+          closeContextMenu(null);
+        }
+      };
+
+      const onKeyDown = (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeContextMenu(null);
+        }
+      };
+
+      const onWindowChange = () => {
+        closeContextMenu(null);
+      };
+
+      root.addEventListener("mousedown", onRootMouseDown);
+      root.addEventListener("contextmenu", (event) => {
+        event.preventDefault();
+      });
+
+      activeContextMenu = {
+        root,
+        resolve,
+        onKeyDown,
+        onWindowChange
+      };
+
+      window.addEventListener("keydown", onKeyDown, true);
+      window.addEventListener("resize", onWindowChange, true);
+
+      document.body.appendChild(root);
+      const anchor = contextMenuAnchor();
+      positionContextMenu(menu, anchor);
+      menu.focus();
+    });
+  }
+
+  function bridgeUrl() {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    return `${protocol}//${window.location.host}${BRIDGE_PATH}`;
+  }
+
+  function scheduleReconnect() {
+    if (reconnectTimer) {
+      return;
+    }
+    reconnectTimer = window.setTimeout(() => {
+      reconnectTimer = null;
+      connect();
+    }, RECONNECT_MS);
+  }
+
+  function sendEnvelope(envelope) {
+    if (connected && ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(envelope));
+      return;
+    }
+    queuedEnvelopes.push(envelope);
+  }
+
+  function flushQueue() {
+    while (queuedEnvelopes.length > 0 && connected && ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(queuedEnvelopes.shift()));
+    }
+  }
+
+  function handleMainMessage(payload) {
+    const record = {
+      ts: Date.now(),
+      type: payload?.type || null,
+      payload
+    };
+    mainMessageHistory.push(record);
+    if (mainMessageHistory.length > 200) {
+      mainMessageHistory.shift();
+    }
+    window.__codexWebstrapMainMessages = mainMessageHistory;
+
+    try {
+      window.dispatchEvent(new MessageEvent("message", { data: payload }));
+    } catch (error) {
+      console.error("codex-webstrap main-message dispatch failed", {
+        type: payload?.type || null,
+        error: String(error)
+      });
+      throw error;
+    }
+  }
+
+  function handleWorkerEvent(workerId, payload) {
+    const subscribers = workerSubscribers.get(workerId);
+    if (!subscribers) {
+      return;
+    }
+    subscribers.forEach((callback) => {
+      try {
+        callback(payload);
+      } catch (error) {
+        console.warn("worker subscriber callback failed", error);
+      }
+    });
+  }
+
+  function handleBridgeError(message) {
+    window.__codexWebstrapLastBridgeError = message;
+    const printable = {
+      code: message?.code || null,
+      message: message?.message || null
+    };
+    console.warn("codex-webstrap bridge error", printable);
+  }
+
+  function connect() {
+    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+
+    ws = new WebSocket(bridgeUrl());
+
+    ws.addEventListener("open", () => {
+      connected = true;
+      flushQueue();
+    });
+
+    ws.addEventListener("close", () => {
+      connected = false;
+      scheduleReconnect();
+    });
+
+    ws.addEventListener("error", () => {
+      connected = false;
+      scheduleReconnect();
+    });
+
+    ws.addEventListener("message", (event) => {
+      let envelope;
+      try {
+        envelope = JSON.parse(String(event.data));
+      } catch {
+        return;
+      }
+
+      switch (envelope?.type) {
+        case "bridge-ready":
+          return;
+        case "main-message":
+          handleMainMessage(envelope.payload);
+          return;
+        case "worker-event":
+          handleWorkerEvent(envelope.workerId, envelope.payload);
+          return;
+        case "bridge-error":
+          handleBridgeError(envelope);
+          return;
+        default:
+          return;
+      }
+    });
+  }
+
+  function sendMessageFromView(payload) {
+    sendEnvelope({
+      type: "view-message",
+      payload
+    });
+    return Promise.resolve();
+  }
+
+  function sendWorkerMessageFromView(workerId, payload) {
+    sendEnvelope({
+      type: "worker-message",
+      workerId,
+      payload
+    });
+    return Promise.resolve();
+  }
+
+  function subscribeToWorkerMessages(workerId, callback) {
+    let subscribers = workerSubscribers.get(workerId);
+    if (!subscribers) {
+      subscribers = new Set();
+      workerSubscribers.set(workerId, subscribers);
+    }
+    subscribers.add(callback);
+
+    return () => {
+      const existing = workerSubscribers.get(workerId);
+      if (!existing) {
+        return;
+      }
+      existing.delete(callback);
+      if (existing.size === 0) {
+        workerSubscribers.delete(workerId);
+      }
+    };
+  }
+
+  const electronBridge = {
+    windowType: "electron",
+    sendMessageFromView,
+    sendWorkerMessageFromView,
+    subscribeToWorkerMessages,
+    showContextMenu: async (payload) => {
+      return showBrowserContextMenu(payload);
+    },
+    triggerSentryTestError: async () => {
+      await sendMessageFromView({ type: "trigger-sentry-test" });
+    },
+    getPathForFile: (file) => {
+      if (file && typeof file.path === "string") {
+        return file.path;
+      }
+      return null;
+    },
+    getSentryInitOptions: () => ({
+      dsn: null,
+      codexAppSessionId: null
+    }),
+    getAppSessionId: () => null,
+    getBuildFlavor: () => "prod"
+  };
+
+  window.codexWindowType = "electron";
+  window.electronBridge = electronBridge;
+  installBrowserCompatibilityShims();
+  window.addEventListener("contextmenu", rememberContextMenuPosition, true);
+
+  connect();
+})();