Improvement: Update rule trigger api routing by agentId

src/lib/services/agent-service.js

@@ -115,6 +115,17 @@ export async function getAgentRuleOptions() {
     return response.data;
 }
 
+/**
+ * Get agent rule options by agent id
+ * @param {string} agentId
+ * @returns {Promise<import('$agentTypes').AgentRule[]>}
+ */
+export async function getAgentRuleOptionsById(agentId) {
+    const url = endpoints.agentRuleOptionsByIdUrl.replace("{agentId}", agentId);
+    const response = await axios.get(url);
+    return response.data;
+}
+
 /**
  * Get agent rule config options
  * @returns {Promise<any>}

src/lib/services/api-endpoints.js

@@ -40,6 +40,7 @@ export const endpoints = {
     agentCreateUrl: `${host}/agent`,
     agentUtilityOptionsUrl: `${host}/agent/utility/options`,
     agentRuleOptionsUrl: `${host}/rule/triggers`,
+    agentRuleOptionsByIdUrl: `${host}/rule/triggers/{agentId}`,
     agentRuleConfigOptionsUrl: `${host}/rule/config/options`,
     agentLabelsUrl: `${host}/agent/labels`,
 

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

@@ -1,6 +1,5 @@
 <script>
-    import { onMount } from 'svelte';
-    import { getAgentRuleOptions, getAgentRuleConfigOptions } from '$lib/services/agent-service';
+    import { getAgentRuleOptionsById, getAgentRuleConfigOptions } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
 	import AgentRuleItem from './agent-rule-item.svelte';
@@ -79,17 +78,52 @@
     /** @type {HTMLElement} */
     let scrollContainer;
 
-    onMount(async () =>{
+    // 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 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();
+                    }
+                }
+            })();
+        }
+    });
+
+    // Initialize window size on mount
+    $effect(() => {
         resizeWindow();
-        Promise.all([
-            loadAgentRuleOptions(),
-            loadAgentRuleConfigOptions()
-        ]);
     });
 
-    function loadAgentRuleOptions() {
-        return new Promise((resolve) => {
-            getAgentRuleOptions().then(data => {
+    /**
+     * @param {string} requestedAgentId - The agent ID for which we're loading options
+     */
+    function loadAgentRuleOptions(requestedAgentId) {
+        return new Promise((resolve, reject) => {
+            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,
@@ -105,6 +139,13 @@
                 }, ...list];
                 init();
                 resolve('done');
+            }).catch(error => {
+                console.error('Failed to load agent rule options:', error);
+                // Guard: only apply error state if agent hasn't changed
+                if (agent.id === requestedAgentId) {
+                    ruleOptions = [{ name: "", displayName: "" }];
+                }
+                reject(error);
             });
         });
     }
@@ -119,9 +160,18 @@
         innerRefresh(list);
     }
 
-    function loadAgentRuleConfigOptions() {
-        return new Promise((resolve) => {
+    /**
+     * @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 })) || [];
@@ -130,6 +180,14 @@
                     ...list
                 ];
                 resolve('done');
+            }).catch(error => {
+                console.error('Failed to load agent rule config options:', error);
+                // Guard: only apply error state if agent hasn't changed
+                if (agent.id === requestedAgentId) {
+                    ruleConfigs = {};
+                    configOptions = [{ name: '' }];
+                }
+                reject(error);
             });
         });
     }