diff --git a/client/src/App.tsx b/client/src/App.tsx index 5937d7385..c0d8a1267 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -52,7 +52,7 @@ import { import { z } from "zod"; import "./App.css"; import AuthDebugger from "./components/AuthDebugger"; -import ConsoleTab from "./components/ConsoleTab"; +// import ConsoleTab from "./components/ConsoleTab"; import HistoryAndNotifications from "./components/HistoryAndNotifications"; import PingTab from "./components/PingTab"; import PromptsTab, { Prompt } from "./components/PromptsTab"; @@ -61,6 +61,7 @@ import RootsTab from "./components/RootsTab"; import SamplingTab, { PendingRequest } from "./components/SamplingTab"; import Sidebar from "./components/Sidebar"; import ToolsTab from "./components/ToolsTab"; +import OverviewTab from "./components/OverviewTab"; import { InspectorConfig } from "./lib/configurationTypes"; import { getMCPProxyAddress, @@ -228,7 +229,7 @@ const App = () => { const [activeTab, setActiveTab] = useState(() => { const hash = window.location.hash.slice(1); - const initialTab = hash || "resources"; + const initialTab = hash || "overview"; return initialTab; }); @@ -311,6 +312,7 @@ const App = () => { const hash = window.location.hash.slice(1); const validTabs = [ + "overview", ...(serverCapabilities?.resources ? ["resources"] : []), ...(serverCapabilities?.prompts ? ["prompts"] : []), ...(serverCapabilities?.tools ? ["tools"] : []), @@ -324,14 +326,7 @@ const App = () => { const isValidTab = validTabs.includes(hash); if (!isValidTab) { - const defaultTab = serverCapabilities?.resources - ? "resources" - : serverCapabilities?.prompts - ? "prompts" - : serverCapabilities?.tools - ? "tools" - : "ping"; - + const defaultTab = "overview"; setActiveTab(defaultTab); window.location.hash = defaultTab; } @@ -551,13 +546,7 @@ const App = () => { useEffect(() => { if (mcpClient && !window.location.hash) { - const defaultTab = serverCapabilities?.resources - ? "resources" - : serverCapabilities?.prompts - ? "prompts" - : serverCapabilities?.tools - ? "tools" - : "ping"; + const defaultTab = "overview"; window.location.hash = defaultTab; } else if (!mcpClient && window.location.hash) { // Clear hash when disconnected - completely remove the fragment @@ -949,6 +938,7 @@ const App = () => { }} > + Overview { -
- {!serverCapabilities?.resources && - !serverCapabilities?.prompts && - !serverCapabilities?.tools ? ( - <> -
-

- The connected server does not support any MCP - capabilities -

-
- { - void sendMCPRequest( - { - method: "ping" as const, - }, - EmptyResultSchema, - ); - }} - /> - - ) : ( - <> + + + {!serverCapabilities?.resources && + !serverCapabilities?.prompts && + !serverCapabilities?.tools ? ( + +
+

+ The connected server does not support any MCP capabilities +

+
+ { + void sendMCPRequest( + { + method: "ping" as const, + }, + EmptyResultSchema, + ); + }} + /> +
+ ) : ( + <> + { nextTemplateCursor={nextResourceTemplateCursor} error={errors.resources} /> + + { @@ -1099,6 +1098,8 @@ const App = () => { nextCursor={nextPromptCursor} error={errors.prompts} /> + + { @@ -1130,7 +1131,8 @@ const App = () => { readResource(uri); }} /> - + + { void sendMCPRequest( @@ -1141,24 +1143,30 @@ const App = () => { ); }} /> + + + + + + - - - )} -
+ + + + )} ) : isAuthDebuggerVisible ? ( { + return ( + + + + Server Overview + + Server capabilities and configuration information + + + + {/* Server Capabilities Grid */} +
+
+ + + Resources:{" "} + {serverCapabilities?.resources ? "Supported" : "Not supported"} + +
+
+ + + Prompts:{" "} + {serverCapabilities?.prompts ? "Supported" : "Not supported"} + +
+
+ + + Tools:{" "} + {serverCapabilities?.tools ? "Supported" : "Not supported"} + +
+
+ + {/* Server Configuration Section */} +
+

Server Configuration

+
+
Transport: {transportType}
+ {transportType === "stdio" && ( + <> +
Command: {command}
+ {args &&
Arguments: {args}
} + + )} + {(transportType === "streamable-http" || + transportType === "sse") &&
URL: {sseUrl}
} +
+
+
+
+
+ ); +}; + +export default OverviewTab; diff --git a/client/src/components/ui/card.tsx b/client/src/components/ui/card.tsx new file mode 100644 index 000000000..dc3b01de1 --- /dev/null +++ b/client/src/components/ui/card.tsx @@ -0,0 +1,86 @@ +import * as React from "react"; + +import { cn } from "@/lib/utils"; + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +Card.displayName = "Card"; + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardHeader.displayName = "CardHeader"; + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardTitle.displayName = "CardTitle"; + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardDescription.displayName = "CardDescription"; + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardContent.displayName = "CardContent"; + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardFooter.displayName = "CardFooter"; + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent, +};