style: Format test files with Prettier

Co-Authored-By: ashwin@anthropic.com <ashwin@anthropic.com>
Add frontend unit tests
2025-01-16 19:27:49 +00:00 · 2025-01-16 19:24:51 +00:00
73 changed files with 2934 additions and 9855 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -25,11 +25,6 @@ jobs:
      # Working around https://github.com/npm/cli/issues/4828
      # - run: npm ci
      - run: npm install --no-package-lock
-
-      - name: Run client tests
-        working-directory: ./client
-        run: npm test
-
      - run: npm run build

  publish:
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,3 @@ server/build
 client/dist
 client/tsconfig.app.tsbuildinfo
 client/tsconfig.node.tsbuildinfo
-.vscode
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,33 +0,0 @@
-# MCP Inspector Development Guide
-
-## Build Commands
-
- Build all: `npm run build`
- Build client: `npm run build-client`
- Build server: `npm run build-server`
- Development mode: `npm run dev` (use `npm run dev:windows` on Windows)
- Format code: `npm run prettier-fix`
- Client lint: `cd client && npm run lint`
-
-## Code Style Guidelines
-
- Use TypeScript with proper type annotations
- Follow React functional component patterns with hooks
- Use ES modules (import/export) not CommonJS
- Use Prettier for formatting (auto-formatted on commit)
- Follow existing naming conventions:
-  - camelCase for variables and functions
-  - PascalCase for component names and types
-  - kebab-case for file names
- Use async/await for asynchronous operations
- Implement proper error handling with try/catch blocks
- Use Tailwind CSS for styling in the client
- Keep components small and focused on a single responsibility
-
-## Project Organization
-
-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
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -7,13 +7,13 @@ Thanks for your interest in contributing! This guide explains how to get involve
 1. Fork the repository and clone it locally
 2. Install dependencies with `npm install`
 3. Run `npm run dev` to start both client and server in development mode
-4. Use the web UI at http://127.0.0.1:6274 to interact with the inspector
+4. Use the web UI at http://localhost:5173 to interact with the inspector

 ## Development Process & Pull Requests

 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`
+2. Make your changes following existing code style and conventions
+3. Test changes locally
 4. Update documentation as needed
 5. Use clear commit messages explaining your changes
 6. Verify all changes work as expected
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@

 The MCP inspector is a developer tool for testing and debugging MCP servers.

-![MCP Inspector Screenshot](https://raw.githubusercontent.com/modelcontextprotocol/inspector/main/mcp-inspector.png)
+![MCP Inspector Screenshot](mcp-inspector.png)

 ## Running the Inspector

@@ -11,7 +11,7 @@ The MCP inspector is a developer tool for testing and debugging MCP servers.
 To inspect an MCP server implementation, there's no need to clone this repo. Instead, use `npx`. For example, if your server is built at `build/index.js`:

 ```bash
-npx @modelcontextprotocol/inspector node build/index.js
+npx @modelcontextprotocol/inspector build/index.js
 ```

 You can pass both arguments and environment variables to your MCP server. Arguments are passed directly to your server, while environment variables can be set using the `-e` flag:
@@ -21,44 +21,23 @@ You can pass both arguments and environment variables to your MCP server. Argume
 npx @modelcontextprotocol/inspector build/index.js arg1 arg2

 # Pass environment variables only
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 node build/index.js
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js

 # Pass both environment variables and arguments
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 node build/index.js arg1 arg2
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js arg1 arg2

 # Use -- to separate inspector flags from server arguments
-npx @modelcontextprotocol/inspector -e KEY=$VALUE -- node build/index.js -e server-flag
+npx @modelcontextprotocol/inspector -e KEY=$VALUE -- build/index.js -e server-flag
 ```

-The inspector runs both an MCP Inspector (MCPI) client UI (default port 6274) and an MCP Proxy (MCPP) server (default port 6277). Open the MCPI client UI in your browser to use the inspector. (These ports are derived from the T9 dialpad mapping of MCPI and MCPP respectively, as a mnemonic). You can customize the ports if needed:
+The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:

 ```bash
-CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
+CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
 ```

 For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).

-### Authentication
-
-The inspector supports bearer token authentication for SSE connections. Enter your token in the UI when connecting to an MCP server, and it will be sent in the Authorization header.
-
-### Security Considerations
-
-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.
-
-### 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 | ""      |
-
-These settings can be adjusted in real-time through the UI and will persist across sessions.
-
 ### From this repository

 If you're working on the inspector itself:
@@ -69,13 +48,6 @@ Development mode:
 npm run dev
 ```

-> **Note for Windows users:**  
-> On Windows, use the following command instead:
->
-> ```bash
-> npm run dev:windows
-> ```
-
 Production mode:

 ```bash
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -7,7 +7,7 @@ import { fileURLToPath } from "url";
 const __dirname = dirname(fileURLToPath(import.meta.url));

 function delay(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms, true));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }

 async function main() {
@@ -27,15 +27,9 @@ async function main() {
    }

    if (parsingFlags && arg === "-e" && i + 1 < args.length) {
-      const envVar = args[++i];
-      const equalsIndex = envVar.indexOf("=");
-
-      if (equalsIndex !== -1) {
-        const key = envVar.substring(0, equalsIndex);
-        const value = envVar.substring(equalsIndex + 1);
+      const [key, value] = args[++i].split("=");
+      if (key && value) {
        envVars[key] = value;
-      } else {
-        envVars[envVar] = "";
      }
    } else if (!command) {
      command = arg;
@@ -61,8 +55,8 @@ async function main() {
    "cli.js",
  );

-  const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
-  const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
+  const CLIENT_PORT = process.env.CLIENT_PORT ?? "5173";
+  const SERVER_PORT = process.env.SERVER_PORT ?? "3000";

  console.log("Starting MCP inspector...");

@@ -73,40 +67,42 @@ 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,
+
+  const 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)]);
-  } catch (error) {}
+  const client = spawnPromise("node", [inspectorClientPath], {
+    env: { ...process.env, PORT: CLIENT_PORT },
+    signal: abort.signal,
+    echoOutput: true,
+  });

-  if (serverOk) {
-    try {
-      await spawnPromise("node", [inspectorClientPath], {
-        env: { ...process.env, PORT: CLIENT_PORT },
-        signal: abort.signal,
-        echoOutput: true,
-      });
-    } catch (e) {
-      if (!cancelled || process.env.DEBUG) throw e;
-    }
+  // Make sure our server/client didn't immediately fail
+  await Promise.any([server, client, delay(2 * 1000)]);
+  const portParam = SERVER_PORT === "3000" ? "" : `?proxyPort=${SERVER_PORT}`;
+  console.log(
+    `\n🔍 MCP Inspector is up and running at http://localhost:${CLIENT_PORT}${portParam} 🚀`,
+  );
+
+  try {
+    await Promise.any([server, client]);
+  } catch (e) {
+    if (!cancelled || process.env.DEBUG) throw e;
  }

  return 0;
--- a/client/bin/cli.js
+++ b/client/bin/cli.js
@@ -9,25 +9,8 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const distPath = join(__dirname, "../dist");

 const server = http.createServer((request, response) => {
-  return handler(request, response, {
-    public: distPath,
-    rewrites: [{ source: "/**", destination: "/index.html" }],
-  });
+  return handler(request, response, { public: distPath });
 });

-const port = process.env.PORT || 6274;
-server.on("listening", () => {
-  console.log(
-    `🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
-  );
-});
-server.on("error", (err) => {
-  if (err.message.includes(`EADDRINUSE`)) {
-    console.error(
-      `❌  MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
-    );
-  } else {
-    throw err;
-  }
-});
-server.listen(port);
+const port = process.env.PORT || 5173;
+server.listen(port, () => {});
--- a/client/jest.config.cjs
+++ b/client/jest.config.cjs
@@ -1,33 +0,0 @@
-module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
-  moduleNameMapper: {
-    "^@/(.*)$": "<rootDir>/src/$1",
-    "\\.css$": "<rootDir>/src/__mocks__/styleMock.js",
-  },
-  transform: {
-    "^.+\\.tsx?$": [
-      "ts-jest",
-      {
-        jsx: "react-jsx",
-        tsconfig: "tsconfig.jest.json",
-      },
-    ],
-  },
-  extensionsToTreatAsEsm: [".ts", ".tsx"],
-  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-  // Exclude directories and files that don't need to be tested
-  testPathIgnorePatterns: [
-    "/node_modules/",
-    "/dist/",
-    "/bin/",
-    "\\.config\\.(js|ts|cjs|mjs)$",
-  ],
-  // Exclude the same patterns from coverage reports
-  coveragePathIgnorePatterns: [
-    "/node_modules/",
-    "/dist/",
-    "/bin/",
-    "\\.config\\.(js|ts|cjs|mjs)$",
-  ],
-};
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.9.0",
+  "version": "0.3.0",
  "description": "Client-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@@ -18,31 +18,22 @@
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
-    "preview": "vite preview --port 6274",
-    "test": "jest --config jest.config.cjs",
-    "test:watch": "jest --config jest.config.cjs --watch"
+    "preview": "vite preview",
+    "test": "vitest run"
  },
  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.9.0",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.1.3",
+    "@modelcontextprotocol/sdk": "^1.0.3",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.3",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.6",
-    "@radix-ui/react-tooltip": "^1.1.8",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
    "lucide-react": "^0.447.0",
-    "pkce-challenge": "^4.1.0",
-    "prismjs": "^1.30.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
-    "react-simple-code-editor": "^0.14.1",
+    "react-toastify": "^10.0.6",
    "serve-handler": "^6.1.6",
    "tailwind-merge": "^2.5.3",
    "tailwindcss-animate": "^1.0.7",
@@ -52,26 +43,22 @@
    "@eslint/js": "^9.11.1",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
-    "@types/jest": "^29.5.14",
    "@types/node": "^22.7.5",
-    "@types/prismjs": "^1.26.5",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@types/serve-handler": "^6.1.4",
    "@vitejs/plugin-react": "^4.3.2",
    "autoprefixer": "^10.4.20",
-    "co": "^4.6.0",
    "eslint": "^9.11.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^26.0.0",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.13",
-    "ts-jest": "^29.2.6",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vitest": "^3.0.0"
  }
 }
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,3 +1,5 @@
+import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useConnection } from "./lib/hooks/useConnection";
 import {
  ClientRequest,
  CompatibilityCallToolResult,
@@ -8,18 +10,16 @@ import {
  ListPromptsResultSchema,
  ListResourcesResultSchema,
  ListResourceTemplatesResultSchema,
-  ListToolsResultSchema,
  ReadResourceResultSchema,
+  ListToolsResultSchema,
  Resource,
  ResourceTemplate,
  Root,
  ServerNotification,
  Tool,
-  LoggingLevel,
 } from "@modelcontextprotocol/sdk/types.js";
-import React, { Suspense, useEffect, useRef, useState } from "react";
-import { useConnection } from "./lib/hooks/useConnection";
-import { useDraggablePane } from "./lib/hooks/useDraggablePane";
+import { useEffect, useRef, useState } from "react";
+
 import { StdErrNotification } from "./lib/notificationTypes";

 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -43,17 +43,12 @@ import RootsTab from "./components/RootsTab";
 import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
-import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
-import { InspectorConfig } from "./lib/configurationTypes";
-import { getMCPProxyAddress } from "./utils/configUtils";
-import { useToast } from "@/hooks/use-toast";

 const params = new URLSearchParams(window.location.search);
-const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
+const PROXY_PORT = params.get("proxyPort") ?? "3000";
+const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;

 const App = () => {
-  const { toast } = useToast();
-  // Handle OAuth callback route
  const [resources, setResources] = useState<Resource[]>([]);
  const [resourceTemplates, setResourceTemplates] = useState<
    ResourceTemplate[]
@@ -76,15 +71,8 @@ const App = () => {
    return localStorage.getItem("lastArgs") || "";
  });

-  const [sseUrl, setSseUrl] = useState<string>(() => {
-    return localStorage.getItem("lastSseUrl") || "http://localhost:3001/sse";
-  });
-  const [transportType, setTransportType] = useState<"stdio" | "sse">(() => {
-    return (
-      (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio"
-    );
-  });
-  const [logLevel, setLogLevel] = useState<LoggingLevel>("debug");
+  const [sseUrl, setSseUrl] = useState<string>("http://localhost:3001/sse");
+  const [transportType, setTransportType] = useState<"stdio" | "sse">("stdio");
  const [notifications, setNotifications] = useState<ServerNotification[]>([]);
  const [stdErrNotifications, setStdErrNotifications] = useState<
    StdErrNotification[]
@@ -92,31 +80,6 @@ const App = () => {
  const [roots, setRoots] = useState<Root[]>([]);
  const [env, setEnv] = useState<Record<string, string>>({});

-  const [config, setConfig] = useState<InspectorConfig>(() => {
-    const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
-    if (savedConfig) {
-      // merge default config with saved config
-      const mergedConfig = {
-        ...DEFAULT_INSPECTOR_CONFIG,
-        ...JSON.parse(savedConfig),
-      } as InspectorConfig;
-
-      // update description of keys to match the new description (in case of any updates to the default config description)
-      Object.entries(mergedConfig).forEach(([key, value]) => {
-        mergedConfig[key as keyof InspectorConfig] = {
-          ...value,
-          label: DEFAULT_INSPECTOR_CONFIG[key as keyof InspectorConfig].label,
-        };
-      });
-
-      return mergedConfig;
-    }
-    return DEFAULT_INSPECTOR_CONFIG;
-  });
-  const [bearerToken, setBearerToken] = useState<string>(() => {
-    return localStorage.getItem("lastBearerToken") || "";
-  });
-
  const [pendingSampleRequests, setPendingSampleRequests] = useState<
    Array<
      PendingRequest & {
@@ -128,13 +91,25 @@ const App = () => {
  const nextRequestId = useRef(0);
  const rootsRef = useRef<Root[]>([]);

+  const handleApproveSampling = (id: number, result: CreateMessageResult) => {
+    setPendingSampleRequests((prev) => {
+      const request = prev.find((r) => r.id === id);
+      request?.resolve(result);
+      return prev.filter((r) => r.id !== id);
+    });
+  };
+
+  const handleRejectSampling = (id: number) => {
+    setPendingSampleRequests((prev) => {
+      const request = prev.find((r) => r.id === id);
+      request?.reject(new Error("Sampling request rejected"));
+      return prev.filter((r) => r.id !== id);
+    });
+  };
+
  const [selectedResource, setSelectedResource] = useState<Resource | null>(
    null,
  );
-  const [resourceSubscriptions, setResourceSubscriptions] = useState<
-    Set<string>
-  >(new Set<string>());
-
  const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null);
  const [selectedTool, setSelectedTool] = useState<Tool | null>(null);
  const [nextResourceCursor, setNextResourceCursor] = useState<
@@ -156,20 +131,16 @@ const App = () => {
    serverCapabilities,
    mcpClient,
    requestHistory,
-    makeRequest,
+    makeRequest: makeConnectionRequest,
    sendNotification,
-    handleCompletion,
-    completionsSupported,
    connect: connectMcpServer,
-    disconnect: disconnectMcpServer,
  } = useConnection({
    transportType,
    command,
    args,
    sseUrl,
    env,
-    bearerToken,
-    config,
+    proxyServerUrl: PROXY_SERVER_URL,
    onNotification: (notification) => {
      setNotifications((prev) => [...prev, notification as ServerNotification]);
    },
@@ -188,111 +159,13 @@ const App = () => {
    getRoots: () => rootsRef.current,
  });

-  useEffect(() => {
-    localStorage.setItem("lastCommand", command);
-  }, [command]);
-
-  useEffect(() => {
-    localStorage.setItem("lastArgs", args);
-  }, [args]);
-
-  useEffect(() => {
-    localStorage.setItem("lastSseUrl", sseUrl);
-  }, [sseUrl]);
-
-  useEffect(() => {
-    localStorage.setItem("lastTransportType", transportType);
-  }, [transportType]);
-
-  useEffect(() => {
-    localStorage.setItem("lastBearerToken", bearerToken);
-  }, [bearerToken]);
-
-  useEffect(() => {
-    localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
-  }, [config]);
-
-  const hasProcessedRef = useRef(false);
-  // Auto-connect if serverUrl is provided in URL params (e.g. after OAuth callback)
-  useEffect(() => {
-    if (hasProcessedRef.current) {
-      // Only try to connect once
-      return;
-    }
-    const serverUrl = params.get("serverUrl");
-    if (serverUrl) {
-      setSseUrl(serverUrl);
-      setTransportType("sse");
-      // Remove serverUrl from URL without reloading the page
-      const newUrl = new URL(window.location.href);
-      newUrl.searchParams.delete("serverUrl");
-      window.history.replaceState({}, "", newUrl.toString());
-      // Show success toast for OAuth
-      toast({
-        title: "Success",
-        description: "Successfully authenticated with OAuth",
-      });
-      hasProcessedRef.current = true;
-      // Connect to the server
-      connectMcpServer();
-    }
-  }, [connectMcpServer, toast]);
-
-  useEffect(() => {
-    fetch(`${getMCPProxyAddress(config)}/config`)
-      .then((response) => response.json())
-      .then((data) => {
-        setEnv(data.defaultEnvironment);
-        if (data.defaultCommand) {
-          setCommand(data.defaultCommand);
-        }
-        if (data.defaultArgs) {
-          setArgs(data.defaultArgs);
-        }
-      })
-      .catch((error) =>
-        console.error("Error fetching default environment:", error),
-      );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    rootsRef.current = roots;
-  }, [roots]);
-
-  useEffect(() => {
-    if (!window.location.hash) {
-      window.location.hash = "resources";
-    }
-  }, []);
-
-  const handleApproveSampling = (id: number, result: CreateMessageResult) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r) => r.id === id);
-      request?.resolve(result);
-      return prev.filter((r) => r.id !== id);
-    });
-  };
-
-  const handleRejectSampling = (id: number) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r) => r.id === id);
-      request?.reject(new Error("Sampling request rejected"));
-      return prev.filter((r) => r.id !== id);
-    });
-  };
-
-  const clearError = (tabKey: keyof typeof errors) => {
-    setErrors((prev) => ({ ...prev, [tabKey]: null }));
-  };
-
-  const sendMCPRequest = async <T extends z.ZodType>(
+  const makeRequest = async <T extends z.ZodType>(
    request: ClientRequest,
    schema: T,
    tabKey?: keyof typeof errors,
  ) => {
    try {
-      const response = await makeRequest(request, schema);
+      const response = await makeConnectionRequest(request, schema);
      if (tabKey !== undefined) {
        clearError(tabKey);
      }
@@ -309,8 +182,47 @@ const App = () => {
    }
  };

+  useEffect(() => {
+    localStorage.setItem("lastCommand", command);
+  }, [command]);
+
+  useEffect(() => {
+    localStorage.setItem("lastArgs", args);
+  }, [args]);
+
+  useEffect(() => {
+    fetch(`${PROXY_SERVER_URL}/config`)
+      .then((response) => response.json())
+      .then((data) => {
+        setEnv(data.defaultEnvironment);
+        if (data.defaultCommand) {
+          setCommand(data.defaultCommand);
+        }
+        if (data.defaultArgs) {
+          setArgs(data.defaultArgs);
+        }
+      })
+      .catch((error) =>
+        console.error("Error fetching default environment:", error),
+      );
+  }, []);
+
+  useEffect(() => {
+    rootsRef.current = roots;
+  }, [roots]);
+
+  useEffect(() => {
+    if (!window.location.hash) {
+      window.location.hash = "resources";
+    }
+  }, []);
+
+  const clearError = (tabKey: keyof typeof errors) => {
+    setErrors((prev) => ({ ...prev, [tabKey]: null }));
+  };
+
  const listResources = async () => {
-    const response = await sendMCPRequest(
+    const response = await makeRequest(
      {
        method: "resources/list" as const,
        params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
@@ -323,7 +235,7 @@ const App = () => {
  };

  const listResourceTemplates = async () => {
-    const response = await sendMCPRequest(
+    const response = await makeRequest(
      {
        method: "resources/templates/list" as const,
        params: nextResourceTemplateCursor
@@ -340,7 +252,7 @@ const App = () => {
  };

  const readResource = async (uri: string) => {
-    const response = await sendMCPRequest(
+    const response = await makeRequest(
      {
        method: "resources/read" as const,
        params: { uri },
@@ -351,40 +263,8 @@ const App = () => {
    setResourceContent(JSON.stringify(response, null, 2));
  };

-  const subscribeToResource = async (uri: string) => {
-    if (!resourceSubscriptions.has(uri)) {
-      await sendMCPRequest(
-        {
-          method: "resources/subscribe" as const,
-          params: { uri },
-        },
-        z.object({}),
-        "resources",
-      );
-      const clone = new Set(resourceSubscriptions);
-      clone.add(uri);
-      setResourceSubscriptions(clone);
-    }
-  };
-
-  const unsubscribeFromResource = async (uri: string) => {
-    if (resourceSubscriptions.has(uri)) {
-      await sendMCPRequest(
-        {
-          method: "resources/unsubscribe" as const,
-          params: { uri },
-        },
-        z.object({}),
-        "resources",
-      );
-      const clone = new Set(resourceSubscriptions);
-      clone.delete(uri);
-      setResourceSubscriptions(clone);
-    }
-  };
-
  const listPrompts = async () => {
-    const response = await sendMCPRequest(
+    const response = await makeRequest(
      {
        method: "prompts/list" as const,
        params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
@@ -397,7 +277,7 @@ const App = () => {
  };

  const getPrompt = async (name: string, args: Record<string, string> = {}) => {
-    const response = await sendMCPRequest(
+    const response = await makeRequest(
      {
        method: "prompts/get" as const,
        params: { name, arguments: args },
@@ -409,7 +289,7 @@ const App = () => {
  };

  const listTools = async () => {
-    const response = await sendMCPRequest(
+    const response = await makeRequest(
      {
        method: "tools/list" as const,
        params: nextToolCursor ? { cursor: nextToolCursor } : {},
@@ -422,62 +302,27 @@ const App = () => {
  };

  const callTool = async (name: string, params: Record<string, unknown>) => {
-    try {
-      const response = await sendMCPRequest(
-        {
-          method: "tools/call" as const,
-          params: {
-            name,
-            arguments: params,
-            _meta: {
-              progressToken: progressTokenRef.current++,
-            },
+    const response = await makeRequest(
+      {
+        method: "tools/call" as const,
+        params: {
+          name,
+          arguments: params,
+          _meta: {
+            progressToken: progressTokenRef.current++,
          },
        },
-        CompatibilityCallToolResultSchema,
-        "tools",
-      );
-      setToolResult(response);
-    } catch (e) {
-      const toolResult: CompatibilityCallToolResult = {
-        content: [
-          {
-            type: "text",
-            text: (e as Error).message ?? String(e),
-          },
-        ],
-        isError: true,
-      };
-      setToolResult(toolResult);
-    }
+      },
+      CompatibilityCallToolResultSchema,
+      "tools",
+    );
+    setToolResult(response);
  };

  const handleRootsChange = async () => {
    await sendNotification({ method: "notifications/roots/list_changed" });
  };

-  const sendLogLevelRequest = async (level: LoggingLevel) => {
-    await sendMCPRequest(
-      {
-        method: "logging/setLevel" as const,
-        params: { level },
-      },
-      z.object({}),
-    );
-    setLogLevel(level);
-  };
-
-  if (window.location.pathname === "/oauth/callback") {
-    const OAuthCallback = React.lazy(
-      () => import("./components/OAuthCallback"),
-    );
-    return (
-      <Suspense fallback={<div>Loading...</div>}>
-        <OAuthCallback />
-      </Suspense>
-    );
-  }
-
  return (
    <div className="flex h-screen bg-background">
      <Sidebar
@@ -492,16 +337,8 @@ const App = () => {
        setSseUrl={setSseUrl}
        env={env}
        setEnv={setEnv}
-        config={config}
-        setConfig={setConfig}
-        bearerToken={bearerToken}
-        setBearerToken={setBearerToken}
        onConnect={connectMcpServer}
-        onDisconnect={disconnectMcpServer}
        stdErrNotifications={stdErrNotifications}
-        logLevel={logLevel}
-        sendLogLevelRequest={sendLogLevelRequest}
-        loggingSupported={!!serverCapabilities?.logging || false}
      />
      <div className="flex-1 flex flex-col overflow-hidden">
        <div className="flex-1 overflow-auto">
@@ -603,20 +440,6 @@ const App = () => {
                        clearError("resources");
                        setSelectedResource(resource);
                      }}
-                      resourceSubscriptionsSupported={
-                        serverCapabilities?.resources?.subscribe || false
-                      }
-                      resourceSubscriptions={resourceSubscriptions}
-                      subscribeToResource={(uri) => {
-                        clearError("resources");
-                        subscribeToResource(uri);
-                      }}
-                      unsubscribeFromResource={(uri) => {
-                        clearError("resources");
-                        unsubscribeFromResource(uri);
-                      }}
-                      handleCompletion={handleCompletion}
-                      completionsSupported={completionsSupported}
                      resourceContent={resourceContent}
                      nextCursor={nextResourceCursor}
                      nextTemplateCursor={nextResourceTemplateCursor}
@@ -641,8 +464,6 @@ const App = () => {
                        clearError("prompts");
                        setSelectedPrompt(prompt);
                      }}
-                      handleCompletion={handleCompletion}
-                      completionsSupported={completionsSupported}
                      promptContent={promptContent}
                      nextCursor={nextPromptCursor}
                      error={errors.prompts}
@@ -657,10 +478,9 @@ const App = () => {
                        setTools([]);
                        setNextToolCursor(undefined);
                      }}
-                      callTool={async (name, params) => {
+                      callTool={(name, params) => {
                        clearError("tools");
-                        setToolResult(null);
-                        await callTool(name, params);
+                        callTool(name, params);
                      }}
                      selectedTool={selectedTool}
                      setSelectedTool={(tool) => {
@@ -675,7 +495,7 @@ const App = () => {
                    <ConsoleTab />
                    <PingTab
                      onPingClick={() => {
-                        void sendMCPRequest(
+                        void makeRequest(
                          {
                            method: "ping" as const,
                          },
--- a/client/src/mocks/styleMock.js
+++ b/client/src/mocks/styleMock.js
@@ -1 +0,0 @@
-module.exports = {};
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -1,397 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import JsonEditor from "./JsonEditor";
-import { updateValueAtPath } from "@/utils/jsonUtils";
-import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
-import type { JsonValue, JsonSchemaType, JsonObject } from "@/utils/jsonUtils";
-
-interface DynamicJsonFormProps {
-  schema: JsonSchemaType;
-  value: JsonValue;
-  onChange: (value: JsonValue) => void;
-  maxDepth?: number;
-}
-
-const DynamicJsonForm = ({
-  schema,
-  value,
-  onChange,
-  maxDepth = 3,
-}: DynamicJsonFormProps) => {
-  const [isJsonMode, setIsJsonMode] = useState(false);
-  const [jsonError, setJsonError] = useState<string>();
-  // Store the raw JSON string to allow immediate feedback during typing
-  // while deferring parsing until the user stops typing
-  const [rawJsonValue, setRawJsonValue] = useState<string>(
-    JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
-  );
-
-  // Use a ref to manage debouncing timeouts to avoid parsing JSON
-  // on every keystroke which would be inefficient and error-prone
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
-
-  // Debounce JSON parsing and parent updates to handle typing gracefully
-  const debouncedUpdateParent = useCallback(
-    (jsonString: string) => {
-      // Clear any existing timeout
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-
-      // Set a new timeout
-      timeoutRef.current = setTimeout(() => {
-        try {
-          const parsed = JSON.parse(jsonString);
-          onChange(parsed);
-          setJsonError(undefined);
-        } catch {
-          // Don't set error during normal typing
-        }
-      }, 300);
-    },
-    [onChange, setJsonError],
-  );
-
-  // Update rawJsonValue when value prop changes
-  useEffect(() => {
-    if (!isJsonMode) {
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
-      );
-    }
-  }, [value, schema, isJsonMode]);
-
-  const handleSwitchToFormMode = () => {
-    if (isJsonMode) {
-      // When switching to Form mode, ensure we have valid JSON
-      try {
-        const parsed = JSON.parse(rawJsonValue);
-        // Update the parent component's state with the parsed value
-        onChange(parsed);
-        // Switch to form mode
-        setIsJsonMode(false);
-      } catch (err) {
-        setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-      }
-    } else {
-      // Update raw JSON value when switching to JSON mode
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
-      );
-      setIsJsonMode(true);
-    }
-  };
-
-  const formatJson = () => {
-    try {
-      const jsonStr = rawJsonValue.trim();
-      if (!jsonStr) {
-        return;
-      }
-      const formatted = JSON.stringify(JSON.parse(jsonStr), null, 2);
-      setRawJsonValue(formatted);
-      debouncedUpdateParent(formatted);
-      setJsonError(undefined);
-    } catch (err) {
-      setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-    }
-  };
-
-  const renderFormFields = (
-    propSchema: JsonSchemaType,
-    currentValue: JsonValue,
-    path: string[] = [],
-    depth: number = 0,
-  ) => {
-    if (
-      depth >= maxDepth &&
-      (propSchema.type === "object" || propSchema.type === "array")
-    ) {
-      // Render as JSON editor when max depth is reached
-      return (
-        <JsonEditor
-          value={JSON.stringify(
-            currentValue ?? generateDefaultValue(propSchema),
-            null,
-            2,
-          )}
-          onChange={(newValue) => {
-            try {
-              const parsed = JSON.parse(newValue);
-              handleFieldChange(path, parsed);
-              setJsonError(undefined);
-            } catch (err) {
-              setJsonError(err instanceof Error ? err.message : "Invalid JSON");
-            }
-          }}
-          error={jsonError}
-        />
-      );
-    }
-
-    switch (propSchema.type) {
-      case "string":
-        return (
-          <Input
-            type="text"
-            value={(currentValue as string) ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              // Allow clearing non-required fields by setting undefined
-              // This preserves the distinction between empty string and unset
-              if (!val && !propSchema.required) {
-                handleFieldChange(path, undefined);
-              } else {
-                handleFieldChange(path, val);
-              }
-            }}
-            placeholder={propSchema.description}
-            required={propSchema.required}
-          />
-        );
-      case "number":
-        return (
-          <Input
-            type="number"
-            value={(currentValue as number)?.toString() ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              // Allow clearing non-required number fields
-              // This preserves the distinction between 0 and unset
-              if (!val && !propSchema.required) {
-                handleFieldChange(path, undefined);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num)) {
-                  handleFieldChange(path, num);
-                }
-              }
-            }}
-            placeholder={propSchema.description}
-            required={propSchema.required}
-          />
-        );
-      case "integer":
-        return (
-          <Input
-            type="number"
-            step="1"
-            value={(currentValue as number)?.toString() ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              // Allow clearing non-required integer fields
-              // This preserves the distinction between 0 and unset
-              if (!val && !propSchema.required) {
-                handleFieldChange(path, undefined);
-              } else {
-                const num = Number(val);
-                // Only update if it's a valid integer
-                if (!isNaN(num) && Number.isInteger(num)) {
-                  handleFieldChange(path, num);
-                }
-              }
-            }}
-            placeholder={propSchema.description}
-            required={propSchema.required}
-          />
-        );
-      case "boolean":
-        return (
-          <Input
-            type="checkbox"
-            checked={(currentValue as boolean) ?? false}
-            onChange={(e) => handleFieldChange(path, e.target.checked)}
-            className="w-4 h-4"
-            required={propSchema.required}
-          />
-        );
-      case "object": {
-        // Handle case where we have a value but no schema properties
-        const objectValue = (currentValue as JsonObject) || {};
-
-        // If we have schema properties, use them to render fields
-        if (propSchema.properties) {
-          return (
-            <div className="space-y-4 border rounded-md p-4">
-              {Object.entries(propSchema.properties).map(([key, prop]) => (
-                <div key={key} className="space-y-2">
-                  <Label>{formatFieldLabel(key)}</Label>
-                  {renderFormFields(
-                    prop,
-                    objectValue[key],
-                    [...path, key],
-                    depth + 1,
-                  )}
-                </div>
-              ))}
-            </div>
-          );
-        }
-        // If we have a value but no schema properties, render fields based on the value
-        else if (Object.keys(objectValue).length > 0) {
-          return (
-            <div className="space-y-4 border rounded-md p-4">
-              {Object.entries(objectValue).map(([key, value]) => (
-                <div key={key} className="space-y-2">
-                  <Label>{formatFieldLabel(key)}</Label>
-                  <Input
-                    type="text"
-                    value={String(value)}
-                    onChange={(e) =>
-                      handleFieldChange([...path, key], e.target.value)
-                    }
-                  />
-                </div>
-              ))}
-            </div>
-          );
-        }
-        // If we have neither schema properties nor value, return null
-        return null;
-      }
-      case "array": {
-        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
-        if (!propSchema.items) return null;
-        return (
-          <div className="space-y-4">
-            {propSchema.description && (
-              <p className="text-sm text-gray-600">{propSchema.description}</p>
-            )}
-
-            {propSchema.items?.description && (
-              <p className="text-sm text-gray-500">
-                Items: {propSchema.items.description}
-              </p>
-            )}
-
-            <div className="space-y-2">
-              {arrayValue.map((item, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  {renderFormFields(
-                    propSchema.items as JsonSchemaType,
-                    item,
-                    [...path, index.toString()],
-                    depth + 1,
-                  )}
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      const newArray = [...arrayValue];
-                      newArray.splice(index, 1);
-                      handleFieldChange(path, newArray);
-                    }}
-                  >
-                    Remove
-                  </Button>
-                </div>
-              ))}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  const defaultValue = generateDefaultValue(
-                    propSchema.items as JsonSchemaType,
-                  );
-                  handleFieldChange(path, [
-                    ...arrayValue,
-                    defaultValue ?? null,
-                  ]);
-                }}
-                title={
-                  propSchema.items?.description
-                    ? `Add new ${propSchema.items.description}`
-                    : "Add new item"
-                }
-              >
-                Add Item
-              </Button>
-            </div>
-          </div>
-        );
-      }
-      default:
-        return null;
-    }
-  };
-
-  const handleFieldChange = (path: string[], fieldValue: JsonValue) => {
-    if (path.length === 0) {
-      onChange(fieldValue);
-      return;
-    }
-
-    try {
-      const newValue = updateValueAtPath(value, path, fieldValue);
-      onChange(newValue);
-    } catch (error) {
-      console.error("Failed to update form value:", error);
-      onChange(value);
-    }
-  };
-
-  const shouldUseJsonMode =
-    schema.type === "object" &&
-    (!schema.properties || Object.keys(schema.properties).length === 0);
-
-  useEffect(() => {
-    if (shouldUseJsonMode && !isJsonMode) {
-      setIsJsonMode(true);
-    }
-  }, [shouldUseJsonMode, isJsonMode]);
-
-  return (
-    <div className="space-y-4">
-      <div className="flex justify-end space-x-2">
-        {isJsonMode && (
-          <Button variant="outline" size="sm" onClick={formatJson}>
-            Format JSON
-          </Button>
-        )}
-        <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
-          {isJsonMode ? "Switch to Form" : "Switch to JSON"}
-        </Button>
-      </div>
-
-      {isJsonMode ? (
-        <JsonEditor
-          value={rawJsonValue}
-          onChange={(newValue) => {
-            // Always update local state
-            setRawJsonValue(newValue);
-
-            // Use the debounced function to attempt parsing and updating parent
-            debouncedUpdateParent(newValue);
-          }}
-          error={jsonError}
-        />
-      ) : // If schema type is object but value is not an object or is empty, and we have actual JSON data,
-      // render a simple representation of the JSON data
-      schema.type === "object" &&
-        (typeof value !== "object" ||
-          value === null ||
-          Object.keys(value).length === 0) &&
-        rawJsonValue &&
-        rawJsonValue !== "{}" ? (
-        <div className="space-y-4 border rounded-md p-4">
-          <p className="text-sm text-gray-500">
-            Form view not available for this JSON structure. Using simplified
-            view:
-          </p>
-          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto">
-            {rawJsonValue}
-          </pre>
-          <p className="text-sm text-gray-500">
-            Use JSON mode for full editing capabilities.
-          </p>
-        </div>
-      ) : (
-        renderFormFields(schema, value)
-      )}
-    </div>
-  );
-};
-
-export default DynamicJsonForm;
--- a/client/src/components/History.tsx
+++ b/client/src/components/History.tsx
@@ -1,6 +1,6 @@
 import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
+import { Copy } from "lucide-react";
 import { useState } from "react";
-import JsonView from "./JsonView";

 const HistoryAndNotifications = ({
  requestHistory,
@@ -24,6 +24,10 @@ const HistoryAndNotifications = ({
    setExpandedNotifications((prev) => ({ ...prev, [index]: !prev[index] }));
  };

+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
  return (
    <div className="bg-card overflow-hidden flex h-full">
      <div className="flex-1 overflow-y-auto p-4 border-r">
@@ -63,12 +67,16 @@ const HistoryAndNotifications = ({
                          <span className="font-semibold text-blue-600">
                            Request:
                          </span>
+                          <button
+                            onClick={() => copyToClipboard(request.request)}
+                            className="text-blue-500 hover:text-blue-700"
+                          >
+                            <Copy size={16} />
+                          </button>
                        </div>
-
-                        <JsonView
-                          data={request.request}
-                          className="bg-background"
-                        />
+                        <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                          {JSON.stringify(JSON.parse(request.request), null, 2)}
+                        </pre>
                      </div>
                      {request.response && (
                        <div className="mt-2">
@@ -76,11 +84,20 @@ const HistoryAndNotifications = ({
                            <span className="font-semibold text-green-600">
                              Response:
                            </span>
+                            <button
+                              onClick={() => copyToClipboard(request.response!)}
+                              className="text-blue-500 hover:text-blue-700"
+                            >
+                              <Copy size={16} />
+                            </button>
                          </div>
-                          <JsonView
-                            data={request.response}
-                            className="bg-background"
-                          />
+                          <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                            {JSON.stringify(
+                              JSON.parse(request.response),
+                              null,
+                              2,
+                            )}
+                          </pre>
                        </div>
                      )}
                    </>
@@ -120,11 +137,18 @@ const HistoryAndNotifications = ({
                        <span className="font-semibold text-purple-600">
                          Details:
                        </span>
+                        <button
+                          onClick={() =>
+                            copyToClipboard(JSON.stringify(notification))
+                          }
+                          className="text-blue-500 hover:text-blue-700"
+                        >
+                          <Copy size={16} />
+                        </button>
                      </div>
-                      <JsonView
-                        data={JSON.stringify(notification, null, 2)}
-                        className="bg-background"
-                      />
+                      <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                        {JSON.stringify(notification, null, 2)}
+                      </pre>
                    </div>
                  )}
                </li>
--- a/client/src/components/JsonEditor.tsx
+++ b/client/src/components/JsonEditor.tsx
@@ -1,67 +0,0 @@
-import { useState, useEffect } from "react";
-import Editor from "react-simple-code-editor";
-import Prism from "prismjs";
-import "prismjs/components/prism-json";
-import "prismjs/themes/prism.css";
-
-interface JsonEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  error?: string;
-}
-
-const JsonEditor = ({
-  value,
-  onChange,
-  error: externalError,
-}: JsonEditorProps) => {
-  const [editorContent, setEditorContent] = useState(value || "");
-  const [internalError, setInternalError] = useState<string | undefined>(
-    undefined,
-  );
-
-  useEffect(() => {
-    setEditorContent(value || "");
-  }, [value]);
-
-  const handleEditorChange = (newContent: string) => {
-    setEditorContent(newContent);
-    setInternalError(undefined);
-    onChange(newContent);
-  };
-
-  const displayError = internalError || externalError;
-
-  return (
-    <div className="relative">
-      <div
-        className={`border rounded-md ${
-          displayError
-            ? "border-red-500"
-            : "border-gray-200 dark:border-gray-800"
-        }`}
-      >
-        <Editor
-          value={editorContent}
-          onValueChange={handleEditorChange}
-          highlight={(code) =>
-            Prism.highlight(code, Prism.languages.json, "json")
-          }
-          padding={10}
-          style={{
-            fontFamily: '"Fira code", "Fira Mono", monospace',
-            fontSize: 14,
-            backgroundColor: "transparent",
-            minHeight: "100px",
-          }}
-          className="w-full"
-        />
-      </div>
-      {displayError && (
-        <p className="text-sm text-red-500 mt-1">{displayError}</p>
-      )}
-    </div>
-  );
-};
-
-export default JsonEditor;
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -1,286 +0,0 @@
-import { useState, memo, useMemo, useCallback, useEffect } from "react";
-import type { JsonValue } from "@/utils/jsonUtils";
-import clsx from "clsx";
-import { Copy, CheckCheck } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useToast } from "@/hooks/use-toast";
-import { getDataType, tryParseJson } from "@/utils/jsonUtils";
-
-interface JsonViewProps {
-  data: unknown;
-  name?: string;
-  initialExpandDepth?: number;
-  className?: string;
-  withCopyButton?: boolean;
-  isError?: boolean;
-}
-
-const JsonView = memo(
-  ({
-    data,
-    name,
-    initialExpandDepth = 3,
-    className,
-    withCopyButton = true,
-    isError = false,
-  }: JsonViewProps) => {
-    const { toast } = useToast();
-    const [copied, setCopied] = useState(false);
-
-    useEffect(() => {
-      let timeoutId: NodeJS.Timeout;
-      if (copied) {
-        timeoutId = setTimeout(() => {
-          setCopied(false);
-        }, 500);
-      }
-      return () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-      };
-    }, [copied]);
-
-    const normalizedData = useMemo(() => {
-      return typeof data === "string"
-        ? tryParseJson(data).success
-          ? tryParseJson(data).data
-          : data
-        : data;
-    }, [data]);
-
-    const handleCopy = useCallback(() => {
-      try {
-        navigator.clipboard.writeText(
-          typeof normalizedData === "string"
-            ? normalizedData
-            : JSON.stringify(normalizedData, null, 2),
-        );
-        setCopied(true);
-      } catch (error) {
-        toast({
-          title: "Error",
-          description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
-          variant: "destructive",
-        });
-      }
-    }, [toast, normalizedData]);
-
-    return (
-      <div className={clsx("p-4 border rounded relative", className)}>
-        {withCopyButton && (
-          <Button
-            size="icon"
-            variant="ghost"
-            className="absolute top-2 right-2"
-            onClick={handleCopy}
-          >
-            {copied ? (
-              <CheckCheck className="size-4 dark:text-green-700 text-green-600" />
-            ) : (
-              <Copy className="size-4 text-foreground" />
-            )}
-          </Button>
-        )}
-        <div className="font-mono text-sm transition-all duration-300">
-          <JsonNode
-            data={normalizedData as JsonValue}
-            name={name}
-            depth={0}
-            initialExpandDepth={initialExpandDepth}
-            isError={isError}
-          />
-        </div>
-      </div>
-    );
-  },
-);
-
-JsonView.displayName = "JsonView";
-
-interface JsonNodeProps {
-  data: JsonValue;
-  name?: string;
-  depth: number;
-  initialExpandDepth: number;
-  isError?: boolean;
-}
-
-const JsonNode = memo(
-  ({
-    data,
-    name,
-    depth = 0,
-    initialExpandDepth,
-    isError = false,
-  }: JsonNodeProps) => {
-    const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
-    const [typeStyleMap] = useState<Record<string, string>>({
-      number: "text-blue-600",
-      boolean: "text-amber-600",
-      null: "text-purple-600",
-      undefined: "text-gray-600",
-      string: "text-green-600 group-hover:text-green-500",
-      error: "text-red-600 group-hover:text-red-500",
-      default: "text-gray-700",
-    });
-    const dataType = getDataType(data);
-
-    const renderCollapsible = (isArray: boolean) => {
-      const items = isArray
-        ? (data as JsonValue[])
-        : Object.entries(data as Record<string, JsonValue>);
-      const itemCount = items.length;
-      const isEmpty = itemCount === 0;
-
-      const symbolMap = {
-        open: isArray ? "[" : "{",
-        close: isArray ? "]" : "}",
-        collapsed: isArray ? "[ ... ]" : "{ ... }",
-        empty: isArray ? "[]" : "{}",
-      };
-
-      if (isEmpty) {
-        return (
-          <div className="flex items-center">
-            {name && (
-              <span className="mr-1 text-gray-600 dark:text-gray-400">
-                {name}:
-              </span>
-            )}
-            <span className="text-gray-500">{symbolMap.empty}</span>
-          </div>
-        );
-      }
-
-      return (
-        <div className="flex flex-col">
-          <div
-            className="flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20"
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            {name && (
-              <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
-                {name}:
-              </span>
-            )}
-            {isExpanded ? (
-              <span className="text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
-                {symbolMap.open}
-              </span>
-            ) : (
-              <>
-                <span className="text-gray-600 dark:group-hover:text-gray-100 group-hover:text-gray-400">
-                  {symbolMap.collapsed}
-                </span>
-                <span className="ml-1 text-gray-700 dark:group-hover:text-gray-100 group-hover:text-gray-400">
-                  {itemCount} {itemCount === 1 ? "item" : "items"}
-                </span>
-              </>
-            )}
-          </div>
-          {isExpanded && (
-            <>
-              <div className="pl-2 ml-4 border-l border-gray-200 dark:border-gray-800">
-                {isArray
-                  ? (items as JsonValue[]).map((item, index) => (
-                      <div key={index} className="my-1">
-                        <JsonNode
-                          data={item}
-                          name={`${index}`}
-                          depth={depth + 1}
-                          initialExpandDepth={initialExpandDepth}
-                        />
-                      </div>
-                    ))
-                  : (items as [string, JsonValue][]).map(([key, value]) => (
-                      <div key={key} className="my-1">
-                        <JsonNode
-                          data={value}
-                          name={key}
-                          depth={depth + 1}
-                          initialExpandDepth={initialExpandDepth}
-                        />
-                      </div>
-                    ))}
-              </div>
-              <div className="text-gray-600 dark:text-gray-400">
-                {symbolMap.close}
-              </div>
-            </>
-          )}
-        </div>
-      );
-    };
-
-    const renderString = (value: string) => {
-      const maxLength = 100;
-      const isTooLong = value.length > maxLength;
-
-      if (!isTooLong) {
-        return (
-          <div className="flex mr-1 rounded hover:bg-gray-800/20">
-            {name && (
-              <span className="mr-1 text-gray-600 dark:text-gray-400">
-                {name}:
-              </span>
-            )}
-            <pre
-              className={clsx(
-                typeStyleMap.string,
-                "break-all whitespace-pre-wrap",
-              )}
-            >
-              "{value}"
-            </pre>
-          </div>
-        );
-      }
-
-      return (
-        <div className="flex mr-1 rounded group hover:bg-gray-800/20">
-          {name && (
-            <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
-              {name}:
-            </span>
-          )}
-          <pre
-            className={clsx(
-              isError ? typeStyleMap.error : typeStyleMap.string,
-              "cursor-pointer break-all whitespace-pre-wrap",
-            )}
-            onClick={() => setIsExpanded(!isExpanded)}
-            title={isExpanded ? "Click to collapse" : "Click to expand"}
-          >
-            {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
-          </pre>
-        </div>
-      );
-    };
-
-    switch (dataType) {
-      case "object":
-      case "array":
-        return renderCollapsible(dataType === "array");
-      case "string":
-        return renderString(data as string);
-      default:
-        return (
-          <div className="flex items-center mr-1 rounded hover:bg-gray-800/20">
-            {name && (
-              <span className="mr-1 text-gray-600 dark:text-gray-400">
-                {name}:
-              </span>
-            )}
-            <span className={typeStyleMap[dataType] || typeStyleMap.default}>
-              {data === null ? "null" : String(data)}
-            </span>
-          </div>
-        );
-    }
-  },
-);
-
-JsonNode.displayName = "JsonNode";
-
-export default JsonView;
--- a/client/src/components/ListPane.test.tsx
+++ b/client/src/components/ListPane.test.tsx
@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import ListPane from "./ListPane";
+import { describe, it, expect, vi } from "vitest";
+
+describe("ListPane", () => {
+  const defaultProps = {
+    items: [
+      { id: 1, name: "Item 1" },
+      { id: 2, name: "Item 2" },
+    ],
+    listItems: vi.fn(),
+    clearItems: vi.fn(),
+    setSelectedItem: vi.fn(),
+    renderItem: (item: { name: string }) => <span>{item.name}</span>,
+    title: "Test List",
+    buttonText: "List Items",
+  };
+
+  it("renders title correctly", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Test List")).toBeInTheDocument();
+  });
+
+  it("renders list items using renderItem prop", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  it("calls listItems when List Items button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("List Items"));
+    expect(defaultProps.listItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls clearItems when Clear button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Clear"));
+    expect(defaultProps.clearItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls setSelectedItem when an item is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Item 1"));
+    expect(defaultProps.setSelectedItem).toHaveBeenCalledWith(
+      defaultProps.items[0],
+    );
+  });
+
+  it("disables Clear button when items array is empty", () => {
+    render(<ListPane {...defaultProps} items={[]} />);
+    expect(screen.getByText("Clear")).toBeDisabled();
+  });
+
+  it("respects isButtonDisabled prop for List Items button", () => {
+    render(<ListPane {...defaultProps} isButtonDisabled={true} />);
+    expect(screen.getByText("List Items")).toBeDisabled();
+  });
+});
--- a/client/src/components/ListPane.tsx
+++ b/client/src/components/ListPane.tsx
@@ -22,7 +22,7 @@ const ListPane = <T extends object>({
  isButtonDisabled,
 }: ListPaneProps<T>) => (
  <div className="bg-card rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200 dark:border-gray-800">
+    <div className="p-4 border-b border-gray-200 dark:border-gray-700">
      <h3 className="font-semibold dark:text-white">{title}</h3>
    </div>
    <div className="p-4">
--- a/client/src/components/OAuthCallback.tsx
+++ b/client/src/components/OAuthCallback.tsx
@@ -1,56 +0,0 @@
-import { useEffect, useRef } from "react";
-import { authProvider } from "../lib/auth";
-import { SESSION_KEYS } from "../lib/constants";
-import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
-
-const OAuthCallback = () => {
-  const hasProcessedRef = useRef(false);
-
-  useEffect(() => {
-    const handleCallback = async () => {
-      // Skip if we've already processed this callback
-      if (hasProcessedRef.current) {
-        return;
-      }
-      hasProcessedRef.current = true;
-
-      const params = new URLSearchParams(window.location.search);
-      const code = params.get("code");
-      const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
-
-      if (!code || !serverUrl) {
-        console.error("Missing code or server URL");
-        window.location.href = "/";
-        return;
-      }
-
-      try {
-        const result = await auth(authProvider, {
-          serverUrl,
-          authorizationCode: code,
-        });
-        if (result !== "AUTHORIZED") {
-          throw new Error(
-            `Expected to be authorized after providing auth code, got: ${result}`,
-          );
-        }
-
-        // Redirect back to the main app with server URL to trigger auto-connect
-        window.location.href = `/?serverUrl=${encodeURIComponent(serverUrl)}`;
-      } catch (error) {
-        console.error("OAuth callback error:", error);
-        window.location.href = "/";
-      }
-    };
-
-    void handleCallback();
-  }, []);
-
-  return (
-    <div className="flex items-center justify-center h-screen">
-      <p className="text-lg text-gray-500">Processing OAuth callback...</p>
-    </div>
-  );
-};
-
-export default OAuthCallback;
--- a/client/src/components/PingTab.tsx
+++ b/client/src/components/PingTab.tsx
@@ -3,16 +3,16 @@ import { Button } from "@/components/ui/button";

 const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
  return (
-    <TabsContent value="ping">
-      <div className="grid grid-cols-2 gap-4">
-        <div className="col-span-2 flex justify-center items-center">
-          <Button
-            onClick={onPingClick}
-            className="font-bold py-6 px-12 rounded-full"
-          >
-            Ping Server
-          </Button>
-        </div>
+    <TabsContent value="ping" className="grid grid-cols-2 gap-4">
+      <div className="col-span-2 flex justify-center items-center">
+        <Button
+          onClick={onPingClick}
+          className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-6 px-12 rounded-full shadow-lg transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-300 animate-pulse"
+        >
+          <span className="text-3xl mr-2">🚀</span>
+          MEGA PING
+          <span className="text-3xl ml-2">💥</span>
+        </Button>
      </div>
    </TabsContent>
  );
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -1,19 +1,13 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Combobox } from "@/components/ui/combobox";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
-
-import {
-  ListPromptsResult,
-  PromptReference,
-  ResourceReference,
-} from "@modelcontextprotocol/sdk/types.js";
+import { Textarea } from "@/components/ui/textarea";
+import { ListPromptsResult } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import ListPane from "./ListPane";
-import { useCompletionState } from "@/lib/hooks/useCompletionState";
-import JsonView from "./JsonView";

 export type Prompt = {
  name: string;
@@ -32,8 +26,6 @@ const PromptsTab = ({
  getPrompt,
  selectedPrompt,
  setSelectedPrompt,
-  handleCompletion,
-  completionsSupported,
  promptContent,
  nextCursor,
  error,
@@ -44,37 +36,14 @@ const PromptsTab = ({
  getPrompt: (name: string, args: Record<string, string>) => void;
  selectedPrompt: Prompt | null;
  setSelectedPrompt: (prompt: Prompt) => void;
-  handleCompletion: (
-    ref: PromptReference | ResourceReference,
-    argName: string,
-    value: string,
-  ) => Promise<string[]>;
-  completionsSupported: boolean;
  promptContent: string;
  nextCursor: ListPromptsResult["nextCursor"];
  error: string | null;
 }) => {
  const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
-  const { completions, clearCompletions, requestCompletions } =
-    useCompletionState(handleCompletion, completionsSupported);

-  useEffect(() => {
-    clearCompletions();
-  }, [clearCompletions, selectedPrompt]);
-
-  const handleInputChange = async (argName: string, value: string) => {
+  const handleInputChange = (argName: string, value: string) => {
    setPromptArgs((prev) => ({ ...prev, [argName]: value }));
-
-    if (selectedPrompt) {
-      requestCompletions(
-        {
-          type: "ref/prompt",
-          name: selectedPrompt.name,
-        },
-        argName,
-        value,
-      );
-    }
  };

  const handleGetPrompt = () => {
@@ -84,88 +53,85 @@ const PromptsTab = ({
  };

  return (
-    <TabsContent value="prompts">
-      <div className="grid grid-cols-2 gap-4">
-        <ListPane
-          items={prompts}
-          listItems={listPrompts}
-          clearItems={clearPrompts}
-          setSelectedItem={(prompt) => {
-            setSelectedPrompt(prompt);
-            setPromptArgs({});
-          }}
-          renderItem={(prompt) => (
-            <>
-              <span className="flex-1">{prompt.name}</span>
-              <span className="text-sm text-gray-500">
-                {prompt.description}
-              </span>
-            </>
+    <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
+      <ListPane
+        items={prompts}
+        listItems={listPrompts}
+        clearItems={clearPrompts}
+        setSelectedItem={(prompt) => {
+          setSelectedPrompt(prompt);
+          setPromptArgs({});
+        }}
+        renderItem={(prompt) => (
+          <>
+            <span className="flex-1">{prompt.name}</span>
+            <span className="text-sm text-gray-500">{prompt.description}</span>
+          </>
+        )}
+        title="Prompts"
+        buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
+        isButtonDisabled={!nextCursor && prompts.length > 0}
+      />
+
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">
+            {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedPrompt ? (
+            <div className="space-y-4">
+              {selectedPrompt.description && (
+                <p className="text-sm text-gray-600">
+                  {selectedPrompt.description}
+                </p>
+              )}
+              {selectedPrompt.arguments?.map((arg) => (
+                <div key={arg.name}>
+                  <Label htmlFor={arg.name}>{arg.name}</Label>
+                  <Input
+                    id={arg.name}
+                    placeholder={`Enter ${arg.name}`}
+                    value={promptArgs[arg.name] || ""}
+                    onChange={(e) =>
+                      handleInputChange(arg.name, e.target.value)
+                    }
+                  />
+                  {arg.description && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      {arg.description}
+                      {arg.required && (
+                        <span className="text-xs mt-1 ml-1">(Required)</span>
+                      )}
+                    </p>
+                  )}
+                </div>
+              ))}
+              <Button onClick={handleGetPrompt} className="w-full">
+                Get Prompt
+              </Button>
+              {promptContent && (
+                <Textarea
+                  value={promptContent}
+                  readOnly
+                  className="h-64 font-mono"
+                />
+              )}
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a prompt from the list to view and use it
+              </AlertDescription>
+            </Alert>
          )}
-          title="Prompts"
-          buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
-          isButtonDisabled={!nextCursor && prompts.length > 0}
-        />
-
-        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
-            <h3 className="font-semibold">
-              {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
-            </h3>
-          </div>
-          <div className="p-4">
-            {error ? (
-              <Alert variant="destructive">
-                <AlertCircle className="h-4 w-4" />
-                <AlertTitle>Error</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            ) : selectedPrompt ? (
-              <div className="space-y-4">
-                {selectedPrompt.description && (
-                  <p className="text-sm text-gray-600">
-                    {selectedPrompt.description}
-                  </p>
-                )}
-                {selectedPrompt.arguments?.map((arg) => (
-                  <div key={arg.name}>
-                    <Label htmlFor={arg.name}>{arg.name}</Label>
-                    <Combobox
-                      id={arg.name}
-                      placeholder={`Enter ${arg.name}`}
-                      value={promptArgs[arg.name] || ""}
-                      onChange={(value) => handleInputChange(arg.name, value)}
-                      onInputChange={(value) =>
-                        handleInputChange(arg.name, value)
-                      }
-                      options={completions[arg.name] || []}
-                    />
-
-                    {arg.description && (
-                      <p className="text-xs text-gray-500 mt-1">
-                        {arg.description}
-                        {arg.required && (
-                          <span className="text-xs mt-1 ml-1">(Required)</span>
-                        )}
-                      </p>
-                    )}
-                  </div>
-                ))}
-                <Button onClick={handleGetPrompt} className="w-full">
-                  Get Prompt
-                </Button>
-                {promptContent && (
-                  <JsonView data={promptContent} withCopyButton={false} />
-                )}
-              </div>
-            ) : (
-              <Alert>
-                <AlertDescription>
-                  Select a prompt from the list to view and use it
-                </AlertDescription>
-              </Alert>
-            )}
-          </div>
        </div>
      </div>
    </TabsContent>
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -1,21 +1,16 @@
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Combobox } from "@/components/ui/combobox";
+import { Input } from "@/components/ui/input";
 import { TabsContent } from "@/components/ui/tabs";
 import {
  ListResourcesResult,
  Resource,
  ResourceTemplate,
  ListResourceTemplatesResult,
-  ResourceReference,
-  PromptReference,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
-import { useEffect, useState } from "react";
-import { useCompletionState } from "@/lib/hooks/useCompletionState";
-import JsonView from "./JsonView";
+import { useState } from "react";

 const ResourcesTab = ({
  resources,
@@ -27,12 +22,6 @@ const ResourcesTab = ({
  readResource,
  selectedResource,
  setSelectedResource,
-  resourceSubscriptionsSupported,
-  resourceSubscriptions,
-  subscribeToResource,
-  unsubscribeFromResource,
-  handleCompletion,
-  completionsSupported,
  resourceContent,
  nextCursor,
  nextTemplateCursor,
@@ -47,20 +36,10 @@ const ResourcesTab = ({
  readResource: (uri: string) => void;
  selectedResource: Resource | null;
  setSelectedResource: (resource: Resource | null) => void;
-  handleCompletion: (
-    ref: ResourceReference | PromptReference,
-    argName: string,
-    value: string,
-  ) => Promise<string[]>;
-  completionsSupported: boolean;
  resourceContent: string;
  nextCursor: ListResourcesResult["nextCursor"];
  nextTemplateCursor: ListResourceTemplatesResult["nextCursor"];
  error: string | null;
-  resourceSubscriptionsSupported: boolean;
-  resourceSubscriptions: Set<string>;
-  subscribeToResource: (uri: string) => void;
-  unsubscribeFromResource: (uri: string) => void;
 }) => {
  const [selectedTemplate, setSelectedTemplate] =
    useState<ResourceTemplate | null>(null);
@@ -68,13 +47,6 @@ const ResourcesTab = ({
    {},
  );

-  const { completions, clearCompletions, requestCompletions } =
-    useCompletionState(handleCompletion, completionsSupported);
-
-  useEffect(() => {
-    clearCompletions();
-  }, [clearCompletions]);
-
  const fillTemplate = (
    template: string,
    values: Record<string, string>,
@@ -85,21 +57,6 @@ const ResourcesTab = ({
    );
  };

-  const handleTemplateValueChange = async (key: string, value: string) => {
-    setTemplateValues((prev) => ({ ...prev, [key]: value }));
-
-    if (selectedTemplate?.uriTemplate) {
-      requestCompletions(
-        {
-          type: "ref/resource",
-          uri: selectedTemplate.uriTemplate,
-        },
-        key,
-        value,
-      );
-    }
-  };
-
  const handleReadTemplateResource = () => {
    if (selectedTemplate) {
      const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
@@ -111,158 +68,134 @@ const ResourcesTab = ({
  };

  return (
-    <TabsContent value="resources">
-      <div className="grid grid-cols-3 gap-4">
-        <ListPane
-          items={resources}
-          listItems={listResources}
-          clearItems={clearResources}
-          setSelectedItem={(resource) => {
-            setSelectedResource(resource);
-            readResource(resource.uri);
-            setSelectedTemplate(null);
-          }}
-          renderItem={(resource) => (
-            <div className="flex items-center w-full">
-              <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-              <span className="flex-1 truncate" title={resource.uri.toString()}>
-                {resource.name}
-              </span>
-              <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-            </div>
-          )}
-          title="Resources"
-          buttonText={nextCursor ? "List More Resources" : "List Resources"}
-          isButtonDisabled={!nextCursor && resources.length > 0}
-        />
+    <TabsContent value="resources" className="grid grid-cols-3 gap-4">
+      <ListPane
+        items={resources}
+        listItems={listResources}
+        clearItems={clearResources}
+        setSelectedItem={(resource) => {
+          setSelectedResource(resource);
+          readResource(resource.uri);
+          setSelectedTemplate(null);
+        }}
+        renderItem={(resource) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={resource.uri.toString()}>
+              {resource.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+          </div>
+        )}
+        title="Resources"
+        buttonText={nextCursor ? "List More Resources" : "List Resources"}
+        isButtonDisabled={!nextCursor && resources.length > 0}
+      />

-        <ListPane
-          items={resourceTemplates}
-          listItems={listResourceTemplates}
-          clearItems={clearResourceTemplates}
-          setSelectedItem={(template) => {
-            setSelectedTemplate(template);
-            setSelectedResource(null);
-            setTemplateValues({});
-          }}
-          renderItem={(template) => (
-            <div className="flex items-center w-full">
-              <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-              <span className="flex-1 truncate" title={template.uriTemplate}>
-                {template.name}
-              </span>
-              <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-            </div>
-          )}
-          title="Resource Templates"
-          buttonText={
-            nextTemplateCursor ? "List More Templates" : "List Templates"
-          }
-          isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
-        />
+      <ListPane
+        items={resourceTemplates}
+        listItems={listResourceTemplates}
+        clearItems={clearResourceTemplates}
+        setSelectedItem={(template) => {
+          setSelectedTemplate(template);
+          setSelectedResource(null);
+          setTemplateValues({});
+        }}
+        renderItem={(template) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={template.uriTemplate}>
+              {template.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+          </div>
+        )}
+        title="Resource Templates"
+        buttonText={
+          nextTemplateCursor ? "List More Templates" : "List Templates"
+        }
+        isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
+      />

-        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
-            <h3
-              className="font-semibold truncate"
-              title={selectedResource?.name || selectedTemplate?.name}
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+          <h3
+            className="font-semibold truncate"
+            title={selectedResource?.name || selectedTemplate?.name}
+          >
+            {selectedResource
+              ? selectedResource.name
+              : selectedTemplate
+                ? selectedTemplate.name
+                : "Select a resource or template"}
+          </h3>
+          {selectedResource && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => readResource(selectedResource.uri)}
            >
-              {selectedResource
-                ? selectedResource.name
-                : selectedTemplate
-                  ? selectedTemplate.name
-                  : "Select a resource or template"}
-            </h3>
-            {selectedResource && (
-              <div className="flex row-auto gap-1 justify-end w-2/5">
-                {resourceSubscriptionsSupported &&
-                  !resourceSubscriptions.has(selectedResource.uri) && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => subscribeToResource(selectedResource.uri)}
-                    >
-                      Subscribe
-                    </Button>
-                  )}
-                {resourceSubscriptionsSupported &&
-                  resourceSubscriptions.has(selectedResource.uri) && (
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() =>
-                        unsubscribeFromResource(selectedResource.uri)
-                      }
-                    >
-                      Unsubscribe
-                    </Button>
-                  )}
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => readResource(selectedResource.uri)}
-                >
-                  <RefreshCw className="w-4 h-4 mr-2" />
-                  Refresh
-                </Button>
-              </div>
-            )}
-          </div>
-          <div className="p-4">
-            {error ? (
-              <Alert variant="destructive">
-                <AlertCircle className="h-4 w-4" />
-                <AlertTitle>Error</AlertTitle>
-                <AlertDescription>{error}</AlertDescription>
-              </Alert>
-            ) : selectedResource ? (
-              <JsonView
-                data={resourceContent}
-                className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100"
-              />
-            ) : selectedTemplate ? (
-              <div className="space-y-4">
-                <p className="text-sm text-gray-600">
-                  {selectedTemplate.description}
-                </p>
-                {selectedTemplate.uriTemplate
-                  .match(/{([^}]+)}/g)
-                  ?.map((param) => {
-                    const key = param.slice(1, -1);
-                    return (
-                      <div key={key}>
-                        <Label htmlFor={key}>{key}</Label>
-                        <Combobox
-                          id={key}
-                          placeholder={`Enter ${key}`}
-                          value={templateValues[key] || ""}
-                          onChange={(value) =>
-                            handleTemplateValueChange(key, value)
-                          }
-                          onInputChange={(value) =>
-                            handleTemplateValueChange(key, value)
-                          }
-                          options={completions[key] || []}
-                        />
-                      </div>
-                    );
-                  })}
-                <Button
-                  onClick={handleReadTemplateResource}
-                  disabled={Object.keys(templateValues).length === 0}
-                >
-                  Read Resource
-                </Button>
-              </div>
-            ) : (
-              <Alert>
-                <AlertDescription>
-                  Select a resource or template from the list to view its
-                  contents
-                </AlertDescription>
-              </Alert>
-            )}
-          </div>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Refresh
+            </Button>
+          )}
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedResource ? (
+            <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
+              {resourceContent}
+            </pre>
+          ) : selectedTemplate ? (
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                {selectedTemplate.description}
+              </p>
+              {selectedTemplate.uriTemplate
+                .match(/{([^}]+)}/g)
+                ?.map((param) => {
+                  const key = param.slice(1, -1);
+                  return (
+                    <div key={key}>
+                      <label
+                        htmlFor={key}
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        {key}
+                      </label>
+                      <Input
+                        id={key}
+                        value={templateValues[key] || ""}
+                        onChange={(e) =>
+                          setTemplateValues({
+                            ...templateValues,
+                            [key]: e.target.value,
+                          })
+                        }
+                        className="mt-1"
+                      />
+                    </div>
+                  );
+                })}
+              <Button
+                onClick={handleReadTemplateResource}
+                disabled={Object.keys(templateValues).length === 0}
+              >
+                Read Resource
+              </Button>
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a resource or template from the list to view its contents
+              </AlertDescription>
+            </Alert>
+          )}
        </div>
      </div>
    </TabsContent>
--- a/client/src/components/RootsTab.tsx
+++ b/client/src/components/RootsTab.tsx
@@ -35,42 +35,40 @@ const RootsTab = ({
  };

  return (
-    <TabsContent value="roots">
-      <div className="space-y-4">
-        <Alert>
-          <AlertDescription>
-            Configure the root directories that the server can access
-          </AlertDescription>
-        </Alert>
+    <TabsContent value="roots" className="space-y-4">
+      <Alert>
+        <AlertDescription>
+          Configure the root directories that the server can access
+        </AlertDescription>
+      </Alert>

-        {roots.map((root, index) => (
-          <div key={index} className="flex gap-2 items-center">
-            <Input
-              placeholder="file:// URI"
-              value={root.uri}
-              onChange={(e) => updateRoot(index, "uri", e.target.value)}
-              className="flex-1"
-            />
-            <Button
-              variant="destructive"
-              size="sm"
-              onClick={() => removeRoot(index)}
-            >
-              <Minus className="h-4 w-4" />
-            </Button>
-          </div>
-        ))}
-
-        <div className="flex gap-2">
-          <Button variant="outline" onClick={addRoot}>
-            <Plus className="h-4 w-4 mr-2" />
-            Add Root
-          </Button>
-          <Button onClick={handleSave}>
-            <Save className="h-4 w-4 mr-2" />
-            Save Changes
+      {roots.map((root, index) => (
+        <div key={index} className="flex gap-2 items-center">
+          <Input
+            placeholder="file:// URI"
+            value={root.uri}
+            onChange={(e) => updateRoot(index, "uri", e.target.value)}
+            className="flex-1"
+          />
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={() => removeRoot(index)}
+          >
+            <Minus className="h-4 w-4" />
          </Button>
        </div>
+      ))}
+
+      <div className="flex gap-2">
+        <Button variant="outline" onClick={addRoot}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Root
+        </Button>
+        <Button onClick={handleSave}>
+          <Save className="h-4 w-4 mr-2" />
+          Save Changes
+        </Button>
      </div>
    </TabsContent>
  );
--- a/client/src/components/SamplingTab.tsx
+++ b/client/src/components/SamplingTab.tsx
@@ -5,7 +5,6 @@ import {
  CreateMessageRequest,
  CreateMessageResult,
 } from "@modelcontextprotocol/sdk/types.js";
-import JsonView from "./JsonView";

 export type PendingRequest = {
  id: number;
@@ -33,37 +32,31 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
  };

  return (
-    <TabsContent value="sampling">
-      <div className="h-96">
-        <Alert>
-          <AlertDescription>
-            When the server requests LLM sampling, requests will appear here for
-            approval.
-          </AlertDescription>
-        </Alert>
-        <div className="mt-4 space-y-4">
-          <h3 className="text-lg font-semibold">Recent Requests</h3>
-          {pendingRequests.map((request) => (
-            <div key={request.id} className="p-4 border rounded-lg space-y-4">
-              <JsonView
-                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 rounded"
-                data={JSON.stringify(request.request)}
-              />
-
-              <div className="flex space-x-2">
-                <Button onClick={() => handleApprove(request.id)}>
-                  Approve
-                </Button>
-                <Button variant="outline" onClick={() => onReject(request.id)}>
-                  Reject
-                </Button>
-              </div>
+    <TabsContent value="sampling" className="h-96">
+      <Alert>
+        <AlertDescription>
+          When the server requests LLM sampling, requests will appear here for
+          approval.
+        </AlertDescription>
+      </Alert>
+      <div className="mt-4 space-y-4">
+        <h3 className="text-lg font-semibold">Recent Requests</h3>
+        {pendingRequests.map((request) => (
+          <div key={request.id} className="p-4 border rounded-lg space-y-4">
+            <pre className="bg-gray-50 p-2 rounded">
+              {JSON.stringify(request.request, null, 2)}
+            </pre>
+            <div className="flex space-x-2">
+              <Button onClick={() => handleApprove(request.id)}>Approve</Button>
+              <Button variant="outline" onClick={() => onReject(request.id)}>
+                Reject
+              </Button>
            </div>
-          ))}
-          {pendingRequests.length === 0 && (
-            <p className="text-gray-500">No pending requests</p>
-          )}
-        </div>
+          </div>
+        ))}
+        {pendingRequests.length === 0 && (
+          <p className="text-gray-500">No pending requests</p>
+        )}
      </div>
    </TabsContent>
  );
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -8,10 +8,6 @@ import {
  Github,
  Eye,
  EyeOff,
-  RotateCcw,
-  Settings,
-  HelpCircle,
-  RefreshCwOff,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -23,22 +19,12 @@ import {
  SelectValue,
 } from "@/components/ui/select";
 import { StdErrNotification } from "@/lib/notificationTypes";
-import {
-  LoggingLevel,
-  LoggingLevelSchema,
-} from "@modelcontextprotocol/sdk/types.js";
-import { InspectorConfig } from "@/lib/configurationTypes";
-import { ConnectionStatus } from "@/lib/constants";
+
 import useTheme from "../lib/useTheme";
 import { version } from "../../../package.json";
-import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-} from "@/components/ui/tooltip";

 interface SidebarProps {
-  connectionStatus: ConnectionStatus;
+  connectionStatus: "disconnected" | "connected" | "error";
  transportType: "stdio" | "sse";
  setTransportType: (type: "stdio" | "sse") => void;
  command: string;
@@ -49,16 +35,8 @@ interface SidebarProps {
  setSseUrl: (url: string) => void;
  env: Record<string, string>;
  setEnv: (env: Record<string, string>) => void;
-  bearerToken: string;
-  setBearerToken: (token: string) => void;
  onConnect: () => void;
-  onDisconnect: () => void;
  stdErrNotifications: StdErrNotification[];
-  logLevel: LoggingLevel;
-  sendLogLevelRequest: (level: LoggingLevel) => void;
-  loggingSupported: boolean;
-  config: InspectorConfig;
-  setConfig: (config: InspectorConfig) => void;
 }

 const Sidebar = ({
@@ -73,26 +51,16 @@ const Sidebar = ({
  setSseUrl,
  env,
  setEnv,
-  bearerToken,
-  setBearerToken,
  onConnect,
-  onDisconnect,
  stdErrNotifications,
-  logLevel,
-  sendLogLevelRequest,
-  loggingSupported,
-  config,
-  setConfig,
 }: SidebarProps) => {
  const [theme, setTheme] = useTheme();
  const [showEnvVars, setShowEnvVars] = useState(false);
-  const [showBearerToken, setShowBearerToken] = useState(false);
-  const [showConfig, setShowConfig] = useState(false);
  const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());

  return (
    <div className="w-80 bg-card border-r border-border flex flex-col h-full">
-      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
+      <div className="flex items-center justify-between p-4 border-b border-gray-200">
        <div className="flex items-center">
          <h1 className="ml-2 text-lg font-semibold">
            MCP Inspector v{version}
@@ -103,19 +71,14 @@ const Sidebar = ({
      <div className="p-4 flex-1 overflow-auto">
        <div className="space-y-4">
          <div className="space-y-2">
-            <label
-              className="text-sm font-medium"
-              htmlFor="transport-type-select"
-            >
-              Transport Type
-            </label>
+            <label className="text-sm font-medium">Transport Type</label>
            <Select
              value={transportType}
              onValueChange={(value: "stdio" | "sse") =>
                setTransportType(value)
              }
            >
-              <SelectTrigger id="transport-type-select">
+              <SelectTrigger>
                <SelectValue placeholder="Select transport type" />
              </SelectTrigger>
              <SelectContent>
@@ -128,11 +91,8 @@ const Sidebar = ({
          {transportType === "stdio" ? (
            <>
              <div className="space-y-2">
-                <label className="text-sm font-medium" htmlFor="command-input">
-                  Command
-                </label>
+                <label className="text-sm font-medium">Command</label>
                <Input
-                  id="command-input"
                  placeholder="Command"
                  value={command}
                  onChange={(e) => setCommand(e.target.value)}
@@ -140,14 +100,8 @@ const Sidebar = ({
                />
              </div>
              <div className="space-y-2">
-                <label
-                  className="text-sm font-medium"
-                  htmlFor="arguments-input"
-                >
-                  Arguments
-                </label>
+                <label className="text-sm font-medium">Arguments</label>
                <Input
-                  id="arguments-input"
                  placeholder="Arguments (space-separated)"
                  value={args}
                  onChange={(e) => setArgs(e.target.value)}
@@ -156,53 +110,15 @@ const Sidebar = ({
              </div>
            </>
          ) : (
-            <>
-              <div className="space-y-2">
-                <label className="text-sm font-medium" htmlFor="sse-url-input">
-                  URL
-                </label>
-                <Input
-                  id="sse-url-input"
-                  placeholder="URL"
-                  value={sseUrl}
-                  onChange={(e) => setSseUrl(e.target.value)}
-                  className="font-mono"
-                />
-              </div>
-              <div className="space-y-2">
-                <Button
-                  variant="outline"
-                  onClick={() => setShowBearerToken(!showBearerToken)}
-                  className="flex items-center w-full"
-                  aria-expanded={showBearerToken}
-                >
-                  {showBearerToken ? (
-                    <ChevronDown className="w-4 h-4 mr-2" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4 mr-2" />
-                  )}
-                  Authentication
-                </Button>
-                {showBearerToken && (
-                  <div className="space-y-2">
-                    <label
-                      className="text-sm font-medium"
-                      htmlFor="bearer-token-input"
-                    >
-                      Bearer Token
-                    </label>
-                    <Input
-                      id="bearer-token-input"
-                      placeholder="Bearer Token"
-                      value={bearerToken}
-                      onChange={(e) => setBearerToken(e.target.value)}
-                      className="font-mono"
-                      type="password"
-                    />
-                  </div>
-                )}
-              </div>
-            </>
+            <div className="space-y-2">
+              <label className="text-sm font-medium">URL</label>
+              <Input
+                placeholder="URL"
+                value={sseUrl}
+                onChange={(e) => setSseUrl(e.target.value)}
+                className="font-mono"
+              />
+            </div>
          )}
          {transportType === "stdio" && (
            <div className="space-y-2">
@@ -210,8 +126,6 @@ const Sidebar = ({
                variant="outline"
                onClick={() => setShowEnvVars(!showEnvVars)}
                className="flex items-center w-full"
-                data-testid="env-vars-button"
-                aria-expanded={showEnvVars}
              >
                {showEnvVars ? (
                  <ChevronDown className="w-4 h-4 mr-2" />
@@ -226,22 +140,13 @@ const Sidebar = ({
                    <div key={idx} className="space-y-2 pb-4">
                      <div className="flex gap-2">
                        <Input
-                          aria-label={`Environment variable key ${idx + 1}`}
                          placeholder="Key"
                          value={key}
                          onChange={(e) => {
                            const newKey = e.target.value;
-                            const newEnv = Object.entries(env).reduce(
-                              (acc, [k, v]) => {
-                                if (k === key) {
-                                  acc[newKey] = value;
-                                } else {
-                                  acc[k] = v;
-                                }
-                                return acc;
-                              },
-                              {} as Record<string, string>,
-                            );
+                            const newEnv = { ...env };
+                            delete newEnv[key];
+                            newEnv[newKey] = value;
                            setEnv(newEnv);
                            setShownEnvVars((prev) => {
                              const next = new Set(prev);
@@ -269,7 +174,6 @@ const Sidebar = ({
                      </div>
                      <div className="flex gap-2">
                        <Input
-                          aria-label={`Environment variable value ${idx + 1}`}
                          type={shownEnvVars.has(key) ? "text" : "password"}
                          placeholder="Value"
                          value={value}
@@ -329,188 +233,30 @@ const Sidebar = ({
            </div>
          )}

-          {/* Configuration */}
          <div className="space-y-2">
-            <Button
-              variant="outline"
-              onClick={() => setShowConfig(!showConfig)}
-              className="flex items-center w-full"
-              data-testid="config-button"
-              aria-expanded={showConfig}
-            >
-              {showConfig ? (
-                <ChevronDown className="w-4 h-4 mr-2" />
-              ) : (
-                <ChevronRight className="w-4 h-4 mr-2" />
-              )}
-              <Settings className="w-4 h-4 mr-2" />
-              Configuration
+            <Button className="w-full" onClick={onConnect}>
+              <Play className="w-4 h-4 mr-2" />
+              Connect
            </Button>
-            {showConfig && (
-              <div className="space-y-2">
-                {Object.entries(config).map(([key, configItem]) => {
-                  const configKey = key as keyof InspectorConfig;
-                  return (
-                    <div key={key} className="space-y-2">
-                      <div className="flex items-center gap-1">
-                        <label
-                          className="text-sm font-medium text-green-600 break-all"
-                          htmlFor={`${configKey}-input`}
-                        >
-                          {configItem.label}
-                        </label>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <HelpCircle className="h-4 w-4 text-muted-foreground" />
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {configItem.description}
-                          </TooltipContent>
-                        </Tooltip>
-                      </div>
-                      {typeof configItem.value === "number" ? (
-                        <Input
-                          id={`${configKey}-input`}
-                          type="number"
-                          data-testid={`${configKey}-input`}
-                          value={configItem.value}
-                          onChange={(e) => {
-                            const newConfig = { ...config };
-                            newConfig[configKey] = {
-                              ...configItem,
-                              value: Number(e.target.value),
-                            };
-                            setConfig(newConfig);
-                          }}
-                          className="font-mono"
-                        />
-                      ) : typeof configItem.value === "boolean" ? (
-                        <Select
-                          data-testid={`${configKey}-select`}
-                          value={configItem.value.toString()}
-                          onValueChange={(val) => {
-                            const newConfig = { ...config };
-                            newConfig[configKey] = {
-                              ...configItem,
-                              value: val === "true",
-                            };
-                            setConfig(newConfig);
-                          }}
-                        >
-                          <SelectTrigger id={`${configKey}-input`}>
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="true">True</SelectItem>
-                            <SelectItem value="false">False</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      ) : (
-                        <Input
-                          id={`${configKey}-input`}
-                          data-testid={`${configKey}-input`}
-                          value={configItem.value}
-                          onChange={(e) => {
-                            const newConfig = { ...config };
-                            newConfig[configKey] = {
-                              ...configItem,
-                              value: e.target.value,
-                            };
-                            setConfig(newConfig);
-                          }}
-                          className="font-mono"
-                        />
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-
-          <div className="space-y-2">
-            {connectionStatus === "connected" && (
-              <div className="grid grid-cols-2 gap-4">
-                <Button
-                  data-testid="connect-button"
-                  onClick={() => {
-                    onDisconnect();
-                    onConnect();
-                  }}
-                >
-                  <RotateCcw className="w-4 h-4 mr-2" />
-                  {transportType === "stdio" ? "Restart" : "Reconnect"}
-                </Button>
-                <Button onClick={onDisconnect}>
-                  <RefreshCwOff className="w-4 h-4 mr-2" />
-                  Disconnect
-                </Button>
-              </div>
-            )}
-            {connectionStatus !== "connected" && (
-              <Button className="w-full" onClick={onConnect}>
-                <Play className="w-4 h-4 mr-2" />
-                Connect
-              </Button>
-            )}

            <div className="flex items-center justify-center space-x-2 mb-4">
              <div
-                className={`w-2 h-2 rounded-full ${(() => {
-                  switch (connectionStatus) {
-                    case "connected":
-                      return "bg-green-500";
-                    case "error":
-                      return "bg-red-500";
-                    case "error-connecting-to-proxy":
-                      return "bg-red-500";
-                    default:
-                      return "bg-gray-500";
-                  }
-                })()}`}
+                className={`w-2 h-2 rounded-full ${
+                  connectionStatus === "connected"
+                    ? "bg-green-500"
+                    : connectionStatus === "error"
+                      ? "bg-red-500"
+                      : "bg-gray-500"
+                }`}
              />
              <span className="text-sm text-gray-600">
-                {(() => {
-                  switch (connectionStatus) {
-                    case "connected":
-                      return "Connected";
-                    case "error":
-                      return "Connection Error, is your MCP server running?";
-                    case "error-connecting-to-proxy":
-                      return "Error Connecting to MCP Inspector Proxy - Check Console logs";
-                    default:
-                      return "Disconnected";
-                  }
-                })()}
+                {connectionStatus === "connected"
+                  ? "Connected"
+                  : connectionStatus === "error"
+                    ? "Connection Error"
+                    : "Disconnected"}
              </span>
            </div>
-
-            {loggingSupported && connectionStatus === "connected" && (
-              <div className="space-y-2">
-                <label
-                  className="text-sm font-medium"
-                  htmlFor="logging-level-select"
-                >
-                  Logging Level
-                </label>
-                <Select
-                  value={logLevel}
-                  onValueChange={(value: LoggingLevel) =>
-                    sendLogLevelRequest(value)
-                  }
-                >
-                  <SelectTrigger id="logging-level-select">
-                    <SelectValue placeholder="Select logging level" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {Object.values(LoggingLevelSchema.enum).map((level) => (
-                      <SelectItem value={level}>{level}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            )}
-
            {stdErrNotifications.length > 0 && (
              <>
                <div className="mt-4 border-t border-gray-200 pt-4">
@@ -552,37 +298,36 @@ const Sidebar = ({
          </Select>

          <div className="flex items-center space-x-2">
-            <Button variant="ghost" title="Inspector Documentation" asChild>
-              <a
-                href="https://modelcontextprotocol.io/docs/tools/inspector"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <CircleHelp className="w-4 h-4 text-foreground" />
-              </a>
-            </Button>
-            <Button variant="ghost" title="Debugging Guide" asChild>
-              <a
-                href="https://modelcontextprotocol.io/docs/tools/debugging"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Bug className="w-4 h-4 text-foreground" />
-              </a>
-            </Button>
-            <Button
-              variant="ghost"
-              title="Report bugs or contribute on GitHub"
-              asChild
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
            >
-              <a
-                href="https://github.com/modelcontextprotocol/inspector"
-                target="_blank"
-                rel="noopener noreferrer"
+              <Button variant="ghost" title="Inspector Documentation">
+                <CircleHelp className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/debugging"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="ghost" title="Debugging Guide">
+                <Bug className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
+            <a
+              href="https://github.com/modelcontextprotocol/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="ghost"
+                title="Report bugs or contribute on GitHub"
              >
-                <Github className="w-4 h-4 text-foreground" />
-              </a>
-            </Button>
+                <Github className="w-4 h-4 text-gray-800" />
+              </Button>
+            </a>
          </div>
        </div>
      </div>
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -1,23 +1,19 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import DynamicJsonForm from "./DynamicJsonForm";
-import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
-import { generateDefaultValue } from "@/utils/schemaUtils";
 import {
-  CallToolResultSchema,
-  CompatibilityCallToolResult,
  ListToolsResult,
  Tool,
+  CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
-import { Loader2, Send } from "lucide-react";
+import { AlertCircle, Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
-import JsonView from "./JsonView";
+
+import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";

 const ToolsTab = ({
  tools,
@@ -28,11 +24,12 @@ const ToolsTab = ({
  setSelectedTool,
  toolResult,
  nextCursor,
+  error,
 }: {
  tools: Tool[];
  listTools: () => void;
  clearTools: () => void;
-  callTool: (name: string, params: Record<string, unknown>) => Promise<void>;
+  callTool: (name: string, params: Record<string, unknown>) => void;
  selectedTool: Tool | null;
  setSelectedTool: (tool: Tool | null) => void;
  toolResult: CompatibilityCallToolResult | null;
@@ -40,8 +37,6 @@ const ToolsTab = ({
  error: string | null;
 }) => {
  const [params, setParams] = useState<Record<string, unknown>>({});
-  const [isToolRunning, setIsToolRunning] = useState(false);
-
  useEffect(() => {
    setParams({});
  }, [selectedTool]);
@@ -55,10 +50,17 @@ const ToolsTab = ({
        return (
          <>
            <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
-            <JsonView data={toolResult} />
+            <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+              {JSON.stringify(toolResult, null, 2)}
+            </pre>
            <h4 className="font-semibold mb-2">Errors:</h4>
            {parsedResult.error.errors.map((error, idx) => (
-              <JsonView data={error} key={idx} />
+              <pre
+                key={idx}
+                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
+              >
+                {JSON.stringify(error, null, 2)}
+              </pre>
            ))}
          </>
        );
@@ -69,17 +71,14 @@ const ToolsTab = ({
      return (
        <>
          <h4 className="font-semibold mb-2">
-            Tool Result:{" "}
-            {isError ? (
-              <span className="text-red-600 font-semibold">Error</span>
-            ) : (
-              <span className="text-green-600 font-semibold">Success</span>
-            )}
+            Tool Result: {isError ? "Error" : "Success"}
          </h4>
          {structuredResult.content.map((item, index) => (
            <div key={index} className="mb-2">
              {item.type === "text" && (
-                <JsonView data={item.text} isError={isError} />
+                <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+                  {item.text}
+                </pre>
              )}
              {item.type === "image" && (
                <img
@@ -88,18 +87,11 @@ const ToolsTab = ({
                  className="max-w-full h-auto"
                />
              )}
-              {item.type === "resource" &&
-                (item.resource?.mimeType?.startsWith("audio/") ? (
-                  <audio
-                    controls
-                    src={`data:${item.resource.mimeType};base64,${item.resource.blob}`}
-                    className="w-full"
-                  >
-                    <p>Your browser does not support audio playback</p>
-                  </audio>
-                ) : (
-                  <JsonView data={item.resource} />
-                ))}
+              {item.type === "resource" && (
+                <pre className="bg-gray-50  dark:bg-gray-800 dark:text-gray-100 whitespace-pre-wrap break-words p-4 rounded text-sm overflow-auto max-h-64">
+                  {JSON.stringify(item.resource, null, 2)}
+                </pre>
+              )}
            </div>
          ))}
        </>
@@ -108,176 +100,142 @@ const ToolsTab = ({
      return (
        <>
          <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
-
-          <JsonView data={toolResult.toolResult} />
+          <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
+            {JSON.stringify(toolResult.toolResult, null, 2)}
+          </pre>
        </>
      );
    }
  };

  return (
-    <TabsContent value="tools">
-      <div className="grid grid-cols-2 gap-4">
-        <ListPane
-          items={tools}
-          listItems={listTools}
-          clearItems={() => {
-            clearTools();
-            setSelectedTool(null);
-          }}
-          setSelectedItem={setSelectedTool}
-          renderItem={(tool) => (
-            <>
-              <span className="flex-1">{tool.name}</span>
-              <span className="text-sm text-gray-500 text-right">
-                {tool.description}
-              </span>
-            </>
-          )}
-          title="Tools"
-          buttonText={nextCursor ? "List More Tools" : "List Tools"}
-          isButtonDisabled={!nextCursor && tools.length > 0}
-        />
+    <TabsContent value="tools" className="grid grid-cols-2 gap-4">
+      <ListPane
+        items={tools}
+        listItems={listTools}
+        clearItems={() => {
+          clearTools();
+          setSelectedTool(null);
+        }}
+        setSelectedItem={setSelectedTool}
+        renderItem={(tool) => (
+          <>
+            <span className="flex-1">{tool.name}</span>
+            <span className="text-sm text-gray-500 text-right">
+              {tool.description}
+            </span>
+          </>
+        )}
+        title="Tools"
+        buttonText={nextCursor ? "List More Tools" : "List Tools"}
+        isButtonDisabled={!nextCursor && tools.length > 0}
+      />

-        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
-            <h3 className="font-semibold">
-              {selectedTool ? selectedTool.name : "Select a tool"}
-            </h3>
-          </div>
-          <div className="p-4">
-            {selectedTool ? (
-              <div className="space-y-4">
-                <p className="text-sm text-gray-600">
-                  {selectedTool.description}
-                </p>
-                {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                  ([key, value]) => {
-                    const prop = value as JsonSchemaType;
-                    return (
-                      <div key={key}>
-                        <Label
-                          htmlFor={key}
-                          className="block text-sm font-medium text-gray-700"
-                        >
-                          {key}
-                        </Label>
-                        {prop.type === "boolean" ? (
-                          <div className="flex items-center space-x-2 mt-2">
-                            <Checkbox
-                              id={key}
-                              name={key}
-                              checked={!!params[key]}
-                              onCheckedChange={(checked: boolean) =>
-                                setParams({
-                                  ...params,
-                                  [key]: checked,
-                                })
-                              }
-                            />
-                            <label
-                              htmlFor={key}
-                              className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                            >
-                              {prop.description || "Toggle this option"}
-                            </label>
-                          </div>
-                        ) : prop.type === "string" ? (
-                          <Textarea
-                            id={key}
-                            name={key}
-                            placeholder={prop.description}
-                            value={(params[key] as string) ?? ""}
-                            onChange={(e) =>
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">
+            {selectedTool ? selectedTool.name : "Select a tool"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedTool ? (
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                {selectedTool.description}
+              </p>
+              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
+                ([key, value]) => (
+                  <div key={key}>
+                    <Label
+                      htmlFor={key}
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      {key}
+                    </Label>
+                    {
+                      /* @ts-expect-error value type is currently unknown */
+                      value.type === "string" ? (
+                        <Textarea
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]: e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      ) : /* @ts-expect-error value type is currently unknown */
+                      value.type === "object" ? (
+                        <Textarea
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) => {
+                            try {
+                              const parsed = JSON.parse(e.target.value);
+                              setParams({
+                                ...params,
+                                [key]: parsed,
+                              });
+                            } catch (err) {
+                              // If invalid JSON, store as string - will be validated on submit
                              setParams({
                                ...params,
                                [key]: e.target.value,
-                              })
+                              });
                            }
-                            className="mt-1"
-                          />
-                        ) : prop.type === "object" || prop.type === "array" ? (
-                          <div className="mt-1">
-                            <DynamicJsonForm
-                              schema={{
-                                type: prop.type,
-                                properties: prop.properties,
-                                description: prop.description,
-                                items: prop.items,
-                              }}
-                              value={
-                                (params[key] as JsonValue) ??
-                                generateDefaultValue(prop)
-                              }
-                              onChange={(newValue: JsonValue) => {
-                                setParams({
-                                  ...params,
-                                  [key]: newValue,
-                                });
-                              }}
-                            />
-                          </div>
-                        ) : (
-                          <Input
-                            type={
-                              prop.type === "number" || prop.type === "integer"
-                                ? "number"
-                                : "text"
-                            }
-                            id={key}
-                            name={key}
-                            placeholder={prop.description}
-                            value={(params[key] as string) ?? ""}
-                            onChange={(e) =>
-                              setParams({
-                                ...params,
-                                [key]:
-                                  prop.type === "number" ||
-                                  prop.type === "integer"
-                                    ? Number(e.target.value)
-                                    : e.target.value,
-                              })
-                            }
-                            className="mt-1"
-                          />
-                        )}
-                      </div>
-                    );
-                  },
-                )}
-                <Button
-                  onClick={async () => {
-                    try {
-                      setIsToolRunning(true);
-                      await callTool(selectedTool.name, params);
-                    } finally {
-                      setIsToolRunning(false);
+                          }}
+                          className="mt-1"
+                        />
+                      ) : (
+                        <Input
+                          // @ts-expect-error value type is currently unknown
+                          type={value.type === "number" ? "number" : "text"}
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]:
+                                // @ts-expect-error value type is currently unknown
+                                value.type === "number"
+                                  ? Number(e.target.value)
+                                  : e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      )
                    }
-                  }}
-                  disabled={isToolRunning}
-                >
-                  {isToolRunning ? (
-                    <>
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                      Running...
-                    </>
-                  ) : (
-                    <>
-                      <Send className="w-4 h-4 mr-2" />
-                      Run Tool
-                    </>
-                  )}
-                </Button>
-                {toolResult && renderToolResult()}
-              </div>
-            ) : (
-              <Alert>
-                <AlertDescription>
-                  Select a tool from the list to view its details and run it
-                </AlertDescription>
-              </Alert>
-            )}
-          </div>
+                  </div>
+                ),
+              )}
+              <Button onClick={() => callTool(selectedTool.name, params)}>
+                <Send className="w-4 h-4 mr-2" />
+                Run Tool
+              </Button>
+              {toolResult && renderToolResult()}
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a tool from the list to view its details and run it
+              </AlertDescription>
+            </Alert>
+          )}
        </div>
      </div>
    </TabsContent>
--- a/client/src/components/tests/DynamicJsonForm.test.tsx
+++ b/client/src/components/tests/DynamicJsonForm.test.tsx
@@ -1,95 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect, jest } from "@jest/globals";
-import DynamicJsonForm from "../DynamicJsonForm";
-import type { JsonSchemaType } from "@/utils/jsonUtils";
-
-describe("DynamicJsonForm String Fields", () => {
-  const renderForm = (props = {}) => {
-    const defaultProps = {
-      schema: {
-        type: "string" as const,
-        description: "Test string field",
-      } satisfies JsonSchemaType,
-      value: undefined,
-      onChange: jest.fn(),
-    };
-    return render(<DynamicJsonForm {...defaultProps} {...props} />);
-  };
-
-  describe("Type Validation", () => {
-    it("should handle numeric input as string type", () => {
-      const onChange = jest.fn();
-      renderForm({ onChange });
-
-      const input = screen.getByRole("textbox");
-      fireEvent.change(input, { target: { value: "123321" } });
-
-      expect(onChange).toHaveBeenCalledWith("123321");
-      // Verify the value is a string, not a number
-      expect(typeof onChange.mock.calls[0][0]).toBe("string");
-    });
-
-    it("should render as text input, not number input", () => {
-      renderForm();
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveProperty("type", "text");
-    });
-  });
-});
-
-describe("DynamicJsonForm Integer Fields", () => {
-  const renderForm = (props = {}) => {
-    const defaultProps = {
-      schema: {
-        type: "integer" as const,
-        description: "Test integer field",
-      } satisfies JsonSchemaType,
-      value: undefined,
-      onChange: jest.fn(),
-    };
-    return render(<DynamicJsonForm {...defaultProps} {...props} />);
-  };
-
-  describe("Basic Operations", () => {
-    it("should render number input with step=1", () => {
-      renderForm();
-      const input = screen.getByRole("spinbutton");
-      expect(input).toHaveProperty("type", "number");
-      expect(input).toHaveProperty("step", "1");
-    });
-
-    it("should pass integer values to onChange", () => {
-      const onChange = jest.fn();
-      renderForm({ onChange });
-
-      const input = screen.getByRole("spinbutton");
-      fireEvent.change(input, { target: { value: "42" } });
-
-      expect(onChange).toHaveBeenCalledWith(42);
-      // Verify the value is a number, not a string
-      expect(typeof onChange.mock.calls[0][0]).toBe("number");
-    });
-
-    it("should not pass string values to onChange", () => {
-      const onChange = jest.fn();
-      renderForm({ onChange });
-
-      const input = screen.getByRole("spinbutton");
-      fireEvent.change(input, { target: { value: "abc" } });
-
-      expect(onChange).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle non-numeric input by not calling onChange", () => {
-      const onChange = jest.fn();
-      renderForm({ onChange });
-
-      const input = screen.getByRole("spinbutton");
-      fireEvent.change(input, { target: { value: "abc" } });
-
-      expect(onChange).not.toHaveBeenCalled();
-    });
-  });
-});
--- a/client/src/components/tests/Sidebar.test.tsx
+++ b/client/src/components/tests/Sidebar.test.tsx
@@ -1,472 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, beforeEach, jest } from "@jest/globals";
-import Sidebar from "../Sidebar";
-import { DEFAULT_INSPECTOR_CONFIG } from "@/lib/constants";
-import { InspectorConfig } from "@/lib/configurationTypes";
-import { TooltipProvider } from "@/components/ui/tooltip";
-
-// Mock theme hook
-jest.mock("../../lib/useTheme", () => ({
-  __esModule: true,
-  default: () => ["light", jest.fn()],
-}));
-
-describe("Sidebar Environment Variables", () => {
-  const defaultProps = {
-    connectionStatus: "disconnected" as const,
-    transportType: "stdio" as const,
-    setTransportType: jest.fn(),
-    command: "",
-    setCommand: jest.fn(),
-    args: "",
-    setArgs: jest.fn(),
-    sseUrl: "",
-    setSseUrl: jest.fn(),
-    env: {},
-    setEnv: jest.fn(),
-    bearerToken: "",
-    setBearerToken: jest.fn(),
-    onConnect: jest.fn(),
-    onDisconnect: jest.fn(),
-    stdErrNotifications: [],
-    logLevel: "info" as const,
-    sendLogLevelRequest: jest.fn(),
-    loggingSupported: true,
-    config: DEFAULT_INSPECTOR_CONFIG,
-    setConfig: jest.fn(),
-  };
-
-  const renderSidebar = (props = {}) => {
-    return render(
-      <TooltipProvider>
-        <Sidebar {...defaultProps} {...props} />
-      </TooltipProvider>,
-    );
-  };
-
-  const openEnvVarsSection = () => {
-    const button = screen.getByTestId("env-vars-button");
-    fireEvent.click(button);
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("Basic Operations", () => {
-    it("should add a new environment variable", () => {
-      const setEnv = jest.fn();
-      renderSidebar({ env: {}, setEnv });
-
-      openEnvVarsSection();
-
-      const addButton = screen.getByText("Add Environment Variable");
-      fireEvent.click(addButton);
-
-      expect(setEnv).toHaveBeenCalledWith({ "": "" });
-    });
-
-    it("should remove an environment variable", () => {
-      const setEnv = jest.fn();
-      const initialEnv = { TEST_KEY: "test_value" };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const removeButton = screen.getByRole("button", { name: "×" });
-      fireEvent.click(removeButton);
-
-      expect(setEnv).toHaveBeenCalledWith({});
-    });
-
-    it("should update environment variable value", () => {
-      const setEnv = jest.fn();
-      const initialEnv = { TEST_KEY: "test_value" };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const valueInput = screen.getByDisplayValue("test_value");
-      fireEvent.change(valueInput, { target: { value: "new_value" } });
-
-      expect(setEnv).toHaveBeenCalledWith({ TEST_KEY: "new_value" });
-    });
-
-    it("should toggle value visibility", () => {
-      const initialEnv = { TEST_KEY: "test_value" };
-      renderSidebar({ env: initialEnv });
-
-      openEnvVarsSection();
-
-      const valueInput = screen.getByDisplayValue("test_value");
-      expect(valueInput).toHaveProperty("type", "password");
-
-      const toggleButton = screen.getByRole("button", { name: /show value/i });
-      fireEvent.click(toggleButton);
-
-      expect(valueInput).toHaveProperty("type", "text");
-    });
-  });
-
-  describe("Key Editing", () => {
-    it("should maintain order when editing first key", () => {
-      const setEnv = jest.fn();
-      const initialEnv = {
-        FIRST_KEY: "first_value",
-        SECOND_KEY: "second_value",
-        THIRD_KEY: "third_value",
-      };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
-      fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
-
-      expect(setEnv).toHaveBeenCalledWith({
-        NEW_FIRST_KEY: "first_value",
-        SECOND_KEY: "second_value",
-        THIRD_KEY: "third_value",
-      });
-    });
-
-    it("should maintain order when editing middle key", () => {
-      const setEnv = jest.fn();
-      const initialEnv = {
-        FIRST_KEY: "first_value",
-        SECOND_KEY: "second_value",
-        THIRD_KEY: "third_value",
-      };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const middleKeyInput = screen.getByDisplayValue("SECOND_KEY");
-      fireEvent.change(middleKeyInput, { target: { value: "NEW_SECOND_KEY" } });
-
-      expect(setEnv).toHaveBeenCalledWith({
-        FIRST_KEY: "first_value",
-        NEW_SECOND_KEY: "second_value",
-        THIRD_KEY: "third_value",
-      });
-    });
-
-    it("should maintain order when editing last key", () => {
-      const setEnv = jest.fn();
-      const initialEnv = {
-        FIRST_KEY: "first_value",
-        SECOND_KEY: "second_value",
-        THIRD_KEY: "third_value",
-      };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const lastKeyInput = screen.getByDisplayValue("THIRD_KEY");
-      fireEvent.change(lastKeyInput, { target: { value: "NEW_THIRD_KEY" } });
-
-      expect(setEnv).toHaveBeenCalledWith({
-        FIRST_KEY: "first_value",
-        SECOND_KEY: "second_value",
-        NEW_THIRD_KEY: "third_value",
-      });
-    });
-
-    it("should maintain order during key editing", () => {
-      const setEnv = jest.fn();
-      const initialEnv = {
-        KEY1: "value1",
-        KEY2: "value2",
-      };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      // Type "NEW_" one character at a time
-      const key1Input = screen.getByDisplayValue("KEY1");
-      "NEW_".split("").forEach((char) => {
-        fireEvent.change(key1Input, {
-          target: { value: char + "KEY1".slice(1) },
-        });
-      });
-
-      // Verify the last setEnv call maintains the order
-      const lastCall = setEnv.mock.calls[
-        setEnv.mock.calls.length - 1
-      ][0] as Record<string, string>;
-      const entries = Object.entries(lastCall);
-
-      // The values should stay with their original keys
-      expect(entries[0][1]).toBe("value1"); // First entry should still have value1
-      expect(entries[1][1]).toBe("value2"); // Second entry should still have value2
-    });
-  });
-
-  describe("Multiple Operations", () => {
-    it("should maintain state after multiple key edits", () => {
-      const setEnv = jest.fn();
-      const initialEnv = {
-        FIRST_KEY: "first_value",
-        SECOND_KEY: "second_value",
-      };
-      const { rerender } = renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      // First key edit
-      const firstKeyInput = screen.getByDisplayValue("FIRST_KEY");
-      fireEvent.change(firstKeyInput, { target: { value: "NEW_FIRST_KEY" } });
-
-      // Get the updated env from the first setEnv call
-      const updatedEnv = setEnv.mock.calls[0][0] as Record<string, string>;
-
-      // Rerender with the updated env
-      rerender(
-        <TooltipProvider>
-          <Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />
-        </TooltipProvider>,
-      );
-
-      // Second key edit
-      const secondKeyInput = screen.getByDisplayValue("SECOND_KEY");
-      fireEvent.change(secondKeyInput, { target: { value: "NEW_SECOND_KEY" } });
-
-      // Verify the final state matches what we expect
-      expect(setEnv).toHaveBeenLastCalledWith({
-        NEW_FIRST_KEY: "first_value",
-        NEW_SECOND_KEY: "second_value",
-      });
-    });
-
-    it("should maintain visibility state after key edit", () => {
-      const initialEnv = { TEST_KEY: "test_value" };
-      const { rerender } = renderSidebar({ env: initialEnv });
-
-      openEnvVarsSection();
-
-      // Show the value
-      const toggleButton = screen.getByRole("button", { name: /show value/i });
-      fireEvent.click(toggleButton);
-
-      const valueInput = screen.getByDisplayValue("test_value");
-      expect(valueInput).toHaveProperty("type", "text");
-
-      // Edit the key
-      const keyInput = screen.getByDisplayValue("TEST_KEY");
-      fireEvent.change(keyInput, { target: { value: "NEW_KEY" } });
-
-      // Rerender with updated env
-      rerender(
-        <TooltipProvider>
-          <Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />
-        </TooltipProvider>,
-      );
-
-      // Value should still be visible
-      const updatedValueInput = screen.getByDisplayValue("test_value");
-      expect(updatedValueInput).toHaveProperty("type", "text");
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle empty key", () => {
-      const setEnv = jest.fn();
-      const initialEnv = { TEST_KEY: "test_value" };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const keyInput = screen.getByDisplayValue("TEST_KEY");
-      fireEvent.change(keyInput, { target: { value: "" } });
-
-      expect(setEnv).toHaveBeenCalledWith({ "": "test_value" });
-    });
-
-    it("should handle special characters in key", () => {
-      const setEnv = jest.fn();
-      const initialEnv = { TEST_KEY: "test_value" };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const keyInput = screen.getByDisplayValue("TEST_KEY");
-      fireEvent.change(keyInput, { target: { value: "TEST-KEY@123" } });
-
-      expect(setEnv).toHaveBeenCalledWith({ "TEST-KEY@123": "test_value" });
-    });
-
-    it("should handle unicode characters", () => {
-      const setEnv = jest.fn();
-      const initialEnv = { TEST_KEY: "test_value" };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const keyInput = screen.getByDisplayValue("TEST_KEY");
-      fireEvent.change(keyInput, { target: { value: "TEST_🔑" } });
-
-      expect(setEnv).toHaveBeenCalledWith({ "TEST_🔑": "test_value" });
-    });
-
-    it("should handle very long key names", () => {
-      const setEnv = jest.fn();
-      const initialEnv = { TEST_KEY: "test_value" };
-      renderSidebar({ env: initialEnv, setEnv });
-
-      openEnvVarsSection();
-
-      const keyInput = screen.getByDisplayValue("TEST_KEY");
-      const longKey = "A".repeat(100);
-      fireEvent.change(keyInput, { target: { value: longKey } });
-
-      expect(setEnv).toHaveBeenCalledWith({ [longKey]: "test_value" });
-    });
-  });
-
-  describe("Configuration Operations", () => {
-    const openConfigSection = () => {
-      const button = screen.getByTestId("config-button");
-      fireEvent.click(button);
-    };
-
-    it("should update MCP server request timeout", () => {
-      const setConfig = jest.fn();
-      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
-
-      openConfigSection();
-
-      const timeoutInput = screen.getByTestId(
-        "MCP_SERVER_REQUEST_TIMEOUT-input",
-      );
-      fireEvent.change(timeoutInput, { target: { value: "5000" } });
-
-      expect(setConfig).toHaveBeenCalledWith(
-        expect.objectContaining({
-          MCP_SERVER_REQUEST_TIMEOUT: {
-            label: "Request Timeout",
-            description: "Timeout for requests to the MCP server (ms)",
-            value: 5000,
-          },
-        }),
-      );
-    });
-
-    it("should update MCP server proxy address", () => {
-      const setConfig = jest.fn();
-      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
-
-      openConfigSection();
-
-      const proxyAddressInput = screen.getByTestId(
-        "MCP_PROXY_FULL_ADDRESS-input",
-      );
-      fireEvent.change(proxyAddressInput, {
-        target: { value: "http://localhost:8080" },
-      });
-
-      expect(setConfig).toHaveBeenCalledWith(
-        expect.objectContaining({
-          MCP_PROXY_FULL_ADDRESS: {
-            label: "Inspector Proxy Address",
-            description:
-              "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
-            value: "http://localhost:8080",
-          },
-        }),
-      );
-    });
-
-    it("should update max total timeout", () => {
-      const setConfig = jest.fn();
-      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
-
-      openConfigSection();
-
-      const maxTotalTimeoutInput = screen.getByTestId(
-        "MCP_REQUEST_MAX_TOTAL_TIMEOUT-input",
-      );
-      fireEvent.change(maxTotalTimeoutInput, {
-        target: { value: "10000" },
-      });
-
-      expect(setConfig).toHaveBeenCalledWith(
-        expect.objectContaining({
-          MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
-            label: "Maximum Total Timeout",
-            description:
-              "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
-            value: 10000,
-          },
-        }),
-      );
-    });
-
-    it("should handle invalid timeout values entered by user", () => {
-      const setConfig = jest.fn();
-      renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
-
-      openConfigSection();
-
-      const timeoutInput = screen.getByTestId(
-        "MCP_SERVER_REQUEST_TIMEOUT-input",
-      );
-      fireEvent.change(timeoutInput, { target: { value: "abc1" } });
-
-      expect(setConfig).toHaveBeenCalledWith(
-        expect.objectContaining({
-          MCP_SERVER_REQUEST_TIMEOUT: {
-            label: "Request Timeout",
-            description: "Timeout for requests to the MCP server (ms)",
-            value: 0,
-          },
-        }),
-      );
-    });
-
-    it("should maintain configuration state after multiple updates", () => {
-      const setConfig = jest.fn();
-      const { rerender } = renderSidebar({
-        config: DEFAULT_INSPECTOR_CONFIG,
-        setConfig,
-      });
-
-      openConfigSection();
-      // First update
-      const timeoutInput = screen.getByTestId(
-        "MCP_SERVER_REQUEST_TIMEOUT-input",
-      );
-      fireEvent.change(timeoutInput, { target: { value: "5000" } });
-
-      // Get the updated config from the first setConfig call
-      const updatedConfig = setConfig.mock.calls[0][0] as InspectorConfig;
-
-      // Rerender with the updated config
-      rerender(
-        <TooltipProvider>
-          <Sidebar
-            {...defaultProps}
-            config={updatedConfig}
-            setConfig={setConfig}
-          />
-        </TooltipProvider>,
-      );
-
-      // Second update
-      const updatedTimeoutInput = screen.getByTestId(
-        "MCP_SERVER_REQUEST_TIMEOUT-input",
-      );
-      fireEvent.change(updatedTimeoutInput, { target: { value: "3000" } });
-
-      // Verify the final state matches what we expect
-      expect(setConfig).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          MCP_SERVER_REQUEST_TIMEOUT: {
-            label: "Request Timeout",
-            description: "Timeout for requests to the MCP server (ms)",
-            value: 3000,
-          },
-        }),
-      );
-    });
-  });
-});
--- a/client/src/components/tests/ToolsTab.test.tsx
+++ b/client/src/components/tests/ToolsTab.test.tsx
@@ -1,144 +0,0 @@
-import { render, screen, fireEvent, act } from "@testing-library/react";
-import { describe, it, expect, jest } from "@jest/globals";
-import "@testing-library/jest-dom";
-import ToolsTab from "../ToolsTab";
-import { Tool } from "@modelcontextprotocol/sdk/types.js";
-import { Tabs } from "@/components/ui/tabs";
-
-describe("ToolsTab", () => {
-  const mockTools: Tool[] = [
-    {
-      name: "tool1",
-      description: "First tool",
-      inputSchema: {
-        type: "object" as const,
-        properties: {
-          num: { type: "number" as const },
-        },
-      },
-    },
-    {
-      name: "tool3",
-      description: "Integer tool",
-      inputSchema: {
-        type: "object" as const,
-        properties: {
-          count: { type: "integer" as const },
-        },
-      },
-    },
-    {
-      name: "tool2",
-      description: "Second tool",
-      inputSchema: {
-        type: "object" as const,
-        properties: {
-          num: { type: "number" as const },
-        },
-      },
-    },
-  ];
-
-  const defaultProps = {
-    tools: mockTools,
-    listTools: jest.fn(),
-    clearTools: jest.fn(),
-    callTool: jest.fn(async () => {}),
-    selectedTool: null,
-    setSelectedTool: jest.fn(),
-    toolResult: null,
-    nextCursor: "",
-    error: null,
-  };
-
-  const renderToolsTab = (props = {}) => {
-    return render(
-      <Tabs defaultValue="tools">
-        <ToolsTab {...defaultProps} {...props} />
-      </Tabs>,
-    );
-  };
-
-  it("should reset input values when switching tools", async () => {
-    const { rerender } = renderToolsTab({
-      selectedTool: mockTools[0],
-    });
-
-    // Enter a value in the first tool's input
-    const input = screen.getByRole("spinbutton") as HTMLInputElement;
-    await act(async () => {
-      fireEvent.change(input, { target: { value: "42" } });
-    });
-    expect(input.value).toBe("42");
-
-    // Switch to second tool
-    rerender(
-      <Tabs defaultValue="tools">
-        <ToolsTab {...defaultProps} selectedTool={mockTools[2]} />
-      </Tabs>,
-    );
-
-    // Verify input is reset
-    const newInput = screen.getByRole("spinbutton") as HTMLInputElement;
-    expect(newInput.value).toBe("");
-  });
-
-  it("should handle integer type inputs", async () => {
-    renderToolsTab({
-      selectedTool: mockTools[1], // Use the tool with integer type
-    });
-
-    const input = screen.getByRole("spinbutton", {
-      name: /count/i,
-    }) as HTMLInputElement;
-    expect(input).toHaveProperty("type", "number");
-    fireEvent.change(input, { target: { value: "42" } });
-    expect(input.value).toBe("42");
-
-    const submitButton = screen.getByRole("button", { name: /run tool/i });
-    await act(async () => {
-      fireEvent.click(submitButton);
-    });
-
-    expect(defaultProps.callTool).toHaveBeenCalledWith(mockTools[1].name, {
-      count: 42,
-    });
-  });
-
-  it("should disable button and change text while tool is running", async () => {
-    // Create a promise that we can resolve later
-    let resolvePromise: ((value: unknown) => void) | undefined;
-    const mockPromise = new Promise((resolve) => {
-      resolvePromise = resolve;
-    });
-
-    // Mock callTool to return our promise
-    const mockCallTool = jest.fn().mockReturnValue(mockPromise);
-
-    renderToolsTab({
-      selectedTool: mockTools[0],
-      callTool: mockCallTool,
-    });
-
-    const submitButton = screen.getByRole("button", { name: /run tool/i });
-    expect(submitButton.getAttribute("disabled")).toBeNull();
-
-    // Click the button and verify immediate state changes
-    await act(async () => {
-      fireEvent.click(submitButton);
-    });
-
-    // Verify button is disabled and text changed
-    expect(submitButton.getAttribute("disabled")).not.toBeNull();
-    expect(submitButton.textContent).toBe("Running...");
-
-    // Resolve the promise to simulate tool completion
-    await act(async () => {
-      if (resolvePromise) {
-        await resolvePromise({});
-      }
-    });
-
-    expect(submitButton.getAttribute("disabled")).toBeNull();
-  });
-});
--- a/client/src/components/ui/Button.test.tsx
+++ b/client/src/components/ui/Button.test.tsx
@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "./button";
+import { describe, it, expect, vi } from "vitest";
+import { createRef } from "react";
+
+describe("Button", () => {
+  it("renders children correctly", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("handles click events", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    fireEvent.click(screen.getByText("Click me"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies different variants correctly", () => {
+    const { rerender } = render(<Button variant="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("bg-primary");
+
+    rerender(<Button variant="outline">Outline</Button>);
+    expect(screen.getByText("Outline")).toHaveClass("border-input");
+
+    rerender(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByText("Secondary")).toHaveClass("bg-secondary");
+  });
+
+  it("applies different sizes correctly", () => {
+    const { rerender } = render(<Button size="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("h-9");
+
+    rerender(<Button size="sm">Small</Button>);
+    expect(screen.getByText("Small")).toHaveClass("h-8");
+
+    rerender(<Button size="lg">Large</Button>);
+    expect(screen.getByText("Large")).toHaveClass("h-10");
+  });
+
+  it("forwards ref correctly", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Button with ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("renders as a different element when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="#">Link Button</a>
+      </Button>,
+    );
+    expect(screen.getByText("Link Button").tagName).toBe("A");
+  });
+});
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -54,4 +54,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";

-export { Button };
+export { Button, buttonVariants };
--- a/client/src/components/ui/checkbox.tsx
+++ b/client/src/components/ui/checkbox.tsx
@@ -1,30 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
--- a/client/src/components/ui/combobox.tsx
+++ b/client/src/components/ui/combobox.tsx
@@ -1,97 +0,0 @@
-import React from "react";
-import { Check, ChevronsUpDown } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-
-interface ComboboxProps {
-  value: string;
-  onChange: (value: string) => void;
-  onInputChange: (value: string) => void;
-  options: string[];
-  placeholder?: string;
-  emptyMessage?: string;
-  id?: string;
-}
-
-export function Combobox({
-  value,
-  onChange,
-  onInputChange,
-  options = [],
-  placeholder = "Select...",
-  emptyMessage = "No results found.",
-  id,
-}: ComboboxProps) {
-  const [open, setOpen] = React.useState(false);
-
-  const handleSelect = React.useCallback(
-    (option: string) => {
-      onChange(option);
-      setOpen(false);
-    },
-    [onChange],
-  );
-
-  const handleInputChange = React.useCallback(
-    (value: string) => {
-      onInputChange(value);
-    },
-    [onInputChange],
-  );
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          aria-controls={id}
-          className="w-full justify-between"
-        >
-          {value || placeholder}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
-        <Command shouldFilter={false} id={id}>
-          <CommandInput
-            placeholder={placeholder}
-            value={value}
-            onValueChange={handleInputChange}
-          />
-          <CommandEmpty>{emptyMessage}</CommandEmpty>
-          <CommandGroup>
-            {options.map((option) => (
-              <CommandItem
-                key={option}
-                value={option}
-                onSelect={() => handleSelect(option)}
-              >
-                <Check
-                  className={cn(
-                    "mr-2 h-4 w-4",
-                    value === option ? "opacity-100" : "opacity-0",
-                  )}
-                />
-                {option}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
--- a/client/src/components/ui/command.tsx
+++ b/client/src/components/ui/command.tsx
@@ -1,150 +0,0 @@
-import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
-import { Command as CommandPrimitive } from "cmdk";
-import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-Command.displayName = CommandPrimitive.displayName;
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  />
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className,
-      )}
-      {...props}
-    />
-  );
-};
-CommandShortcut.displayName = "CommandShortcut";
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-};
--- a/client/src/components/ui/dialog.tsx
+++ b/client/src/components/ui/dialog.tsx
@@ -1,121 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "@/lib/utils";
-import { Cross2Icon } from "@radix-ui/react-icons";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
--- a/client/src/components/ui/input.tsx
+++ b/client/src/components/ui/input.tsx
@@ -2,7 +2,8 @@ import * as React from "react";

 import { cn } from "@/lib/utils";

-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}

 const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
--- a/client/src/components/ui/popover.tsx
+++ b/client/src/components/ui/popover.tsx
@@ -1,31 +0,0 @@
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-
-const Popover = PopoverPrimitive.Root;
-
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/client/src/components/ui/select.tsx
+++ b/client/src/components/ui/select.tsx
@@ -22,7 +22,7 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 hover:border-[#646cff] hover:border-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -2,7 +2,8 @@ import * as React from "react";

 import { cn } from "@/lib/utils";

-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
--- a/client/src/components/ui/toast.tsx
+++ b/client/src/components/ui/toast.tsx
@@ -1,126 +0,0 @@
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-import { Cross2Icon } from "@radix-ui/react-icons";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <Cross2Icon className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-  />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};
--- a/client/src/components/ui/toaster.tsx
+++ b/client/src/components/ui/toaster.tsx
@@ -1,33 +0,0 @@
-import { useToast } from "@/hooks/use-toast";
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}
--- a/client/src/components/ui/tooltip.tsx
+++ b/client/src/components/ui/tooltip.tsx
@@ -1,30 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "@/lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/client/src/hooks/use-toast.ts
+++ b/client/src/hooks/use-toast.ts
@@ -1,191 +0,0 @@
-"use client";
-
-// Inspired by react-hot-toast library
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-const enum ActionType {
-  ADD_TOAST = "ADD_TOAST",
-  UPDATE_TOAST = "UPDATE_TOAST",
-  DISMISS_TOAST = "DISMISS_TOAST",
-  REMOVE_TOAST = "REMOVE_TOAST",
-}
-
-type Action =
-  | {
-      type: ActionType.ADD_TOAST;
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType.UPDATE_TOAST;
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType.DISMISS_TOAST;
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType.REMOVE_TOAST;
-      toastId?: ToasterToast["id"];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: ActionType.REMOVE_TOAST,
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case ActionType.ADD_TOAST:
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case ActionType.UPDATE_TOAST:
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t,
-        ),
-      };
-
-    case ActionType.DISMISS_TOAST: {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      };
-    }
-    case ActionType.REMOVE_TOAST:
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: ActionType.UPDATE_TOAST,
-      toast: { ...props, id },
-    });
-  const dismiss = () =>
-    dispatch({ type: ActionType.DISMISS_TOAST, toastId: id });
-
-  dispatch({
-    type: ActionType.ADD_TOAST,
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) =>
-      dispatch({ type: ActionType.DISMISS_TOAST, toastId }),
-  };
-}
-
-export { useToast, toast };
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -38,6 +38,25 @@ h1 {
  line-height: 1.1;
 }

+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
@@ -46,6 +65,9 @@ h1 {
  a:hover {
    color: #747bff;
  }
+  button {
+    background-color: #f9f9f9;
+  }
 }

@layer base {
--- a/client/src/lib/auth.ts
+++ b/client/src/lib/auth.ts
@@ -1,73 +0,0 @@
-import { OAuthClientProvider } from "@modelcontextprotocol/sdk/client/auth.js";
-import {
-  OAuthClientInformationSchema,
-  OAuthClientInformation,
-  OAuthTokens,
-  OAuthTokensSchema,
-} from "@modelcontextprotocol/sdk/shared/auth.js";
-import { SESSION_KEYS } from "./constants";
-
-class InspectorOAuthClientProvider implements OAuthClientProvider {
-  get redirectUrl() {
-    return window.location.origin + "/oauth/callback";
-  }
-
-  get clientMetadata() {
-    return {
-      redirect_uris: [this.redirectUrl],
-      token_endpoint_auth_method: "none",
-      grant_types: ["authorization_code", "refresh_token"],
-      response_types: ["code"],
-      client_name: "MCP Inspector",
-      client_uri: "https://github.com/modelcontextprotocol/inspector",
-    };
-  }
-
-  async clientInformation() {
-    const value = sessionStorage.getItem(SESSION_KEYS.CLIENT_INFORMATION);
-    if (!value) {
-      return undefined;
-    }
-
-    return await OAuthClientInformationSchema.parseAsync(JSON.parse(value));
-  }
-
-  saveClientInformation(clientInformation: OAuthClientInformation) {
-    sessionStorage.setItem(
-      SESSION_KEYS.CLIENT_INFORMATION,
-      JSON.stringify(clientInformation),
-    );
-  }
-
-  async tokens() {
-    const tokens = sessionStorage.getItem(SESSION_KEYS.TOKENS);
-    if (!tokens) {
-      return undefined;
-    }
-
-    return await OAuthTokensSchema.parseAsync(JSON.parse(tokens));
-  }
-
-  saveTokens(tokens: OAuthTokens) {
-    sessionStorage.setItem(SESSION_KEYS.TOKENS, JSON.stringify(tokens));
-  }
-
-  redirectToAuthorization(authorizationUrl: URL) {
-    window.location.href = authorizationUrl.href;
-  }
-
-  saveCodeVerifier(codeVerifier: string) {
-    sessionStorage.setItem(SESSION_KEYS.CODE_VERIFIER, codeVerifier);
-  }
-
-  codeVerifier() {
-    const verifier = sessionStorage.getItem(SESSION_KEYS.CODE_VERIFIER);
-    if (!verifier) {
-      throw new Error("No code verifier saved for session");
-    }
-
-    return verifier;
-  }
-}
-
-export const authProvider = new InspectorOAuthClientProvider();
--- a/client/src/lib/configurationTypes.ts
+++ b/client/src/lib/configurationTypes.ts
@@ -1,36 +0,0 @@
-export type ConfigItem = {
-  label: string;
-  description: string;
-  value: string | number | boolean;
-};
-
-/**
- * Configuration interface for the MCP Inspector, including settings for the MCP Client,
- * Proxy Server, and Inspector UI/UX.
- *
- * Note: Configuration related to which MCP Server to use or any other MCP Server
- * specific settings are outside the scope of this interface as of now.
- */
-export type InspectorConfig = {
-  /**
-   * Maximum time in milliseconds to wait for a response from the MCP server before timing out.
-   */
-  MCP_SERVER_REQUEST_TIMEOUT: ConfigItem;
-
-  /**
-   * Whether to reset the timeout on progress notifications. Useful for long-running operations that send periodic progress updates.
-   * Refer: https://spec.modelcontextprotocol.io/specification/2025-03-26/basic/utilities/progress/#progress-flow
-   */
-  MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS: ConfigItem;
-
-  /**
-   * Maximum total time in milliseconds to wait for a response from the MCP server before timing out. Used in conjunction with MCP_SERVER_REQUEST_TIMEOUT_RESET_ON_PROGRESS.
-   * Refer: https://spec.modelcontextprotocol.io/specification/2025-03-26/basic/utilities/progress/#progress-flow
-   */
-  MCP_REQUEST_MAX_TOTAL_TIMEOUT: ConfigItem;
-
-  /**
-   * The full address of the MCP Proxy Server, in case it is running on a non-default address. Example: http://10.1.1.22:5577
-   */
-  MCP_PROXY_FULL_ADDRESS: ConfigItem;
-};
--- a/client/src/lib/constants.ts
+++ b/client/src/lib/constants.ts
@@ -1,46 +0,0 @@
-import { InspectorConfig } from "./configurationTypes";
-
-// OAuth-related session storage keys
-export const SESSION_KEYS = {
-  CODE_VERIFIER: "mcp_code_verifier",
-  SERVER_URL: "mcp_server_url",
-  TOKENS: "mcp_tokens",
-  CLIENT_INFORMATION: "mcp_client_information",
-} as const;
-
-export type ConnectionStatus =
-  | "disconnected"
-  | "connected"
-  | "error"
-  | "error-connecting-to-proxy";
-
-export const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
-
-/**
- * Default configuration for the MCP Inspector, Currently persisted in local_storage in the Browser.
- * Future plans: Provide json config file + Browser local_storage to override default values
- **/
-export const DEFAULT_INSPECTOR_CONFIG: InspectorConfig = {
-  MCP_SERVER_REQUEST_TIMEOUT: {
-    label: "Request Timeout",
-    description: "Timeout for requests to the MCP server (ms)",
-    value: 10000,
-  },
-  MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS: {
-    label: "Reset Timeout on Progress",
-    description: "Reset timeout on progress notifications",
-    value: true,
-  },
-  MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
-    label: "Maximum Total Timeout",
-    description:
-      "Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
-    value: 60000,
-  },
-  MCP_PROXY_FULL_ADDRESS: {
-    label: "Inspector Proxy Address",
-    description:
-      "Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
-    value: "",
-  },
-} as const;
--- a/client/src/lib/hooks/tests/useConnection.test.tsx
+++ b/client/src/lib/hooks/tests/useConnection.test.tsx
@@ -1,164 +0,0 @@
-import { renderHook, act } from "@testing-library/react";
-import { useConnection } from "../useConnection";
-import { z } from "zod";
-import { ClientRequest } from "@modelcontextprotocol/sdk/types.js";
-import { DEFAULT_INSPECTOR_CONFIG } from "../../constants";
-
-// Mock fetch
-global.fetch = jest.fn().mockResolvedValue({
-  json: () => Promise.resolve({ status: "ok" }),
-});
-
-// Mock the SDK dependencies
-const mockRequest = jest.fn().mockResolvedValue({ test: "response" });
-const mockClient = {
-  request: mockRequest,
-  notification: jest.fn(),
-  connect: jest.fn().mockResolvedValue(undefined),
-  close: jest.fn(),
-  getServerCapabilities: jest.fn(),
-  setNotificationHandler: jest.fn(),
-  setRequestHandler: jest.fn(),
-};
-
-jest.mock("@modelcontextprotocol/sdk/client/index.js", () => ({
-  Client: jest.fn().mockImplementation(() => mockClient),
-}));
-
-jest.mock("@modelcontextprotocol/sdk/client/sse.js", () => ({
-  SSEClientTransport: jest.fn(),
-  SseError: jest.fn(),
-}));
-
-jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
-  auth: jest.fn().mockResolvedValue("AUTHORIZED"),
-}));
-
-// Mock the toast hook
-jest.mock("@/hooks/use-toast", () => ({
-  useToast: () => ({
-    toast: jest.fn(),
-  }),
-}));
-
-// Mock the auth provider
-jest.mock("../../auth", () => ({
-  authProvider: {
-    tokens: jest.fn().mockResolvedValue({ access_token: "mock-token" }),
-  },
-}));
-
-describe("useConnection", () => {
-  const defaultProps = {
-    transportType: "sse" as const,
-    command: "",
-    args: "",
-    sseUrl: "http://localhost:8080",
-    env: {},
-    config: DEFAULT_INSPECTOR_CONFIG,
-  };
-
-  describe("Request Configuration", () => {
-    beforeEach(() => {
-      jest.clearAllMocks();
-    });
-
-    test("uses the default config values in makeRequest", async () => {
-      const { result } = renderHook(() => useConnection(defaultProps));
-
-      // Connect the client
-      await act(async () => {
-        await result.current.connect();
-      });
-
-      // Wait for state update
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      const mockRequest: ClientRequest = {
-        method: "ping",
-        params: {},
-      };
-
-      const mockSchema = z.object({
-        test: z.string(),
-      });
-
-      await act(async () => {
-        await result.current.makeRequest(mockRequest, mockSchema);
-      });
-
-      expect(mockClient.request).toHaveBeenCalledWith(
-        mockRequest,
-        mockSchema,
-        expect.objectContaining({
-          timeout: DEFAULT_INSPECTOR_CONFIG.MCP_SERVER_REQUEST_TIMEOUT.value,
-          maxTotalTimeout:
-            DEFAULT_INSPECTOR_CONFIG.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value,
-          resetTimeoutOnProgress:
-            DEFAULT_INSPECTOR_CONFIG.MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS
-              .value,
-        }),
-      );
-    });
-
-    test("overrides the default config values when passed in options in makeRequest", async () => {
-      const { result } = renderHook(() => useConnection(defaultProps));
-
-      // Connect the client
-      await act(async () => {
-        await result.current.connect();
-      });
-
-      // Wait for state update
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      const mockRequest: ClientRequest = {
-        method: "ping",
-        params: {},
-      };
-
-      const mockSchema = z.object({
-        test: z.string(),
-      });
-
-      await act(async () => {
-        await result.current.makeRequest(mockRequest, mockSchema, {
-          timeout: 1000,
-          maxTotalTimeout: 2000,
-          resetTimeoutOnProgress: false,
-        });
-      });
-
-      expect(mockClient.request).toHaveBeenCalledWith(
-        mockRequest,
-        mockSchema,
-        expect.objectContaining({
-          timeout: 1000,
-          maxTotalTimeout: 2000,
-          resetTimeoutOnProgress: false,
-        }),
-      );
-    });
-  });
-
-  test("throws error when mcpClient is not connected", async () => {
-    const { result } = renderHook(() => useConnection(defaultProps));
-
-    const mockRequest: ClientRequest = {
-      method: "ping",
-      params: {},
-    };
-
-    const mockSchema = z.object({
-      test: z.string(),
-    });
-
-    await expect(
-      result.current.makeRequest(mockRequest, mockSchema),
-    ).rejects.toThrow("MCP client not connected");
-  });
-});
--- a/client/src/lib/hooks/useCompletionState.ts
+++ b/client/src/lib/hooks/useCompletionState.ts
@@ -1,129 +0,0 @@
-import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import {
-  ResourceReference,
-  PromptReference,
-} from "@modelcontextprotocol/sdk/types.js";
-
-interface CompletionState {
-  completions: Record<string, string[]>;
-  loading: Record<string, boolean>;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function debounce<T extends (...args: any[]) => PromiseLike<void>>(
-  func: T,
-  wait: number,
-): (...args: Parameters<T>) => void {
-  let timeout: ReturnType<typeof setTimeout>;
-  return (...args: Parameters<T>) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      void func(...args);
-    }, wait);
-  };
-}
-
-export function useCompletionState(
-  handleCompletion: (
-    ref: ResourceReference | PromptReference,
-    argName: string,
-    value: string,
-    signal?: AbortSignal,
-  ) => Promise<string[]>,
-  completionsSupported: boolean = true,
-  debounceMs: number = 300,
-) {
-  const [state, setState] = useState<CompletionState>({
-    completions: {},
-    loading: {},
-  });
-
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const cleanup = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-  }, []);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return cleanup;
-  }, [cleanup]);
-
-  const clearCompletions = useCallback(() => {
-    cleanup();
-    setState({
-      completions: {},
-      loading: {},
-    });
-  }, [cleanup]);
-
-  const requestCompletions = useMemo(() => {
-    return debounce(
-      async (
-        ref: ResourceReference | PromptReference,
-        argName: string,
-        value: string,
-      ) => {
-        if (!completionsSupported) {
-          return;
-        }
-
-        cleanup();
-
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
-
-        setState((prev) => ({
-          ...prev,
-          loading: { ...prev.loading, [argName]: true },
-        }));
-
-        try {
-          const values = await handleCompletion(
-            ref,
-            argName,
-            value,
-            abortController.signal,
-          );
-
-          if (!abortController.signal.aborted) {
-            setState((prev) => ({
-              ...prev,
-              completions: { ...prev.completions, [argName]: values },
-              loading: { ...prev.loading, [argName]: false },
-            }));
-          }
-        } catch {
-          if (!abortController.signal.aborted) {
-            setState((prev) => ({
-              ...prev,
-              loading: { ...prev.loading, [argName]: false },
-            }));
-          }
-        } finally {
-          if (abortControllerRef.current === abortController) {
-            abortControllerRef.current = null;
-          }
-        }
-      },
-      debounceMs,
-    );
-  }, [handleCompletion, completionsSupported, cleanup, debounceMs]);
-
-  // Clear completions when support status changes
-  useEffect(() => {
-    if (!completionsSupported) {
-      clearCompletions();
-    }
-  }, [completionsSupported, clearCompletions]);
-
-  return {
-    ...state,
-    clearCompletions,
-    requestCompletions,
-    completionsSupported,
-  };
-}
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -1,45 +1,21 @@
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
-import {
-  SSEClientTransport,
-  SseError,
-} from "@modelcontextprotocol/sdk/client/sse.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {
  ClientNotification,
  ClientRequest,
  CreateMessageRequestSchema,
  ListRootsRequestSchema,
-  ResourceUpdatedNotificationSchema,
-  LoggingMessageNotificationSchema,
+  ProgressNotificationSchema,
  Request,
  Result,
  ServerCapabilities,
-  PromptReference,
-  ResourceReference,
-  McpError,
-  CompleteResultSchema,
-  ErrorCode,
-  CancelledNotificationSchema,
-  ResourceListChangedNotificationSchema,
-  ToolListChangedNotificationSchema,
-  PromptListChangedNotificationSchema,
-  Progress,
 } from "@modelcontextprotocol/sdk/types.js";
-import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
 import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
-import { z } from "zod";
-import { ConnectionStatus, SESSION_KEYS } from "../constants";
+import { toast } from "react-toastify";
 import { Notification, StdErrNotificationSchema } from "../notificationTypes";
-import { auth } from "@modelcontextprotocol/sdk/client/auth.js";
-import { authProvider } from "../auth";
-import packageJson from "../../../package.json";
-import {
-  getMCPProxyAddress,
-  getMCPServerRequestMaxTotalTimeout,
-  resetRequestTimeoutOnProgress,
-} from "@/utils/configUtils";
-import { getMCPServerRequestTimeout } from "@/utils/configUtils";
-import { InspectorConfig } from "../configurationTypes";
+import { z } from "zod";
+
+const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;

 interface UseConnectionOptions {
  transportType: "stdio" | "sse";
@@ -47,13 +23,11 @@ interface UseConnectionOptions {
  args: string;
  sseUrl: string;
  env: Record<string, string>;
-  bearerToken?: string;
-  config: InspectorConfig;
+  proxyServerUrl: string;
+  requestTimeout?: number;
  onNotification?: (notification: Notification) => void;
  onStdErrNotification?: (notification: Notification) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onPendingRequest?: (request: any, resolve: any, reject: any) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  getRoots?: () => any[];
 }

@@ -63,23 +37,22 @@ export function useConnection({
  args,
  sseUrl,
  env,
-  bearerToken,
-  config,
+  proxyServerUrl,
+  requestTimeout = DEFAULT_REQUEST_TIMEOUT_MSEC,
  onNotification,
  onStdErrNotification,
  onPendingRequest,
  getRoots,
 }: UseConnectionOptions) {
-  const [connectionStatus, setConnectionStatus] =
-    useState<ConnectionStatus>("disconnected");
-  const { toast } = useToast();
+  const [connectionStatus, setConnectionStatus] = useState<
+    "disconnected" | "connected" | "error"
+  >("disconnected");
  const [serverCapabilities, setServerCapabilities] =
    useState<ServerCapabilities | null>(null);
  const [mcpClient, setMcpClient] = useState<Client | null>(null);
  const [requestHistory, setRequestHistory] = useState<
    { request: string; response?: string }[]
  >([]);
-  const [completionsSupported, setCompletionsSupported] = useState(true);

  const pushHistory = (request: object, response?: object) => {
    setRequestHistory((prev) => [
@@ -94,235 +67,90 @@ export function useConnection({
  const makeRequest = async <T extends z.ZodType>(
    request: ClientRequest,
    schema: T,
-    options?: RequestOptions & { suppressToast?: boolean },
-  ): Promise<z.output<T>> => {
+  ) => {
    if (!mcpClient) {
      throw new Error("MCP client not connected");
    }
+
    try {
      const abortController = new AbortController();
-
-      // prepare MCP Client request options
-      const mcpRequestOptions: RequestOptions = {
-        signal: options?.signal ?? abortController.signal,
-        resetTimeoutOnProgress:
-          options?.resetTimeoutOnProgress ??
-          resetRequestTimeoutOnProgress(config),
-        timeout: options?.timeout ?? getMCPServerRequestTimeout(config),
-        maxTotalTimeout:
-          options?.maxTotalTimeout ??
-          getMCPServerRequestMaxTotalTimeout(config),
-      };
-
-      // If progress notifications are enabled, add an onprogress hook to the MCP Client request options
-      // This is required by SDK to reset the timeout on progress notifications
-      if (mcpRequestOptions.resetTimeoutOnProgress) {
-        mcpRequestOptions.onprogress = (params: Progress) => {
-          // Add progress notification to `Server Notification` window in the UI
-          if (onNotification) {
-            onNotification({
-              method: "notification/progress",
-              params,
-            });
-          }
-        };
-      }
+      const timeoutId = setTimeout(() => {
+        abortController.abort("Request timed out");
+      }, requestTimeout);

      let response;
      try {
-        response = await mcpClient.request(request, schema, mcpRequestOptions);
-
+        response = await mcpClient.request(request, schema, {
+          signal: abortController.signal,
+        });
        pushHistory(request, response);
      } catch (error) {
        const errorMessage =
          error instanceof Error ? error.message : String(error);
        pushHistory(request, { error: errorMessage });
        throw error;
+      } finally {
+        clearTimeout(timeoutId);
      }

      return response;
    } catch (e: unknown) {
-      if (!options?.suppressToast) {
-        const errorString = (e as Error).message ?? String(e);
-        toast({
-          title: "Error",
-          description: errorString,
-          variant: "destructive",
-        });
-      }
-      throw e;
-    }
-  };
+      const errorString = (e as Error).message ?? String(e);
+      toast.error(errorString);

-  const handleCompletion = async (
-    ref: ResourceReference | PromptReference,
-    argName: string,
-    value: string,
-    signal?: AbortSignal,
-  ): Promise<string[]> => {
-    if (!mcpClient || !completionsSupported) {
-      return [];
-    }
-
-    const request: ClientRequest = {
-      method: "completion/complete",
-      params: {
-        argument: {
-          name: argName,
-          value,
-        },
-        ref,
-      },
-    };
-
-    try {
-      const response = await makeRequest(request, CompleteResultSchema, {
-        signal,
-        suppressToast: true,
-      });
-      return response?.completion.values || [];
-    } catch (e: unknown) {
-      // Disable completions silently if the server doesn't support them.
-      // See https://github.com/modelcontextprotocol/specification/discussions/122
-      if (e instanceof McpError && e.code === ErrorCode.MethodNotFound) {
-        setCompletionsSupported(false);
-        return [];
-      }
-
-      // Unexpected errors - show toast and rethrow
-      toast({
-        title: "Error",
-        description: e instanceof Error ? e.message : String(e),
-        variant: "destructive",
-      });
      throw e;
    }
  };

  const sendNotification = async (notification: ClientNotification) => {
    if (!mcpClient) {
-      const error = new Error("MCP client not connected");
-      toast({
-        title: "Error",
-        description: error.message,
-        variant: "destructive",
-      });
-      throw error;
+      throw new Error("MCP client not connected");
    }

    try {
      await mcpClient.notification(notification);
-      // Log successful notifications
      pushHistory(notification);
    } catch (e: unknown) {
-      if (e instanceof McpError) {
-        // Log MCP protocol errors
-        pushHistory(notification, { error: e.message });
-      }
-      toast({
-        title: "Error",
-        description: e instanceof Error ? e.message : String(e),
-        variant: "destructive",
-      });
+      toast.error((e as Error).message ?? String(e));
      throw e;
    }
  };

-  const checkProxyHealth = async () => {
+  const connect = async () => {
    try {
-      const proxyHealthUrl = new URL(`${getMCPProxyAddress(config)}/health`);
-      const proxyHealthResponse = await fetch(proxyHealthUrl);
-      const proxyHealth = await proxyHealthResponse.json();
-      if (proxyHealth?.status !== "ok") {
-        throw new Error("MCP Proxy Server is not healthy");
-      }
-    } catch (e) {
-      console.error("Couldn't connect to MCP Proxy Server", e);
-      throw e;
-    }
-  };
-
-  const handleAuthError = async (error: unknown) => {
-    if (error instanceof SseError && error.code === 401) {
-      sessionStorage.setItem(SESSION_KEYS.SERVER_URL, sseUrl);
-
-      const result = await auth(authProvider, { serverUrl: sseUrl });
-      return result === "AUTHORIZED";
-    }
-
-    return false;
-  };
-
-  const connect = async (_e?: unknown, retryCount: number = 0) => {
-    const client = new Client<Request, Notification, Result>(
-      {
-        name: "mcp-inspector",
-        version: packageJson.version,
-      },
-      {
-        capabilities: {
-          sampling: {},
-          roots: {
-            listChanged: true,
+      const client = new Client<Request, Notification, Result>(
+        {
+          name: "mcp-inspector",
+          version: "0.0.1",
+        },
+        {
+          capabilities: {
+            sampling: {},
+            roots: {
+              listChanged: true,
+            },
          },
        },
-      },
-    );
+      );

-    try {
-      await checkProxyHealth();
-    } catch {
-      setConnectionStatus("error-connecting-to-proxy");
-      return;
-    }
-    const mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
-    mcpProxyServerUrl.searchParams.append("transportType", transportType);
-    if (transportType === "stdio") {
-      mcpProxyServerUrl.searchParams.append("command", command);
-      mcpProxyServerUrl.searchParams.append("args", args);
-      mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
-    } else {
-      mcpProxyServerUrl.searchParams.append("url", sseUrl);
-    }
+      const backendUrl = new URL(`${proxyServerUrl}/sse`);

-    try {
-      // Inject auth manually instead of using SSEClientTransport, because we're
-      // proxying through the inspector server first.
-      const headers: HeadersInit = {};
-
-      // Use manually provided bearer token if available, otherwise use OAuth tokens
-      const token = bearerToken || (await authProvider.tokens())?.access_token;
-      if (token) {
-        headers["Authorization"] = `Bearer ${token}`;
+      backendUrl.searchParams.append("transportType", transportType);
+      if (transportType === "stdio") {
+        backendUrl.searchParams.append("command", command);
+        backendUrl.searchParams.append("args", args);
+        backendUrl.searchParams.append("env", JSON.stringify(env));
+      } else {
+        backendUrl.searchParams.append("url", sseUrl);
      }

-      const clientTransport = new SSEClientTransport(mcpProxyServerUrl, {
-        eventSourceInit: {
-          fetch: (url, init) => fetch(url, { ...init, headers }),
-        },
-        requestInit: {
-          headers,
-        },
-      });
+      const clientTransport = new SSEClientTransport(backendUrl);

      if (onNotification) {
-        [
-          CancelledNotificationSchema,
-          LoggingMessageNotificationSchema,
-          ResourceUpdatedNotificationSchema,
-          ResourceListChangedNotificationSchema,
-          ToolListChangedNotificationSchema,
-          PromptListChangedNotificationSchema,
-        ].forEach((notificationSchema) => {
-          client.setNotificationHandler(notificationSchema, onNotification);
-        });
-
-        client.fallbackNotificationHandler = (
-          notification: Notification,
-        ): Promise<void> => {
-          onNotification(notification);
-          return Promise.resolve();
-        };
+        client.setNotificationHandler(
+          ProgressNotificationSchema,
+          onNotification,
+        );
      }

      if (onStdErrNotification) {
@@ -332,28 +160,10 @@ export function useConnection({
        );
      }

-      try {
-        await client.connect(clientTransport);
-      } catch (error) {
-        console.error(
-          `Failed to connect to MCP Server via the MCP Inspector Proxy: ${mcpProxyServerUrl}:`,
-          error,
-        );
-        const shouldRetry = await handleAuthError(error);
-        if (shouldRetry) {
-          return connect(undefined, retryCount + 1);
-        }
-
-        if (error instanceof SseError && error.code === 401) {
-          // Don't set error state if we're about to redirect for auth
-          return;
-        }
-        throw error;
-      }
+      await client.connect(clientTransport);

      const capabilities = client.getServerCapabilities();
      setServerCapabilities(capabilities ?? null);
-      setCompletionsSupported(true); // Reset completions support on new connection

      if (onPendingRequest) {
        client.setRequestHandler(CreateMessageRequestSchema, (request) => {
@@ -377,14 +187,6 @@ export function useConnection({
    }
  };

-  const disconnect = async () => {
-    await mcpClient?.close();
-    setMcpClient(null);
-    setConnectionStatus("disconnected");
-    setCompletionsSupported(false);
-    setServerCapabilities(null);
-  };
-
  return {
    connectionStatus,
    serverCapabilities,
@@ -392,9 +194,6 @@ export function useConnection({
    requestHistory,
    makeRequest,
    sendNotification,
-    handleCompletion,
-    completionsSupported,
    connect,
-    disconnect,
  };
 }
--- a/client/src/lib/notificationTypes.ts
+++ b/client/src/lib/notificationTypes.ts
@@ -1,7 +1,6 @@
 import {
  NotificationSchema as BaseNotificationSchema,
  ClientNotificationSchema,
-  ServerNotificationSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { z } from "zod";

@@ -14,9 +13,7 @@ export const StdErrNotificationSchema = BaseNotificationSchema.extend({

 export const NotificationSchema = ClientNotificationSchema.or(
  StdErrNotificationSchema,
-)
-  .or(ServerNotificationSchema)
-  .or(BaseNotificationSchema);
+);

 export type StdErrNotification = z.infer<typeof StdErrNotificationSchema>;
 export type Notification = z.infer<typeof NotificationSchema>;
--- a/client/src/lib/useTheme.ts
+++ b/client/src/lib/useTheme.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";

 type Theme = "light" | "dark" | "system";

@@ -36,17 +36,16 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
    };
  }, [theme]);

-  const setThemeWithSideEffect = useCallback((newTheme: Theme) => {
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    if (newTheme !== "system") {
-      document.documentElement.classList.toggle("dark", newTheme === "dark");
-    }
-  }, []);
-  return useMemo(
-    () => [theme, setThemeWithSideEffect],
-    [theme, setThemeWithSideEffect],
-  );
+  return [
+    theme,
+    useCallback((newTheme: Theme) => {
+      setTheme(newTheme);
+      localStorage.setItem("theme", newTheme);
+      if (newTheme !== "system") {
+        document.documentElement.classList.toggle("dark", newTheme === "dark");
+      }
+    }, []),
+  ];
 };

 export default useTheme;
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,15 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { Toaster } from "@/components/ui/toaster.tsx";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import App from "./App.tsx";
 import "./index.css";
-import { TooltipProvider } from "./components/ui/tooltip.tsx";

 createRoot(document.getElementById("root")!).render(
  <StrictMode>
-    <TooltipProvider>
-      <App />
-    </TooltipProvider>
-    <Toaster />
+    <App />
+    <ToastContainer />
  </StrictMode>,
 );
--- a/client/src/test.d.ts
+++ b/client/src/test.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+
+import "@testing-library/jest-dom";
+
+declare global {
+  namespace Vi {
+    interface JestAssertion<T = any> extends jest.Matchers<void, T> {}
+  }
+}
+
+export {};
--- a/client/src/utils/tests/escapeUnicode.test.ts
+++ b/client/src/utils/tests/escapeUnicode.test.ts
@@ -1,27 +0,0 @@
-import { escapeUnicode } from "../escapeUnicode";
-
-describe("escapeUnicode", () => {
-  it("should escape Unicode characters in a string", () => {
-    const input = { text: "你好世界" };
-    const expected = '{\n  "text": "\\\\u4f60\\\\u597d\\\\u4e16\\\\u754c"\n}';
-    expect(escapeUnicode(input)).toBe(expected);
-  });
-
-  it("should handle empty strings", () => {
-    const input = { text: "" };
-    const expected = '{\n  "text": ""\n}';
-    expect(escapeUnicode(input)).toBe(expected);
-  });
-
-  it("should handle null and undefined values", () => {
-    const input = { text: null, value: undefined };
-    const expected = '{\n  "text": null\n}';
-    expect(escapeUnicode(input)).toBe(expected);
-  });
-
-  it("should handle numbers and booleans", () => {
-    const input = { number: 123, boolean: true };
-    const expected = '{\n  "number": 123,\n  "boolean": true\n}';
-    expect(escapeUnicode(input)).toBe(expected);
-  });
-});
--- a/client/src/utils/tests/jsonUtils.test.ts
+++ b/client/src/utils/tests/jsonUtils.test.ts
@@ -1,319 +0,0 @@
-import {
-  getDataType,
-  tryParseJson,
-  updateValueAtPath,
-  getValueAtPath,
-} from "../jsonUtils";
-import type { JsonValue } from "../jsonUtils";
-
-describe("getDataType", () => {
-  test("should return 'string' for string values", () => {
-    expect(getDataType("hello")).toBe("string");
-    expect(getDataType("")).toBe("string");
-  });
-
-  test("should return 'number' for number values", () => {
-    expect(getDataType(123)).toBe("number");
-    expect(getDataType(0)).toBe("number");
-    expect(getDataType(-10)).toBe("number");
-    expect(getDataType(1.5)).toBe("number");
-    expect(getDataType(NaN)).toBe("number");
-    expect(getDataType(Infinity)).toBe("number");
-  });
-
-  test("should return 'boolean' for boolean values", () => {
-    expect(getDataType(true)).toBe("boolean");
-    expect(getDataType(false)).toBe("boolean");
-  });
-
-  test("should return 'undefined' for undefined value", () => {
-    expect(getDataType(undefined)).toBe("undefined");
-  });
-
-  test("should return 'object' for object values", () => {
-    expect(getDataType({})).toBe("object");
-    expect(getDataType({ key: "value" })).toBe("object");
-  });
-
-  test("should return 'array' for array values", () => {
-    expect(getDataType([])).toBe("array");
-    expect(getDataType([1, 2, 3])).toBe("array");
-    expect(getDataType(["a", "b", "c"])).toBe("array");
-    expect(getDataType([{}, { nested: true }])).toBe("array");
-  });
-
-  test("should return 'null' for null value", () => {
-    expect(getDataType(null)).toBe("null");
-  });
-});
-
-describe("tryParseJson", () => {
-  test("should correctly parse valid JSON object", () => {
-    const jsonString = '{"name":"test","value":123}';
-    const result = tryParseJson(jsonString);
-
-    expect(result.success).toBe(true);
-    expect(result.data).toEqual({ name: "test", value: 123 });
-  });
-
-  test("should correctly parse valid JSON array", () => {
-    const jsonString = '[1,2,3,"test"]';
-    const result = tryParseJson(jsonString);
-
-    expect(result.success).toBe(true);
-    expect(result.data).toEqual([1, 2, 3, "test"]);
-  });
-
-  test("should correctly parse JSON with whitespace", () => {
-    const jsonString = '  {  "name"  :  "test"  }  ';
-    const result = tryParseJson(jsonString);
-
-    expect(result.success).toBe(true);
-    expect(result.data).toEqual({ name: "test" });
-  });
-
-  test("should correctly parse nested JSON structures", () => {
-    const jsonString =
-      '{"user":{"name":"test","details":{"age":30}},"items":[1,2,3]}';
-    const result = tryParseJson(jsonString);
-
-    expect(result.success).toBe(true);
-    expect(result.data).toEqual({
-      user: {
-        name: "test",
-        details: {
-          age: 30,
-        },
-      },
-      items: [1, 2, 3],
-    });
-  });
-
-  test("should correctly parse empty objects and arrays", () => {
-    expect(tryParseJson("{}").success).toBe(true);
-    expect(tryParseJson("{}").data).toEqual({});
-
-    expect(tryParseJson("[]").success).toBe(true);
-    expect(tryParseJson("[]").data).toEqual([]);
-  });
-
-  test("should return failure for non-JSON strings", () => {
-    const nonJsonString = "this is not json";
-    const result = tryParseJson(nonJsonString);
-
-    expect(result.success).toBe(false);
-    expect(result.data).toBe(nonJsonString);
-  });
-
-  test("should return failure for malformed JSON", () => {
-    const malformedJson = '{"name":"test",}';
-    const result = tryParseJson(malformedJson);
-
-    expect(result.success).toBe(false);
-    expect(result.data).toBe(malformedJson);
-  });
-
-  test("should return failure for strings with correct delimiters but invalid JSON", () => {
-    const invalidJson = "{name:test}";
-    const result = tryParseJson(invalidJson);
-
-    expect(result.success).toBe(false);
-    expect(result.data).toBe(invalidJson);
-  });
-
-  test("should handle edge cases", () => {
-    expect(tryParseJson("").success).toBe(false);
-    expect(tryParseJson("").data).toBe("");
-
-    expect(tryParseJson("   ").success).toBe(false);
-    expect(tryParseJson("   ").data).toBe("   ");
-
-    expect(tryParseJson("null").success).toBe(false);
-    expect(tryParseJson("null").data).toBe("null");
-
-    expect(tryParseJson('"string"').success).toBe(false);
-    expect(tryParseJson('"string"').data).toBe('"string"');
-
-    expect(tryParseJson("123").success).toBe(false);
-    expect(tryParseJson("123").data).toBe("123");
-
-    expect(tryParseJson("true").success).toBe(false);
-    expect(tryParseJson("true").data).toBe("true");
-  });
-});
-
-describe("updateValueAtPath", () => {
-  // Basic functionality tests
-  test("returns the new value when path is empty", () => {
-    expect(updateValueAtPath({ foo: "bar" }, [], "newValue")).toBe("newValue");
-  });
-
-  test("initializes an empty object when input is null/undefined and path starts with a string", () => {
-    expect(updateValueAtPath(null, ["foo"], "bar")).toEqual({
-      foo: "bar",
-    });
-    expect(updateValueAtPath(undefined, ["foo"], "bar")).toEqual({
-      foo: "bar",
-    });
-  });
-
-  test("initializes an empty array when input is null/undefined and path starts with a number", () => {
-    expect(updateValueAtPath(null, ["0"], "bar")).toEqual(["bar"]);
-    expect(updateValueAtPath(undefined, ["0"], "bar")).toEqual(["bar"]);
-  });
-
-  // Object update tests
-  test("updates a simple object property", () => {
-    const obj = { name: "John", age: 30 };
-    expect(updateValueAtPath(obj, ["age"], 31)).toEqual({
-      name: "John",
-      age: 31,
-    });
-  });
-
-  test("updates a nested object property", () => {
-    const obj = { user: { name: "John", address: { city: "New York" } } };
-    expect(
-      updateValueAtPath(obj, ["user", "address", "city"], "Boston"),
-    ).toEqual({ user: { name: "John", address: { city: "Boston" } } });
-  });
-
-  test("creates missing object properties", () => {
-    const obj = { user: { name: "John" } };
-    expect(
-      updateValueAtPath(obj, ["user", "address", "city"], "Boston"),
-    ).toEqual({ user: { name: "John", address: { city: "Boston" } } });
-  });
-
-  // Array update tests
-  test("updates an array item", () => {
-    const arr = [1, 2, 3, 4];
-    expect(updateValueAtPath(arr, ["2"], 5)).toEqual([1, 2, 5, 4]);
-  });
-
-  test("extends an array when index is out of bounds", () => {
-    const arr = [1, 2, 3];
-    const result = updateValueAtPath(arr, ["5"], "new") as JsonValue[];
-
-    // Check overall array structure
-    expect(result).toEqual([1, 2, 3, null, null, "new"]);
-
-    // Explicitly verify that indices 3 and 4 contain null, not undefined
-    expect(result[3]).toBe(null);
-    expect(result[4]).toBe(null);
-
-    // Verify these aren't "holes" in the array (important distinction)
-    expect(3 in result).toBe(true);
-    expect(4 in result).toBe(true);
-
-    // Verify the array has the correct length
-    expect(result.length).toBe(6);
-
-    // Verify the array doesn't have holes by checking every index exists
-    expect(result.every((_, index: number) => index in result)).toBe(true);
-  });
-
-  test("updates a nested array item", () => {
-    const obj = { users: [{ name: "John" }, { name: "Jane" }] };
-    expect(updateValueAtPath(obj, ["users", "1", "name"], "Janet")).toEqual({
-      users: [{ name: "John" }, { name: "Janet" }],
-    });
-  });
-
-  // Error handling tests
-  test("returns original value when trying to update a primitive with a path", () => {
-    const spy = jest.spyOn(console, "error").mockImplementation();
-    const result = updateValueAtPath("string", ["foo"], "bar");
-    expect(result).toBe("string");
-    expect(spy).toHaveBeenCalled();
-    spy.mockRestore();
-  });
-
-  test("returns original array when index is invalid", () => {
-    const spy = jest.spyOn(console, "error").mockImplementation();
-    const arr = [1, 2, 3];
-    expect(updateValueAtPath(arr, ["invalid"], 4)).toEqual(arr);
-    expect(spy).toHaveBeenCalled();
-    spy.mockRestore();
-  });
-
-  test("returns original array when index is negative", () => {
-    const spy = jest.spyOn(console, "error").mockImplementation();
-    const arr = [1, 2, 3];
-    expect(updateValueAtPath(arr, ["-1"], 4)).toEqual(arr);
-    expect(spy).toHaveBeenCalled();
-    spy.mockRestore();
-  });
-
-  test("handles sparse arrays correctly by filling holes with null", () => {
-    // Create a sparse array by deleting an element
-    const sparseArr = [1, 2, 3];
-    delete sparseArr[1]; // Now sparseArr is [1, <1 empty item>, 3]
-
-    // Update a value beyond the array length
-    const result = updateValueAtPath(sparseArr, ["5"], "new") as JsonValue[];
-
-    // Check overall array structure
-    expect(result).toEqual([1, null, 3, null, null, "new"]);
-
-    // Explicitly verify that index 1 (the hole) contains null, not undefined
-    expect(result[1]).toBe(null);
-
-    // Verify this isn't a hole in the array
-    expect(1 in result).toBe(true);
-
-    // Verify all indices contain null (not undefined)
-    expect(result[1]).not.toBe(undefined);
-    expect(result[3]).toBe(null);
-    expect(result[4]).toBe(null);
-  });
-});
-
-describe("getValueAtPath", () => {
-  test("returns the original value when path is empty", () => {
-    const obj = { foo: "bar" };
-    expect(getValueAtPath(obj, [])).toBe(obj);
-  });
-
-  test("returns the value at a simple path", () => {
-    const obj = { name: "John", age: 30 };
-    expect(getValueAtPath(obj, ["name"])).toBe("John");
-  });
-
-  test("returns the value at a nested path", () => {
-    const obj = { user: { name: "John", address: { city: "New York" } } };
-    expect(getValueAtPath(obj, ["user", "address", "city"])).toBe("New York");
-  });
-
-  test("returns default value when path does not exist", () => {
-    const obj = { user: { name: "John" } };
-    expect(getValueAtPath(obj, ["user", "address", "city"], "Unknown")).toBe(
-      "Unknown",
-    );
-  });
-
-  test("returns default value when input is null/undefined", () => {
-    expect(getValueAtPath(null, ["foo"], "default")).toBe("default");
-    expect(getValueAtPath(undefined, ["foo"], "default")).toBe("default");
-  });
-
-  test("handles array indices correctly", () => {
-    const arr = ["a", "b", "c"];
-    expect(getValueAtPath(arr, ["1"])).toBe("b");
-  });
-
-  test("returns default value for out of bounds array indices", () => {
-    const arr = ["a", "b", "c"];
-    expect(getValueAtPath(arr, ["5"], "default")).toBe("default");
-  });
-
-  test("returns default value for invalid array indices", () => {
-    const arr = ["a", "b", "c"];
-    expect(getValueAtPath(arr, ["invalid"], "default")).toBe("default");
-  });
-
-  test("navigates through mixed object and array paths", () => {
-    const obj = { users: [{ name: "John" }, { name: "Jane" }] };
-    expect(getValueAtPath(obj, ["users", "1", "name"])).toBe("Jane");
-  });
-});
--- a/client/src/utils/tests/schemaUtils.test.ts
+++ b/client/src/utils/tests/schemaUtils.test.ts
@@ -1,139 +0,0 @@
-import { generateDefaultValue, formatFieldLabel } from "../schemaUtils";
-import type { JsonSchemaType } from "../jsonUtils";
-
-describe("generateDefaultValue", () => {
-  test("generates default string", () => {
-    expect(generateDefaultValue({ type: "string", required: true })).toBe("");
-  });
-
-  test("generates default number", () => {
-    expect(generateDefaultValue({ type: "number", required: true })).toBe(0);
-  });
-
-  test("generates default integer", () => {
-    expect(generateDefaultValue({ type: "integer", required: true })).toBe(0);
-  });
-
-  test("generates default boolean", () => {
-    expect(generateDefaultValue({ type: "boolean", required: true })).toBe(
-      false,
-    );
-  });
-
-  test("generates default array", () => {
-    expect(generateDefaultValue({ type: "array", required: true })).toEqual([]);
-  });
-
-  test("generates default empty object", () => {
-    expect(generateDefaultValue({ type: "object", required: true })).toEqual(
-      {},
-    );
-  });
-
-  test("generates default null for unknown types", () => {
-    // @ts-expect-error Testing with invalid type
-    expect(generateDefaultValue({ type: "unknown", required: true })).toBe(
-      null,
-    );
-  });
-
-  test("generates empty array for non-required array", () => {
-    expect(generateDefaultValue({ type: "array", required: false })).toEqual(
-      [],
-    );
-  });
-
-  test("generates empty object for non-required object", () => {
-    expect(generateDefaultValue({ type: "object", required: false })).toEqual(
-      {},
-    );
-  });
-
-  test("generates null for non-required primitive types", () => {
-    expect(generateDefaultValue({ type: "string", required: false })).toBe(
-      null,
-    );
-    expect(generateDefaultValue({ type: "number", required: false })).toBe(
-      null,
-    );
-    expect(generateDefaultValue({ type: "boolean", required: false })).toBe(
-      null,
-    );
-  });
-
-  test("generates object with properties", () => {
-    const schema: JsonSchemaType = {
-      type: "object",
-      required: true,
-      properties: {
-        name: { type: "string", required: true },
-        age: { type: "number", required: true },
-        isActive: { type: "boolean", required: true },
-      },
-    };
-    expect(generateDefaultValue(schema)).toEqual({
-      name: "",
-      age: 0,
-      isActive: false,
-    });
-  });
-
-  test("handles nested objects", () => {
-    const schema: JsonSchemaType = {
-      type: "object",
-      required: true,
-      properties: {
-        user: {
-          type: "object",
-          required: true,
-          properties: {
-            name: { type: "string", required: true },
-            address: {
-              type: "object",
-              required: true,
-              properties: {
-                city: { type: "string", required: true },
-              },
-            },
-          },
-        },
-      },
-    };
-    expect(generateDefaultValue(schema)).toEqual({
-      user: {
-        name: "",
-        address: {
-          city: "",
-        },
-      },
-    });
-  });
-
-  test("uses schema default value when provided", () => {
-    expect(generateDefaultValue({ type: "string", default: "test" })).toBe(
-      "test",
-    );
-  });
-});
-
-describe("formatFieldLabel", () => {
-  test("formats camelCase", () => {
-    expect(formatFieldLabel("firstName")).toBe("First Name");
-  });
-
-  test("formats snake_case", () => {
-    expect(formatFieldLabel("first_name")).toBe("First name");
-  });
-
-  test("formats single word", () => {
-    expect(formatFieldLabel("name")).toBe("Name");
-  });
-
-  test("formats mixed case with underscores", () => {
-    expect(formatFieldLabel("user_firstName")).toBe("User first Name");
-  });
-
-  test("handles empty string", () => {
-    expect(formatFieldLabel("")).toBe("");
-  });
-});
--- a/client/src/utils/configUtils.ts
+++ b/client/src/utils/configUtils.ts
@@ -1,26 +0,0 @@
-import { InspectorConfig } from "@/lib/configurationTypes";
-import { DEFAULT_MCP_PROXY_LISTEN_PORT } from "@/lib/constants";
-
-export const getMCPProxyAddress = (config: InspectorConfig): string => {
-  const proxyFullAddress = config.MCP_PROXY_FULL_ADDRESS.value as string;
-  if (proxyFullAddress) {
-    return proxyFullAddress;
-  }
-  return `${window.location.protocol}//${window.location.hostname}:${DEFAULT_MCP_PROXY_LISTEN_PORT}`;
-};
-
-export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
-  return config.MCP_SERVER_REQUEST_TIMEOUT.value as number;
-};
-
-export const resetRequestTimeoutOnProgress = (
-  config: InspectorConfig,
-): boolean => {
-  return config.MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS.value as boolean;
-};
-
-export const getMCPServerRequestMaxTotalTimeout = (
-  config: InspectorConfig,
-): number => {
-  return config.MCP_REQUEST_MAX_TOTAL_TIMEOUT.value as number;
-};
--- a/client/src/utils/escapeUnicode.ts
+++ b/client/src/utils/escapeUnicode.ts
@@ -1,16 +0,0 @@
-// Utility function to escape Unicode characters
-export function escapeUnicode(obj: unknown): string {
-  return JSON.stringify(
-    obj,
-    (_key: string, value) => {
-      if (typeof value === "string") {
-        // Replace non-ASCII characters with their Unicode escape sequences
-        return value.replace(/[^\0-\x7F]/g, (char) => {
-          return "\\u" + ("0000" + char.charCodeAt(0).toString(16)).slice(-4);
-        });
-      }
-      return value;
-    },
-    2,
-  );
-}
--- a/client/src/utils/jsonUtils.ts
+++ b/client/src/utils/jsonUtils.ts
@@ -1,208 +0,0 @@
-export type JsonValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | JsonValue[]
-  | { [key: string]: JsonValue };
-
-export type JsonSchemaType = {
-  type:
-    | "string"
-    | "number"
-    | "integer"
-    | "boolean"
-    | "array"
-    | "object"
-    | "null";
-  description?: string;
-  required?: boolean;
-  default?: JsonValue;
-  properties?: Record<string, JsonSchemaType>;
-  items?: JsonSchemaType;
-};
-
-export type JsonObject = { [key: string]: JsonValue };
-
-export type DataType =
-  | "string"
-  | "number"
-  | "bigint"
-  | "boolean"
-  | "symbol"
-  | "undefined"
-  | "object"
-  | "function"
-  | "array"
-  | "null";
-
-export function getDataType(value: JsonValue): DataType {
-  if (Array.isArray(value)) return "array";
-  if (value === null) return "null";
-  return typeof value;
-}
-
-export function tryParseJson(str: string): {
-  success: boolean;
-  data: JsonValue;
-} {
-  const trimmed = str.trim();
-  if (
-    !(trimmed.startsWith("{") && trimmed.endsWith("}")) &&
-    !(trimmed.startsWith("[") && trimmed.endsWith("]"))
-  ) {
-    return { success: false, data: str };
-  }
-  try {
-    return { success: true, data: JSON.parse(str) };
-  } catch {
-    return { success: false, data: str };
-  }
-}
-
-/**
- * Updates a value at a specific path in a nested JSON structure
- * @param obj The original JSON value
- * @param path Array of keys/indices representing the path to the value
- * @param value The new value to set
- * @returns A new JSON value with the updated path
- */
-export function updateValueAtPath(
-  obj: JsonValue,
-  path: string[],
-  value: JsonValue,
-): JsonValue {
-  if (path.length === 0) return value;
-
-  if (obj === null || obj === undefined) {
-    obj = !isNaN(Number(path[0])) ? [] : {};
-  }
-
-  if (Array.isArray(obj)) {
-    return updateArray(obj, path, value);
-  } else if (typeof obj === "object" && obj !== null) {
-    return updateObject(obj as JsonObject, path, value);
-  } else {
-    console.error(
-      `Cannot update path ${path.join(".")} in non-object/array value:`,
-      obj,
-    );
-    return obj;
-  }
-}
-
-/**
- * Updates an array at a specific path
- */
-function updateArray(
-  array: JsonValue[],
-  path: string[],
-  value: JsonValue,
-): JsonValue[] {
-  const [index, ...restPath] = path;
-  const arrayIndex = Number(index);
-
-  if (isNaN(arrayIndex)) {
-    console.error(`Invalid array index: ${index}`);
-    return array;
-  }
-
-  if (arrayIndex < 0) {
-    console.error(`Array index out of bounds: ${arrayIndex} < 0`);
-    return array;
-  }
-
-  let newArray: JsonValue[] = [];
-  for (let i = 0; i < array.length; i++) {
-    newArray[i] = i in array ? array[i] : null;
-  }
-
-  if (arrayIndex >= newArray.length) {
-    const extendedArray: JsonValue[] = new Array(arrayIndex).fill(null);
-    // Copy over the existing elements (now guaranteed to be dense)
-    for (let i = 0; i < newArray.length; i++) {
-      extendedArray[i] = newArray[i];
-    }
-    newArray = extendedArray;
-  }
-
-  if (restPath.length === 0) {
-    newArray[arrayIndex] = value;
-  } else {
-    newArray[arrayIndex] = updateValueAtPath(
-      newArray[arrayIndex],
-      restPath,
-      value,
-    );
-  }
-  return newArray;
-}
-
-/**
- * Updates an object at a specific path
- */
-function updateObject(
-  obj: JsonObject,
-  path: string[],
-  value: JsonValue,
-): JsonObject {
-  const [key, ...restPath] = path;
-
-  // Validate object key
-  if (typeof key !== "string") {
-    console.error(`Invalid object key: ${key}`);
-    return obj;
-  }
-
-  const newObj = { ...obj };
-
-  if (restPath.length === 0) {
-    newObj[key] = value;
-  } else {
-    // Ensure key exists
-    if (!(key in newObj)) {
-      newObj[key] = {};
-    }
-    newObj[key] = updateValueAtPath(newObj[key], restPath, value);
-  }
-  return newObj;
-}
-
-/**
- * Gets a value at a specific path in a nested JSON structure
- * @param obj The JSON value to traverse
- * @param path Array of keys/indices representing the path to the value
- * @param defaultValue Value to return if path doesn't exist
- * @returns The value at the path, or defaultValue if not found
- */
-export function getValueAtPath(
-  obj: JsonValue,
-  path: string[],
-  defaultValue: JsonValue = null,
-): JsonValue {
-  if (path.length === 0) return obj;
-
-  const [first, ...rest] = path;
-
-  if (obj === null || obj === undefined) {
-    return defaultValue;
-  }
-
-  if (Array.isArray(obj)) {
-    const index = Number(first);
-    if (isNaN(index) || index < 0 || index >= obj.length) {
-      return defaultValue;
-    }
-    return getValueAtPath(obj[index], rest, defaultValue);
-  }
-
-  if (typeof obj === "object" && obj !== null) {
-    if (!(first in obj)) {
-      return defaultValue;
-    }
-    return getValueAtPath((obj as JsonObject)[first], rest, defaultValue);
-  }
-
-  return defaultValue;
-}
--- a/client/src/utils/schemaUtils.ts
+++ b/client/src/utils/schemaUtils.ts
@@ -1,56 +0,0 @@
-import type { JsonValue, JsonSchemaType, JsonObject } from "./jsonUtils";
-
-/**
- * Generates a default value based on a JSON schema type
- * @param schema The JSON schema definition
- * @returns A default value matching the schema type, or null for non-required fields
- */
-export function generateDefaultValue(schema: JsonSchemaType): JsonValue {
-  if ("default" in schema) {
-    return schema.default;
-  }
-
-  if (!schema.required) {
-    if (schema.type === "array") return [];
-    if (schema.type === "object") return {};
-    return null;
-  }
-
-  switch (schema.type) {
-    case "string":
-      return "";
-    case "number":
-    case "integer":
-      return 0;
-    case "boolean":
-      return false;
-    case "array":
-      return [];
-    case "object": {
-      if (!schema.properties) return {};
-
-      const obj: JsonObject = {};
-      Object.entries(schema.properties)
-        .filter(([, prop]) => prop.required)
-        .forEach(([key, prop]) => {
-          const value = generateDefaultValue(prop);
-          obj[key] = value;
-        });
-      return obj;
-    }
-    default:
-      return null;
-  }
-}
-
-/**
- * Formats a field key into a human-readable label
- * @param key The field key to format
- * @returns A formatted label string
- */
-export function formatFieldLabel(key: string): string {
-  return key
-    .replace(/([A-Z])/g, " $1") // Insert space before capital letters
-    .replace(/_/g, " ") // Replace underscores with spaces
-    .replace(/^\w/, (c) => c.toUpperCase()); // Capitalize first letter
-}
--- a/client/test/setupTests.ts
+++ b/client/test/setupTests.ts
@@ -0,0 +1,6 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+import "@testing-library/jest-dom/vitest";
+
+// Add any additional test setup, custom matchers, or global mocks here
+// This file runs before each test file
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -4,6 +4,7 @@
    "paths": {
      "@/*": ["./src/*"]
    },
+    "types": ["vitest/globals", "@testing-library/jest-dom"],

    "target": "ES2020",
    "useDefineForClassFields": true,
@@ -24,8 +25,7 @@
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true,
-    "types": ["jest", "@testing-library/jest-dom", "node"]
+    "resolveJsonModule": true
  },
-  "include": ["src"]
+  "include": ["src", "test"]
 }
--- a/client/tsconfig.jest.json
+++ b/client/tsconfig.jest.json
@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.app.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "module": "ESNext",
-    "moduleResolution": "node"
-  },
-  "include": ["src"]
-}
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -2,7 +2,8 @@
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.test.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
--- a/client/tsconfig.test.json
+++ b/client/tsconfig.test.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.test.tsx", "src/**/*.test.ts", "test/**/*.ts"]
+}
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,13 +1,10 @@
-import react from "@vitejs/plugin-react";
 import path from "path";
 import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";

 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [react()],
-  server: {
-    host: true,
-  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
--- a/client/vitest.config.ts
+++ b/client/vitest.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./test/setupTests.ts"],
+    typecheck: {
+      tsconfig: "./tsconfig.test.json",
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
--- a/mcp-inspector.png
+++ b/mcp-inspector.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector",
-  "version": "0.9.0",
+  "version": "0.3.0",
  "description": "Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@@ -22,8 +22,6 @@
  ],
  "scripts": {
    "dev": "concurrently \"cd client && npm run dev\" \"cd server && npm run dev\"",
-    "dev:windows": "concurrently \"cd client && npm run dev\" \"cd server && npm run dev:windows",
-    "test": "npm run prettier-check && cd client && npm test",
    "build-server": "cd server && npm run build",
    "build-client": "cd client && npm run build",
    "build": "npm run build-server && npm run build-client",
@@ -32,19 +30,17 @@
    "start": "node ./bin/cli.js",
    "prepare": "npm run build",
    "prettier-fix": "prettier --write .",
-    "prettier-check": "prettier --check .",
    "publish-all": "npm publish --workspaces --access public && npm publish --access public"
  },
  "dependencies": {
-    "@modelcontextprotocol/inspector-client": "^0.9.0",
-    "@modelcontextprotocol/inspector-server": "^0.9.0",
+    "@modelcontextprotocol/inspector-client": "0.3.0",
+    "@modelcontextprotocol/inspector-server": "0.3.0",
    "concurrently": "^9.0.1",
    "shell-quote": "^1.8.2",
-    "spawn-rx": "^5.1.2",
+    "spawn-rx": "^5.1.0",
    "ts-node": "^10.9.2"
  },
  "devDependencies": {
-    "@types/jest": "^29.5.14",
    "@types/node": "^22.7.5",
    "@types/shell-quote": "^1.7.5",
    "prettier": "3.3.3"
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.9.0",
+  "version": "0.3.0",
  "description": "Server-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@@ -16,19 +16,20 @@
  "scripts": {
    "build": "tsc",
    "start": "node build/index.js",
-    "dev": "tsx watch --clear-screen=false src/index.ts",
-    "dev:windows": "tsx watch --clear-screen=false src/index.ts < NUL"
+    "dev": "tsx watch --clear-screen=false src/index.ts"
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",
+    "@types/eventsource": "^1.1.15",
    "@types/express": "^4.17.21",
    "@types/ws": "^8.5.12",
    "tsx": "^4.19.0",
    "typescript": "^5.6.2"
  },
  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.9.0",
+    "@modelcontextprotocol/sdk": "^1.0.3",
    "cors": "^2.8.5",
+    "eventsource": "^2.0.2",
    "express": "^4.21.0",
    "ws": "^8.18.0",
    "zod": "^3.23.8"
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -1,30 +1,29 @@
 #!/usr/bin/env node

 import cors from "cors";
+import EventSource from "eventsource";
 import { parseArgs } from "node:util";
 import { parse as shellParseArgs } from "shell-quote";

-import {
-  SSEClientTransport,
-  SseError,
-} from "@modelcontextprotocol/sdk/client/sse.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import {
  StdioClientTransport,
  getDefaultEnvironment,
 } from "@modelcontextprotocol/sdk/client/stdio.js";
-import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
 import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
 import express from "express";
-import { findActualExecutable } from "spawn-rx";
 import mcpProxy from "./mcpProxy.js";
-
-const SSE_HEADERS_PASSTHROUGH = ["authorization"];
+import { findActualExecutable } from "spawn-rx";

 const defaultEnvironment = {
  ...getDefaultEnvironment(),
  ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
 };

+// Polyfill EventSource for an SSE client in Node.js
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(global as any).EventSource = EventSource;
+
 const { values } = parseArgs({
  args: process.argv.slice(2),
  options: {
@@ -38,8 +37,7 @@ app.use(cors());

 let webAppTransports: SSEServerTransport[] = [];

-const createTransport = async (req: express.Request): Promise<Transport> => {
-  const query = req.query;
+const createTransport = async (query: express.Request["query"]) => {
  console.log("Query parameters:", query);

  const transportType = query.transportType as string;
@@ -67,29 +65,9 @@ const createTransport = async (req: express.Request): Promise<Transport> => {
    return transport;
  } else if (transportType === "sse") {
    const url = query.url as string;
-    const headers: HeadersInit = {
-      Accept: "text/event-stream",
-    };
+    console.log(`SSE transport: url=${url}`);

-    for (const key of SSE_HEADERS_PASSTHROUGH) {
-      if (req.headers[key] === undefined) {
-        continue;
-      }
-
-      const value = req.headers[key];
-      headers[key] = Array.isArray(value) ? value[value.length - 1] : value;
-    }
-
-    console.log(`SSE transport: url=${url}, headers=${Object.keys(headers)}`);
-
-    const transport = new SSEClientTransport(new URL(url), {
-      eventSourceInit: {
-        fetch: (url, init) => fetch(url, { ...init, headers }),
-      },
-      requestInit: {
-        headers,
-      },
-    });
+    const transport = new SSEClientTransport(new URL(url));
    await transport.start();

    console.log("Connected to SSE transport");
@@ -100,27 +78,11 @@ const createTransport = async (req: express.Request): Promise<Transport> => {
  }
 };

-let backingServerTransport: Transport | undefined;
-
 app.get("/sse", async (req, res) => {
  try {
    console.log("New SSE connection");

-    try {
-      await backingServerTransport?.close();
-      backingServerTransport = await createTransport(req);
-    } catch (error) {
-      if (error instanceof SseError && error.code === 401) {
-        console.error(
-          "Received 401 Unauthorized from MCP server:",
-          error.message,
-        );
-        res.status(401).json(error);
-        return;
-      }
-
-      throw error;
-    }
+    const backingServerTransport = await createTransport(req.query);

    console.log("Connected MCP client to backing server transport");

@@ -147,6 +109,9 @@ app.get("/sse", async (req, res) => {
    mcpProxy({
      transportToClient: webAppTransport,
      transportToServer: backingServerTransport,
+      onerror: (error) => {
+        console.error(error);
+      },
    });

    console.log("Set up MCP proxy");
@@ -173,12 +138,6 @@ app.post("/message", async (req, res) => {
  }
 });

-app.get("/health", (req, res) => {
-  res.json({
-    status: "ok",
-  });
-});
-
 app.get("/config", (req, res) => {
  try {
    res.json({
@@ -192,17 +151,5 @@ app.get("/config", (req, res) => {
  }
 });

-const PORT = process.env.PORT || 6277;
-
-const server = app.listen(PORT);
-server.on("listening", () => {
-  console.log(`⚙️ Proxy server listening on port ${PORT}`);
-});
-server.on("error", (err) => {
-  if (err.message.includes(`EADDRINUSE`)) {
-    console.error(`❌  Proxy Server PORT IS IN USE at port ${PORT} ❌ `);
-  } else {
-    console.error(err.message);
-  }
-  process.exit(1);
-});
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {});
--- a/server/src/mcpProxy.ts
+++ b/server/src/mcpProxy.ts
@@ -1,29 +1,23 @@
 import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";

-function onClientError(error: Error) {
-  console.error("Error from inspector client:", error);
-}
-
-function onServerError(error: Error) {
-  console.error("Error from MCP server:", error);
-}
-
 export default function mcpProxy({
  transportToClient,
  transportToServer,
+  onerror,
 }: {
  transportToClient: Transport;
  transportToServer: Transport;
+  onerror: (error: Error) => void;
 }) {
  let transportToClientClosed = false;
  let transportToServerClosed = false;

  transportToClient.onmessage = (message) => {
-    transportToServer.send(message).catch(onServerError);
+    transportToServer.send(message).catch(onerror);
  };

  transportToServer.onmessage = (message) => {
-    transportToClient.send(message).catch(onClientError);
+    transportToClient.send(message).catch(onerror);
  };

  transportToClient.onclose = () => {
@@ -32,7 +26,7 @@ export default function mcpProxy({
    }

    transportToClientClosed = true;
-    transportToServer.close().catch(onServerError);
+    transportToServer.close().catch(onerror);
  };

  transportToServer.onclose = () => {
@@ -40,9 +34,10 @@ export default function mcpProxy({
      return;
    }
    transportToServerClosed = true;
-    transportToClient.close().catch(onClientError);
+
+    transportToClient.close().catch(onerror);
  };

-  transportToClient.onerror = onClientError;
-  transportToServer.onerror = onServerError;
+  transportToClient.onerror = onerror;
+  transportToServer.onerror = onerror;
 }