respond to PR feedback

Author: ashwin-ant

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:

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);
     }
   }
 

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