Make env vars UI toggleable

client/src/App.tsx

@@ -43,6 +43,8 @@ import {
   Send,
   Terminal,
   FolderTree,
+  ChevronDown,
+  ChevronRight,
 } from "lucide-react";
 
 import { ZodType } from "zod";
@@ -94,6 +96,7 @@ 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<
@@ -384,9 +387,20 @@ const App = () => {
               </div>
               {transportType === "stdio" && (
                 <div className="mt-4">
-                  <h3 className="text-md font-semibold mb-2">
+                  <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
-                  </h3>
+                  </Button>
+                  {showEnvVars && (
+                    <div className="mt-2">
                       {Object.entries(env).map(([key, value]) => (
                         <div key={key} className="flex space-x-2 mb-2">
                           <Input
@@ -403,7 +417,10 @@ const App = () => {
                             placeholder="Value"
                             value={value}
                             onChange={(e) =>
-                          setEnv((prev) => ({ ...prev, [key]: e.target.value }))
+                              setEnv((prev) => ({
+                                ...prev,
+                                [key]: e.target.value,
+                              }))
                             }
                           />
                           <Button
@@ -427,6 +444,8 @@ const App = () => {
                     </div>
                   )}
                 </div>
+              )}
+            </div>
             {mcpClient ? (
               <Tabs defaultValue="resources" className="w-full p-4">
                 <TabsList className="mb-4 p-0">