Support structured tool results

client/src/components/ToolsTab.tsx

@@ -8,6 +8,8 @@ import { AlertCircle, Send } from "lucide-react";
 import { useState } from "react";
 import ListPane from "./ListPane";
 
+import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
+
 const ToolsTab = ({
   tools,
   listTools,
@@ -23,12 +25,56 @@ const ToolsTab = ({
   callTool: (name: string, params: Record<string, unknown>) => void;
   selectedTool: Tool | null;
   setSelectedTool: (tool: Tool) => void;
-  toolResult: string;
+  toolResult: CompatibilityCallToolResult | null;
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
   const [params, setParams] = useState<Record<string, unknown>>({});
 
+  const renderToolResult = () => {
+    if (!toolResult) return null;
+
+    if ("content" in toolResult) {
+      return (
+        <>
+          <h4 className="font-semibold mb-2">
+            Tool Result: {toolResult.isError ? "Error" : "Success"}
+          </h4>
+          {toolResult.content.map((item, index) => (
+            <div key={index} className="mb-2">
+              {item.type === "text" && (
+                <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+                  {item.text}
+                </pre>
+              )}
+              {item.type === "image" && (
+                <img
+                  src={`data:${item.mimeType};base64,${item.data}`}
+                  alt="Tool result image"
+                  className="max-w-full h-auto"
+                />
+              )}
+              {item.type === "resource" && (
+                <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+                  {JSON.stringify(item.resource, null, 2)}
+                </pre>
+              )}
+            </div>
+          ))}
+        </>
+      );
+    } else if ("toolResult" in toolResult) {
+      return (
+        <>
+          <h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
+          <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
+            {JSON.stringify(toolResult.toolResult, null, 2)}
+          </pre>
+        </>
+      );
+    }
+  };
+
   return (
     <TabsContent value="tools" className="grid grid-cols-2 gap-4">
       <ListPane
@@ -100,14 +146,7 @@ const ToolsTab = ({
                 <Send className="w-4 h-4 mr-2" />
                 Run Tool
               </Button>
-              {toolResult && (
-                <>
-                  <h4 className="font-semibold mb-2">Tool Result:</h4>
-                  <pre className="bg-gray-50 p-4 rounded text-sm overflow-auto max-h-64">
-                    {toolResult}
-                  </pre>
-                </>
-              )}
+              {toolResult && renderToolResult()}
             </div>
           ) : (
             <Alert>