From f947aeb21b0a3a73c8b401de263deb68c69769ce Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Sat, 20 Dec 2025 23:22:04 -0500
Subject: [PATCH] feat(ui): add value input for new environment variables

- Add newEnvValue state to profile editor
- Update add variable section to include key + value inputs
- Apply to both OpenRouter and standard profile editors
- Clear both key and value after adding variable
---
 .../profiles/editor/env-editor-section.tsx      | 15 +++++++++++++--
 .../profiles/editor/friendly-ui-section.tsx     | 17 +++++++++++++++--
 ui/src/components/profiles/editor/index.tsx     |  9 +++++++--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/profiles/editor/env-editor-section.tsx b/ui/src/components/profiles/editor/env-editor-section.tsx
index 2bee9534..f9ff8c30 100644
--- a/ui/src/components/profiles/editor/env-editor-section.tsx
+++ b/ui/src/components/profiles/editor/env-editor-section.tsx
@@ -16,7 +16,9 @@ import type { Settings } from './types';
 interface EnvEditorSectionProps {
   currentSettings: Settings | undefined;
   newEnvKey: string;
+  newEnvValue: string;
   onNewEnvKeyChange: (value: string) => void;
+  onNewEnvValueChange: (value: string) => void;
   onEnvValueChange: (key: string, value: string) => void;
   onAddEnvVar: () => void;
 }
@@ -24,7 +26,9 @@ interface EnvEditorSectionProps {
 export function EnvEditorSection({
   currentSettings,
   newEnvKey,
+  newEnvValue,
   onNewEnvKeyChange,
+  onNewEnvValueChange,
   onEnvValueChange,
   onAddEnvVar,
 }: EnvEditorSectionProps) {
@@ -82,8 +86,15 @@ export function EnvEditorSection({
             placeholder="VARIABLE_NAME"
             value={newEnvKey}
             onChange={(e) => onNewEnvKeyChange(e.target.value.toUpperCase())}
-            className="font-mono text-sm h-8"
-            onKeyDown={(e) => e.key === 'Enter' && onAddEnvVar()}
+            className="font-mono text-sm h-8 w-2/5"
+            onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
+          />
+          <Input
+            placeholder="value"
+            value={newEnvValue}
+            onChange={(e) => onNewEnvValueChange(e.target.value)}
+            className="font-mono text-sm h-8 flex-1"
+            onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
           />
           <Button
             variant="outline"
diff --git a/ui/src/components/profiles/editor/friendly-ui-section.tsx b/ui/src/components/profiles/editor/friendly-ui-section.tsx
index a591a730..e45ebe59 100644
--- a/ui/src/components/profiles/editor/friendly-ui-section.tsx
+++ b/ui/src/components/profiles/editor/friendly-ui-section.tsx
@@ -26,7 +26,9 @@ interface FriendlyUISectionProps {
   data: SettingsResponse | undefined;
   currentSettings: Settings | undefined;
   newEnvKey: string;
+  newEnvValue: string;
   onNewEnvKeyChange: (key: string) => void;
+  onNewEnvValueChange: (value: string) => void;
   onEnvValueChange: (key: string, value: string) => void;
   onAddEnvVar: () => void;
   onEnvBulkChange?: (env: Record<string, string>) => void;
@@ -37,7 +39,9 @@ export function FriendlyUISection({
   data,
   currentSettings,
   newEnvKey,
+  newEnvValue,
   onNewEnvKeyChange,
+  onNewEnvValueChange,
   onEnvValueChange,
   onAddEnvVar,
   onEnvBulkChange,
@@ -222,8 +226,15 @@ export function FriendlyUISection({
                       placeholder="VARIABLE_NAME"
                       value={newEnvKey}
                       onChange={(e) => onNewEnvKeyChange(e.target.value.toUpperCase())}
-                      className="font-mono text-sm h-8"
-                      onKeyDown={(e) => e.key === 'Enter' && onAddEnvVar()}
+                      className="font-mono text-sm h-8 w-2/5"
+                      onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
+                    />
+                    <Input
+                      placeholder="value"
+                      value={newEnvValue}
+                      onChange={(e) => onNewEnvValueChange(e.target.value)}
+                      className="font-mono text-sm h-8 flex-1"
+                      onKeyDown={(e) => e.key === 'Enter' && newEnvKey.trim() && onAddEnvVar()}
                     />
                     <Button
                       variant="outline"
@@ -242,7 +253,9 @@ export function FriendlyUISection({
               <EnvEditorSection
                 currentSettings={currentSettings}
                 newEnvKey={newEnvKey}
+                newEnvValue={newEnvValue}
                 onNewEnvKeyChange={onNewEnvKeyChange}
+                onNewEnvValueChange={onNewEnvValueChange}
                 onEnvValueChange={onEnvValueChange}
                 onAddEnvVar={onAddEnvVar}
               />
diff --git a/ui/src/components/profiles/editor/index.tsx b/ui/src/components/profiles/editor/index.tsx
index 0c44c6c3..c356efd9 100644
--- a/ui/src/components/profiles/editor/index.tsx
+++ b/ui/src/components/profiles/editor/index.tsx
@@ -21,6 +21,7 @@ export function ProfileEditor({ profileName, onDelete }: ProfileEditorProps) {
   const [conflictDialog, setConflictDialog] = useState(false);
   const [rawJsonEdits, setRawJsonEdits] = useState<string | null>(null);
   const [newEnvKey, setNewEnvKey] = useState('');
+  const [newEnvValue, setNewEnvValue] = useState('');
   const queryClient = useQueryClient();
 
   // Fetch settings for selected profile
@@ -69,10 +70,12 @@ export function ProfileEditor({ profileName, onDelete }: ProfileEditorProps) {
   const addNewEnvVar = () => {
     if (!newEnvKey.trim()) return;
     const key = newEnvKey.trim();
-    const newEnv = { ...(currentSettings?.env || {}), [key]: '' };
-    setLocalEdits((prev) => ({ ...prev, [key]: '' }));
+    const value = newEnvValue;
+    const newEnv = { ...(currentSettings?.env || {}), [key]: value };
+    setLocalEdits((prev) => ({ ...prev, [key]: value }));
     setRawJsonEdits(JSON.stringify({ ...currentSettings, env: newEnv }, null, 2));
     setNewEnvKey('');
+    setNewEnvValue('');
   };
 
   // Computed validity and changes check
@@ -172,7 +175,9 @@ export function ProfileEditor({ profileName, onDelete }: ProfileEditorProps) {
               data={data}
               currentSettings={currentSettings}
               newEnvKey={newEnvKey}
+              newEnvValue={newEnvValue}
               onNewEnvKeyChange={setNewEnvKey}
+              onNewEnvValueChange={setNewEnvValue}
               onEnvValueChange={updateEnvValue}
               onAddEnvVar={addNewEnvVar}
             />