chore(web): remove ApiTokenModal and localStorage token handling (#240)

Closes #162

## Summary

- Deletes `ApiTokenModal` component and its test suite — no longer
needed now that the renderer communicates over IPC instead of HTTP (no
bearer token required)
- Removes `apiToken` localStorage read/write, the 401-retry queue, and
all `Authorization: Bearer` header plumbing from `api.service.ts` and
`app.component.tsx`
- Cleans up `AuthGatePage` page-object, `auth-gate.spec.ts` e2e spec,
and the `API_TOKEN` env var reference from the integration test server
config

## Changes

```
app/packages/web/e2e/fixtures/gsd-http-bridge.ts          14 changes   remove auth header injection
app/packages/web/e2e/fixtures/index.ts                     26 deletions  remove authedPage / token fixtures
app/packages/web/e2e/fixtures/server-mocks.ts               9 changes   drop token seeding
app/packages/web/e2e/pages/AuthGatePage.ts                 45 deletions  delete auth-gate page object
app/packages/web/e2e/pages/index.ts                         1 deletion   remove AuthGatePage export
app/packages/web/e2e/specs/auth-gate.spec.ts               26 deletions  delete auth-gate e2e spec
app/packages/web/playwright.integration.config.ts           1 deletion   remove API_TOKEN env var
app/packages/web/src/api.service.test.ts                   72 changes   drop token tests
app/packages/web/src/api.service.ts                        45 deletions  remove auth header + 401 retry
app/packages/web/src/app.component.tsx                     18 changes   remove ApiTokenModal wiring
app/packages/web/src/components/api-token-modal.component.test.tsx  153 deletions  delete component tests
app/packages/web/src/components/api-token-modal.component.tsx       166 deletions  delete component
```

## Test plan

- [ ] `npm run app:test` — all unit tests pass
(`api-token-modal.component.test.tsx` deleted, remaining web specs pass)
- [ ] `npm run app:lint` — 0 errors
- [ ] `apiToken` is not referenced anywhere in `app/packages/web/`
(`grep -r apiToken app/packages/web/src` returns nothing)
- [ ] `ApiTokenModal` component and its test file no longer exist in the
repository
- [ ] `app.component.tsx` renders without any token-modal state or
localStorage reads
- [ ] `api.service.ts` contains no `Authorization` header construction
or 401-retry logic
- [ ] E2E suite passes without auth-gate specs (`npm run app:test:e2e`)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: CoderCoco

app/packages/web/e2e/fixtures/gsd-http-bridge.ts

@@ -19,20 +19,12 @@
  *
  * It is intentionally self-contained — it closes over no module-scope bindings —
  * because Playwright serialises it to source and re-evaluates it in the page.
- * The bearer token is read from `localStorage` on every call, mirroring the
- * old `fetchWithAuth`, so it picks up whatever the `authedPage` fixture seeded.
+ * The Nest API no longer requires a bearer token, so calls go out with only the
+ * headers each request supplies.
  */
 export function installGsdHttpBridge(): void {
-  const authHeader = (): Record<string, string> => {
-    const token = localStorage.getItem('apiToken') ?? '';
-    return token ? { Authorization: `Bearer ${token}` } : {};
-  };
-
   const call = async (path: string, init?: RequestInit): Promise<unknown> => {
-    const res = await fetch(path, {
-      ...init,
-      headers: { ...(init?.headers as Record<string, string> | undefined), ...authHeader() },
-    });
+    const res = await fetch(path, init);
     if (!res.ok) throw new Error(`API error ${res.status}`);
     return res.json();
   };

app/packages/web/e2e/fixtures/index.ts

@@ -16,7 +16,7 @@ import {
   CONFIGURED_DISCORD_CONFIG,
   makeActualCosts,
 } from './game-data.js';
-import { AppLayout, AuthGatePage, DashboardPage, CostsPage, LogsPage, SettingsPage } from '../pages/index.js';
+import { AppLayout, DashboardPage, CostsPage, LogsPage, SettingsPage } from '../pages/index.js';
 import { installGsdHttpBridge } from './gsd-http-bridge.js';
 
 export type {
@@ -44,7 +44,7 @@ export {
   VALID_USER_ID,
   SAMPLE_LOG_LINES,
 } from './game-data.js';
-export { AppLayout, AuthGatePage, DashboardPage, CostsPage, LogsPage, SettingsPage } from '../pages/index.js';
+export { AppLayout, DashboardPage, CostsPage, LogsPage, SettingsPage } from '../pages/index.js';
 
 /** Per-spec overrides for the default `/api/*` stubs registered by `stubApis`. */
 export interface StubOptions {
@@ -218,10 +218,10 @@ export async function stubApis(page: Page, opts: StubOptions = {}): Promise<void
 
 type E2EFixtures = {
   /**
-   * A page with `apiToken` pre-seeded in localStorage so every navigation
-   * starts authenticated. Use this in specs that need raw page access (e.g.
-   * to call `stubApis` or `addInitScript`); prefer `dashboard` / `costs` /
-   * `layout` for higher-level interactions.
+   * Raw page handle for specs that need direct page access (e.g. to call
+   * `stubApis` or `addInitScript`); prefer `dashboard` / `costs` / `layout`
+   * for higher-level interactions. Retained as a named alias now that the API
+   * no longer requires a pre-seeded token.
    */
   authedPage: Page;
   /** Page object for the dashboard route — use in any authed-dashboard spec. */
@@ -234,21 +234,14 @@ type E2EFixtures = {
   settings: SettingsPage;
   /** Page object for the persistent nav shell (sidebar + top bar). */
   layout: AppLayout;
-  /** Page object for the API-token modal — use in auth-gate specs. */
-  authGate: AuthGatePage;
 };
 
 export const test = base.extend<E2EFixtures>({
   authedPage: async ({ page }, use) => {
-    await page.addInitScript(() => {
-      localStorage.setItem('apiToken', 'test-token');
-    });
     await use(page);
   },
-  // `dashboard` and `costs` depend on `authedPage` because every authed-route
-  // spec wants the token pre-seeded. `layout` and `authGate` depend on the raw
-  // `page` so auth-gate specs (which exercise the unauthenticated state) can
-  // use them without dragging the init script along.
+  // `dashboard` and `costs` resolve through `authedPage`; `layout` uses the raw
+  // `page`. Both are plain page handles now that no token seeding is required.
   dashboard: async ({ authedPage }, use) => {
     await use(new DashboardPage(authedPage));
   },
@@ -264,9 +257,6 @@ export const test = base.extend<E2EFixtures>({
   layout: async ({ page }, use) => {
     await use(new AppLayout(page));
   },
-  authGate: async ({ page }, use) => {
-    await use(new AuthGatePage(page));
-  },
 });
 
 export { expect } from '@playwright/test';

app/packages/web/e2e/fixtures/server-mocks.ts

@@ -4,7 +4,6 @@ import { DashboardPage } from '../pages/DashboardPage.js';
 import { installGsdHttpBridge } from './gsd-http-bridge.js';
 
 const SERVER_BASE = 'http://localhost:3002';
-const AUTH_HEADERS = { Authorization: 'Bearer test-token' };
 
 /** Shape matching the server-side MockResponse — one queued ECS command reply. */
 export interface MockResponse {
@@ -25,7 +24,6 @@ export class ServerMocks {
 
   private async post(path: string, body?: unknown): Promise<void> {
     const res = await this.request.post(`${SERVER_BASE}${path}`, {
-      headers: AUTH_HEADERS,
       ...(body !== undefined ? { data: body } : {}),
     });
     if (!res.ok()) throw new Error(`Mock control call failed ${res.status()} ${path}`);
@@ -54,8 +52,8 @@ type IntegrationFixtures = {
    */
   serverMocks: ServerMocks;
   /**
-   * Page with `apiToken = 'test-token'` pre-seeded in localStorage so every
-   * navigation to the Vite preview starts authenticated.
+   * Page with the `window.gsd` HTTP bridge installed so every navigation to the
+   * Vite preview can reach the real Nest server on :3002.
    */
   authedPage: Page;
   /** Dashboard page object backed by `authedPage`. */
@@ -71,9 +69,6 @@ export const test = base.extend<IntegrationFixtures>({
   },
 
   authedPage: async ({ page }, use) => {
-    await page.addInitScript(() => {
-      localStorage.setItem('apiToken', 'test-token');
-    });
     // The web client talks to `window.gsd.*`; install a browser-side bridge
     // that forwards each IPC call to the matching `/api/*` route, which the
     // integration preview proxies to the real Nest server on :3002.

app/packages/web/e2e/pages/AuthGatePage.ts

@@ -1,5 +1,4 @@
 export { AppLayout } from './AppLayout.js';
-export { AuthGatePage } from './AuthGatePage.js';
 export { DashboardPage, type ServerStateLabel } from './DashboardPage.js';
 export { CostsPage, type CostsRangeLabel } from './CostsPage.js';
 export { LogsPage, type LogLevelLabel } from './LogsPage.js';

app/packages/web/e2e/pages/index.ts

@@ -42,7 +42,6 @@ export default defineConfig({
       env: {
         PORT: '3002',
         NODE_ENV: 'test',
-        API_TOKEN: 'test-token',
         TF_STATE_PATH: tfstatePath,
       },
     },

app/packages/web/e2e/specs/auth-gate.spec.ts

@@ -1,23 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import {
-  getStoredApiToken,
-  setStoredApiToken,
-  setUnauthorizedHandler,
-  retryPendingAfterAuth,
-  api,
-} from './api.service.js';
-
-// jsdom provides localStorage, but we replace it with a controlled stub so
-// tests are isolated from each other's stored tokens.
-const localStorageMock = (() => {
-  let store: Record<string, string> = {};
-  return {
-    getItem: vi.fn((key: string) => store[key] ?? null),
-    setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
-    removeItem: vi.fn((key: string) => { delete store[key]; }),
-    clear: () => { store = {}; },
-  };
-})();
+import { api } from './api.service.js';
 
 /**
  * Builds a fresh `window.gsd` IPC-bridge double. Every namespace method is a
@@ -77,56 +59,15 @@ function makeGsdMock() {
 let gsd: ReturnType<typeof makeGsdMock>;
 
 beforeEach(() => {
-  localStorageMock.clear();
-  localStorageMock.getItem.mockClear();
-  localStorageMock.setItem.mockClear();
-  localStorageMock.removeItem.mockClear();
-  vi.stubGlobal('localStorage', localStorageMock);
   gsd = makeGsdMock();
   vi.stubGlobal('gsd', gsd);
-  setStoredApiToken('');
-  setUnauthorizedHandler(null);
 });
 
 afterEach(() => {
   vi.unstubAllGlobals();
   vi.restoreAllMocks();
 });
 
-describe('getStoredApiToken / setStoredApiToken', () => {
-  it('should return an empty string when no token has been stored', () => {
-    expect(getStoredApiToken()).toBe('');
-  });
-
-  it('should persist and retrieve a non-empty token', () => {
-    setStoredApiToken('my-api-token');
-    expect(getStoredApiToken()).toBe('my-api-token');
-  });
-
-  it('should remove the stored token when called with an empty string', () => {
-    setStoredApiToken('tok');
-    setStoredApiToken('');
-    expect(getStoredApiToken()).toBe('');
-  });
-
-  it('should return empty string when localStorage.getItem throws', () => {
-    vi.stubGlobal('localStorage', {
-      getItem: () => { throw new Error('unavailable'); },
-    });
-    expect(getStoredApiToken()).toBe('');
-  });
-
-  it('should silently ignore setItem errors (e.g. private browsing quota)', () => {
-    vi.stubGlobal('localStorage', {
-      getItem: () => null,
-      setItem: () => { throw new Error('QuotaExceeded'); },
-      removeItem: () => { throw new Error('unavailable'); },
-    });
-    expect(() => setStoredApiToken('tok')).not.toThrow();
-    expect(() => setStoredApiToken('')).not.toThrow();
-  });
-});
-
 describe('IPC bridge delegation', () => {
   it('should delegate api.env() to window.gsd.env.get()', async () => {
     await api.env();
@@ -264,14 +205,3 @@ describe('missing IPC bridge', () => {
     await expect(api.env()).rejects.toThrow('window.gsd IPC bridge is unavailable');
   });
 });
-
-describe('inert auth stubs (retained for #162)', () => {
-  it('should treat setUnauthorizedHandler as a no-op that never throws', () => {
-    expect(() => setUnauthorizedHandler(vi.fn())).not.toThrow();
-    expect(() => setUnauthorizedHandler(null)).not.toThrow();
-  });
-
-  it('should resolve retryPendingAfterAuth to true since nothing is ever queued', async () => {
-    expect(await retryPendingAfterAuth()).toBe(true);
-  });
-});

app/packages/web/playwright.integration.config.ts

@@ -110,51 +110,6 @@ export interface EnvInfo {
   environment: string;
 }
 
-const TOKEN_STORAGE_KEY = 'apiToken';
-
-/** Read the stored API bearer token from localStorage (returns empty string if unset). */
-export function getStoredApiToken(): string {
-  try {
-    return localStorage.getItem(TOKEN_STORAGE_KEY) ?? '';
-  } catch {
-    return '';
-  }
-}
-
-/** Persist the API bearer token for subsequent requests. Clear with `''`. */
-export function setStoredApiToken(token: string): void {
-  try {
-    if (token) localStorage.setItem(TOKEN_STORAGE_KEY, token);
-    else localStorage.removeItem(TOKEN_STORAGE_KEY);
-  } catch {
-    // localStorage unavailable (private mode, etc.); failures are non-fatal — user will just be re-prompted.
-  }
-}
-
-/**
- * Retained for source compatibility while the renderer finishes migrating off
- * the old HTTP/bearer transport. The 401-retry queue these drove only made
- * sense for `fetch`; IPC has no per-request 401, so both are now inert no-ops.
- * They stay exported because `app.component.tsx` and `api-token-modal.component.tsx`
- * still import them — those call sites are removed in #162.
- *
- * @param _handler - Ignored. Kept so existing callers still type-check.
- */
-export function setUnauthorizedHandler(_handler: (() => void) | null): void {
-  // no-op: there is no HTTP 401 to intercept over the IPC bridge.
-}
-
-/**
- * Inert counterpart to {@link setUnauthorizedHandler}: nothing is ever queued
- * now, so this resolves to `true` (every — i.e. zero — parked request
- * "succeeded") and any caller proceeds as before.
- *
- * @returns A promise that always resolves to `true`.
- */
-export function retryPendingAfterAuth(): Promise<boolean> {
-  return Promise.resolve(true);
-}
-
 /**
  * Returns the `window.gsd` IPC bridge, throwing a descriptive error if it is
  * absent. The bridge is injected by the Electron preload script, so a missing