From bff09e04095b4b4ca9dc59eff79b617e99faf682 Mon Sep 17 00:00:00 2001 From: Marc Abramowitz Date: Tue, 27 May 2025 17:28:04 -0700 Subject: [PATCH 1/4] Resizable left sidebar Make left sidebar resizable so long URLs can be viewed in their entirety. Fixes https://github.com/modelcontextprotocol/inspector/issues/457 Vibe-coded with Cursor --- client/src/App.tsx | 67 ++++++++++++++---------- client/src/components/Sidebar.tsx | 2 +- client/src/lib/hooks/useDraggablePane.ts | 49 +++++++++++++++++ 3 files changed, 90 insertions(+), 28 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 68065e24..b57107d3 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -28,7 +28,7 @@ import React, { useState, } from "react"; import { useConnection } from "./lib/hooks/useConnection"; -import { useDraggablePane } from "./lib/hooks/useDraggablePane"; +import { useDraggablePane, useDraggableSidebar } from "./lib/hooks/useDraggablePane"; import { StdErrNotification } from "./lib/notificationTypes"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; @@ -163,6 +163,7 @@ const App = () => { const progressTokenRef = useRef(0); const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300); + const { width: sidebarWidth, isDragging: isSidebarDragging, handleDragStart: handleSidebarDragStart } = useDraggableSidebar(320); const { connectionStatus, @@ -562,32 +563,44 @@ const App = () => { return (
- +
+ + {/* Drag handle for resizing sidebar */} +
+
{mcpClient ? ( diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index 516f48d5..2ae3f6b0 100644 --- a/client/src/components/Sidebar.tsx +++ b/client/src/components/Sidebar.tsx @@ -214,7 +214,7 @@ const Sidebar = ({ }, [generateMCPServerFile, toast, reportError]); return ( -
+

diff --git a/client/src/lib/hooks/useDraggablePane.ts b/client/src/lib/hooks/useDraggablePane.ts index 5c0e3573..77e19b8d 100644 --- a/client/src/lib/hooks/useDraggablePane.ts +++ b/client/src/lib/hooks/useDraggablePane.ts @@ -51,3 +51,52 @@ export function useDraggablePane(initialHeight: number) { handleDragStart, }; } + +export function useDraggableSidebar(initialWidth: number) { + const [width, setWidth] = useState(initialWidth); + const [isDragging, setIsDragging] = useState(false); + const dragStartX = useRef(0); + const dragStartWidth = useRef(0); + + const handleDragStart = useCallback( + (e: React.MouseEvent) => { + setIsDragging(true); + dragStartX.current = e.clientX; + dragStartWidth.current = width; + document.body.style.userSelect = "none"; + }, + [width], + ); + + const handleDragMove = useCallback( + (e: MouseEvent) => { + if (!isDragging) return; + const deltaX = e.clientX - dragStartX.current; + const newWidth = Math.max(200, Math.min(600, dragStartWidth.current + deltaX)); + setWidth(newWidth); + }, + [isDragging], + ); + + const handleDragEnd = useCallback(() => { + setIsDragging(false); + document.body.style.userSelect = ""; + }, []); + + useEffect(() => { + if (isDragging) { + window.addEventListener("mousemove", handleDragMove); + window.addEventListener("mouseup", handleDragEnd); + return () => { + window.removeEventListener("mousemove", handleDragMove); + window.removeEventListener("mouseup", handleDragEnd); + }; + } + }, [isDragging, handleDragMove, handleDragEnd]); + + return { + width, + isDragging, + handleDragStart, + }; +} From 0a3b994540273a3b5a2c1afef2430bb4516d0fec Mon Sep 17 00:00:00 2001 From: Marc Abramowitz Date: Tue, 27 May 2025 17:33:51 -0700 Subject: [PATCH 2/4] npm run prettier-fix --- client/src/App.tsx | 29 ++++++++++++++++++++---- client/src/lib/hooks/useDraggablePane.ts | 5 +++- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index b57107d3..685bf50f 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -28,7 +28,10 @@ import React, { useState, } from "react"; import { useConnection } from "./lib/hooks/useConnection"; -import { useDraggablePane, useDraggableSidebar } from "./lib/hooks/useDraggablePane"; +import { + useDraggablePane, + useDraggableSidebar, +} from "./lib/hooks/useDraggablePane"; import { StdErrNotification } from "./lib/notificationTypes"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; @@ -163,7 +166,11 @@ const App = () => { const progressTokenRef = useRef(0); const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300); - const { width: sidebarWidth, isDragging: isSidebarDragging, handleDragStart: handleSidebarDragStart } = useDraggableSidebar(320); + const { + width: sidebarWidth, + isDragging: isSidebarDragging, + handleDragStart: handleSidebarDragStart, + } = useDraggableSidebar(320); const { connectionStatus, @@ -564,7 +571,12 @@ const App = () => { return (
{ {/* Drag handle for resizing sidebar */}
diff --git a/client/src/lib/hooks/useDraggablePane.ts b/client/src/lib/hooks/useDraggablePane.ts index 77e19b8d..4ee5af54 100644 --- a/client/src/lib/hooks/useDraggablePane.ts +++ b/client/src/lib/hooks/useDraggablePane.ts @@ -72,7 +72,10 @@ export function useDraggableSidebar(initialWidth: number) { (e: MouseEvent) => { if (!isDragging) return; const deltaX = e.clientX - dragStartX.current; - const newWidth = Math.max(200, Math.min(600, dragStartWidth.current + deltaX)); + const newWidth = Math.max( + 200, + Math.min(600, dragStartWidth.current + deltaX), + ); setWidth(newWidth); }, [isDragging], From 0e5e94393a3bb7700d0abc8013988dc039cacda7 Mon Sep 17 00:00:00 2001 From: Marc Abramowitz Date: Tue, 27 May 2025 18:02:07 -0700 Subject: [PATCH 3/4] Add tip to README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index d7c34b97..baf9b322 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,9 @@ The MCP inspector is a developer tool for testing and debugging MCP servers. ![MCP Inspector Screenshot](https://raw.githubusercontent.com/modelcontextprotocol/inspector/main/mcp-inspector.png) +> **Tip:** +> You can resize the left sidebar by dragging its right edge. This allows you to adjust the space for server configuration, environment variables, and other controls to your preference. + ## Running the Inspector ### Requirements From 93553d591fbfcefca8872009b9603ea849a2658c Mon Sep 17 00:00:00 2001 From: Marc Abramowitz Date: Tue, 3 Jun 2025 22:24:17 -0700 Subject: [PATCH 4/4] Revert "Add tip to README.md" This reverts commit 0e5e94393a3bb7700d0abc8013988dc039cacda7. --- README.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/README.md b/README.md index baf9b322..d7c34b97 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,6 @@ The MCP inspector is a developer tool for testing and debugging MCP servers. ![MCP Inspector Screenshot](https://raw.githubusercontent.com/modelcontextprotocol/inspector/main/mcp-inspector.png) -> **Tip:** -> You can resize the left sidebar by dragging its right edge. This allows you to adjust the space for server configuration, environment variables, and other controls to your preference. - ## Running the Inspector ### Requirements