From d65ed01922b64afff5790460046d2ef09c238563 Mon Sep 17 00:00:00 2001
From: Nandha Reddy <nandhu4work@gmail.com>
Date: Thu, 19 Jun 2025 02:32:40 +1000
Subject: [PATCH 1/3] Add JSON validation to tool execution

Prevents execution of tools with invalid JSON parameters by validating JSON
syntax before tool execution and showing error UI for invalid input.

- Add validateJson method to DynamicJsonForm via forwardRef
- Add validation check in ToolsTab before tool execution
- Reuse existing JsonEditor error display for consistent UX
---
 client/src/components/DynamicJsonForm.tsx | 31 ++++++++++++++++++++---
 client/src/components/ToolsTab.tsx        | 26 +++++++++++++++----
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 6a5993c3..fe2cfd2d 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, forwardRef, useImperativeHandle } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import JsonEditor from "./JsonEditor";
@@ -13,6 +13,10 @@ interface DynamicJsonFormProps {
   maxDepth?: number;
 }
 
+export interface DynamicJsonFormRef {
+  validateJson: () => { isValid: boolean; error: string | null };
+}
+
 const isSimpleObject = (schema: JsonSchemaType): boolean => {
   const supportedTypes = ["string", "number", "integer", "boolean", "null"];
   if (supportedTypes.includes(schema.type)) return true;
@@ -22,12 +26,12 @@ const isSimpleObject = (schema: JsonSchemaType): boolean => {
   );
 };
 
-const DynamicJsonForm = ({
+const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(({
   schema,
   value,
   onChange,
   maxDepth = 3,
-}: DynamicJsonFormProps) => {
+}, ref) => {
   const isOnlyJSON = !isSimpleObject(schema);
   const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
   const [jsonError, setJsonError] = useState<string>();
@@ -108,6 +112,25 @@ const DynamicJsonForm = ({
     }
   };
 
+  const validateJson = () => {
+    if (!isJsonMode) return { isValid: true, error: null };
+    try {
+      const jsonStr = rawJsonValue.trim();
+      if (!jsonStr) return { isValid: true, error: null };
+      JSON.parse(jsonStr);
+      setJsonError(undefined);
+      return { isValid: true, error: null };
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Invalid JSON";
+      setJsonError(errorMessage);
+      return { isValid: false, error: errorMessage };
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    validateJson,
+  }));
+
   const renderFormFields = (
     propSchema: JsonSchemaType,
     currentValue: JsonValue,
@@ -303,6 +326,6 @@ const DynamicJsonForm = ({
       )}
     </div>
   );
-};
+});
 
 export default DynamicJsonForm;
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 8a7f6578..1ce034fb 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -1,11 +1,11 @@
-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 DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import {
@@ -13,8 +13,8 @@ import {
   ListToolsResult,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { Loader2, Send, ChevronDown, ChevronUp } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Loader2, Send, ChevronDown, ChevronUp, AlertCircle } from "lucide-react";
+import { useEffect, useState, useRef } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
@@ -28,6 +28,7 @@ const ToolsTab = ({
   setSelectedTool,
   toolResult,
   nextCursor,
+  error,
 }: {
   tools: Tool[];
   listTools: () => void;
@@ -42,6 +43,7 @@ const ToolsTab = ({
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
+  const formRefs = useRef<Record<string, DynamicJsonFormRef | null>>({});
 
   useEffect(() => {
     const params = Object.entries(
@@ -84,7 +86,13 @@ const ToolsTab = ({
             </h3>
           </div>
           <div className="p-4">
-            {selectedTool ? (
+            {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 dark:text-gray-400">
                   {selectedTool.description}
@@ -137,6 +145,7 @@ const ToolsTab = ({
                         ) : prop.type === "object" || prop.type === "array" ? (
                           <div className="mt-1">
                             <DynamicJsonForm
+                              ref={(ref) => (formRefs.current[key] = ref)}
                               schema={{
                                 type: prop.type,
                                 properties: prop.properties,
@@ -174,6 +183,7 @@ const ToolsTab = ({
                         ) : (
                           <div className="mt-1">
                             <DynamicJsonForm
+                              ref={(ref) => (formRefs.current[key] = ref)}
                               schema={{
                                 type: prop.type,
                                 properties: prop.properties,
@@ -232,6 +242,12 @@ const ToolsTab = ({
                 )}
                 <Button
                   onClick={async () => {
+                    // Validate JSON inputs before calling tool
+                    const hasValidationErrors = Object.values(formRefs.current).some(
+                      (ref) => ref && !ref.validateJson().isValid
+                    );
+                    if (hasValidationErrors) return;
+
                     try {
                       setIsToolRunning(true);
                       await callTool(selectedTool.name, params);

From 236dee0dca4ef0cf2d58e3faa932ef8f5d36d83e Mon Sep 17 00:00:00 2001
From: Nandha Reddy <nandhu4work@gmail.com>
Date: Mon, 7 Jul 2025 13:53:10 +1000
Subject: [PATCH 2/3] Fix code style

---
 client/src/components/DynamicJsonForm.tsx | 761 +++++++++++-----------
 client/src/components/ToolsTab.tsx        |  14 +-
 2 files changed, 396 insertions(+), 379 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index bf16cf3f..8b339980 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -1,4 +1,11 @@
-import { useState, useEffect, useCallback, useRef, forwardRef, useImperativeHandle } from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import JsonEditor from "./JsonEditor";
@@ -55,222 +62,327 @@ const getArrayItemDefault = (schema: JsonSchemaType): JsonValue => {
   }
 };
 
-const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(({
-  schema,
-  value,
-  onChange,
-  maxDepth = 3,
-}, ref) => {
-  const isOnlyJSON = !isSimpleObject(schema);
-  const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
-  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),
-  );
+const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
+  ({ schema, value, onChange, maxDepth = 3 }, ref) => {
+    const isOnlyJSON = !isSimpleObject(schema);
+    const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
+    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);
+        }
 
-  // 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>>();
+        // 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],
+    );
 
-  // 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);
+    // Update rawJsonValue when value prop changes
+    useEffect(() => {
+      if (!isJsonMode) {
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+        );
       }
+    }, [value, schema, isJsonMode]);
 
-      // Set a new timeout
-      timeoutRef.current = setTimeout(() => {
+    const handleSwitchToFormMode = () => {
+      if (isJsonMode) {
+        // When switching to Form mode, ensure we have valid JSON
         try {
-          const parsed = JSON.parse(jsonString);
+          const parsed = JSON.parse(rawJsonValue);
+          // Update the parent component's state with the parsed value
           onChange(parsed);
-          setJsonError(undefined);
-        } catch {
-          // Don't set error during normal typing
+          // Switch to form mode
+          setIsJsonMode(false);
+        } catch (err) {
+          setJsonError(err instanceof Error ? err.message : "Invalid JSON");
         }
-      }, 300);
-    },
-    [onChange, setJsonError],
-  );
-
-  // Update rawJsonValue when value prop changes
-  useEffect(() => {
-    if (!isJsonMode) {
-      setRawJsonValue(
-        JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
-      );
-    }
-  }, [value, schema, isJsonMode]);
+      } else {
+        // Update raw JSON value when switching to JSON mode
+        setRawJsonValue(
+          JSON.stringify(value ?? generateDefaultValue(schema), null, 2),
+        );
+        setIsJsonMode(true);
+      }
+    };
 
-  const handleSwitchToFormMode = () => {
-    if (isJsonMode) {
-      // When switching to Form mode, ensure we have valid JSON
+    const formatJson = () => {
       try {
-        const parsed = JSON.parse(rawJsonValue);
-        // Update the parent component's state with the parsed value
-        onChange(parsed);
-        // Switch to form mode
-        setIsJsonMode(false);
+        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");
       }
-    } 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 validateJson = () => {
+      if (!isJsonMode) return { isValid: true, error: null };
+      try {
+        const jsonStr = rawJsonValue.trim();
+        if (!jsonStr) return { isValid: true, error: null };
+        JSON.parse(jsonStr);
+        setJsonError(undefined);
+        return { isValid: true, error: null };
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Invalid JSON";
+        setJsonError(errorMessage);
+        return { isValid: false, error: errorMessage };
       }
-      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 validateJson = () => {
-    if (!isJsonMode) return { isValid: true, error: null };
-    try {
-      const jsonStr = rawJsonValue.trim();
-      if (!jsonStr) return { isValid: true, error: null };
-      JSON.parse(jsonStr);
-      setJsonError(undefined);
-      return { isValid: true, error: null };
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "Invalid JSON";
-      setJsonError(errorMessage);
-      return { isValid: false, error: errorMessage };
-    }
-  };
-
-  useImperativeHandle(ref, () => ({
-    validateJson,
-  }));
-
-  const renderFormFields = (
-    propSchema: JsonSchemaType,
-    currentValue: JsonValue,
-    path: string[] = [],
-    depth: number = 0,
-    parentSchema?: JsonSchemaType,
-    propertyName?: string,
-  ) => {
-    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, propertyName, parentSchema),
-            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}
-        />
-      );
-    }
+    };
 
-    // Check if this property is required in the parent schema
-    const isRequired =
-      parentSchema?.required?.includes(propertyName || "") ?? false;
+    useImperativeHandle(ref, () => ({
+      validateJson,
+    }));
 
-    switch (propSchema.type) {
-      case "string":
-        return (
-          <Input
-            type="text"
-            value={(currentValue as string) ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              // Always allow setting string values, including empty strings
-              handleFieldChange(path, val);
-            }}
-            placeholder={propSchema.description}
-            required={isRequired}
-          />
-        );
-      case "number":
+    const renderFormFields = (
+      propSchema: JsonSchemaType,
+      currentValue: JsonValue,
+      path: string[] = [],
+      depth: number = 0,
+      parentSchema?: JsonSchemaType,
+      propertyName?: string,
+    ) => {
+      if (
+        depth >= maxDepth &&
+        (propSchema.type === "object" || propSchema.type === "array")
+      ) {
+        // Render as JSON editor when max depth is reached
         return (
-          <Input
-            type="number"
-            value={(currentValue as number)?.toString() ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                handleFieldChange(path, undefined);
-              } else {
-                const num = Number(val);
-                if (!isNaN(num)) {
-                  handleFieldChange(path, num);
-                }
+          <JsonEditor
+            value={JSON.stringify(
+              currentValue ??
+                generateDefaultValue(propSchema, propertyName, parentSchema),
+              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",
+                );
               }
             }}
-            placeholder={propSchema.description}
-            required={isRequired}
+            error={jsonError}
           />
         );
-      case "integer":
-        return (
-          <Input
-            type="number"
-            step="1"
-            value={(currentValue as number)?.toString() ?? ""}
-            onChange={(e) => {
-              const val = e.target.value;
-              if (!val && !isRequired) {
-                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);
+      }
+
+      // Check if this property is required in the parent schema
+      const isRequired =
+        parentSchema?.required?.includes(propertyName || "") ?? false;
+
+      switch (propSchema.type) {
+        case "string":
+          return (
+            <Input
+              type="text"
+              value={(currentValue as string) ?? ""}
+              onChange={(e) => {
+                const val = e.target.value;
+                // Always allow setting string values, including empty strings
+                handleFieldChange(path, val);
+              }}
+              placeholder={propSchema.description}
+              required={isRequired}
+            />
+          );
+        case "number":
+          return (
+            <Input
+              type="number"
+              value={(currentValue as number)?.toString() ?? ""}
+              onChange={(e) => {
+                const val = e.target.value;
+                if (!val && !isRequired) {
+                  handleFieldChange(path, undefined);
+                } else {
+                  const num = Number(val);
+                  if (!isNaN(num)) {
+                    handleFieldChange(path, num);
+                  }
                 }
-              }
-            }}
-            placeholder={propSchema.description}
-            required={isRequired}
-          />
-        );
-      case "boolean":
-        return (
-          <Input
-            type="checkbox"
-            checked={(currentValue as boolean) ?? false}
-            onChange={(e) => handleFieldChange(path, e.target.checked)}
-            className="w-4 h-4"
-            required={isRequired}
-          />
-        );
-      case "object":
-        if (!propSchema.properties) {
+              }}
+              placeholder={propSchema.description}
+              required={isRequired}
+            />
+          );
+        case "integer":
+          return (
+            <Input
+              type="number"
+              step="1"
+              value={(currentValue as number)?.toString() ?? ""}
+              onChange={(e) => {
+                const val = e.target.value;
+                if (!val && !isRequired) {
+                  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={isRequired}
+            />
+          );
+        case "boolean":
+          return (
+            <Input
+              type="checkbox"
+              checked={(currentValue as boolean) ?? false}
+              onChange={(e) => handleFieldChange(path, e.target.checked)}
+              className="w-4 h-4"
+              required={isRequired}
+            />
+          );
+        case "object":
+          if (!propSchema.properties) {
+            return (
+              <JsonEditor
+                value={JSON.stringify(currentValue ?? {}, 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}
+              />
+            );
+          }
+
+          return (
+            <div className="space-y-2 border rounded p-3">
+              {Object.entries(propSchema.properties).map(([key, subSchema]) => (
+                <div key={key}>
+                  <label className="block text-sm font-medium mb-1">
+                    {key}
+                    {propSchema.required?.includes(key) && (
+                      <span className="text-red-500 ml-1">*</span>
+                    )}
+                  </label>
+                  {renderFormFields(
+                    subSchema as JsonSchemaType,
+                    (currentValue as Record<string, JsonValue>)?.[key],
+                    [...path, key],
+                    depth + 1,
+                    propSchema,
+                    key,
+                  )}
+                </div>
+              ))}
+            </div>
+          );
+        case "array": {
+          const arrayValue = Array.isArray(currentValue) ? currentValue : [];
+          if (!propSchema.items) return null;
+
+          // If the array items are simple, render as form fields, otherwise use JSON editor
+          if (isSimpleObject(propSchema.items)) {
+            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 = getArrayItemDefault(
+                        propSchema.items as JsonSchemaType,
+                      );
+                      handleFieldChange(path, [...arrayValue, defaultValue]);
+                    }}
+                    title={
+                      propSchema.items?.description
+                        ? `Add new ${propSchema.items.description}`
+                        : "Add new item"
+                    }
+                  >
+                    Add Item
+                  </Button>
+                </div>
+              </div>
+            );
+          }
+
+          // For complex arrays, fall back to JSON editor
           return (
             <JsonEditor
-              value={JSON.stringify(currentValue ?? {}, null, 2)}
+              value={JSON.stringify(currentValue ?? [], null, 2)}
               onChange={(newValue) => {
                 try {
                   const parsed = JSON.parse(newValue);
@@ -286,199 +398,98 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(({
             />
           );
         }
+        default:
+          return null;
+      }
+    };
 
-        return (
-          <div className="space-y-2 border rounded p-3">
-            {Object.entries(propSchema.properties).map(([key, subSchema]) => (
-              <div key={key}>
-                <label className="block text-sm font-medium mb-1">
-                  {key}
-                  {propSchema.required?.includes(key) && (
-                    <span className="text-red-500 ml-1">*</span>
-                  )}
-                </label>
-                {renderFormFields(
-                  subSchema as JsonSchemaType,
-                  (currentValue as Record<string, JsonValue>)?.[key],
-                  [...path, key],
-                  depth + 1,
-                  propSchema,
-                  key,
-                )}
-              </div>
-            ))}
-          </div>
-        );
-      case "array": {
-        const arrayValue = Array.isArray(currentValue) ? currentValue : [];
-        if (!propSchema.items) return null;
+    const handleFieldChange = (path: string[], fieldValue: JsonValue) => {
+      if (path.length === 0) {
+        onChange(fieldValue);
+        return;
+      }
 
-        // If the array items are simple, render as form fields, otherwise use JSON editor
-        if (isSimpleObject(propSchema.items)) {
-          return (
-            <div className="space-y-4">
-              {propSchema.description && (
-                <p className="text-sm text-gray-600">
-                  {propSchema.description}
-                </p>
-              )}
+      try {
+        const newValue = updateValueAtPath(value, path, fieldValue);
+        onChange(newValue);
+      } catch (error) {
+        console.error("Failed to update form value:", error);
+        onChange(value);
+      }
+    };
 
-              {propSchema.items?.description && (
-                <p className="text-sm text-gray-500">
-                  Items: {propSchema.items.description}
-                </p>
-              )}
+    const shouldUseJsonMode =
+      schema.type === "object" &&
+      (!schema.properties || Object.keys(schema.properties).length === 0);
 
-              <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 = getArrayItemDefault(
-                      propSchema.items as JsonSchemaType,
-                    );
-                    handleFieldChange(path, [...arrayValue, defaultValue]);
-                  }}
-                  title={
-                    propSchema.items?.description
-                      ? `Add new ${propSchema.items.description}`
-                      : "Add new item"
-                  }
-                >
-                  Add Item
-                </Button>
-              </div>
-            </div>
-          );
-        }
+    useEffect(() => {
+      if (shouldUseJsonMode && !isJsonMode) {
+        setIsJsonMode(true);
+      }
+    }, [shouldUseJsonMode, isJsonMode]);
 
-        // For complex arrays, fall back to JSON editor
-        return (
+    return (
+      <div className="space-y-4">
+        <div className="flex justify-end space-x-2">
+          {isJsonMode && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={formatJson}
+            >
+              Format JSON
+            </Button>
+          )}
+          {!isOnlyJSON && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSwitchToFormMode}
+            >
+              {isJsonMode ? "Switch to Form" : "Switch to JSON"}
+            </Button>
+          )}
+        </div>
+
+        {isJsonMode ? (
           <JsonEditor
-            value={JSON.stringify(currentValue ?? [], null, 2)}
+            value={rawJsonValue}
             onChange={(newValue) => {
-              try {
-                const parsed = JSON.parse(newValue);
-                handleFieldChange(path, parsed);
-                setJsonError(undefined);
-              } catch (err) {
-                setJsonError(
-                  err instanceof Error ? err.message : "Invalid JSON",
-                );
-              }
+              // Always update local state
+              setRawJsonValue(newValue);
+
+              // Use the debounced function to attempt parsing and updating parent
+              debouncedUpdateParent(newValue);
             }}
             error={jsonError}
           />
-        );
-      }
-      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
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={formatJson}
-          >
-            Format JSON
-          </Button>
-        )}
-        {!isOnlyJSON && (
-          <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
-            {isJsonMode ? "Switch to Form" : "Switch to JSON"}
-          </Button>
+        ) : // 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>
-
-      {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;
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 9f0d2008..7258eaa8 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -13,7 +13,13 @@ import {
   ListToolsResult,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
-import { Loader2, Send, ChevronDown, ChevronUp, AlertCircle } from "lucide-react";
+import {
+  Loader2,
+  Send,
+  ChevronDown,
+  ChevronUp,
+  AlertCircle,
+} from "lucide-react";
 import { useEffect, useState, useRef } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
@@ -254,9 +260,9 @@ const ToolsTab = ({
                 <Button
                   onClick={async () => {
                     // Validate JSON inputs before calling tool
-                    const hasValidationErrors = Object.values(formRefs.current).some(
-                      (ref) => ref && !ref.validateJson().isValid
-                    );
+                    const hasValidationErrors = Object.values(
+                      formRefs.current,
+                    ).some((ref) => ref && !ref.validateJson().isValid);
                     if (hasValidationErrors) return;
 
                     try {

From 20d9480affec5bd5d23604acf0b1e33647889185 Mon Sep 17 00:00:00 2001
From: Nandha Reddy <nandhu4work@gmail.com>
Date: Wed, 9 Jul 2025 23:38:39 +1000
Subject: [PATCH 3/3] Resolve merge conflict in DynamicJsonForm.tsx

Integrate JSON validation with copy JSON functionality:
- Maintain forwardRef structure for validation exposure
- Combine copy button with validation method
- Both features working together without conflicts
---
 client/src/components/DynamicJsonForm.tsx | 61 ++++++++++++++++++++---
 1 file changed, 53 insertions(+), 8 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 8b339980..efa4d2ad 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -12,6 +12,8 @@ import JsonEditor from "./JsonEditor";
 import { updateValueAtPath } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
+import { useToast } from "@/lib/hooks/useToast";
+import { CheckCheck, Copy } from "lucide-react";
 
 interface DynamicJsonFormProps {
   schema: JsonSchemaType;
@@ -67,6 +69,9 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
     const isOnlyJSON = !isSimpleObject(schema);
     const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
     const [jsonError, setJsonError] = useState<string>();
+    const [copiedJson, setCopiedJson] = useState<boolean>(false);
+    const { toast } = useToast();
+
     // Store the raw JSON string to allow immediate feedback during typing
     // while deferring parsing until the user stops typing
     const [rawJsonValue, setRawJsonValue] = useState<string>(
@@ -160,6 +165,31 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
       }
     };
 
+    const handleCopyJson = useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(
+          JSON.stringify(value, null, 2) ?? "[]",
+        );
+        setCopiedJson(true);
+
+        toast({
+          title: "JSON copied",
+          description:
+            "The JSON data has been successfully copied to your clipboard.",
+        });
+
+        setTimeout(() => {
+          setCopiedJson(false);
+        }, 2000);
+      } catch (error) {
+        toast({
+          title: "Error",
+          description: `Failed to copy JSON: ${error instanceof Error ? error.message : String(error)}`,
+          variant: "destructive",
+        });
+      }
+    }, [toast, value]);
+
     useImperativeHandle(ref, () => ({
       validateJson,
     }));
@@ -432,14 +462,29 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
       <div className="space-y-4">
         <div className="flex justify-end space-x-2">
           {isJsonMode && (
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={formatJson}
-            >
-              Format JSON
-            </Button>
+            <>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleCopyJson}
+              >
+                {copiedJson ? (
+                  <CheckCheck className="h-4 w-4 mr-2" />
+                ) : (
+                  <Copy className="h-4 w-4 mr-2" />
+                )}
+                Copy JSON
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={formatJson}
+              >
+                Format JSON
+              </Button>
+            </>
           )}
           {!isOnlyJSON && (
             <Button