feat: enhance InspectorDashboard and ResourcesTab with MCP UI support and improved user interactions

- Added a copy URL button in InspectorDashboard for easy access to connection URLs.
- Introduced preview and JSON toggle functionality in ResourcesTab for better resource visualization.
- Enhanced MCP UI resource handling in ResourcesTab to display content based on user selection.
- Updated McpUIRenderer to support new resource formats and improved UI action handling.
- Refactored input handling in ToolsTab to respect tool input schemas for better data management.

Author: tonxxd

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

@@ -200,7 +200,7 @@ export function InspectorDashboard() {
                     <div
                       key={connection.id}
                       onClick={() => handleServerClick(connection)}
-                      className="rounded-lg bg-zinc-100 dark:bg-white/10 hover:bg-zinc-200 dark:hover:bg-white/15 p-4 transition-colors cursor-pointer"
+                      className="group rounded-lg bg-zinc-100 dark:bg-white/10 hover:bg-zinc-200 dark:hover:bg-white/15 p-4 transition-colors cursor-pointer"
                     >
                       <div className="flex items-center justify-between">
                         <div className="flex-1">
@@ -239,9 +239,29 @@ export function InspectorDashboard() {
                                   )}
                             </div>
                           </div>
-                          <p className="text-xs text-muted-foreground dark:text-zinc-400 font-mono mt-1">
-                            {connection.url}
-                          </p>
+                          <div className="flex items-center gap-2 mt-1">
+                            <p className="text-xs text-muted-foreground dark:text-zinc-400 font-mono">
+                              {connection.url}
+                            </p>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    navigator.clipboard.writeText(connection.url)
+                                    toast.success('URL copied to clipboard')
+                                  }}
+                                  className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-white/10 rounded"
+                                  title="Copy URL"
+                                >
+                                  <Copy className="w-3 h-3 text-muted-foreground" />
+                                </button>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>Copy URL</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </div>
                         </div>
                         <div className="flex items-center gap-1">
                           <Tooltip>

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

@@ -1,5 +1,5 @@
-import { UIResourceRenderer } from '@mcp-ui/client'
 import type { Resource } from '@modelcontextprotocol/sdk/types.js'
+import { UIResourceRenderer } from '@mcp-ui/client'
 
 interface McpUIRendererProps {
   resource: Resource
@@ -11,13 +11,15 @@ interface McpUIRendererProps {
  * Helper function to check if a resource is an MCP UI resource
  */
 export function isMcpUIResource(resource: any): boolean {
-  if (!resource?.mimeType) return false
-  
+  if (!resource?.mimeType)
+    return false
+
   const mimeType = resource.mimeType.toLowerCase()
   return (
-    mimeType === 'text/html' ||
-    mimeType === 'text/uri-list' ||
-    mimeType.startsWith('application/vnd.mcp-ui.remote-dom')
+    mimeType === 'text/html'
+    || mimeType === 'text/html+skybridge'
+    || mimeType === 'text/uri-list'
+    || mimeType.startsWith('application/vnd.mcp-ui.remote-dom')
   )
 }
 
@@ -37,9 +39,9 @@ function convertToMcpUIResource(resource: Resource): any {
  * Component to render MCP UI resources
  */
 export function McpUIRenderer({ resource, onUIAction, className }: McpUIRendererProps) {
-  const handleUIAction = (action: any) => {
+  const handleUIAction = async (action: any) => {
     console.log('MCP UI Action:', action)
-    onUIAction?.(action)
+    return onUIAction?.(action)
   }
 
   const uiResource = convertToMcpUIResource(resource)
@@ -60,4 +62,3 @@ export function McpUIRenderer({ resource, onUIAction, className }: McpUIRenderer
     </div>
   )
 }
-