🤖 feat: add shared Coder app-proxy path parser

Audit:
- backendBaseUrl now re-exports the shared parser.
- RouterContext and App preserve the cached app-proxy prefix on browser history writes.
- main.tsx and terminal popouts resolve service-worker.js and terminal.html through document.baseURI with the cached prefix.
- terminal.html uses a relative terminal window module script so it stays under the proxy base path.
- Grep found no raw browser-runtime /api, /auth, /orpc, /service-worker.js, or /terminal.html literals outside stories after the changes.

Validation:
- bun test src/common/appProxyBasePath.test.ts src/browser/utils/backendBaseUrl.test.ts
- make typecheck

Author: ibetitsmike

src/browser/App.tsx

@@ -100,6 +100,7 @@ import { createProjectRefs } from "@/common/utils/multiProject";
 import { MULTI_PROJECT_SIDEBAR_SECTION_ID } from "@/common/constants/multiProject";
 import { WORKSPACE_DEFAULTS } from "@/constants/workspaceDefaults";
 import { isDesktopMode } from "@/browser/hooks/useDesktopTitlebar";
+import { prependInitialAppProxyBasePath } from "@/browser/utils/frontendBasePath";
 import { LoadingScreen } from "@/browser/components/LoadingScreen/LoadingScreen";
 
 function RootRouteShell(props: {
@@ -871,7 +872,10 @@ function AppInner() {
     const handlePopState = () => {
       // Re-push the correct URL from MemoryRouter, not the popped browser URL
       const { pathname, search, hash } = locationRef.current;
-      const correctUrl = `${window.location.origin}${pathname}${search}${hash}`;
+      const correctUrl = new URL(
+        prependInitialAppProxyBasePath(`${pathname}${search}${hash}`),
+        window.location.origin
+      );
       window.history.pushState({ mux: true }, "", correctUrl);
     };
 

src/browser/contexts/RouterContext.tsx

@@ -9,6 +9,10 @@ import {
 } from "react";
 import { MemoryRouter, useLocation, useNavigate, useSearchParams } from "react-router-dom";
 import { readPersistedState, updatePersistedState } from "@/browser/hooks/usePersistedState";
+import {
+  prependInitialAppProxyBasePath,
+  stripInitialAppProxyBasePathFromPathname,
+} from "@/browser/utils/frontendBasePath";
 import {
   LAST_VISITED_ROUTE_KEY,
   LAUNCH_BEHAVIOR_KEY,
@@ -177,7 +181,8 @@ function isRestorableRoute(route: unknown): route is string {
 
 /** Get the initial route, falling back to the compatibility root entrypoint when needed. */
 function getInitialRoute(): string {
-  const isStorybook = window.location.pathname.endsWith("iframe.html");
+  const routePathname = stripInitialAppProxyBasePathFromPathname(window.location.pathname);
+  const isStorybook = routePathname.endsWith("iframe.html");
   const isStandalone = isStandalonePwa();
   const navigationType = getStartupNavigationType();
   const launchBehavior = !isStandalone
@@ -195,7 +200,7 @@ function getInitialRoute(): string {
   // routes are special: fresh launches may ignore them, but explicit restore-style navigations
   // such as hard reload/back-forward should reopen the same chat.
   if (window.location.protocol !== "file:" && !isStorybook) {
-    const url = window.location.pathname + window.location.search;
+    const url = routePathname + window.location.search;
     // Only use URL if it's a valid route (starts with /, not just "/" or empty)
     if (url.startsWith("/") && url !== "/") {
       if (!url.startsWith("/workspace/")) {
@@ -254,13 +259,15 @@ function useUrlSync(): void {
       updatePersistedState(LAST_VISITED_ROUTE_KEY, url);
     }
 
+    const currentRoutePathname = stripInitialAppProxyBasePathFromPathname(window.location.pathname);
     // Skip in Storybook (conflicts with story navigation)
-    if (window.location.pathname.endsWith("iframe.html")) return;
+    if (currentRoutePathname.endsWith("iframe.html")) return;
     // Skip in Electron (file:// reloads always boot through index.html; we restore via localStorage above)
     if (window.location.protocol === "file:") return;
 
-    if (url !== window.location.pathname + window.location.search + window.location.hash) {
-      window.history.replaceState(null, "", url);
+    const browserUrl = prependInitialAppProxyBasePath(url);
+    if (browserUrl !== window.location.pathname + window.location.search + window.location.hash) {
+      window.history.replaceState(null, "", browserUrl);
     }
   }, [location.pathname, location.search, location.hash]);
 }

src/browser/main.tsx

@@ -5,6 +5,7 @@ import { installWindowOpenLocalhostProxyNormalization } from "@/browser/utils/wi
 import { AppLoader } from "@/browser/components/AppLoader/AppLoader";
 import { initTelemetry, trackAppStarted } from "@/common/telemetry";
 import { initTitlebarInsets } from "@/browser/hooks/useDesktopTitlebar";
+import { resolveBrowserAssetUrl } from "@/browser/utils/frontendBasePath";
 
 // Initialize telemetry on app startup
 try {
@@ -56,7 +57,7 @@ if ("serviceWorker" in navigator) {
   if (isHttpProtocol) {
     window.addEventListener("load", () => {
       navigator.serviceWorker
-        .register("/service-worker.js")
+        .register(resolveBrowserAssetUrl("service-worker.js"))
         .then((registration) => {
           console.log("Service Worker registered:", registration);
         })

src/browser/utils/backendBaseUrl.ts

@@ -10,25 +10,9 @@
  * prefix, so the frontend must include it when constructing URLs.
  */
 
-// Non-greedy so we match the *first* "/apps/<slug>" segment in nested routes.
-const APP_PROXY_BASE_PATH_RE = /(.*?\/apps\/[^/]+)(?:\/|$)/;
+import { getAppProxyBasePathFromPathname } from "@/common/appProxyBasePath";
 
-/**
- * Returns the path prefix up to and including `/apps/<slug>`.
- *
- * Examples:
- * - "/@u/ws/apps/mux/" -> "/@u/ws/apps/mux"
- * - "/@u/ws/apps/mux/settings" -> "/@u/ws/apps/mux"
- */
-export function getAppProxyBasePathFromPathname(pathname: string): string | null {
-  const match = APP_PROXY_BASE_PATH_RE.exec(pathname);
-  if (!match) {
-    return null;
-  }
-
-  const basePath = match[1];
-  return basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
-}
+export { getAppProxyBasePathFromPathname } from "@/common/appProxyBasePath";
 
 function stripTrailingSlashes(url: string): string {
   return url.replace(/\/+$/, "");

src/browser/utils/frontendBasePath.ts

@@ -0,0 +1,33 @@
+import { getAppProxyBasePathFromPathname, stripAppProxyBasePath } from "@/common/appProxyBasePath";
+
+export const INITIAL_APP_PROXY_BASE_PATH =
+  typeof window === "undefined" ? null : getAppProxyBasePathFromPathname(window.location.pathname);
+
+function normalizeRootRelativePath(pathname: string): string {
+  return pathname.startsWith("/") ? pathname : `/${pathname}`;
+}
+
+export function stripInitialAppProxyBasePathFromPathname(pathname: string): string {
+  if (!INITIAL_APP_PROXY_BASE_PATH) {
+    return pathname;
+  }
+
+  const strippedPathname = stripAppProxyBasePath(pathname);
+  return strippedPathname.basePath === INITIAL_APP_PROXY_BASE_PATH
+    ? strippedPathname.routePathname
+    : pathname;
+}
+
+export function prependInitialAppProxyBasePath(pathname: string): string {
+  const rootRelativePathname = normalizeRootRelativePath(pathname);
+  return INITIAL_APP_PROXY_BASE_PATH
+    ? `${INITIAL_APP_PROXY_BASE_PATH}${rootRelativePathname}`
+    : rootRelativePathname;
+}
+
+export function resolveBrowserAssetUrl(pathname: string): string {
+  const proxiedPathname = prependInitialAppProxyBasePath(pathname);
+  return typeof document === "undefined"
+    ? proxiedPathname
+    : new URL(proxiedPathname, document.baseURI).toString();
+}

src/browser/utils/terminal.ts

@@ -8,6 +8,7 @@
 
 import type { RouterClient } from "@orpc/server";
 import type { AppRouter } from "@/node/orpc/router";
+import { resolveBrowserAssetUrl } from "@/browser/utils/frontendBasePath";
 
 type APIClient = RouterClient<AppRouter>;
 
@@ -37,8 +38,9 @@ export function openTerminalPopout(api: APIClient, workspaceId: string, sessionI
     // In browser mode, we must open the window client-side
     // The backend cannot open a window on the user's client
     const params = new URLSearchParams({ workspaceId, sessionId });
+    const terminalUrl = resolveBrowserAssetUrl(`terminal.html?${params.toString()}`);
     window.open(
-      `/terminal.html?${params.toString()}`,
+      terminalUrl,
       `terminal-${workspaceId}-${Date.now()}`,
       "width=1000,height=600,popup=yes"
     );

src/common/appProxyBasePath.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test } from "bun:test";
+
+import { getAppProxyBasePathFromPathname, stripAppProxyBasePath } from "./appProxyBasePath";
+
+describe("appProxyBasePath", () => {
+  test("detects the app proxy base path", () => {
+    expect(getAppProxyBasePathFromPathname("/@u/ws/apps/mux/")).toBe("/@u/ws/apps/mux");
+    expect(getAppProxyBasePathFromPathname("/@u/ws/apps/mux/settings/general")).toBe(
+      "/@u/ws/apps/mux"
+    );
+    expect(getAppProxyBasePathFromPathname("/@u/ws.agent/apps/mux/")).toBe("/@u/ws.agent/apps/mux");
+    expect(getAppProxyBasePathFromPathname("/@u/ws/agent/apps/mux/foo")).toBe(
+      "/@u/ws/agent/apps/mux"
+    );
+    expect(getAppProxyBasePathFromPathname("/@u/ws/apps/mux")).toBe("/@u/ws/apps/mux");
+  });
+
+  test("rejects root routes and unanchored app segments", () => {
+    expect(getAppProxyBasePathFromPathname("/projects/apps/other")).toBeNull();
+    expect(getAppProxyBasePathFromPathname("/")).toBeNull();
+    expect(getAppProxyBasePathFromPathname("/settings")).toBeNull();
+    expect(getAppProxyBasePathFromPathname("//bad.example/@u/ws/apps/mux")).toBeNull();
+  });
+
+  test("strips the app proxy base path from prefix-only requests", () => {
+    expect(stripAppProxyBasePath("/@u/ws/apps/mux/")).toEqual({
+      basePath: "/@u/ws/apps/mux",
+      routePathname: "/",
+    });
+    expect(stripAppProxyBasePath("/@u/ws/apps/mux")).toEqual({
+      basePath: "/@u/ws/apps/mux",
+      routePathname: "/",
+    });
+  });
+
+  test("strips the app proxy base path and preserves the route suffix", () => {
+    expect(stripAppProxyBasePath("/@u/ws/apps/mux/settings/general")).toEqual({
+      basePath: "/@u/ws/apps/mux",
+      routePathname: "/settings/general",
+    });
+    expect(stripAppProxyBasePath("/@u/ws.agent/apps/mux/")).toEqual({
+      basePath: "/@u/ws.agent/apps/mux",
+      routePathname: "/",
+    });
+    expect(stripAppProxyBasePath("/@u/ws/agent/apps/mux/foo")).toEqual({
+      basePath: "/@u/ws/agent/apps/mux",
+      routePathname: "/foo",
+    });
+  });
+
+  test("returns the original pathname when no app proxy base path is present", () => {
+    expect(stripAppProxyBasePath("/projects/apps/other")).toEqual({
+      basePath: null,
+      routePathname: "/projects/apps/other",
+    });
+    expect(stripAppProxyBasePath("/")).toEqual({ basePath: null, routePathname: "/" });
+    expect(stripAppProxyBasePath("/settings")).toEqual({
+      basePath: null,
+      routePathname: "/settings",
+    });
+    expect(stripAppProxyBasePath("//bad.example/@u/ws/apps/mux")).toEqual({
+      basePath: null,
+      routePathname: "//bad.example/@u/ws/apps/mux",
+    });
+  });
+});

src/common/appProxyBasePath.ts

@@ -0,0 +1,38 @@
+const APP_PROXY_BASE_PATH_RE = /^\/@[^/]+\/[^/]+(?:\/[^/]+)?\/apps\/[^/]+(?:\/|$)/;
+
+function hasUnsafeLeadingDoubleSlash(pathname: string): boolean {
+  return pathname.startsWith("//");
+}
+
+function stripTrailingSlash(pathname: string): string {
+  return pathname.length > 1 && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname;
+}
+
+export function getAppProxyBasePathFromPathname(pathname: string): string | null {
+  if (hasUnsafeLeadingDoubleSlash(pathname)) {
+    return null;
+  }
+
+  const match = APP_PROXY_BASE_PATH_RE.exec(pathname);
+  if (!match) {
+    return null;
+  }
+
+  return stripTrailingSlash(match[0]);
+}
+
+export function stripAppProxyBasePath(pathname: string): {
+  basePath: string | null;
+  routePathname: string;
+} {
+  const basePath = getAppProxyBasePathFromPathname(pathname);
+  if (!basePath) {
+    return { basePath: null, routePathname: pathname };
+  }
+
+  const routePathname = pathname.slice(basePath.length);
+  return {
+    basePath,
+    routePathname: routePathname.length === 0 ? "/" : routePathname,
+  };
+}

terminal.html

@@ -19,6 +19,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/browser/terminal-window.tsx"></script>
+    <script type="module" src="src/browser/terminal-window.tsx"></script>
   </body>
 </html>