Merge pull request #54 from modelcontextprotocol/justin/redo-sidebars

Revamp UI + panes

client/src/App.tsx

@@ -22,21 +22,12 @@ import {
   CompatibilityCallToolResult,
   ClientNotification,
 } from "@modelcontextprotocol/sdk/types.js";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 // Add dark mode class based on system preference
 if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
   document.documentElement.classList.add("dark");
 }
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Bell,
@@ -44,12 +35,9 @@ import {
   Hammer,
   Hash,
   MessageSquare,
-  Play,
   Send,
   Terminal,
   FolderTree,
-  ChevronDown,
-  ChevronRight,
 } from "lucide-react";
 
 import { ZodType } from "zod";
@@ -95,7 +83,6 @@ const App = () => {
   const [notifications, setNotifications] = useState<ServerNotification[]>([]);
   const [roots, setRoots] = useState<Root[]>([]);
   const [env, setEnv] = useState<Record<string, string>>({});
-  const [showEnvVars, setShowEnvVars] = useState(false);
 
   const [pendingSampleRequests, setPendingSampleRequests] = useState<
     Array<
@@ -140,6 +127,49 @@ const App = () => {
   >();
   const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
   const progressTokenRef = useRef(0);
+  const [historyPaneHeight, setHistoryPaneHeight] = useState<number>(300);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartY = useRef<number>(0);
+  const dragStartHeight = useRef<number>(0);
+
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      dragStartHeight.current = historyPaneHeight;
+      document.body.style.userSelect = "none";
+    },
+    [historyPaneHeight],
+  );
+
+  const handleDragMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      const deltaY = dragStartY.current - e.clientY;
+      const newHeight = Math.max(
+        100,
+        Math.min(800, dragStartHeight.current + deltaY),
+      );
+      setHistoryPaneHeight(newHeight);
+    },
+    [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]);
 
   useEffect(() => {
     localStorage.setItem("lastCommand", command);
@@ -353,231 +383,153 @@ const App = () => {
 
   return (
     <div className="flex h-screen bg-background">
-      <Sidebar connectionStatus={connectionStatus} />
+      <Sidebar
+        connectionStatus={connectionStatus}
+        transportType={transportType}
+        setTransportType={setTransportType}
+        command={command}
+        setCommand={setCommand}
+        args={args}
+        setArgs={setArgs}
+        url={url}
+        setUrl={setUrl}
+        env={env}
+        setEnv={setEnv}
+        onConnect={connectMcpServer}
+      />
       <div className="flex-1 flex flex-col overflow-hidden">
-        <h1 className="text-2xl font-bold p-4">MCP Inspector</h1>
-        <div className="flex-1 overflow-auto flex">
-          <div className="flex-1">
-            <div className="p-4 bg-card shadow-md m-4 rounded-md">
-              <h2 className="text-lg font-semibold mb-2">Connect MCP Server</h2>
-              <div className="flex space-x-2 mb-2">
-                <Select
-                  value={transportType}
-                  onValueChange={(value: "stdio" | "sse") =>
-                    setTransportType(value)
-                  }
-                >
-                  <SelectTrigger className="w-[180px]">
-                    <SelectValue placeholder="Select transport type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="stdio">STDIO</SelectItem>
-                    <SelectItem value="sse">SSE</SelectItem>
-                  </SelectContent>
-                </Select>
-                {transportType === "stdio" ? (
-                  <>
-                    <Input
-                      placeholder="Command"
-                      value={command}
-                      onChange={(e) => setCommand(e.target.value)}
-                    />
-                    <Input
-                      placeholder="Arguments (space-separated)"
-                      value={args}
-                      onChange={(e) => setArgs(e.target.value)}
-                    />
-                  </>
-                ) : (
-                  <Input
-                    placeholder="URL"
-                    value={url}
-                    onChange={(e) => setUrl(e.target.value)}
-                  />
-                )}
-                <Button onClick={connectMcpServer}>
-                  <Play className="w-4 h-4 mr-2" />
-                  Connect
-                </Button>
-              </div>
-              {transportType === "stdio" && (
-                <div className="mt-4">
-                  <Button
-                    variant="outline"
-                    onClick={() => setShowEnvVars(!showEnvVars)}
-                    className="flex items-center"
-                  >
-                    {showEnvVars ? (
-                      <ChevronDown className="w-4 h-4 mr-2" />
-                    ) : (
-                      <ChevronRight className="w-4 h-4 mr-2" />
-                    )}
-                    Environment Variables
-                  </Button>
-                  {showEnvVars && (
-                    <div className="mt-2">
-                      {Object.entries(env).map(([key, value]) => (
-                        <div key={key} className="flex space-x-2 mb-2">
-                          <Input
-                            placeholder="Key"
-                            value={key}
-                            onChange={(e) =>
-                              setEnv((prev) => ({
-                                ...prev,
-                                [e.target.value]: value,
-                              }))
-                            }
-                          />
-                          <Input
-                            placeholder="Value"
-                            value={value}
-                            onChange={(e) =>
-                              setEnv((prev) => ({
-                                ...prev,
-                                [key]: e.target.value,
-                              }))
-                            }
-                          />
-                          <Button
-                            onClick={() =>
-                              setEnv((prev) => {
-                                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                const { [key]: _, ...rest } = prev;
-                                return rest;
-                              })
-                            }
-                          >
-                            Remove
-                          </Button>
-                        </div>
-                      ))}
-                      <Button
-                        onClick={() => setEnv((prev) => ({ ...prev, "": "" }))}
-                      >
-                        Add Environment Variable
-                      </Button>
-                    </div>
+        <div className="flex-1 overflow-auto">
+          {mcpClient ? (
+            <Tabs defaultValue="resources" className="w-full p-4">
+              <TabsList className="mb-4 p-0">
+                <TabsTrigger value="resources">
+                  <Files className="w-4 h-4 mr-2" />
+                  Resources
+                </TabsTrigger>
+                <TabsTrigger value="prompts">
+                  <MessageSquare className="w-4 h-4 mr-2" />
+                  Prompts
+                </TabsTrigger>
+                <TabsTrigger value="requests" disabled>
+                  <Send className="w-4 h-4 mr-2" />
+                  Requests
+                </TabsTrigger>
+                <TabsTrigger value="tools">
+                  <Hammer className="w-4 h-4 mr-2" />
+                  Tools
+                </TabsTrigger>
+                <TabsTrigger value="console" disabled>
+                  <Terminal className="w-4 h-4 mr-2" />
+                  Console
+                </TabsTrigger>
+                <TabsTrigger value="ping">
+                  <Bell className="w-4 h-4 mr-2" />
+                  Ping
+                </TabsTrigger>
+                <TabsTrigger value="sampling" className="relative">
+                  <Hash className="w-4 h-4 mr-2" />
+                  Sampling
+                  {pendingSampleRequests.length > 0 && (
+                    <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+                      {pendingSampleRequests.length}
+                    </span>
                   )}
-                </div>
-              )}
-            </div>
-            {mcpClient ? (
-              <Tabs defaultValue="resources" className="w-full p-4">
-                <TabsList className="mb-4 p-0">
-                  <TabsTrigger value="resources">
-                    <Files className="w-4 h-4 mr-2" />
-                    Resources
-                  </TabsTrigger>
-                  <TabsTrigger value="prompts">
-                    <MessageSquare className="w-4 h-4 mr-2" />
-                    Prompts
-                  </TabsTrigger>
-                  <TabsTrigger value="requests" disabled>
-                    <Send className="w-4 h-4 mr-2" />
-                    Requests
-                  </TabsTrigger>
-                  <TabsTrigger value="tools">
-                    <Hammer className="w-4 h-4 mr-2" />
-                    Tools
-                  </TabsTrigger>
-                  <TabsTrigger value="console" disabled>
-                    <Terminal className="w-4 h-4 mr-2" />
-                    Console
-                  </TabsTrigger>
-                  <TabsTrigger value="ping">
-                    <Bell className="w-4 h-4 mr-2" />
-                    Ping
-                  </TabsTrigger>
-                  <TabsTrigger value="sampling" className="relative">
-                    <Hash className="w-4 h-4 mr-2" />
-                    Sampling
-                    {pendingSampleRequests.length > 0 && (
-                      <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-                        {pendingSampleRequests.length}
-                      </span>
-                    )}
-                  </TabsTrigger>
-                  <TabsTrigger value="roots">
-                    <FolderTree className="w-4 h-4 mr-2" />
-                    Roots
-                  </TabsTrigger>
-                </TabsList>
+                </TabsTrigger>
+                <TabsTrigger value="roots">
+                  <FolderTree className="w-4 h-4 mr-2" />
+                  Roots
+                </TabsTrigger>
+              </TabsList>
 
-                <div className="w-full">
-                  <ResourcesTab
-                    resources={resources}
-                    resourceTemplates={resourceTemplates}
-                    listResources={listResources}
-                    listResourceTemplates={listResourceTemplates}
-                    readResource={readResource}
-                    selectedResource={selectedResource}
-                    setSelectedResource={setSelectedResource}
-                    resourceContent={resourceContent}
-                    nextCursor={nextResourceCursor}
-                    nextTemplateCursor={nextResourceTemplateCursor}
-                    error={error}
-                  />
-                  <PromptsTab
-                    prompts={prompts}
-                    listPrompts={listPrompts}
-                    getPrompt={getPrompt}
-                    selectedPrompt={selectedPrompt}
-                    setSelectedPrompt={setSelectedPrompt}
-                    promptContent={promptContent}
-                    nextCursor={nextPromptCursor}
-                    error={error}
-                  />
-                  <RequestsTab />
-                  <ToolsTab
-                    tools={tools}
-                    listTools={listTools}
-                    callTool={callTool}
-                    selectedTool={selectedTool}
-                    setSelectedTool={(tool) => {
-                      setSelectedTool(tool);
-                      setToolResult(null);
-                    }}
-                    toolResult={toolResult}
-                    nextCursor={nextToolCursor}
-                    error={error}
-                  />
-                  <ConsoleTab />
-                  <PingTab
-                    onPingClick={() => {
-                      void makeRequest(
-                        {
-                          method: "ping" as const,
-                        },
-                        EmptyResultSchema,
-                      );
-                    }}
-                  />
-                  <SamplingTab
-                    pendingRequests={pendingSampleRequests}
-                    onApprove={handleApproveSampling}
-                    onReject={handleRejectSampling}
-                  />
-                  <RootsTab
-                    roots={roots}
-                    setRoots={setRoots}
-                    onRootsChange={handleRootsChange}
-                  />
-                </div>
-              </Tabs>
-            ) : (
-              <div className="flex items-center justify-center h-full">
-                <p className="text-lg text-gray-500">
-                  Connect to an MCP server to start inspecting
-                </p>
+              <div className="w-full">
+                <ResourcesTab
+                  resources={resources}
+                  resourceTemplates={resourceTemplates}
+                  listResources={listResources}
+                  listResourceTemplates={listResourceTemplates}
+                  readResource={readResource}
+                  selectedResource={selectedResource}
+                  setSelectedResource={setSelectedResource}
+                  resourceContent={resourceContent}
+                  nextCursor={nextResourceCursor}
+                  nextTemplateCursor={nextResourceTemplateCursor}
+                  error={error}
+                />
+                <PromptsTab
+                  prompts={prompts}
+                  listPrompts={listPrompts}
+                  getPrompt={getPrompt}
+                  selectedPrompt={selectedPrompt}
+                  setSelectedPrompt={setSelectedPrompt}
+                  promptContent={promptContent}
+                  nextCursor={nextPromptCursor}
+                  error={error}
+                />
+                <RequestsTab />
+                <ToolsTab
+                  tools={tools}
+                  listTools={listTools}
+                  callTool={callTool}
+                  selectedTool={selectedTool}
+                  setSelectedTool={(tool) => {
+                    setSelectedTool(tool);
+                    setToolResult(null);
+                  }}
+                  toolResult={toolResult}
+                  nextCursor={nextToolCursor}
+                  error={error}
+                />
+                <ConsoleTab />
+                <PingTab
+                  onPingClick={() => {
+                    void makeRequest(
+                      {
+                        method: "ping" as const,
+                      },
+                      EmptyResultSchema,
+                    );
+                  }}
+                />
+                <SamplingTab
+                  pendingRequests={pendingSampleRequests}
+                  onApprove={handleApproveSampling}
+                  onReject={handleRejectSampling}
+                />
+                <RootsTab
+                  roots={roots}
+                  setRoots={setRoots}
+                  onRootsChange={handleRootsChange}
+                />
               </div>
-            )}
+            </Tabs>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-lg text-gray-500">
+                Connect to an MCP server to start inspecting
+              </p>
+            </div>
+          )}
+        </div>
+        <div
+          className="relative border-t border-border"
+          style={{
+            height: `${historyPaneHeight}px`,
+          }}
+        >
+          <div
+            className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
+            onMouseDown={handleDragStart}
+          >
+            <div className="w-8 h-1 rounded-full bg-border" />
+          </div>
+          <div className="h-full overflow-auto">
+            <HistoryAndNotifications
+              requestHistory={requestHistory}
+              serverNotifications={notifications}
+            />
           </div>
         </div>
       </div>
-      <HistoryAndNotifications
-        requestHistory={requestHistory}
-        serverNotifications={notifications}
-      />
     </div>
   );
 };

client/src/components/History.tsx

@@ -29,8 +29,8 @@ const HistoryAndNotifications = ({
   };
 
   return (
-    <div className="w-64 bg-card shadow-md p-4 overflow-hidden flex flex-col h-full">
-      <div className="flex-1 overflow-y-auto mb-4 border-b pb-4">
+    <div className="bg-card overflow-hidden flex h-full">
+      <div className="flex-1 overflow-y-auto p-4 border-r">
         <h2 className="text-lg font-semibold mb-4">History</h2>
         {requestHistory.length === 0 ? (
           <p className="text-sm text-gray-500 italic">No history yet</p>
@@ -107,7 +107,7 @@ const HistoryAndNotifications = ({
           </ul>
         )}
       </div>
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto p-4">
         <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
         {serverNotifications.length === 0 ? (
           <p className="text-sm text-gray-500 italic">No notifications yet</p>

client/src/components/Sidebar.tsx

@@ -1,39 +1,196 @@
-import { Menu, Settings } from "lucide-react";
+import { useState } from "react";
+
+import { Play, ChevronDown, ChevronRight, Settings } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
-const Sidebar = ({ connectionStatus }: { connectionStatus: string }) => (
-  <div className="w-64 bg-card border-r border-border">
-    <div className="flex items-center p-4 border-b border-gray-200">
-      <Menu className="w-6 h-6 text-gray-500" />
-      <h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
-    </div>
+interface SidebarProps {
+  connectionStatus: "disconnected" | "connected" | "error";
+  transportType: "stdio" | "sse";
+  setTransportType: (type: "stdio" | "sse") => void;
+  command: string;
+  setCommand: (command: string) => void;
+  args: string;
+  setArgs: (args: string) => void;
+  url: string;
+  setUrl: (url: string) => void;
+  env: Record<string, string>;
+  setEnv: (env: Record<string, string>) => void;
+  onConnect: () => void;
+}
 
-    <div className="p-4">
-      <div className="flex items-center space-x-2 mb-4">
-        <div
-          className={`w-2 h-2 rounded-full ${
-            connectionStatus === "connected"
-              ? "bg-green-500"
-              : connectionStatus === "error"
-                ? "bg-red-500"
-                : "bg-gray-500"
-          }`}
-        />
-        <span className="text-sm text-gray-600">
-          {connectionStatus === "connected"
-            ? "Connected"
-            : connectionStatus === "error"
-              ? "Connection Error"
-              : "Disconnected"}
-        </span>
+const Sidebar = ({
+  connectionStatus,
+  transportType,
+  setTransportType,
+  command,
+  setCommand,
+  args,
+  setArgs,
+  url,
+  setUrl,
+  env,
+  setEnv,
+  onConnect,
+}: SidebarProps) => {
+  const [showEnvVars, setShowEnvVars] = useState(false);
+
+  return (
+    <div className="w-80 bg-card border-r border-border flex flex-col h-full">
+      <div className="flex items-center p-4 border-b border-gray-200">
+        <Settings className="w-6 h-6 text-gray-500" />
+        <h1 className="ml-2 text-lg font-semibold">MCP Inspector</h1>
       </div>
 
-      <Button variant="outline" className="w-full justify-start">
-        <Settings className="w-4 h-4 mr-2" />
-        Connection Settings
-      </Button>
+      <div className="p-4 flex-1 overflow-auto">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Transport Type</label>
+            <Select
+              value={transportType}
+              onValueChange={(value: "stdio" | "sse") =>
+                setTransportType(value)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select transport type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="stdio">STDIO</SelectItem>
+                <SelectItem value="sse">SSE</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {transportType === "stdio" ? (
+            <>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Command</label>
+                <Input
+                  placeholder="Command"
+                  value={command}
+                  onChange={(e) => setCommand(e.target.value)}
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Arguments</label>
+                <Input
+                  placeholder="Arguments (space-separated)"
+                  value={args}
+                  onChange={(e) => setArgs(e.target.value)}
+                />
+              </div>
+            </>
+          ) : (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">URL</label>
+              <Input
+                placeholder="URL"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+              />
+            </div>
+          )}
+          {transportType === "stdio" && (
+            <div className="space-y-2">
+              <Button
+                variant="outline"
+                onClick={() => setShowEnvVars(!showEnvVars)}
+                className="flex items-center w-full"
+              >
+                {showEnvVars ? (
+                  <ChevronDown className="w-4 h-4 mr-2" />
+                ) : (
+                  <ChevronRight className="w-4 h-4 mr-2" />
+                )}
+                Environment Variables
+              </Button>
+              {showEnvVars && (
+                <div className="space-y-2">
+                  {Object.entries(env).map(([key, value]) => (
+                    <div key={key} className="grid grid-cols-[1fr,auto] gap-2">
+                      <div className="space-y-1">
+                        <Input
+                          placeholder="Key"
+                          value={key}
+                          onChange={(e) => {
+                            const newEnv = { ...env };
+                            newEnv[e.target.value] = value;
+                            setEnv(newEnv);
+                          }}
+                        />
+                        <Input
+                          placeholder="Value"
+                          value={value}
+                          onChange={(e) => {
+                            const newEnv = { ...env };
+                            newEnv[key] = e.target.value;
+                            setEnv(newEnv);
+                          }}
+                        />
+                      </div>
+                      <Button
+                        variant="destructive"
+                        onClick={() => {
+                          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                          const { [key]: removed, ...rest } = env;
+                          setEnv(rest);
+                        }}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                  ))}
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      const newEnv = { ...env };
+                      newEnv[""] = "";
+                      setEnv(newEnv);
+                    }}
+                  >
+                    Add Environment Variable
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Button className="w-full" onClick={onConnect}>
+              <Play className="w-4 h-4 mr-2" />
+              Connect
+            </Button>
+
+            <div className="flex items-center justify-center space-x-2 mb-4">
+              <div
+                className={`w-2 h-2 rounded-full ${
+                  connectionStatus === "connected"
+                    ? "bg-green-500"
+                    : connectionStatus === "error"
+                      ? "bg-red-500"
+                      : "bg-gray-500"
+                }`}
+              />
+              <span className="text-sm text-gray-600">
+                {connectionStatus === "connected"
+                  ? "Connected"
+                  : connectionStatus === "error"
+                    ? "Connection Error"
+                    : "Disconnected"}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Sidebar;