mcp: update resources + icon alignment

Author: jesselumarie

client/src/components/PromptsTab.tsx

@@ -9,12 +9,12 @@ import {
   PromptReference,
   ResourceReference,
 } from "@modelcontextprotocol/sdk/types.js";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, ChevronRight } from "lucide-react";
 import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import { useCompletionState } from "@/lib/hooks/useCompletionState";
 import JsonView from "./JsonView";
-import IconDisplay from "./IconDisplay";
+import IconDisplay, { WithIcons } from "./IconDisplay";
 
 export type Prompt = {
   name: string;
@@ -110,12 +110,17 @@ const PromptsTab = ({
             setPromptArgs({});
           }}
           renderItem={(prompt) => (
-            <div className="flex flex-col items-start">
-              <IconDisplay icons={prompt.icons} size="sm" />
-              <span className="flex-1">{prompt.name}</span>
-              <span className="text-sm text-gray-500 text-left">
-                {prompt.description}
-              </span>
+            <div className="flex items-start w-full gap-2">
+              <div className="flex-shrink-0 mt-1">
+                <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="text-sm text-gray-500 text-left line-clamp-2">
+                  {prompt.description}
+                </span>
+              </div>
+              <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400 mt-1" />
             </div>
           )}
           title="Prompts"
@@ -125,9 +130,17 @@ const PromptsTab = ({
 
         <div className="bg-card border border-border rounded-lg shadow">
           <div className="p-4 border-b border-gray-200 dark:border-border">
-            <h3 className="font-semibold">
-              {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
-            </h3>
+            <div className="flex items-center gap-2">
+              {selectedPrompt && (
+                <IconDisplay
+                  icons={(selectedPrompt as WithIcons).icons}
+                  size="md"
+                />
+              )}
+              <h3 className="font-semibold">
+                {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
+              </h3>
+            </div>
           </div>
           <div className="p-4">
             {error ? (

client/src/components/ResourcesTab.tsx

@@ -17,6 +17,7 @@ import { useEffect, useState } from "react";
 import { useCompletionState } from "@/lib/hooks/useCompletionState";
 import JsonView from "./JsonView";
 import { UriTemplate } from "@modelcontextprotocol/sdk/shared/uriTemplate.js";
+import IconDisplay, { WithIcons } from "./IconDisplay";
 
 const ResourcesTab = ({
   resources,
@@ -129,7 +130,10 @@ const ResourcesTab = ({
           }}
           renderItem={(resource) => (
             <div className="flex items-center w-full">
-              <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+              <IconDisplay icons={(resource as WithIcons).icons} size="sm" />
+              {!(resource as WithIcons).icons && (
+                <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>
@@ -159,7 +163,10 @@ const ResourcesTab = ({
           }}
           renderItem={(template) => (
             <div className="flex items-center w-full">
-              <FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
+              <IconDisplay icons={(template as WithIcons).icons} size="sm" />
+              {!(template as WithIcons).icons && (
+                <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>
@@ -175,16 +182,26 @@ const ResourcesTab = ({
 
         <div className="bg-card border border-border rounded-lg shadow">
           <div className="p-4 border-b border-gray-200 dark:border-border 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>
+            <div className="flex items-center gap-2 truncate">
+              {(selectedResource || selectedTemplate) && (
+                <IconDisplay
+                  icons={
+                    ((selectedResource || selectedTemplate) as WithIcons).icons
+                  }
+                  size="md"
+                />
+              )}
+              <h3
+                className="font-semibold truncate"
+                title={selectedResource?.name || selectedTemplate?.name}
+              >
+                {selectedResource
+                  ? selectedResource.name
+                  : selectedTemplate
+                    ? selectedTemplate.name
+                    : "Select a resource or template"}
+              </h3>
+            </div>
             {selectedResource && (
               <div className="flex row-auto gap-1 justify-end w-2/5">
                 {resourceSubscriptionsSupported &&

client/src/components/ToolsTab.tsx

@@ -30,6 +30,7 @@ import {
   Send,
   ChevronDown,
   ChevronUp,
+  ChevronRight,
   AlertCircle,
   Copy,
   CheckCheck,
@@ -159,12 +160,17 @@ const ToolsTab = ({
           }}
           setSelectedItem={setSelectedTool}
           renderItem={(tool) => (
-            <div className="flex flex-col items-start">
-              <IconDisplay icons={(tool as WithIcons).icons} size="sm" />
-              <span className="flex-1">{tool.name}</span>
-              <span className="text-sm text-gray-500 text-left line-clamp-3">
-                {tool.description}
-              </span>
+            <div className="flex items-start w-full gap-2">
+              <div className="flex-shrink-0 mt-1">
+                <IconDisplay icons={(tool as WithIcons).icons} size="sm" />
+              </div>
+              <div className="flex flex-col flex-1 min-w-0">
+                <span className="truncate">{tool.name}</span>
+                <span className="text-sm text-gray-500 text-left line-clamp-2">
+                  {tool.description}
+                </span>
+              </div>
+              <ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400 mt-1" />
             </div>
           )}
           title="Tools"
@@ -174,9 +180,6 @@ const ToolsTab = ({
 
         <div className="bg-card border border-border rounded-lg shadow">
           <div className="p-4 border-b border-gray-200 dark:border-border">
-            <h3 className="font-semibold">
-              {selectedTool ? selectedTool.name : "Select a tool"}
-            </h3>
             <div className="flex items-center gap-2">
               {selectedTool && (
                 <IconDisplay