Merge branch 'main' into main

2025-04-14 17:00:34 -04:00
parent c4cc4144d9 8f7680d72b
commit d0622d3eb5
22 changed files with 362 additions and 139 deletions
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-client",
-  "version": "0.8.2",
+  "version": "0.9.0",
  "description": "Client-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -3,33 +3,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import JsonEditor from "./JsonEditor";
-import { updateValueAtPath, JsonObject } from "@/utils/jsonPathUtils";
+import { updateValueAtPath } from "@/utils/jsonUtils";
 import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
-
-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;
-};
+import type { JsonValue, JsonSchemaType, JsonObject } from "@/utils/jsonUtils";

 interface DynamicJsonFormProps {
  schema: JsonSchemaType;
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -1,9 +1,10 @@
 import { useState, memo, useMemo, useCallback, useEffect } from "react";
-import { JsonValue } from "./DynamicJsonForm";
+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;
@@ -11,21 +12,7 @@ interface JsonViewProps {
  initialExpandDepth?: number;
  className?: string;
  withCopyButton?: boolean;
-}
-
-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 };
-  }
+  isError?: boolean;
 }

 const JsonView = memo(
@@ -35,6 +22,7 @@ const JsonView = memo(
    initialExpandDepth = 3,
    className,
    withCopyButton = true,
+    isError = false,
  }: JsonViewProps) => {
    const { toast } = useToast();
    const [copied, setCopied] = useState(false);
@@ -100,6 +88,7 @@ const JsonView = memo(
            name={name}
            depth={0}
            initialExpandDepth={initialExpandDepth}
+            isError={isError}
          />
        </div>
      </div>
@@ -114,28 +103,28 @@ interface JsonNodeProps {
  name?: string;
  depth: number;
  initialExpandDepth: number;
+  isError?: boolean;
 }

 const JsonNode = memo(
-  ({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
+  ({
+    data,
+    name,
+    depth = 0,
+    initialExpandDepth,
+    isError = false,
+  }: JsonNodeProps) => {
    const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
-
-    const getDataType = (value: JsonValue): string => {
-      if (Array.isArray(value)) return "array";
-      if (value === null) return "null";
-      return typeof value;
-    };
-
-    const dataType = getDataType(data);
-
-    const typeStyleMap: Record<string, string> = {
+    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 break-all whitespace-pre-wrap",
+      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
@@ -236,7 +225,14 @@ const JsonNode = memo(
                {name}:
              </span>
            )}
-            <pre className={typeStyleMap.string}>"{value}"</pre>
+            <pre
+              className={clsx(
+                typeStyleMap.string,
+                "break-all whitespace-pre-wrap",
+              )}
+            >
+              "{value}"
+            </pre>
          </div>
        );
      }
@@ -250,8 +246,8 @@ const JsonNode = memo(
          )}
          <pre
            className={clsx(
-              typeStyleMap.string,
-              "cursor-pointer group-hover:text-green-500",
+              isError ? typeStyleMap.error : typeStyleMap.string,
+              "cursor-pointer break-all whitespace-pre-wrap",
            )}
            onClick={() => setIsExpanded(!isExpanded)}
            title={isExpanded ? "Click to collapse" : "Click to expand"}
--- 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-700">
+    <div className="p-4 border-b border-gray-200 dark:border-gray-800">
      <h3 className="font-semibold dark:text-white">{title}</h3>
    </div>
    <div className="p-4">
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -108,7 +108,7 @@ const PromptsTab = ({
        />

        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200">
+          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
            <h3 className="font-semibold">
              {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
            </h3>
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -162,7 +162,7 @@ const ResourcesTab = ({
        />

        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+          <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}
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -94,7 +94,7 @@ const Sidebar = ({

  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">
+      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
        <div className="flex items-center">
          <h1 className="ml-2 text-lg font-semibold">
            MCP Inspector v{version}
@@ -105,14 +105,19 @@ 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">Transport Type</label>
+            <label
+              className="text-sm font-medium"
+              htmlFor="transport-type-select"
+            >
+              Transport Type
+            </label>
            <Select
              value={transportType}
              onValueChange={(value: "stdio" | "sse") =>
                setTransportType(value)
              }
            >
-              <SelectTrigger>
+              <SelectTrigger id="transport-type-select">
                <SelectValue placeholder="Select transport type" />
              </SelectTrigger>
              <SelectContent>
@@ -125,8 +130,11 @@ const Sidebar = ({
          {transportType === "stdio" ? (
            <>
              <div className="space-y-2">
-                <label className="text-sm font-medium">Command</label>
+                <label className="text-sm font-medium" htmlFor="command-input">
+                  Command
+                </label>
                <Input
+                  id="command-input"
                  placeholder="Command"
                  value={command}
                  onChange={(e) => setCommand(e.target.value)}
@@ -134,8 +142,14 @@ const Sidebar = ({
                />
              </div>
              <div className="space-y-2">
-                <label className="text-sm font-medium">Arguments</label>
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="arguments-input"
+                >
+                  Arguments
+                </label>
                <Input
+                  id="arguments-input"
                  placeholder="Arguments (space-separated)"
                  value={args}
                  onChange={(e) => setArgs(e.target.value)}
@@ -146,8 +160,11 @@ const Sidebar = ({
          ) : (
            <>
              <div className="space-y-2">
-                <label className="text-sm font-medium">URL</label>
+                <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)}
@@ -159,6 +176,7 @@ const Sidebar = ({
                  variant="outline"
                  onClick={() => setShowBearerToken(!showBearerToken)}
                  className="flex items-center w-full"
+                  aria-expanded={showBearerToken}
                >
                  {showBearerToken ? (
                    <ChevronDown className="w-4 h-4 mr-2" />
@@ -169,8 +187,14 @@ const Sidebar = ({
                </Button>
                {showBearerToken && (
                  <div className="space-y-2">
-                    <label className="text-sm font-medium">Bearer Token</label>
+                    <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)}
@@ -189,6 +213,7 @@ const Sidebar = ({
                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" />
@@ -203,6 +228,7 @@ 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) => {
@@ -245,6 +271,7 @@ 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}
@@ -311,6 +338,7 @@ const Sidebar = ({
              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" />
@@ -327,7 +355,10 @@ const Sidebar = ({
                  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">
+                        <label
+                          className="text-sm font-medium text-green-600 break-all"
+                          htmlFor={`${configKey}-input`}
+                        >
                          {configItem.label}
                        </label>
                        <Tooltip>
@@ -341,6 +372,7 @@ const Sidebar = ({
                      </div>
                      {typeof configItem.value === "number" ? (
                        <Input
+                          id={`${configKey}-input`}
                          type="number"
                          data-testid={`${configKey}-input`}
                          value={configItem.value}
@@ -367,7 +399,7 @@ const Sidebar = ({
                            setConfig(newConfig);
                          }}
                        >
-                          <SelectTrigger>
+                          <SelectTrigger id={`${configKey}-input`}>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
@@ -377,6 +409,7 @@ const Sidebar = ({
                        </Select>
                      ) : (
                        <Input
+                          id={`${configKey}-input`}
                          data-testid={`${configKey}-input`}
                          value={configItem.value}
                          onChange={(e) => {
@@ -400,7 +433,13 @@ const Sidebar = ({
          <div className="space-y-2">
            {connectionStatus === "connected" && (
              <div className="grid grid-cols-2 gap-4">
-                <Button data-testid="connect-button" onClick={onConnect}>
+                <Button
+                  data-testid="connect-button"
+                  onClick={() => {
+                    onDisconnect();
+                    onConnect();
+                  }}
+                >
                  <RotateCcw className="w-4 h-4 mr-2" />
                  {transportType === "stdio" ? "Restart" : "Reconnect"}
                </Button>
@@ -450,14 +489,19 @@ const Sidebar = ({

            {loggingSupported && connectionStatus === "connected" && (
              <div className="space-y-2">
-                <label className="text-sm font-medium">Logging Level</label>
+                <label
+                  className="text-sm font-medium"
+                  htmlFor="logging-level-select"
+                >
+                  Logging Level
+                </label>
                <Select
                  value={logLevel}
                  onValueChange={(value: LoggingLevel) =>
                    sendLogLevelRequest(value)
                  }
                >
-                  <SelectTrigger>
+                  <SelectTrigger id="logging-level-select">
                    <SelectValue placeholder="Select logging level" />
                  </SelectTrigger>
                  <SelectContent>
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -5,7 +5,8 @@ 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, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
+import DynamicJsonForm from "./DynamicJsonForm";
+import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import {
  CallToolResultSchema,
@@ -68,11 +69,18 @@ const ToolsTab = ({
      return (
        <>
          <h4 className="font-semibold mb-2">
-            Tool Result: {isError ? "Error" : "Success"}
+            Tool Result:{" "}
+            {isError ? (
+              <span className="text-red-600 font-semibold">Error</span>
+            ) : (
+              <span className="text-green-600 font-semibold">Success</span>
+            )}
          </h4>
          {structuredResult.content.map((item, index) => (
            <div key={index} className="mb-2">
-              {item.type === "text" && <JsonView data={item.text} />}
+              {item.type === "text" && (
+                <JsonView data={item.text} isError={isError} />
+              )}
              {item.type === "image" && (
                <img
                  src={`data:${item.mimeType};base64,${item.data}`}
@@ -132,7 +140,7 @@ const ToolsTab = ({
        />

        <div className="bg-card rounded-lg shadow">
-          <div className="p-4 border-b border-gray-200">
+          <div className="p-4 border-b border-gray-200 dark:border-gray-800">
            <h3 className="font-semibold">
              {selectedTool ? selectedTool.name : "Select a tool"}
            </h3>
--- a/client/src/components/tests/DynamicJsonForm.test.tsx
+++ b/client/src/components/tests/DynamicJsonForm.test.tsx
@@ -1,7 +1,7 @@
 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";
+import type { JsonSchemaType } from "@/utils/jsonUtils";

 describe("DynamicJsonForm String Fields", () => {
  const renderForm = (props = {}) => {
--- 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, buttonVariants };
+export { Button };
--- a/client/src/components/ui/input.tsx
+++ b/client/src/components/ui/input.tsx
@@ -2,8 +2,7 @@ import * as React from "react";

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

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

 const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -2,8 +2,7 @@ import * as React from "react";

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

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

 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
--- a/client/src/hooks/use-toast.ts
+++ b/client/src/hooks/use-toast.ts
@@ -15,13 +15,6 @@ type ToasterToast = ToastProps & {
  action?: ToastActionElement;
 };

-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
 let count = 0;

 function genId() {
@@ -29,23 +22,28 @@ function genId() {
  return count.toString();
 }

-type ActionType = typeof actionTypes;
+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"];
+      type: ActionType.ADD_TOAST;
      toast: ToasterToast;
    }
  | {
-      type: ActionType["UPDATE_TOAST"];
+      type: ActionType.UPDATE_TOAST;
      toast: Partial<ToasterToast>;
    }
  | {
-      type: ActionType["DISMISS_TOAST"];
+      type: ActionType.DISMISS_TOAST;
      toastId?: ToasterToast["id"];
    }
  | {
-      type: ActionType["REMOVE_TOAST"];
+      type: ActionType.REMOVE_TOAST;
      toastId?: ToasterToast["id"];
    };

@@ -63,7 +61,7 @@ const addToRemoveQueue = (toastId: string) => {
  const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId);
    dispatch({
-      type: "REMOVE_TOAST",
+      type: ActionType.REMOVE_TOAST,
      toastId: toastId,
    });
  }, TOAST_REMOVE_DELAY);
@@ -73,13 +71,13 @@ const addToRemoveQueue = (toastId: string) => {

 export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
-    case "ADD_TOAST":
+    case ActionType.ADD_TOAST:
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      };

-    case "UPDATE_TOAST":
+    case ActionType.UPDATE_TOAST:
      return {
        ...state,
        toasts: state.toasts.map((t) =>
@@ -87,7 +85,7 @@ export const reducer = (state: State, action: Action): State => {
        ),
      };

-    case "DISMISS_TOAST": {
+    case ActionType.DISMISS_TOAST: {
      const { toastId } = action;

      // ! Side effects ! - This could be extracted into a dismissToast() action,
@@ -112,7 +110,7 @@ export const reducer = (state: State, action: Action): State => {
        ),
      };
    }
-    case "REMOVE_TOAST":
+    case ActionType.REMOVE_TOAST:
      if (action.toastId === undefined) {
        return {
          ...state,
@@ -144,13 +142,14 @@ function toast({ ...props }: Toast) {

  const update = (props: ToasterToast) =>
    dispatch({
-      type: "UPDATE_TOAST",
+      type: ActionType.UPDATE_TOAST,
      toast: { ...props, id },
    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  const dismiss = () =>
+    dispatch({ type: ActionType.DISMISS_TOAST, toastId: id });

  dispatch({
-    type: "ADD_TOAST",
+    type: ActionType.ADD_TOAST,
    toast: {
      ...props,
      id,
@@ -184,7 +183,8 @@ function useToast() {
  return {
    ...state,
    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+    dismiss: (toastId?: string) =>
+      dispatch({ type: ActionType.DISMISS_TOAST, toastId }),
  };
 }

--- a/client/src/lib/hooks/useCompletionState.ts
+++ b/client/src/lib/hooks/useCompletionState.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import {
  ResourceReference,
  PromptReference,
@@ -15,9 +15,11 @@ function debounce<T extends (...args: any[]) => PromiseLike<void>>(
  wait: number,
 ): (...args: Parameters<T>) => void {
  let timeout: ReturnType<typeof setTimeout>;
-  return function (...args: Parameters<T>) {
+  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), wait);
+    timeout = setTimeout(() => {
+      void func(...args);
+    }, wait);
  };
 }

@@ -58,8 +60,8 @@ export function useCompletionState(
    });
  }, [cleanup]);

-  const requestCompletions = useCallback(
-    debounce(
+  const requestCompletions = useMemo(() => {
+    return debounce(
      async (
        ref: ResourceReference | PromptReference,
        argName: string,
@@ -94,7 +96,7 @@ export function useCompletionState(
              loading: { ...prev.loading, [argName]: false },
            }));
          }
-        } catch (err) {
+        } catch {
          if (!abortController.signal.aborted) {
            setState((prev) => ({
              ...prev,
@@ -108,9 +110,8 @@ export function useCompletionState(
        }
      },
      debounceMs,
-    ),
-    [handleCompletion, completionsSupported, cleanup, debounceMs],
    );
+  }, [handleCompletion, completionsSupported, cleanup, debounceMs]);

  // Clear completions when support status changes
  useEffect(() => {
--- a/client/src/lib/useTheme.ts
+++ b/client/src/lib/useTheme.ts
@@ -43,7 +43,10 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
      document.documentElement.classList.toggle("dark", newTheme === "dark");
    }
  }, []);
-  return useMemo(() => [theme, setThemeWithSideEffect], [theme]);
+  return useMemo(
+    () => [theme, setThemeWithSideEffect],
+    [theme, setThemeWithSideEffect],
+  );
 };

 export default useTheme;
--- a/client/src/utils/tests/jsonPathUtils.test.ts
+++ b/client/src/utils/tests/jsonPathUtils.test.ts
@@ -1,5 +1,146 @@
-import { updateValueAtPath, getValueAtPath } from "../jsonPathUtils";
-import { JsonValue } from "../../components/DynamicJsonForm";
+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
@@ -8,17 +149,17 @@ describe("updateValueAtPath", () => {
  });

  test("initializes an empty object when input is null/undefined and path starts with a string", () => {
-    expect(updateValueAtPath(null as any, ["foo"], "bar")).toEqual({
+    expect(updateValueAtPath(null, ["foo"], "bar")).toEqual({
      foo: "bar",
    });
-    expect(updateValueAtPath(undefined as any, ["foo"], "bar")).toEqual({
+    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 as any, ["0"], "bar")).toEqual(["bar"]);
-    expect(updateValueAtPath(undefined as any, ["0"], "bar")).toEqual(["bar"]);
+    expect(updateValueAtPath(null, ["0"], "bar")).toEqual(["bar"]);
+    expect(updateValueAtPath(undefined, ["0"], "bar")).toEqual(["bar"]);
  });

  // Object update tests
@@ -152,10 +293,8 @@ describe("getValueAtPath", () => {
  });

  test("returns default value when input is null/undefined", () => {
-    expect(getValueAtPath(null as any, ["foo"], "default")).toBe("default");
-    expect(getValueAtPath(undefined as any, ["foo"], "default")).toBe(
-      "default",
-    );
+    expect(getValueAtPath(null, ["foo"], "default")).toBe("default");
+    expect(getValueAtPath(undefined, ["foo"], "default")).toBe("default");
  });

  test("handles array indices correctly", () => {
--- a/client/src/utils/tests/schemaUtils.test.ts
+++ b/client/src/utils/tests/schemaUtils.test.ts
@@ -1,5 +1,5 @@
 import { generateDefaultValue, formatFieldLabel } from "../schemaUtils";
-import { JsonSchemaType } from "../../components/DynamicJsonForm";
+import type { JsonSchemaType } from "../jsonUtils";

 describe("generateDefaultValue", () => {
  test("generates default string", () => {
--- a/client/src/utils/jsonPathUtils.ts
+++ b/client/src/utils/jsonPathUtils.ts
@@ -1,7 +1,66 @@
-import { JsonValue } from "../components/DynamicJsonForm";
+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
--- a/client/src/utils/schemaUtils.ts
+++ b/client/src/utils/schemaUtils.ts
@@ -1,5 +1,4 @@
-import { JsonValue, JsonSchemaType } from "../components/DynamicJsonForm";
-import { JsonObject } from "./jsonPathUtils";
+import type { JsonValue, JsonSchemaType, JsonObject } from "./jsonUtils";

 /**
 * Generates a default value based on a JSON schema type
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,20 +1,20 @@
 {
  "name": "@modelcontextprotocol/inspector",
-  "version": "0.8.2",
+  "version": "0.9.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@modelcontextprotocol/inspector",
-      "version": "0.8.2",
+      "version": "0.9.0",
      "license": "MIT",
      "workspaces": [
        "client",
        "server"
      ],
      "dependencies": {
-        "@modelcontextprotocol/inspector-client": "^0.8.2",
-        "@modelcontextprotocol/inspector-server": "^0.8.2",
+        "@modelcontextprotocol/inspector-client": "^0.9.0",
+        "@modelcontextprotocol/inspector-server": "^0.9.0",
        "concurrently": "^9.0.1",
        "shell-quote": "^1.8.2",
        "spawn-rx": "^5.1.2",
@@ -32,7 +32,7 @@
    },
    "client": {
      "name": "@modelcontextprotocol/inspector-client",
-      "version": "0.8.2",
+      "version": "0.9.0",
      "license": "MIT",
      "dependencies": {
        "@modelcontextprotocol/sdk": "^1.9.0",
@@ -9500,7 +9500,7 @@
    },
    "server": {
      "name": "@modelcontextprotocol/inspector-server",
-      "version": "0.8.2",
+      "version": "0.9.0",
      "license": "MIT",
      "dependencies": {
        "@modelcontextprotocol/sdk": "^1.9.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector",
-  "version": "0.8.2",
+  "version": "0.9.0",
  "description": "Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",
@@ -36,8 +36,8 @@
    "publish-all": "npm publish --workspaces --access public && npm publish --access public"
  },
  "dependencies": {
-    "@modelcontextprotocol/inspector-client": "^0.8.2",
-    "@modelcontextprotocol/inspector-server": "^0.8.2",
+    "@modelcontextprotocol/inspector-client": "^0.9.0",
+    "@modelcontextprotocol/inspector-server": "^0.9.0",
    "concurrently": "^9.0.1",
    "shell-quote": "^1.8.2",
    "spawn-rx": "^5.1.2",
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@modelcontextprotocol/inspector-server",
-  "version": "0.8.2",
+  "version": "0.9.0",
  "description": "Server-side application for the Model Context Protocol inspector",
  "license": "MIT",
  "author": "Anthropic, PBC (https://anthropic.com)",