Merge branch 'main' into update-prism

client/jest.config.cjs

@@ -3,16 +3,12 @@ module.exports = {
   testEnvironment: "jsdom",
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
-    "^../components/DynamicJsonForm$":
-      "<rootDir>/src/utils/__mocks__/DynamicJsonForm.ts",
-    "^../../components/DynamicJsonForm$":
-      "<rootDir>/src/utils/__mocks__/DynamicJsonForm.ts",
+    "\\.css$": "<rootDir>/src/__mocks__/styleMock.js",
   },
   transform: {
     "^.+\\.tsx?$": [
       "ts-jest",
       {
-        useESM: true,
         jsx: "react-jsx",
         tsconfig: "tsconfig.jest.json",
       },

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Client-side application for the Model Context Protocol inspector",
   "license": "MIT",
   "author": "Anthropic, PBC (https://anthropic.com)",
@@ -24,8 +24,8 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.6.1",
-    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.3",
@@ -50,6 +50,8 @@
   },
   "devDependencies": {
     "@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/react": "^18.3.10",

client/src/App.tsx

@@ -15,6 +15,7 @@ import {
   Root,
   ServerNotification,
   Tool,
+  LoggingLevel,
 } from "@modelcontextprotocol/sdk/types.js";
 import React, { Suspense, useEffect, useRef, useState } from "react";
 import { useConnection } from "./lib/hooks/useConnection";
@@ -47,7 +48,7 @@ import ToolsTab from "./components/ToolsTab";
 
 const params = new URLSearchParams(window.location.search);
 const PROXY_PORT = params.get("proxyPort") ?? "3000";
-const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
+const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
 
 const App = () => {
   // Handle OAuth callback route
@@ -91,6 +92,7 @@ const App = () => {
       (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio"
     );
   });
+  const [logLevel, setLogLevel] = useState<LoggingLevel>("debug");
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [stdErrNotifications, setStdErrNotifications] = useState<
     StdErrNotification[]
@@ -412,6 +414,17 @@ const App = () => {
     await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
+  const sendLogLevelRequest = async (level: LoggingLevel) => {
+    await makeRequest(
+      {
+        method: "logging/setLevel" as const,
+        params: { level },
+      },
+      z.object({}),
+    );
+    setLogLevel(level);
+  };
+
   return (
     <div className="flex h-screen bg-background">
       <Sidebar
@@ -430,6 +443,9 @@ const App = () => {
         setBearerToken={setBearerToken}
         onConnect={connectMcpServer}
         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">

client/src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

client/src/components/Sidebar.tsx

@@ -19,6 +19,10 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { StdErrNotification } from "@/lib/notificationTypes";
+import {
+  LoggingLevel,
+  LoggingLevelSchema,
+} from "@modelcontextprotocol/sdk/types.js";
 
 import useTheme from "../lib/useTheme";
 import { version } from "../../../package.json";
@@ -39,6 +43,9 @@ interface SidebarProps {
   setBearerToken: (token: string) => void;
   onConnect: () => void;
   stdErrNotifications: StdErrNotification[];
+  logLevel: LoggingLevel;
+  sendLogLevelRequest: (level: LoggingLevel) => void;
+  loggingSupported: boolean;
 }
 
 const Sidebar = ({
@@ -57,6 +64,9 @@ const Sidebar = ({
   setBearerToken,
   onConnect,
   stdErrNotifications,
+  logLevel,
+  sendLogLevelRequest,
+  loggingSupported,
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
@@ -177,9 +187,17 @@ const Sidebar = ({
                           value={key}
                           onChange={(e) => {
                             const newKey = e.target.value;
-                            const newEnv = { ...env };
-                            delete newEnv[key];
-                            newEnv[newKey] = 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>,
+                            );
                             setEnv(newEnv);
                             setShownEnvVars((prev) => {
                               const next = new Set(prev);
@@ -290,6 +308,28 @@ const Sidebar = ({
                     : "Disconnected"}
               </span>
             </div>
+
+            {loggingSupported && connectionStatus === "connected" && (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Logging Level</label>
+                <Select
+                  value={logLevel}
+                  onValueChange={(value: LoggingLevel) =>
+                    sendLogLevelRequest(value)
+                  }
+                >
+                  <SelectTrigger>
+                    <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">

client/src/components/ToolsTab.tsx

@@ -8,15 +8,15 @@ import { Textarea } from "@/components/ui/textarea";
 import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import {
+  CallToolResultSchema,
+  CompatibilityCallToolResult,
   ListToolsResult,
   Tool,
-  CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
-
-import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
+import { escapeUnicode } from "@/utils/escapeUnicode";
 
 const ToolsTab = ({
   tools,
@@ -54,7 +54,7 @@ const ToolsTab = ({
           <>
             <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
             <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)}
+              {escapeUnicode(toolResult)}
             </pre>
             <h4 className="font-semibold mb-2">Errors:</h4>
             {parsedResult.error.errors.map((error, idx) => (
@@ -62,7 +62,7 @@ const ToolsTab = ({
                 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)}
+                {escapeUnicode(error)}
               </pre>
             ))}
           </>
@@ -101,7 +101,7 @@ const ToolsTab = ({
                   </audio>
                 ) : (
                   <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)}
+                    {escapeUnicode(item.resource)}
                   </pre>
                 ))}
             </div>
@@ -113,7 +113,7 @@ const ToolsTab = ({
         <>
           <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
           <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)}
+            {escapeUnicode(toolResult.toolResult)}
           </pre>
         </>
       );
@@ -233,6 +233,7 @@ const ToolsTab = ({
                           id={key}
                           name={key}
                           placeholder={prop.description}
+                          value={(params[key] as string) ?? ""}
                           onChange={(e) =>
                             setParams({
                               ...params,

client/src/components/__tests__/DynamicJsonForm.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, jest } from "@jest/globals";
+import DynamicJsonForm from "../DynamicJsonForm";
+import type { JsonSchemaType } from "../DynamicJsonForm";
+
+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();
+    });
+  });
+});

client/src/components/__tests__/Sidebar.test.tsx

@@ -0,0 +1,307 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, beforeEach, jest } from "@jest/globals";
+import Sidebar from "../Sidebar";
+
+// 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(),
+    stdErrNotifications: [],
+    logLevel: "info" as const,
+    sendLogLevelRequest: jest.fn(),
+    loggingSupported: true,
+  };
+
+  const renderSidebar = (props = {}) => {
+    return render(<Sidebar {...defaultProps} {...props} />);
+  };
+
+  const openEnvVarsSection = () => {
+    const button = screen.getByText("Environment Variables");
+    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(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />);
+
+      // 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(<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />);
+
+      // 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" });
+    });
+  });
+});

client/src/components/__tests__/ToolsTab.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, jest } from "@jest/globals";
+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: "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(),
+    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", () => {
+    const { rerender } = renderToolsTab({
+      selectedTool: mockTools[0],
+    });
+
+    // Enter a value in the first tool's input
+    const input = screen.getByRole("spinbutton") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "42" } });
+    expect(input.value).toBe("42");
+
+    // Switch to second tool
+    rerender(
+      <Tabs defaultValue="tools">
+        <ToolsTab {...defaultProps} selectedTool={mockTools[1]} />
+      </Tabs>,
+    );
+
+    // Verify input is reset
+    const newInput = screen.getByRole("spinbutton") as HTMLInputElement;
+    expect(newInput.value).toBe("");
+  });
+});

client/src/utils/__tests__/escapeUnicode.test.ts

@@ -0,0 +1,27 @@
+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);
+  });
+});

client/src/utils/escapeUnicode.ts

@@ -0,0 +1,16 @@
+// 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,
+  );
+}

client/tsconfig.app.json

@@ -24,7 +24,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["jest", "@testing-library/jest-dom", "node"]
   },
   "include": ["src"]
 }

client/vite.config.ts

@@ -5,7 +5,9 @@ import { defineConfig } from "vite";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: {},
+  server: {
+    host: true,
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),