feat(auth): inject MCP_INSPECTOR_API_TOKEN into served index.html (#1378) (#1382)

* feat(auth): inject MCP_INSPECTOR_API_TOKEN into served index.html (#1378)

Reloading the web client at the bare URL (no `?MCP_INSPECTOR_API_TOKEN=…`
query string) with empty sessionStorage made every `/api/*` request 401 —
the browser had no way to recover the backend's auth token.

Embed the token into `index.html` on every page load so the browser no
longer depends on the query string surviving navigation:

- New shared helper `clients/web/server/inject-auth-token.ts` embeds
  `<script>window.__INSPECTOR_API_TOKEN__ = "…"</script>` (escaped against
  `</script>` injection; no-op when auth is dangerously omitted).
- Dev: the Vite plugin injects via `transformIndexHtml`.
- Prod: the Hono server injects on the `/` route.
- `App.tsx` `getAuthToken()` now reads the injected global first, then the
  query string, then sessionStorage (both fallbacks preserved).
- Shared global name lives in `INSPECTOR_API_TOKEN_GLOBAL`
  (`core/mcp/remote/constants.ts`).

Tests: helper unit coverage + an integration test exercising the real
prod server's `/` → `/api/*` flow (injected token authenticates; missing
token 401s). AGENTS.md documents the token-recovery order.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(auth): inject token into prod SPA fallback + prime sessionStorage + no-store (#1378)

Addresses code-review feedback on the token-injection PR:

- Prod `server.ts` SPA deep-link fallback (e.g. `/oauth/callback`) previously
  served the raw index.html off disk via serveStatic, bypassing injection — so
  a bookmark/reload at a non-`/` route with empty sessionStorage would 401.
  Route the SPA fallback through the same `serveIndexHtml` (inject) helper;
  real static assets (paths with a dot) still serve verbatim. Dev already
  injected on every HTML serve via Vite `transformIndexHtml`.
- `getAuthToken()` now persists the injected `window.__INSPECTOR_API_TOKEN__`
  to sessionStorage (not just the URL-param branch), priming the backstop for
  any later navigation that loses the global.
- Injected HTML responses now send `Cache-Control: no-store`, so a page
  carrying a token isn't cached and served stale after a restart regenerates
  the token.

Integration tests added: SPA fallback (`/oauth/callback`) carries the token,
`Cache-Control: no-store` on injected HTML, real assets served verbatim, and
unknown `/api` routes 404 rather than falling through to the HTML shell.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

clients/web/server/server.ts

@@ -11,8 +11,10 @@ import open from "open";
 import { serve } from "@hono/node-server";
 import { serveStatic } from "@hono/node-server/serve-static";
 import { Hono } from "hono";
+import type { Context } from "hono";
 import { createRemoteApp } from "../../../core/mcp/remote/node/server.ts";
 import { createSandboxController } from "./sandbox-controller.js";
+import { injectAuthToken } from "./inject-auth-token.js";
 import type { WebServerConfig } from "./web-server-config.js";
 import {
   webServerConfigToInitialPayload,
@@ -60,29 +62,47 @@ export async function startHonoServer(
     return apiApp.fetch(c.req.raw);
   });
 
+  // Serve index.html with the API token injected so a reload at any bare URL
+  // (no `?MCP_INSPECTOR_API_TOKEN=…`) still authenticates against /api/*.
+  // No-op when auth is dangerously omitted (empty token). The dev Vite plugin
+  // applies the same injection via `transformIndexHtml`. `Cache-Control:
+  // no-store` keeps a browser/proxy from serving a page that carries a stale
+  // token after a server restart regenerates it (randomBytes per start).
+  const serveIndexHtml = (c: Context) => {
+    const indexPath = join(rootPath, "index.html");
+    const html = readFileSync(indexPath, "utf-8");
+    c.header("Cache-Control", "no-store");
+    return c.html(injectAuthToken(html, resolvedAuthToken));
+  };
+
   app.get("/", async (c) => {
     try {
-      const indexPath = join(rootPath, "index.html");
-      const html = readFileSync(indexPath, "utf-8");
-      return c.html(html);
+      return serveIndexHtml(c);
     } catch (error) {
       console.error("Error serving index.html:", error);
       return c.notFound();
     }
   });
 
-  app.use(
-    "/*",
-    serveStatic({
-      root: rootPath,
-      rewriteRequestPath: (path) => {
-        if (!path.includes(".") && !path.startsWith("/api")) {
-          return "/index.html";
-        }
-        return path;
-      },
-    }),
-  );
+  // Real static assets (paths with a file extension). Missing files fall
+  // through to the SPA fallback below via `next()`.
+  app.use("/*", serveStatic({ root: rootPath }));
+
+  // SPA deep-link fallback: any non-/api route that didn't resolve to a static
+  // asset (e.g. `/oauth/callback`, the OAuth landing URL) serves the *injected*
+  // index.html — not the raw file — so bookmarks and hand-typed reloads at
+  // those paths get the token global too, matching the `/` route.
+  app.get("*", async (c) => {
+    if (c.req.path.startsWith("/api")) {
+      return c.notFound();
+    }
+    try {
+      return serveIndexHtml(c);
+    } catch (error) {
+      console.error("Error serving index.html:", error);
+      return c.notFound();
+    }
+  });
 
   const httpServer = serve(
     {