fix: make playground env var reveal toggle visibility on the correct row (#1816)

Fixes #1815.

... I knew this code was iffy when I merged it, but it wasn't buggy
until I merged #1806. That's my lesson on vibe coding.
<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Fixes environment variable visibility toggle in
`EnvironmentVariablesPanel` by using `key` instead of `index`, and
updates storybook text.
> 
>   - **Behavior**:
> - Fixes visibility toggle in `EnvironmentVariablesPanel` by using
`key` instead of `index` for `toggleVisibility`, `updateEnvVar`, and
`deleteEnvVar` functions.
>     - Removes animation delay based on index in `env-vars.tsx`.
>   - **Storybook**:
> - Updates heading text from
`JSON.stringify(useAtomValue(envVarsAtom))` to `envVars` in
`EnvVars.stories.tsx`.
> - Removes comments about default required environment variables in
`EnvVars.stories.tsx`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup>
for 300e92e. It will automatically
update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

Author: sxlijin

typescript/playground-common/src/shared/baml-project-panel/playground-panel/side-bar/env-vars.tsx

@@ -140,25 +140,22 @@ export const EnvironmentVariablesPanel: React.FC = () => {
   const { toast } = useToast()
 
   // Toggle visibility of an environment variable
-  const toggleVisibility = (index: number) => {
-    const envVar = envVars[index]
+  const toggleVisibility = (key: string) => {
     setVisibility((prev) => ({
       ...prev,
-      [envVar.key]: !envVar.hidden,
+      [key]: !prev[key],
     }))
   }
 
   // Update an environment variable immediately
-  const updateEnvVar = (index: number, value: string) => {
-    const envVar = envVars[index]
+  const updateEnvVar = (key: string, value: string) => {
     const newVars = { ...currentEnvVars }
-    newVars[envVar.key] = value
+    newVars[key] = value
     setEnvVars(newVars)
   }
 
   // Delete an environment variable
-  const deleteEnvVar = (index: number) => {
-    const { key } = envVars[index]
+  const deleteEnvVar = (key: string) => {
     const newVars = { ...currentEnvVars }
     delete newVars[key]
     setEnvVars(newVars)
@@ -259,11 +256,11 @@ export const EnvironmentVariablesPanel: React.FC = () => {
           <tbody>
             {envVars
               .filter(({ key }) => key !== 'BOUNDARY_PROXY_URL')
-              .map((env, index) => (
+              .map((env) => (
                 <motion.tr
                   initial={{ opacity: 0, y: 2 }}
                   animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: index * 0.001, duration: 0.05 }}
+                  transition={{ duration: 0.05 }}
                   key={env.key}
                   className='relative hover:bg-accent/50 rounded-md'
                 >
@@ -280,7 +277,7 @@ export const EnvironmentVariablesPanel: React.FC = () => {
                           <Input
                             type={env.hidden ? 'password' : 'text'}
                             value={typeof env.value === 'string' ? escapeValue(env.value) : ''}
-                            onChange={(e) => updateEnvVar(index, unescapeValue(e.target.value))}
+                            onChange={(e) => updateEnvVar(env.key, unescapeValue(e.target.value))}
                             className='h-6 text-xs font-mono placeholder:font-sans min-w-32'
                             placeholder={env.required && !env.value ? '<unset>' : undefined}
                             autoComplete='off'
@@ -302,7 +299,7 @@ export const EnvironmentVariablesPanel: React.FC = () => {
                               variant='ghost'
                               size='sm'
                               className='p-0.5 w-5 h-5'
-                              onClick={() => toggleVisibility(index)}
+                              onClick={() => toggleVisibility(env.key)}
                             >
                               {env.hidden ? (
                                 <EyeOff className='w-4 h-4 text-muted-foreground hover:text-primary' />
@@ -323,7 +320,7 @@ export const EnvironmentVariablesPanel: React.FC = () => {
                               variant='ghost'
                               size='sm'
                               className='p-0.5 w-5 h-5'
-                              onClick={() => deleteEnvVar(index)}
+                              onClick={() => deleteEnvVar(env.key)}
                             >
                               <Trash2 className='w-4 h-4 text-muted-foreground hover:text-destructive' />
                             </Button>
@@ -340,7 +337,7 @@ export const EnvironmentVariablesPanel: React.FC = () => {
             <motion.tr
               initial={{ opacity: 0, y: 2 }}
               animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: envVars.length * 0.001, duration: 0.05 }}
+              transition={{ duration: 0.05 }}
               className='rounded-md'
             >
               <td className='pl-2 pr-0.5 py-0.5'>

typescript/vscode-ext/packages/web-panel/src/stories/EnvVars.stories.tsx

@@ -32,7 +32,7 @@ const WrappedEnvVars: React.FC = () => {
         <div className='flex gap-8 items-start'>
           <EnvironmentVariablesPanel />
           <div className='p-4 bg-[#1e1e1e] rounded-lg min-w-[300px]'>
-            <h3 className='mb-2 text-sm font-mono'>JSON.stringify(useAtomValue(envVarsAtom))</h3>
+            <h3 className='mb-2 text-sm font-mono'>envVars</h3>
             <pre className='text-xs'>{JSON.stringify(envVars, null, 2)}</pre>
           </div>
         </div>
@@ -68,7 +68,6 @@ export const NoRequiredEnvVarsAreSet = {
   ],
 }
 
-// ANTHROPIC_API_KEY and OPENAI_API_KEY are required by default
 export const SomeRequiredEnvVarsAreSet = {
   decorators: [
     (Story: React.FC) => (
@@ -91,7 +90,6 @@ export const SomeRequiredEnvVarsAreSet = {
   ],
 }
 
-// ANTHROPIC_API_KEY and OPENAI_API_KEY are required by default
 export const AllRequiredEnvVarsAreSet = {
   decorators: [
     (Story: React.FC) => (
@@ -124,7 +122,6 @@ export const EnvVarContainsNewlines = {
   ],
 }
 
-// ANTHROPIC_API_KEY and OPENAI_API_KEY are required by default
 export const TableWith100EnvVars = {
   decorators: [
     (Story: React.FC) => (