diff --git a/src/lib/common/StateModal.svelte b/src/lib/common/StateModal.svelte
index 271993c2..6a8e7ebb 100644
--- a/src/lib/common/StateModal.svelte
+++ b/src/lib/common/StateModal.svelte
@@ -201,7 +201,7 @@
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-no-static-element-interactions -->
                         <i
-                            class="bx bx-no-entry clickable"
+                            class="bx bxs-no-entry clickable"
                             class:hide={states.length === 1}
                             on:click={() => remove(idx)}
                         />
diff --git a/src/lib/common/StateSearch.svelte b/src/lib/common/StateSearch.svelte
index 9f041ca7..17c681cf 100644
--- a/src/lib/common/StateSearch.svelte
+++ b/src/lib/common/StateSearch.svelte
@@ -58,7 +58,7 @@
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <!-- svelte-ignore a11y-no-static-element-interactions -->
                     <i
-                        class="bx bx-no-entry text-danger clickable"
+                        class="bx bxs-no-entry text-danger clickable"
                         class:hide={states.length === 1}
                         on:click={() => removeState(idx)}
                     />
diff --git a/src/lib/helpers/constants.js b/src/lib/helpers/constants.js
index 1b21bac0..eabcaec6 100644
--- a/src/lib/helpers/constants.js
+++ b/src/lib/helpers/constants.js
@@ -37,10 +37,12 @@ export const FILE_EDITORS = [
     EditorType.File
 ];
 
-export const LEARNER_ID = "01acc3e5-0af7-49e6-ad7a-a760bd12dc40";
-export const EVALUATOR_ID = "2cd4b805-7078-4405-87e9-2ec9aadf8a11";
-export const TRAINING_MODE = "training";
+export const LEARNER_AGENT_ID = "01acc3e5-0af7-49e6-ad7a-a760bd12dc40";
+export const EVALUATOR_AGENT_ID = "2cd4b805-7078-4405-87e9-2ec9aadf8a11";
+export const AI_PROGRAMMER_AGENT_ID = "c2a2faf6-b8b5-47fe-807b-f4714cf25dd4";
+export const RULE_TRIGGER_CODE_GENERATE_TEMPLATE = "rule-trigger-code-generate_instruction";
 
+export const TRAINING_MODE = "training";
 export const DEFAULT_KNOWLEDGE_COLLECTION = "BotSharp";
 export const IMAGE_DATA_PREFIX = 'data:image';
 
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 8e470866..19e8bc21 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -75,7 +75,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
         new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-script/generate', 'g')
     ];
 
     /** @type {RegExp[]} */
@@ -111,7 +112,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g'),
-        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g')
+        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index d3fb5a06..be941c2a 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -135,6 +135,31 @@
  * @property {AgentCodeScriptUpdateOptions?} [options]
  */
 
+/** 
+ * @typedef {Object} AgentCodeScriptGenerateModel
+ * @property {string?} [text]
+ * @property {CodeProcessOptions?} [options]
+ */
+
+/** 
+ * @typedef {Object} CodeProcessOptions
+ * @property {boolean?} [save_to_db] - Whether to save the generated code to database.
+ * @property {string?} [script_name] - The code script name.
+ * @property {string?} [script_type] - The code script type.
+ * @property {string?} [agent_id] - The agent id.
+ * @property {string?} [template_name] - The template name.
+ * @property {any?} [data] - The template data.
+ * @property {string?} [provider] - The llm provider.
+ * @property {string?} [model] - The llm model.
+ */
+
+/** 
+ * @typedef {Object} CodeGenerationResult
+ * @property {boolean?} [success]
+ * @property {string?} [content]
+ * @property {string?} [language]
+ * @property {string?} [error_message]
+ */
 
 /**
  * @typedef {Object} ChannelInstruction
@@ -204,6 +229,9 @@
  * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [output_args]
+ * @property {string?} [json_args]
+ * @property {string?} [statement]
  */
 
 
diff --git a/src/lib/helpers/types/instructTypes.js b/src/lib/helpers/types/instructTypes.js
index c60cd137..b6ed4b3f 100644
--- a/src/lib/helpers/types/instructTypes.js
+++ b/src/lib/helpers/types/instructTypes.js
@@ -6,6 +6,7 @@
  * @property {string?} [provider] - The LLM provider.
  * @property {string?} [model] - The LLM model.
  * @property {import('$conversationTypes').ConversationStateModel[]} [states]
+ * @property {CodeInstructOptions?} [codeOptions]
  */
 
 /**
@@ -59,4 +60,12 @@
  * @property {string?} [endTime]
  */
 
+/**
+ * @typedef {Object} CodeInstructOptions
+ * @property {string?} [processor] - The code processor.
+ * @property {string?} [script_name] - The code script name.
+ * @property {string?} [script_type] - The code script type: src or test.
+ * @property {{key: string, value: string}[]?} [arguments] - The arguments.
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index 5b263aa7..e6170626 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -143,6 +143,21 @@ export function goToUrl(url, opts = {}) {
     goto(url, { replaceState, noScroll });
 }
 
+/**
+ * @param {HTMLElement | null | undefined} container
+ * @param {ScrollBehavior} behavior
+ */
+export function scrollToBottom(container, behavior = 'smooth') {
+    if (container) {
+        setTimeout(() => {
+            container.scrollTo({
+                top: container.scrollHeight,
+                behavior: behavior
+            });
+        }, 0);
+    }
+}
+
 /**
  * @param {string} str
  */
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index c5396a2b..afa4c72d 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -58,7 +58,7 @@
             }
         }
     }
-    
+
     .list-add {
         font-size: 20px;
 
@@ -94,10 +94,10 @@
         @media (max-width: 423px) {
             height: fit-content;
         }
-    
+
         .agent-prompt-container {
             height: 100%;
-    
+
             .agent-prompt-header {
                 background-color: white;
                 padding: 15px;
@@ -147,6 +147,22 @@
     padding: 10px;
     border: 1px dashed var(--bs-primary);
     border-radius: 5px;
+
+    .llm-config-item {
+        display: flex;
+        flex-wrap: wrap;
+
+        .llm-config-label {
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            flex: 0.25;
+        }
+
+        .llm-config-input {
+            flex: 0.75;
+        }
+    }
 }
 
 .agent-utility-container {
@@ -167,7 +183,7 @@
             box-shadow: none !important;
         }
     }
-    
+
     .utility-wrapper {
         border: 1px dotted var(--bs-primary);
         border-radius: 5px;
@@ -262,12 +278,17 @@
     .tooltip-inner {
         text-align: start;
         max-width: fit-content;
-        padding: 20px;
+        padding: 5px 10px;
     }
 
     .markdown-div {
         max-height: 500px;
         font-size: 15px;
+
+        pre {
+            white-space: pre !important;
+            width: fit-content;
+        }
     }
 
     &.show {
@@ -286,4 +307,61 @@
         overflow-x: auto;
         scrollbar-width: thin;
     }
-}
\ No newline at end of file
+}
+
+// Responsive adjustments for utility
+@media (max-width: 1250px) {
+    .agent-config-container {
+        .llm-config-item {
+            flex-direction: column;
+
+            .llm-config-label {
+                width: 100%;
+            }
+
+            .llm-config-input {
+                width: 100%;
+            }
+        }
+    }
+
+    .agent-utility-container {
+        padding: 0 5px;
+
+        .utility-wrapper {
+            .utility-row-primary {
+                flex-direction: column;
+            }
+
+            .utility-row {
+                .utility-label, .utility-value {
+                    width: 100%;
+                }
+
+                .utility-value {
+                    flex-direction: column;
+                }
+
+                .utility-input, .utility-delete {
+                    width: 100%;
+                }
+
+                .utility-delete {
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: end;
+                    margin-top: 6px;
+                }
+            }
+
+            .utility-row-secondary {
+                .utility-content {
+                    .utility-list-item {
+                        flex-direction: column;
+                        gap: 6px;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/lib/scss/custom/pages/_instruction.scss b/src/lib/scss/custom/pages/_instruction.scss
index e6ad36b8..46d44ae9 100644
--- a/src/lib/scss/custom/pages/_instruction.scss
+++ b/src/lib/scss/custom/pages/_instruction.scss
@@ -57,7 +57,7 @@
         justify-content: center;
 
         .instruct-setting-dropdown {
-            width: 60%;
+            width: 75%;
         }
 
         @media (max-width: 992px) {
@@ -72,12 +72,16 @@
     padding: 20px 10px;
 }
 
-.instruct-state-container {
+.instruct-kv-container {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    max-height: 200px;
+    overflow-y: auto;
+    scrollbar-width: none;
+    padding-top: 20px;
 
-    .instruct-state-item {
+    .instruct-kv-item {
         display: flex;
         gap: 30px;
         justify-content: center;
diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
index 213f3247..1c683c41 100644
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ b/src/lib/scss/custom/pages/_knowledgebase.scss
@@ -22,7 +22,7 @@
 }
 
 .demo-tooltip-icon {
-    font-size: 18px;
+    font-size: 15px;
 }
 
 .demo-tooltip-note {
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index d4d87e7b..4b6d0995 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -156,4 +156,18 @@ export async function updateAgentCodeScripts(agentId, update) {
         ...update
     });
     return response.data;
+}
+
+/**
+ * Generate agent code script
+ * @param {string} agentId
+ * @param {import('$agentTypes').AgentCodeScriptGenerateModel} request
+ * @returns {Promise<import('$agentTypes').CodeGenerationResult>}
+ */
+export async function generateAgentCodeScript(agentId, request) {
+    const url = endpoints.agentCodeScriptGenerateUrl.replace("{agentId}", agentId);
+    const response = await axios.post(url, {
+        ...request
+    });
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 1ee3cc59..17b81a9b 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -41,6 +41,7 @@ export const endpoints = {
     // agent code script:
     agentCodeScriptListUrl: `${host}/agent/{agentId}/code-scripts`,
     agentCodeScriptUpdateUrl: `${host}/agent/{agentId}/code-scripts`,
+    agentCodeScriptGenerateUrl: `${host}/agent/{agentId}/code-script/generate`,
     
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index b6b11eed..857aefdf 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -1,14 +1,13 @@
 <script>
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-
     // This page is used to initialize a new conversation for client
+    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
     import { getToken, setToken } from '$lib/services/auth-service.js'
     import { getUserStore } from '$lib/helpers/store.js';
     import { conversationStore } from '$lib/helpers/store.js';
-	import { LEARNER_ID, TRAINING_MODE } from '$lib/helpers/constants';
+	import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
 
     const params = $page.params;
     
@@ -43,7 +42,7 @@
         const chatUrl = new URL(`chat/${agentId}/${conversationId}`, window.location.origin);
         
         const searchParams = new URLSearchParams();
-        if (agentId === LEARNER_ID) {
+        if (agentId === LEARNER_AGENT_ID) {
             searchParams.append('mode', TRAINING_MODE);
         }
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 1df045fb..af4db082 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -44,7 +44,7 @@
 		PUBLIC_LIVECHAT_STREAM_ENABLED,
 		PUBLIC_DEBUG_MODE
 	} from '$env/static/public';
-	import { BOT_SENDERS, LEARNER_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
+	import { BOT_SENDERS, LEARNER_AGENT_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { newConversation } from '$lib/services/conversation-service';
 	import DialogModal from '$lib/common/DialogModal.svelte';
@@ -1724,7 +1724,7 @@
 														Add Tags
 													</DropdownItem>
 												{/if}
-												{#if agent?.id === LEARNER_ID && mode === TRAINING_MODE}
+												{#if agent?.id === LEARNER_AGENT_ID && mode === TRAINING_MODE}
 													<DropdownItem on:click={() => handleSaveKnowledge()}>Save Knowledge</DropdownItem>
 												{/if}											
 												<DropdownItem on:click={() => pinDashboard()}>
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index ebb5fd10..7b1e4d3f 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -1,26 +1,23 @@
 <script>
-	import {
-		Col,
-		Row,
-        Button
-	} from '@sveltestrap/sveltestrap';
+    import { onDestroy, onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { goto } from '$app/navigation';
+    import { _ } from 'svelte-i18n'; 
+    import Swal from 'sweetalert2';
+	import { Col, Row, Button } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import AgentInstruction from './agent-components/agent-instruction.svelte';
-	import AgentOverview from './agent-components/agent-overview.svelte';
-    import AgentFunction from './agent-components/agent-function.svelte';
-    import AgentTabs from './agent-tabs.svelte';
-    import { page } from '$app/stores';
     import { deleteAgent, getAgent, saveAgent } from '$lib/services/agent-service.js';
-    import { onDestroy, onMount } from 'svelte';
-    import { _ } from 'svelte-i18n'  
-    import Swal from 'sweetalert2'
-	import { goto } from '$app/navigation';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
-	import AgentTemplate from './agent-components/agent-template.svelte';
 	import { globalEventStore } from '$lib/helpers/store';
 	import { GlobalEvent } from '$lib/helpers/enums';
+	import { myInfo } from '$lib/services/auth-service';
+    import AgentInstruction from './agent-components/agent-instruction.svelte';
+	import AgentOverview from './agent-components/agent-overview.svelte';
+    import AgentFunction from './agent-components/agent-function.svelte';
+    import AgentTabs from './agent-tabs.svelte';
+    import AgentTemplate from './agent-components/agent-template.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
     let agent;
@@ -34,6 +31,8 @@
     let agentTabsCmp = null;
     /** @type {any} */
 	let unsubscriber;
+    /** @type {import('$userTypes').UserModel} */
+	let user;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -42,13 +41,11 @@
     const duration = 3000;
     const params = $page.params;
 
-    onMount(() => {
+    onMount(async () => {
         isLoading = true;
-        getAgent(params.agentId).then(data => {
-            agent = data;
-        }).finally(() => {
-            isLoading = false;
-        });
+        user = await myInfo();
+        agent = await getAgent(params.agentId);
+        isLoading = false;
 
         unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
 			if (event.name !== GlobalEvent.Search) return;
@@ -203,6 +200,7 @@
                 <AgentTabs
                     bind:this={agentTabsCmp}
                     agent={agent}
+                    user={user}
                 />
             </div>
         </Col>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
index 129c8403..7ca2cc7d 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
@@ -4,6 +4,7 @@
 	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';
 
     const limit = 100;
     const confidLowerBound = 0;
@@ -145,7 +146,7 @@
                 disabled: false
             }
         ];
-        scrollToBottom();
+        scrollToBottom(scrollContainer);
         handleAgentChange();
     }
 
@@ -181,17 +182,6 @@
             }
         }) || [];
     }
-
-    function scrollToBottom() {
-        if (scrollContainer) {
-            setTimeout(() => {
-                scrollContainer.scrollTo({
-                    top: scrollContainer.scrollHeight,
-                    behavior: 'smooth'
-                });
-            }, 0);
-        }
-    }
 </script>
 
 <Card>
@@ -215,14 +205,14 @@
                                         on:change={e => toggleKnowledgeBase(e, uid)}
                                     />
                                 </div>
-                                <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" />
-                                </div>
+                                    <i class="bx bx-info-circle fs-6" />
+                                </div> -->
                             </div>
                         </div>
                         <div class="utility-value">
@@ -241,7 +231,7 @@
                             </div>
                             <div class="utility-delete line-align-center">
                                 <i
-                                    class="bx bxs-no-entry text-danger clickable"
+                                    class="bx bxs-no-entry text-danger clickable fs-6"
                                     role="link"
                                     tabindex="0"
                                     on:keydown={() => {}}
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
index 3bb4fe71..d85f5624 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-mcp-tool.svelte
@@ -2,6 +2,7 @@
     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;
 
@@ -134,7 +135,7 @@
                 functions: []
             }
         ];
-        scrollToBottom();
+        scrollToBottom(scrollContainer);
         handleAgentChange();
     }
 
@@ -211,17 +212,6 @@
         innerRefresh(innerMcps);
         handleAgentChange();
     }
-
-    function scrollToBottom() {
-        if (scrollContainer) {
-            setTimeout(() => {
-                scrollContainer.scrollTo({
-                    top: scrollContainer.scrollHeight,
-                    behavior: 'smooth'
-                });
-            }, 0);
-        }
-    }
 </script>
 
 <Card>
@@ -245,14 +235,14 @@
                                         on:change={e => toggleMcp(e, uid)}
                                     />
                                 </div>
-                                <div
-                                    class="line-align-center"
+                                <!-- <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>
                         <div class="utility-value">
@@ -271,7 +261,7 @@
                             </div>
                             <div class="utility-delete line-align-center">
                                 <i
-                                    class="bx bxs-no-entry text-danger clickable"
+                                    class="bx bxs-no-entry text-danger clickable fs-6"
                                     role="link"
                                     tabindex="0"
                                     on:keydown={() => {}}
@@ -321,7 +311,7 @@
                                         </div>
                                         <div class="utility-delete line-align-center">
                                             <i
-                                                class="bx bxs-no-entry text-danger clickable"
+                                                class="bx bxs-no-entry text-danger clickable fs-6"
                                                 role="link"
                                                 tabindex="0"
                                                 on:keydown={() => {}}
@@ -339,7 +329,7 @@
                                     </div>
                                     <div class="utility-value">
                                         <i
-                                            class="bx bx-list-plus add-list clickable"
+                                            class="bx bx-list-plus add-list clickable fs-6"
                                             role="link"
                                             tabindex="0"
                                             on:keydown={() => {}}
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index 3f6d3b92..da5689d0 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -1,14 +1,39 @@
 <script>
     import { onMount } from 'svelte';
+    import Swal from 'sweetalert2';
     import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
-	import { getAgentRuleOptions } from '$lib/services/agent-service';
+	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/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 = 200;
+    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 = () => {};
 
@@ -45,26 +70,30 @@
     let scrollContainer;
 
     onMount(async () =>{
+        resizeWindow();
         getAgentRuleOptions().then(data => {
             const list = data?.map(x => {
                 return {
                     name: x.trigger_name,
-                    displayName: ""
+                    displayName: "",
+                    output_args: x.output_args,
+                    json_args: x.json_args,
+                    statement: x.statement
                 };
             }) || [];
             ruleOptions = [{
                 name: "",
                 displayName: ""
             }, ...list];
+            init();
         });
-        init();
     });
 
     function init() {
         const list = agent.rules?.map(x => {
             return {
                 ...x,
-                displayName: "",
+                displayName: ""
             };
         }) || [];
         innerRefresh(list);
@@ -94,7 +123,7 @@
                 disabled: false
             }
         ];
-        scrollToBottom();
+        scrollToBottom(scrollContainer);
         handleAgentChange();
     }
 
@@ -134,31 +163,111 @@
         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 {
-                trigger_name: x.trigger_name,
-                criteria: x.criteria,
-                displayName: x.displayName,
-                disabled: x.disabled
+                ...x,
+                output_args: found?.output_args,
+                json_args: found?.json_args,
+                statement: found?.statement
             }
         }) || [];
     }
 
-    function scrollToBottom() {
-        if (scrollContainer) {
-            setTimeout(() => {
-                scrollContainer.scrollTo({
-                    top: scrollContainer.scrollHeight,
-                    behavior: 'smooth'
-                });
-            }, 0);
+    /** @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">
@@ -180,14 +289,33 @@
                                         on:change={e => toggleRule(e, uid)}
                                     />
                                 </div>
-                                <div
-                                    class="line-align-center"
-                                    data-bs-toggle="tooltip"
-                                    data-bs-placement="top"
-                                    title="Uncheck to disable rule"
-                                >
-                                    <i class="bx bx-info-circle" />
+                                {#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">
@@ -206,7 +334,7 @@
                             </div>
                             <div class="utility-delete line-align-center">
                                 <i
-                                    class="bx bxs-no-entry text-danger clickable"
+                                    class="bx bxs-no-entry text-danger clickable fs-6"
                                     role="link"
                                     tabindex="0"
                                     on:keydown={() => {}}
@@ -220,19 +348,69 @@
                         <div class="utility-content">
                             <div class="utility-list-item">
                                 <div class="utility-label line-align-center">
-                                    {'Criteria'}
+                                    <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="text"
+                                            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"></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>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
index 06230fea..40510dcb 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -2,9 +2,9 @@
     import { onMount } from 'svelte';
     import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
     import { getAgentUtilityOptions } from '$lib/services/agent-service';
-	import { truncateByPrefix } from '$lib/helpers/utils/common';
+	import { scrollToBottom, truncateByPrefix } from '$lib/helpers/utils/common';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import BotSharpTooltip from '$lib/common/tooltip/BotSharpTooltip.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 
     const limit = 100;
     const prefix = "util-";
@@ -130,7 +130,7 @@
                 items: []
             }
         ];
-        scrollToBottom();
+        scrollToBottom(scrollContainer);
         handleAgentChange();
     }
 
@@ -272,17 +272,6 @@
         innerRefresh(innerUtilities);
         handleAgentChange();
 	}
-
-    function scrollToBottom() {
-        if (scrollContainer) {
-            setTimeout(() => {
-                scrollContainer.scrollTo({
-                    top: scrollContainer.scrollHeight,
-                    behavior: 'smooth'
-                });
-            }, 0);
-        }
-    }
 </script>
 
 <svelte:window on:resize={() => resizeWindow()}/>
@@ -311,7 +300,7 @@
                         data-bs-placement="top"
                         title="Merge with entry agent utilities"
                     >
-                        <i class="bx bx-info-circle" />
+                        <i class="bx bx-info-circle fs-6" />
                     </div>
                 </div>
             {/if}
@@ -332,14 +321,14 @@
                                         on:change={e => toggleUtility(e, uid)}
                                     />
                                 </div>
-                                <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" style="font-size: 15px;" />
-                                </div>
+                                    <i class="bx bx-info-circle fs-6" />
+                                </div> -->
                             </div>
                         </div>
                         <div class="utility-value">
@@ -359,7 +348,7 @@
                             </div>
                             <div class="utility-delete line-align-center">
                                 <i
-                                    class="bx bxs-no-entry text-danger clickable"
+                                    class="bx bxs-no-entry text-danger clickable fs-6"
                                     role="link"
                                     tabindex="0"
                                     on:keydown={() => {}}
@@ -383,8 +372,8 @@
                                             <!-- svelte-ignore a11y-click-events-have-key-events -->
                                             <!-- svelte-ignore a11y-no-static-element-interactions -->
                                             <i
-                                                class="mdi mdi-refresh clickable"
-                                                style="font-size: 15px;"
+                                                class="mdi mdi-refresh clickable fs-6"
+                                                style="padding-top: 3px;"
                                                 data-bs-toggle="tooltip"
                                                 data-bs-placement="top"
                                                 title="Reset"
@@ -442,11 +431,10 @@
                                             {#if description}
                                             <div class="line-align-center">
                                                 <i
-                                                    class="bx bx-info-circle"
-                                                    style="font-size: 15px;"
+                                                    class="bx bx-info-circle fs-6"
                                                     id={`utility-${uid}-${fid}`}
                                                 />
-                                                <BotSharpTooltip
+                                                <BotsharpTooltip
                                                     containerClasses="agent-utility-desc"
                                                     style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
                                                     target={`utility-${uid}-${fid}`}
@@ -460,7 +448,7 @@
                                                         containerStyles={`max-width: ${Math.floor(windowWidth*0.55)}px;`}
                                                         text={description}
                                                     />
-                                                </BotSharpTooltip>
+                                                </BotsharpTooltip>
                                             </div>
                                             {/if}
                                         </div>
@@ -474,7 +462,7 @@
                                             </div>
                                             <div class="utility-delete line-align-center">
                                                 <i
-                                                    class="bx bxs-no-entry text-danger clickable"
+                                                    class="bx bxs-no-entry text-danger clickable fs-6"
                                                     role="link"
                                                     tabindex="0"
                                                     on:keydown={() => {}}
@@ -499,7 +487,7 @@
                                             </div>
                                             <div class="utility-delete line-align-center">
                                                 <i
-                                                    class="bx bxs-no-entry text-danger clickable"
+                                                    class="bx bxs-no-entry text-danger clickable fs-6"
                                                     role="link"
                                                     tabindex="0"
                                                     on:keydown={() => {}}
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 866d44b8..4940300c 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
@@ -129,20 +129,20 @@
 
 <div class="agent-config-container">
     <div class="text-center">
-        <h6 class="mt-1 mb-2">Chat</h6>
+        <h6 class="mt-1 mb-3">Chat</h6>
         {#if agent.llm_config?.is_inherit}
-            <div class="mb-2">
+            <div class="mb-3">
                 <i class="bx bx-copy"></i> <span class="text-muted">Inherited</span>    
             </div>
         {/if}
     </div>
 
-    <div class="mb-3 row">
-        <label for="example-large" class="col-md-3 col-form-label">
+    <div class="mb-3 row llm-config-item">
+        <label for="chat-provider" class="col-form-label llm-config-label">
             Provider
         </label>
-        <div class="col-md-9 config-item-container">
-            <Input type="select" value={config.provider} on:change={e => changeProvider(e)}>
+        <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}
@@ -152,12 +152,12 @@
         </div>
     </div>
         
-    <div class="mb-3 row">
-        <label for="example-text-input" class="col-md-3 col-form-label">
+    <div class="mb-3 row llm-config-item">
+        <label for="chat-model" class="col-form-label llm-config-label">
             Model
         </label>
-        <div class="col-md-9">
-            <Input type="select" value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
+        <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}
@@ -167,12 +167,13 @@
         </div>
     </div>
 
-    <div class="mb-3 row">
-        <label for="example-text-input" class="col-md-3 col-form-label">
+    <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="col-md-9">
+        <div class="llm-config-input">
             <Input
+                id="chat-max-recursive-depth"
                 style="text-align: center;"
                 type="number"
                 min={recursiveDepthLowerLimit}
@@ -183,12 +184,13 @@
         </div>
     </div>
 
-    <div class="mb-3 row">
-        <label for="example-text-input" class="col-md-3 col-form-label">
+    <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="col-md-9">
+        <div class="llm-config-input">
             <Input
+                id="chat-max-output-tokens"
                 style="text-align: center;"
                 type="number"
                 value={config.max_output_tokens}
@@ -199,12 +201,12 @@
     </div>
 
     {#if isReasoningModel}
-    <div class="mb-3 row">
-        <label for="example-text-input" class="col-md-3 col-form-label">
+    <div class="mb-3 row llm-config-item">
+        <label for="chat-reasoning-effort" class="col-form-label llm-config-label">
             Reasoning effort
         </label>
-        <div class="col-md-9">
-            <Input type="select" value={config.reasoning_effort_level} on:change={e => changeReasoningEffortLevel(e)}>
+        <div class="llm-config-input">
+            <Input type="select" id="chat-reasoning-effort" value={config.reasoning_effort_level} on:change={e => changeReasoningEffortLevel(e)}>
                 {#each reasonLevelOptions as option}
                     <option value={option.value} selected={option.value == config.reasoning_effort_level}>
                         {option.label}
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 114101e8..1597804a 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
@@ -88,15 +88,15 @@
 
 <div class="agent-config-container">
     <div class="text-center">
-        <h6 class="mt-1 mb-2">{title}</h6>
+        <h6 class="mt-1 mb-3">{title}</h6>
     </div>
 
-    <div class="mb-3 row">
-        <label for="example-large" class="col-md-3 col-form-label">
+    <div class="mb-3 row llm-config-item">
+        <label for={`provider-${title}`} class="col-form-label llm-config-label">
             Provider
         </label>
-        <div class="col-md-9 config-item-container">
-            <Input type="select" value={config.provider} on:change={e => changeProvider(e)}>
+        <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}
@@ -106,12 +106,12 @@
         </div>
     </div>
         
-    <div class="mb-3 row">
-        <label for="example-text-input" class="col-md-3 col-form-label">
+    <div class="mb-3 row llm-config-item">
+        <label for={`model-${title}`} class="col-form-label llm-config-label">
             Model
         </label>
-        <div class="col-md-9">
-            <Input type="select" value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
+        <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}
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index ac799eb9..a585c546 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -13,6 +13,9 @@
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
+    /** @type {import('$userTypes').UserModel} */
+	export let user;
+
     /** @type {() => void} */
     export let handleAgentChange = () => {};
 
@@ -47,7 +50,7 @@
     let selectedTab;
 
     /** @type {any[]}*/
-    let tabs = [
+    const tabs = [
         { name: 'agent-llm-config', displayText: 'LLm Configs' },
         { name: 'agent-routing-rule', displayText: 'Routing' },
         { name: 'agent-utility', displayText: 'Utilities' },
@@ -99,7 +102,7 @@
             <AgentKnowledgeBase agent={agent} bind:this={agentKnowledgeBaseCmp} {handleAgentChange} />
         </div>
         <div class:hide={selectedTab !== 'agent-event-rule'}>
-            <AgentEventRule agent={agent} bind:this={agentEventRuleCmp} {handleAgentChange} />
+            <AgentEventRule agent={agent} user={user} bind:this={agentEventRuleCmp} {handleAgentChange} />
         </div>
         <div class:hide={selectedTab !== 'agent-mcp-tool'}>
             <AgentMcpTool agent={agent} bind:this={agentMcpToolCmp} {handleAgentChange} />
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index a4b3bd17..9a0bcd77 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -3,7 +3,7 @@
   import { Badge, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
   import { utcToLocal } from '$lib/helpers/datetime';
   import { _ } from 'svelte-i18n';
-	import { LEARNER_ID } from "$lib/helpers/constants";
+	import { LEARNER_AGENT_ID } from "$lib/helpers/constants";
 	import { AgentExtensions } from "$lib/helpers/utils/agent";
 
   /** @type {import('$agentTypes').AgentModel[]} */
@@ -108,7 +108,7 @@
           </li>
           {#if agent.is_public }      
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Link href={`/chat/${LEARNER_ID}`} class="btn btn-primary btn-sm" target="_blank" disabled>
+            <Link href={`/chat/${LEARNER_AGENT_ID}`} class="btn btn-primary btn-sm" target="_blank" disabled>
               <i class="bx bx-book-open" /> {$_('Train')}
             </Link>
           </li>
diff --git a/src/routes/page/agent/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 899df295..61009801 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -9,9 +9,9 @@
     import Select from '$lib/common/Select.svelte';
     import { myInfo } from '$lib/services/auth-service';
 	import { getAgentCodeScripts, getAgentOptions, updateAgentCodeScripts } from '$lib/services/agent-service';
+    import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { AgentCodeScriptType } from '$lib/helpers/enums';
 	import ScriptEditor from './script-editor.svelte';
-	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	
     /** @type {boolean} */
     let isLoading = false;
diff --git a/src/routes/page/instruction/instruction-components/instruction-coding.svelte b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
new file mode 100644
index 00000000..ecf1546f
--- /dev/null
+++ b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
@@ -0,0 +1,127 @@
+<script>
+    import { Button, Input } from '@sveltestrap/sveltestrap';
+	import Select from '$lib/common/Select.svelte';
+	import { scrollToBottom } from '$lib/helpers/utils/common';
+
+    const maxLength = 4096;
+    const limit = 10;
+
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel | null | undefined} */
+    export let selectedCodeScript = null;
+
+    /** @type {import('$commonTypes').KeyValuePair[]} */
+    export let args = [];
+
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel[]} */
+    export let codeScripts = [];
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    let codeScriptOptions = [];
+
+    $: {
+        codeScriptOptions = codeScripts?.map(x => ({
+            label: x.name,
+            value: x.name
+        })) || [];
+
+        const found = codeScripts.find(x => x.name === selectedCodeScript?.name);
+        selectedCodeScript = found || null;
+    }
+
+    /** @param {any} e */
+    function selectCodeScript(e) {
+        // @ts-ignore
+		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+        selectedCodeScript = selectedValues.length > 0 ? codeScripts?.find(x => x.name === selectedValues[0]) : null;
+    }
+
+    function addArg() {
+        args = [...args, { key: '', value: '' }];
+        scrollToBottom(scrollContainer);
+    }
+
+    /** @param {number} idx */
+    function removeArg(idx) {
+        if (disabled) return;
+
+        args = args.filter((_, index) => index !== idx);
+    }
+</script>
+
+<div class="instruct-setting-section instruct-setting-padding">
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Code Script</div>
+            <Select
+                tag={'code-script-select'}
+                placeholder={'Select Script'}
+                searchMode
+                disabled={disabled}
+                selectedValues={selectedCodeScript?.name ? [selectedCodeScript.name] : []}
+                options={codeScriptOptions}
+                on:select={e => selectCodeScript(e)}
+            />
+        </div>
+    </div>
+
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Arguments</div>
+            <div class="instruct-kv-container" style="max-height: 170px;" bind:this={scrollContainer}>
+                {#each args as arg, idx}
+                    <div class="instruct-kv-item" style="gap: 10px;">
+                        <div style="flex: 0.5;">
+                            <Input
+                                type="text"
+                                name={`arg-key-${idx}`}
+                                bind:value={arg.key}
+                                maxlength={maxLength}
+                                disabled={disabled}
+                                placeholder="Enter a name"
+                            />
+                        </div>
+                        <div style="flex: 0.5;">
+                            <Input
+                                type="text"
+                                name={`arg-value-${idx}`}
+                                bind:value={arg.value}
+                                maxlength={maxLength}
+                                disabled={disabled}
+                                placeholder="Enter a value"
+                            />
+                        </div>
+                        <div class="line-align-center" style={`flex: 0 0 13px; margin-top: 3px;`}>
+                            <div>
+                                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable"
+                                    on:click={() => removeArg(idx)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+            {#if args.length < limit}
+                <div class="text-center">
+                    <Button 
+                        color="link"
+                        style="padding-left: 0px;"
+                        disabled={disabled}
+                        on:click={() => addArg()}
+                    >
+                        Add +
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-state.svelte b/src/routes/page/instruction/instruction-components/instruction-state.svelte
index 31ebfc41..1d74f1b6 100644
--- a/src/routes/page/instruction/instruction-components/instruction-state.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-state.svelte
@@ -1,15 +1,18 @@
 <script>
-	import { Button, Input } from '@sveltestrap/sveltestrap';
+    import { Button, Input } from '@sveltestrap/sveltestrap';
+	import { scrollToBottom } from '$lib/helpers/utils/common';
 
-    const maxLength = 3000;
-    const limit = 8;
+    const maxLength = 4096;
+    const limit = 10;
 
-    /** @type {{key: string, value: string | null}[]} */
+    /** @type {import('$commonTypes').KeyValuePair[]} */
     export let states = [];
 
     /** @type {boolean} */
     export let disabled = false;
 
+    /** @type {HTMLElement} */
+    let scrollContainer;
 
     /** @param {number} idx */
     function removeState(idx) {
@@ -23,15 +26,16 @@
             ...states,
             { key: '', value: ''}
         ];
+        scrollToBottom(scrollContainer);
     }
 </script>
 
 
 <div class="instruct-setting-section instruct-setting-padding">
-    <div class="instruct-state-container">
+    <div class="instruct-kv-container" bind:this={scrollContainer}>
         {#each states as state, idx}
-            <div class="instruct-state-item">
-                <div>
+            <div class="instruct-kv-item">
+                <div style="flex: 0.4;">
                     {#if idx === 0}
                     <div class="text-primary mb-1">
                         {'Key'}
@@ -39,13 +43,14 @@
                     {/if}
                     <Input
                         type="text"
+                        name={`state-key-${idx}`}
                         bind:value={state.key}
                         maxlength={maxLength}
                         disabled={disabled}
-                        placeholder="Enter a state"
+                        placeholder="Enter a name"
                     />
                 </div>
-                <div>
+                <div style="flex: 0.4;">
                     {#if idx === 0}
                     <div class="text-primary mb-1">
                         {'Value'}
@@ -53,25 +58,27 @@
                     {/if}
                     <Input
                         type="text"
+                        name={`state-value-${idx}`}
                         bind:value={state.value}
                         maxlength={maxLength}
                         disabled={disabled}
                         placeholder="Enter a value"
                     />
                 </div>
-                <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '0px'}`}>
+                <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '3px'}`}>
                     <div>
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-no-static-element-interactions -->
                         <i
-                            class="bx bx-no-entry text-danger clickable"
+                            class="bx bxs-no-entry text-danger clickable"
                             on:click={() => removeState(idx)}
                         />
                     </div>
                 </div>
             </div>
         {/each}
-        {#if states.length < limit}
+    </div>
+    {#if states.length < limit}
         <div class="text-center">
             <Button 
                 color="link"
@@ -82,6 +89,5 @@
                 Add +
             </Button>
         </div>
-        {/if}
-    </div>
+    {/if}
 </div>`
\ No newline at end of file
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index 3a02b213..e2d633d8 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -8,26 +8,26 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import InstructionState from '../instruction-components/instruction-state.svelte';
-	import { getAgents } from '$lib/services/agent-service';
+	import { getAgentCodeScripts, getAgents } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import { executeAgentInstruction } from '$lib/services/instruct-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
-	import { LlmModelType } from '$lib/helpers/enums';
+	import { AgentCodeScriptType, LlmModelType } from '$lib/helpers/enums';
 	import NavBar from '$lib/common/nav-bar/NavBar.svelte';
 	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
 	import InstructionAgent from '../instruction-components/instruction-agent.svelte';
 	import InstructionLlm from '../instruction-components/instruction-llm.svelte';
+    import InstructionState from '../instruction-components/instruction-state.svelte';
+    import InstructionCoding from '../instruction-components/instruction-coding.svelte';
 
     const maxLength = 64000;
-    const DEFAULT_PROVIDER = 'openai';
-    const DEFAULT_MODEL = 'gpt-4o-mini';
 
     /** @type {any[]}*/
     const tabs = [
         { name: 'instruction-agent', displayText: 'Agent' },
-        { name: 'instruction-llm', displayText: 'LLM Config' },
-        { name: 'instruction-states', displayText: 'States' }
+        { name: 'instruction-llm', displayText: 'LLM' },
+        { name: 'instruction-states', displayText: 'States' },
+        { name: 'instruction-coding', displayText: 'Coding' }
     ];
 
     let isLoading = false;
@@ -52,6 +52,9 @@
 
     /** @type {string | null} */
     let selectedTemplate = null;
+
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel | null | undefined} */
+    let selectedCodeScript = null;
     
     /** @type {import('$agentTypes').AgentModel[]} */
     let agents = [];
@@ -59,10 +62,14 @@
     /** @type {import('$commonTypes').LlmConfig[]} */
     let llmConfigs = [];
 
-    /** @type {any[]} */
-    let states = [
-        { key: '', value: ''}
-    ];
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel[]} */
+    let codeScripts = [];
+
+    /** @type {import('$commonTypes').KeyValuePair[]} */
+    let states = [{ key: '', value: ''}];
+
+    /** @type {import('$commonTypes').KeyValuePair[]} */
+    let args = [{ key: '', value: ''}];
 
     /** @type {string}*/
     let selectedTab = tabs[0].name;
@@ -94,7 +101,8 @@
         isThinking = true;
         requestDone = false;
         elapsedTime = '';
-        const formattedStates = formatStates(states);
+        const formattedStates = formatKeyValues(states);
+        const formatedArgs = formatKeyValues(args);
         const start = new Date();
         const agentId = selectedAgent?.id || '';
         executeAgentInstruction(agentId, {
@@ -103,7 +111,11 @@
             provider: selectedProvider?.provider,
             model: selectedModel,
             template: selectedTemplate,
-            states: formattedStates
+            states: formattedStates,
+            codeOptions: {
+                script_name: selectedCodeScript?.name,
+                arguments: formatedArgs
+            }
         }).then(res => {
             result = res?.text || '';
         }).finally(() => {
@@ -114,9 +126,9 @@
         });
     }
 
-    /** @param {any[]} states */
-    function formatStates(states) {
-        return states?.filter(x => !!util.trim(x.key) && !!util.trim(x.value)).map(x => {
+    /** @param {import('$commonTypes').KeyValuePair[]} kvs */
+    function formatKeyValues(kvs) {
+        return kvs?.filter(x => !!util.trim(x.key) && !!util.trim(x.value)).map(x => {
             return {
                 key: util.trim(x.key),
                 value: util.trim(x.value)
@@ -163,6 +175,12 @@
         const modelName = selectedAgent?.llm_config?.model || null;
         selectedProvider = llmConfigs?.find(x => x.provider === providerName) || null;
         selectedModel = modelName;
+
+        if (!!selectedAgent?.id) {
+            initAgentCodeScripts(selectedAgent.id);
+        } else {
+            codeScripts = [];
+        }
     }
     
     /** @param {any} e */
@@ -171,6 +189,18 @@
         selectedModel = e.detail.model || '';
     }
 
+    /** @param {string} agentId */
+    function initAgentCodeScripts(agentId) {
+        return new Promise((resolve, reject) => {
+            getAgentCodeScripts(agentId, { scriptTypes: [AgentCodeScriptType.Src] }).then(res => {
+                codeScripts = res || [];
+                resolve(res);
+            }).catch((error) => {
+                reject(error);
+            });
+        });
+    }
+
     /** @param {string} selected */
     function handleTabClick(selected) {
         selectedTab = selected;
@@ -302,7 +332,7 @@
                         >
                             {#each tabs as tab, idx}
                             <NavItem
-                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 2 ? tabs.length : 3})`}
+                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
                                 navBtnStyles={'text-transform: none;'}
                                 navBtnId={`${tab.name}-tab`}
                                 dataBsTarget={`#${tab.name}-tab-pane`}
@@ -336,6 +366,14 @@
                                 disabled={isThinking}
                             />
                         </div>
+                        <div class:hide={selectedTab !== 'instruction-coding'}>
+                            <InstructionCoding
+                                bind:selectedCodeScript={selectedCodeScript}
+                                bind:args={args}
+                                codeScripts={codeScripts}
+                                disabled={isThinking}
+                            />
+                        </div>
                     </CardBody>
                 </Card>
                 
diff --git a/src/routes/page/knowledge-base/common/search/advanced-search.svelte b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
index 2b4526a0..ff70cd71 100644
--- a/src/routes/page/knowledge-base/common/search/advanced-search.svelte
+++ b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
@@ -250,7 +250,7 @@
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <!-- svelte-ignore a11y-no-static-element-interactions -->
                             <i
-                                class="bx bx-no-entry text-danger clickable"
+                                class="bx bxs-no-entry text-danger clickable"
                                 class:hide={items.length === 1}
                                 on:click={() => removeItem(idx)}
                             />
diff --git a/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte b/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
index 7129f58f..db55e9ce 100644
--- a/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
+++ b/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
@@ -324,7 +324,7 @@
                                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                                     <!-- svelte-ignore a11y-no-static-element-interactions -->
                                     <i
-                                        class="bx bx-no-entry text-danger clickable"
+                                        class="bx bxs-no-entry text-danger clickable"
                                         on:click={() => removePayloadItem(idx)}
                                     />
                                 </div>