codex-webstrapper 0.9.0 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-webstrapper",
-  "version": "0.9.0",
+  "version": "0.9.7",
   "type": "module",
   "description": "Web wrapper for Codex desktop assets with bridge + token auth",
   "license": "MIT",

package/src/assets.mjs

@@ -151,13 +151,24 @@ export async function ensureExtractedAssets({
 }
 
 export async function buildPatchedIndexHtml(indexPath) {
-  const html = await fsp.readFile(indexPath, "utf8");
+  let html = await fsp.readFile(indexPath, "utf8");
   const shimTag = '<script src="/__webstrapper/shim.js"></script>';
 
   if (html.includes(shimTag)) {
     return html;
   }
 
+  // Replace or inject mobile viewport meta — the Electron app's default
+  // viewport lacks maximum-scale and user-scalable=no, causing iOS zoom issues
+  const viewportMeta =
+    '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">';
+  const existingViewport = html.match(/<meta\s+name=["']viewport["'][^>]*>/i);
+  if (existingViewport) {
+    html = html.replace(existingViewport[0], viewportMeta);
+  } else if (html.includes("</head>")) {
+    html = html.replace("</head>", `  ${viewportMeta}\n</head>`);
+  }
+
   if (html.includes("</head>")) {
     return html.replace("</head>", `  ${shimTag}\n</head>`);
   }

package/src/auth.mjs

@@ -126,10 +126,29 @@ export function createAuthController({ token, sessionStore, cookieName = SESSION
     );
   }
 
-  function requireAuth(req, res) {
+  function requireAuth(req, res, parsedUrl) {
     if (hasValidSession(req)) {
       return true;
     }
+
+    // Auto-authenticate if a valid token is in the URL query string.
+    // This lets iOS "Add to Home Screen" bookmarks work — the saved URL
+    // includes ?token=X, so each launch re-authenticates automatically.
+    if (parsedUrl) {
+      const provided = parsedUrl.searchParams.get("token") || "";
+      if (provided && provided === token) {
+        const session = sessionStore.createSession();
+        const cookie = serializeCookie(cookieName, session.id, {
+          maxAgeSeconds: Math.floor(sessionStore.ttlMs / 1000),
+          httpOnly: true,
+          sameSite: "Lax",
+          path: "/"
+        });
+        res.setHeader("set-cookie", cookie);
+        return true;
+      }
+    }
+
     rejectUnauthorized(res);
     return false;
   }
@@ -153,7 +172,7 @@ export function createAuthController({ token, sessionStore, cookieName = SESSION
 
     res.statusCode = 302;
     res.setHeader("set-cookie", cookie);
-    res.setHeader("location", "/");
+    res.setHeader("location", `/?token=${encodeURIComponent(provided)}`);
     res.end();
   }
 

package/src/bridge-shim.js

@@ -7,6 +7,7 @@
   const mainMessageHistory = [];
   const CONTEXT_MENU_ROOT_ID = "__codex-webstrap-context-menu-root";
   const CONTEXT_MENU_STYLE_ID = "__codex-webstrap-context-menu-style";
+  const MOBILE_STYLE_ID = "__codex-webstrap-mobile-style";
 
   let ws = null;
   let connected = false;
@@ -317,6 +318,241 @@
     document.head.appendChild(style);
   }
 
+  // ---------------------------------------------------------------------------
+  // Mobile-responsive CSS overrides
+  // ---------------------------------------------------------------------------
+
+  function ensureMobileStyles() {
+    if (document.getElementById(MOBILE_STYLE_ID)) {
+      return;
+    }
+
+    const style = document.createElement("style");
+    style.id = MOBILE_STYLE_ID;
+    style.textContent = `
+      /* ==== Tablet & small screen fixes (max-width: 768px) ==== */
+      @media (max-width: 768px) {
+
+        /* Viewport stabilization */
+        html, body {
+          overflow-x: hidden !important;
+          -webkit-text-size-adjust: 100% !important;
+        }
+
+        /* Header — constrain to viewport */
+        .h-toolbar {
+          max-width: 100vw !important;
+        }
+
+        .h-toolbar button {
+          flex-shrink: 1 !important;
+          min-width: 0 !important;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
+          white-space: nowrap !important;
+        }
+
+        /* Prevent iOS auto-zoom on focus (triggers when font-size < 16px) */
+        input, textarea, select {
+          font-size: 16px !important;
+          max-width: 100% !important;
+          box-sizing: border-box !important;
+        }
+
+        [contenteditable="true"] {
+          max-width: 100% !important;
+          box-sizing: border-box !important;
+        }
+
+        [contenteditable="true"]:focus {
+          font-size: 16px !important;
+          scroll-margin-bottom: 20px;
+        }
+
+        /* Terminal — constrain height */
+        [class*="terminal"],
+        [class*="Terminal"] {
+          max-height: 40vh !important;
+        }
+
+        /* Dialogs/modals — fit screen */
+        [role="dialog"] {
+          max-width: calc(100vw - 16px) !important;
+          max-height: calc(100dvh - 32px) !important;
+          overflow-y: auto !important;
+          margin: 8px !important;
+        }
+
+        /* Context menu — responsive sizing */
+        #${CONTEXT_MENU_ROOT_ID} .cw-menu {
+          min-width: min(220px, calc(100vw - 24px)) !important;
+          max-width: calc(100vw - 24px) !important;
+        }
+
+        #${CONTEXT_MENU_ROOT_ID} .cw-item--submenu > .cw-menu {
+          position: fixed !important;
+          left: 12px !important;
+          right: 12px !important;
+          top: auto !important;
+          width: auto !important;
+        }
+
+        /* Overflow prevention */
+        pre, code {
+          overflow-x: auto !important;
+          max-width: 100% !important;
+          word-break: break-word !important;
+        }
+      }
+
+      /* ==== Phone layout (max-width: 600px) ==== */
+      @media (max-width: 600px) {
+
+        /* Safe area support for notched devices */
+        body {
+          padding-top: env(safe-area-inset-top) !important;
+          padding-bottom: env(safe-area-inset-bottom) !important;
+          padding-left: env(safe-area-inset-left) !important;
+          padding-right: env(safe-area-inset-right) !important;
+        }
+
+        /* CRITICAL: Collapse sidebar token so main content gets full width.
+           The Codex app uses --spacing-token-sidebar with a 240px clamp minimum
+           which is far too wide on phones. Setting it to 0 makes the sidebar an
+           overlay instead of pushing the main content off-screen. */
+        :root {
+          --spacing-token-sidebar: 0px !important;
+        }
+
+        /* Sidebar becomes full-screen overlay when open.
+           When collapsed the app sets opacity-0 but the element still covers
+           the screen (translate is 0 because we zeroed the token). We must
+           disable pointer events so it doesn't block taps on main content. */
+        .window-fx-sidebar-surface,
+        .w-token-sidebar {
+          width: 85vw !important;
+          max-width: 320px !important;
+          z-index: 50 !important;
+          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
+          background-color: rgb(24, 24, 24) !important;
+          pointer-events: none !important;
+          transition: opacity 0.3s ease, pointer-events 0s linear 0.3s !important;
+        }
+
+        /* Re-enable pointer events only when sidebar is visible (open) */
+        .window-fx-sidebar-surface.opacity-100,
+        .w-token-sidebar.opacity-100 {
+          pointer-events: auto !important;
+          transition: opacity 0.3s ease, pointer-events 0s linear 0s !important;
+        }
+
+        /* Main content takes full width */
+        .main-surface,
+        .left-token-sidebar {
+          left: 0 !important;
+          width: 100vw !important;
+        }
+
+        /* Header toolbar — swipeable so all buttons remain accessible.
+           When the sidebar is collapsed the portal area expands and can
+           push right-side buttons off-screen; scrolling keeps them
+           reachable via horizontal swipe. */
+        .h-toolbar {
+          overflow-x: auto !important;
+          overflow-y: hidden !important;
+          -webkit-overflow-scrolling: touch !important;
+          scrollbar-width: none !important;
+        }
+        .h-toolbar::-webkit-scrollbar {
+          display: none !important;
+        }
+
+        /* Prevent header-left from consuming more than half the bar.
+           The app sets an inline min-width via CSS vars that over-allocates
+           space for the portal area — override it so buttons fit. */
+        .app-header-left {
+          width: auto !important;
+          min-width: 0 !important;
+          max-width: 50vw !important;
+          flex-shrink: 0 !important;
+          padding-left: 4px !important;
+          padding-right: 0 !important;
+        }
+
+        /* Collapse the empty portal gap when sidebar is hidden */
+        .app-header-left-portal {
+          gap: 0 !important;
+          padding-right: 2px !important;
+        }
+
+        /* Keep right-side buttons from shrinking below usable size */
+        .h-toolbar button {
+          flex-shrink: 0 !important;
+        }
+
+        /* Use stable viewport height */
+        #root {
+          height: calc(var(--cw-vh, 1vh) * 100) !important;
+          height: 100dvh !important;
+        }
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Viewport height stabilizer (mobile keyboard / chrome bar)
+  // ---------------------------------------------------------------------------
+
+  function installViewportStabilizer() {
+    if (!window.visualViewport) {
+      return;
+    }
+
+    const update = () => {
+      document.documentElement.style.setProperty(
+        "--cw-vh",
+        window.visualViewport.height * 0.01 + "px"
+      );
+    };
+
+    window.visualViewport.addEventListener("resize", update);
+    update();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Auto-collapse sidebar on mobile first load
+  // ---------------------------------------------------------------------------
+
+  function autoCollapseSidebarOnMobile() {
+    if (window.innerWidth > 600) {
+      return;
+    }
+
+    // The React app restores sidebar state from storage after mount.
+    // We poll briefly after DOM ready to catch the sidebar in its open state.
+    function tryCollapse(attempts) {
+      if (attempts <= 0) {
+        return;
+      }
+      const btn = document.querySelector('button[aria-label="Hide sidebar"]');
+      if (btn) {
+        btn.click();
+        return;
+      }
+      setTimeout(() => tryCollapse(attempts - 1), 200);
+    }
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => {
+        // Give React time to mount and restore sidebar state
+        setTimeout(() => tryCollapse(15), 500);
+      });
+    } else {
+      setTimeout(() => tryCollapse(15), 500);
+    }
+  }
+
   function normalizeContextMenuItems(items) {
     if (!Array.isArray(items)) {
       return [];
@@ -344,6 +580,7 @@
 
     window.removeEventListener("keydown", current.onKeyDown, true);
     window.removeEventListener("resize", current.onWindowChange, true);
+    clearTimeout(current.resizeDebounce);
 
     current.root.remove();
     current.resolve(result ?? null);
@@ -449,8 +686,10 @@
         }
       };
 
+      let resizeDebounce = null;
       const onWindowChange = () => {
-        closeContextMenu(null);
+        clearTimeout(resizeDebounce);
+        resizeDebounce = setTimeout(() => closeContextMenu(null), 300);
       };
 
       root.addEventListener("mousedown", onRootMouseDown);
@@ -462,7 +701,8 @@
         root,
         resolve,
         onKeyDown,
-        onWindowChange
+        onWindowChange,
+        get resizeDebounce() { return resizeDebounce; }
       };
 
       window.addEventListener("keydown", onKeyDown, true);
@@ -675,6 +915,9 @@
   window.codexWindowType = "electron";
   window.electronBridge = electronBridge;
   installBrowserCompatibilityShims();
+  ensureMobileStyles();
+  installViewportStabilizer();
+  autoCollapseSidebarOnMobile();
   window.addEventListener("contextmenu", rememberContextMenuPosition, true);
 
   connect();

package/src/server.mjs

@@ -216,7 +216,7 @@ async function main() {
         return;
       }
 
-      if (!auth.requireAuth(req, res)) {
+      if (!auth.requireAuth(req, res, url)) {
         return;
       }