Update rule trigger api routing by agentId #3

Author: Visagan Guruparan

src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte

@@ -81,15 +81,29 @@
     // React to agent.id changes to reload agent-specific trigger options
     $effect(() => {
         if (agent?.id) {
+            // Capture current agent.id to prevent race conditions
+            const requestedAgentId = agent.id;
+
             // Reset state when agent changes
             ruleOptions = [];
             innerRules = [];
 
-            // Load agent-specific data
-            Promise.all([
-                loadAgentRuleOptions(),
-                loadAgentRuleConfigOptions()
-            ]);
+            // Load agent-specific data with error handling
+            void (async () => {
+                try {
+                    await Promise.all([
+                        loadAgentRuleOptions(requestedAgentId),
+                        loadAgentRuleConfigOptions(requestedAgentId)
+                    ]);
+                } catch (error) {
+                    // Error already logged in individual loaders
+                    // Ensure init() is called even if options fail to load
+                    // so existing agent rules still render
+                    if (agent.id === requestedAgentId && innerRules.length === 0) {
+                        init();
+                    }
+                }
+            })();
         }
     });
 
@@ -98,9 +112,18 @@
         resizeWindow();
     });
 
-    function loadAgentRuleOptions() {
+    /**
+     * @param {string} requestedAgentId - The agent ID for which we're loading options
+     */
+    function loadAgentRuleOptions(requestedAgentId) {
         return new Promise((resolve, reject) => {
-            getAgentRuleOptionsById(agent.id).then(data => {
+            getAgentRuleOptionsById(requestedAgentId).then(data => {
+                // Guard: only apply results if agent hasn't changed
+                if (agent.id !== requestedAgentId) {
+                    resolve('stale');
+                    return;
+                }
+
                 const list = data?.map(x => {
                     return {
                         name: x.trigger_name,
@@ -118,7 +141,10 @@
                 resolve('done');
             }).catch(error => {
                 console.error('Failed to load agent rule options:', error);
-                ruleOptions = [{ name: "", displayName: "" }];
+                // Guard: only apply error state if agent hasn't changed
+                if (agent.id === requestedAgentId) {
+                    ruleOptions = [{ name: "", displayName: "" }];
+                }
                 reject(error);
             });
         });
@@ -134,9 +160,18 @@
         innerRefresh(list);
     }
 
-    function loadAgentRuleConfigOptions() {
+    /**
+     * @param {string} requestedAgentId - The agent ID for which we're loading config options
+     */
+    function loadAgentRuleConfigOptions(requestedAgentId) {
         return new Promise((resolve, reject) => {
             getAgentRuleConfigOptions().then(data => {
+                // Guard: only apply results if agent hasn't changed
+                if (agent.id !== requestedAgentId) {
+                    resolve('stale');
+                    return;
+                }
+
                 ruleConfigs = data || {};
                 const keys = Object.keys(data || {});
                 const list = keys?.map(x => ({ name: x })) || [];
@@ -147,8 +182,11 @@
                 resolve('done');
             }).catch(error => {
                 console.error('Failed to load agent rule config options:', error);
-                ruleConfigs = {};
-                configOptions = [{ name: '' }];
+                // Guard: only apply error state if agent hasn't changed
+                if (agent.id === requestedAgentId) {
+                    ruleConfigs = {};
+                    configOptions = [{ name: '' }];
+                }
                 reject(error);
             });
         });