diff --git a/package-lock.json b/package-lock.json
index aab7e87d..3f242cdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@codemirror/commands": "^6.10.0",
 				"@codemirror/lang-javascript": "^6.2.4",
+				"@codemirror/lang-json": "^6.0.2",
 				"@codemirror/lang-python": "^6.2.1",
 				"@codemirror/language": "^6.11.3",
 				"@codemirror/state": "^6.5.2",
@@ -133,9 +134,9 @@
 			}
 		},
 		"node_modules/@codemirror/lang-json": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
-			"integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+			"integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
 			"dependencies": {
 				"@codemirror/language": "^6.0.0",
 				"@lezer/json": "^1.0.0"
diff --git a/package.json b/package.json
index 222400ea..ecd73242 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 	"dependencies": {
 		"@codemirror/commands": "^6.10.0",
 		"@codemirror/lang-javascript": "^6.2.4",
+		"@codemirror/lang-json": "^6.0.2",
 		"@codemirror/lang-python": "^6.2.1",
 		"@codemirror/language": "^6.11.3",
 		"@codemirror/state": "^6.5.2",
diff --git a/src/lib/common/modals/PlainModal.svelte b/src/lib/common/modals/PlainModal.svelte
index 9ffd6d97..27851df9 100644
--- a/src/lib/common/modals/PlainModal.svelte
+++ b/src/lib/common/modals/PlainModal.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Modal, ModalBody, ModalHeader } from "@sveltestrap/sveltestrap";
+    import { Modal, ModalBody } from "@sveltestrap/sveltestrap";
 
     /** @type {boolean} */
     export let isOpen;
@@ -16,6 +16,9 @@
     /** @type {string} */
     export let containerStyles = '';
 
+    /** @type {string} */
+    export let bodyStyles = '';
+
     /** @type {() => void} */
     export let toggleModal;
 </script>
@@ -30,7 +33,7 @@
     toggle={() => toggleModal()}
     unmountOnClose
 >
-    <ModalBody>
+    <ModalBody style={bodyStyles}>
         <slot />
     </ModalBody>
 </Modal>
\ No newline at end of file
diff --git a/src/lib/common/shared/CodeScript.svelte b/src/lib/common/shared/CodeScript.svelte
index 4a1c42fe..a95851fc 100644
--- a/src/lib/common/shared/CodeScript.svelte
+++ b/src/lib/common/shared/CodeScript.svelte
@@ -1,7 +1,7 @@
 <script>
     import { onMount, createEventDispatcher } from "svelte";
     import CodeMirror from "svelte-codemirror-editor";
-    import { keymap } from "@codemirror/view";
+    import { keymap, lineNumbers } from "@codemirror/view";
     import { indentUnit, indentOnInput, indentService } from "@codemirror/language";
     import { defaultKeymap, history, indentWithTab, historyKeymap } from "@codemirror/commands";
     import { EditorState } from "@codemirror/state";
@@ -20,6 +20,15 @@
     /** @type {string} */
     export let containerClasses = '';
 
+    /** @type {boolean} */
+    export let useDarkTheme = true;
+
+    /** @type {boolean} */
+    export let hideLineNumber = false;
+
+    /** @type {boolean} */
+    export let editable = true;
+
 
     /** @type {import("@codemirror/state").Extension[]} */
     const baseExtensions = [
@@ -27,7 +36,7 @@
         EditorState.tabSize.of(4),
         indentOnInput(),
         history(),
-        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
+        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
     ];
 
     /** @type {import("@codemirror/state").Extension[]} */
@@ -59,6 +68,17 @@
                 javascript(),
                 ...baseExtensions
             ];
+        } else {
+            extensions = [
+                ...baseExtensions
+            ];
+        }
+
+        if (hideLineNumber) {
+            extensions = [
+                lineNumbers({ formatNumber: () => "" }),
+                ...extensions
+            ];
         }
     });
 
@@ -73,8 +93,9 @@
 
 <CodeMirror
     class={`code-script-container ${containerClasses}`}
-    theme={oneDark}
     lineWrapping
+    theme={useDarkTheme ? oneDark : null}
+    editable={editable}
     extensions={extensions}
     value={scriptText}
     on:change={e => handleChange(e)}
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 4c4c255d..0071dfc9 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -233,6 +233,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/agent/labels', 'g'),
         new RegExp('http(s*)://(.*?)/agent/tasks', 'g'),
         new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/rule/triggers', 'g'),
+        new RegExp('http(s*)://(.*?)/rule/config/options', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/state/keys', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/llm-configs', 'g'),
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index be941c2a..d1ca7bdd 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -194,6 +194,7 @@
  * @property {boolean} disabled
  * @property {string?} [visibility_expression]
  * @property {UtilityItem[]} items
+ * @property {boolean} [expanded]
  */
 
 /**
@@ -212,6 +213,7 @@
  * @property {string} server_id 
  * @property {boolean} disabled 
  * @property {import('$commonTypes').NameBase[]} functions
+ * @property {boolean} [expanded]
  */
 
 /**
@@ -221,20 +223,21 @@
  * @property {string?} [displayName]
  * @property {boolean} disabled
  * @property {number?} [confidence]
+ * @property {boolean} [expanded]
  */
 
 /**
  * @typedef {Object} AgentRule
  * @property {string} trigger_name 
- * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [config]
  * @property {any?} [output_args]
  * @property {string?} [json_args]
  * @property {string?} [statement]
+ * @property {boolean} [expanded]
  */
 
-
 /**
  * @typedef {Object} AgentTaskSearchOption
  * @property {string?} [agentId]
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
index 8a0c1f6e..c2584b22 100644
--- a/src/lib/scss/custom/common/_common.scss
+++ b/src/lib/scss/custom/common/_common.scss
@@ -225,4 +225,12 @@ button:focus {
     text-decoration: none !important;
     transform: none !important;
   }
+}
+
+.collapse-toggle {
+  transition: transform 0.2s ease-in-out;
+}
+
+.collapse-toggle.rotated {
+  transform: rotate(90deg);
 }
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 1117ffab..e6d35154 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -175,6 +175,16 @@
     border: 1px dashed var(--bs-primary);
     border-radius: 5px;
 
+    .config-header {
+        cursor: pointer;
+        user-select: none;
+        outline: none;
+    }
+
+    .config-header:hover h6 {
+        opacity: 0.8;
+    }
+
     .llm-config-item {
         display: flex;
         flex-wrap: wrap;
@@ -323,6 +333,25 @@
     }
 }
 
+.agent-rule-config {
+    min-height: 0px;
+    max-height: 200px;
+}
+
+.rule-config-modal {
+    .modal-content {
+        width: 1400px;
+        max-width: calc(100vw - 2rem);
+        height: 80vh;
+        margin: 0 auto;
+    }
+
+    .modal-body {
+        height: 100%;
+        box-sizing: border-box;
+    }
+}
+
 .code-editor {
     max-height: 500px;
     overflow-y: auto;
@@ -339,6 +368,16 @@
 // Responsive adjustments for utility
 @media (max-width: 1250px) {
     .agent-config-container {
+        .config-header {
+            cursor: pointer;
+            user-select: none;
+            outline: none;
+        }
+
+        .config-header:hover h6 {
+            opacity: 0.8;
+        }
+
         .llm-config-item {
             flex-direction: column;
 
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index caa9e172..86b48b85 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -115,6 +115,16 @@ export async function getAgentRuleOptions() {
     return response.data;
 }
 
+/**
+ * Get agent rule criteria providers
+ * @returns {Promise<any[]>}
+ */
+export async function getAgentRuleConfigOptions() {
+    const url = endpoints.agentRuleConfigOptionsUrl;
+    const response = await axios.get(url);
+    return response.data;
+}
+
 /**
  * Get agent labels
  * @param {number?} [size]
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 38d18ac1..84ad5179 100644
--- a/src/lib/services/api-endpoints.js
+++ b/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`,
+    agentRuleConfigOptionsUrl: `${host}/rule/config/options`,
     agentLabelsUrl: `${host}/agent/labels`,
 
     // agent code script:
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 093711f9..2a828342 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1682,6 +1682,7 @@
 	<CodeScript
 		language={codeLanguage || 'python'}
 		scriptText={codeScript}
+		editable={false}
 	/>
 </PlainModal>
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte
deleted file mode 100644
index d85f5624..00000000
--- a/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte
+++ /dev/null
@@ -1,358 +0,0 @@
-<script>
-    import { onMount } from 'svelte';
-    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
-	import { getServerConfigs } from '$lib/services/mcp-service';
-	import { scrollToBottom } from '$lib/helpers/utils/common';
-    
-    const limit = 100;
-
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchMcpTools = () => {
-        const candidates = innerMcps?.filter(x => !!x.name)?.map(x => {
-            /** @type {import('$commonTypes').NameBase[]} */
-            const functions = [];
-
-            const uniqueFns = new Set();
-            const fns = x.functions.filter(f => !!f.name);
-
-            fns.forEach(f => {
-                if (!uniqueFns.has(f.name)) {
-                    functions.push({ ...f });
-                    uniqueFns.add(f.name);
-                }
-            });
-
-           return {
-                ...x,
-                name: x.name,
-                disabled: x.disabled,
-                functions: functions,
-           };
-        });
-
-        /** @type {import('$agentTypes').AgentMcpTool[]} */
-        const mcps = [];
-        const unique = new Set();
-        candidates.forEach(x => {
-            if (!unique.has(x.name)) {
-                mcps.push(x);
-                unique.add(x.name);
-            }
-        });
-
-        innerRefresh(mcps);
-        return mcps;
-    }
-
-    /** @type {any[]} */
-    let mcpOptions = [];
-
-    /** @type {import('$agentTypes').AgentMcpTool[]} */
-    let innerMcps = [];
-
-    /** @type {HTMLElement} */
-    let scrollContainer;
-
-
-    onMount(async () => {
-        getServerConfigs().then(res => {
-            const list = res?.map(x => {
-                return {
-                    id: x.id,
-                    name: x.name,
-                    tools: [
-                        '',
-                        ...x.tools
-                    ]
-                };
-            }) || [];
-            mcpOptions = [
-                {
-                    id: '',
-                    name: '',
-                    tools: ['']
-                },
-                ...list
-            ];
-        }).catch(() => {
-            mcpOptions = [];
-        });
-        init();
-    });
-
-    function init() {
-        const list = agent.mcp_tools?.map(x => {
-            return {
-                ...x,
-                displayName: ""
-            };
-        }) || [];
-        innerRefresh(list);
-    }
-
-    /** @param {import('$agentTypes').AgentMcpTool[]} list */
-    function innerRefresh(list) {
-        innerMcps = list?.map(x => {
-            return {
-                name: x.name,
-                server_id: x.server_id,
-                disabled: x.disabled,
-                functions: x.functions?.map(x => ({ ...x })) || []
-            }
-        }) || [];
-    }
-
-    /**
-	 * @param {any} e
-	 * @param {number} idx
-	 */
-     function changeMcp(e, idx) {
-        const found = innerMcps.find((_, index) => index === idx);
-        if (!found) return;
-        
-        const val = e.target.value;
-        const name = mcpOptions.find(x => x.id == val)?.name || '';
-
-        found.name = name;
-        found.server_id = val;
-        found.functions = [];
-        innerRefresh(innerMcps);
-        handleAgentChange();
-    }
-
-    function addMcp() {
-        innerMcps = [
-            ...innerMcps,
-            {
-                name: '',
-                server_id: '',
-                disabled: false,
-                functions: []
-            }
-        ];
-        scrollToBottom(scrollContainer);
-        handleAgentChange();
-    }
-
-    /** @param {number} idx */
-    function deleteMcp(idx) {
-        innerMcps = innerMcps.filter((_, index) => index !== idx);
-        handleAgentChange();
-    }
-
-    /**
-     * @param {any} e
-	 * @param {number} uid
-	 */
-    function toggleMcp(e, uid) {
-        const found = innerMcps.find((_, index) => index === uid);
-        if (!found) return;
-
-        found.disabled = !e.target.checked;
-        innerRefresh(innerMcps);
-        handleAgentChange();
-    }
-
-    /**
-     * @param {any} e
-	 * @param {number} id
-     * @param {number} refId
-     * @param {string} type
-	 */
-    function changeMcpContent(e, id, refId, type) {
-        const found = innerMcps.find((_, index) => index === id);
-        if (!found) return;
-
-        const val = e.target.value;
-        if (type === 'function') {
-            const fn = found.functions.find((_, index) => index == refId);
-            if (fn) {
-                fn.name = val;
-            }
-        }
-        innerRefresh(innerMcps);
-        handleAgentChange();
-    }
-
-    /**
-	 * @param {number} id
-	 * @param {string} type
-	 */
-     function addMcpContent(id, type) {
-        const found = innerMcps.find((_, index) => index === id);
-        if (!found || found.disabled) return;
-
-        if (type === 'function') {
-            found.functions.push({ name: '' });
-        }
-
-        innerRefresh(innerMcps);
-        handleAgentChange();
-    }
-
-    /**
-	 * @param {number} uid
-	 * @param {number} id
-     * @param {string} type
-	 */
-     function deleteMcpContent(uid, id, type) {
-        const found = innerMcps.find((_, index) => index === uid);
-        if (!found || found.disabled) return;
-
-        if (type === 'function') {
-            const fns = found.functions?.filter((_, index) => index !== id) || [];
-            found.functions = fns;
-        }
-        
-        innerRefresh(innerMcps);
-        handleAgentChange();
-    }
-</script>
-
-<Card>
-    <CardBody>
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">MCP Tools</h5>
-            <h6 class="mt-1 mb-3">Tools powered by MCP Servers</h6>
-        </div>
-
-        <div class="agent-utility-container" bind:this={scrollContainer}>
-            {#each innerMcps as mcp, uid (uid)}
-                <div class="utility-wrapper">
-                    <div class="utility-row utility-row-primary">
-                        <div class="utility-label fw-bold">
-                            <div class="line-align-center">{`MCP #${uid + 1}`}</div>
-                            <div class="utility-tooltip">
-                                <div class="line-align-center">
-                                    <Input
-                                        type="checkbox"
-                                        checked={!mcp.disabled}
-                                        on:change={e => toggleMcp(e, uid)}
-                                    />
-                                </div>
-                                <!-- <div
-                                    class="line-align-center fs-6"
-                                    data-bs-toggle="tooltip"
-                                    data-bs-placement="top"
-                                    title="Uncheck to disable MCP"
-                                >
-                                    <i class="bx bx-info-circle" />
-                                </div> -->
-                            </div>
-                        </div>
-                        <div class="utility-value">
-                            <div class="utility-input line-align-center">
-                                <Input
-                                    type="select"
-                                    disabled={mcp.disabled}
-                                    on:change={e => changeMcp(e, uid)}
-                                >
-                                    {#each [...mcpOptions] as option}
-                                        <option value={option.id} selected={option.id == mcp.server_id}>
-                                            {option.displayName || option.name}
-                                        </option>
-                                    {/each}
-                                </Input>
-                            </div>
-                            <div class="utility-delete line-align-center">
-                                <i
-                                    class="bx bxs-no-entry text-danger clickable fs-6"
-                                    role="link"
-                                    tabindex="0"
-                                    on:keydown={() => {}}
-                                    on:click={() => deleteMcp(uid)}
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="utility-row utility-row-secondary">
-                        <div class="utility-content">
-                            <div class="utility-list-item">
-                                <div class="utility-label line-align-center">
-                                    {'Server'}
-                                </div>
-                                <div class="utility-value">
-                                    <div class="utility-input line-align-center">
-                                        <Input
-                                            type="text"
-                                            disabled
-                                            value={mcp.server_id}
-                                        />
-                                    </div>
-                                    <div class="utility-delete line-align-center"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="utility-content">
-                            {#each mcp.functions as fn, fid (fid)}
-                                <div class="utility-list-item">
-                                    <div class="utility-label line-align-center">
-                                        {fid === 0 ? 'Tools' : ''}
-                                    </div>
-                                    <div class="utility-value">
-                                        <div class="utility-input line-align-center">
-                                            <Input
-                                                type="select"
-                                                disabled={mcp.disabled}
-                                                on:change={e => changeMcpContent(e, uid, fid, 'function')}
-                                            >
-                                                {#each [...mcpOptions.find(x => x.id === mcp.server_id)?.tools || []] as option}
-                                                    <option value={option} selected={option == fn.name}>
-                                                        {option}
-                                                    </option> 
-                                                {/each}
-                                            </Input>
-                                        </div>
-                                        <div class="utility-delete line-align-center">
-                                            <i
-                                                class="bx bxs-no-entry text-danger clickable fs-6"
-                                                role="link"
-                                                tabindex="0"
-                                                on:keydown={() => {}}
-                                                on:click={() => deleteMcpContent(uid, fid, 'function')}
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-                            {/each}
-
-                            {#if mcp.functions?.length < limit}
-                                <div class="utility-list-item">
-                                    <div class="utility-label">
-                                        {mcp.functions.length === 0 ? 'Functions' : ''}
-                                    </div>
-                                    <div class="utility-value">
-                                        <i
-                                            class="bx bx-list-plus add-list clickable fs-6"
-                                            role="link"
-                                            tabindex="0"
-                                            on:keydown={() => {}}
-                                            on:click={() => addMcpContent(uid, 'function')}
-                                        />
-                                    </div>
-                                </div>
-                            {/if}
-                        </div>
-                    </div>
-                </div>
-            {/each}
-
-            {#if innerMcps.length < limit}
-                <div class="add-utility">
-                    <Button color="primary" on:click={() => addMcp()}>
-                        <span>
-                            <i class="bx bx-plus" />
-                            <span>Add MCP</span>
-                        </span>
-                    </Button>
-                </div>
-            {/if}
-        </div>
-    </CardBody>
-</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
deleted file mode 100644
index a93d2962..00000000
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ /dev/null
@@ -1,439 +0,0 @@
-<script>
-    import { onMount } from 'svelte';
-    import Swal from 'sweetalert2';
-    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
-	import { getAgentRuleOptions, generateAgentCodeScript } from '$lib/services/agent-service';
-	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
-	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
-    import { ADMIN_ROLES, AI_PROGRAMMER_AGENT_ID, RULE_TRIGGER_CODE_GENERATE_TEMPLATE } from '$lib/helpers/constants';
-	import { AgentCodeScriptType } from '$lib/helpers/enums';
-	import { scrollToBottom } from '$lib/helpers/utils/common';
-
-    const limit = 100;
-    const textLimit = 1024;
-    
-    /** @type {boolean} */
-    let isLoading = false;
-    /** @type {boolean} */
-    let isComplete = false;
-    /** @type {boolean} */
-    let isError = false;
-    /** @type {number} */
-    let duration = 2000;
-    let windowWidth = 0;
-    let windowHeight = 0;
-
-    /** @type {string} */
-    let successText = '';
-    let errorText = '';
-
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {import('$userTypes').UserModel} */
-    export let user;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchRules = () => {
-        const candidates = innerRules?.filter(x => !!x.trigger_name)?.map(x => {
-            return {
-                trigger_name: x.trigger_name,
-                disabled: x.disabled,
-                criteria: x.criteria?.trim()
-            };
-        });
-
-        /** @type {import('$agentTypes').AgentRule[]} */
-        const rules = [];
-        const unique = new Set();
-        candidates.forEach(x => {
-            if (!unique.has(x.trigger_name)) {
-                rules.push(x);
-                unique.add(x.trigger_name);
-            }
-        });
-
-        innerRefresh(rules);
-        return rules;
-    }
-
-    /** @type {any[]} */
-    let ruleOptions = [];
-
-    /** @type {import('$agentTypes').AgentRule[]} */
-    let innerRules = [];
-
-    /** @type {HTMLElement} */
-    let scrollContainer;
-
-    onMount(async () =>{
-        resizeWindow();
-        getAgentRuleOptions().then(data => {
-            const list = data?.map(x => {
-                return {
-                    name: x.trigger_name,
-                    displayName: "",
-                    output_args: x.output_args,
-                    json_args: x.json_args,
-                    statement: x.statement
-                };
-            }) || [];
-            ruleOptions = [{
-                name: "",
-                displayName: ""
-            }, ...list];
-            init();
-        });
-    });
-
-    function init() {
-        const list = agent.rules?.map(x => {
-            return {
-                ...x,
-                displayName: ""
-            };
-        }) || [];
-        innerRefresh(list);
-    }
-    
-    /**
-	 * @param {any} e
-	 * @param {number} idx
-	 */
-    function changeRule(e, idx) {
-        const found = innerRules.find((_, index) => index === idx);
-        if (!found) return;
-        
-        const val = e.target.value;
-        found.trigger_name = val;
-        innerRefresh(innerRules);
-        handleAgentChange();
-    }
-
-    function addRule() {
-        innerRules = [
-            ...innerRules,
-            {
-                trigger_name: '',
-                criteria: '',
-                displayName: '',
-                disabled: false
-            }
-        ];
-        scrollToBottom(scrollContainer);
-        handleAgentChange();
-    }
-
-    /** @param {number} idx */
-    function deleteRule(idx) {
-        innerRules = innerRules.filter((_, index) => index !== idx);
-        handleAgentChange();
-    }
-
-    /**
-     * @param {any} e
-	 * @param {number} uid
-	 */
-    function toggleRule(e, uid) {
-        const found = innerRules.find((_, index) => index === uid);
-        if (!found) return;
-
-        found.disabled = !e.target.checked;
-        innerRefresh(innerRules);
-        handleAgentChange();
-    }
-
-    /**
-     * @param {any} e
-	 * @param {number} uid
-     * @param {string} field
-	 */
-    function changeContent(e, uid, field) {
-        const found = innerRules.find((_, index) => index === uid);
-        if (!found) return;
-
-        const val = e.target.value;
-        if (field === 'criteria') {
-            found.criteria = val;
-        }
-        innerRefresh(innerRules);
-        handleAgentChange();
-    }
-
-    /**
-	 * @param {import("$agentTypes").AgentRule} rule
-	 */
-    function compileCodeScript(rule) {
-        Swal.fire({
-            title: 'Are you sure?',
-            html: `
-                <div>
-                    <p>Are you sure you want to generate code script <b>"${buildScriptName(rule.trigger_name)}"</b>?</p>
-                    <p>This action will overwrite existing code script if any.</p>
-                </div>
-            `,
-            icon: 'warning',
-            showCancelButton: true,
-			cancelButtonText: 'No',
-            confirmButtonText: 'Yes'
-        }).then(async (result) => {
-            if (result.value) {
-                generateCodeScript(rule);
-            }
-        });
-    }
-
-    /**
-	 * @param {import("$agentTypes").AgentRule} rule
-	 */
-    function generateCodeScript(rule) {
-        return new Promise((resolve, reject) => {
-            isLoading = true;
-            generateAgentCodeScript(agent.id, {
-                text: '',
-                options: {
-                    agent_id: AI_PROGRAMMER_AGENT_ID,
-                    template_name: RULE_TRIGGER_CODE_GENERATE_TEMPLATE,
-                    save_to_db: true,
-                    script_name: buildScriptName(rule.trigger_name),
-                    script_type: AgentCodeScriptType.Src,
-                    data: {
-                        'args_example': { ...rule.output_args },
-                        'user_request': rule.criteria
-                    }
-                }
-            }).then(res => {
-                if (res?.success) {
-                    isLoading = false;
-                    isComplete = true;
-                    successText = "Code script has been generated!";
-                    setTimeout(() => {
-                        isComplete = false;
-                        successText = "";
-                    }, duration);
-                    resolve(res);
-                }  else {
-                    throw "error when generating code script.";
-                }
-            }).catch(() => {
-                isLoading = false;
-                isComplete = false;
-                isError = true;
-                errorText = "Failed to generate code script.";
-                setTimeout(() => {
-                    isError = false;
-                    errorText = "";
-                }, duration);
-                reject();
-            });
-        });
-    }
-
-
-    /** @param {import('$agentTypes').AgentRule[]} list */
-    function innerRefresh(list) {
-        innerRules = list?.map(x => {
-            const found = ruleOptions.find(y => y.name === x.trigger_name);
-            return {
-                ...x,
-                output_args: found?.output_args,
-                json_args: found?.json_args,
-                statement: found?.statement
-            }
-        }) || [];
-    }
-
-    /** @param {string} name */
-    function buildScriptName(name) {
-        let scriptName = name?.trim();
-        if (!name) {
-            scriptName = 'unknown_rule.py';
-        } else {
-            scriptName = `${scriptName.replace(/\s+/g, "_")}_rule.py`;
-        }
-        
-        return scriptName;
-    }
-
-    function resizeWindow() {
-        windowWidth = window.innerWidth;
-        windowHeight = window.innerHeight;
-    }
-</script>
-
-<svelte:window on:resize={() => resizeWindow()}/>
-
-<LoadingToComplete
-    {isLoading}
-    {isComplete}
-    {isError}
-    {successText}
-    {errorText}
-/>
-
-<Card>
-    <CardBody>
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">Triggers & Rules</h5>
-            <h6 class="mt-1 mb-3">Wake-up your agent by rules</h6>
-        </div>
-
-        <div class="agent-utility-container" bind:this={scrollContainer}>
-            {#each innerRules as rule, uid (uid)}
-                <div class="utility-wrapper">
-                    <div class="utility-row utility-row-primary">
-                        <div class="utility-label fw-bold">
-                            <div class="line-align-center">{`Rule #${uid + 1}`}</div>
-                            <div class="utility-tooltip">
-                                <div class="line-align-center">
-                                    <Input
-                                        type="checkbox"
-                                        checked={!rule.disabled}
-                                        on:change={e => toggleRule(e, uid)}
-                                    />
-                                </div>
-                                {#if rule.statement}
-                                <div class="line-align-center">
-                                    <i
-                                        class="bx bx-info-circle text-primary fs-6"
-                                        style="padding-top: 2px;"
-                                        id={`rule-statement-${uid}`}
-                                        data-bs-toggle="tooltip"
-                                        data-bs-placement="top"
-                                        title="Rule arguments"
-                                    />
-                                    <BotsharpTooltip
-                                        containerClasses="agent-utility-desc"
-                                        style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                        target={`rule-statement-${uid}`}
-                                        placement="top"
-                                        persist
-                                    >
-                                        <Markdown
-                                            rawText
-                                            scrollable
-                                            containerClasses={'markdown-div'}
-                                            containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                            text={rule.statement}
-                                        />
-                                    </BotsharpTooltip>
-                                </div>
-                                {/if}
-                            </div>
-                        </div>
-                        <div class="utility-value">
-                            <div class="utility-input line-align-center">
-                                <Input
-                                    type="select"
-                                    disabled={rule.disabled}
-                                    on:change={e => changeRule(e, uid)}
-                                >
-                                    {#each [...ruleOptions] as option}
-                                        <option value={option.name} selected={option.name == rule.trigger_name}>
-                                            {option.displayName || option.name}
-                                        </option>
-                                    {/each}
-                                </Input>
-                            </div>
-                            <div class="utility-delete line-align-center">
-                                <i
-                                    class="bx bxs-no-entry text-danger clickable fs-6"
-                                    role="link"
-                                    tabindex="0"
-                                    on:keydown={() => {}}
-                                    on:click={() => deleteRule(uid)}
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="utility-row utility-row-secondary">
-                        <div class="utility-content">
-                            <div class="utility-list-item">
-                                <div class="utility-label line-align-center">
-                                    <div class="d-flex gap-1">
-                                        <div class="line-align-center">
-                                            {'Criteria'}
-                                        </div>
-                                        {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && !!rule.criteria?.trim()}
-                                        <div
-                                            class="line-align-center clickable text-primary fs-5"
-                                            style="padding-top: 3px;"
-                                            data-bs-toggle="tooltip"
-                                            data-bs-placement="top"
-                                            title="Compile code script"
-                                        >
-                                            <i
-                                                class="mdi mdi-play-circle"
-                                                role="link"
-                                                tabindex="0"
-                                                on:keydown={() => {}}
-                                                on:click={() => compileCodeScript(rule)}
-                                            />
-                                        </div>
-                                        {/if}
-                                    </div>
-                                </div>
-                                <div class="utility-value">
-                                    <div class="utility-input line-align-center">
-                                        <Input
-                                            type="textarea"
-                                            style="resize: none;"
-                                            rows={5}
-                                            disabled={rule.disabled}
-                                            maxlength={textLimit}
-                                            value={rule.criteria}
-                                            on:input={e => changeContent(e, uid, 'criteria')}
-                                        />
-                                    </div>
-                                    <div class="utility-delete line-align-center">
-                                        {#if rule.json_args}
-                                            <div class="line-align-center">
-                                                <i
-                                                    class="bx bxs-info-circle text-primary fs-5"
-                                                    id={`rule-args-${uid}`}
-                                                    data-bs-toggle="tooltip"
-                                                    data-bs-placement="top"
-                                                    title="Rule arguments"
-                                                />
-                                                <BotsharpTooltip
-                                                    containerClasses="agent-utility-desc"
-                                                    style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                                    target={`rule-args-${uid}`}
-                                                    placement="right"
-                                                    persist
-                                                >
-                                                    <Markdown
-                                                        rawText
-                                                        scrollable
-                                                        containerClasses={'markdown-div'}
-                                                        containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                                        text={rule.json_args}
-                                                    />
-                                                </BotsharpTooltip>
-                                            </div>
-                                        {/if}
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            {/each}
-
-            {#if innerRules.length < limit}
-                <div class="add-utility">
-                    <Button color="primary" on:click={() => addRule()}>
-                        <span>
-                            <i class="bx bx-plus" />
-                            <span>Add Rule</span>
-                        </span>
-                    </Button>
-                </div>
-            {/if}
-        </div>
-    </CardBody>
-</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
deleted file mode 100644
index 40510dcb..00000000
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ /dev/null
@@ -1,535 +0,0 @@
-<script>
-    import { onMount } from 'svelte';
-    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
-    import { getAgentUtilityOptions } from '$lib/services/agent-service';
-	import { scrollToBottom, truncateByPrefix } from '$lib/helpers/utils/common';
-	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
-
-    const limit = 100;
-    const prefix = "util-";
-
-    let windowWidth = 0;
-    let windowHeight = 0;
-
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchUtilities = () => {
-        const list = innerUtilities?.filter(x => !!x.category && !!x.name && x.items?.length > 0) || [];
-        
-        /** @type {import('$agentTypes').AgentUtility[]} */
-        const candidates = list.reduce((acc, x) => {
-            const tag = `${x.category}##${x.name}`;
-            if (!acc.visited.has(tag)) {
-                // @ts-ignore
-                acc.result.push(x);
-                acc.visited.add(tag);
-            }
-            return acc;
-        }, { result: [], visited: new Set() }).result;
-
-        innerRefresh(candidates);
-        return candidates;
-    }
-    
-    /** @type {any} */
-    let utilityMapper = {};
-
-    /** @type {import('$agentTypes').AgentUtility[]} */
-    let innerUtilities = [];
-
-    /** @type {HTMLElement} */
-    let scrollContainer;
-
-    onMount(async () =>{
-        resizeWindow();
-        getAgentUtilityOptions().then(data => {
-            const list = data || [];
-            list.forEach(utility => {
-                const content = {
-                    name: utility.name,
-                    items: utility.items.map(it => ({
-                        ...it,
-                        function_display_name: truncateByPrefix(it.function_name, prefix),
-                        template_display_name: truncateByPrefix(it.template_name, prefix)
-                    }))
-                };
-
-                const contents = utilityMapper[utility.category] || [];
-                contents.push(content);
-                utilityMapper[utility.category] = contents;
-            });
-            init();
-        });
-    });
-
-    function init() {
-        const list = agent.utilities?.map(x => {
-            return {
-                ...x,
-                items: x.items.map(it => ({
-                    ...it,
-                    function_display_name: truncateByPrefix(it.function_name, prefix),
-                    template_display_name: truncateByPrefix(it.template_name, prefix)
-                }))
-            };
-        }) || [];
-        innerRefresh(list);
-    }
-
-    function resizeWindow() {
-        windowWidth = window.innerWidth;
-        windowHeight = window.innerHeight;
-    }
-
-    /**
-	 * @param {any} e
-	 * @param {number} idx
-	 */
-    function changeUtilityCategory(e, idx) {
-        const found = innerUtilities.find((_, index) => index === idx);
-        if (!found) return;
-        
-        const category = e.target.value;
-        found.category = category;
-        found.name = '';
-        found.items = [];
-        innerRefresh(innerUtilities);
-        handleAgentChange();
-    }
-
-    /**
-	 * @param {any} e
-	 * @param {number} idx
-	 */
-    function changeUtilityName(e, idx) {
-        const found = innerUtilities.find((_, index) => index === idx);
-        if (!found) return;
-        
-        const name = e.target.value;
-        found.name = name;
-        
-        const foundUtility = utilityMapper[found.category]?.find((/** @type {any} */ x) => x.name == name);
-        found.items = foundUtility?.items?.map((/** @type {any} */ x) => ({...x})) || [];
-
-        innerRefresh(innerUtilities);
-        handleAgentChange();
-    }
-
-    function addUtility() {
-        innerUtilities = [
-            ...innerUtilities,
-            {
-                category: '',
-                name: '',
-                disabled: false,
-                items: []
-            }
-        ];
-        scrollToBottom(scrollContainer);
-        handleAgentChange();
-    }
-
-    /** @param {number} idx */
-    function deleteUtility(idx) {
-        innerUtilities = innerUtilities.filter((_, index) => index !== idx);
-        handleAgentChange();
-    }
-
-    /**
-     * @param {any} e
-	 * @param {number} uid
-	 */
-    function changeUtilityVisibility(e, uid) {
-        const found = innerUtilities.find((_, index) => index === uid);
-        if (!found) return;
-
-        found.visibility_expression = e.target.value || null;
-        innerRefresh(innerUtilities);
-        handleAgentChange();
-    }
-
-    /**
-     * @param {any} e
-	 * @param {number} uid
-     * @param {number} fid
-	 */
-    function changeUtilityItemVisibility(e, uid, fid) {
-        const found = innerUtilities.find((_, index) => index === uid)?.items?.find((_, index) => index === fid);
-        if (!found) return;
-
-        found.visibility_expression = e.target.value || null;
-        innerRefresh(innerUtilities);
-        handleAgentChange();
-    }
-
-    /**
-	 * @param {number} uid
-	 * @param {number} fid
-     * @param {string} type
-	 */
-    function deleteUtilityItem(uid, fid, type) {
-        const foundUtility = innerUtilities.find((_, index) => index === uid);
-        const foundItem = foundUtility?.items?.find((_, index) => index === fid);
-        if (!foundUtility || !foundItem) return;
-
-        if (type === 'function') {
-            foundItem.function_name = null;
-            foundItem.function_display_name = null;
-            foundItem.template_name = null;
-            foundItem.template_display_name = null;
-        } else if (type === 'template') {
-            foundItem.template_name = null;
-            foundItem.template_display_name = null;
-        }
-
-        if (foundItem.function_name == null && foundItem.template_name == null) {
-            foundUtility.items = foundUtility.items.filter((_, index) => index !== fid);
-        }
-
-        innerRefresh(innerUtilities);
-        handleAgentChange();
-    }
-
-    /**
-     * @param {any} e
-	 * @param {number} uid
-	 */
-    function toggleUtility(e, uid) {
-        const found = innerUtilities.find((_, index) => index === uid);
-        if (!found) return;
-
-        found.disabled = !e.target.checked;
-        innerRefresh(innerUtilities);
-        handleAgentChange();
-    }
-
-
-    /** @param {import('$agentTypes').AgentUtility[]} list */
-    function innerRefresh(list) {
-        innerUtilities = list?.map(x => {
-            return {
-                category: x.category,
-                name: x.name,
-                disabled: x.disabled,
-                visibility_expression: x.visibility_expression,
-                items: x.items.map(it => ({ ...it, description: null }))
-            }
-        }) || [];
-    }
-
-
-    /** @param {any} e */
-    function toggleMergeUtility(e) {
-        const checked = e.target.checked;
-        if (!!agent) {
-            agent.merge_utility = checked;
-        }
-        handleAgentChange();
-    }
-
-    /**
-     * @param {string[]} options
-	 * @param {string} placeholder
-	 */
-    function getUtilityOptions(options, placeholder = '') {
-        let list = options?.sort((a, b) => a.localeCompare(b))?.map(x => {
-            return {
-                label: x,
-                value: x
-            };
-        }) || [];
-
-        list = [{
-            label: placeholder || '',
-            value: ''
-        }, ...list];
-        return list;
-    }
-
-    /**
-     * @param {string} category
-     * @param {string} name
-     * @param {string} key
-	 */
-    function getUtilityItemDescription(category, name, key) {
-        // @ts-ignore
-        const desc = utilityMapper[category]?.find(x => x.name === name)?.items?.find(x => x.function_name === key)?.description;
-        return desc || '';
-    }
-
-    /** @param {number} uid */
-	function resetUtility(uid) {
-		const found = innerUtilities.find((_, index) => index === uid);
-        if (!found) return;
-
-        const originalItems = utilityMapper[found.category]?.find((/** @type {any} */ x) => x.name === found.name)?.items || [];
-        found.items = [...originalItems];
-        innerRefresh(innerUtilities);
-        handleAgentChange();
-	}
-</script>
-
-<svelte:window on:resize={() => resizeWindow()}/>
-
-<Card>
-    <CardBody>
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">Utilities</h5>
-            <h6 class="mt-1 mb-3">Tools shared across plugins</h6>
-        </div>
-
-        <div class="agent-utility-container" bind:this={scrollContainer}>
-            {#if !agent?.is_router}
-                <div class="merge-utility">
-                    <Input
-                        type="checkbox"
-                        checked={agent?.merge_utility || false}
-                        on:change={e => toggleMergeUtility(e)}
-                    />
-                    <div class="fw-bold">
-                        Merge utilities
-                    </div>
-                    <div
-                        class="line-align-center"
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top"
-                        title="Merge with entry agent utilities"
-                    >
-                        <i class="bx bx-info-circle fs-6" />
-                    </div>
-                </div>
-            {/if}
-
-            {#each innerUtilities as utility, uid (uid)}
-                {
-                    @const utilityCategoryOptions = getUtilityOptions(Object.keys(utilityMapper), 'Select a category')
-                }
-                <div class="utility-wrapper">
-                    <div class="utility-row utility-row-primary">
-                        <div class="utility-label fw-bold">
-                            <div class="line-align-center">{`Utility #${uid + 1}`}</div>
-                            <div class="utility-tooltip">
-                                <div class="line-align-center">
-                                    <Input
-                                        type="checkbox"
-                                        checked={!utility.disabled}
-                                        on:change={e => toggleUtility(e, uid)}
-                                    />
-                                </div>
-                                <!-- <div
-                                    class="line-align-center"
-                                    data-bs-toggle="tooltip"
-                                    data-bs-placement="top"
-                                    title="Uncheck to disable utility"
-                                >
-                                    <i class="bx bx-info-circle fs-6" />
-                                </div> -->
-                            </div>
-                        </div>
-                        <div class="utility-value">
-                            <div class="utility-input line-align-center">
-                                <Input
-                                    type="select"
-                                    value={utility.category}
-                                    disabled={utility.disabled}
-                                    on:change={e => changeUtilityCategory(e, uid)}
-                                >
-                                    {#each utilityCategoryOptions as option}
-                                        <option value={option.value} selected={option.value == utility.category}>
-                                            {option.label}
-                                        </option>
-                                    {/each}
-                                </Input>
-                            </div>
-                            <div class="utility-delete line-align-center">
-                                <i
-                                    class="bx bxs-no-entry text-danger clickable fs-6"
-                                    role="link"
-                                    tabindex="0"
-                                    on:keydown={() => {}}
-                                    on:click={() => deleteUtility(uid)}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="utility-row utility-row-secondary">
-                        {#if utility.category}
-                            {
-                                @const utilityOptions = getUtilityOptions(utilityMapper[utility.category]?.map((/** @type {any} */ x) => x.name), 'Select a utility')
-                            }
-                            <div class="utility-content">
-                                <div class="utility-list-item">
-                                    <div class="utility-label d-flex" style="gap: 10px;">
-                                        <div class="line-align-center">{'Name'}</div>
-                                        {#if utility.name}
-                                        <div class="line-align-center">
-                                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                            <!-- svelte-ignore a11y-no-static-element-interactions -->
-                                            <i
-                                                class="mdi mdi-refresh clickable fs-6"
-                                                style="padding-top: 3px;"
-                                                data-bs-toggle="tooltip"
-                                                data-bs-placement="top"
-                                                title="Reset"
-                                                on:click={() => resetUtility(uid)}
-                                            />
-                                        </div>
-                                        {/if}
-                                    </div>
-                                    <div class="utility-value">
-                                        <div class="utility-input line-align-center">
-                                            <Input
-                                                type="select"
-                                                value={utility.name}
-                                                disabled={utility.disabled}
-                                                on:change={e => changeUtilityName(e, uid)}
-                                            >
-                                                {#each utilityOptions as option}
-                                                    <option value={option.value} selected={option.value == utility.name}>
-                                                        {option.label}
-                                                    </option>
-                                                {/each}
-                                            </Input>
-                                        </div>
-                                        <div class="utility-delete line-align-center"></div>
-                                    </div>
-                                </div>
-                                <div class="utility-list-item">
-                                    <div class="utility-label line-align-center">
-                                        {'Visibility'}
-                                    </div>
-                                    <div class="utility-value">
-                                        <div class="utility-input line-align-center">
-                                            <Input
-                                                type="text"
-                                                disabled={utility.disabled}
-                                                maxlength={1000}
-                                                value={utility.visibility_expression}
-                                                on:change={e => changeUtilityVisibility(e, uid)}
-                                            />
-                                        </div>
-                                        <div class="utility-delete line-align-center"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        {/if}
-                        {#each utility.items as item, fid (fid)}
-                            <div class="utility-content">
-                                {#if item.function_name}
-                                    { 
-                                        @const description = getUtilityItemDescription(utility.category, utility.name, item.function_name)
-                                    }
-                                    <div class="utility-list-item">
-                                        <div class="utility-label d-flex" style="gap: 10px;">
-                                            <div class="line-align-center">{'Function'}</div>
-                                            {#if description}
-                                            <div class="line-align-center">
-                                                <i
-                                                    class="bx bx-info-circle fs-6"
-                                                    id={`utility-${uid}-${fid}`}
-                                                />
-                                                <BotsharpTooltip
-                                                    containerClasses="agent-utility-desc"
-                                                    style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                                    target={`utility-${uid}-${fid}`}
-                                                    placement="right"
-                                                    persist
-                                                >
-                                                    <Markdown
-                                                        rawText
-                                                        scrollable
-                                                        containerClasses={'markdown-div'}
-                                                        containerStyles={`max-width: ${Math.floor(windowWidth*0.55)}px;`}
-                                                        text={description}
-                                                    />
-                                                </BotsharpTooltip>
-                                            </div>
-                                            {/if}
-                                        </div>
-                                        <div class="utility-value">
-                                            <div class="utility-input line-align-center">
-                                                <Input
-                                                    type="text"
-                                                    value={item.function_display_name}
-                                                    disabled
-                                                />
-                                            </div>
-                                            <div class="utility-delete line-align-center">
-                                                <i
-                                                    class="bx bxs-no-entry text-danger clickable fs-6"
-                                                    role="link"
-                                                    tabindex="0"
-                                                    on:keydown={() => {}}
-                                                    on:click={() => deleteUtilityItem(uid, fid, 'function')}
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-                                {/if}
-                                {#if item.template_name}
-                                    <div class="utility-list-item">
-                                        <div class="utility-label line-align-center">
-                                            {'Template'}
-                                        </div>
-                                        <div class="utility-value">
-                                            <div class="utility-input line-align-center">
-                                                <Input
-                                                    type="text"
-                                                    value={item.template_display_name}
-                                                    disabled
-                                                />
-                                            </div>
-                                            <div class="utility-delete line-align-center">
-                                                <i
-                                                    class="bx bxs-no-entry text-danger clickable fs-6"
-                                                    role="link"
-                                                    tabindex="0"
-                                                    on:keydown={() => {}}
-                                                    on:click={() => deleteUtilityItem(uid, fid, 'template')}
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-                                {/if}
-                                <div class="utility-list-item">
-                                    <div class="utility-label line-align-center">
-                                        {'Visibility'}
-                                    </div>
-                                    <div class="utility-value">
-                                        <div class="utility-input line-align-center">
-                                            <Input
-                                                type="text"
-                                                disabled={utility.disabled}
-                                                maxlength={1000}
-                                                value={item.visibility_expression}
-                                                on:change={e => changeUtilityItemVisibility(e, uid, fid)}
-                                            />
-                                        </div>
-                                        <div class="utility-delete line-align-center"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        {/each}
-                    </div>
-                </div>
-            {/each}
-
-            {#if innerUtilities.length < limit}
-                <div class="add-utility">
-                    <Button color="primary" on:click={() => addUtility()}>
-                        <span>
-                            <i class="bx bx-plus" />
-                            <span>Add utility</span>
-                        </span>
-                    </Button>
-                </div>
-            {/if}
-        </div>
-    </CardBody>
-</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte
new file mode 100644
index 00000000..ecafac02
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte
@@ -0,0 +1,161 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { slide } from 'svelte/transition';
+    import { Input } from '@sveltestrap/sveltestrap';
+	import { DECIMAL_REGEX } from "$lib/helpers/constants";
+	
+    const svelteDispatch = createEventDispatcher();
+    const duration = 200;
+
+    /** @type {import('$agentTypes').AgentKnowledgeBase} */
+    export let knowledge;
+
+    /** @type {number} */
+    export let knwoledgeIdx;
+
+    /** @type {any[]} */
+    export let knowledgeBaseOptions = [];
+
+    /** @type {boolean} */
+    export let collapsed = true;
+
+
+    /** @param {any} e */
+    function validateConfidenceInput(e) {
+        const reg = new RegExp(DECIMAL_REGEX, 'g');
+        if (e.key !== 'Backspace' && !reg.test(e.key)) {
+            e.preventDefault();
+        }
+    }
+
+    /**
+     * @param {any} e
+	 */
+    function toggleKnowledgeBase(e) {
+        svelteDispatch('toggle', {
+            knowledgeIdx: knwoledgeIdx,
+            checked: e.target.checked
+        });
+    }
+
+    function deleteKnowledgeBase() {
+        svelteDispatch('delete', {
+            knowledgeIdx: knwoledgeIdx
+        });
+    }
+
+    /**
+     * @param {any} e
+	 */
+    function changeKnowledgeBase(e) {
+        svelteDispatch('change', {
+            knowledgeIdx: knwoledgeIdx,
+            field: 'knowledge',
+            value: e.target.value
+        });
+    }
+
+    /**
+     * @param {any} e
+	 */
+    function changeConfidence(e) {
+        svelteDispatch('change', {
+            knowledgeIdx: knwoledgeIdx,
+            field: 'confidence',
+            value: e.target.value
+        });
+    }
+
+    function toggleCollapse() {
+        svelteDispatch('collapse', {
+            knowledgeIdx: knwoledgeIdx,
+            collapsed: !collapsed
+        });
+    }
+</script>
+
+<div class="utility-wrapper">
+    <div class="utility-row utility-row-primary">
+        <div class="utility-label fw-bold">
+            <div class="line-align-center">
+                <i
+                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class:rotated={!collapsed}
+                    role="button"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => toggleCollapse()}
+                />
+            </div>
+            <div class="line-align-center">
+                {`Collection #${knwoledgeIdx + 1}`}
+            </div>
+            <div class="utility-tooltip">
+                <div class="line-align-center">
+                    <Input
+                        type="checkbox"
+                        checked={!knowledge.disabled}
+                        on:change={e => toggleKnowledgeBase(e)}
+                    />
+                </div>
+                <!-- <div
+                    class="line-align-center"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Uncheck to disable knowledgebase"
+                >
+                    <i class="bx bx-info-circle fs-6" />
+                </div> -->
+            </div>
+        </div>
+        <div class="utility-value">
+            <div class="utility-input line-align-center">
+                <Input
+                    type="select"
+                    disabled={knowledge.disabled}
+                    on:change={e => changeKnowledgeBase(e)}
+                >
+                    {#each [...knowledgeBaseOptions] as option}
+                        <option value={`${JSON.stringify(option)}`} selected={option.name == knowledge.name}>
+                            {option.displayName || option.name}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
+            <div class="utility-delete line-align-center">
+                <i
+                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    role="link"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => deleteKnowledgeBase()}
+                />
+            </div>
+        </div>
+    </div>
+
+    {#if !collapsed}
+    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
+        <div class="utility-content">
+            <div class="utility-list-item">
+                <div class="utility-label line-align-center">
+                    {'Confidence'}
+                </div>
+                <div class="utility-value">
+                    <div class="utility-input line-align-center">
+                        <Input
+                            type="text"
+                            class="text-center"
+                            bind:value={knowledge.confidence}
+                            disabled={knowledge.disabled}
+                            on:keydown={e => validateConfidenceInput(e)}
+                            on:blur={e => changeConfidence(e)}
+                        />
+                    </div>
+                    <div class="utility-delete line-align-center"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte
similarity index 51%
rename from src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
rename to src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte
index 7ca2cc7d..951c8d8b 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte
@@ -1,10 +1,11 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+    import { Card, CardBody, Button } from '@sveltestrap/sveltestrap';
 	import { getVectorKnowledgeCollections } from '$lib/services/knowledge-base-service';
 	import { KnowledgeCollectionDisplayType } from '$lib/helpers/enums';
 	import { DECIMAL_REGEX } from '$lib/helpers/constants';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
+	import AgentKnowledgeBaseItem from './agent-knowledge-base-item.svelte';
 
     const limit = 100;
     const confidLowerBound = 0;
@@ -19,6 +20,7 @@
     export const fetchKnowledgeBases = () => {
         const candidates = innerKnowledgeBases?.filter(x => !!x.name)?.map(x => {
             return {
+                ...x,
                 name: x.name,
                 type: x.type,
                 disabled: x.disabled,
@@ -91,36 +93,21 @@
         const found = innerKnowledgeBases.find((_, index) => index === idx);
         if (!found) return;
         
-        const val = JSON.parse(e.target.value);
-        found.name = val?.name;
-        found.type = val?.type;
-        innerRefresh(innerKnowledgeBases);
-        handleAgentChange();
-    }
+        const field = e.detail.field;
+        if (field === 'knowledge') {
+            const val = JSON.parse(e.detail.value);
+            found.name = val?.name;
+            found.type = val?.type;
+        } else if (field === 'confidence') {
+            const value = e.detail.value;
+            const confidence = validateConfidenceNumber(value);
+            found.confidence = confidence;
+        }
 
-    /**
-	 * @param {any} e
-	 * @param {number} idx
-	 */
-    function changeConfidence(e, idx) {
-        const found = innerKnowledgeBases.find((_, index) => index === idx);
-        if (!found) return;
-        
-        const value = e.target.value;
-		const confidence = validateConfidenceNumber(value);
-        found.confidence = confidence;
         innerRefresh(innerKnowledgeBases);
         handleAgentChange();
     }
 
-    /** @param {any} e */
-    function validateConfidenceInput(e) {
-        const reg = new RegExp(DECIMAL_REGEX, 'g');
-        if (e.key !== 'Backspace' && !reg.test(e.key)) {
-            e.preventDefault();
-        }
-    }
-
 	/** @param {string} value */
 	function validateConfidenceNumber(value) {
         let confidence;
@@ -143,28 +130,45 @@
                 name: '',
                 type: '',
                 displayName: '',
-                disabled: false
+                disabled: false,
+                expanded: true
             }
         ];
         scrollToBottom(scrollContainer);
         handleAgentChange();
     }
 
-    /** @param {number} idx */
-    function deleteKnowledgeBase(idx) {
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function deleteKnowledgeBase(e, idx) {
         innerKnowledgeBases = innerKnowledgeBases.filter((_, index) => index !== idx);
         handleAgentChange();
     }
 
     /**
      * @param {any} e
-	 * @param {number} uid
+	 * @param {number} idx
 	 */
-    function toggleKnowledgeBase(e, uid) {
-        const found = innerKnowledgeBases.find((_, index) => index === uid);
+    function toggleKnowledgeBase(e, idx) {
+        const found = innerKnowledgeBases.find((_, index) => index === idx);
         if (!found) return;
 
-        found.disabled = !e.target.checked;
+        found.disabled = !e.detail.checked;
+        innerRefresh(innerKnowledgeBases);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function toggleCollapse(e, idx) {
+        const found = innerKnowledgeBases.find((_, index) => index === idx);
+        if (!found) return;
+
+        found.expanded = !e.detail.collapsed;
         innerRefresh(innerKnowledgeBases);
         handleAgentChange();
     }
@@ -174,6 +178,7 @@
     function innerRefresh(list) {
         innerKnowledgeBases = list?.map(x => {
             return {
+                ...x,
                 name: x.name,
                 type: x.type,
                 displayName: x.displayName,
@@ -193,76 +198,16 @@
 
         <div class="agent-utility-container" bind:this={scrollContainer}>
             {#each innerKnowledgeBases as knowledge, uid (uid)}
-                <div class="utility-wrapper">
-                    <div class="utility-row utility-row-primary">
-                        <div class="utility-label fw-bold">
-                            <div class="line-align-center">{`Collection #${uid + 1}`}</div>
-                            <div class="utility-tooltip">
-                                <div class="line-align-center">
-                                    <Input
-                                        type="checkbox"
-                                        checked={!knowledge.disabled}
-                                        on:change={e => toggleKnowledgeBase(e, uid)}
-                                    />
-                                </div>
-                                <!-- <div
-                                    class="line-align-center"
-                                    data-bs-toggle="tooltip"
-                                    data-bs-placement="top"
-                                    title="Uncheck to disable knowledgebase"
-                                >
-                                    <i class="bx bx-info-circle fs-6" />
-                                </div> -->
-                            </div>
-                        </div>
-                        <div class="utility-value">
-                            <div class="utility-input line-align-center">
-                                <Input
-                                    type="select"
-                                    disabled={knowledge.disabled}
-                                    on:change={e => changeKnowledgeBase(e, uid)}
-                                >
-                                    {#each [...knowledgeBaseOptions] as option}
-                                        <option value={`${JSON.stringify(option)}`} selected={option.name == knowledge.name}>
-                                            {option.displayName || option.name}
-                                        </option>
-                                    {/each}
-                                </Input>
-                            </div>
-                            <div class="utility-delete line-align-center">
-                                <i
-                                    class="bx bxs-no-entry text-danger clickable fs-6"
-                                    role="link"
-                                    tabindex="0"
-                                    on:keydown={() => {}}
-                                    on:click={() => deleteKnowledgeBase(uid)}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div class="utility-row utility-row-secondary">
-                        <div class="utility-content">
-                            <div class="utility-list-item">
-                                <div class="utility-label line-align-center">
-                                    {'Confidence'}
-                                </div>
-                                <div class="utility-value">
-                                    <div class="utility-input line-align-center">
-                                        <Input
-                                            type="text"
-                                            class="text-center"
-                                            bind:value={knowledge.confidence}
-                                            disabled={knowledge.disabled}
-                                            on:keydown={e => validateConfidenceInput(e)}
-                                            on:blur={e => changeConfidence(e, uid)}
-                                        />
-                                    </div>
-                                    <div class="utility-delete line-align-center"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <AgentKnowledgeBaseItem
+                    knowledge={knowledge}
+                    knwoledgeIdx={uid}
+                    collapsed={!knowledge.expanded}
+                    knowledgeBaseOptions={knowledgeBaseOptions}
+                    on:toggle={e => toggleKnowledgeBase(e, uid)}
+                    on:delete={e => deleteKnowledgeBase(e, uid)}
+                    on:change={e => changeKnowledgeBase(e, uid)}
+                    on:collapse={e => toggleCollapse(e, uid)}
+                />
             {/each}
 
             {#if innerKnowledgeBases.length < limit}
diff --git a/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte b/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
index d6018960..40b759dd 100644
--- a/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
@@ -1,4 +1,5 @@
 <script>
+    import { slide } from 'svelte/transition';
     import { Input } from '@sveltestrap/sveltestrap';
 	import { INTEGER_REGEX } from '$lib/helpers/constants';
 	import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
@@ -34,6 +35,10 @@
         }))
     ];
 
+
+    /** @type {boolean} */
+    let collapsed = false;
+
     let config = agent.llm_config || {};
 
     /** @type {import('$commonTypes').LlmConfig[]} */
@@ -161,92 +166,105 @@
 </script>
 
 <div class="agent-config-container">
-    <div class="text-center">
-        <h6 class="mt-1 mb-3">Chat</h6>
+    <div
+        class="config-header text-center"
+        role="button"
+        tabindex="0"
+        on:click={() => collapsed = !collapsed}
+        on:keydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
+    >
+        <h6 class="mt-1 mb-3 d-flex align-items-center justify-content-center gap-2">
+            <i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
+            Chat
+        </h6>
         {#if agent.llm_config?.is_inherit}
             <div class="mb-3">
-                <i class="bx bx-copy"></i> <span class="text-muted">Inherited</span>    
+                <i class="bx bx-copy"></i> <span class="text-muted">Inherited</span>
             </div>
         {/if}
     </div>
 
-    <div class="mb-3 row llm-config-item">
-        <label for="chat-provider" class="col-form-label llm-config-label">
-            Provider
-        </label>
-        <div class="llm-config-input">
-            <Input type="select" id="chat-provider" value={config.provider} on:change={e => changeProvider(e)}>
-                {#each providers as option}
-                    <option value={option} selected={option == config.provider}>
-                        {option}
-                    </option>
-                {/each}
-            </Input>
+    {#if !collapsed}
+    <div transition:slide={{ duration: 200 }}>
+        <div class="mb-3 row llm-config-item">
+            <label for="chat-provider" class="col-form-label llm-config-label">
+                Provider
+            </label>
+            <div class="llm-config-input">
+                <Input type="select" id="chat-provider" value={config.provider} on:change={e => changeProvider(e)}>
+                    {#each providers as option}
+                        <option value={option} selected={option == config.provider}>
+                            {option}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
         </div>
-    </div>
-        
-    <div class="mb-3 row llm-config-item">
-        <label for="chat-model" class="col-form-label llm-config-label">
-            Model
-        </label>
-        <div class="llm-config-input">
-            <Input type="select" id="chat-model" value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
-                {#each models as option}
-                    <option value={option.name} selected={option.name == config.model}>
-                        {option.name}
-                    </option>
-                {/each}
-            </Input>
+
+        <div class="mb-3 row llm-config-item">
+            <label for="chat-model" class="col-form-label llm-config-label">
+                Model
+            </label>
+            <div class="llm-config-input">
+                <Input type="select" id="chat-model" value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
+                    {#each models as option}
+                        <option value={option.name} selected={option.name == config.model}>
+                            {option.name}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
         </div>
-    </div>
 
-    <div class="mb-3 row llm-config-item">
-        <label for="chat-max-recursive-depth" class="col-form-label llm-config-label">
-            Max recursive depth
-        </label>
-        <div class="llm-config-input">
-            <Input
-                id="chat-max-recursive-depth"
-                style="text-align: center;"
-                type="number"
-                min={recursiveDepthLowerLimit}
-                value={config.max_recursion_depth}
-                on:keydown={e => validateIntegerInput(e)}
-                on:change={e => changeMaxRecursiveDepth(e)}
-            />
+        <div class="mb-3 row llm-config-item">
+            <label for="chat-max-recursive-depth" class="col-form-label llm-config-label">
+                Max recursive depth
+            </label>
+            <div class="llm-config-input">
+                <Input
+                    id="chat-max-recursive-depth"
+                    style="text-align: center;"
+                    type="number"
+                    min={recursiveDepthLowerLimit}
+                    value={config.max_recursion_depth}
+                    on:keydown={e => validateIntegerInput(e)}
+                    on:change={e => changeMaxRecursiveDepth(e)}
+                />
+            </div>
         </div>
-    </div>
 
-    <div class="mb-3 row llm-config-item">
-        <label for="chat-max-output-tokens" class="col-form-label llm-config-label">
-            Max output tokens
-        </label>
-        <div class="llm-config-input">
-            <Input
-                id="chat-max-output-tokens"
-                style="text-align: center;"
-                type="number"
-                value={config.max_output_tokens}
-                on:keydown={e => validateIntegerInput(e)}
-                on:change={e => changeMaxOutputToken(e)}
-            />
+        <div class="mb-3 row llm-config-item">
+            <label for="chat-max-output-tokens" class="col-form-label llm-config-label">
+                Max output tokens
+            </label>
+            <div class="llm-config-input">
+                <Input
+                    id="chat-max-output-tokens"
+                    style="text-align: center;"
+                    type="number"
+                    value={config.max_output_tokens}
+                    on:keydown={e => validateIntegerInput(e)}
+                    on:change={e => changeMaxOutputToken(e)}
+                />
+            </div>
         </div>
-    </div>
 
-    {#if isReasoningModel}
-    <div class="mb-3 row llm-config-item">
-        <label for="chat-reasoning-effort" class="col-form-label llm-config-label">
-            Reasoning level
-        </label>
-        <div class="llm-config-input">
-            <Input type="select" id="chat-reasoning-effort" value={config.reasoning_effort_level} on:change={e => changeReasoningEffortLevel(e)}>
-                {#each reasoningLevelOptions as option}
-                    <option value={option.value} selected={option.value == config.reasoning_effort_level}>
-                        {option.label}
-                    </option>
-                {/each}
-            </Input>
+        {#if isReasoningModel}
+        <div class="mb-3 row llm-config-item">
+            <label for="chat-reasoning-effort" class="col-form-label llm-config-label">
+                Reasoning level
+            </label>
+            <div class="llm-config-input">
+                <Input type="select" id="chat-reasoning-effort" value={config.reasoning_effort_level} on:change={e => changeReasoningEffortLevel(e)}>
+                    {#each reasoningLevelOptions as option}
+                        <option value={option.value} selected={option.value == config.reasoning_effort_level}>
+                            {option.label}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
         </div>
+        {/if}
     </div>
     {/if}
 </div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte b/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte
index 1597804a..a1cda369 100644
--- a/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte
@@ -1,6 +1,7 @@
 <script>
+    import { slide } from 'svelte/transition';
     import { Input } from '@sveltestrap/sveltestrap';
-    
+
     /** @type {string} */
     export let title;
 
@@ -16,6 +17,7 @@
     /** @type {import('$commonTypes').LlmConfig[]} */
     export let llmConfigOptions = [];
 
+
     /** @type {() => void} */
     export let handleAgentChange = () => {};
 
@@ -23,7 +25,7 @@
         if (!config.provider && !config.model) {
             return null;
         }
-        
+
         return {
             ...config,
             provider: config.provider || null,
@@ -31,6 +33,10 @@
         };
     }
 
+
+    /** @type {boolean} */
+    let collapsed = true;
+
     /** @type {import('$commonTypes').LlmConfig[]} */
     let innerLlmConfigOptions = [];
 
@@ -87,37 +93,50 @@
 </script>
 
 <div class="agent-config-container">
-    <div class="text-center">
-        <h6 class="mt-1 mb-3">{title}</h6>
+    <div
+        class="config-header text-center"
+        role="button"
+        tabindex="0"
+        on:click={() => collapsed = !collapsed}
+        on:keydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
+    >
+        <h6 class="mt-1 mb-3 d-flex align-items-center justify-content-center gap-2">
+            <i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
+            {title}
+        </h6>
     </div>
 
-    <div class="mb-3 row llm-config-item">
-        <label for={`provider-${title}`} class="col-form-label llm-config-label">
-            Provider
-        </label>
-        <div class="llm-config-input">
-            <Input type="select" id={`provider-${title}`} value={config.provider} on:change={e => changeProvider(e)}>
-                {#each providers as option}
-                    <option value={option} selected={option == config.provider}>
-                        {option}
-                    </option>
-                {/each}
-            </Input>
+    {#if !collapsed}
+    <div transition:slide={{ duration: 200 }}>
+        <div class="mb-3 row llm-config-item">
+            <label for={`provider-${title}`} class="col-form-label llm-config-label">
+                Provider
+            </label>
+            <div class="llm-config-input">
+                <Input type="select" id={`provider-${title}`} value={config.provider} on:change={e => changeProvider(e)}>
+                    {#each providers as option}
+                        <option value={option} selected={option == config.provider}>
+                            {option}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
         </div>
-    </div>
-        
-    <div class="mb-3 row llm-config-item">
-        <label for={`model-${title}`} class="col-form-label llm-config-label">
-            Model
-        </label>
-        <div class="llm-config-input">
-            <Input type="select" id={`model-${title}`} value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
-                {#each models as option}
-                    <option value={option.name} selected={option.name == config.model}>
-                        {option.name}
-                    </option>
-                {/each}
-            </Input>
+
+        <div class="mb-3 row llm-config-item">
+            <label for={`model-${title}`} class="col-form-label llm-config-label">
+                Model
+            </label>
+            <div class="llm-config-input">
+                <Input type="select" id={`model-${title}`} value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
+                    {#each models as option}
+                        <option value={option.name} selected={option.name == config.model}>
+                            {option.name}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
         </div>
     </div>
+    {/if}
 </div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte
new file mode 100644
index 00000000..fb66e1e9
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte
@@ -0,0 +1,229 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { slide } from 'svelte/transition';
+    import { Input } from '@sveltestrap/sveltestrap';
+
+    const svelteDispatch = createEventDispatcher();
+
+    const duration = 200;
+    const limit = 10;
+
+    /** @type {import('$agentTypes').AgentMcpTool} */
+    export let mcp;
+
+    /** @type {number} */
+    export let mcpIndex;
+
+    /** @type {any[]} */
+    export let mcpOptions;
+
+    /** @type {boolean} */
+    export let collapsed = true;
+
+    /**
+     * @param {any} e
+	 */
+    function toggleMcp(e) {
+        svelteDispatch('toggle', {
+            mcpIdx: mcpIndex,
+            checked: e.target.checked
+        });
+    }
+
+    function deleteMcp() {
+        svelteDispatch('delete', {
+            mcpIdx: mcpIndex,
+            field: 'mcp'
+        });
+    }
+
+    /**
+     * @param {number} fid
+     * @param {string} type
+     */
+    function deleteMcpItem(fid, type) {
+        svelteDispatch('delete', {
+            mcpIdx: mcpIndex,
+            field: type,
+            itemIdx: fid
+        });
+    }
+
+    /**
+     * @param {any} e
+	 */
+    function changeMcp(e) {
+        svelteDispatch('change', {
+            mcpIdx: mcpIndex,
+            field: 'mcp',
+            value: e.target.value
+        });
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} fid
+	 * @param {string} type
+	 */
+    function changeMcpItem(e, fid, type) {
+        svelteDispatch('change', {
+            mcpIdx: mcpIndex,
+            field: type,
+            itemIdx: fid,
+            value: e.target.value
+        });
+    }
+
+    /**
+	 * @param {string} type
+	 */
+    function addMcpItem(type) {
+        svelteDispatch('add', {
+            mcpIdx: mcpIndex,
+            field: type
+        });
+    }
+
+    function toggleCollapse() {
+        svelteDispatch('collapse', {
+            mcpIdx: mcpIndex,
+            collapsed: !collapsed
+        });
+    }
+</script>
+
+<div class="utility-wrapper">
+    <div class="utility-row utility-row-primary">
+        <div class="utility-label fw-bold">
+            <div class="line-align-center">
+                <i
+                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class:rotated={!collapsed}
+                    role="button"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => toggleCollapse()}
+                />
+            </div>
+            <div class="line-align-center">
+                {`MCP #${mcpIndex + 1}`}
+            </div>
+            <div class="utility-tooltip">
+                <div class="line-align-center">
+                    <Input
+                        type="checkbox"
+                        checked={!mcp.disabled}
+                        on:change={e => toggleMcp(e)}
+                    />
+                </div>
+                <!-- <div
+                    class="line-align-center fs-6"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Uncheck to disable MCP"
+                >
+                    <i class="bx bx-info-circle" />
+                </div> -->
+            </div>
+        </div>
+        <div class="utility-value">
+            <div class="utility-input line-align-center">
+                <Input
+                    type="select"
+                    disabled={mcp.disabled}
+                    on:change={e => changeMcp(e)}
+                >
+                    {#each [...mcpOptions] as option}
+                        <option value={option.id} selected={option.id == mcp.server_id}>
+                            {option.displayName || option.name}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
+            <div class="utility-delete line-align-center">
+                <i
+                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    role="link"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => deleteMcp()}
+                />
+            </div>
+        </div>
+    </div>
+
+    {#if !collapsed}
+    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
+        <div class="utility-content">
+            <div class="utility-list-item">
+                <div class="utility-label line-align-center">
+                    {'Server'}
+                </div>
+                <div class="utility-value">
+                    <div class="utility-input line-align-center">
+                        <Input
+                            type="text"
+                            disabled
+                            value={mcp.server_id}
+                        />
+                    </div>
+                    <div class="utility-delete line-align-center"></div>
+                </div>
+            </div>
+        </div>
+        <div class="utility-content">
+            {#each mcp.functions as fn, fid (fid)}
+                <div class="utility-list-item">
+                    <div class="utility-label line-align-center">
+                        {fid === 0 ? 'Tools' : ''}
+                    </div>
+                    <div class="utility-value">
+                        <div class="utility-input line-align-center">
+                            <Input
+                                type="select"
+                                disabled={mcp.disabled}
+                                on:change={e => changeMcpItem(e, fid, 'function')}
+                            >
+                                {#each [...mcpOptions.find(x => x.id === mcp.server_id)?.tools || []] as option}
+                                    <option value={option} selected={option == fn.name}>
+                                        {option}
+                                    </option> 
+                                {/each}
+                            </Input>
+                        </div>
+                        <div class="utility-delete line-align-center">
+                            <i
+                                class="bx bxs-no-entry text-danger clickable fs-6"
+                                role="link"
+                                tabindex="0"
+                                on:keydown={() => {}}
+                                on:click={() => deleteMcpItem(fid, 'function')}
+                            />
+                        </div>
+                    </div>
+                </div>
+            {/each}
+
+            {#if mcp.functions?.length < limit}
+                <div class="utility-list-item">
+                    <div class="utility-label">
+                        {mcp.functions.length === 0 ? 'Functions' : ''}
+                    </div>
+                    <div class="utility-value">
+                        <i
+                            class="bx bx-list-plus add-list clickable fs-6"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Add function"
+                            role="link"
+                            tabindex="0"
+                            on:keydown={() => {}}
+                            on:click={() => addMcpItem('function')}
+                        />
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </div>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte
new file mode 100644
index 00000000..de73aaeb
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte
@@ -0,0 +1,248 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody, Button } from '@sveltestrap/sveltestrap';
+	import { getServerConfigs } from '$lib/services/mcp-service';
+	import { scrollToBottom } from '$lib/helpers/utils/common';
+	import AgentMcpToolItem from './agent-mcp-tool-item.svelte';
+    
+    const limit = 100;
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    /** @type {() => void} */
+    export let handleAgentChange = () => {};
+
+    export const fetchMcpTools = () => {
+        const candidates = innerMcps?.filter(x => !!x.name)?.map(x => {
+            /** @type {import('$commonTypes').NameBase[]} */
+            const functions = [];
+
+            const uniqueFns = new Set();
+            const fns = x.functions.filter(f => !!f.name);
+
+            fns.forEach(f => {
+                if (!uniqueFns.has(f.name)) {
+                    functions.push({ ...f });
+                    uniqueFns.add(f.name);
+                }
+            });
+
+           return {
+                ...x,
+                name: x.name,
+                disabled: x.disabled,
+                functions: functions,
+           };
+        });
+
+        /** @type {import('$agentTypes').AgentMcpTool[]} */
+        const mcps = [];
+        const unique = new Set();
+        candidates.forEach(x => {
+            if (!unique.has(x.name)) {
+                mcps.push(x);
+                unique.add(x.name);
+            }
+        });
+
+        innerRefresh(mcps);
+        return mcps;
+    }
+
+    /** @type {any[]} */
+    let mcpOptions = [];
+
+    /** @type {import('$agentTypes').AgentMcpTool[]} */
+    let innerMcps = [];
+
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
+
+    onMount(async () => {
+        getServerConfigs().then(res => {
+            const list = res?.map(x => {
+                return {
+                    id: x.id,
+                    name: x.name,
+                    tools: [
+                        '',
+                        ...x.tools
+                    ]
+                };
+            }) || [];
+            mcpOptions = [
+                {
+                    id: '',
+                    name: '',
+                    tools: ['']
+                },
+                ...list
+            ];
+        }).catch(() => {
+            mcpOptions = [];
+        });
+        init();
+    });
+
+    function init() {
+        const list = agent.mcp_tools?.map(x => {
+            return {
+                ...x,
+                displayName: ""
+            };
+        }) || [];
+        innerRefresh(list);
+    }
+
+    /** @param {import('$agentTypes').AgentMcpTool[]} list */
+    function innerRefresh(list) {
+        innerMcps = list?.map(x => {
+            return {
+                ...x,
+                name: x.name,
+                server_id: x.server_id,
+                disabled: x.disabled,
+                functions: x.functions?.map(x => ({ ...x })) || []
+            }
+        }) || [];
+    }
+
+    function addMcp() {
+        innerMcps = [
+            ...innerMcps,
+            {
+                name: '',
+                server_id: '',
+                disabled: false,
+                functions: [],
+                expanded: true
+            }
+        ];
+        scrollToBottom(scrollContainer);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+     * @param {number} idx
+     */
+    function deleteMcp(e, idx) {
+        if (e.detail.field === 'mcp') {
+            innerMcps = innerMcps.filter((_, index) => index !== idx);
+        } else if (e.detail.field === 'function') {
+            const found = innerMcps.find((_, index) => index === idx);
+            if (!found) return;
+
+            const fns = found.functions?.filter((_, index) => index !== e.detail.itemIdx) || [];
+            found.functions = fns;
+            innerRefresh(innerMcps);
+        }
+        
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function toggleMcp(e, idx) {
+        const found = innerMcps.find((_, index) => index === idx);
+        if (!found) return;
+
+        found.disabled = !e.detail.checked;
+        innerRefresh(innerMcps);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function changeMcpContent(e, idx) {
+        const found = innerMcps.find((_, index) => index === idx);
+        if (!found) return;
+
+        if (e.detail.field === 'mcp') {
+            const name = mcpOptions.find(x => x.id == e.detail.value)?.name || '';
+            found.name = name;
+            found.server_id = e.detail.value;
+            found.functions = [];
+        } else if (e.detail.field === 'function') {
+            const fn = found.functions.find((_, index) => index === e.detail.itemIdx);
+            if (fn) {
+                fn.name = e.detail.value;
+            }
+        }
+
+        innerRefresh(innerMcps);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+     function addMcpContent(e, idx) {
+        const found = innerMcps.find((_, index) => index === idx);
+        if (!found || found.disabled) return;
+
+        if (e.detail.field === 'function') {
+            found.functions.push({ name: '' });
+        }
+
+        innerRefresh(innerMcps);
+        handleAgentChange();
+    }
+
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+	function toggleCollapse(e, idx) {
+		const found = innerMcps.find((_, index) => index === idx);
+        if (!found) return;
+
+        found.expanded = !e.detail.collapsed;
+        innerRefresh(innerMcps);
+        handleAgentChange();
+	}
+</script>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">MCP Tools</h5>
+            <h6 class="mt-1 mb-3">Tools powered by MCP Servers</h6>
+        </div>
+
+        <div class="agent-utility-container" bind:this={scrollContainer}>
+            {#each innerMcps as mcp, uid (uid)}
+                <AgentMcpToolItem
+                    mcp={mcp}
+                    mcpIndex={uid}
+                    collapsed={!mcp.expanded}
+                    mcpOptions={mcpOptions}
+                    on:toggle={e => toggleMcp(e, uid)}
+                    on:delete={e => deleteMcp(e, uid)}
+                    on:change={e => changeMcpContent(e, uid)}
+                    on:add={e => addMcpContent(e, uid)}
+                    on:collapse={e => toggleCollapse(e, uid)}
+                />
+            {/each}
+
+            {#if innerMcps.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addMcp()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add MCP</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte
new file mode 100644
index 00000000..721765c3
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte
@@ -0,0 +1,338 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { slide } from 'svelte/transition';
+    import { Input } from '@sveltestrap/sveltestrap';
+	import Markdown from '$lib/common/markdown/Markdown.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
+	import { ADMIN_ROLES } from '$lib/helpers/constants';
+
+    const svelteDispatch = createEventDispatcher();
+
+    const duration = 200;
+
+    /** @type {import('$agentTypes').AgentRule} */
+    export let rule;
+
+    /** @type {number} */
+    export let ruleIndex;
+
+    /** @type {boolean} */
+    export let collapsed = true;
+
+    /** @type {import('$userTypes').UserModel} */
+    export let user;
+
+    /** @type {any[]} */
+    export let ruleOptions = [];
+
+    /** @type {any[]} */
+    export let configOptions = [];
+
+    /** @type {number} */
+    export let windowWidth;
+
+
+    /**
+     * @param {any} e
+     * @param {string} field
+     */
+    function toggleRule(e, field) {
+        svelteDispatch('toggle', {
+            ruleIdx: ruleIndex,
+            field: field,
+            checked: e.target.checked
+        });
+    }
+
+    /**
+     * @param {any} e
+     * @param {string} field
+     */
+    function changeRule(e, field) {
+        svelteDispatch('change', {
+            ruleIdx: ruleIndex,
+            field: field,
+            value: e?.target?.value || e?.detail?.text || ''
+        });
+    }
+
+    /**
+     * @param {string} field
+     */
+    function deleteRule(field) {
+        svelteDispatch('delete', {
+            ruleIdx: ruleIndex,
+            field: field
+        });
+    }
+
+    function toggleCollapse() {
+        svelteDispatch('collapse', {
+            ruleIdx: ruleIndex,
+            collapsed: !collapsed
+        });
+    }
+
+    // function compileCodeScript() {
+    //     svelteDispatch('compile', {
+    //         rule: rule
+    //     });
+    // }
+
+    function toggleConfig() {
+        svelteDispatch('config', {
+            ruleIdx: ruleIndex
+        });
+    }
+</script>
+
+<div class="utility-wrapper">
+    <div class="utility-row utility-row-primary">
+        <div class="utility-label fw-bold">
+            <div class="line-align-center">
+                <i
+                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class:rotated={!collapsed}
+                    role="button"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => toggleCollapse()}
+                />
+            </div>
+            <div class="line-align-center">
+                {`Rule #${ruleIndex + 1}`}
+            </div>
+            <div class="utility-tooltip">
+                <div class="line-align-center">
+                    <Input
+                        type="checkbox"
+                        checked={!rule.disabled}
+                        on:change={e => toggleRule(e, 'rule')}
+                    />
+                </div>
+                {#if rule.statement}
+                <div class="line-align-center">
+                    <i
+                        class="bx bx-info-circle text-primary fs-6"
+                        style="padding-top: 2px;"
+                        id={`rule-statement-${ruleIndex}`}
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        title="Rule arguments"
+                    />
+                    <BotsharpTooltip
+                        containerClasses="agent-utility-desc"
+                        style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
+                        target={`rule-statement-${ruleIndex}`}
+                        placement="top"
+                        persist
+                    >
+                        <Markdown
+                            rawText
+                            scrollable
+                            containerClasses={'markdown-div'}
+                            containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
+                            text={rule.statement}
+                        />
+                    </BotsharpTooltip>
+                </div>
+                {/if}
+
+                {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && rule.config?.topology_provider}
+                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                <div class="line-align-center">
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <i
+                        class="bx bx-cog text-primary fs-6 clickable"
+                        style="padding-top: 2px;"
+                        id={`rule-config-${ruleIndex}`}
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        title="Rule config"
+                        on:click={() => toggleConfig()}
+                    />
+                </div>
+                {/if}
+            </div>
+        </div>
+        <div class="utility-value">
+            <div class="utility-input line-align-center">
+                <Input
+                    type="select"
+                    disabled={rule.disabled}
+                    on:change={e => changeRule(e, 'rule')}
+                >
+                    {#each [...ruleOptions] as option}
+                        <option value={option.name} selected={option.name == rule.trigger_name}>
+                            {option.displayName || option.name}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
+            <div class="utility-delete line-align-center">
+                <i
+                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    role="link"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => deleteRule('rule')}
+                />
+            </div>
+        </div>
+    </div>
+
+    {#if !collapsed}
+    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
+        <div class="utility-content">
+            <div class="utility-list-item">
+                <div class="utility-label line-align-center">
+                    <div class="d-flex gap-1">
+                        <div class="line-align-center">
+                            {'Topology'}
+                        </div>
+                        <div class="line-align-center"></div>
+                    </div>
+                </div>
+                <div class="utility-value">
+                    <div class="utility-input line-align-center">
+                        <Input
+                            type="select"
+                            on:change={e => changeRule(e, 'topology')}
+                        >
+                            {#each [...configOptions] as option}
+                                <option value={`${option.name}`} selected={option.name == rule.config?.topology_provider}>
+                                    {option.name}
+                                </option>
+                            {/each}
+                        </Input>
+                    </div>
+                    <div class="utility-delete line-align-center"></div>
+                </div>
+            </div>
+            <!-- <div class="utility-list-item">
+                <div class="utility-label line-align-center">
+                    <div class="d-flex gap-1">
+                        <div class="line-align-center">
+                            {'Criteria'}
+                        </div>
+                        <div class="line-align-center">
+                            <Input
+                                type="checkbox"
+                                checked={!rule.rule_criteria?.disabled}
+                                on:change={e => toggleRule(e, 'criteria')}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div class="utility-value">
+                    <div class="utility-input line-align-center">
+                        <Input
+                            type="select"
+                            disabled={!!rule.rule_criteria?.disabled}
+                            on:change={e => changeRule(e, 'criteria')}
+                        >
+                            {#each [...criteriaOptions] as option}
+                                <option value={`${option.name}#${option.defaultConfig}`} selected={option.name == rule.rule_criteria?.name}>
+                                    {option.name}
+                                </option>
+                            {/each}
+                        </Input>
+                    </div>
+                    <div class="utility-delete line-align-center"></div>
+                </div>
+            </div>
+            <div class="utility-list-item">
+                <div class="utility-label line-align-center">
+                    <div class="d-flex gap-1">
+                        <div class="line-align-center">
+                            {'Text'}
+                        </div>
+                        {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && !!rule.rule_criteria?.criteria_text?.trim()}
+                        <div
+                            class="line-align-center clickable text-primary fs-5"
+                            style="padding-top: 3px;"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="top"
+                            title="Compile code script"
+                        >
+                            <i
+                                class="mdi mdi-play-circle"
+                                role="link"
+                                tabindex="0"
+                                on:keydown={() => {}}
+                                on:click={() => compileCodeScript()}
+                            />
+                        </div>
+                        {/if}
+                    </div>
+                </div>
+                <div class="utility-value">
+                    <div class="utility-input line-align-center">
+                        <Input
+                            type="textarea"
+                            style="resize: none;"
+                            rows={5}
+                            disabled={!!rule.rule_criteria?.disabled}
+                            maxlength={textLimit}
+                            value={rule.rule_criteria?.criteria_text}
+                            on:input={e => changeRule(e, 'criteria-text')}
+                        />
+                    </div>
+                    <div class="utility-delete line-align-center">
+                        {#if rule.json_args}
+                        <div class="line-align-center">
+                            <i
+                                class="bx bxs-info-circle text-primary fs-5"
+                                id={`rule-args-${ruleIndex}`}
+                                data-bs-toggle="tooltip"
+                                data-bs-placement="top"
+                                title="Rule arguments"
+                            />
+                            <BotsharpTooltip
+                                containerClasses="agent-utility-desc"
+                                style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
+                                target={`rule-args-${ruleIndex}`}
+                                placement="right"
+                                persist
+                            >
+                                <Markdown
+                                    rawText
+                                    scrollable
+                                    containerClasses={'markdown-div'}
+                                    containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
+                                    text={rule.json_args}
+                                />
+                            </BotsharpTooltip>
+                        </div>
+                        {/if}
+                    </div>
+                </div>
+            </div>
+            {#if rule.rule_criteria?.name}
+            <div class="utility-list-item">
+                <div class="utility-label line-align-center">
+                    <div class="d-flex gap-1">
+                        <div class="line-align-center">
+                            {'Config'}
+                        </div>
+                    </div>
+                </div>
+                <div class="utility-value">
+                    <div class="utility-input line-align-center">
+                        <CodeScript
+                            language="json"
+                            containerClasses="agent-rule-config"
+                            hideLineNumber={true}
+                            editable={!rule.rule_criteria?.disabled}
+                            scriptText={JSON.stringify(rule.rule_criteria?.config || {}, null, 2)}
+                            on:change={(e) => changeRule(e, 'criteria-config')}
+                        />
+                    </div>
+                    <div class="utility-delete line-align-center"></div>
+                </div>
+            </div>
+            {/if} -->
+        </div>
+    </div>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte
new file mode 100644
index 00000000..bff1ca4e
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte
@@ -0,0 +1,472 @@
+<script>
+    import { onMount } from 'svelte';
+    import Swal from 'sweetalert2';
+    import { Card, CardBody, Button } from '@sveltestrap/sveltestrap';
+    import { AI_PROGRAMMER_AGENT_ID, RULE_TRIGGER_CODE_GENERATE_TEMPLATE } from '$lib/helpers/constants';
+    import { getAgentRuleOptions, generateAgentCodeScript, getAgentRuleConfigOptions } from '$lib/services/agent-service';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
+	import { AgentCodeScriptType } from '$lib/helpers/enums';
+	import { scrollToBottom } from '$lib/helpers/utils/common';
+	import AgentRuleItem from './agent-rule-item.svelte';
+	import PlainModal from '$lib/common/modals/PlainModal.svelte';
+
+    const limit = 100;
+    
+    /** @type {boolean} */
+    let isLoading = false;
+    /** @type {boolean} */
+    let isComplete = false;
+    /** @type {boolean} */
+    let isError = false;
+    /** @type {boolean} */
+    let isOpenConfigModal = false;
+
+    /** @type {number} */
+    let duration = 2000;
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    /** @type {string} */
+    let successText = '';
+    let errorText = '';
+
+    /** @type {any} */
+    let selectedRuleConfig = {};
+    /** @type {any} */
+    let ruleConfigs = {};
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    /** @type {import('$userTypes').UserModel} */
+    export let user;
+
+    /** @type {() => void} */
+    export let handleAgentChange = () => {};
+
+    export const fetchRules = () => {
+        const candidates = innerRules?.filter(x => !!x.trigger_name)?.map(x => {
+            return {
+                trigger_name: x.trigger_name,
+                disabled: x.disabled,
+                config: x.config,
+                expanded: x.expanded
+            };
+        });
+
+        /** @type {import('$agentTypes').AgentRule[]} */
+        const rules = [];
+        const unique = new Set();
+        candidates.forEach(x => {
+            if (!unique.has(x.trigger_name)) {
+                rules.push(x);
+                unique.add(x.trigger_name);
+            }
+        });
+
+        innerRefresh(rules);
+        return rules;
+    }
+
+    /** @type {any[]} */
+    let ruleOptions = [];
+
+    /** @type {any} */
+    let configOptions = [];
+
+    /** @type {import('$agentTypes').AgentRule[]} */
+    let innerRules = [];
+
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
+    onMount(async () =>{
+        resizeWindow();
+        Promise.all([
+            loadAgentRuleOptions(),
+            loadAgentRuleConfigOptions()
+        ]);
+    });
+
+    function loadAgentRuleOptions() {
+        return new Promise((resolve) => {
+            getAgentRuleOptions().then(data => {
+                const list = data?.map(x => {
+                    return {
+                        name: x.trigger_name,
+                        displayName: "",
+                        output_args: x.output_args,
+                        json_args: x.json_args,
+                        statement: x.statement
+                    };
+                }) || [];
+                ruleOptions = [{
+                    name: "",
+                    displayName: ""
+                }, ...list];
+                init();
+                resolve('done');
+            });
+        });
+    }
+
+    function init() {
+        const list = agent.rules?.map(x => {
+            return {
+                ...x,
+                displayName: ""
+            };
+        }) || [];
+        innerRefresh(list);
+    }
+
+    function loadAgentRuleConfigOptions() {
+        return new Promise((resolve) => {
+            getAgentRuleConfigOptions().then(data => {
+                ruleConfigs = data || {};
+                const keys = Object.keys(data || {});
+                const list = keys?.map(x => ({ name: x })) || [];
+                configOptions = [
+                    { name: '' },
+                    ...list
+                ];
+                resolve('done');
+            });
+        });
+    }
+    
+    /**
+	 * @param {any} e
+	 * @param {number} idx
+	 */
+    function changeRule(e, idx) {
+        const found = innerRules.find((_, index) => index === idx);
+        if (!found) return;
+
+        const field = e.detail.field;
+        const value = e.detail.value;
+        if (field === 'rule') {
+            found.trigger_name = value;
+            innerRefresh(innerRules);
+        } else if (field === 'topology') {
+            found.config = {
+                ...found.config || {},
+                topology_provider: value
+            };
+            innerRefresh(innerRules);
+        }
+        
+        // else if (field === 'criteria') {
+        //     const name = value.split('#')[0];
+        //     const defaultConfig = value.split('#')[1];
+        //     found.rule_criteria = { 
+        //         ...found.rule_criteria || {},
+        //         name: name,
+        //         disabled: found.rule_criteria?.disabled || false,
+        //         config: JSON.parse(defaultConfig || '{}')
+        //     };
+        //     innerRefresh(innerRules);
+        // } else if (field === 'criteria-text') {
+        //     if (found.rule_criteria == null) {
+        //         found.rule_criteria = {
+        //             name: '',
+        //             disabled: false,
+        //             config: {}
+        //         };
+        //     }
+        //     found.rule_criteria.criteria_text = value;
+        //     innerRefresh(innerRules);
+        // } else if (field === 'criteria-config') {
+        //     if (found.rule_criteria == null) {
+        //         found.rule_criteria = {
+        //             name: '',
+        //             disabled: false,
+        //             config: {}
+        //         };
+        //     }
+        //     try {
+        //         found.rule_criteria.config = JSON.parse(value || '{}');
+        //     } catch {
+        //         // ignore invalid JSON while typing
+        //     }
+        // }
+
+        handleAgentChange();
+    }
+
+    function addRule() {
+        innerRules = [
+            ...innerRules,
+            {
+                trigger_name: '',
+                displayName: '',
+                disabled: false,
+                expanded: true
+            }
+        ];
+        scrollToBottom(scrollContainer);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function deleteRule(e, idx) {
+        if (e.detail.field === 'rule') {
+            innerRules = innerRules.filter((_, index) => index !== idx);
+        }
+        
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function toggleRule(e, idx) {
+        const found = innerRules.find((_, index) => index === idx);
+        if (!found) return;
+
+        const field = e.detail.field;
+        if (field === 'rule') {
+            found.disabled = !e.detail.checked;
+        }
+        
+        // else if (field === 'criteria') {
+        //     if (!found.rule_criteria) {
+        //         found.rule_criteria = {
+        //             name: '',
+        //             disabled: false
+        //         };
+        //     }
+        //     found.rule_criteria.disabled = !e.detail.checked;
+        // }
+        
+        innerRefresh(innerRules);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+	 */
+	function toggleCollapse(e, uid) {
+		const found = innerRules.find((_, index) => index === uid);
+        if (!found) return;
+
+        found.expanded = !e.detail.collapsed;
+        innerRefresh(innerRules);
+        handleAgentChange();
+	}
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+	 */
+    function addRuleItem(e, uid) {
+        const found = innerRules.find((_, index) => index === uid);
+        if (!found) return;
+        
+        innerRefresh(innerRules);
+        handleAgentChange();
+    }
+
+    // /**
+	//  * @param {import("$agentTypes").AgentRule} rule
+	//  */
+    // function compileCodeScript(rule) {
+    //     if (!!rule.rule_criteria?.disabled) {
+    //         return;
+    //     }
+
+    //     Swal.fire({
+    //         title: 'Are you sure?',
+    //         html: `
+    //             <div>
+    //                 <p>Are you sure you want to generate code script <b>"${buildScriptName(rule.trigger_name)}"</b>?</p>
+    //                 <p>This action will overwrite existing code script if any.</p>
+    //             </div>
+    //         `,
+    //         icon: 'warning',
+    //         showCancelButton: true,
+	// 		cancelButtonText: 'No',
+    //         confirmButtonText: 'Yes'
+    //     }).then(async (result) => {
+    //         if (result.value) {
+    //             generateCodeScript(rule);
+    //         }
+    //     });
+    // }
+
+    // /**
+	//  * @param {import("$agentTypes").AgentRule} rule
+	//  */
+    // function generateCodeScript(rule) {
+    //     return new Promise((resolve, reject) => {
+    //         isLoading = true;
+    //         generateAgentCodeScript(agent.id, {
+    //             text: '',
+    //             options: {
+    //                 agent_id: AI_PROGRAMMER_AGENT_ID,
+    //                 template_name: RULE_TRIGGER_CODE_GENERATE_TEMPLATE,
+    //                 save_to_db: true,
+    //                 script_name: buildScriptName(rule.trigger_name),
+    //                 script_type: AgentCodeScriptType.Src,
+    //                 data: {
+    //                     'args_example': { ...rule.output_args },
+    //                     'user_request': rule.rule_criteria?.criteria_text
+    //                 }
+    //             }
+    //         }).then(res => {
+    //             if (res?.success) {
+    //                 isLoading = false;
+    //                 isComplete = true;
+    //                 successText = "Code script has been generated!";
+    //                 setTimeout(() => {
+    //                     isComplete = false;
+    //                     successText = "";
+    //                 }, duration);
+    //                 resolve(res);
+    //             }  else {
+    //                 throw "error when generating code script.";
+    //             }
+    //         }).catch(() => {
+    //             isLoading = false;
+    //             isComplete = false;
+    //             isError = true;
+    //             errorText = "Failed to generate code script.";
+    //             setTimeout(() => {
+    //                 isError = false;
+    //                 errorText = "";
+    //             }, duration);
+    //             reject();
+    //         });
+    //     });
+    // }
+
+
+    /** @param {import('$agentTypes').AgentRule[]} list */
+    function innerRefresh(list) {
+        innerRules = list?.map(x => {
+            const found = ruleOptions.find(y => y.name === x.trigger_name);
+            return {
+                ...x,
+                output_args: found?.output_args,
+                json_args: found?.json_args,
+                statement: found?.statement
+            }
+        }) || [];
+    }
+
+    // /** @param {string} name */
+    // function buildScriptName(name) {
+    //     let scriptName = name?.trim();
+    //     if (!name) {
+    //         scriptName = 'unknown_rule.py';
+    //     } else {
+    //         scriptName = `${scriptName.replace(/\s+/g, "_")}_rule.py`;
+    //     }
+        
+    //     return scriptName;
+    // }
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+	 */
+    function openRuleConfigModal(e, uid) {
+        const found = innerRules.find((_, index) => index === uid);
+        if (!found || !found.config?.topology_provider) {
+            return;
+        }
+
+        const config = ruleConfigs[found.config.topology_provider];
+        const customParam = config.customParameters || {};
+
+        if (customParam.htmlTag === 'iframe') {
+            const params = JSON.stringify({
+                agent: agent.name,
+                agentId: agent.id,
+                trigger: found.trigger_name || ""
+            });
+            const url = new URL(customParam.url, window.location.origin);
+            url.searchParams.set(customParam.appendParameterName || 'parameters', encodeURIComponent(params));
+
+            selectedRuleConfig = {
+                agent: agent.name,
+                url: url.toString(),
+                rule: found,
+                title: `${found.trigger_name} config`
+            };
+            isOpenConfigModal = true;
+        }
+    }
+
+    function resizeWindow() {
+        windowWidth = window.innerWidth;
+        windowHeight = window.innerHeight;
+    }
+</script>
+
+<svelte:window on:resize={() => resizeWindow()}/>
+
+<LoadingToComplete
+    {isLoading}
+    {isComplete}
+    {isError}
+    {successText}
+    {errorText}
+/>
+
+{#if isOpenConfigModal}
+    <PlainModal
+        containerClasses={'rule-config-modal'}
+        title={selectedRuleConfig?.rule?.trigger_name || ''}
+        size={'xl'}
+        isOpen={isOpenConfigModal}
+        toggleModal={() => isOpenConfigModal = !isOpenConfigModal}
+    >
+        <iframe src={selectedRuleConfig.url} title={selectedRuleConfig.title} width="100%" height="100%" />
+    </PlainModal>
+{/if}
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">Triggers & Rules</h5>
+            <h6 class="mt-1 mb-3">Wake-up your agent by rules</h6>
+        </div>
+
+        <div class="agent-utility-container" bind:this={scrollContainer}>
+            {#each innerRules as rule, uid (uid)}
+                <AgentRuleItem
+                    rule={rule}
+                    ruleIndex={uid}
+                    collapsed={!rule.expanded}
+                    user={user}
+                    ruleOptions={ruleOptions}
+                    configOptions={configOptions}
+                    windowWidth={windowWidth}
+                    on:toggle={e => toggleRule(e, uid)}
+                    on:delete={e => deleteRule(e, uid)}
+                    on:change={e => changeRule(e, uid)}
+                    on:add={e => addRuleItem(e, uid)}
+                    on:config={e => openRuleConfigModal(e, uid)}
+                    on:collapse={e => toggleCollapse(e, uid)}
+                />
+            {/each}
+
+            {#if innerRules.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addRule()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add Rule</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
diff --git a/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte
new file mode 100644
index 00000000..96f1c453
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte
@@ -0,0 +1,373 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { slide } from 'svelte/transition';
+    import { Input } from '@sveltestrap/sveltestrap';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
+	import Markdown from '$lib/common/markdown/Markdown.svelte';
+
+    const svelteDispatch = createEventDispatcher();
+
+    const duration = 200;
+
+    /** @type {import('$agentTypes').AgentUtility} */
+    export let utility;
+
+    /** @type {number} */
+    export let utilityIndex;
+
+    /** @type {number} */
+    export let windowWidth;
+
+    /** @type {any} */
+    export let utilityMapper;
+
+    /** @type {any[]} */
+    export let utilityCategoryOptions;
+
+    /** @type {boolean} */
+    export let collapsed = true;
+
+
+    /**
+     * @param {any} e
+	 */
+    function toggleUtility(e) {
+        svelteDispatch('toggle', {
+            utilityIdx: utilityIndex,
+            checked: e.target.checked
+        });
+    }
+
+    function deleteUtility() {
+        svelteDispatch('delete', {
+            utilityIdx: utilityIndex,
+            field: 'utility'
+        });
+    }
+
+    function resetUtility() {
+        svelteDispatch('reset', {
+            utilityIdx: utilityIndex
+        });
+    }
+
+    /**
+     * @param {any} e
+	 */
+    function changeUtilityCategory(e) {
+        svelteDispatch('change', {
+            utilityIdx: utilityIndex,
+            field: 'utility-category',
+            value: e.target.value
+        });
+    }
+
+    /**
+     * @param {any} e
+	 */
+    function changeUtilityName(e) {
+        svelteDispatch('change', {
+            utilityIdx: utilityIndex,
+            field: 'utility-name',
+            value: e.target.value
+        });
+    }
+
+    /**
+     * @param {any} e
+	 */
+     function changeUtilityVisibility(e) {
+        svelteDispatch('change', {
+            utilityIdx: utilityIndex,
+            field: 'utility-visibility',
+            value: e.target.value
+        });
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} fid
+	 */
+    function changeUtilityItemVisibility(e, fid) {
+        svelteDispatch('change', {
+            utilityIdx: utilityIndex,
+            field: 'utility-item-visibility',
+            itemIdx: fid,
+            value: e.target.value
+        });
+    }
+
+    /**
+	 * @param {number} fid
+     * @param {string} type
+	 */
+    function deleteUtilityItem(fid, type) {
+        svelteDispatch('delete', {
+            utilityIdx: utilityIndex,
+            field: 'utility-item',
+            subfield: type,
+            itemIdx: fid
+        });
+    }
+
+    function toggleCollapse() {
+        svelteDispatch('collapse', {
+            utilityIdx: utilityIndex,
+            collapsed: !collapsed
+        });
+    }
+
+    /**
+     * @param {string[]} options
+	 * @param {string} placeholder
+	 */
+    function getUtilityOptions(options, placeholder = '') {
+        let list = options?.sort((a, b) => a.localeCompare(b))?.map(x => {
+            return {
+                label: x,
+                value: x
+            };
+        }) || [];
+
+        list = [{
+            label: placeholder || '',
+            value: ''
+        }, ...list];
+        return list;
+    }
+
+    /**
+     * @param {string} category
+     * @param {string} name
+     * @param {string} key
+	 */
+    function getUtilityItemDescription(category, name, key) {
+        // @ts-ignore
+        const desc = utilityMapper[category]?.find(x => x.name === name)?.items?.find(x => x.function_name === key)?.description;
+        return desc || '';
+    }
+</script>
+
+<div class="utility-wrapper">
+    <div class="utility-row utility-row-primary">
+        <div class="utility-label fw-bold">
+            <div class="line-align-center">
+                <i
+                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class:rotated={!collapsed}
+                    role="button"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => toggleCollapse()}
+                />
+            </div>
+            <div class="line-align-center">
+                {`Utility #${utilityIndex + 1}`}
+            </div>
+            <div class="utility-tooltip">
+                <div class="line-align-center">
+                    <Input
+                        type="checkbox"
+                        checked={!utility.disabled}
+                        on:change={e => toggleUtility(e)}
+                    />
+                </div>
+                <!-- <div
+                    class="line-align-center"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Uncheck to disable utility"
+                >
+                    <i class="bx bx-info-circle fs-6" />
+                </div> -->
+            </div>
+        </div>
+        <div class="utility-value">
+            <div class="utility-input line-align-center">
+                <Input
+                    type="select"
+                    value={utility.category}
+                    disabled={utility.disabled}
+                    on:change={e => changeUtilityCategory(e)}
+                >
+                    {#each utilityCategoryOptions as option}
+                        <option value={option.value} selected={option.value == utility.category}>
+                            {option.label}
+                        </option>
+                    {/each}
+                </Input>
+            </div>
+            <div class="utility-delete line-align-center">
+                <i
+                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    role="link"
+                    tabindex="0"
+                    on:keydown={() => {}}
+                    on:click={() => deleteUtility()}
+                />
+            </div>
+        </div>
+    </div>
+    
+    {#if !collapsed}
+    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
+        {#if utility.category}
+            {
+                @const utilityOptions = getUtilityOptions(utilityMapper[utility.category]?.map((/** @type {any} */ x) => x.name), 'Select a utility')
+            }
+            <div class="utility-content">
+                <div class="utility-list-item">
+                    <div class="utility-label d-flex" style="gap: 10px;">
+                        <div class="line-align-center">{'Name'}</div>
+                        {#if utility.name}
+                        <div class="line-align-center">
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <i
+                                class="mdi mdi-refresh clickable fs-6"
+                                style="padding-top: 3px;"
+                                data-bs-toggle="tooltip"
+                                data-bs-placement="top"
+                                title="Reset"
+                                on:click={() => resetUtility()}
+                            />
+                        </div>
+                        {/if}
+                    </div>
+                    <div class="utility-value">
+                        <div class="utility-input line-align-center">
+                            <Input
+                                type="select"
+                                value={utility.name}
+                                disabled={utility.disabled}
+                                on:change={e => changeUtilityName(e)}
+                            >
+                                {#each utilityOptions as option}
+                                    <option value={option.value} selected={option.value == utility.name}>
+                                        {option.label}
+                                    </option>
+                                {/each}
+                            </Input>
+                        </div>
+                        <div class="utility-delete line-align-center"></div>
+                    </div>
+                </div>
+                <div class="utility-list-item">
+                    <div class="utility-label line-align-center">
+                        {'Visibility'}
+                    </div>
+                    <div class="utility-value">
+                        <div class="utility-input line-align-center">
+                            <Input
+                                type="text"
+                                disabled={utility.disabled}
+                                maxlength={1000}
+                                value={utility.visibility_expression}
+                                on:change={e => changeUtilityVisibility(e)}
+                            />
+                        </div>
+                        <div class="utility-delete line-align-center"></div>
+                    </div>
+                </div>
+            </div>
+        {/if}
+        {#each utility.items as item, fid (fid)}
+            <div class="utility-content">
+                {#if item.function_name}
+                    { 
+                        @const description = getUtilityItemDescription(utility.category, utility.name, item.function_name)
+                    }
+                    <div class="utility-list-item">
+                        <div class="utility-label d-flex" style="gap: 10px;">
+                            <div class="line-align-center">{'Function'}</div>
+                            {#if description}
+                            <div class="line-align-center">
+                                <i
+                                    class="bx bx-info-circle fs-6"
+                                    id={`utility-${utilityIndex}-${fid}`}
+                                />
+                                <BotsharpTooltip
+                                    containerClasses="agent-utility-desc"
+                                    style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
+                                    target={`utility-${utilityIndex}-${fid}`}
+                                    placement="right"
+                                    persist
+                                >
+                                    <Markdown
+                                        rawText
+                                        scrollable
+                                        containerClasses={'markdown-div'}
+                                        containerStyles={`max-width: ${Math.floor(windowWidth*0.55)}px;`}
+                                        text={description}
+                                    />
+                                </BotsharpTooltip>
+                            </div>
+                            {/if}
+                        </div>
+                        <div class="utility-value">
+                            <div class="utility-input line-align-center">
+                                <Input
+                                    type="text"
+                                    value={item.function_display_name}
+                                    disabled
+                                />
+                            </div>
+                            <div class="utility-delete line-align-center">
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable fs-6"
+                                    role="link"
+                                    tabindex="0"
+                                    on:keydown={() => {}}
+                                    on:click={() => deleteUtilityItem(fid, 'function')}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                {/if}
+                {#if item.template_name}
+                    <div class="utility-list-item">
+                        <div class="utility-label line-align-center">
+                            {'Template'}
+                        </div>
+                        <div class="utility-value">
+                            <div class="utility-input line-align-center">
+                                <Input
+                                    type="text"
+                                    value={item.template_display_name}
+                                    disabled
+                                />
+                            </div>
+                            <div class="utility-delete line-align-center">
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable fs-6"
+                                    role="link"
+                                    tabindex="0"
+                                    on:keydown={() => {}}
+                                    on:click={() => deleteUtilityItem(fid, 'template')}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                {/if}
+                <div class="utility-list-item">
+                    <div class="utility-label line-align-center">
+                        {'Visibility'}
+                    </div>
+                    <div class="utility-value">
+                        <div class="utility-input line-align-center">
+                            <Input
+                                type="text"
+                                disabled={utility.disabled}
+                                maxlength={1000}
+                                value={item.visibility_expression}
+                                on:change={e => changeUtilityItemVisibility(e, fid)}
+                            />
+                        </div>
+                        <div class="utility-delete line-align-center"></div>
+                    </div>
+                </div>
+            </div>
+        {/each}
+    </div>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte
new file mode 100644
index 00000000..c8007b0f
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte
@@ -0,0 +1,312 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+    import { getAgentUtilityOptions } from '$lib/services/agent-service';
+	import { scrollToBottom, truncateByPrefix } from '$lib/helpers/utils/common';
+	import AgentUtilityItem from './agent-utility-item.svelte';
+
+    const limit = 100;
+    const prefix = "util-";
+
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    /** @type {() => void} */
+    export let handleAgentChange = () => {};
+
+    export const fetchUtilities = () => {
+        const list = innerUtilities?.filter(x => !!x.category && !!x.name && x.items?.length > 0) || [];
+        
+        /** @type {import('$agentTypes').AgentUtility[]} */
+        const candidates = list.reduce((acc, x) => {
+            const tag = `${x.category}##${x.name}`;
+            if (!acc.visited.has(tag)) {
+                // @ts-ignore
+                acc.result.push(x);
+                acc.visited.add(tag);
+            }
+            return acc;
+        }, { result: [], visited: new Set() }).result;
+
+        innerRefresh(candidates);
+        return candidates;
+    }
+    
+    /** @type {any} */
+    let utilityMapper = {};
+
+    /** @type {import('$agentTypes').AgentUtility[]} */
+    let innerUtilities = [];
+
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
+    onMount(async () =>{
+        resizeWindow();
+        getAgentUtilityOptions().then(data => {
+            const list = data || [];
+            list.forEach(utility => {
+                const content = {
+                    name: utility.name,
+                    items: utility.items.map(it => ({
+                        ...it,
+                        function_display_name: truncateByPrefix(it.function_name, prefix),
+                        template_display_name: truncateByPrefix(it.template_name, prefix)
+                    }))
+                };
+
+                const contents = utilityMapper[utility.category] || [];
+                contents.push(content);
+                utilityMapper[utility.category] = contents;
+            });
+            init();
+        });
+    });
+
+    function init() {
+        const list = agent.utilities?.map(x => {
+            return {
+                ...x,
+                items: x.items.map(it => ({
+                    ...it,
+                    function_display_name: truncateByPrefix(it.function_name, prefix),
+                    template_display_name: truncateByPrefix(it.template_name, prefix)
+                }))
+            };
+        }) || [];
+        innerRefresh(list);
+    }
+
+    function resizeWindow() {
+        windowWidth = window.innerWidth;
+        windowHeight = window.innerHeight;
+    }
+
+
+    function addUtility() {
+        innerUtilities = [
+            ...innerUtilities,
+            {
+                category: '',
+                name: '',
+                disabled: false,
+                items: [],
+                expanded: true
+            }
+        ];
+        scrollToBottom(scrollContainer);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function deleteUtility(e, idx) {
+        if (e.detail.field == 'utility') {
+            innerUtilities = innerUtilities.filter((_, index) => index !== idx);
+        } else if (e.detail.field == 'utility-item') {
+            const foundUtility = innerUtilities.find((_, index) => index === idx);
+            const foundItem = foundUtility?.items?.find((_, index) => index === e.detail.itemIdx);
+            if (!foundUtility || !foundItem) return;
+
+            if (e.detail.subfield === 'function') {
+                foundItem.function_name = null;
+                foundItem.function_display_name = null;
+                foundItem.template_name = null;
+                foundItem.template_display_name = null;
+            } else if (e.detail.subfield === 'template') {
+                foundItem.template_name = null;
+                foundItem.template_display_name = null;
+            }
+
+            if (foundItem.function_name == null && foundItem.template_name == null) {
+                foundUtility.items = foundUtility.items.filter((_, index) => index !== e.detail.itemIdx);
+            }
+
+            innerRefresh(innerUtilities);
+        }
+
+        handleAgentChange();
+    }
+
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function changeUtility(e, idx) {
+        const found = innerUtilities.find((_, index) => index === idx);
+        if (!found) return;
+
+        if (e.detail.field === 'utility-category') {
+            const category = e.detail.value;
+            found.category = category;
+            found.name = '';
+            found.items = [];
+        } else if (e.detail.field === 'utility-name') {
+            const name = e.detail.value;
+            found.name = name;
+            const foundUtility = utilityMapper[found.category]?.find((/** @type {any} */ x) => x.name == name);
+            found.items = foundUtility?.items?.map((/** @type {any} */ x) => ({...x})) || [];
+        } else if (e.detail.field === 'utility-visibility') {
+            found.visibility_expression = e.detail.value || null;
+        } else if (e.detail.field === 'utility-item-visibility') {
+            const foundItem = found.items.find((_, index) => index === e.detail.itemIdx);
+            if (foundItem) {
+                foundItem.visibility_expression = e.detail.value || null;
+            }
+        }
+
+        innerRefresh(innerUtilities);
+        handleAgentChange();
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+    function toggleUtility(e, idx) {
+        const found = innerUtilities.find((_, index) => index === idx);
+        if (!found) return;
+
+        found.disabled = !e.detail.checked;
+        innerRefresh(innerUtilities);
+        handleAgentChange();
+    }
+
+
+    /** @param {import('$agentTypes').AgentUtility[]} list */
+    function innerRefresh(list) {
+        innerUtilities = list?.map(x => {
+            return {
+                ...x,
+                category: x.category,
+                name: x.name,
+                disabled: x.disabled,
+                visibility_expression: x.visibility_expression,
+                items: x.items.map(it => ({ ...it, description: null }))
+            }
+        }) || [];
+    }
+
+
+    /** @param {any} e */
+    function toggleMergeUtility(e) {
+        const checked = e.target.checked;
+        if (!!agent) {
+            agent.merge_utility = checked;
+        }
+        handleAgentChange();
+    }
+
+    /** @param {number} idx */
+	function resetUtility(idx) {
+		const found = innerUtilities.find((_, index) => index === idx);
+        if (!found) return;
+
+        const originalItems = utilityMapper[found.category]?.find((/** @type {any} */ x) => x.name === found.name)?.items || [];
+        found.items = [...originalItems];
+        innerRefresh(innerUtilities);
+        handleAgentChange();
+	}
+
+    /**
+     * @param {any} e
+	 * @param {number} idx
+	 */
+	function toggleCollapse(e, idx) {
+		const found = innerUtilities.find((_, index) => index === idx);
+        if (!found) return;
+
+        found.expanded = !e.detail.collapsed;
+        innerRefresh(innerUtilities);
+        handleAgentChange();
+	}
+
+    /**
+     * @param {string[]} options
+	 * @param {string} placeholder
+	 */
+    function getUtilityOptions(options, placeholder = '') {
+        let list = options?.sort((a, b) => a.localeCompare(b))?.map(x => {
+            return {
+                label: x,
+                value: x
+            };
+        }) || [];
+
+        list = [{
+            label: placeholder || '',
+            value: ''
+        }, ...list];
+        return list;
+    }
+</script>
+
+<svelte:window on:resize={() => resizeWindow()}/>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">Utilities</h5>
+            <h6 class="mt-1 mb-3">Tools shared across plugins</h6>
+        </div>
+
+        <div class="agent-utility-container" bind:this={scrollContainer}>
+            {#if !agent?.is_router}
+                <div class="merge-utility">
+                    <Input
+                        type="checkbox"
+                        checked={agent?.merge_utility || false}
+                        on:change={e => toggleMergeUtility(e)}
+                    />
+                    <div class="fw-bold">
+                        Merge utilities
+                    </div>
+                    <div
+                        class="line-align-center"
+                        data-bs-toggle="tooltip"
+                        data-bs-placement="top"
+                        title="Merge with entry agent utilities"
+                    >
+                        <i class="bx bx-info-circle fs-6" />
+                    </div>
+                </div>
+            {/if}
+
+            {#each innerUtilities as utility, uid (uid)}
+                {
+                    @const utilityCategoryOptions = getUtilityOptions(Object.keys(utilityMapper), 'Select a category')
+                }
+                <AgentUtilityItem
+                    utility={utility}
+                    utilityIndex={uid}
+                    utilityMapper={utilityMapper}
+                    utilityCategoryOptions={utilityCategoryOptions}
+                    collapsed={!utility.expanded}
+                    windowWidth={windowWidth}
+                    on:toggle={e => toggleUtility(e, uid)}
+                    on:delete={e => deleteUtility(e, uid)}
+                    on:reset={() => resetUtility(uid)}
+                    on:change={e => changeUtility(e, uid)}
+                    on:collapse={e => toggleCollapse(e, uid)}
+                />
+            {/each}
+
+            {#if innerUtilities.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addUtility()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add utility</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index a585c546..43370a7c 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -4,11 +4,11 @@
 	import NavBar from "$lib/common/nav-bar/NavBar.svelte";
 	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
 	import AgentLlmConfig from './agent-components/agent-llm-config.svelte';
-	import AgentUtility from './agent-components/agent-utility.svelte';
-	import AgentKnowledgeBase from './agent-components/agent-knowledge-base.svelte';
+	import AgentUtility from './agent-components/utilities/agent-utility.svelte';
+	import AgentKnowledgeBase from './agent-components/knowledge-bases/agent-knowledge-base.svelte';
 	import AgentRouting from './agent-components/agent-routing.svelte';
-	import AgentEventRule from './agent-components/agent-rule.svelte';
-	import AgentMcpTool from './agent-components/agent-mcp-tool.svelte';
+	import AgentEventRule from './agent-components/rules/agent-rule.svelte';
+	import AgentMcpTool from './agent-components/mcp-tools/agent-mcp-tool.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
@@ -60,7 +60,7 @@
     ];
 
     onMount(() => {
-        selectedTab = tabs[0]?.name;
+        selectedTab = tabs[4]?.name;
     });
 
     /** @param {string} selected */