From 444b1f4a6f30bf45a1c38460e19f89d35f9ccb8d Mon Sep 17 00:00:00 2001
From: aditya <aditya@rapidcircuitry.com>
Date: Fri, 22 May 2026 02:47:52 +0530
Subject: [PATCH] fix(client): prefer .title over .name for prompt, resource,
 and template labels

The MCP spec's `BaseMetadata` gives every named entity an optional
`title` aimed at human-readable UI display; `name` is the programmatic
identifier. The Tools tab already followed the idiomatic `title || name`
pattern, but PromptsTab and ResourcesTab (including resource templates)
rendered the raw `name` even when a title was available.

Mirror the ToolsTab pattern for parity. Also adds the already-spec'red
`title?: string` field to the local `Prompt` type in PromptsTab.tsx
(SDK types for Resource and ResourceTemplate already carry it).

Closes #1226, closes #1227.
---
 client/src/components/PromptsTab.tsx   |  7 +++++--
 client/src/components/ResourcesTab.tsx | 15 ++++++++++-----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/components/PromptsTab.tsx b/client/src/components/PromptsTab.tsx
index fd28a386b..4c08110b0 100644
--- a/client/src/components/PromptsTab.tsx
+++ b/client/src/components/PromptsTab.tsx
@@ -18,6 +18,7 @@ import IconDisplay, { WithIcons } from "./IconDisplay";
 
 export type Prompt = {
   name: string;
+  title?: string;
   description?: string;
   arguments?: {
     name: string;
@@ -120,7 +121,7 @@ const PromptsTab = ({
                 <IconDisplay icons={prompt.icons} size="sm" />
               </div>
               <div className="flex flex-col flex-1 min-w-0">
-                <span className="truncate">{prompt.name}</span>
+                <span className="truncate">{prompt.title || prompt.name}</span>
                 <span className="text-sm text-gray-500 text-left line-clamp-2">
                   {prompt.description}
                 </span>
@@ -143,7 +144,9 @@ const PromptsTab = ({
                 />
               )}
               <h3 className="font-semibold">
-                {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+                {selectedPrompt
+                  ? selectedPrompt.title || selectedPrompt.name
+                  : "Select a prompt"}
               </h3>
             </div>
           </div>
diff --git a/client/src/components/ResourcesTab.tsx b/client/src/components/ResourcesTab.tsx
index 36e5cec8f..e0ef5d0c5 100644
--- a/client/src/components/ResourcesTab.tsx
+++ b/client/src/components/ResourcesTab.tsx
@@ -135,7 +135,7 @@ const ResourcesTab = ({
                 <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}
+                {resource.title || resource.name}
               </span>
               <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
             </div>
@@ -168,7 +168,7 @@ const ResourcesTab = ({
                 <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
               )}
               <span className="flex-1 truncate" title={template.uriTemplate}>
-                {template.name}
+                {template.title || template.name}
               </span>
               <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
             </div>
@@ -193,12 +193,17 @@ const ResourcesTab = ({
               )}
               <h3
                 className="font-semibold truncate"
-                title={selectedResource?.name || selectedTemplate?.name}
+                title={
+                  selectedResource?.title ||
+                  selectedResource?.name ||
+                  selectedTemplate?.title ||
+                  selectedTemplate?.name
+                }
               >
                 {selectedResource
-                  ? selectedResource.name
+                  ? selectedResource.title || selectedResource.name
                   : selectedTemplate
-                    ? selectedTemplate.name
+                    ? selectedTemplate.title || selectedTemplate.name
                     : "Select a resource or template"}
               </h3>
             </div>