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] 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