Improve frontend panel de control

frontend/src/components/ui/KeyValueEditor/KeyValueEditor.tsx

@@ -35,12 +35,19 @@ export const KeyValueEditor: React.FC<KeyValueEditorProps> = ({
   const [showRawJson, setShowRawJson] = useState(false);
   const [rawJson, setRawJson] = useState('');
   const [jsonError, setJsonError] = useState<string | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
 
-  // Initialize pairs from value
+  // Initialize pairs from value only on first mount or when value changes from external source
   useEffect(() => {
+    // Skip if already initialized with internal changes
+    if (isInitialized && pairs.length > 0) {
+      return;
+    }
+
     if (!value) {
       setPairs([]);
       setRawJson('{}');
+      setIsInitialized(true);
       return;
     }
 
@@ -51,6 +58,7 @@ export const KeyValueEditor: React.FC<KeyValueEditorProps> = ({
         if (value.trim() === '') {
           setPairs([]);
           setRawJson('{}');
+          setIsInitialized(true);
           return;
         }
         jsonObj = JSON.parse(value);
@@ -58,23 +66,28 @@ export const KeyValueEditor: React.FC<KeyValueEditorProps> = ({
         jsonObj = value;
       }
 
-      const newPairs: KeyValuePair[] = Object.entries(jsonObj).map(([key, val], index) => ({
-        id: `pair-${Date.now()}-${index}`,
-        key,
-        value: String(val),
-        type: detectType(val)
-      }));
+      // Only update if there's actual data
+      if (Object.keys(jsonObj).length > 0) {
+        const newPairs: KeyValuePair[] = Object.entries(jsonObj).map(([key, val], index) => ({
+          id: `pair-${Date.now()}-${index}`,
+          key,
+          value: String(val),
+          type: detectType(val)
+        }));
 
-      setPairs(newPairs);
-      setRawJson(JSON.stringify(jsonObj, null, 2));
-      setJsonError(null);
+        setPairs(newPairs);
+        setRawJson(JSON.stringify(jsonObj, null, 2));
+        setJsonError(null);
+      }
+      setIsInitialized(true);
     } catch (error) {
       // If parsing fails, treat as empty
       setPairs([]);
       setRawJson(typeof value === 'string' ? value : '{}');
       setJsonError('Invalid JSON');
+      setIsInitialized(true);
     }
-  }, [value]);
+  }, [value, isInitialized, pairs.length]);
 
   const detectType = (value: any): 'string' | 'number' | 'boolean' => {
     if (typeof value === 'boolean') return 'boolean';
@@ -112,7 +125,8 @@ export const KeyValueEditor: React.FC<KeyValueEditorProps> = ({
     };
     const newPairs = [...pairs, newPair];
     setPairs(newPairs);
-    onChange?.(pairsToJson(newPairs));
+    // Don't call onChange yet - wait for user to fill in the key
+    // onChange will be called when they type in the key/value
   };
 
   const handleRemovePair = (id: string) => {