Merge pull request #211 from cgoinglove/feat/json-view-component

feat: Add JSON View Component
2025-03-28 17:45:22 -04:00
parent e47b1d8f4d 240c67037c
commit 38fb710f2f
8 changed files with 293 additions and 73 deletions
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -108,6 +108,21 @@ const DynamicJsonForm = ({
    }
  };

+  const formatJson = () => {
+    try {
+      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");
+    }
+  };
+
  const renderFormFields = (
    propSchema: JsonSchemaType,
    currentValue: JsonValue,
@@ -353,7 +368,12 @@ const DynamicJsonForm = ({

  return (
    <div className="space-y-4">
-      <div className="flex justify-end">
+      <div className="flex justify-end space-x-2">
+        {isJsonMode && (
+          <Button variant="outline" size="sm" onClick={formatJson}>
+            Format JSON
+          </Button>
+        )}
        <Button variant="outline" size="sm" onClick={handleSwitchToFormMode}>
          {isJsonMode ? "Switch to Form" : "Switch to JSON"}
        </Button>
--- a/client/src/components/History.tsx
+++ b/client/src/components/History.tsx
@@ -1,6 +1,7 @@
 import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
 import { Copy } from "lucide-react";
 import { useState } from "react";
+import JsonView from "./JsonView";

 const HistoryAndNotifications = ({
  requestHistory,
@@ -74,9 +75,9 @@ const HistoryAndNotifications = ({
                            <Copy size={16} />
                          </button>
                        </div>
-                        <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
-                          {JSON.stringify(JSON.parse(request.request), null, 2)}
-                        </pre>
+                        <div className="bg-background p-2 rounded">
+                          <JsonView data={request.request} />
+                        </div>
                      </div>
                      {request.response && (
                        <div className="mt-2">
@@ -91,13 +92,9 @@ const HistoryAndNotifications = ({
                              <Copy size={16} />
                            </button>
                          </div>
-                          <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
-                            {JSON.stringify(
-                              JSON.parse(request.response),
-                              null,
-                              2,
-                            )}
-                          </pre>
+                          <div className="bg-background p-2 rounded">
+                            <JsonView data={request.response} />
+                          </div>
                        </div>
                      )}
                    </>
@@ -146,9 +143,11 @@ const HistoryAndNotifications = ({
                          <Copy size={16} />
                        </button>
                      </div>
-                      <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
-                        {JSON.stringify(notification, null, 2)}
-                      </pre>
+                      <div className="bg-background p-2 rounded">
+                        <JsonView
+                          data={JSON.stringify(notification, null, 2)}
+                        />
+                      </div>
                    </div>
                  )}
                </li>
--- a/client/src/components/JsonEditor.tsx
+++ b/client/src/components/JsonEditor.tsx
@@ -3,7 +3,6 @@ import Editor from "react-simple-code-editor";
 import Prism from "prismjs";
 import "prismjs/components/prism-json";
 import "prismjs/themes/prism.css";
-import { Button } from "@/components/ui/button";

 interface JsonEditorProps {
  value: string;
@@ -16,49 +15,25 @@ const JsonEditor = ({
  onChange,
  error: externalError,
 }: JsonEditorProps) => {
-  const [editorContent, setEditorContent] = useState(value);
+  const [editorContent, setEditorContent] = useState(value || "");
  const [internalError, setInternalError] = useState<string | undefined>(
    undefined,
  );

  useEffect(() => {
-    setEditorContent(value);
+    setEditorContent(value || "");
  }, [value]);

-  const formatJson = (json: string): string => {
-    try {
-      return JSON.stringify(JSON.parse(json), null, 2);
-    } catch {
-      return json;
-    }
-  };
-
  const handleEditorChange = (newContent: string) => {
    setEditorContent(newContent);
    setInternalError(undefined);
    onChange(newContent);
  };

-  const handleFormatJson = () => {
-    try {
-      const formatted = formatJson(editorContent);
-      setEditorContent(formatted);
-      onChange(formatted);
-      setInternalError(undefined);
-    } catch (err) {
-      setInternalError(err instanceof Error ? err.message : "Invalid JSON");
-    }
-  };
-
  const displayError = internalError || externalError;

  return (
-    <div className="relative space-y-2">
-      <div className="flex justify-end">
-        <Button variant="outline" size="sm" onClick={handleFormatJson}>
-          Format JSON
-        </Button>
-      </div>
+    <div className="relative">
      <div
        className={`border rounded-md ${
          displayError
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -0,0 +1,228 @@
+import { useState, memo } from "react";
+import { JsonValue } from "./DynamicJsonForm";
+import clsx from "clsx";
+
+interface JsonViewProps {
+  data: unknown;
+  name?: string;
+  initialExpandDepth?: number;
+}
+
+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 };
+  }
+}
+
+const JsonView = memo(
+  ({ data, name, initialExpandDepth = 3 }: JsonViewProps) => {
+    const normalizedData =
+      typeof data === "string"
+        ? tryParseJson(data).success
+          ? tryParseJson(data).data
+          : data
+        : data;
+
+    return (
+      <div className="font-mono text-sm transition-all duration-300 ">
+        <JsonNode
+          data={normalizedData as JsonValue}
+          name={name}
+          depth={0}
+          initialExpandDepth={initialExpandDepth}
+        />
+      </div>
+    );
+  },
+);
+
+JsonView.displayName = "JsonView";
+
+interface JsonNodeProps {
+  data: JsonValue;
+  name?: string;
+  depth: number;
+  initialExpandDepth: number;
+}
+
+const JsonNode = memo(
+  ({ data, name, depth = 0, initialExpandDepth }: 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> = {
+      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",
+      default: "text-gray-700",
+    };
+
+    const renderCollapsible = (isArray: boolean) => {
+      const items = isArray
+        ? (data as JsonValue[])
+        : Object.entries(data as Record<string, JsonValue>);
+      const itemCount = items.length;
+      const isEmpty = itemCount === 0;
+
+      const symbolMap = {
+        open: isArray ? "[" : "{",
+        close: isArray ? "]" : "}",
+        collapsed: isArray ? "[ ... ]" : "{ ... }",
+        empty: isArray ? "[]" : "{}",
+      };
+
+      if (isEmpty) {
+        return (
+          <div className="flex items-center">
+            {name && (
+              <span className="mr-1 text-gray-600 dark:text-gray-400">
+                {name}:
+              </span>
+            )}
+            <span className="text-gray-500">{symbolMap.empty}</span>
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex flex-col">
+          <div
+            className="flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/10 dark:hover:bg-gray-800/20"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {name && (
+              <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
+                {name}:
+              </span>
+            )}
+            {isExpanded ? (
+              <span className="text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
+                {symbolMap.open}
+              </span>
+            ) : (
+              <>
+                <span className="text-gray-600 dark:group-hover:text-gray-100 group-hover:text-gray-400">
+                  {symbolMap.collapsed}
+                </span>
+                <span className="ml-1 text-gray-700 dark:group-hover:text-gray-100 group-hover:text-gray-400">
+                  {itemCount} {itemCount === 1 ? "item" : "items"}
+                </span>
+              </>
+            )}
+          </div>
+          {isExpanded && (
+            <>
+              <div className="pl-2 ml-4 border-l border-gray-200 dark:border-gray-800">
+                {isArray
+                  ? (items as JsonValue[]).map((item, index) => (
+                      <div key={index} className="my-1">
+                        <JsonNode
+                          data={item}
+                          name={`${index}`}
+                          depth={depth + 1}
+                          initialExpandDepth={initialExpandDepth}
+                        />
+                      </div>
+                    ))
+                  : (items as [string, JsonValue][]).map(([key, value]) => (
+                      <div key={key} className="my-1">
+                        <JsonNode
+                          data={value}
+                          name={key}
+                          depth={depth + 1}
+                          initialExpandDepth={initialExpandDepth}
+                        />
+                      </div>
+                    ))}
+              </div>
+              <div className="text-gray-600 dark:text-gray-400">
+                {symbolMap.close}
+              </div>
+            </>
+          )}
+        </div>
+      );
+    };
+
+    const renderString = (value: string) => {
+      const maxLength = 100;
+      const isTooLong = value.length > maxLength;
+
+      if (!isTooLong) {
+        return (
+          <div className="flex mr-1 rounded hover:bg-gray-800/20">
+            {name && (
+              <span className="mr-1 text-gray-600 dark:text-gray-400">
+                {name}:
+              </span>
+            )}
+            <pre className={typeStyleMap.string}>"{value}"</pre>
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex mr-1 rounded group hover:bg-gray-800/20">
+          {name && (
+            <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
+              {name}:
+            </span>
+          )}
+          <pre
+            className={clsx(
+              typeStyleMap.string,
+              "cursor-pointer group-hover:text-green-500",
+            )}
+            onClick={() => setIsExpanded(!isExpanded)}
+            title={isExpanded ? "Click to collapse" : "Click to expand"}
+          >
+            {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
+          </pre>
+        </div>
+      );
+    };
+
+    switch (dataType) {
+      case "object":
+      case "array":
+        return renderCollapsible(dataType === "array");
+      case "string":
+        return renderString(data as string);
+      default:
+        return (
+          <div className="flex items-center mr-1 rounded hover:bg-gray-800/20">
+            {name && (
+              <span className="mr-1 text-gray-600 dark:text-gray-400">
+                {name}:
+              </span>
+            )}
+            <span className={typeStyleMap[dataType] || typeStyleMap.default}>
+              {data === null ? "null" : String(data)}
+            </span>
+          </div>
+        );
+    }
+  },
+);
+
+JsonNode.displayName = "JsonNode";
+
+export default JsonView;
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Combobox } from "@/components/ui/combobox";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
+
 import {
  ListPromptsResult,
  PromptReference,
@@ -13,6 +13,7 @@ import { AlertCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import { useCompletionState } from "@/lib/hooks/useCompletionState";
+import JsonView from "./JsonView";

 export type Prompt = {
  name: string;
@@ -151,11 +152,9 @@ const PromptsTab = ({
                Get Prompt
              </Button>
              {promptContent && (
-                <Textarea
-                  value={promptContent}
-                  readOnly
-                  className="h-64 font-mono"
-                />
+                <div className="p-4 border rounded">
+                  <JsonView data={promptContent} />
+                </div>
              )}
            </div>
          ) : (
--- a/client/src/components/ResourcesTab.tsx
+++ b/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,
@@ -214,9 +215,9 @@ const ResourcesTab = ({
              <AlertDescription>{error}</AlertDescription>
            </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}
-            </pre>
+            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100">
+              <JsonView data={resourceContent} />
+            </div>
          ) : selectedTemplate ? (
            <div className="space-y-4">
              <p className="text-sm text-gray-600">
--- a/client/src/components/SamplingTab.tsx
+++ b/client/src/components/SamplingTab.tsx
@@ -5,6 +5,7 @@ import {
  CreateMessageRequest,
  CreateMessageResult,
 } from "@modelcontextprotocol/sdk/types.js";
+import JsonView from "./JsonView";

 export type PendingRequest = {
  id: number;
@@ -43,9 +44,9 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
        <h3 className="text-lg font-semibold">Recent Requests</h3>
        {pendingRequests.map((request) => (
          <div key={request.id} className="p-4 border rounded-lg space-y-4">
-            <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded">
-              {JSON.stringify(request.request, null, 2)}
-            </pre>
+            <div className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded">
+              <JsonView data={JSON.stringify(request.request)} />
+            </div>
            <div className="flex space-x-2">
              <Button onClick={() => handleApprove(request.id)}>Approve</Button>
              <Button variant="outline" onClick={() => onReject(request.id)}>
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -16,7 +16,7 @@ import {
 import { AlertCircle, Send } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
-import { escapeUnicode } from "@/utils/escapeUnicode";
+import JsonView from "./JsonView";

 const ToolsTab = ({
  tools,
@@ -53,17 +53,14 @@ const ToolsTab = ({
        return (
          <>
            <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">
-              {escapeUnicode(toolResult)}
-            </pre>
+            <div className="p-4 border rounded">
+              <JsonView data={toolResult} />
+            </div>
            <h4 className="font-semibold mb-2">Errors:</h4>
            {parsedResult.error.errors.map((error, idx) => (
-              <pre
-                key={idx}
-                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64"
-              >
-                {escapeUnicode(error)}
-              </pre>
+              <div key={idx} className="p-4 border rounded">
+                <JsonView data={error} />
+              </div>
            ))}
          </>
        );
@@ -79,9 +76,9 @@ const ToolsTab = ({
          {structuredResult.content.map((item, index) => (
            <div key={index} className="mb-2">
              {item.type === "text" && (
-                <pre className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-4 rounded text-sm overflow-auto max-h-64">
-                  {item.text}
-                </pre>
+                <div className="p-4 border rounded">
+                  <JsonView data={item.text} />
+                </div>
              )}
              {item.type === "image" && (
                <img
@@ -100,9 +97,9 @@ const ToolsTab = ({
                    <p>Your browser does not support audio playback</p>
                  </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">
-                    {escapeUnicode(item.resource)}
-                  </pre>
+                  <div className="p-4 border rounded">
+                    <JsonView data={item.resource} />
+                  </div>
                ))}
            </div>
          ))}
@@ -112,9 +109,9 @@ const ToolsTab = ({
      return (
        <>
          <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">
-            {escapeUnicode(toolResult.toolResult)}
-          </pre>
+          <div className="p-4 border rounded">
+            <JsonView data={toolResult.toolResult} />
+          </div>
        </>
      );
    }