From d973f58bef6584a9070676be88a4ca2925272389 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 9 Jan 2025 11:01:28 -0800
Subject: [PATCH 1/5] run prettier check in CI

---
 .github/workflows/main.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2665e9d..572e79e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -14,6 +14,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Check formatting
+        run: npx prettier --check .
+
       - uses: actions/setup-node@v4
         with:
           node-version: 18

From 715936d747ae798f61eb402e4f319b6af23743f6 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Thu, 9 Jan 2025 11:01:35 -0800
Subject: [PATCH 2/5] run prettier

---
 .prettierignore                          |  2 +
 client/src/App.tsx                       | 58 +++++++++++++++---------
 client/src/components/Sidebar.tsx        | 32 +++++++++++--
 client/src/components/ToolsTab.tsx       |  3 +-
 client/src/lib/hooks/useConnection.ts    | 33 +++++++++-----
 client/src/lib/hooks/useDraggablePane.ts | 37 +++++++++------
 client/src/main.tsx                      |  4 +-
 client/vite.config.ts                    |  8 ++--
 8 files changed, 118 insertions(+), 59 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index b7c83c0..c8824c9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,4 @@
 packages
 server/build
+CODE_OF_CONDUCT.md
+SECURITY.md
diff --git a/client/src/App.tsx b/client/src/App.tsx
index c225c30..f3791b2 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -16,7 +16,7 @@ import {
   ResourceTemplate,
   Root,
   ServerNotification,
-  Tool
+  Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { useEffect, useRef, useState } from "react";
 
@@ -124,10 +124,7 @@ const App = () => {
   const [nextToolCursor, setNextToolCursor] = useState<string | undefined>();
   const progressTokenRef = useRef(0);
 
-  const {
-    height: historyPaneHeight,
-    handleDragStart
-  } = useDraggablePane(300);
+  const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
 
   const {
     connectionStatus,
@@ -136,7 +133,7 @@ const App = () => {
     requestHistory,
     makeRequest: makeConnectionRequest,
     sendNotification,
-    connect: connectMcpServer
+    connect: connectMcpServer,
   } = useConnection({
     transportType,
     command,
@@ -145,18 +142,21 @@ const App = () => {
     env,
     proxyServerUrl: PROXY_SERVER_URL,
     onNotification: (notification) => {
-      setNotifications(prev => [...prev, notification as ServerNotification]);
+      setNotifications((prev) => [...prev, notification as ServerNotification]);
     },
     onStdErrNotification: (notification) => {
-      setStdErrNotifications(prev => [...prev, notification as StdErrNotification]);
+      setStdErrNotifications((prev) => [
+        ...prev,
+        notification as StdErrNotification,
+      ]);
     },
     onPendingRequest: (request, resolve, reject) => {
-      setPendingSampleRequests(prev => [
+      setPendingSampleRequests((prev) => [
         ...prev,
-        { id: nextRequestId.current++, request, resolve, reject }
+        { id: nextRequestId.current++, request, resolve, reject },
       ]);
     },
-    getRoots: () => rootsRef.current
+    getRoots: () => rootsRef.current,
   });
 
   const makeRequest = async <T extends z.ZodType>(
@@ -345,26 +345,40 @@ const App = () => {
           {mcpClient ? (
             <Tabs
               defaultValue={
-                Object.keys(serverCapabilities ?? {}).includes(window.location.hash.slice(1)) ?
-                window.location.hash.slice(1) :
-                serverCapabilities?.resources ? "resources" :
-                serverCapabilities?.prompts ? "prompts" :
-                serverCapabilities?.tools ? "tools" :
-                "ping"
+                Object.keys(serverCapabilities ?? {}).includes(
+                  window.location.hash.slice(1),
+                )
+                  ? window.location.hash.slice(1)
+                  : serverCapabilities?.resources
+                    ? "resources"
+                    : serverCapabilities?.prompts
+                      ? "prompts"
+                      : serverCapabilities?.tools
+                        ? "tools"
+                        : "ping"
               }
               className="w-full p-4"
               onValueChange={(value) => (window.location.hash = value)}
             >
               <TabsList className="mb-4 p-0">
-                <TabsTrigger value="resources" disabled={!serverCapabilities?.resources}>
+                <TabsTrigger
+                  value="resources"
+                  disabled={!serverCapabilities?.resources}
+                >
                   <Files className="w-4 h-4 mr-2" />
                   Resources
                 </TabsTrigger>
-                <TabsTrigger value="prompts" disabled={!serverCapabilities?.prompts}>
+                <TabsTrigger
+                  value="prompts"
+                  disabled={!serverCapabilities?.prompts}
+                >
                   <MessageSquare className="w-4 h-4 mr-2" />
                   Prompts
                 </TabsTrigger>
-                <TabsTrigger value="tools" disabled={!serverCapabilities?.tools}>
+                <TabsTrigger
+                  value="tools"
+                  disabled={!serverCapabilities?.tools}
+                >
                   <Hammer className="w-4 h-4 mr-2" />
                   Tools
                 </TabsTrigger>
@@ -388,7 +402,9 @@ const App = () => {
               </TabsList>
 
               <div className="w-full">
-                {!serverCapabilities?.resources && !serverCapabilities?.prompts && !serverCapabilities?.tools ? (
+                {!serverCapabilities?.resources &&
+                !serverCapabilities?.prompts &&
+                !serverCapabilities?.tools ? (
                   <div className="flex items-center justify-center p-4">
                     <p className="text-lg text-gray-500">
                       The connected server does not support any MCP capabilities
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index c716bd2..17cd59d 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -1,5 +1,12 @@
 import { useState } from "react";
-import { Play, ChevronDown, ChevronRight, CircleHelp, Bug, Github } from "lucide-react";
+import {
+  Play,
+  ChevronDown,
+  ChevronRight,
+  CircleHelp,
+  Bug,
+  Github,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -243,18 +250,33 @@ const Sidebar = ({
           </Select>
 
           <div className="flex items-center space-x-2">
-            <a href="https://modelcontextprotocol.io/docs/tools/inspector" target="_blank" rel="noopener noreferrer">
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <Button variant="ghost" title="Inspector Documentation">
                 <CircleHelp className="w-4 h-4 text-gray-800" />
               </Button>
             </a>
-            <a href="https://modelcontextprotocol.io/docs/tools/debugging" target="_blank" rel="noopener noreferrer">
+            <a
+              href="https://modelcontextprotocol.io/docs/tools/debugging"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <Button variant="ghost" title="Debugging Guide">
                 <Bug className="w-4 h-4 text-gray-800" />
               </Button>
             </a>
-            <a href="https://github.com/modelcontextprotocol/inspector" target="_blank" rel="noopener noreferrer">
-              <Button variant="ghost" title="Report bugs or contribute on GitHub">
+            <a
+              href="https://github.com/modelcontextprotocol/inspector"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                variant="ghost"
+                title="Report bugs or contribute on GitHub"
+              >
                 <Github className="w-4 h-4 text-gray-800" />
               </Button>
             </a>
diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx
index 77a97e7..6b64c01 100644
--- a/client/src/components/ToolsTab.tsx
+++ b/client/src/components/ToolsTab.tsx
@@ -174,8 +174,7 @@ const ToolsTab = ({
                           }
                           className="mt-1"
                         />
-                      ) :
-                      /* @ts-expect-error value type is currently unknown */
+                      ) : /* @ts-expect-error value type is currently unknown */
                       value.type === "object" ? (
                         <Textarea
                           id={key}
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index 87b7f60..ef937d1 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -44,10 +44,15 @@ export function useConnection({
   onPendingRequest,
   getRoots,
 }: UseConnectionOptions) {
-  const [connectionStatus, setConnectionStatus] = useState<"disconnected" | "connected" | "error">("disconnected");
-  const [serverCapabilities, setServerCapabilities] = useState<ServerCapabilities | null>(null);
+  const [connectionStatus, setConnectionStatus] = useState<
+    "disconnected" | "connected" | "error"
+  >("disconnected");
+  const [serverCapabilities, setServerCapabilities] =
+    useState<ServerCapabilities | null>(null);
   const [mcpClient, setMcpClient] = useState<Client | null>(null);
-  const [requestHistory, setRequestHistory] = useState<{ request: string; response?: string }[]>([]);
+  const [requestHistory, setRequestHistory] = useState<
+    { request: string; response?: string }[]
+  >([]);
 
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
@@ -61,7 +66,7 @@ export function useConnection({
 
   const makeRequest = async <T extends z.ZodType>(
     request: ClientRequest,
-    schema: T
+    schema: T,
   ) => {
     if (!mcpClient) {
       throw new Error("MCP client not connected");
@@ -80,14 +85,14 @@ export function useConnection({
         });
         pushHistory(request, response);
       } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : String(error);
+        const errorMessage =
+          error instanceof Error ? error.message : String(error);
         pushHistory(request, { error: errorMessage });
         throw error;
       } finally {
         clearTimeout(timeoutId);
       }
 
-
       return response;
     } catch (e: unknown) {
       const errorString = (e as Error).message ?? String(e);
@@ -140,13 +145,19 @@ export function useConnection({
       }
 
       const clientTransport = new SSEClientTransport(backendUrl);
-      
+
       if (onNotification) {
-        client.setNotificationHandler(ProgressNotificationSchema, onNotification);
+        client.setNotificationHandler(
+          ProgressNotificationSchema,
+          onNotification,
+        );
       }
 
       if (onStdErrNotification) {
-        client.setNotificationHandler(StdErrNotificationSchema, onStdErrNotification);
+        client.setNotificationHandler(
+          StdErrNotificationSchema,
+          onStdErrNotification,
+        );
       }
 
       await client.connect(clientTransport);
@@ -183,6 +194,6 @@ export function useConnection({
     requestHistory,
     makeRequest,
     sendNotification,
-    connect
+    connect,
   };
-}
\ No newline at end of file
+}
diff --git a/client/src/lib/hooks/useDraggablePane.ts b/client/src/lib/hooks/useDraggablePane.ts
index 46b8fc3..5c0e357 100644
--- a/client/src/lib/hooks/useDraggablePane.ts
+++ b/client/src/lib/hooks/useDraggablePane.ts
@@ -6,19 +6,28 @@ export function useDraggablePane(initialHeight: number) {
   const dragStartY = useRef<number>(0);
   const dragStartHeight = useRef<number>(0);
 
-  const handleDragStart = useCallback((e: React.MouseEvent) => {
-    setIsDragging(true);
-    dragStartY.current = e.clientY;
-    dragStartHeight.current = height;
-    document.body.style.userSelect = "none";
-  }, [height]);
+  const handleDragStart = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      dragStartY.current = e.clientY;
+      dragStartHeight.current = height;
+      document.body.style.userSelect = "none";
+    },
+    [height],
+  );
 
-  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));
-    setHeight(newHeight);
-  }, [isDragging]);
+  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),
+      );
+      setHeight(newHeight);
+    },
+    [isDragging],
+  );
 
   const handleDragEnd = useCallback(() => {
     setIsDragging(false);
@@ -39,6 +48,6 @@ export function useDraggablePane(initialHeight: number) {
   return {
     height,
     isDragging,
-    handleDragStart
+    handleDragStart,
   };
-}
\ No newline at end of file
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 8ed57a0..450213d 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import App from "./App.tsx";
 import "./index.css";
 
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 3b6c407..dd3bd01 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -14,8 +14,8 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       output: {
-        manualChunks: undefined
-      }
-    }
-  }
+        manualChunks: undefined,
+      },
+    },
+  },
 });

From a976aefb39817fb4cbbac1891525d8420e419a60 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Fri, 13 Dec 2024 16:34:42 +0000
Subject: [PATCH 3/5] allow passing env vars to server from command line

---
 README.md                         | 13 +++++--
 bin/cli.js                        | 26 +++++++++++--
 client/src/components/Sidebar.tsx | 61 ++++++++++++++++++++++++-------
 server/src/index.ts               | 14 ++++---
 4 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index b02f1b1..98b4a61 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,17 @@ To inspect an MCP server implementation, there's no need to clone this repo. Ins
 npx @modelcontextprotocol/inspector build/index.js
 ```
 
-You can also pass arguments along which will get passed as arguments to your MCP server:
+You can pass both arguments and environment variables to your MCP server. Arguments are passed directly to your server, while environment variables can be set using the `-e` flag:
 
-```
-npx @modelcontextprotocol/inspector build/index.js arg1 arg2 ...
+```bash
+# Pass arguments only
+npx @modelcontextprotocol/inspector build/index.js arg1 arg2
+
+# Pass environment variables only
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js
+
+# Pass both environment variables and arguments
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js arg1 arg2
 ```
 
 The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
diff --git a/bin/cli.js b/bin/cli.js
index 2dcc613..9695138 100755
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -11,8 +11,24 @@ function delay(ms) {
 }
 
 async function main() {
-  // Get command line arguments
-  const [, , command, ...mcpServerArgs] = process.argv;
+  // Parse command line arguments
+  const args = process.argv.slice(2);
+  const envVars = {};
+  const mcpServerArgs = [];
+  let command = null;
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "-e" && i + 1 < args.length) {
+      const [key, value] = args[++i].split("=");
+      if (key && value) {
+        envVars[key] = value;
+      }
+    } else if (!command) {
+      command = args[i];
+    } else {
+      mcpServerArgs.push(args[i]);
+    }
+  }
 
   const inspectorServerPath = resolve(
     __dirname,
@@ -52,7 +68,11 @@ async function main() {
       ...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
     ],
     {
-      env: { ...process.env, PORT: SERVER_PORT },
+      env: {
+        ...process.env,
+        PORT: SERVER_PORT,
+        MCP_ENV_VARS: JSON.stringify(envVars),
+      },
       signal: abort.signal,
       echoOutput: true,
     },
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 17cd59d..bdd817f 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -6,6 +6,8 @@ import {
   CircleHelp,
   Bug,
   Github,
+  Eye,
+  EyeOff,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -54,6 +56,7 @@ const Sidebar = ({
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
+  const [shownEnvVars, setShownEnvVars] = useState<Record<string, boolean>>({});
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
@@ -134,20 +137,40 @@ const Sidebar = ({
               {showEnvVars && (
                 <div className="space-y-2">
                   {Object.entries(env).map(([key, value], idx) => (
-                    <div key={idx} className="grid grid-cols-[1fr,auto] gap-2">
-                      <div className="space-y-1">
+                    <div key={idx} className="space-y-2 pb-4">
+                      <div className="flex gap-2">
                         <Input
                           placeholder="Key"
                           value={key}
                           onChange={(e) => {
+                            const newKey = e.target.value;
                             const newEnv = { ...env };
                             delete newEnv[key];
-                            newEnv[e.target.value] = value;
+                            newEnv[newKey] = value;
                             setEnv(newEnv);
+                            setShownEnvVars((prev) => {
+                              const { [key]: shown, ...rest } = prev;
+                              return shown ? { ...rest, [newKey]: true } : rest;
+                            });
                           }}
                           className="font-mono"
                         />
+                        <Button
+                          variant="destructive"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { [key]: _removed, ...rest } = env;
+                            setEnv(rest);
+                          }}
+                        >
+                          ×
+                        </Button>
+                      </div>
+                      <div className="flex gap-2">
                         <Input
+                          type={shownEnvVars[key] ? "text" : "password"}
                           placeholder="Value"
                           value={value}
                           onChange={(e) => {
@@ -157,25 +180,35 @@ const Sidebar = ({
                           }}
                           className="font-mono"
                         />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          className="h-9 w-9 p-0 shrink-0"
+                          onClick={() => {
+                            setShownEnvVars((prev) => ({
+                              ...prev,
+                              [key]: !prev[key],
+                            }));
+                          }}
+                        >
+                          {shownEnvVars[key] ? (
+                            <Eye className="h-4 w-4" />
+                          ) : (
+                            <EyeOff className="h-4 w-4" />
+                          )}
+                        </Button>
                       </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"
+                    className="w-full mt-2"
                     onClick={() => {
+                      const key = "";
                       const newEnv = { ...env };
-                      newEnv[""] = "";
+                      newEnv[key] = "";
                       setEnv(newEnv);
+                      setShownEnvVars({});
                     }}
                   >
                     Add Environment Variable
diff --git a/server/src/index.ts b/server/src/index.ts
index b82b17d..9662009 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -15,6 +15,11 @@ import express from "express";
 import mcpProxy from "./mcpProxy.js";
 import { findActualExecutable } from "spawn-rx";
 
+const defaultEnvironment = {
+  ...getDefaultEnvironment(),
+  ...(process.env.MCP_ENV_VARS ? JSON.parse(process.env.MCP_ENV_VARS) : {}),
+};
+
 // Polyfill EventSource for an SSE client in Node.js
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (global as any).EventSource = EventSource;
@@ -40,13 +45,12 @@ const createTransport = async (query: express.Request["query"]) => {
   if (transportType === "stdio") {
     const command = query.command as string;
     const origArgs = shellParseArgs(query.args as string) as string[];
-    const env = query.env ? JSON.parse(query.env as string) : undefined;
+    const queryEnv = query.env ? JSON.parse(query.env as string) : {};
+    const env = { ...process.env, ...defaultEnvironment, ...queryEnv };
 
     const { cmd, args } = findActualExecutable(command, origArgs);
 
-    console.log(
-      `Stdio transport: command=${cmd}, args=${args}, env=${JSON.stringify(env)}`,
-    );
+    console.log(`Stdio transport: command=${cmd}, args=${args}`);
 
     const transport = new StdioClientTransport({
       command: cmd,
@@ -136,8 +140,6 @@ app.post("/message", async (req, res) => {
 
 app.get("/config", (req, res) => {
   try {
-    const defaultEnvironment = getDefaultEnvironment();
-
     res.json({
       defaultEnvironment,
       defaultCommand: values.env,

From 052de8690d7d230a870de8cf9ee71a5af25ec005 Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Fri, 10 Jan 2025 07:50:45 -0800
Subject: [PATCH 4/5] respond to PR feedback

---
 README.md                         |  7 +++++--
 bin/cli.js                        | 14 ++++++++++---
 client/src/components/Sidebar.tsx | 35 ++++++++++++++++++++-----------
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 98b4a61..98b5704 100644
--- a/README.md
+++ b/README.md
@@ -21,10 +21,13 @@ You can pass both arguments and environment variables to your MCP server. Argume
 npx @modelcontextprotocol/inspector build/index.js arg1 arg2
 
 # Pass environment variables only
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js
 
 # Pass both environment variables and arguments
-npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=value2 build/index.js arg1 arg2
+npx @modelcontextprotocol/inspector -e KEY=value -e KEY2=$VALUE2 build/index.js arg1 arg2
+
+# Use -- to separate inspector flags from server arguments
+npx @modelcontextprotocol/inspector -e KEY=$VALUE -- build/index.js -e server-flag
 ```
 
 The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
diff --git a/bin/cli.js b/bin/cli.js
index 9695138..94348fb 100755
--- a/bin/cli.js
+++ b/bin/cli.js
@@ -16,17 +16,25 @@ async function main() {
   const envVars = {};
   const mcpServerArgs = [];
   let command = null;
+  let parsingFlags = true;
 
   for (let i = 0; i < args.length; i++) {
-    if (args[i] === "-e" && i + 1 < args.length) {
+    const arg = args[i];
+
+    if (parsingFlags && arg === "--") {
+      parsingFlags = false;
+      continue;
+    }
+
+    if (parsingFlags && arg === "-e" && i + 1 < args.length) {
       const [key, value] = args[++i].split("=");
       if (key && value) {
         envVars[key] = value;
       }
     } else if (!command) {
-      command = args[i];
+      command = arg;
     } else {
-      mcpServerArgs.push(args[i]);
+      mcpServerArgs.push(arg);
     }
   }
 
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index bdd817f..f70335e 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -56,7 +56,7 @@ const Sidebar = ({
 }: SidebarProps) => {
   const [theme, setTheme] = useTheme();
   const [showEnvVars, setShowEnvVars] = useState(false);
-  const [shownEnvVars, setShownEnvVars] = useState<Record<string, boolean>>({});
+  const [shownEnvVars, setShownEnvVars] = useState<Set<string>>(new Set());
 
   return (
     <div className="w-80 bg-card border-r border-border flex flex-col h-full">
@@ -149,8 +149,12 @@ const Sidebar = ({
                             newEnv[newKey] = value;
                             setEnv(newEnv);
                             setShownEnvVars((prev) => {
-                              const { [key]: shown, ...rest } = prev;
-                              return shown ? { ...rest, [newKey]: true } : rest;
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                                next.add(newKey);
+                              }
+                              return next;
                             });
                           }}
                           className="font-mono"
@@ -170,7 +174,7 @@ const Sidebar = ({
                       </div>
                       <div className="flex gap-2">
                         <Input
-                          type={shownEnvVars[key] ? "text" : "password"}
+                          type={shownEnvVars.has(key) ? "text" : "password"}
                           placeholder="Value"
                           value={value}
                           onChange={(e) => {
@@ -185,16 +189,24 @@ const Sidebar = ({
                           size="icon"
                           className="h-9 w-9 p-0 shrink-0"
                           onClick={() => {
-                            setShownEnvVars((prev) => ({
-                              ...prev,
-                              [key]: !prev[key],
-                            }));
+                            setShownEnvVars((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(key)) {
+                                next.delete(key);
+                              } else {
+                                next.add(key);
+                              }
+                              return next;
+                            });
                           }}
+                          aria-label={shownEnvVars.has(key) ? "Hide value" : "Show value"}
+                          aria-pressed={shownEnvVars.has(key)}
+                          title={shownEnvVars.has(key) ? "Hide value" : "Show value"}
                         >
-                          {shownEnvVars[key] ? (
-                            <Eye className="h-4 w-4" />
+                          {shownEnvVars.has(key) ? (
+                            <Eye className="h-4 w-4" aria-hidden="true" />
                           ) : (
-                            <EyeOff className="h-4 w-4" />
+                            <EyeOff className="h-4 w-4" aria-hidden="true" />
                           )}
                         </Button>
                       </div>
@@ -208,7 +220,6 @@ const Sidebar = ({
                       const newEnv = { ...env };
                       newEnv[key] = "";
                       setEnv(newEnv);
-                      setShownEnvVars({});
                     }}
                   >
                     Add Environment Variable

From ec150eb8b4ab4f25eeab7e972a7a9c4c2eef2dfb Mon Sep 17 00:00:00 2001
From: Ashwin Bhat <ashwin@anthropic.com>
Date: Fri, 10 Jan 2025 07:53:55 -0800
Subject: [PATCH 5/5] prettier

---
 client/src/components/Sidebar.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index f70335e..c95f621 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -199,9 +199,13 @@ const Sidebar = ({
                               return next;
                             });
                           }}
-                          aria-label={shownEnvVars.has(key) ? "Hide value" : "Show value"}
+                          aria-label={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
                           aria-pressed={shownEnvVars.has(key)}
-                          title={shownEnvVars.has(key) ? "Hide value" : "Show value"}
+                          title={
+                            shownEnvVars.has(key) ? "Hide value" : "Show value"
+                          }
                         >
                           {shownEnvVars.has(key) ? (
                             <Eye className="h-4 w-4" aria-hidden="true" />