From 3ac00598ff76a13290584aed8c78f8e5a8db41ac Mon Sep 17 00:00:00 2001
From: yusheng chen <samuel871211@gmail.com>
Date: Sun, 23 Mar 2025 21:29:46 +0800
Subject: [PATCH 01/13] perf: add `useMemo` to the return value of `useTheme`

---
 client/src/lib/useTheme.ts | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/src/lib/useTheme.ts b/client/src/lib/useTheme.ts
index c73159b..8e598e1 100644
--- a/client/src/lib/useTheme.ts
+++ b/client/src/lib/useTheme.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 type Theme = "light" | "dark" | "system";
 
@@ -35,17 +35,18 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
     };
   }, [theme]);
-
-  return [
+  
+  const setThemeWithSideEffect = useCallback((newTheme: Theme) => {
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    if (newTheme !== "system") {
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+    }
+  }, []);
+  return useMemo(() => [
     theme,
-    useCallback((newTheme: Theme) => {
-      setTheme(newTheme);
-      localStorage.setItem("theme", newTheme);
-      if (newTheme !== "system") {
-        document.documentElement.classList.toggle("dark", newTheme === "dark");
-      }
-    }, []),
-  ];
+    setThemeWithSideEffect,
+  ], [theme]);
 };
 
 export default useTheme;

From f0b28d476040f4fa14fdb7bc07cdecd8faaa2d07 Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Tue, 25 Mar 2025 01:48:29 +0900
Subject: [PATCH 02/13] feat: json view component

---
 client/src/components/History.tsx      |  13 +-
 client/src/components/JsonView.tsx     | 210 +++++++++++++++++++++++++
 client/src/components/ResourcesTab.tsx |   3 +-
 client/src/components/SamplingTab.tsx  |   3 +-
 client/src/components/ToolsTab.tsx     |  11 +-
 5 files changed, 226 insertions(+), 14 deletions(-)
 create mode 100644 client/src/components/JsonView.tsx

diff --git a/client/src/components/History.tsx b/client/src/components/History.tsx
index 532d3b1..7ce7dcf 100644
--- 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,
@@ -75,7 +76,7 @@ const HistoryAndNotifications = ({
                           </button>
                         </div>
                         <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
-                          {JSON.stringify(JSON.parse(request.request), null, 2)}
+                          <JsonView data={request.request} />
                         </pre>
                       </div>
                       {request.response && (
@@ -92,11 +93,7 @@ const HistoryAndNotifications = ({
                             </button>
                           </div>
                           <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
-                            {JSON.stringify(
-                              JSON.parse(request.response),
-                              null,
-                              2,
-                            )}
+                            <JsonView data={request.response} />
                           </pre>
                         </div>
                       )}
@@ -147,7 +144,9 @@ const HistoryAndNotifications = ({
                         </button>
                       </div>
                       <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
-                        {JSON.stringify(notification, null, 2)}
+                        <JsonView
+                          data={JSON.stringify(notification, null, 2)}
+                        />
                       </pre>
                     </div>
                   )}
diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
new file mode 100644
index 0000000..21d65d8
--- /dev/null
+++ b/client/src/components/JsonView.tsx
@@ -0,0 +1,210 @@
+import { useState, memo } from "react";
+import { JsonValue } from "./DynamicJsonForm";
+
+interface JsonViewProps {
+  data: JsonValue;
+  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 = 2 }: 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}
+          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",
+      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-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/20"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {name && (
+              <span className="mr-1 text-gray-400 group-hover:text-gray-100">
+                {name}:
+              </span>
+            )}
+            {isExpanded ? (
+              <span className="text-gray-400 group-hover:text-gray-100">
+                {symbolMap.open}
+              </span>
+            ) : (
+              <>
+                <span className="text-gray-600 group-hover:text-gray-100">
+                  {symbolMap.collapsed}
+                </span>
+                <span className="ml-1 text-gray-700 group-hover:text-gray-100">
+                  {itemCount} {itemCount === 1 ? "item" : "items"}
+                </span>
+              </>
+            )}
+          </div>
+          {isExpanded && (
+            <>
+              <div className="pl-2 ml-4 border-l 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-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-400">{name}:</span>}
+            <span className={typeStyleMap.string}>"{value}"</span>
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex mr-1 rounded group hover:bg-gray-800/20">
+          {name && (
+            <span className="mr-1 text-gray-400 group-hover:text-gray-100">
+              {name}:
+            </span>
+          )}
+          <span
+            className={`${typeStyleMap.string} cursor-pointer group-hover:text-green-500`}
+            onClick={() => setIsExpanded(!isExpanded)}
+            title={isExpanded ? "클릭하여 축소" : "클릭하여 전체 보기"}
+          >
+            {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
+          </span>
+        </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-400">{name}:</span>}
+            <span className={typeStyleMap[dataType] || typeStyleMap.default}>
+              {data === null ? "null" : String(data)}
+            </span>
+          </div>
+        );
+    }
+  },
+);
+
+JsonNode.displayName = "JsonNode";
+
+export default JsonView;
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index f000840..bc3e39a 100644
--- 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,
@@ -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">
diff --git a/client/src/components/SamplingTab.tsx b/client/src/components/SamplingTab.tsx
index 5c45400..d14d4c8 100644
--- 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;
@@ -44,7 +45,7 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
         {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)}
+              <JsonView data={JSON.stringify(request.request)} />
             </pre>
             <div className="flex space-x-2">
               <Button onClick={() => handleApprove(request.id)}>Approve</Button>
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 82ebdb0..345f7bd 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -17,6 +17,7 @@ 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,
@@ -54,7 +55,7 @@ const ToolsTab = ({
           <>
             <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)}
+              <JsonView data={escapeUnicode(toolResult)} />
             </pre>
             <h4 className="font-semibold mb-2">Errors:</h4>
             {parsedResult.error.errors.map((error, idx) => (
@@ -62,7 +63,7 @@ const ToolsTab = ({
                 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)}
+                <JsonView data={escapeUnicode(error)} />
               </pre>
             ))}
           </>
@@ -80,7 +81,7 @@ const ToolsTab = ({
             <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}
+                  <JsonView data={item.text} />
                 </pre>
               )}
               {item.type === "image" && (
@@ -101,7 +102,7 @@ const ToolsTab = ({
                   </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)}
+                    <JsonView data={escapeUnicode(item.resource)} />
                   </pre>
                 ))}
             </div>
@@ -113,7 +114,7 @@ const ToolsTab = ({
         <>
           <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)}
+            <JsonView data={escapeUnicode(toolResult.toolResult)} />
           </pre>
         </>
       );

From d204dd6e7e9b5b8a72232b14a350eccb1e8ceb2a Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Tue, 25 Mar 2025 01:56:53 +0900
Subject: [PATCH 03/13] feat: json view component - dark color

---
 client/src/components/JsonView.tsx | 36 +++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index 21d65d8..7d3c586 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -91,7 +91,11 @@ const JsonNode = memo(
       if (isEmpty) {
         return (
           <div className="flex items-center">
-            {name && <span className="mr-1 text-gray-400">{name}:</span>}
+            {name && (
+              <span className="mr-1 text-gray-600 dark:text-gray-400">
+                {name}:
+              </span>
+            )}
             <span className="text-gray-500">{symbolMap.empty}</span>
           </div>
         );
@@ -100,24 +104,24 @@ const JsonNode = memo(
       return (
         <div className="flex flex-col">
           <div
-            className="flex items-center mr-1 rounded cursor-pointer group hover:bg-gray-800/20"
+            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-400 group-hover:text-gray-100">
+              <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-400 group-hover:text-gray-100">
+              <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 group-hover:text-gray-100">
+                <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 group-hover:text-gray-100">
+                <span className="ml-1 text-gray-700 dark:group-hover:text-gray-100 group-hover:text-gray-400">
                   {itemCount} {itemCount === 1 ? "item" : "items"}
                 </span>
               </>
@@ -125,7 +129,7 @@ const JsonNode = memo(
           </div>
           {isExpanded && (
             <>
-              <div className="pl-2 ml-4 border-l border-gray-800">
+              <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">
@@ -148,7 +152,9 @@ const JsonNode = memo(
                       </div>
                     ))}
               </div>
-              <div className="text-gray-400">{symbolMap.close}</div>
+              <div className="text-gray-600 dark:text-gray-400">
+                {symbolMap.close}
+              </div>
             </>
           )}
         </div>
@@ -162,7 +168,11 @@ const JsonNode = memo(
       if (!isTooLong) {
         return (
           <div className="flex mr-1 rounded hover:bg-gray-800/20">
-            {name && <span className="mr-1 text-gray-400">{name}:</span>}
+            {name && (
+              <span className="mr-1 text-gray-600 dark:text-gray-400">
+                {name}:
+              </span>
+            )}
             <span className={typeStyleMap.string}>"{value}"</span>
           </div>
         );
@@ -171,7 +181,7 @@ const JsonNode = memo(
       return (
         <div className="flex mr-1 rounded group hover:bg-gray-800/20">
           {name && (
-            <span className="mr-1 text-gray-400 group-hover:text-gray-100">
+            <span className="mr-1 text-gray-600 dark:text-gray-400 dark:group-hover:text-gray-100 group-hover:text-gray-400">
               {name}:
             </span>
           )}
@@ -195,7 +205,11 @@ const JsonNode = memo(
       default:
         return (
           <div className="flex items-center mr-1 rounded hover:bg-gray-800/20">
-            {name && <span className="mr-1 text-gray-400">{name}:</span>}
+            {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>

From 2588f3aeb3c7518d7a3e87e2529692e4bc86841b Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Wed, 26 Mar 2025 00:02:10 +0900
Subject: [PATCH 04/13] Change tooltip title from Korean to English

---
 client/src/components/JsonView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index 7d3c586..9add405 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -188,7 +188,7 @@ const JsonNode = memo(
           <span
             className={`${typeStyleMap.string} cursor-pointer group-hover:text-green-500`}
             onClick={() => setIsExpanded(!isExpanded)}
-            title={isExpanded ? "클릭하여 축소" : "클릭하여 전체 보기"}
+            title={isExpanded ? "Click to collapse" : "Click to expand"}
           >
             {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
           </span>

From 03c1ba3092d748f60beeb1ef9b5e78be35b98c84 Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Wed, 26 Mar 2025 00:11:07 +0900
Subject: [PATCH 05/13] Change JsonView default initialExpandDepth from 2 to 3

---
 client/src/components/JsonView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index 9add405..6c348fe 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -23,7 +23,7 @@ function tryParseJson(str: string): { success: boolean; data: JsonValue } {
 }
 
 const JsonView = memo(
-  ({ data, name, initialExpandDepth = 2 }: JsonViewProps) => {
+  ({ data, name, initialExpandDepth = 3 }: JsonViewProps) => {
     const normalizedData =
       typeof data === "string"
         ? tryParseJson(data).success

From e6f5da838301d7dcc6a263aa97f586ccae56d068 Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Thu, 27 Mar 2025 10:49:37 +0900
Subject: [PATCH 06/13] Improve JsonView component styling and change to use
 JsonView in PromptsTab

---
 client/src/components/JsonView.tsx   | 10 +++++++---
 client/src/components/PromptsTab.tsx | 11 +++++------
 client/src/components/ToolsTab.tsx   | 23 ++++++++++-------------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index 6c348fe..e20dd5c 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -1,5 +1,6 @@
 import { useState, memo } from "react";
 import { JsonValue } from "./DynamicJsonForm";
+import clsx from "clsx";
 
 interface JsonViewProps {
   data: JsonValue;
@@ -70,7 +71,7 @@ const JsonNode = memo(
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
-      string: "text-green-600",
+      string: "text-green-600 break-all",
       default: "text-gray-700",
     };
 
@@ -173,7 +174,7 @@ const JsonNode = memo(
                 {name}:
               </span>
             )}
-            <span className={typeStyleMap.string}>"{value}"</span>
+            <p className={typeStyleMap.string}>"{value}"</p>
           </div>
         );
       }
@@ -186,7 +187,10 @@ const JsonNode = memo(
             </span>
           )}
           <span
-            className={`${typeStyleMap.string} cursor-pointer group-hover:text-green-500`}
+            className={clsx(
+              typeStyleMap.string,
+              "cursor-pointer group-hover:text-green-500",
+            )}
             onClick={() => setIsExpanded(!isExpanded)}
             title={isExpanded ? "Click to collapse" : "Click to expand"}
           >
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index f88b16f..b42cf77 100644
--- 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>
           ) : (
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 782fab4..51148af 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -54,17 +54,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">
+            <div className="p-4 border rounded">
               <JsonView data={escapeUnicode(toolResult)} />
-            </pre>
+            </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"
-              >
+              <div key={idx} className="p-4 border rounded">
                 <JsonView data={escapeUnicode(error)} />
-              </pre>
+              </div>
             ))}
           </>
         );
@@ -80,9 +77,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">
+                <div className="p-4 border rounded">
                   <JsonView data={item.text} />
-                </pre>
+                </div>
               )}
               {item.type === "image" && (
                 <img
@@ -101,9 +98,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">
+                  <div className="p-4 border rounded">
                     <JsonView data={escapeUnicode(item.resource)} />
-                  </pre>
+                  </div>
                 ))}
             </div>
           ))}
@@ -113,9 +110,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">
+          <div className="p-4 border rounded">
             <JsonView data={escapeUnicode(toolResult.toolResult)} />
-          </pre>
+          </div>
         </>
       );
     }

From 2d252a389cbd3460a85b2f0233a403142f33bee1 Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Thu, 27 Mar 2025 11:42:39 +0900
Subject: [PATCH 07/13] Remove escapeUnicode function from ToolsTab.tsx

---
 client/src/components/JsonView.tsx | 6 +++---
 client/src/components/ToolsTab.tsx | 9 ++++-----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index e20dd5c..bd8d315 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -3,7 +3,7 @@ import { JsonValue } from "./DynamicJsonForm";
 import clsx from "clsx";
 
 interface JsonViewProps {
-  data: JsonValue;
+  data: unknown;
   name?: string;
   initialExpandDepth?: number;
 }
@@ -33,9 +33,9 @@ const JsonView = memo(
         : data;
 
     return (
-      <div className="font-mono text-sm transition-all duration-300">
+      <div className="font-mono text-sm transition-all duration-300 ">
         <JsonNode
-          data={normalizedData}
+          data={normalizedData as JsonValue}
           name={name}
           depth={0}
           initialExpandDepth={initialExpandDepth}
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 51148af..eb91c98 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -16,7 +16,6 @@ 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 = ({
@@ -55,12 +54,12 @@ const ToolsTab = ({
           <>
             <h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
             <div className="p-4 border rounded">
-              <JsonView data={escapeUnicode(toolResult)} />
+              <JsonView data={toolResult} />
             </div>
             <h4 className="font-semibold mb-2">Errors:</h4>
             {parsedResult.error.errors.map((error, idx) => (
               <div key={idx} className="p-4 border rounded">
-                <JsonView data={escapeUnicode(error)} />
+                <JsonView data={error} />
               </div>
             ))}
           </>
@@ -99,7 +98,7 @@ const ToolsTab = ({
                   </audio>
                 ) : (
                   <div className="p-4 border rounded">
-                    <JsonView data={escapeUnicode(item.resource)} />
+                    <JsonView data={item.resource} />
                   </div>
                 ))}
             </div>
@@ -111,7 +110,7 @@ const ToolsTab = ({
         <>
           <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
           <div className="p-4 border rounded">
-            <JsonView data={escapeUnicode(toolResult.toolResult)} />
+            <JsonView data={toolResult.toolResult} />
           </div>
         </>
       );

From 18ca6e28a7e90e55908274ab04cbbcad8a6f286e Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Thu, 27 Mar 2025 12:55:36 +0900
Subject: [PATCH 08/13] Use <pre> tag inside JsonView component for consistency

---
 client/src/components/History.tsx      | 12 ++++++------
 client/src/components/JsonView.tsx     |  8 ++++----
 client/src/components/ResourcesTab.tsx |  4 ++--
 client/src/components/SamplingTab.tsx  |  4 ++--
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/components/History.tsx b/client/src/components/History.tsx
index 7ce7dcf..b03d1f4 100644
--- a/client/src/components/History.tsx
+++ b/client/src/components/History.tsx
@@ -75,9 +75,9 @@ const HistoryAndNotifications = ({
                             <Copy size={16} />
                           </button>
                         </div>
-                        <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                        <div className="bg-background p-2 rounded">
                           <JsonView data={request.request} />
-                        </pre>
+                        </div>
                       </div>
                       {request.response && (
                         <div className="mt-2">
@@ -92,9 +92,9 @@ const HistoryAndNotifications = ({
                               <Copy size={16} />
                             </button>
                           </div>
-                          <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                          <div className="bg-background p-2 rounded">
                             <JsonView data={request.response} />
-                          </pre>
+                          </div>
                         </div>
                       )}
                     </>
@@ -143,11 +143,11 @@ const HistoryAndNotifications = ({
                           <Copy size={16} />
                         </button>
                       </div>
-                      <pre className="whitespace-pre-wrap break-words bg-background p-2 rounded">
+                      <div className="bg-background p-2 rounded">
                         <JsonView
                           data={JSON.stringify(notification, null, 2)}
                         />
-                      </pre>
+                      </div>
                     </div>
                   )}
                 </li>
diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx
index bd8d315..e2922f0 100644
--- a/client/src/components/JsonView.tsx
+++ b/client/src/components/JsonView.tsx
@@ -71,7 +71,7 @@ const JsonNode = memo(
       boolean: "text-amber-600",
       null: "text-purple-600",
       undefined: "text-gray-600",
-      string: "text-green-600 break-all",
+      string: "text-green-600 break-all whitespace-pre-wrap",
       default: "text-gray-700",
     };
 
@@ -174,7 +174,7 @@ const JsonNode = memo(
                 {name}:
               </span>
             )}
-            <p className={typeStyleMap.string}>"{value}"</p>
+            <pre className={typeStyleMap.string}>"{value}"</pre>
           </div>
         );
       }
@@ -186,7 +186,7 @@ const JsonNode = memo(
               {name}:
             </span>
           )}
-          <span
+          <pre
             className={clsx(
               typeStyleMap.string,
               "cursor-pointer group-hover:text-green-500",
@@ -195,7 +195,7 @@ const JsonNode = memo(
             title={isExpanded ? "Click to collapse" : "Click to expand"}
           >
             {isExpanded ? `"${value}"` : `"${value.slice(0, maxLength)}..."`}
-          </span>
+          </pre>
         </div>
       );
     };
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index bc3e39a..443a902 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -215,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">
+            <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} />
-            </pre>
+            </div>
           ) : selectedTemplate ? (
             <div className="space-y-4">
               <p className="text-sm text-gray-600">
diff --git a/client/src/components/SamplingTab.tsx b/client/src/components/SamplingTab.tsx
index d14d4c8..21fc7dd 100644
--- a/client/src/components/SamplingTab.tsx
+++ b/client/src/components/SamplingTab.tsx
@@ -44,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">
+            <div className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded">
               <JsonView data={JSON.stringify(request.request)} />
-            </pre>
+            </div>
             <div className="flex space-x-2">
               <Button onClick={() => handleApprove(request.id)}>Approve</Button>
               <Button variant="outline" onClick={() => onReject(request.id)}>

From 0891077402e9ccae3ec179aea1d27f6cb2b5352b Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 27 Mar 2025 15:59:41 -0400
Subject: [PATCH 09/13] This fixes the linter's warning that Hooks must be run
 in order each time.

* In App.tsx
  - move the conditional that returns suspense if the path is oauth/callback to the end of the component after all hooks, rendering either suspense or the normal component.
  - move handleApproveSampling and handleRejectSampling functions down below all the hooks for clarity. There are a lot of hooks so finding the end of them is a scroll, and these function constants aren't referenced until the rendering section below anyway.
---
 client/src/App.tsx | 534 +++++++++++++++++++++++----------------------
 1 file changed, 268 insertions(+), 266 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 0b0a3e1..3d35e83 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -52,16 +52,6 @@ const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
 
 const App = () => {
   // Handle OAuth callback route
-  if (window.location.pathname === "/oauth/callback") {
-    const OAuthCallback = React.lazy(
-      () => import("./components/OAuthCallback"),
-    );
-    return (
-      <Suspense fallback={<div>Loading...</div>}>
-        <OAuthCallback />
-      </Suspense>
-    );
-  }
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -114,22 +104,6 @@ const App = () => {
   const nextRequestId = useRef(0);
   const rootsRef = useRef<Root[]>([]);
 
-  const handleApproveSampling = (id: number, result: CreateMessageResult) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r) => r.id === id);
-      request?.resolve(result);
-      return prev.filter((r) => r.id !== id);
-    });
-  };
-
-  const handleRejectSampling = (id: number) => {
-    setPendingSampleRequests((prev) => {
-      const request = prev.find((r) => r.id === id);
-      request?.reject(new Error("Sampling request rejected"));
-      return prev.filter((r) => r.id !== id);
-    });
-  };
-
   const [selectedResource, setSelectedResource] = useState<Resource | null>(
     null,
   );
@@ -224,7 +198,7 @@ const App = () => {
       // Connect to the server
       connectMcpServer();
     }
-  }, []);
+  }, [connectMcpServer]);
 
   useEffect(() => {
     fetch(`${PROXY_SERVER_URL}/config`)
@@ -253,6 +227,22 @@ const App = () => {
     }
   }, []);
 
+  const handleApproveSampling = (id: number, result: CreateMessageResult) => {
+    setPendingSampleRequests((prev) => {
+      const request = prev.find((r) => r.id === id);
+      request?.resolve(result);
+      return prev.filter((r) => r.id !== id);
+    });
+  };
+
+  const handleRejectSampling = (id: number) => {
+    setPendingSampleRequests((prev) => {
+      const request = prev.find((r) => r.id === id);
+      request?.reject(new Error("Sampling request rejected"));
+      return prev.filter((r) => r.id !== id);
+    });
+  };
+
   const clearError = (tabKey: keyof typeof errors) => {
     setErrors((prev) => ({ ...prev, [tabKey]: null }));
   };
@@ -425,251 +415,263 @@ const App = () => {
     setLogLevel(level);
   };
 
-  return (
-    <div className="flex h-screen bg-background">
-      <Sidebar
-        connectionStatus={connectionStatus}
-        transportType={transportType}
-        setTransportType={setTransportType}
-        command={command}
-        setCommand={setCommand}
-        args={args}
-        setArgs={setArgs}
-        sseUrl={sseUrl}
-        setSseUrl={setSseUrl}
-        env={env}
-        setEnv={setEnv}
-        bearerToken={bearerToken}
-        setBearerToken={setBearerToken}
-        onConnect={connectMcpServer}
-        stdErrNotifications={stdErrNotifications}
-        logLevel={logLevel}
-        sendLogLevelRequest={sendLogLevelRequest}
-        loggingSupported={!!serverCapabilities?.logging || false}
-      />
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <div className="flex-1 overflow-auto">
-          {mcpClient ? (
-            <Tabs
-              defaultValue={
-                Object.keys(serverCapabilities ?? {}).includes(
-                  window.location.hash.slice(1),
-                )
-                  ? window.location.hash.slice(1)
-                  : serverCapabilities?.resources
-                    ? "resources"
-                    : serverCapabilities?.prompts
-                      ? "prompts"
-                      : serverCapabilities?.tools
-                        ? "tools"
-                        : "ping"
-              }
-              className="w-full p-4"
-              onValueChange={(value) => (window.location.hash = value)}
-            >
-              <TabsList className="mb-4 p-0">
-                <TabsTrigger
-                  value="resources"
-                  disabled={!serverCapabilities?.resources}
-                >
-                  <Files className="w-4 h-4 mr-2" />
-                  Resources
-                </TabsTrigger>
-                <TabsTrigger
-                  value="prompts"
-                  disabled={!serverCapabilities?.prompts}
-                >
-                  <MessageSquare className="w-4 h-4 mr-2" />
-                  Prompts
-                </TabsTrigger>
-                <TabsTrigger
-                  value="tools"
-                  disabled={!serverCapabilities?.tools}
-                >
-                  <Hammer className="w-4 h-4 mr-2" />
-                  Tools
-                </TabsTrigger>
-                <TabsTrigger value="ping">
-                  <Bell className="w-4 h-4 mr-2" />
-                  Ping
-                </TabsTrigger>
-                <TabsTrigger value="sampling" className="relative">
-                  <Hash className="w-4 h-4 mr-2" />
-                  Sampling
-                  {pendingSampleRequests.length > 0 && (
-                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                      {pendingSampleRequests.length}
-                    </span>
-                  )}
-                </TabsTrigger>
-                <TabsTrigger value="roots">
-                  <FolderTree className="w-4 h-4 mr-2" />
-                  Roots
-                </TabsTrigger>
-              </TabsList>
+  if (window.location.pathname === "/oauth/callback") {
+    const OAuthCallback = React.lazy(
+      () => import("./components/OAuthCallback"),
+    );
+    return (
+      <Suspense fallback={<div>Loading...</div>}>
+        <OAuthCallback />
+      </Suspense>
+    );
+  } else {
+    return (
+      <div className="flex h-screen bg-background">
+        <Sidebar
+          connectionStatus={connectionStatus}
+          transportType={transportType}
+          setTransportType={setTransportType}
+          command={command}
+          setCommand={setCommand}
+          args={args}
+          setArgs={setArgs}
+          sseUrl={sseUrl}
+          setSseUrl={setSseUrl}
+          env={env}
+          setEnv={setEnv}
+          bearerToken={bearerToken}
+          setBearerToken={setBearerToken}
+          onConnect={connectMcpServer}
+          stdErrNotifications={stdErrNotifications}
+          logLevel={logLevel}
+          sendLogLevelRequest={sendLogLevelRequest}
+          loggingSupported={!!serverCapabilities?.logging || false}
+        />
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div className="flex-1 overflow-auto">
+            {mcpClient ? (
+              <Tabs
+                defaultValue={
+                  Object.keys(serverCapabilities ?? {}).includes(
+                    window.location.hash.slice(1),
+                  )
+                    ? window.location.hash.slice(1)
+                    : serverCapabilities?.resources
+                      ? "resources"
+                      : serverCapabilities?.prompts
+                        ? "prompts"
+                        : serverCapabilities?.tools
+                          ? "tools"
+                          : "ping"
+                }
+                className="w-full p-4"
+                onValueChange={(value) => (window.location.hash = value)}
+              >
+                <TabsList className="mb-4 p-0">
+                  <TabsTrigger
+                    value="resources"
+                    disabled={!serverCapabilities?.resources}
+                  >
+                    <Files className="w-4 h-4 mr-2" />
+                    Resources
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="prompts"
+                    disabled={!serverCapabilities?.prompts}
+                  >
+                    <MessageSquare className="w-4 h-4 mr-2" />
+                    Prompts
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="tools"
+                    disabled={!serverCapabilities?.tools}
+                  >
+                    <Hammer className="w-4 h-4 mr-2" />
+                    Tools
+                  </TabsTrigger>
+                  <TabsTrigger value="ping">
+                    <Bell className="w-4 h-4 mr-2" />
+                    Ping
+                  </TabsTrigger>
+                  <TabsTrigger value="sampling" className="relative">
+                    <Hash className="w-4 h-4 mr-2" />
+                    Sampling
+                    {pendingSampleRequests.length > 0 && (
+                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                        {pendingSampleRequests.length}
+                      </span>
+                    )}
+                  </TabsTrigger>
+                  <TabsTrigger value="roots">
+                    <FolderTree className="w-4 h-4 mr-2" />
+                    Roots
+                  </TabsTrigger>
+                </TabsList>
 
-              <div className="w-full">
-                {!serverCapabilities?.resources &&
-                !serverCapabilities?.prompts &&
-                !serverCapabilities?.tools ? (
-                  <div className="flex items-center justify-center p-4">
-                    <p className="text-lg text-gray-500">
-                      The connected server does not support any MCP capabilities
-                    </p>
-                  </div>
-                ) : (
-                  <>
-                    <ResourcesTab
-                      resources={resources}
-                      resourceTemplates={resourceTemplates}
-                      listResources={() => {
-                        clearError("resources");
-                        listResources();
-                      }}
-                      clearResources={() => {
-                        setResources([]);
-                        setNextResourceCursor(undefined);
-                      }}
-                      listResourceTemplates={() => {
-                        clearError("resources");
-                        listResourceTemplates();
-                      }}
-                      clearResourceTemplates={() => {
-                        setResourceTemplates([]);
-                        setNextResourceTemplateCursor(undefined);
-                      }}
-                      readResource={(uri) => {
-                        clearError("resources");
-                        readResource(uri);
-                      }}
-                      selectedResource={selectedResource}
-                      setSelectedResource={(resource) => {
-                        clearError("resources");
-                        setSelectedResource(resource);
-                      }}
-                      resourceSubscriptionsSupported={
-                        serverCapabilities?.resources?.subscribe || false
-                      }
-                      resourceSubscriptions={resourceSubscriptions}
-                      subscribeToResource={(uri) => {
-                        clearError("resources");
-                        subscribeToResource(uri);
-                      }}
-                      unsubscribeFromResource={(uri) => {
-                        clearError("resources");
-                        unsubscribeFromResource(uri);
-                      }}
-                      handleCompletion={handleCompletion}
-                      completionsSupported={completionsSupported}
-                      resourceContent={resourceContent}
-                      nextCursor={nextResourceCursor}
-                      nextTemplateCursor={nextResourceTemplateCursor}
-                      error={errors.resources}
-                    />
-                    <PromptsTab
-                      prompts={prompts}
-                      listPrompts={() => {
-                        clearError("prompts");
-                        listPrompts();
-                      }}
-                      clearPrompts={() => {
-                        setPrompts([]);
-                        setNextPromptCursor(undefined);
-                      }}
-                      getPrompt={(name, args) => {
-                        clearError("prompts");
-                        getPrompt(name, args);
-                      }}
-                      selectedPrompt={selectedPrompt}
-                      setSelectedPrompt={(prompt) => {
-                        clearError("prompts");
-                        setSelectedPrompt(prompt);
-                      }}
-                      handleCompletion={handleCompletion}
-                      completionsSupported={completionsSupported}
-                      promptContent={promptContent}
-                      nextCursor={nextPromptCursor}
-                      error={errors.prompts}
-                    />
-                    <ToolsTab
-                      tools={tools}
-                      listTools={() => {
-                        clearError("tools");
-                        listTools();
-                      }}
-                      clearTools={() => {
-                        setTools([]);
-                        setNextToolCursor(undefined);
-                      }}
-                      callTool={(name, params) => {
-                        clearError("tools");
-                        callTool(name, params);
-                      }}
-                      selectedTool={selectedTool}
-                      setSelectedTool={(tool) => {
-                        clearError("tools");
-                        setSelectedTool(tool);
-                        setToolResult(null);
-                      }}
-                      toolResult={toolResult}
-                      nextCursor={nextToolCursor}
-                      error={errors.tools}
-                    />
-                    <ConsoleTab />
-                    <PingTab
-                      onPingClick={() => {
-                        void makeRequest(
-                          {
-                            method: "ping" as const,
-                          },
-                          EmptyResultSchema,
-                        );
-                      }}
-                    />
-                    <SamplingTab
-                      pendingRequests={pendingSampleRequests}
-                      onApprove={handleApproveSampling}
-                      onReject={handleRejectSampling}
-                    />
-                    <RootsTab
-                      roots={roots}
-                      setRoots={setRoots}
-                      onRootsChange={handleRootsChange}
-                    />
-                  </>
-                )}
+                <div className="w-full">
+                  {!serverCapabilities?.resources &&
+                  !serverCapabilities?.prompts &&
+                  !serverCapabilities?.tools ? (
+                    <div className="flex items-center justify-center p-4">
+                      <p className="text-lg text-gray-500">
+                        The connected server does not support any MCP
+                        capabilities
+                      </p>
+                    </div>
+                  ) : (
+                    <>
+                      <ResourcesTab
+                        resources={resources}
+                        resourceTemplates={resourceTemplates}
+                        listResources={() => {
+                          clearError("resources");
+                          listResources();
+                        }}
+                        clearResources={() => {
+                          setResources([]);
+                          setNextResourceCursor(undefined);
+                        }}
+                        listResourceTemplates={() => {
+                          clearError("resources");
+                          listResourceTemplates();
+                        }}
+                        clearResourceTemplates={() => {
+                          setResourceTemplates([]);
+                          setNextResourceTemplateCursor(undefined);
+                        }}
+                        readResource={(uri) => {
+                          clearError("resources");
+                          readResource(uri);
+                        }}
+                        selectedResource={selectedResource}
+                        setSelectedResource={(resource) => {
+                          clearError("resources");
+                          setSelectedResource(resource);
+                        }}
+                        resourceSubscriptionsSupported={
+                          serverCapabilities?.resources?.subscribe || false
+                        }
+                        resourceSubscriptions={resourceSubscriptions}
+                        subscribeToResource={(uri) => {
+                          clearError("resources");
+                          subscribeToResource(uri);
+                        }}
+                        unsubscribeFromResource={(uri) => {
+                          clearError("resources");
+                          unsubscribeFromResource(uri);
+                        }}
+                        handleCompletion={handleCompletion}
+                        completionsSupported={completionsSupported}
+                        resourceContent={resourceContent}
+                        nextCursor={nextResourceCursor}
+                        nextTemplateCursor={nextResourceTemplateCursor}
+                        error={errors.resources}
+                      />
+                      <PromptsTab
+                        prompts={prompts}
+                        listPrompts={() => {
+                          clearError("prompts");
+                          listPrompts();
+                        }}
+                        clearPrompts={() => {
+                          setPrompts([]);
+                          setNextPromptCursor(undefined);
+                        }}
+                        getPrompt={(name, args) => {
+                          clearError("prompts");
+                          getPrompt(name, args);
+                        }}
+                        selectedPrompt={selectedPrompt}
+                        setSelectedPrompt={(prompt) => {
+                          clearError("prompts");
+                          setSelectedPrompt(prompt);
+                        }}
+                        handleCompletion={handleCompletion}
+                        completionsSupported={completionsSupported}
+                        promptContent={promptContent}
+                        nextCursor={nextPromptCursor}
+                        error={errors.prompts}
+                      />
+                      <ToolsTab
+                        tools={tools}
+                        listTools={() => {
+                          clearError("tools");
+                          listTools();
+                        }}
+                        clearTools={() => {
+                          setTools([]);
+                          setNextToolCursor(undefined);
+                        }}
+                        callTool={(name, params) => {
+                          clearError("tools");
+                          callTool(name, params);
+                        }}
+                        selectedTool={selectedTool}
+                        setSelectedTool={(tool) => {
+                          clearError("tools");
+                          setSelectedTool(tool);
+                          setToolResult(null);
+                        }}
+                        toolResult={toolResult}
+                        nextCursor={nextToolCursor}
+                        error={errors.tools}
+                      />
+                      <ConsoleTab />
+                      <PingTab
+                        onPingClick={() => {
+                          void makeRequest(
+                            {
+                              method: "ping" as const,
+                            },
+                            EmptyResultSchema,
+                          );
+                        }}
+                      />
+                      <SamplingTab
+                        pendingRequests={pendingSampleRequests}
+                        onApprove={handleApproveSampling}
+                        onReject={handleRejectSampling}
+                      />
+                      <RootsTab
+                        roots={roots}
+                        setRoots={setRoots}
+                        onRootsChange={handleRootsChange}
+                      />
+                    </>
+                  )}
+                </div>
+              </Tabs>
+            ) : (
+              <div className="flex items-center justify-center h-full">
+                <p className="text-lg text-gray-500">
+                  Connect to an MCP server to start inspecting
+                </p>
               </div>
-            </Tabs>
-          ) : (
-            <div className="flex items-center justify-center h-full">
-              <p className="text-lg text-gray-500">
-                Connect to an MCP server to start inspecting
-              </p>
-            </div>
-          )}
-        </div>
-        <div
-          className="relative border-t border-border"
-          style={{
-            height: `${historyPaneHeight}px`,
-          }}
-        >
-          <div
-            className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
-            onMouseDown={handleDragStart}
-          >
-            <div className="w-8 h-1 rounded-full bg-border" />
+            )}
           </div>
-          <div className="h-full overflow-auto">
-            <HistoryAndNotifications
-              requestHistory={requestHistory}
-              serverNotifications={notifications}
-            />
+          <div
+            className="relative border-t border-border"
+            style={{
+              height: `${historyPaneHeight}px`,
+            }}
+          >
+            <div
+              className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
+              onMouseDown={handleDragStart}
+            >
+              <div className="w-8 h-1 rounded-full bg-border" />
+            </div>
+            <div className="h-full overflow-auto">
+              <HistoryAndNotifications
+                requestHistory={requestHistory}
+                serverNotifications={notifications}
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 };
 
 export default App;

From f09d2b6096685d4f8a24e8007e1971b70f0b01bd Mon Sep 17 00:00:00 2001
From: yusheng chen <samuel871211@gmail.com>
Date: Fri, 28 Mar 2025 07:05:22 +0800
Subject: [PATCH 10/13] style: prettier format file
 `client/src/lib/useTheme.ts`

---
 client/src/lib/useTheme.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/lib/useTheme.ts b/client/src/lib/useTheme.ts
index 8e598e1..9e76611 100644
--- a/client/src/lib/useTheme.ts
+++ b/client/src/lib/useTheme.ts
@@ -35,7 +35,7 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
     };
   }, [theme]);
-  
+
   const setThemeWithSideEffect = useCallback((newTheme: Theme) => {
     setTheme(newTheme);
     localStorage.setItem("theme", newTheme);
@@ -43,10 +43,7 @@ const useTheme = (): [Theme, (mode: Theme) => void] => {
       document.documentElement.classList.toggle("dark", newTheme === "dark");
     }
   }, []);
-  return useMemo(() => [
-    theme,
-    setThemeWithSideEffect,
-  ], [theme]);
+  return useMemo(() => [theme, setThemeWithSideEffect], [theme]);
 };
 
 export default useTheme;

From 8180b0bd6f10939cead9f1cf88fbd439bf964a76 Mon Sep 17 00:00:00 2001
From: cgoing <neo.cgoing@gmail.com>
Date: Fri, 28 Mar 2025 15:16:17 +0900
Subject: [PATCH 11/13] refactor: JsonEditor

---
 client/src/components/DynamicJsonForm.tsx | 22 +++++++++++++++-
 client/src/components/JsonEditor.tsx      | 31 +++--------------------
 2 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 7da1762..f5b0d63 100644
--- 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>
diff --git a/client/src/components/JsonEditor.tsx b/client/src/components/JsonEditor.tsx
index 0d2596e..215d66b 100644
--- 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

From 84335ae5f4e364346c5a4c4a2de35ddb49c53b82 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 28 Mar 2025 15:56:10 -0400
Subject: [PATCH 12/13] Remove else block wrapper for final component return to
 reduce indenting and hopefully make the PR diff easier to approve.

---
 client/src/App.tsx | 484 ++++++++++++++++++++++-----------------------
 1 file changed, 242 insertions(+), 242 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3d35e83..37aff6f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -424,254 +424,254 @@ const App = () => {
         <OAuthCallback />
       </Suspense>
     );
-  } else {
-    return (
-      <div className="flex h-screen bg-background">
-        <Sidebar
-          connectionStatus={connectionStatus}
-          transportType={transportType}
-          setTransportType={setTransportType}
-          command={command}
-          setCommand={setCommand}
-          args={args}
-          setArgs={setArgs}
-          sseUrl={sseUrl}
-          setSseUrl={setSseUrl}
-          env={env}
-          setEnv={setEnv}
-          bearerToken={bearerToken}
-          setBearerToken={setBearerToken}
-          onConnect={connectMcpServer}
-          stdErrNotifications={stdErrNotifications}
-          logLevel={logLevel}
-          sendLogLevelRequest={sendLogLevelRequest}
-          loggingSupported={!!serverCapabilities?.logging || false}
-        />
-        <div className="flex-1 flex flex-col overflow-hidden">
-          <div className="flex-1 overflow-auto">
-            {mcpClient ? (
-              <Tabs
-                defaultValue={
-                  Object.keys(serverCapabilities ?? {}).includes(
-                    window.location.hash.slice(1),
-                  )
-                    ? window.location.hash.slice(1)
-                    : serverCapabilities?.resources
-                      ? "resources"
-                      : serverCapabilities?.prompts
-                        ? "prompts"
-                        : serverCapabilities?.tools
-                          ? "tools"
-                          : "ping"
-                }
-                className="w-full p-4"
-                onValueChange={(value) => (window.location.hash = value)}
-              >
-                <TabsList className="mb-4 p-0">
-                  <TabsTrigger
-                    value="resources"
-                    disabled={!serverCapabilities?.resources}
-                  >
-                    <Files className="w-4 h-4 mr-2" />
-                    Resources
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="prompts"
-                    disabled={!serverCapabilities?.prompts}
-                  >
-                    <MessageSquare className="w-4 h-4 mr-2" />
-                    Prompts
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="tools"
-                    disabled={!serverCapabilities?.tools}
-                  >
-                    <Hammer className="w-4 h-4 mr-2" />
-                    Tools
-                  </TabsTrigger>
-                  <TabsTrigger value="ping">
-                    <Bell className="w-4 h-4 mr-2" />
-                    Ping
-                  </TabsTrigger>
-                  <TabsTrigger value="sampling" className="relative">
-                    <Hash className="w-4 h-4 mr-2" />
-                    Sampling
-                    {pendingSampleRequests.length > 0 && (
-                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                        {pendingSampleRequests.length}
-                      </span>
-                    )}
-                  </TabsTrigger>
-                  <TabsTrigger value="roots">
-                    <FolderTree className="w-4 h-4 mr-2" />
-                    Roots
-                  </TabsTrigger>
-                </TabsList>
+  }
 
-                <div className="w-full">
-                  {!serverCapabilities?.resources &&
-                  !serverCapabilities?.prompts &&
-                  !serverCapabilities?.tools ? (
-                    <div className="flex items-center justify-center p-4">
-                      <p className="text-lg text-gray-500">
-                        The connected server does not support any MCP
-                        capabilities
-                      </p>
-                    </div>
-                  ) : (
-                    <>
-                      <ResourcesTab
-                        resources={resources}
-                        resourceTemplates={resourceTemplates}
-                        listResources={() => {
-                          clearError("resources");
-                          listResources();
-                        }}
-                        clearResources={() => {
-                          setResources([]);
-                          setNextResourceCursor(undefined);
-                        }}
-                        listResourceTemplates={() => {
-                          clearError("resources");
-                          listResourceTemplates();
-                        }}
-                        clearResourceTemplates={() => {
-                          setResourceTemplates([]);
-                          setNextResourceTemplateCursor(undefined);
-                        }}
-                        readResource={(uri) => {
-                          clearError("resources");
-                          readResource(uri);
-                        }}
-                        selectedResource={selectedResource}
-                        setSelectedResource={(resource) => {
-                          clearError("resources");
-                          setSelectedResource(resource);
-                        }}
-                        resourceSubscriptionsSupported={
-                          serverCapabilities?.resources?.subscribe || false
-                        }
-                        resourceSubscriptions={resourceSubscriptions}
-                        subscribeToResource={(uri) => {
-                          clearError("resources");
-                          subscribeToResource(uri);
-                        }}
-                        unsubscribeFromResource={(uri) => {
-                          clearError("resources");
-                          unsubscribeFromResource(uri);
-                        }}
-                        handleCompletion={handleCompletion}
-                        completionsSupported={completionsSupported}
-                        resourceContent={resourceContent}
-                        nextCursor={nextResourceCursor}
-                        nextTemplateCursor={nextResourceTemplateCursor}
-                        error={errors.resources}
-                      />
-                      <PromptsTab
-                        prompts={prompts}
-                        listPrompts={() => {
-                          clearError("prompts");
-                          listPrompts();
-                        }}
-                        clearPrompts={() => {
-                          setPrompts([]);
-                          setNextPromptCursor(undefined);
-                        }}
-                        getPrompt={(name, args) => {
-                          clearError("prompts");
-                          getPrompt(name, args);
-                        }}
-                        selectedPrompt={selectedPrompt}
-                        setSelectedPrompt={(prompt) => {
-                          clearError("prompts");
-                          setSelectedPrompt(prompt);
-                        }}
-                        handleCompletion={handleCompletion}
-                        completionsSupported={completionsSupported}
-                        promptContent={promptContent}
-                        nextCursor={nextPromptCursor}
-                        error={errors.prompts}
-                      />
-                      <ToolsTab
-                        tools={tools}
-                        listTools={() => {
-                          clearError("tools");
-                          listTools();
-                        }}
-                        clearTools={() => {
-                          setTools([]);
-                          setNextToolCursor(undefined);
-                        }}
-                        callTool={(name, params) => {
-                          clearError("tools");
-                          callTool(name, params);
-                        }}
-                        selectedTool={selectedTool}
-                        setSelectedTool={(tool) => {
-                          clearError("tools");
-                          setSelectedTool(tool);
-                          setToolResult(null);
-                        }}
-                        toolResult={toolResult}
-                        nextCursor={nextToolCursor}
-                        error={errors.tools}
-                      />
-                      <ConsoleTab />
-                      <PingTab
-                        onPingClick={() => {
-                          void makeRequest(
-                            {
-                              method: "ping" as const,
-                            },
-                            EmptyResultSchema,
-                          );
-                        }}
-                      />
-                      <SamplingTab
-                        pendingRequests={pendingSampleRequests}
-                        onApprove={handleApproveSampling}
-                        onReject={handleRejectSampling}
-                      />
-                      <RootsTab
-                        roots={roots}
-                        setRoots={setRoots}
-                        onRootsChange={handleRootsChange}
-                      />
-                    </>
-                  )}
-                </div>
-              </Tabs>
-            ) : (
-              <div className="flex items-center justify-center h-full">
-                <p className="text-lg text-gray-500">
-                  Connect to an MCP server to start inspecting
-                </p>
-              </div>
-            )}
-          </div>
-          <div
-            className="relative border-t border-border"
-            style={{
-              height: `${historyPaneHeight}px`,
-            }}
-          >
-            <div
-              className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
-              onMouseDown={handleDragStart}
+  return (
+    <div className="flex h-screen bg-background">
+      <Sidebar
+        connectionStatus={connectionStatus}
+        transportType={transportType}
+        setTransportType={setTransportType}
+        command={command}
+        setCommand={setCommand}
+        args={args}
+        setArgs={setArgs}
+        sseUrl={sseUrl}
+        setSseUrl={setSseUrl}
+        env={env}
+        setEnv={setEnv}
+        bearerToken={bearerToken}
+        setBearerToken={setBearerToken}
+        onConnect={connectMcpServer}
+        stdErrNotifications={stdErrNotifications}
+        logLevel={logLevel}
+        sendLogLevelRequest={sendLogLevelRequest}
+        loggingSupported={!!serverCapabilities?.logging || false}
+      />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="flex-1 overflow-auto">
+          {mcpClient ? (
+            <Tabs
+              defaultValue={
+                Object.keys(serverCapabilities ?? {}).includes(
+                  window.location.hash.slice(1),
+                )
+                  ? window.location.hash.slice(1)
+                  : serverCapabilities?.resources
+                    ? "resources"
+                    : serverCapabilities?.prompts
+                      ? "prompts"
+                      : serverCapabilities?.tools
+                        ? "tools"
+                        : "ping"
+              }
+              className="w-full p-4"
+              onValueChange={(value) => (window.location.hash = value)}
             >
-              <div className="w-8 h-1 rounded-full bg-border" />
-            </div>
-            <div className="h-full overflow-auto">
-              <HistoryAndNotifications
-                requestHistory={requestHistory}
-                serverNotifications={notifications}
-              />
+              <TabsList className="mb-4 p-0">
+                <TabsTrigger
+                  value="resources"
+                  disabled={!serverCapabilities?.resources}
+                >
+                  <Files className="w-4 h-4 mr-2" />
+                  Resources
+                </TabsTrigger>
+                <TabsTrigger
+                  value="prompts"
+                  disabled={!serverCapabilities?.prompts}
+                >
+                  <MessageSquare className="w-4 h-4 mr-2" />
+                  Prompts
+                </TabsTrigger>
+                <TabsTrigger
+                  value="tools"
+                  disabled={!serverCapabilities?.tools}
+                >
+                  <Hammer className="w-4 h-4 mr-2" />
+                  Tools
+                </TabsTrigger>
+                <TabsTrigger value="ping">
+                  <Bell className="w-4 h-4 mr-2" />
+                  Ping
+                </TabsTrigger>
+                <TabsTrigger value="sampling" className="relative">
+                  <Hash className="w-4 h-4 mr-2" />
+                  Sampling
+                  {pendingSampleRequests.length > 0 && (
+                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                      {pendingSampleRequests.length}
+                    </span>
+                  )}
+                </TabsTrigger>
+                <TabsTrigger value="roots">
+                  <FolderTree className="w-4 h-4 mr-2" />
+                  Roots
+                </TabsTrigger>
+              </TabsList>
+
+              <div className="w-full">
+                {!serverCapabilities?.resources &&
+                !serverCapabilities?.prompts &&
+                !serverCapabilities?.tools ? (
+                  <div className="flex items-center justify-center p-4">
+                    <p className="text-lg text-gray-500">
+                      The connected server does not support any MCP
+                      capabilities
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    <ResourcesTab
+                      resources={resources}
+                      resourceTemplates={resourceTemplates}
+                      listResources={() => {
+                        clearError("resources");
+                        listResources();
+                      }}
+                      clearResources={() => {
+                        setResources([]);
+                        setNextResourceCursor(undefined);
+                      }}
+                      listResourceTemplates={() => {
+                        clearError("resources");
+                        listResourceTemplates();
+                      }}
+                      clearResourceTemplates={() => {
+                        setResourceTemplates([]);
+                        setNextResourceTemplateCursor(undefined);
+                      }}
+                      readResource={(uri) => {
+                        clearError("resources");
+                        readResource(uri);
+                      }}
+                      selectedResource={selectedResource}
+                      setSelectedResource={(resource) => {
+                        clearError("resources");
+                        setSelectedResource(resource);
+                      }}
+                      resourceSubscriptionsSupported={
+                        serverCapabilities?.resources?.subscribe || false
+                      }
+                      resourceSubscriptions={resourceSubscriptions}
+                      subscribeToResource={(uri) => {
+                        clearError("resources");
+                        subscribeToResource(uri);
+                      }}
+                      unsubscribeFromResource={(uri) => {
+                        clearError("resources");
+                        unsubscribeFromResource(uri);
+                      }}
+                      handleCompletion={handleCompletion}
+                      completionsSupported={completionsSupported}
+                      resourceContent={resourceContent}
+                      nextCursor={nextResourceCursor}
+                      nextTemplateCursor={nextResourceTemplateCursor}
+                      error={errors.resources}
+                    />
+                    <PromptsTab
+                      prompts={prompts}
+                      listPrompts={() => {
+                        clearError("prompts");
+                        listPrompts();
+                      }}
+                      clearPrompts={() => {
+                        setPrompts([]);
+                        setNextPromptCursor(undefined);
+                      }}
+                      getPrompt={(name, args) => {
+                        clearError("prompts");
+                        getPrompt(name, args);
+                      }}
+                      selectedPrompt={selectedPrompt}
+                      setSelectedPrompt={(prompt) => {
+                        clearError("prompts");
+                        setSelectedPrompt(prompt);
+                      }}
+                      handleCompletion={handleCompletion}
+                      completionsSupported={completionsSupported}
+                      promptContent={promptContent}
+                      nextCursor={nextPromptCursor}
+                      error={errors.prompts}
+                    />
+                    <ToolsTab
+                      tools={tools}
+                      listTools={() => {
+                        clearError("tools");
+                        listTools();
+                      }}
+                      clearTools={() => {
+                        setTools([]);
+                        setNextToolCursor(undefined);
+                      }}
+                      callTool={(name, params) => {
+                        clearError("tools");
+                        callTool(name, params);
+                      }}
+                      selectedTool={selectedTool}
+                      setSelectedTool={(tool) => {
+                        clearError("tools");
+                        setSelectedTool(tool);
+                        setToolResult(null);
+                      }}
+                      toolResult={toolResult}
+                      nextCursor={nextToolCursor}
+                      error={errors.tools}
+                    />
+                    <ConsoleTab />
+                    <PingTab
+                      onPingClick={() => {
+                        void makeRequest(
+                          {
+                            method: "ping" as const,
+                          },
+                          EmptyResultSchema,
+                        );
+                      }}
+                    />
+                    <SamplingTab
+                      pendingRequests={pendingSampleRequests}
+                      onApprove={handleApproveSampling}
+                      onReject={handleRejectSampling}
+                    />
+                    <RootsTab
+                      roots={roots}
+                      setRoots={setRoots}
+                      onRootsChange={handleRootsChange}
+                    />
+                  </>
+                )}
+              </div>
+            </Tabs>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-lg text-gray-500">
+                Connect to an MCP server to start inspecting
+              </p>
             </div>
+          )}
+        </div>
+        <div
+          className="relative border-t border-border"
+          style={{
+            height: `${historyPaneHeight}px`,
+          }}
+        >
+          <div
+            className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
+            onMouseDown={handleDragStart}
+          >
+            <div className="w-8 h-1 rounded-full bg-border" />
+          </div>
+          <div className="h-full overflow-auto">
+            <HistoryAndNotifications
+              requestHistory={requestHistory}
+              serverNotifications={notifications}
+            />
           </div>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 };
 
 export default App;

From 7227909df337cc549cf7b34981160ea78dee4a0a Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 28 Mar 2025 16:03:39 -0400
Subject: [PATCH 13/13] Fix spurious linebreak

---
 client/src/App.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 37aff6f..27078ed 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -515,8 +515,7 @@ const App = () => {
                 !serverCapabilities?.tools ? (
                   <div className="flex items-center justify-center p-4">
                     <p className="text-lg text-gray-500">
-                      The connected server does not support any MCP
-                      capabilities
+                      The connected server does not support any MCP capabilities
                     </p>
                   </div>
                 ) : (