🤖 feat: configurable API server bind host experiment

src/browser/components/AppLoader.auth.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
+import { GlobalWindow } from "happy-dom";
+import { cleanup, render } from "@testing-library/react";
+
+void mock.module("@/browser/contexts/API", () => ({
+  APIProvider: (props: { children: React.ReactNode }) => props.children,
+  useAPI: () => ({
+    api: null,
+    status: "auth_required" as const,
+    error: "Authentication required",
+    authenticate: () => undefined,
+    retry: () => undefined,
+  }),
+}));
+
+void mock.module("@/browser/components/AuthTokenModal", () => ({
+  AuthTokenModal: (props: { error?: string | null }) => (
+    <div data-testid="AuthTokenModalMock">{props.error ?? "no-error"}</div>
+  ),
+}));
+
+import { AppLoader } from "./AppLoader";
+
+describe("AppLoader", () => {
+  beforeEach(() => {
+    const dom = new GlobalWindow();
+    globalThis.window = dom as unknown as Window & typeof globalThis;
+    globalThis.document = globalThis.window.document;
+  });
+
+  afterEach(() => {
+    cleanup();
+    globalThis.window = undefined as unknown as Window & typeof globalThis;
+    globalThis.document = undefined as unknown as Document;
+  });
+
+  test("renders AuthTokenModal when API status is auth_required (before workspaces load)", () => {
+    const { getByTestId, queryByText } = render(<AppLoader />);
+
+    expect(queryByText("Loading workspaces...")).toBeNull();
+    expect(getByTestId("AuthTokenModalMock").textContent).toContain("Authentication required");
+  });
+});

src/browser/components/AppLoader.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import App from "../App";
+import { AuthTokenModal } from "./AuthTokenModal";
 import { LoadingScreen } from "./LoadingScreen";
 import { useWorkspaceStoreRaw } from "../stores/WorkspaceStore";
 import { useGitStatusStoreRaw } from "../stores/GitStatusStore";
@@ -42,7 +43,8 @@ export function AppLoader(props: AppLoaderProps) {
 function AppLoaderInner() {
   const workspaceContext = useWorkspaceContext();
   const projectContext = useProjectContext();
-  const { api } = useAPI();
+  const apiState = useAPI();
+  const api = apiState.api;
 
   // Get store instances
   const workspaceStore = useWorkspaceStoreRaw();
@@ -73,6 +75,11 @@ function AppLoaderInner() {
     api,
   ]);
 
+  // If we're in browser mode and auth is required, show the token prompt before any data loads.
+  if (apiState.status === "auth_required") {
+    return <AuthTokenModal isOpen={true} onSubmit={apiState.authenticate} error={apiState.error} />;
+  }
+
   // Show loading screen until both projects and workspaces are loaded and stores synced
   if (projectContext.loading || workspaceContext.loading || !storesSynced) {
     return <LoadingScreen />;