feat: json view component

client/src/components/ResourcesTab.tsx

@@ -15,6 +15,7 @@ import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
 import { useEffect, useState } from "react";
 import { useCompletionState } from "@/lib/hooks/useCompletionState";
+import JsonView from "./JsonView";
 
 const ResourcesTab = ({
   resources,
@@ -215,7 +216,7 @@ const ResourcesTab = ({
             </Alert>
           ) : selectedResource ? (
             <pre className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 whitespace-pre-wrap break-words text-gray-900 dark:text-gray-100">
-              {resourceContent}
+              <JsonView data={resourceContent} />
             </pre>
           ) : selectedTemplate ? (
             <div className="space-y-4">