From db1f5895e436af37cc818f37d03d190d52d44718 Mon Sep 17 00:00:00 2001 From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com> Date: Wed, 4 Feb 2026 12:43:52 +0000 Subject: [PATCH] feat: display session ID and protocol version in sidebar This commit makes the session ID and protocol version visible in the Inspector UI by: 1. Exporting mcpSessionId and mcpProtocolVersion from useConnection hook 2. Passing these values to the Sidebar component 3. Displaying them in a new section below the server information The session ID is shown with a copy-to-clipboard button for easy access. This addresses issue #1033 where users requested visibility of session IDs. Co-authored-by: Ola Hungerford --- client/src/App.tsx | 4 + client/src/components/Sidebar.tsx | 60 +++++++++++++++ client/src/lib/hooks/useConnection.ts | 2 + package-lock.json | 107 ++++++++++++++++++-------- 4 files changed, 139 insertions(+), 34 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 39fc2812a..e315bafae 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -353,6 +353,8 @@ const App = () => { completionsSupported, connect: connectMcpServer, disconnect: disconnectMcpServer, + mcpSessionId, + mcpProtocolVersion, } = useConnection({ transportType, command, @@ -1251,6 +1253,8 @@ const App = () => { connectionType={connectionType} setConnectionType={setConnectionType} serverImplementation={serverImplementation} + mcpSessionId={mcpSessionId} + mcpProtocolVersion={mcpProtocolVersion} />
{ const [theme, setTheme] = useTheme(); const [showEnvVars, setShowEnvVars] = useState(false); @@ -117,6 +121,7 @@ const Sidebar = ({ const [showClientSecret, setShowClientSecret] = useState(false); const [copiedServerEntry, setCopiedServerEntry] = useState(false); const [copiedServerFile, setCopiedServerFile] = useState(false); + const [copiedSessionId, setCopiedSessionId] = useState(false); const { toast } = useToast(); const connectionTypeTip = @@ -234,6 +239,26 @@ const Sidebar = ({ } }, [generateMCPServerFile, toast, reportError]); + const handleCopySessionId = useCallback(() => { + if (!mcpSessionId) return; + + navigator.clipboard + .writeText(mcpSessionId) + .then(() => { + setCopiedSessionId(true); + toast({ + title: "Session ID copied", + description: "Session ID has been copied to clipboard.", + }); + setTimeout(() => { + setCopiedSessionId(false); + }, 2000); + }) + .catch((error) => { + reportError(error); + }); + }, [mcpSessionId, toast, reportError]); + return (
@@ -821,6 +846,41 @@ const Sidebar = ({
)} + {connectionStatus === "connected" && mcpSessionId && ( +
+
+ + Session ID + + + + + + Copy Session ID + +
+
+ {mcpSessionId} +
+ {mcpProtocolVersion && ( +
+ Protocol: {mcpProtocolVersion} +
+ )} +
+ )} + {loggingSupported && connectionStatus === "connected" && (