feat: auto-update JSON template with environment params

src/App.tsx

@@ -49,12 +49,14 @@ function App() {
       }
       return newEnvs;
     });
-    
+
-    // Also update config.envs to keep it in sync
+    // Also update config.envs and template to keep them in sync
     setConfig(prevConfig => {
       const newConfig = new Config();
       newConfig.envs = prevConfig.envs.map(e => e.id === env.id ? env : e);
+      // Update template JSON with params from this environment
       newConfig.template = prevConfig.template;
+      newConfig.updateTemplateFromEnv(env);
       return newConfig;
     });
 

src/models/Config.tsx

@@ -60,6 +60,36 @@ export class Config {
     }
   }
 
+  /**
+   * Updates the template JSON by adding/updating params from the given environment.
+   * Params are added as "paramName": "paramValue" pairs.
+   * Existing params in template are preserved if not in the env.
+   */
+  updateTemplateFromEnv(env: Env) {
+    let templateObj: Record<string, any> = {};
+    
+    // Try to parse existing template as JSON
+    try {
+      if (this.template.content.trim()) {
+        templateObj = JSON.parse(this.template.content);
+      }
+    } catch (e) {
+      // If parsing fails, start with empty object
+      console.warn("Template is not valid JSON, starting fresh");
+    }
+
+    // Add/update params from the environment
+    for (const param of env.params) {
+      if (param.name && param.name.trim() !== "") {
+        templateObj[param.name] = param.value ?? "";
+      }
+    }
+
+    // Convert back to formatted JSON string
+    const newTemplateContent = JSON.stringify(templateObj, null, 4);
+    this.template = new ConfigTemplate(newTemplateContent);
+  }
+
   validateParams(): string[] {
     const envKeys = this.envs.map(env => env.params.map(param => param.name)).flat();
     const missingParams = this.template.Params.filter(param => param != Config.ENV_NAME_PARAM && !envKeys.includes(param));