From b39c96de7cd9284d7c7fd7ffb55704977a9e513f Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 9 Dec 2024 10:36:56 +0000
Subject: [PATCH] refactor: revert tab files to main and restore tab disabling

---
 client/src/App.tsx                     |  10 +-
 client/src/components/PromptsTab.tsx   | 164 +++++++--------
 client/src/components/ResourcesTab.tsx | 273 ++++++++++++-------------
 client/src/components/ToolsTab.tsx     | 218 +++++++++-----------
 4 files changed, 312 insertions(+), 353 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 70f3175..b016626 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -509,15 +509,15 @@ const App = () => {
               className="w-full p-4"
             >
               <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources">
+                <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
                   <Files className="w-4 h-4 mr-2" />
                   Resources
                 </TabsTrigger>
-                <TabsTrigger value="prompts">
+                <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                <TabsTrigger value="tools">
+                <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
@@ -525,7 +525,7 @@ const App = () => {
                   <Bell className="w-4 h-4 mr-2" />
                   Ping
                 </TabsTrigger>
-                <TabsTrigger value="sampling" className="relative">
+                <TabsTrigger value="sampling" className="relative" disabled={!serverCapabilities?.sampling}>
                   <Hash className="w-4 h-4 mr-2" />
                   Sampling
                   {pendingSampleRequests.length > 0 && (
@@ -534,7 +534,7 @@ const App = () => {
                     </span>
                   )}
                 </TabsTrigger>
-                <TabsTrigger value="roots">
+                <TabsTrigger value="roots" disabled={!serverCapabilities?.roots}>
                   <FolderTree className="w-4 h-4 mr-2" />
                   Roots
                 </TabsTrigger>
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 5882e7e..df8b8a5 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -6,9 +6,8 @@ import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { ListPromptsResult } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle } from "lucide-react";
-import { useState, useContext } from "react";
+import { useState } from "react";
 import ListPane from "./ListPane";
-import { CapabilityContext } from "@/lib/contexts";
 
 export type Prompt = {
   name: string;
@@ -41,7 +40,6 @@ const PromptsTab = ({
   nextCursor: ListPromptsResult["nextCursor"];
   error: string | null;
 }) => {
-  const capabilities = useContext(CapabilityContext);
   const [promptArgs, setPromptArgs] = useState<Record<string, string>>({});
 
   const handleInputChange = (argName: string, value: string) => {
@@ -56,98 +54,86 @@ const PromptsTab = ({
 
   return (
     <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
-      {!capabilities?.prompts ? (
-        <Alert variant="destructive" className="col-span-2">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Feature Not Available</AlertTitle>
-          <AlertDescription>
-            The connected server does not support prompts.
-          </AlertDescription>
-        </Alert>
-      ) : (
-        <>
-          <ListPane
-            items={prompts}
-            listItems={listPrompts}
-            clearItems={clearPrompts}
-            setSelectedItem={(prompt) => {
-              setSelectedPrompt(prompt);
-              setPromptArgs({});
-            }}
-            renderItem={(prompt) => (
-              <>
-                <span className="flex-1">{prompt.name}</span>
-                <span className="text-sm text-gray-500">{prompt.description}</span>
-              </>
-            )}
-            title="Prompts"
-            buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
-            isButtonDisabled={!nextCursor && prompts.length > 0}
-          />
+      <ListPane
+        items={prompts}
+        listItems={listPrompts}
+        clearItems={clearPrompts}
+        setSelectedItem={(prompt) => {
+          setSelectedPrompt(prompt);
+          setPromptArgs({});
+        }}
+        renderItem={(prompt) => (
+          <>
+            <span className="flex-1">{prompt.name}</span>
+            <span className="text-sm text-gray-500">{prompt.description}</span>
+          </>
+        )}
+        title="Prompts"
+        buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
+        isButtonDisabled={!nextCursor && prompts.length > 0}
+      />
 
-          <div className="bg-card rounded-lg shadow">
-            <div className="p-4 border-b border-gray-200">
-              <h3 className="font-semibold">
-                {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
-              </h3>
-            </div>
-            <div className="p-4">
-              {error ? (
-                <Alert variant="destructive">
-                  <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>Error</AlertTitle>
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              ) : selectedPrompt ? (
-                <div className="space-y-4">
-                  {selectedPrompt.description && (
-                    <p className="text-sm text-gray-600">
-                      {selectedPrompt.description}
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">
+            {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedPrompt ? (
+            <div className="space-y-4">
+              {selectedPrompt.description && (
+                <p className="text-sm text-gray-600">
+                  {selectedPrompt.description}
+                </p>
+              )}
+              {selectedPrompt.arguments?.map((arg) => (
+                <div key={arg.name}>
+                  <Label htmlFor={arg.name}>{arg.name}</Label>
+                  <Input
+                    id={arg.name}
+                    placeholder={`Enter ${arg.name}`}
+                    value={promptArgs[arg.name] || ""}
+                    onChange={(e) =>
+                      handleInputChange(arg.name, e.target.value)
+                    }
+                  />
+                  {arg.description && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      {arg.description}
+                      {arg.required && (
+                        <span className="text-xs mt-1 ml-1">(Required)</span>
+                      )}
                     </p>
                   )}
-                  {selectedPrompt.arguments?.map((arg) => (
-                    <div key={arg.name}>
-                      <Label htmlFor={arg.name}>{arg.name}</Label>
-                      <Input
-                        id={arg.name}
-                        placeholder={`Enter ${arg.name}`}
-                        value={promptArgs[arg.name] || ""}
-                        onChange={(e) =>
-                          handleInputChange(arg.name, e.target.value)
-                        }
-                      />
-                      {arg.description && (
-                        <p className="text-xs text-gray-500 mt-1">
-                          {arg.description}
-                          {arg.required && (
-                            <span className="text-xs mt-1 ml-1">(Required)</span>
-                          )}
-                        </p>
-                      )}
-                    </div>
-                  ))}
-                  <Button onClick={handleGetPrompt} className="w-full">
-                    Get Prompt
-                  </Button>
-                  {promptContent && (
-                    <Textarea
-                      value={promptContent}
-                      readOnly
-                      className="h-64 font-mono"
-                    />
-                  )}
                 </div>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    Select a prompt from the list to view and use it
-                  </AlertDescription>
-                </Alert>
+              ))}
+              <Button onClick={handleGetPrompt} className="w-full">
+                Get Prompt
+              </Button>
+              {promptContent && (
+                <Textarea
+                  value={promptContent}
+                  readOnly
+                  className="h-64 font-mono"
+                />
               )}
             </div>
-          </div>
-        </>
-      )}
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a prompt from the list to view and use it
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
     </TabsContent>
   );
 };
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 69e288c..e948881 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -10,8 +10,7 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
-import { useState, useContext } from "react";
-import { CapabilityContext } from "@/lib/contexts";
+import { useState } from "react";
 
 const ResourcesTab = ({
   resources,
@@ -42,7 +41,6 @@ const ResourcesTab = ({
   nextTemplateCursor: ListResourceTemplatesResult["nextCursor"];
   error: string | null;
 }) => {
-  const capabilities = useContext(CapabilityContext);
   const [selectedTemplate, setSelectedTemplate] =
     useState<ResourceTemplate | null>(null);
   const [templateValues, setTemplateValues] = useState<Record<string, string>>(
@@ -64,153 +62,142 @@ const ResourcesTab = ({
       const uri = fillTemplate(selectedTemplate.uriTemplate, templateValues);
       readResource(uri);
       setSelectedTemplate(null);
+      // We don't have the full Resource object here, so we create a partial one
       setSelectedResource({ uri, name: uri } as Resource);
     }
   };
 
   return (
     <TabsContent value="resources" className="grid grid-cols-3 gap-4">
-      {!capabilities?.resources ? (
-        <Alert variant="destructive" className="col-span-3">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Feature Not Available</AlertTitle>
-          <AlertDescription>
-            The connected server does not support resources.
-          </AlertDescription>
-        </Alert>
-      ) : (
-        <>
-          <ListPane
-            items={resources}
-            listItems={listResources}
-            clearItems={clearResources}
-            setSelectedItem={(resource) => {
-              setSelectedResource(resource);
-              readResource(resource.uri);
-              setSelectedTemplate(null);
-            }}
-            renderItem={(resource) => (
-              <div className="flex items-center w-full">
-                <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-                <span className="flex-1 truncate" title={resource.uri.toString()}>
-                  {resource.name}
-                </span>
-                <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-              </div>
-            )}
-            title="Resources"
-            buttonText={nextCursor ? "List More Resources" : "List Resources"}
-            isButtonDisabled={!nextCursor && resources.length > 0}
-          />
-
-          <ListPane
-            items={resourceTemplates}
-            listItems={listResourceTemplates}
-            clearItems={clearResourceTemplates}
-            setSelectedItem={(template) => {
-              setSelectedTemplate(template);
-              setSelectedResource(null);
-              setTemplateValues({});
-            }}
-            renderItem={(template) => (
-              <div className="flex items-center w-full">
-                <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
-                <span className="flex-1 truncate" title={template.uriTemplate}>
-                  {template.name}
-                </span>
-                <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
-              </div>
-            )}
-            title="Resource Templates"
-            buttonText={
-              nextTemplateCursor ? "List More Templates" : "List Templates"
-            }
-            isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
-          />
-
-          <div className="bg-card rounded-lg shadow">
-            <div className="p-4 border-b border-gray-200 flex justify-between items-center">
-              <h3
-                className="font-semibold truncate"
-                title={selectedResource?.name || selectedTemplate?.name}
-              >
-                {selectedResource
-                  ? selectedResource.name
-                  : selectedTemplate
-                    ? selectedTemplate.name
-                    : "Select a resource or template"}
-              </h3>
-              {selectedResource && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => readResource(selectedResource.uri)}
-                >
-                  <RefreshCw className="w-4 h-4 mr-2" />
-                  Refresh
-                </Button>
-              )}
-            </div>
-            <div className="p-4">
-              {error ? (
-                <Alert variant="destructive">
-                  <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>Error</AlertTitle>
-                  <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>
-              ) : selectedTemplate ? (
-                <div className="space-y-4">
-                  <p className="text-sm text-gray-600">
-                    {selectedTemplate.description}
-                  </p>
-                  {selectedTemplate.uriTemplate
-                    .match(/{([^}]+)}/g)
-                    ?.map((param) => {
-                      const key = param.slice(1, -1);
-                      return (
-                        <div key={key}>
-                          <label
-                            htmlFor={key}
-                            className="block text-sm font-medium text-gray-700"
-                          >
-                            {key}
-                          </label>
-                          <Input
-                            id={key}
-                            value={templateValues[key] || ""}
-                            onChange={(e) =>
-                              setTemplateValues({
-                                ...templateValues,
-                                [key]: e.target.value,
-                              })
-                            }
-                            className="mt-1"
-                          />
-                        </div>
-                      );
-                    })}
-                  <Button
-                    onClick={handleReadTemplateResource}
-                    disabled={Object.keys(templateValues).length === 0}
-                  >
-                    Read Resource
-                  </Button>
-                </div>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    Select a resource or template from the list to view its contents
-                  </AlertDescription>
-                </Alert>
-              )}
-            </div>
+      <ListPane
+        items={resources}
+        listItems={listResources}
+        clearItems={clearResources}
+        setSelectedItem={(resource) => {
+          setSelectedResource(resource);
+          readResource(resource.uri);
+          setSelectedTemplate(null);
+        }}
+        renderItem={(resource) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={resource.uri.toString()}>
+              {resource.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
           </div>
-        </>
-      )}
+        )}
+        title="Resources"
+        buttonText={nextCursor ? "List More Resources" : "List Resources"}
+        isButtonDisabled={!nextCursor && resources.length > 0}
+      />
+
+      <ListPane
+        items={resourceTemplates}
+        listItems={listResourceTemplates}
+        clearItems={clearResourceTemplates}
+        setSelectedItem={(template) => {
+          setSelectedTemplate(template);
+          setSelectedResource(null);
+          setTemplateValues({});
+        }}
+        renderItem={(template) => (
+          <div className="flex items-center w-full">
+            <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+            <span className="flex-1 truncate" title={template.uriTemplate}>
+              {template.name}
+            </span>
+            <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
+          </div>
+        )}
+        title="Resource Templates"
+        buttonText={
+          nextTemplateCursor ? "List More Templates" : "List Templates"
+        }
+        isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
+      />
+
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200 flex justify-between items-center">
+          <h3
+            className="font-semibold truncate"
+            title={selectedResource?.name || selectedTemplate?.name}
+          >
+            {selectedResource
+              ? selectedResource.name
+              : selectedTemplate
+                ? selectedTemplate.name
+                : "Select a resource or template"}
+          </h3>
+          {selectedResource && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => readResource(selectedResource.uri)}
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Refresh
+            </Button>
+          )}
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <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>
+          ) : selectedTemplate ? (
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                {selectedTemplate.description}
+              </p>
+              {selectedTemplate.uriTemplate
+                .match(/{([^}]+)}/g)
+                ?.map((param) => {
+                  const key = param.slice(1, -1);
+                  return (
+                    <div key={key}>
+                      <label
+                        htmlFor={key}
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        {key}
+                      </label>
+                      <Input
+                        id={key}
+                        value={templateValues[key] || ""}
+                        onChange={(e) =>
+                          setTemplateValues({
+                            ...templateValues,
+                            [key]: e.target.value,
+                          })
+                        }
+                        className="mt-1"
+                      />
+                    </div>
+                  );
+                })}
+              <Button
+                onClick={handleReadTemplateResource}
+                disabled={Object.keys(templateValues).length === 0}
+              >
+                Read Resource
+              </Button>
+            </div>
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a resource or template from the list to view its contents
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
     </TabsContent>
   );
 };
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 9fa4b7f..55dff83 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -10,9 +10,8 @@ import {
   CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
-import { useEffect, useState, useContext } from "react";
+import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
-import { CapabilityContext } from "@/lib/contexts";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
 
@@ -37,7 +36,6 @@ const ToolsTab = ({
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
-  const capabilities = useContext(CapabilityContext);
   const [params, setParams] = useState<Record<string, unknown>>({});
   useEffect(() => {
     setParams({});
@@ -112,122 +110,110 @@ const ToolsTab = ({
 
   return (
     <TabsContent value="tools" className="grid grid-cols-2 gap-4">
-      {!capabilities?.tools ? (
-        <Alert variant="destructive" className="col-span-2">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Feature Not Available</AlertTitle>
-          <AlertDescription>
-            The connected server does not support tools.
-          </AlertDescription>
-        </Alert>
-      ) : (
-        <>
-          <ListPane
-            items={tools}
-            listItems={listTools}
-            clearItems={() => {
-              clearTools();
-              setSelectedTool(null);
-            }}
-            setSelectedItem={setSelectedTool}
-            renderItem={(tool) => (
-              <>
-                <span className="flex-1">{tool.name}</span>
-                <span className="text-sm text-gray-500 text-right">
-                  {tool.description}
-                </span>
-              </>
-            )}
-            title="Tools"
-            buttonText={nextCursor ? "List More Tools" : "List Tools"}
-            isButtonDisabled={!nextCursor && tools.length > 0}
-          />
+      <ListPane
+        items={tools}
+        listItems={listTools}
+        clearItems={() => {
+          clearTools();
+          setSelectedTool(null);
+        }}
+        setSelectedItem={setSelectedTool}
+        renderItem={(tool) => (
+          <>
+            <span className="flex-1">{tool.name}</span>
+            <span className="text-sm text-gray-500 text-right">
+              {tool.description}
+            </span>
+          </>
+        )}
+        title="Tools"
+        buttonText={nextCursor ? "List More Tools" : "List Tools"}
+        isButtonDisabled={!nextCursor && tools.length > 0}
+      />
 
-          <div className="bg-card rounded-lg shadow">
-            <div className="p-4 border-b border-gray-200">
-              <h3 className="font-semibold">
-                {selectedTool ? selectedTool.name : "Select a tool"}
-              </h3>
-            </div>
-            <div className="p-4">
-              {error ? (
-                <Alert variant="destructive">
-                  <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>Error</AlertTitle>
-                  <AlertDescription>{error}</AlertDescription>
-                </Alert>
-              ) : selectedTool ? (
-                <div className="space-y-4">
-                  <p className="text-sm text-gray-600">
-                    {selectedTool.description}
-                  </p>
-                  {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                    ([key, value]) => (
-                      <div key={key}>
-                        <Label
-                          htmlFor={key}
-                          className="block text-sm font-medium text-gray-700"
-                        >
-                          {key}
-                        </Label>
-                        {
-                          /* @ts-expect-error value type is currently unknown */
-                          value.type === "string" ? (
-                            <Textarea
-                              id={key}
-                              name={key}
-                              // @ts-expect-error value type is currently unknown
-                              placeholder={value.description}
-                              onChange={(e) =>
-                                setParams({
-                                  ...params,
-                                  [key]: e.target.value,
-                                })
-                              }
-                              className="mt-1"
-                            />
-                          ) : (
-                            <Input
-                              // @ts-expect-error value type is currently unknown
-                              type={value.type === "number" ? "number" : "text"}
-                              id={key}
-                              name={key}
-                              // @ts-expect-error value type is currently unknown
-                              placeholder={value.description}
-                              onChange={(e) =>
-                                setParams({
-                                  ...params,
-                                  [key]:
-                                    // @ts-expect-error value type is currently unknown
-                                    value.type === "number"
-                                      ? Number(e.target.value)
-                                      : e.target.value,
-                                })
-                              }
-                              className="mt-1"
-                            />
-                          )
-                        }
-                      </div>
-                    ),
-                  )}
-                  <Button onClick={() => callTool(selectedTool.name, params)}>
-                    <Send className="w-4 h-4 mr-2" />
-                    Run Tool
-                  </Button>
-                  {toolResult && renderToolResult()}
-                </div>
-              ) : (
-                <Alert>
-                  <AlertDescription>
-                    Select a tool from the list to view its details and run it
-                  </AlertDescription>
-                </Alert>
+      <div className="bg-card rounded-lg shadow">
+        <div className="p-4 border-b border-gray-200">
+          <h3 className="font-semibold">
+            {selectedTool ? selectedTool.name : "Select a tool"}
+          </h3>
+        </div>
+        <div className="p-4">
+          {error ? (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          ) : selectedTool ? (
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                {selectedTool.description}
+              </p>
+              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
+                ([key, value]) => (
+                  <div key={key}>
+                    <Label
+                      htmlFor={key}
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      {key}
+                    </Label>
+                    {
+                      /* @ts-expect-error value type is currently unknown */
+                      value.type === "string" ? (
+                        <Textarea
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]: e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      ) : (
+                        <Input
+                          // @ts-expect-error value type is currently unknown
+                          type={value.type === "number" ? "number" : "text"}
+                          id={key}
+                          name={key}
+                          // @ts-expect-error value type is currently unknown
+                          placeholder={value.description}
+                          onChange={(e) =>
+                            setParams({
+                              ...params,
+                              [key]:
+                                // @ts-expect-error value type is currently unknown
+                                value.type === "number"
+                                  ? Number(e.target.value)
+                                  : e.target.value,
+                            })
+                          }
+                          className="mt-1"
+                        />
+                      )
+                    }
+                  </div>
+                ),
               )}
+              <Button onClick={() => callTool(selectedTool.name, params)}>
+                <Send className="w-4 h-4 mr-2" />
+                Run Tool
+              </Button>
+              {toolResult && renderToolResult()}
             </div>
-          </div>
-        </>
-      )}
+          ) : (
+            <Alert>
+              <AlertDescription>
+                Select a tool from the list to view its details and run it
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+      </div>
     </TabsContent>
   );
 };