From 5b5be16770bb66b9283888367200006379245a58 Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 4 Dec 2025 18:56:31 +1000
Subject: [PATCH] fix: display environment variable names correctly in tool
 modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously env vars were stored as an array but component used Object.entries(),
causing array indices (0, 1, 2...) to appear as variable names instead of actual
names like 'EXA_API_KEY'.

Updated component to:
- Reflect correct array structure in Tool interface
- Iterate directly over array with .map() instead of Object.entries()
- Access envVar.name field for display
- Added support for displaying default values if present

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/components/sidebar/ToolsSidebar.tsx   | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/playground/src/components/sidebar/ToolsSidebar.tsx b/apps/playground/src/components/sidebar/ToolsSidebar.tsx
index 0fcd797..b5586ab 100644
--- a/apps/playground/src/components/sidebar/ToolsSidebar.tsx
+++ b/apps/playground/src/components/sidebar/ToolsSidebar.tsx
@@ -14,7 +14,7 @@ interface Tool {
   version: string;
   qualityScore?: number;
   frameworks?: string[];
-  env?: Record<string, { description: string; required?: boolean }>;
+  env?: Array<{ name: string; description: string; required?: boolean; default?: string }>;
   importUrl?: string;
 }
 
@@ -177,23 +177,28 @@ export function ToolsSidebar(): React.ReactElement {
             )}
 
             {/* Environment Variables */}
-            {selectedTool.env && Object.keys(selectedTool.env).length > 0 && (
+            {selectedTool.env && selectedTool.env.length > 0 && (
               <div className="mb-6">
                 <h3 className="mb-2 text-lg font-semibold text-foreground">
                   Environment Variables
                 </h3>
                 <div className="space-y-2">
-                  {Object.entries(selectedTool.env).map(([key, config]) => (
-                    <div key={key} className="rounded border border-border bg-surface p-3">
+                  {selectedTool.env.map((envVar) => (
+                    <div key={envVar.name} className="rounded border border-border bg-surface p-3">
                       <div className="mb-1 flex items-center gap-2">
-                        <code className="text-sm font-mono text-foreground">{key}</code>
-                        {config.required && (
+                        <code className="text-sm font-mono text-foreground">{envVar.name}</code>
+                        {envVar.required && (
                           <Badge variant="error" size="sm">
                             Required
                           </Badge>
                         )}
                       </div>
-                      <p className="text-xs text-foreground-secondary">{config.description}</p>
+                      <p className="text-xs text-foreground-secondary">{envVar.description}</p>
+                      {envVar.default && (
+                        <p className="mt-1 text-xs text-foreground-tertiary">
+                          Default: <code className="font-mono">{envVar.default}</code>
+                        </p>
+                      )}
                     </div>
                   ))}
                 </div>