fix: fix dark mode

Author: tonxxd

packages/inspector/src/client/components/CommandPalette.tsx

@@ -97,24 +97,37 @@ export function CommandPalette({
       name: tool.name,
       description: tool.description,
       type: 'tool' as const,
-      category: 'Tools',
-      metadata: tool.inputSchema,
+      category: (tool as any)._serverName ? `Tools - ${(tool as any)._serverName}` : 'Tools',
+      metadata: {
+        inputSchema: tool.inputSchema,
+        serverId: (tool as any)._serverId,
+        serverName: (tool as any)._serverName,
+      },
     })),
     ...prompts.map(prompt => ({
       id: `prompt-${prompt.name}`,
       name: prompt.name,
       description: prompt.description,
       type: 'prompt' as const,
-      category: 'Prompts',
-      metadata: prompt.arguments,
+      category: (prompt as any)._serverName ? `Prompts - ${(prompt as any)._serverName}` : 'Prompts',
+      metadata: {
+        arguments: prompt.arguments,
+        serverId: (prompt as any)._serverId,
+        serverName: (prompt as any)._serverName,
+      },
     })),
     ...resources.map(resource => ({
       id: `resource-${resource.uri}`,
       name: resource.name,
       description: resource.description,
       type: 'resource' as const,
-      category: 'Resources',
-      metadata: { uri: resource.uri, mimeType: resource.mimeType },
+      category: (resource as any)._serverName ? `Resources - ${(resource as any)._serverName}` : 'Resources',
+      metadata: {
+        uri: resource.uri,
+        mimeType: resource.mimeType,
+        serverId: (resource as any)._serverId,
+        serverName: (resource as any)._serverName,
+      },
     })),
   ]
 
@@ -131,6 +144,10 @@ export function CommandPalette({
       }
     }
     else {
+      // If the item belongs to a specific server, switch to that server first
+      if (item.metadata?.serverId) {
+        onServerSelect(item.metadata.serverId)
+      }
       onNavigate(item.type as 'tools' | 'prompts' | 'resources', item.name)
       onOpenChange(false)
     }
@@ -161,12 +178,12 @@ export function CommandPalette({
   }
 
   const getMetadataPreview = (item: CommandItem) => {
-    if (item.type === 'tool' && item.metadata?.properties) {
-      const props = Object.keys(item.metadata.properties)
+    if (item.type === 'tool' && item.metadata?.inputSchema?.properties) {
+      const props = Object.keys(item.metadata.inputSchema.properties)
       return props.length > 0 ? `${props.length} parameter${props.length > 1 ? 's' : ''}` : 'No parameters'
     }
-    if (item.type === 'prompt' && item.metadata) {
-      const args = Object.keys(item.metadata)
+    if (item.type === 'prompt' && item.metadata?.arguments) {
+      const args = Object.keys(item.metadata.arguments)
       return args.length > 0 ? `${args.length} argument${args.length > 1 ? 's' : ''}` : 'No arguments'
     }
     if (item.type === 'resource' && item.metadata?.mimeType) {

packages/inspector/src/client/components/Layout.tsx

@@ -121,6 +121,33 @@ export function Layout({ children }: LayoutProps) {
 
   const selectedServer = connections.find(c => c.id === selectedServerId)
 
+  // Aggregate tools, prompts, and resources from all connected servers
+  // When a server is selected, use only that server's items
+  // When no server is selected, aggregate from all ready servers and add server metadata
+  const aggregatedTools = selectedServer
+    ? selectedServer.tools.map(tool => ({ ...tool, _serverId: selectedServer.id }))
+    : connections.flatMap(conn =>
+        conn.state === 'ready'
+          ? conn.tools.map(tool => ({ ...tool, _serverId: conn.id, _serverName: conn.name }))
+          : [],
+      )
+
+  const aggregatedPrompts = selectedServer
+    ? selectedServer.prompts.map(prompt => ({ ...prompt, _serverId: selectedServer.id }))
+    : connections.flatMap(conn =>
+        conn.state === 'ready'
+          ? conn.prompts.map(prompt => ({ ...prompt, _serverId: conn.id, _serverName: conn.name }))
+          : [],
+      )
+
+  const aggregatedResources = selectedServer
+    ? selectedServer.resources.map(resource => ({ ...resource, _serverId: selectedServer.id }))
+    : connections.flatMap(conn =>
+        conn.state === 'ready'
+          ? conn.resources.map(resource => ({ ...resource, _serverId: conn.id, _serverName: conn.name }))
+          : [],
+      )
+
   // Load config and auto-connect if URL is provided
   useEffect(() => {
     if (configLoaded)
@@ -162,10 +189,15 @@ export function Layout({ children }: LayoutProps) {
 
   // If no server is selected and we're on a server route, navigate to root
   useEffect(() => {
-    if (!selectedServer && location.pathname.startsWith('/servers/')) {
+    const serverIdFromRoute = location.pathname.split('/servers/')[1]
+    const decodedServerId = serverIdFromRoute ? decodeURIComponent(serverIdFromRoute) : null
+
+    // Only navigate away if we've already set selectedServerId from the route
+    // and the server still wasn't found in connections
+    if (!selectedServer && location.pathname.startsWith('/servers/') && selectedServerId === decodedServerId) {
       navigate('/')
     }
-  }, [selectedServer, location.pathname, navigate])
+  }, [selectedServer, location.pathname, navigate, selectedServerId])
 
   // Handle keyboard shortcuts
   useEffect(() => {
@@ -374,9 +406,9 @@ export function Layout({ children }: LayoutProps) {
         <CommandPalette
           isOpen={isCommandPaletteOpen}
           onOpenChange={setIsCommandPaletteOpen}
-          tools={selectedServer?.tools || []}
-          prompts={selectedServer?.prompts || []}
-          resources={selectedServer?.resources || []}
+          tools={aggregatedTools}
+          prompts={aggregatedPrompts}
+          resources={aggregatedResources}
           connections={connections}
           onNavigate={handleCommandPaletteNavigate}
           onServerSelect={handleServerSelect}

packages/inspector/src/client/components/PromptsTab.tsx

@@ -2,7 +2,7 @@ import type { Prompt } from '@modelcontextprotocol/sdk/types.js'
 import { Check, Copy, MessageSquare, Play, Search } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { usePrismTheme } from '@/client/hooks/usePrismTheme'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -34,6 +34,7 @@ interface PromptResult {
 
 export function PromptsTab({ prompts, callPrompt, isConnected }: PromptsTabProps) {
   const [selectedPrompt, setSelectedPrompt] = useState<Prompt | null>(null)
+  const { prismStyle } = usePrismTheme()
   const [promptArgs, setPromptArgs] = useState<Record<string, unknown>>({})
   const [results, setResults] = useState<PromptResult[]>([])
   const [isExecuting, setIsExecuting] = useState(false)
@@ -82,7 +83,7 @@ export function PromptsTab({ prompts, callPrompt, isConnected }: PromptsTabProps
   // Handle auto-selection from command palette
   useEffect(() => {
     const selectedPromptName = sessionStorage.getItem('selected-prompts')
-    if (selectedPromptName) {
+    if (selectedPromptName && prompts.length > 0) {
       const prompt = prompts.find(p => p.name === selectedPromptName)
       if (prompt) {
         handlePromptSelect(prompt)
@@ -378,7 +379,7 @@ export function PromptsTab({ prompts, callPrompt, isConnected }: PromptsTabProps
                         ) : (
                           <SyntaxHighlighter
                             language="json"
-                            style={tomorrow}
+                            style={prismStyle}
                             className="text-xs rounded"
                             customStyle={{
                               margin: 0,

packages/inspector/src/client/components/ResourcesTab.tsx

@@ -2,7 +2,7 @@ import type { Resource } from '@modelcontextprotocol/sdk/types.js'
 import { Copy, Download, FileText, Search } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { usePrismTheme } from '@/client/hooks/usePrismTheme'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -31,6 +31,7 @@ interface ResourceResult {
 }
 
 export function ResourcesTab({ resources, readResource, isConnected }: ResourcesTabProps) {
+  const { prismStyle } = usePrismTheme()
   const [selectedResource, setSelectedResource] = useState<Resource | null>(null)
   const [results, setResults] = useState<ResourceResult[]>([])
   const [isLoading, setIsLoading] = useState(false)
@@ -53,7 +54,7 @@ export function ResourcesTab({ resources, readResource, isConnected }: Resources
   // Handle auto-selection from command palette
   useEffect(() => {
     const selectedResourceName = sessionStorage.getItem('selected-resources')
-    if (selectedResourceName) {
+    if (selectedResourceName && resources.length > 0) {
       const resource = resources.find(r => r.name === selectedResourceName)
       if (resource) {
         handleResourceSelect(resource)
@@ -358,7 +359,7 @@ export function ResourcesTab({ resources, readResource, isConnected }: Resources
                                     <div className="max-h-64 overflow-y-auto">
                                       <SyntaxHighlighter
                                         language="json"
-                                        style={tomorrow}
+                                        style={prismStyle}
                                         className="text-xs rounded"
                                         customStyle={{
                                           margin: 0,