update for icons

Author: jesselumarie

client/src/App.tsx

@@ -198,6 +198,7 @@ const App = () => {
   const {
     connectionStatus,
     serverCapabilities,
+    serverImplementation,
     mcpClient,
     requestHistory,
     makeRequest,
@@ -818,6 +819,7 @@ const App = () => {
           logLevel={logLevel}
           sendLogLevelRequest={sendLogLevelRequest}
           loggingSupported={!!serverCapabilities?.logging || false}
+          serverImplementation={serverImplementation}
         />
         <div
           onMouseDown={handleSidebarDragStart}

client/src/__tests__/App.routing.test.tsx

@@ -48,6 +48,7 @@ const disconnectedConnectionState = {
   completionsSupported: false,
   connect: jest.fn(),
   disconnect: jest.fn(),
+  serverImplementation: null,
 };
 
 // Connected state for tests that need an active connection

client/src/components/IconDisplay.tsx

@@ -2,7 +2,7 @@
 interface Icon {
   src: string;
   mimeType?: string;
-  sizes?: string;
+  sizes?: string[];
 }
 
 // Helper type for objects that may have icons

client/src/components/PromptsTab.tsx

@@ -14,6 +14,7 @@ import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import { useCompletionState } from "@/lib/hooks/useCompletionState";
 import JsonView from "./JsonView";
+import IconDisplay from "./IconDisplay";
 
 export type Prompt = {
   name: string;
@@ -23,6 +24,7 @@ export type Prompt = {
     description?: string;
     required?: boolean;
   }[];
+  icons?: { src: string; mimeType?: string; sizes?: string[] }[];
 };
 
 const PromptsTab = ({
@@ -101,6 +103,7 @@ const PromptsTab = ({
           }}
           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}

client/src/components/Sidebar.tsx

@@ -14,6 +14,7 @@ import {
   RefreshCwOff,
   Copy,
   CheckCheck,
+  Server,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -38,6 +39,7 @@ import {
   TooltipContent,
 } from "@/components/ui/tooltip";
 import { useToast } from "../lib/hooks/useToast";
+import IconDisplay, { WithIcons } from "./IconDisplay";
 
 interface SidebarProps {
   connectionStatus: ConnectionStatus;
@@ -66,6 +68,9 @@ interface SidebarProps {
   loggingSupported: boolean;
   config: InspectorConfig;
   setConfig: (config: InspectorConfig) => void;
+  serverImplementation?:
+    | (WithIcons & { name?: string; version?: string; websiteUrl?: string })
+    | null;
 }
 
 const Sidebar = ({
@@ -95,6 +100,7 @@ const Sidebar = ({
   loggingSupported,
   config,
   setConfig,
+  serverImplementation,
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
@@ -729,6 +735,45 @@ const Sidebar = ({
               </span>
             </div>
 
+            {connectionStatus === "connected" && serverImplementation && (
+              <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg mb-4">
+                <div className="flex items-center gap-2 mb-1">
+                  {(serverImplementation as WithIcons).icons &&
+                  (serverImplementation as WithIcons).icons!.length > 0 ? (
+                    <IconDisplay
+                      icons={(serverImplementation as WithIcons).icons}
+                      size="sm"
+                    />
+                  ) : (
+                    <Server className="w-4 h-4 text-gray-500" />
+                  )}
+                  {(serverImplementation as { websiteUrl?: string })
+                    .websiteUrl ? (
+                    <a
+                      href={
+                        (serverImplementation as { websiteUrl?: string })
+                          .websiteUrl
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline transition-colors"
+                    >
+                      {serverImplementation.name || "MCP Server"}
+                    </a>
+                  ) : (
+                    <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                      {serverImplementation.name || "MCP Server"}
+                    </span>
+                  )}
+                </div>
+                {serverImplementation.version && (
+                  <div className="text-xs text-gray-500 dark:text-gray-400">
+                    Version: {serverImplementation.version}
+                  </div>
+                )}
+              </div>
+            )}
+
             {loggingSupported && connectionStatus === "connected" && (
               <div className="space-y-2">
                 <label

client/src/components/ToolsTab.tsx

@@ -22,6 +22,7 @@ import { useEffect, useState } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
+import IconDisplay, { WithIcons } from "./IconDisplay";
 
 // Type guard to safely detect the optional _meta field without using `any`
 const hasMeta = (tool: Tool): tool is Tool & { _meta: unknown } =>
@@ -83,6 +84,7 @@ 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">
                 {tool.description}
@@ -99,6 +101,17 @@ const ToolsTab = ({
             <h3 className="font-semibold">
               {selectedTool ? selectedTool.name : "Select a tool"}
             </h3>
+            <div className="flex items-center gap-2">
+              {selectedTool && (
+                <IconDisplay
+                  icons={(selectedTool as WithIcons).icons}
+                  size="md"
+                />
+              )}
+              <h3 className="font-semibold">
+                {selectedTool ? selectedTool.name : "Select a tool"}
+              </h3>
+            </div>
           </div>
           <div className="p-4">
             {selectedTool ? (

client/src/lib/hooks/useConnection.ts

@@ -30,6 +30,7 @@ import {
   Progress,
   LoggingLevel,
   ElicitRequestSchema,
+  Implementation,
 } from "@modelcontextprotocol/sdk/types.js";
 import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
 import { useEffect, useState } from "react";
@@ -78,6 +79,7 @@ interface UseConnectionOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getRoots?: () => any[];
   defaultLoggingLevel?: LoggingLevel;
+  serverImplementation?: Implementation;
 }
 
 export function useConnection({
@@ -110,6 +112,8 @@ export function useConnection({
     { request: string; response?: string }[]
   >([]);
   const [completionsSupported, setCompletionsSupported] = useState(false);
+  const [serverImplementation, setServerImplementation] =
+    useState<Implementation | null>(null);
 
   useEffect(() => {
     if (!oauthClientId) {
@@ -542,6 +546,8 @@ export function useConnection({
         setClientTransport(transport);
 
         capabilities = client.getServerCapabilities();
+        const serverInfo = client.getServerVersion();
+        setServerImplementation(serverInfo || null);
         const initializeRequest = {
           method: "initialize",
         };
@@ -651,11 +657,13 @@ export function useConnection({
     setConnectionStatus("disconnected");
     setCompletionsSupported(false);
     setServerCapabilities(null);
+    setServerImplementation(null);
   };
 
   return {
     connectionStatus,
     serverCapabilities,
+    serverImplementation,
     mcpClient,
     requestHistory,
     makeRequest,