diff --git a/client/src/components/PingTab.tsx b/client/src/components/PingTab.tsx
index 287356c..6546901 100644
--- a/client/src/components/PingTab.tsx
+++ b/client/src/components/PingTab.tsx
@@ -3,14 +3,16 @@ import { Button } from "@/components/ui/button";
 
 const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
   return (
-    <TabsContent value="ping" className="grid grid-cols-2 gap-4">
-      <div className="col-span-2 flex justify-center items-center">
-        <Button
-          onClick={onPingClick}
-          className="font-bold py-6 px-12 rounded-full"
-        >
-          Ping Server
-        </Button>
+    <TabsContent value="ping">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="col-span-2 flex justify-center items-center">
+          <Button
+            onClick={onPingClick}
+            className="font-bold py-6 px-12 rounded-full"
+          >
+            Ping Server
+          </Button>
+        </div>
       </div>
     </TabsContent>
   );
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index 48c847d..80e5fe6 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -84,84 +84,88 @@ const PromptsTab = ({
   };
 
   return (
-    <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
-      <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}
-                </p>
-              )}
-              {selectedPrompt.arguments?.map((arg) => (
-                <div key={arg.name}>
-                  <Label htmlFor={arg.name}>{arg.name}</Label>
-                  <Combobox
-                    id={arg.name}
-                    placeholder={`Enter ${arg.name}`}
-                    value={promptArgs[arg.name] || ""}
-                    onChange={(value) => handleInputChange(arg.name, value)}
-                    onInputChange={(value) =>
-                      handleInputChange(arg.name, value)
-                    }
-                    options={completions[arg.name] || []}
-                  />
-
-                  {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 && (
-                <JsonView data={promptContent} withCopyButton={false} />
-              )}
-            </div>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a prompt from the list to view and use it
-              </AlertDescription>
-            </Alert>
+    <TabsContent value="prompts">
+      <div className="grid grid-cols-2 gap-4">
+        <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}
+                  </p>
+                )}
+                {selectedPrompt.arguments?.map((arg) => (
+                  <div key={arg.name}>
+                    <Label htmlFor={arg.name}>{arg.name}</Label>
+                    <Combobox
+                      id={arg.name}
+                      placeholder={`Enter ${arg.name}`}
+                      value={promptArgs[arg.name] || ""}
+                      onChange={(value) => handleInputChange(arg.name, value)}
+                      onInputChange={(value) =>
+                        handleInputChange(arg.name, value)
+                      }
+                      options={completions[arg.name] || []}
+                    />
+
+                    {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 && (
+                  <JsonView data={promptContent} withCopyButton={false} />
+                )}
+              </div>
+            ) : (
+              <Alert>
+                <AlertDescription>
+                  Select a prompt from the list to view and use it
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
         </div>
       </div>
     </TabsContent>
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 2a10824..23cfbe7 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -111,155 +111,158 @@ const ResourcesTab = ({
   };
 
   return (
-    <TabsContent value="resources" className="grid grid-cols-3 gap-4">
-      <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 && (
-            <div className="flex row-auto gap-1 justify-end w-2/5">
-              {resourceSubscriptionsSupported &&
-                !resourceSubscriptions.has(selectedResource.uri) && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => subscribeToResource(selectedResource.uri)}
-                  >
-                    Subscribe
-                  </Button>
-                )}
-              {resourceSubscriptionsSupported &&
-                resourceSubscriptions.has(selectedResource.uri) && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() =>
-                      unsubscribeFromResource(selectedResource.uri)
-                    }
-                  >
-                    Unsubscribe
-                  </Button>
-                )}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => readResource(selectedResource.uri)}
-              >
-                <RefreshCw className="w-4 h-4 mr-2" />
-                Refresh
-              </Button>
+    <TabsContent value="resources">
+      <div className="grid grid-cols-3 gap-4">
+        <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>
           )}
-        </div>
-        <div className="p-4">
-          {error ? (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          ) : selectedResource ? (
-            <JsonView
-              data={resourceContent}
-              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"
-            />
-          ) : 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}>{key}</Label>
-                      <Combobox
-                        id={key}
-                        placeholder={`Enter ${key}`}
-                        value={templateValues[key] || ""}
-                        onChange={(value) =>
-                          handleTemplateValueChange(key, value)
-                        }
-                        onInputChange={(value) =>
-                          handleTemplateValueChange(key, value)
-                        }
-                        options={completions[key] || []}
-                      />
-                    </div>
-                  );
-                })}
-              <Button
-                onClick={handleReadTemplateResource}
-                disabled={Object.keys(templateValues).length === 0}
-              >
-                Read Resource
-              </Button>
+          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>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a resource or template from the list to view its contents
-              </AlertDescription>
-            </Alert>
           )}
+          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 && (
+              <div className="flex row-auto gap-1 justify-end w-2/5">
+                {resourceSubscriptionsSupported &&
+                  !resourceSubscriptions.has(selectedResource.uri) && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => subscribeToResource(selectedResource.uri)}
+                    >
+                      Subscribe
+                    </Button>
+                  )}
+                {resourceSubscriptionsSupported &&
+                  resourceSubscriptions.has(selectedResource.uri) && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() =>
+                        unsubscribeFromResource(selectedResource.uri)
+                      }
+                    >
+                      Unsubscribe
+                    </Button>
+                  )}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => readResource(selectedResource.uri)}
+                >
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  Refresh
+                </Button>
+              </div>
+            )}
+          </div>
+          <div className="p-4">
+            {error ? (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : selectedResource ? (
+              <JsonView
+                data={resourceContent}
+                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"
+              />
+            ) : 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}>{key}</Label>
+                        <Combobox
+                          id={key}
+                          placeholder={`Enter ${key}`}
+                          value={templateValues[key] || ""}
+                          onChange={(value) =>
+                            handleTemplateValueChange(key, value)
+                          }
+                          onInputChange={(value) =>
+                            handleTemplateValueChange(key, value)
+                          }
+                          options={completions[key] || []}
+                        />
+                      </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>
       </div>
     </TabsContent>
diff --git a/client/src/components/RootsTab.tsx b/client/src/components/RootsTab.tsx
index 33f60d5..308b88b 100644
--- a/client/src/components/RootsTab.tsx
+++ b/client/src/components/RootsTab.tsx
@@ -35,40 +35,42 @@ const RootsTab = ({
   };
 
   return (
-    <TabsContent value="roots" className="space-y-4">
-      <Alert>
-        <AlertDescription>
-          Configure the root directories that the server can access
-        </AlertDescription>
-      </Alert>
+    <TabsContent value="roots">
+      <div className="space-y-4">
+        <Alert>
+          <AlertDescription>
+            Configure the root directories that the server can access
+          </AlertDescription>
+        </Alert>
 
-      {roots.map((root, index) => (
-        <div key={index} className="flex gap-2 items-center">
-          <Input
-            placeholder="file:// URI"
-            value={root.uri}
-            onChange={(e) => updateRoot(index, "uri", e.target.value)}
-            className="flex-1"
-          />
-          <Button
-            variant="destructive"
-            size="sm"
-            onClick={() => removeRoot(index)}
-          >
-            <Minus className="h-4 w-4" />
+        {roots.map((root, index) => (
+          <div key={index} className="flex gap-2 items-center">
+            <Input
+              placeholder="file:// URI"
+              value={root.uri}
+              onChange={(e) => updateRoot(index, "uri", e.target.value)}
+              className="flex-1"
+            />
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={() => removeRoot(index)}
+            >
+              <Minus className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={addRoot}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Root
+          </Button>
+          <Button onClick={handleSave}>
+            <Save className="h-4 w-4 mr-2" />
+            Save Changes
           </Button>
         </div>
-      ))}
-
-      <div className="flex gap-2">
-        <Button variant="outline" onClick={addRoot}>
-          <Plus className="h-4 w-4 mr-2" />
-          Add Root
-        </Button>
-        <Button onClick={handleSave}>
-          <Save className="h-4 w-4 mr-2" />
-          Save Changes
-        </Button>
       </div>
     </TabsContent>
   );
diff --git a/client/src/components/SamplingTab.tsx b/client/src/components/SamplingTab.tsx
index a72ea7d..d7d0212 100644
--- a/client/src/components/SamplingTab.tsx
+++ b/client/src/components/SamplingTab.tsx
@@ -33,33 +33,37 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
   };
 
   return (
-    <TabsContent value="sampling" className="h-96">
-      <Alert>
-        <AlertDescription>
-          When the server requests LLM sampling, requests will appear here for
-          approval.
-        </AlertDescription>
-      </Alert>
-      <div className="mt-4 space-y-4">
-        <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">
-            <JsonView
-              className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 rounded"
-              data={JSON.stringify(request.request)}
-            />
+    <TabsContent value="sampling">
+      <div className="h-96">
+        <Alert>
+          <AlertDescription>
+            When the server requests LLM sampling, requests will appear here for
+            approval.
+          </AlertDescription>
+        </Alert>
+        <div className="mt-4 space-y-4">
+          <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">
+              <JsonView
+                className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 rounded"
+                data={JSON.stringify(request.request)}
+              />
 
-            <div className="flex space-x-2">
-              <Button onClick={() => handleApprove(request.id)}>Approve</Button>
-              <Button variant="outline" onClick={() => onReject(request.id)}>
-                Reject
-              </Button>
+              <div className="flex space-x-2">
+                <Button onClick={() => handleApprove(request.id)}>
+                  Approve
+                </Button>
+                <Button variant="outline" onClick={() => onReject(request.id)}>
+                  Reject
+                </Button>
+              </div>
             </div>
-          </div>
-        ))}
-        {pendingRequests.length === 0 && (
-          <p className="text-gray-500">No pending requests</p>
-        )}
+          ))}
+          {pendingRequests.length === 0 && (
+            <p className="text-gray-500">No pending requests</p>
+          )}
+        </div>
       </div>
     </TabsContent>
   );
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index a9e9bf8..0316c88 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -106,147 +106,149 @@ const ToolsTab = ({
   };
 
   return (
-    <TabsContent value="tools" className="grid grid-cols-2 gap-4">
-      <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}
-      />
+    <TabsContent value="tools">
+      <div className="grid grid-cols-2 gap-4">
+        <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">
-          {selectedTool ? (
-            <div className="space-y-4">
-              <p className="text-sm text-gray-600">
-                {selectedTool.description}
-              </p>
-              {Object.entries(selectedTool.inputSchema.properties ?? []).map(
-                ([key, value]) => {
-                  const prop = value as JsonSchemaType;
-                  return (
-                    <div key={key}>
-                      <Label
-                        htmlFor={key}
-                        className="block text-sm font-medium text-gray-700"
-                      >
-                        {key}
-                      </Label>
-                      {prop.type === "boolean" ? (
-                        <div className="flex items-center space-x-2 mt-2">
-                          <Checkbox
+        <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">
+            {selectedTool ? (
+              <div className="space-y-4">
+                <p className="text-sm text-gray-600">
+                  {selectedTool.description}
+                </p>
+                {Object.entries(selectedTool.inputSchema.properties ?? []).map(
+                  ([key, value]) => {
+                    const prop = value as JsonSchemaType;
+                    return (
+                      <div key={key}>
+                        <Label
+                          htmlFor={key}
+                          className="block text-sm font-medium text-gray-700"
+                        >
+                          {key}
+                        </Label>
+                        {prop.type === "boolean" ? (
+                          <div className="flex items-center space-x-2 mt-2">
+                            <Checkbox
+                              id={key}
+                              name={key}
+                              checked={!!params[key]}
+                              onCheckedChange={(checked: boolean) =>
+                                setParams({
+                                  ...params,
+                                  [key]: checked,
+                                })
+                              }
+                            />
+                            <label
+                              htmlFor={key}
+                              className="text-sm font-medium text-gray-700 dark:text-gray-300"
+                            >
+                              {prop.description || "Toggle this option"}
+                            </label>
+                          </div>
+                        ) : prop.type === "string" ? (
+                          <Textarea
                             id={key}
                             name={key}
-                            checked={!!params[key]}
-                            onCheckedChange={(checked: boolean) =>
+                            placeholder={prop.description}
+                            value={(params[key] as string) ?? ""}
+                            onChange={(e) =>
                               setParams({
                                 ...params,
-                                [key]: checked,
+                                [key]: e.target.value,
                               })
                             }
+                            className="mt-1"
                           />
-                          <label
-                            htmlFor={key}
-                            className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                          >
-                            {prop.description || "Toggle this option"}
-                          </label>
-                        </div>
-                      ) : prop.type === "string" ? (
-                        <Textarea
-                          id={key}
-                          name={key}
-                          placeholder={prop.description}
-                          value={(params[key] as string) ?? ""}
-                          onChange={(e) =>
-                            setParams({
-                              ...params,
-                              [key]: e.target.value,
-                            })
-                          }
-                          className="mt-1"
-                        />
-                      ) : prop.type === "object" || prop.type === "array" ? (
-                        <div className="mt-1">
-                          <DynamicJsonForm
-                            schema={{
-                              type: prop.type,
-                              properties: prop.properties,
-                              description: prop.description,
-                              items: prop.items,
-                            }}
-                            value={
-                              (params[key] as JsonValue) ??
-                              generateDefaultValue(prop)
+                        ) : prop.type === "object" || prop.type === "array" ? (
+                          <div className="mt-1">
+                            <DynamicJsonForm
+                              schema={{
+                                type: prop.type,
+                                properties: prop.properties,
+                                description: prop.description,
+                                items: prop.items,
+                              }}
+                              value={
+                                (params[key] as JsonValue) ??
+                                generateDefaultValue(prop)
+                              }
+                              onChange={(newValue: JsonValue) => {
+                                setParams({
+                                  ...params,
+                                  [key]: newValue,
+                                });
+                              }}
+                            />
+                          </div>
+                        ) : (
+                          <Input
+                            type={
+                              prop.type === "number" || prop.type === "integer"
+                                ? "number"
+                                : "text"
                             }
-                            onChange={(newValue: JsonValue) => {
+                            id={key}
+                            name={key}
+                            placeholder={prop.description}
+                            value={(params[key] as string) ?? ""}
+                            onChange={(e) =>
                               setParams({
                                 ...params,
-                                [key]: newValue,
-                              });
-                            }}
+                                [key]:
+                                  prop.type === "number" ||
+                                  prop.type === "integer"
+                                    ? Number(e.target.value)
+                                    : e.target.value,
+                              })
+                            }
+                            className="mt-1"
                           />
-                        </div>
-                      ) : (
-                        <Input
-                          type={
-                            prop.type === "number" || prop.type === "integer"
-                              ? "number"
-                              : "text"
-                          }
-                          id={key}
-                          name={key}
-                          placeholder={prop.description}
-                          value={(params[key] as string) ?? ""}
-                          onChange={(e) =>
-                            setParams({
-                              ...params,
-                              [key]:
-                                prop.type === "number" ||
-                                prop.type === "integer"
-                                  ? 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>
+                    );
+                  },
+                )}
+                <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>
         </div>
       </div>
     </TabsContent>