From e96b3be15941c36d51fcb5f1c88b430a1eb5fefb Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sat, 7 Dec 2024 06:15:21 +0000
Subject: [PATCH] feat: implement capability negotiation for UI tabs

- Add CapabilityContext to manage server capabilities
- Disable tabs when server doesn't support feature
- Show error message in tab content when capability missing
- Implements #85
---
 client/src/App.tsx                     | 287 +++++++++++++------------
 client/src/components/PromptsTab.tsx   | 164 +++++++-------
 client/src/components/ResourcesTab.tsx | 267 ++++++++++++-----------
 client/src/components/ToolsTab.tsx     | 220 ++++++++++---------
 client/src/lib/contexts.ts             |  12 ++
 5 files changed, 509 insertions(+), 441 deletions(-)
 create mode 100644 client/src/lib/contexts.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2c84377..2f36450 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -55,6 +55,8 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab";
 import Sidebar from "./components/Sidebar";
 import ToolsTab from "./components/ToolsTab";
 
+import { CapabilityContext, ServerCapabilities } from "@/lib/contexts";
+
 const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
 
 const params = new URLSearchParams(window.location.search);
@@ -66,6 +68,7 @@ const App = () => {
   const [connectionStatus, setConnectionStatus] = useState<
     "disconnected" | "connected" | "error"
   >("disconnected");
+  const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null);
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
     ResourceTemplate[]
@@ -217,6 +220,13 @@ const App = () => {
     rootsRef.current = roots;
   }, [roots]);
 
+  useEffect(() => {
+    if (mcpClient) {
+      const capabilities = mcpClient.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+    }
+  }, [mcpClient]);
+
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,
@@ -444,6 +454,9 @@ const App = () => {
 
       await client.connect(clientTransport);
 
+      const capabilities = client.getServerCapabilities();
+      setServerCapabilities(capabilities ?? null);
+
       client.setRequestHandler(CreateMessageRequestSchema, (request) => {
         return new Promise<CreateMessageResult>((resolve, reject) => {
           setPendingSampleRequests((prev) => [
@@ -485,143 +498,145 @@ const App = () => {
       <div className="flex-1 flex flex-col overflow-hidden">
         <div className="flex-1 overflow-auto">
           {mcpClient ? (
-            <Tabs defaultValue="resources" className="w-full p-4">
-              <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources">
-                  <Files className="w-4 h-4 mr-2" />
-                  Resources
-                </TabsTrigger>
-                <TabsTrigger value="prompts">
-                  <MessageSquare className="w-4 h-4 mr-2" />
-                  Prompts
-                </TabsTrigger>
-                <TabsTrigger value="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>
+            <CapabilityContext.Provider value={serverCapabilities}>
+              <Tabs defaultValue="resources" className="w-full p-4">
+                <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">
-                <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);
-                  }}
-                  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);
-                  }}
-                  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="w-full">
+                  <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);
+                    }}
+                    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);
+                    }}
+                    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>
+            </CapabilityContext.Provider>
           ) : (
             <div className="flex items-center justify-center h-full">
               <p className="text-lg text-gray-500">
diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index df8b8a5..5882e7e 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -6,8 +6,9 @@ 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 } from "react";
+import { useState, useContext } from "react";
 import ListPane from "./ListPane";
+import { CapabilityContext } from "@/lib/contexts";
 
 export type Prompt = {
   name: string;
@@ -40,6 +41,7 @@ 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) => {
@@ -54,86 +56,98 @@ 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}
-      />
+      {!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}
+          />
 
-      <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>
-                      )}
+          <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>
+                      )}
+                    </div>
+                  ))}
+                  <Button onClick={handleGetPrompt} className="w-full">
+                    Get Prompt
+                  </Button>
+                  {promptContent && (
+                    <Textarea
+                      value={promptContent}
+                      readOnly
+                      className="h-64 font-mono"
+                    />
+                  )}
                 </div>
-              ))}
-              <Button onClick={handleGetPrompt} className="w-full">
-                Get Prompt
-              </Button>
-              {promptContent && (
-                <Textarea
-                  value={promptContent}
-                  readOnly
-                  className="h-64 font-mono"
-                />
+              ) : (
+                <Alert>
+                  <AlertDescription>
+                    Select a prompt from the list to view and use it
+                  </AlertDescription>
+                </Alert>
               )}
             </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 e948881..69e288c 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -10,7 +10,8 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, ChevronRight, FileText, RefreshCw } from "lucide-react";
 import ListPane from "./ListPane";
-import { useState } from "react";
+import { useState, useContext } from "react";
+import { CapabilityContext } from "@/lib/contexts";
 
 const ResourcesTab = ({
   resources,
@@ -41,6 +42,7 @@ 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>>(
@@ -62,142 +64,153 @@ 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">
-      <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}
-      />
+      {!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}
-      />
+          <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}
+          <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}
               >
-                Read Resource
-              </Button>
+                {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>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a resource or template from the list to view its contents
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-      </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 55dff83..9fa4b7f 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -10,8 +10,9 @@ import {
   CallToolResultSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { AlertCircle, Send } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useContext } from "react";
 import ListPane from "./ListPane";
+import { CapabilityContext } from "@/lib/contexts";
 
 import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
 
@@ -36,6 +37,7 @@ const ToolsTab = ({
   nextCursor: ListToolsResult["nextCursor"];
   error: string | null;
 }) => {
+  const capabilities = useContext(CapabilityContext);
   const [params, setParams] = useState<Record<string, unknown>>({});
   useEffect(() => {
     setParams({});
@@ -110,110 +112,122 @@ 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}
-      />
+      {!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}
+          />
 
-      <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 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>
-          ) : (
-            <Alert>
-              <AlertDescription>
-                Select a tool from the list to view its details and run it
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-      </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>
+          </div>
+        </>
+      )}
     </TabsContent>
   );
 };
diff --git a/client/src/lib/contexts.ts b/client/src/lib/contexts.ts
new file mode 100644
index 0000000..c953dd1
--- /dev/null
+++ b/client/src/lib/contexts.ts
@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+import { ServerCapabilitiesSchema } from "@modelcontextprotocol/sdk/types.js";
+import type { z } from "zod";
+
+export type ServerCapabilities = z.infer<typeof ServerCapabilitiesSchema>;
+
+export const CapabilityContext = createContext<ServerCapabilities | null>(null);
+
+export function useServerCapability(capability: keyof ServerCapabilities): boolean {
+  const capabilities = useContext(CapabilityContext);
+  return !!capabilities?.[capability];
+}