Merge branch 'main' into fix-required

2025-06-24 21:35:27 -07:00 · 2025-06-24 21:35:27 -07:00 · 95975c58e7
commit 95975c58e7
parent dac224bad7 873b838bd8
37 changed files with 2188 additions and 354 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,35 @@
+# Version control
+.git
+.gitignore
+
+# Node.js
+node_modules
+npm-debug.log
+
+# Build artifacts
+client/dist
+client/build
+server/dist
+server/build
+
+# Environment variables
+.env
+.env.local
+.env.development
+.env.test
+.env.production
+
+# Editor files
+.vscode
+.idea
+
+# Logs
+logs
+*.log
+
+# Testing
+coverage
+
+# Docker
+Dockerfile
+.dockerignore
--- a/.git-blame-ignore-revs
+++ b/.git-blame-ignore-revs
--- a/.github/workflows/e2e_tests.yml
+++ b/.github/workflows/e2e_tests.yml
@ -0,0 +1,74 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwoff1
+
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      # Cache Playwright browsers
+      - name: Cache Playwright browsers
+        id: cache-playwright
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright # The default Playwright cache path
+          key: ${{ runner.os }}-playwright-${{ hashFiles('package-lock.json') }} # Cache key based on OS and package-lock.json
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright dependencies
+        run: npx playwright install-deps
+
+      - name: Install Playwright and browsers unless cached
+        run: npx playwright install --with-deps
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright Report and Screenshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: |
+            client/playwright-report/
+            client/test-results/
+            client/results.json
+          retention-days: 2
+
+      - name: Publish Playwright Test Summary
+        uses: daun/playwright-report-summary@v3
+        if: always()
+        with:
+          create-comment: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+          report-file: client/results.json
+          comment-title: "🎭 Playwright E2E Test Results"
+          job-summary: true
+          icon-style: "emojis"
+          custom-info: |
+            **Test Environment:** Ubuntu Latest, Node.js 18
+            **Browsers:** Chromium, Firefox
+
+            📊 [View Detailed HTML Report](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}) (download artifacts)
+          test-command: "npm run test:e2e"
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -26,6 +26,9 @@ jobs:
      # - run: npm ci
      - run: npm install --no-package-lock

+      - name: Check version consistency
+        run: npm run check-version
+
      - name: Check linting
        working-directory: ./client
        run: npm run lint
@ -62,3 +65,52 @@ jobs:
      - run: npm run publish-all
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  publish-github-container-registry:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'release'
+    environment: release
+    needs: build
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v2
+        with:
+          subject-name: ghcr.io/${{ github.repository }}
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true
--- a/.gitignore
+++ b/.gitignore
@ -9,3 +9,7 @@ client/tsconfig.app.tsbuildinfo
 client/tsconfig.node.tsbuildinfo
 cli/build
 test-output
+client/playwright-report/
+client/results.json
+client/test-results/
+
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -30,4 +30,4 @@ The project is organized as a monorepo with workspaces:

 - `client/`: React frontend with Vite, TypeScript and Tailwind
 - `server/`: Express backend with TypeScript
- `bin/`: CLI scripts
+- `cli/`: Command-line interface for testing and invoking MCP server methods directly
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -13,7 +13,7 @@ Thanks for your interest in contributing! This guide explains how to get involve

 1. Create a new branch for your changes
 2. Make your changes following existing code style and conventions. You can run `npm run prettier-check` and `npm run prettier-fix` as applicable.
-3. Test changes locally by running `npm test`
+3. Test changes locally by running `npm test` and `npm run test:e2e`
 4. Update documentation as needed
 5. Use clear commit messages explaining your changes
 6. Verify all changes work as expected
--- a/52
+++ b/52
@ -0,0 +1,52 @@
+# Build stage
+FROM node:24-slim AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files for installation
+COPY package*.json ./
+COPY .npmrc ./
+COPY client/package*.json ./client/
+COPY server/package*.json ./server/
+COPY cli/package*.json ./cli/
+
+# Install dependencies
+RUN npm ci --ignore-scripts
+
+# Copy source files
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:24-slim
+
+WORKDIR /app
+
+# Copy package files for production
+COPY package*.json ./
+COPY .npmrc ./
+COPY client/package*.json ./client/
+COPY server/package*.json ./server/
+COPY cli/package*.json ./cli/
+
+# Install only production dependencies
+RUN npm ci --omit=dev --ignore-scripts
+
+# Copy built files from builder stage
+COPY --from=builder /app/client/dist ./client/dist
+COPY --from=builder /app/client/bin ./client/bin
+COPY --from=builder /app/server/build ./server/build
+COPY --from=builder /app/cli/build ./cli/build
+
+# Set default port values as environment variables
+ENV CLIENT_PORT=6274
+ENV SERVER_PORT=6277
+
+# Document which ports the application uses internally
+EXPOSE ${CLIENT_PORT} ${SERVER_PORT}
+
+# Use ENTRYPOINT with CMD for arguments
+ENTRYPOINT ["npm", "start"]
--- a/README.md
+++ b/README.md
@ -137,17 +137,64 @@ The inspector supports bearer token authentication for SSE connections. Enter yo

 The MCP Inspector includes a proxy server that can run and communicate with local MCP processes. The proxy server should not be exposed to untrusted networks as it has permissions to spawn local processes and can connect to any specified MCP server.

+#### Authentication
+
+The MCP Inspector proxy server requires authentication by default. When starting the server, a random session token is generated and printed to the console:
+
+```
+🔑 Session token: 3a1c267fad21f7150b7d624c160b7f09b0b8c4f623c7107bbf13378f051538d4
+
+🔗 Open inspector with token pre-filled:
+   http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=3a1c267fad21f7150b7d624c160b7f09b0b8c4f623c7107bbf13378f051538d4
+```
+
+This token must be included as a Bearer token in the Authorization header for all requests to the server. The inspector will automatically open your browser with the token pre-filled in the URL.
+
+**Automatic browser opening** - The inspector now automatically opens your browser with the token pre-filled in the URL when authentication is enabled.
+
+**Alternative: Manual configuration** - If you already have the inspector open:
+
+1. Click the "Configuration" button in the sidebar
+2. Find "Proxy Session Token" and enter the token displayed in the proxy console
+3. Click "Save" to apply the configuration
+
+The token will be saved in your browser's local storage for future use.
+
+If you need to disable authentication (NOT RECOMMENDED), you can set the `DANGEROUSLY_OMIT_AUTH` environment variable:
+
+```bash
+DANGEROUSLY_OMIT_AUTH=true npm start
+```
+
+#### Local-only Binding
+
+By default, the MCP Inspector proxy server binds only to `127.0.0.1` (localhost) to prevent network access. This ensures the server is not accessible from other devices on the network. If you need to bind to all interfaces for development purposes, you can override this with the `HOST` environment variable:
+
+```bash
+HOST=0.0.0.0 npm start
+```
+
+**Warning:** Only bind to all interfaces in trusted network environments, as this exposes the proxy server's ability to execute local processes.
+
+#### DNS Rebinding Protection
+
+To prevent DNS rebinding attacks, the MCP Inspector validates the `Origin` header on incoming requests. By default, only requests from the client origin are allowed (respects `CLIENT_PORT` if set, defaulting to port 6274). You can configure additional allowed origins by setting the `ALLOWED_ORIGINS` environment variable (comma-separated list):
+
+```bash
+ALLOWED_ORIGINS=http://localhost:6274,http://127.0.0.1:6274,http://localhost:8000 npm start
+```
+
 ### Configuration

 The MCP Inspector supports the following configuration settings. To change them, click on the `Configuration` button in the MCP Inspector UI:

-| Setting                                 | Description                                                                                                   | Default |
-| --------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------- |
-| `MCP_SERVER_REQUEST_TIMEOUT`            | Timeout for requests to the MCP server (ms)                                                                   | 10000   |
-| `MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS` | Reset timeout on progress notifications                                                                       | true    |
-| `MCP_REQUEST_MAX_TOTAL_TIMEOUT`         | Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)              | 60000   |
-| `MCP_PROXY_FULL_ADDRESS`                | Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577  | ""      |
-| `MCP_AUTO_OPEN_ENABLED`                 | Enable automatic browser opening when inspector starts. Only as environment var, not configurable in browser. | true    |
+| Setting                                 | Description                                                                                                                                       | Default |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `MCP_SERVER_REQUEST_TIMEOUT`            | Timeout for requests to the MCP server (ms)                                                                                                       | 10000   |
+| `MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS` | Reset timeout on progress notifications                                                                                                           | true    |
+| `MCP_REQUEST_MAX_TOTAL_TIMEOUT`         | Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)                                                  | 60000   |
+| `MCP_PROXY_FULL_ADDRESS`                | Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577                                      | ""      |
+| `MCP_AUTO_OPEN_ENABLED`                 | Enable automatic browser opening when inspector starts (works with authentication enabled). Only as environment var, not configurable in browser. | true    |

 These settings can be adjusted in real-time through the UI and will persist across sessions.

--- a/cli/package.json
+++ b/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-cli",
-  "version": "0.14.0",
+  "version": "0.14.3",
  "description": "CLI for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@ -21,7 +21,7 @@
  },
  "devDependencies": {},
  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@modelcontextprotocol/sdk": "^1.13.0",
    "commander": "^13.1.0",
    "spawn-rx": "^5.1.2"
  }
--- a/client/bin/start.js
+++ b/client/bin/start.js
@ -2,8 +2,9 @@

 import open from "open";
 import { resolve, dirname } from "path";
-import { spawnPromise } from "spawn-rx";
+import { spawnPromise, spawn } from "spawn-rx";
 import { fileURLToPath } from "url";
+import { randomBytes } from "crypto";

 const __dirname = dirname(fileURLToPath(import.meta.url));

@ -11,6 +12,157 @@ function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms, true));
 }

+async function startDevServer(serverOptions) {
+  const { SERVER_PORT, CLIENT_PORT, sessionToken, envVars, abort } =
+    serverOptions;
+  const serverCommand = "npx";
+  const serverArgs = ["tsx", "watch", "--clear-screen=false", "src/index.ts"];
+  const isWindows = process.platform === "win32";
+
+  const spawnOptions = {
+    cwd: resolve(__dirname, "../..", "server"),
+    env: {
+      ...process.env,
+      PORT: SERVER_PORT,
+      CLIENT_PORT: CLIENT_PORT,
+      MCP_PROXY_TOKEN: sessionToken,
+      MCP_ENV_VARS: JSON.stringify(envVars),
+    },
+    signal: abort.signal,
+    echoOutput: true,
+  };
+
+  // For Windows, we need to use stdin: 'ignore' to simulate < NUL
+  if (isWindows) {
+    spawnOptions.stdin = "ignore";
+  }
+
+  const server = spawn(serverCommand, serverArgs, spawnOptions);
+
+  // Give server time to start
+  const serverOk = await Promise.race([
+    new Promise((resolve) => {
+      server.subscribe({
+        complete: () => resolve(false),
+        error: () => resolve(false),
+        next: () => {}, // We're using echoOutput
+      });
+    }),
+    delay(3000).then(() => true),
+  ]);
+
+  return { server, serverOk };
+}
+
+async function startProdServer(serverOptions) {
+  const {
+    SERVER_PORT,
+    CLIENT_PORT,
+    sessionToken,
+    envVars,
+    abort,
+    command,
+    mcpServerArgs,
+  } = serverOptions;
+  const inspectorServerPath = resolve(
+    __dirname,
+    "../..",
+    "server",
+    "build",
+    "index.js",
+  );
+
+  const server = spawnPromise(
+    "node",
+    [
+      inspectorServerPath,
+      ...(command ? [`--env`, command] : []),
+      ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
+    ],
+    {
+      env: {
+        ...process.env,
+        PORT: SERVER_PORT,
+        CLIENT_PORT: CLIENT_PORT,
+        MCP_PROXY_TOKEN: sessionToken,
+        MCP_ENV_VARS: JSON.stringify(envVars),
+      },
+      signal: abort.signal,
+      echoOutput: true,
+    },
+  );
+
+  // Make sure server started before starting client
+  const serverOk = await Promise.race([server, delay(2 * 1000)]);
+
+  return { server, serverOk };
+}
+
+async function startDevClient(clientOptions) {
+  const { CLIENT_PORT, authDisabled, sessionToken, abort, cancelled } =
+    clientOptions;
+  const clientCommand = "npx";
+  const clientArgs = ["vite", "--port", CLIENT_PORT];
+
+  const client = spawn(clientCommand, clientArgs, {
+    cwd: resolve(__dirname, ".."),
+    env: { ...process.env, PORT: CLIENT_PORT },
+    signal: abort.signal,
+    echoOutput: true,
+  });
+
+  // Auto-open browser after vite starts
+  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+    const url = authDisabled
+      ? `http://127.0.0.1:${CLIENT_PORT}`
+      : `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
+
+    // Give vite time to start before opening browser
+    setTimeout(() => {
+      open(url);
+      console.log(`\n🔗 Opening browser at: ${url}\n`);
+    }, 3000);
+  }
+
+  await new Promise((resolve) => {
+    client.subscribe({
+      complete: resolve,
+      error: (err) => {
+        if (!cancelled || process.env.DEBUG) {
+          console.error("Client error:", err);
+        }
+        resolve(null);
+      },
+      next: () => {}, // We're using echoOutput
+    });
+  });
+}
+
+async function startProdClient(clientOptions) {
+  const { CLIENT_PORT, authDisabled, sessionToken, abort } = clientOptions;
+  const inspectorClientPath = resolve(
+    __dirname,
+    "../..",
+    "client",
+    "bin",
+    "client.js",
+  );
+
+  // Auto-open browser with token
+  if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
+    const url = authDisabled
+      ? `http://127.0.0.1:${CLIENT_PORT}`
+      : `http://127.0.0.1:${CLIENT_PORT}/?MCP_PROXY_AUTH_TOKEN=${sessionToken}`;
+    open(url);
+  }
+
+  await spawnPromise("node", [inspectorClientPath], {
+    env: { ...process.env, PORT: CLIENT_PORT },
+    signal: abort.signal,
+    echoOutput: true,
+  });
+}
+
 async function main() {
  // Parse command line arguments
  const args = process.argv.slice(2);
@ -18,6 +170,7 @@ async function main() {
  const mcpServerArgs = [];
  let command = null;
  let parsingFlags = true;
+  let isDev = false;

  for (let i = 0; i < args.length; i++) {
    const arg = args[i];
@ -27,6 +180,11 @@ async function main() {
      continue;
    }

+    if (parsingFlags && arg === "--dev") {
+      isDev = true;
+      continue;
+    }
+
    if (parsingFlags && arg === "-e" && i + 1 < args.length) {
      const envVar = args[++i];
      const equalsIndex = envVar.indexOf("=");
@ -38,34 +196,25 @@ async function main() {
      } else {
        envVars[envVar] = "";
      }
-    } else if (!command) {
+    } else if (!command && !isDev) {
      command = arg;
-    } else {
+    } else if (!isDev) {
      mcpServerArgs.push(arg);
    }
  }

-  const inspectorServerPath = resolve(
-    __dirname,
-    "../..",
-    "server",
-    "build",
-    "index.js",
-  );
-
-  // Path to the client entry point
-  const inspectorClientPath = resolve(
-    __dirname,
-    "../..",
-    "client",
-    "bin",
-    "client.js",
-  );
-
  const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
  const SERVER_PORT = process.env.SERVER_PORT ?? "6277";

-  console.log("Starting MCP inspector...");
+  console.log(
+    isDev
+      ? "Starting MCP inspector in development mode..."
+      : "Starting MCP inspector...",
+  );
+
+  // Generate session token for authentication
+  const sessionToken = randomBytes(32).toString("hex");
+  const authDisabled = !!process.env.DANGEROUSLY_OMIT_AUTH;

  const abort = new AbortController();

@ -74,40 +223,41 @@ async function main() {
    cancelled = true;
    abort.abort();
  });
-  let server, serverOk;
-  try {
-    server = spawnPromise(
-      "node",
-      [
-        inspectorServerPath,
-        ...(command ? [`--env`, command] : []),
-        ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
-      ],
-      {
-        env: {
-          ...process.env,
-          PORT: SERVER_PORT,
-          MCP_ENV_VARS: JSON.stringify(envVars),
-        },
-        signal: abort.signal,
-        echoOutput: true,
-      },
-    );

-    // Make sure server started before starting client
-    serverOk = await Promise.race([server, delay(2 * 1000)]);
+  let server, serverOk;
+
+  try {
+    const serverOptions = {
+      SERVER_PORT,
+      CLIENT_PORT,
+      sessionToken,
+      envVars,
+      abort,
+      command,
+      mcpServerArgs,
+    };
+
+    const result = isDev
+      ? await startDevServer(serverOptions)
+      : await startProdServer(serverOptions);
+
+    server = result.server;
+    serverOk = result.serverOk;
  } catch (error) {}

  if (serverOk) {
    try {
-      if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
-        open(`http://127.0.0.1:${CLIENT_PORT}`);
-      }
-      await spawnPromise("node", [inspectorClientPath], {
-        env: { ...process.env, PORT: CLIENT_PORT },
-        signal: abort.signal,
-        echoOutput: true,
-      });
+      const clientOptions = {
+        CLIENT_PORT,
+        authDisabled,
+        sessionToken,
+        abort,
+        cancelled,
+      };
+
+      await (isDev
+        ? startDevClient(clientOptions)
+        : startProdClient(clientOptions));
    } catch (e) {
      if (!cancelled || process.env.DEBUG) throw e;
    }
--- a/client/e2e/global-teardown.js
+++ b/client/e2e/global-teardown.js
@ -0,0 +1,18 @@
+import { rimraf } from "rimraf";
+
+async function globalTeardown() {
+  if (!process.env.CI) {
+    console.log("Cleaning up test-results directory...");
+    // Add a small delay to ensure all Playwright files are written
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    await rimraf("./e2e/test-results");
+    console.log("Test-results directory cleaned up.");
+  }
+}
+
+export default globalTeardown;
+
+// Call the function when this script is run directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  globalTeardown().catch(console.error);
+}
--- a/client/e2e/transport-type-dropdown.spec.ts
+++ b/client/e2e/transport-type-dropdown.spec.ts
@ -0,0 +1,113 @@
+import { test, expect } from "@playwright/test";
+
+// Adjust the URL if your dev server runs on a different port
+const APP_URL = "http://localhost:6274/";
+
+test.describe("Transport Type Dropdown", () => {
+  test("should have options for STDIO, SSE, and Streamable HTTP", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown
+    await selectTrigger.click();
+
+    // Check for the three options
+    await expect(page.getByRole("option", { name: "STDIO" })).toBeVisible();
+    await expect(page.getByRole("option", { name: "SSE" })).toBeVisible();
+    await expect(
+      page.getByRole("option", { name: "Streamable HTTP" }),
+    ).toBeVisible();
+  });
+
+  test("should show Command and Arguments fields and hide URL field when Transport Type is STDIO", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown and select STDIO
+    await selectTrigger.click();
+    await page.getByRole("option", { name: "STDIO" }).click();
+
+    // Wait for the form to update
+    await page.waitForTimeout(100);
+
+    // Check that Command and Arguments fields are visible
+    await expect(page.locator("#command-input")).toBeVisible();
+    await expect(page.locator("#arguments-input")).toBeVisible();
+
+    // Check that URL field is not visible
+    await expect(page.locator("#sse-url-input")).not.toBeVisible();
+
+    // Also verify the labels are present
+    await expect(page.getByText("Command")).toBeVisible();
+    await expect(page.getByText("Arguments")).toBeVisible();
+    await expect(page.getByText("URL")).not.toBeVisible();
+  });
+
+  test("should show URL field and hide Command and Arguments fields when Transport Type is SSE", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown and select SSE
+    await selectTrigger.click();
+    await page.getByRole("option", { name: "SSE" }).click();
+
+    // Wait for the form to update
+    await page.waitForTimeout(100);
+
+    // Check that URL field is visible
+    await expect(page.locator("#sse-url-input")).toBeVisible();
+
+    // Check that Command and Arguments fields are not visible
+    await expect(page.locator("#command-input")).not.toBeVisible();
+    await expect(page.locator("#arguments-input")).not.toBeVisible();
+
+    // Also verify the labels are present/absent
+    await expect(page.getByText("URL")).toBeVisible();
+    await expect(page.getByText("Command")).not.toBeVisible();
+    await expect(page.getByText("Arguments")).not.toBeVisible();
+  });
+
+  test("should show URL field and hide Command and Arguments fields when Transport Type is Streamable HTTP", async ({
+    page,
+  }) => {
+    await page.goto(APP_URL);
+
+    // Wait for the Transport Type dropdown to be visible
+    const selectTrigger = page.getByLabel("Transport Type");
+    await expect(selectTrigger).toBeVisible();
+
+    // Open the dropdown and select Streamable HTTP
+    await selectTrigger.click();
+    await page.getByRole("option", { name: "Streamable HTTP" }).click();
+
+    // Wait for the form to update
+    await page.waitForTimeout(100);
+
+    // Check that URL field is visible
+    await expect(page.locator("#sse-url-input")).toBeVisible();
+
+    // Check that Command and Arguments fields are not visible
+    await expect(page.locator("#command-input")).not.toBeVisible();
+    await expect(page.locator("#arguments-input")).not.toBeVisible();
+
+    // Also verify the labels are present/absent
+    await expect(page.getByText("URL")).toBeVisible();
+    await expect(page.getByText("Command")).not.toBeVisible();
+    await expect(page.getByText("Arguments")).not.toBeVisible();
+  });
+});
--- a/client/jest.config.cjs
+++ b/client/jest.config.cjs
@ -21,6 +21,7 @@ module.exports = {
    "/node_modules/",
    "/dist/",
    "/bin/",
+    "/e2e/",
    "\\.config\\.(js|ts|cjs|mjs)$",
  ],
  // Exclude the same patterns from coverage reports
@ -28,6 +29,7 @@ module.exports = {
    "/node_modules/",
    "/dist/",
    "/bin/",
+    "/e2e/",
    "\\.config\\.(js|ts|cjs|mjs)$",
  ],
 };
--- a/client/package.json
+++ b/client/package.json
@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.14.0",
+  "version": "0.14.3",
  "description": "Client-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@ -20,10 +20,12 @@
    "lint": "eslint .",
    "preview": "vite preview --port 6274",
    "test": "jest --config jest.config.cjs",
-    "test:watch": "jest --config jest.config.cjs --watch"
+    "test:watch": "jest --config jest.config.cjs --watch",
+    "test:e2e": "playwright test e2e && npm run cleanup:e2e",
+    "cleanup:e2e": "node e2e/global-teardown.js"
  },
  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.1",
+    "@modelcontextprotocol/sdk": "^1.13.0",
    "@radix-ui/react-checkbox": "^1.1.4",
    "ajv": "^6.12.6",
    "@radix-ui/react-dialog": "^1.1.3",
--- a/client/playwright.config.ts
+++ b/client/playwright.config.ts
@ -0,0 +1,70 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    cwd: "..",
+    command: "npm run dev",
+    url: "http://localhost:6274",
+    reuseExistingServer: !process.env.CI,
+  },
+
+  testDir: "./e2e",
+  outputDir: "./e2e/test-results",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI
+    ? [
+        ["html", { outputFolder: "playwright-report" }],
+        ["json", { outputFile: "results.json" }],
+        ["line"],
+      ]
+    : [["line"]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:6274",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    /* Take screenshots on failure */
+    screenshot: "only-on-failure",
+
+    /* Record video on failure */
+    video: "retain-on-failure",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    // Skip WebKit on macOS due to compatibility issues
+    ...(process.platform !== "darwin"
+      ? [
+          {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+          },
+        ]
+      : []),
+  ],
+});
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -63,11 +63,13 @@ import ToolsTab from "./components/ToolsTab";
 import { InspectorConfig } from "./lib/configurationTypes";
 import {
  getMCPProxyAddress,
+  getMCPProxyAuthToken,
  getInitialSseUrl,
  getInitialTransportType,
  getInitialCommand,
  getInitialArgs,
  initializeInspectorConfig,
+  saveInspectorConfig,
 } from "./utils/configUtils";

 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
@ -226,7 +228,7 @@ const App = () => {
  }, [headerName]);

  useEffect(() => {
-    localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
+    saveInspectorConfig(CONFIG_LOCAL_STORAGE_KEY, config);
  }, [config]);

  // Auto-connect to previously saved serverURL after OAuth callback
@ -344,7 +346,14 @@ const App = () => {
  }, [sseUrl]);

  useEffect(() => {
-    fetch(`${getMCPProxyAddress(config)}/config`)
+    const headers: HeadersInit = {};
+    const { token: proxyAuthToken, header: proxyAuthTokenHeader } =
+      getMCPProxyAuthToken(config);
+    if (proxyAuthToken) {
+      headers[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
+    }
+
+    fetch(`${getMCPProxyAddress(config)}/config`, { headers })
      .then((response) => response.json())
      .then((data) => {
        setEnv(data.defaultEnvironment);
@ -358,8 +367,7 @@ const App = () => {
      .catch((error) =>
        console.error("Error fetching default environment:", error),
      );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [config]);

  useEffect(() => {
    rootsRef.current = roots;
--- a/client/src/tests/App.config.test.tsx
+++ b/client/src/tests/App.config.test.tsx
@ -0,0 +1,240 @@
+import { render, waitFor } from "@testing-library/react";
+import App from "../App";
+import { DEFAULT_INSPECTOR_CONFIG } from "../lib/constants";
+import { InspectorConfig } from "../lib/configurationTypes";
+import * as configUtils from "../utils/configUtils";
+
+// Mock auth dependencies first
+jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
+  auth: jest.fn(),
+}));
+
+jest.mock("../lib/oauth-state-machine", () => ({
+  OAuthStateMachine: jest.fn(),
+}));
+
+jest.mock("../lib/auth", () => ({
+  InspectorOAuthClientProvider: jest.fn().mockImplementation(() => ({
+    tokens: jest.fn().mockResolvedValue(null),
+    clear: jest.fn(),
+  })),
+  DebugInspectorOAuthClientProvider: jest.fn(),
+}));
+
+// Mock the config utils
+jest.mock("../utils/configUtils", () => ({
+  ...jest.requireActual("../utils/configUtils"),
+  getMCPProxyAddress: jest.fn(() => "http://localhost:6277"),
+  getMCPProxyAuthToken: jest.fn((config: InspectorConfig) => ({
+    token: config.MCP_PROXY_AUTH_TOKEN.value,
+    header: "X-MCP-Proxy-Auth",
+  })),
+  getInitialTransportType: jest.fn(() => "stdio"),
+  getInitialSseUrl: jest.fn(() => "http://localhost:3001/sse"),
+  getInitialCommand: jest.fn(() => "mcp-server-everything"),
+  getInitialArgs: jest.fn(() => ""),
+  initializeInspectorConfig: jest.fn(() => DEFAULT_INSPECTOR_CONFIG),
+  saveInspectorConfig: jest.fn(),
+}));
+
+// Get references to the mocked functions
+const mockGetMCPProxyAuthToken = configUtils.getMCPProxyAuthToken as jest.Mock;
+const mockInitializeInspectorConfig =
+  configUtils.initializeInspectorConfig as jest.Mock;
+
+// Mock other dependencies
+jest.mock("../lib/hooks/useConnection", () => ({
+  useConnection: () => ({
+    connectionStatus: "disconnected",
+    serverCapabilities: null,
+    mcpClient: null,
+    requestHistory: [],
+    makeRequest: jest.fn(),
+    sendNotification: jest.fn(),
+    handleCompletion: jest.fn(),
+    completionsSupported: false,
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+  }),
+}));
+
+jest.mock("../lib/hooks/useDraggablePane", () => ({
+  useDraggablePane: () => ({
+    height: 300,
+    handleDragStart: jest.fn(),
+  }),
+  useDraggableSidebar: () => ({
+    width: 320,
+    isDragging: false,
+    handleDragStart: jest.fn(),
+  }),
+}));
+
+jest.mock("../components/Sidebar", () => ({
+  __esModule: true,
+  default: () => <div>Sidebar</div>,
+}));
+
+// Mock fetch
+global.fetch = jest.fn();
+
+describe("App - Config Endpoint", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (global.fetch as jest.Mock).mockResolvedValue({
+      json: () =>
+        Promise.resolve({
+          defaultEnvironment: { TEST_ENV: "test" },
+          defaultCommand: "test-command",
+          defaultArgs: "test-args",
+        }),
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+
+    // Reset getMCPProxyAuthToken to default behavior
+    mockGetMCPProxyAuthToken.mockImplementation((config: InspectorConfig) => ({
+      token: config.MCP_PROXY_AUTH_TOKEN.value,
+      header: "X-MCP-Proxy-Auth",
+    }));
+  });
+
+  test("sends X-MCP-Proxy-Auth header when fetching config with proxy auth token", async () => {
+    const mockConfig = {
+      ...DEFAULT_INSPECTOR_CONFIG,
+      MCP_PROXY_AUTH_TOKEN: {
+        ...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
+        value: "test-proxy-token",
+      },
+    };
+
+    // Mock initializeInspectorConfig to return our test config
+    mockInitializeInspectorConfig.mockReturnValue(mockConfig);
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "http://localhost:6277/config",
+        {
+          headers: {
+            "X-MCP-Proxy-Auth": "Bearer test-proxy-token",
+          },
+        },
+      );
+    });
+  });
+
+  test("does not send auth header when proxy auth token is empty", async () => {
+    const mockConfig = {
+      ...DEFAULT_INSPECTOR_CONFIG,
+      MCP_PROXY_AUTH_TOKEN: {
+        ...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
+        value: "",
+      },
+    };
+
+    // Mock initializeInspectorConfig to return our test config
+    mockInitializeInspectorConfig.mockReturnValue(mockConfig);
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "http://localhost:6277/config",
+        {
+          headers: {},
+        },
+      );
+    });
+  });
+
+  test("uses custom header name if getMCPProxyAuthToken returns different header", async () => {
+    const mockConfig = {
+      ...DEFAULT_INSPECTOR_CONFIG,
+      MCP_PROXY_AUTH_TOKEN: {
+        ...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
+        value: "test-proxy-token",
+      },
+    };
+
+    // Mock to return a custom header name
+    mockGetMCPProxyAuthToken.mockReturnValue({
+      token: "test-proxy-token",
+      header: "X-Custom-Auth",
+    });
+    mockInitializeInspectorConfig.mockReturnValue(mockConfig);
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        "http://localhost:6277/config",
+        {
+          headers: {
+            "X-Custom-Auth": "Bearer test-proxy-token",
+          },
+        },
+      );
+    });
+  });
+
+  test("config endpoint response updates app state", async () => {
+    const mockConfig = {
+      ...DEFAULT_INSPECTOR_CONFIG,
+      MCP_PROXY_AUTH_TOKEN: {
+        ...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
+        value: "test-proxy-token",
+      },
+    };
+
+    mockInitializeInspectorConfig.mockReturnValue(mockConfig);
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledTimes(1);
+    });
+
+    // Verify the fetch was called with correct parameters
+    expect(global.fetch).toHaveBeenCalledWith(
+      "http://localhost:6277/config",
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          "X-MCP-Proxy-Auth": "Bearer test-proxy-token",
+        }),
+      }),
+    );
+  });
+
+  test("handles config endpoint errors gracefully", async () => {
+    const mockConfig = {
+      ...DEFAULT_INSPECTOR_CONFIG,
+      MCP_PROXY_AUTH_TOKEN: {
+        ...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
+        value: "test-proxy-token",
+      },
+    };
+
+    mockInitializeInspectorConfig.mockReturnValue(mockConfig);
+
+    // Mock fetch to reject
+    (global.fetch as jest.Mock).mockRejectedValue(new Error("Network error"));
+
+    // Spy on console.error
+    const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation();
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        "Error fetching default environment:",
+        expect.any(Error),
+      );
+    });
+
+    consoleErrorSpy.mockRestore();
+  });
+});
--- a/client/src/components/OAuthFlowProgress.tsx
+++ b/client/src/components/OAuthFlowProgress.tsx
@ -156,7 +156,7 @@ export const OAuthFlowProgress = ({
              {authState.resourceMetadataError && (
                <div className="mt-2 p-3 border border-blue-300 bg-blue-50 rounded-md">
                  <p className="text-sm font-medium text-blue-700">
-                    ℹ️ No resource metadata available from{" "}
+                    ℹ️ Problem with resource metadata from{" "}
                    <a
                      href={
                        new URL(
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@ -666,8 +666,13 @@ const Sidebar = ({
                  switch (connectionStatus) {
                    case "connected":
                      return "Connected";
-                    case "error":
-                      return "Connection Error, is your MCP server running?";
+                    case "error": {
+                      const hasProxyToken = config.MCP_PROXY_AUTH_TOKEN?.value;
+                      if (!hasProxyToken) {
+                        return "Connection Error - Did you add the proxy session token in Configuration?";
+                      }
+                      return "Connection Error - Check if your MCP server is running and proxy token is correct";
+                    }
                    case "error-connecting-to-proxy":
                      return "Error Connecting to MCP Inspector Proxy - Check Console logs";
                    default:
--- a/Show more
+++ b/Show more