Resolve merge conflicts in DynamicJsonForm.tsx and ToolsTab.tsx

- Merged JSON validation functionality from PR branch with enhanced form features from main
- Preserved validateJson method and DynamicJsonFormRef interface for tool validation
- Added support for oneOf schemas, enum dropdowns, and enhanced string field types
- Integrated meta display functionality and resource content props
- Maintained JSON validation before tool execution to prevent invalid data submission

client/src/components/ToolsTab.tsx

@@ -25,6 +25,10 @@ import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
 
+// Type guard to safely detect the optional _meta field without using `any`
+const hasMeta = (tool: Tool): tool is Tool & { _meta: unknown } =>
+  typeof (tool as { _meta?: unknown })._meta !== "undefined";
+
 const ToolsTab = ({
   tools,
   listTools,
@@ -35,6 +39,8 @@ const ToolsTab = ({
   toolResult,
   nextCursor,
   error,
+  resourceContent,
+  onReadResource,
 }: {
   tools: Tool[];
   listTools: () => void;
@@ -45,10 +51,13 @@ const ToolsTab = ({
   toolResult: CompatibilityCallToolResult | null;
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
+  resourceContent: Record<string, string>;
+  onReadResource?: (uri: string) => void;
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
+  const [isMetaExpanded, setIsMetaExpanded] = useState(false);
   const formRefs = useRef<Record<string, DynamicJsonFormRef | null>>({});
 
   useEffect(() => {
@@ -257,6 +266,40 @@ const ToolsTab = ({
                     </div>
                   </div>
                 )}
+                {selectedTool &&
+                  hasMeta(selectedTool) &&
+                  selectedTool._meta && (
+                    <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <h4 className="text-sm font-semibold">Meta:</h4>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => setIsMetaExpanded(!isMetaExpanded)}
+                          className="h-6 px-2"
+                        >
+                          {isMetaExpanded ? (
+                            <>
+                              <ChevronUp className="h-3 w-3 mr-1" />
+                              Collapse
+                            </>
+                          ) : (
+                            <>
+                              <ChevronDown className="h-3 w-3 mr-1" />
+                              Expand
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                      <div
+                        className={`transition-all ${
+                          isMetaExpanded ? "" : "max-h-[8rem] overflow-y-auto"
+                        }`}
+                      >
+                        <JsonView data={selectedTool._meta} />
+                      </div>
+                    </div>
+                  )}
                 <Button
                   onClick={async () => {
                     // Validate JSON inputs before calling tool
@@ -289,6 +332,8 @@ const ToolsTab = ({
                 <ToolResults
                   toolResult={toolResult}
                   selectedTool={selectedTool}
+                  resourceContent={resourceContent}
+                  onReadResource={onReadResource}
                 />
               </div>
             ) : (