diff --git a/src/lib/common/ProfileDropdown.svelte b/src/lib/common/ProfileDropdown.svelte
index 00fa0681..95ac0fdb 100644
--- a/src/lib/common/ProfileDropdown.svelte
+++ b/src/lib/common/ProfileDropdown.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
-	import { resetLocalStorage } from '$lib/helpers/store';
+	import { resetStorage } from '$lib/helpers/store';
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
 	import { userStore } from '$lib/helpers/store';
@@ -15,7 +15,7 @@
 
 	function logout() {
 		if (browser){	
-			resetLocalStorage(true);
+			resetStorage(true);
 		}
 
 		const chatFrame = document.getElementById(CHAT_FRAME_ID);
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..af24706a 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -1,5 +1,95 @@
 import axios from 'axios';
 import { getUserStore, globalErrorStore, loaderStore } from '$lib/helpers/store.js';
+import { renewToken } from '$lib/services/auth-service';
+import { delay } from './utils/common';
+
+
+const retryQueue = {
+    /** @type {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}[]} */
+    queue: [],
+
+    /** @type {boolean} */
+    isRefreshingToken: false,
+
+    /** @type {number} */
+    timeout: 20,
+
+    /**
+     * refresh access token
+     * @param {string} token
+     * @returns {Promise<string>}
+     */
+    refreshAccessToken(token) {
+        return new Promise((resolve, reject) => {
+            renewToken(token, (newToken) => resolve(newToken), () => reject(new Error('Failed to refresh token')));
+        });
+    },
+
+    /** @param {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}} item */
+    enqueue(item) {
+        this.queue.push(item);
+
+        if (!this.isRefreshingToken) {
+            const user = getUserStore();
+            if (!isTokenExired(user.expires)) {
+                this.dequeue(user.token);
+            } else {
+                this.isRefreshingToken = true;
+                this.refreshAccessToken(user?.token || '')
+                    .then((newToken) => {
+                        this.isRefreshingToken = false;
+                        const promise = this.dequeue(newToken);
+                        return promise;
+                    })
+                    .catch((err) => {
+                        this.isRefreshingToken = false;
+                        // Reject all queued requests
+                        while (this.queue.length > 0) {
+                            const item = this.queue.shift();
+                            if (item) {
+                                item.reject(err);
+                            }
+                        }
+                        redirectToLogin();
+                    });
+            }
+        }
+    },
+
+    /**
+     * @param {string} newToken
+     * @returns {Promise<void>}
+     */
+    dequeue(newToken) {
+        let chain = Promise.resolve();
+        while (this.queue.length > 0) {
+            const item = this.queue.shift();
+            if (!item?.config) {
+                continue;
+            }
+
+            const { config } = item;
+            // @ts-ignore
+            config.headers = config.headers || {};
+            // @ts-ignore
+            config.headers.Authorization = `Bearer ${newToken}`;
+
+            chain = chain.then(() => delay(this.timeout))
+                         .then(() => {
+                            return new Promise((resolve) => {
+                                axios(config).then((response) => {
+                                    resolve();
+                                    item.resolve(response);
+                                }).catch((err) => {
+                                    resolve();
+                                    item.reject(err);
+                                });
+                            });
+                         });
+        }
+        return chain;
+    }
+};
 
 // Add a request interceptor to attach authentication tokens or headers
 axios.interceptors.request.use(
@@ -9,9 +99,10 @@ axios.interceptors.request.use(
         if (!skipLoader(config)) {
             loaderStore.set(true);
         }
-        // For example, attach an authentication token to the request headers
-        if (user.token)
+        // Attach an authentication token to the request headers
+        if (user.token) {
             config.headers.Authorization = `Bearer ${user.token}`;
+        }
         return config;
     },
     (error) => {
@@ -23,25 +114,24 @@ axios.interceptors.request.use(
 // Add a response interceptor to handle 401 errors globally
 axios.interceptors.response.use(
     (response) => {
-        // If the request was successful, return the response
         loaderStore.set(false);
-        const user = getUserStore();
-        const isExpired = Date.now() / 1000 > user.expires;
-        if (isExpired || response?.status === 401) {
-            redirectToLogin();
-            return Promise.reject('user token expired!');
-        }
         return response;
     },
     (error) => {
         loaderStore.set(false);
+        const originalRequest = error?.config || {};
         const user = getUserStore();
-        
-        const isExpired = Date.now() / 1000 > user.expires;
-        if (isExpired || error?.response?.status === 401) {
-            redirectToLogin();
-            return Promise.reject(error);
-        } else if (!skipGlobalError(error.config)) {
+
+        // If token expired or 401 returned, attempt a single token refresh and retry requests in queue.
+        if ((error?.response?.status === 401 || isTokenExired(user.expires))
+            && originalRequest
+            && !originalRequest._retried
+            && !originalRequest.url.includes('renew-token')) {
+            originalRequest._retried = true;
+            return new Promise((resolve, reject) => {
+                retryQueue.enqueue({ config: originalRequest, resolve, reject });
+            });
+        } else if (!skipGlobalError(originalRequest)) {
             globalErrorStore.set(true);
             setTimeout(() => {
                 globalErrorStore.set(false);
@@ -53,6 +143,12 @@ axios.interceptors.response.use(
     }
 );
 
+/**
+ * @param {number} expires
+ */
+function isTokenExired(expires) {
+    return Date.now() / 1000 > expires;
+}
 
 function redirectToLogin() {
     const curUrl = window.location.pathname + window.location.search;
@@ -75,7 +171,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 +208,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 || ''))) {
@@ -153,7 +251,7 @@ function skipGlobalError(config) {
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/update-message', 'g'),
         new RegExp('http(s*)://(.*?)/conversation/(.*?)/update-tags', 'g')
     ];
-    
+
     /** @type {RegExp[]} */
     const deleteRegexes = [
         new RegExp('http(s*)://(.*?)/knowledge/vector/(.*?)/delete-collection', 'g'),
@@ -199,7 +297,7 @@ export function replaceUrl(url, args) {
 
 /**
  * Replace new line as <br>
- * @param {string} text 
+ * @param {string} text
  * @returns string
  */
 export function replaceNewLine(text) {
@@ -208,7 +306,7 @@ export function replaceNewLine(text) {
 
 /**
  * Replace unnecessary markdown
- * @param {string} text 
+ * @param {string} text
  * @returns {string}
  */
 export function replaceMarkdown(text) {
diff --git a/src/lib/helpers/store.js b/src/lib/helpers/store.js
index 075d677b..dd3f3fd1 100644
--- a/src/lib/helpers/store.js
+++ b/src/lib/helpers/store.js
@@ -41,7 +41,7 @@ export const userStore = writable({ id: "", full_name: "", expires: 0, token: nu
 export function getUserStore() {
     if (browser) {
         // Access localStorage only if in the browser context
-        let json = localStorage.getItem(userKey);
+        let json = sessionStorage.getItem(userKey);
         if (json)
             return JSON.parse(json);
         else
@@ -54,7 +54,7 @@ export function getUserStore() {
 
 userStore.subscribe(value => {
     if (browser && value.token) {
-        localStorage.setItem(userKey, JSON.stringify(value));
+        sessionStorage.setItem(userKey, JSON.stringify(value));
     }
 });
 
@@ -219,13 +219,31 @@ const createKnowledgeBaseDocumentStore = () => {
 export const knowledgeBaseDocumentStore = createKnowledgeBaseDocumentStore();
 
 
-export function resetLocalStorage(resetUser = false) {
+export function resetStorage(resetUser = false) {
     conversationUserStateStore.resetAll();
     conversationUserMessageStore.reset();
     conversationUserAttachmentStore.reset();
-    localStorage.removeItem('conversation');
+    clearLocalStorage(['message']);
 
     if (resetUser) {
-        localStorage.removeItem('user');
+        sessionStorage.removeItem(userKey);
+    }
+}
+
+/** @param {string[]?} keyPrefixes */
+function clearLocalStorage(keyPrefixes = null) {
+    if (!keyPrefixes) {
+        localStorage.clear();
+        return;
+    }
+
+    for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (!key) continue;
+
+        const found = keyPrefixes.find(x => key.startsWith(x));
+        if (found) {
+            localStorage.removeItem(key);
+        }
     }
 }
\ No newline at end of file
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..b59f8507 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]
  */
 
 /**
@@ -27,6 +28,7 @@
  * @property {string[]?} [providers]
  * @property {string[]?} [models]
  * @property {string[]?} [templateNames]
+ * @property {string?} [similarTemplateName]
  * @property {string?} [startTime]
  * @property {string?} [endTime]
  * @property {{key: string, value: string}[]?} [states]
@@ -59,4 +61,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..a958f2d7 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -10,6 +10,7 @@ export const endpoints = {
 
     // user
     tokenUrl: `${host}/token`,
+    renewTokenUrl: `${host}/renew-token`,
     myInfoUrl: `${host}/user/me`,
     usersUrl: `${host}/users`,
     userDetailUrl: `${host}/user/{id}/details`,
@@ -41,6 +42,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/lib/services/auth-service.js b/src/lib/services/auth-service.js
index 692d680b..bc7543de 100644
--- a/src/lib/services/auth-service.js
+++ b/src/lib/services/auth-service.js
@@ -29,7 +29,7 @@ export async function getToken(email, password, onSucceed, onError) {
         if (!result) {
             return;
         }
-        let user = getUserStore();
+        const user = getUserStore();
         user.token = result.access_token;
         user.expires = result.expires;
         userStore.set(user);
@@ -40,6 +40,42 @@ export async function getToken(email, password, onSucceed, onError) {
     });
 }
 
+/**
+ * @param {string} token
+ * @param {((arg0: string) => void) | null} [onSucceed]
+ * @param {(() => void) | null} [onError]
+ */
+export async function renewToken(token, onSucceed = null, onError = null) {
+    await fetch(endpoints.renewTokenUrl, {
+        method: 'POST',
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({ refresh_token: token, access_token: token }),
+    }).then(response => {
+        if (response.ok) {
+            return response.json();
+        } else {
+            console.log(response.statusText);
+            onError?.();
+            return false;
+        }
+    }).then(result => {
+        if (!result) {
+            return;
+        }
+        const user = getUserStore();
+        user.token = result.access_token;
+        user.expires = result.expires;
+        userStore.set(user);
+        onSucceed?.(result.access_token);
+    })
+    .catch(() => {
+        onError?.();
+    });
+}
+
 /**
  * Set token from exteranl
  * @param {string} token
diff --git a/src/lib/services/instruct-service.js b/src/lib/services/instruct-service.js
index 33f28915..4549828c 100644
--- a/src/lib/services/instruct-service.js
+++ b/src/lib/services/instruct-service.js
@@ -1,7 +1,6 @@
 import { endpoints } from '$lib/services/api-endpoints.js';
 import { replaceUrl } from '$lib/helpers/http';
 import axios from 'axios';
-import qs from 'qs';
 
 /**
  * Execute agent instruction by template or user provided prompt.
@@ -27,22 +26,6 @@ export async function sendChatCompletion(request) {
 }
 
 
-/**
- * Get instruction logs
- * @param {import('$instructTypes').InstructLogFilter} filter
- * @returns {Promise<import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>>}
- */
-export async function getInstructionLogs(filter) {
-    const url = endpoints.instructLogUrl;
-    const response = await axios.get(url, {
-        params: {
-            ...filter
-        },
-        paramsSerializer: (params) => qs.stringify(params, { encode: false, allowDots: true, arrayFormat: "indices" })
-    });
-    return response.data;
-}
-
 /**
  * get instruction log search keys
  * @param {import('$instructTypes').StateSearchQuery} request
diff --git a/src/lib/services/logging-service.js b/src/lib/services/logging-service.js
index 9d272f75..cbdedc77 100644
--- a/src/lib/services/logging-service.js
+++ b/src/lib/services/logging-service.js
@@ -1,6 +1,7 @@
 import { replaceUrl } from '$lib/helpers/http.js';
 import { endpoints } from './api-endpoints.js';
 import axios from 'axios';
+import qs from 'qs';
 
 /**
  * Show backend full log
@@ -51,4 +52,21 @@ export async function getStateLogs(conversationId, filter) {
         }
     });
     return response.data;
+}
+
+
+/**
+ * Get instruction logs
+ * @param {import('$instructTypes').InstructLogFilter} filter
+ * @returns {Promise<import('$commonTypes').PagedItems<import('$instructTypes').InstructionLogModel>>}
+ */
+export async function getInstructionLogs(filter) {
+    const url = endpoints.instructLogUrl;
+    const response = await axios.get(url, {
+        params: {
+            ...filter
+        },
+        paramsSerializer: (params) => qs.stringify(params, { encode: false, allowDots: true, arrayFormat: "indices" })
+    });
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/lib/services/signalr-service.js b/src/lib/services/signalr-service.js
index e4eaeca9..3f94f782 100644
--- a/src/lib/services/signalr-service.js
+++ b/src/lib/services/signalr-service.js
@@ -63,7 +63,7 @@ export const signalr = {
     connection = new HubConnectionBuilder()
       .withUrl(endpoints.chatHubUrl + `?conversation-id=${conversationId}&access_token=${user.token}`) // the hub URL, change it according to your server
       .withAutomaticReconnect() // enable automatic reconnection
-      .configureLogging(LogLevel.Information) // configure the logging level
+      .configureLogging(LogLevel.Warning) // configure the logging level
       .build();
 
     // start the connection
diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
index c268bcf8..9c177757 100644
--- a/src/routes/(authentication)/login/+page.svelte
+++ b/src/routes/(authentication)/login/+page.svelte
@@ -31,7 +31,7 @@
 		PUBLIC_AUTH_ENABLE_FIND_PWD,
 	} from '$env/static/public';
 	import { onMount } from 'svelte';
-	import { resetLocalStorage } from '$lib/helpers/store';
+	import { resetStorage } from '$lib/helpers/store';
 
 	let username = PUBLIC_ADMIN_USERNAME;
 	let password = PUBLIC_ADMIN_PASSWORD;
@@ -45,7 +45,7 @@
 		const userName = localStorage.getItem('user_name');
 		isRememberMe = userName !== null;
 		if(isRememberMe){
-			username = userName;
+			username = userName || '';
 		}
 	});
 	function handleRememberMe(){
@@ -56,6 +56,8 @@
 			localStorage.removeItem("user_name");
 		}
 	}
+
+	/** @param {any} e */
 	async function onSubmit(e) {
 		isSubmitting = true;
 		handleRememberMe();
@@ -66,7 +68,7 @@
 			status = 'success';
 			const redirectUrl = $page.url.searchParams.get('redirect');
 			isSubmitting = false;
-			resetLocalStorage();
+			resetStorage();
 			if (redirectUrl) {
 				window.location.href = decodeURIComponent(redirectUrl);
 			} else {
@@ -87,16 +89,16 @@
 	}
 
 	function onPasswordToggle() {
-		var x = document.getElementById('user-password');
+		const x = document.getElementById('user-password');
 		if (!x) return;
 
 		if (x.type === 'password') {
 			x.type = 'text';
-			var icon = document.getElementById('password-eye-icon');
+			const icon = document.getElementById('password-eye-icon');
 			icon.className = 'mdi mdi-eye-off-outline';
 		} else {
 			x.type = 'password';
-			var icon = document.getElementById('password-eye-icon');
+			const icon = document.getElementById('password-eye-icon');
 			icon.className = 'mdi mdi-eye-outline';
 		}
 	}
diff --git a/src/routes/(authentication)/register/+page.svelte b/src/routes/(authentication)/register/+page.svelte
index 5e413b6b..25fbe6d0 100644
--- a/src/routes/(authentication)/register/+page.svelte
+++ b/src/routes/(authentication)/register/+page.svelte
@@ -32,7 +32,7 @@
 			const data = await response.json();
 
 			if (response.ok && data.message === 'success') {
-				localStorage.setItem('authUser', JSON.stringify(data));
+				sessionStorage.setItem('authUser', JSON.stringify(data));
 				isOpen = true;
 				msg = 'Registration success. Redirecting...';
 				status = 'success';
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..e320a73f 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -21,7 +21,7 @@
 		conversationUserStateStore,
 		conversationUserMessageStore,
 		conversationUserAttachmentStore,
-		resetLocalStorage
+		resetStorage
 	} from '$lib/helpers/store.js';
 	import {
 		sendMessageToHub,
@@ -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';
@@ -279,7 +279,7 @@
 	});
 
 	function handleLogoutAction() {
-		resetLocalStorage(true);
+		resetStorage(true);
 	}
 
 	function focusChatTextArea() {
@@ -766,7 +766,7 @@
 		if (!!!messageData?.inputMessageId) {
 			files = getChatFiles();
 		}
-		resetStorage();
+		resetChatStorage();
 
 		if (files?.length > 0 && !!!messageData.inputMessageId) {
 			const filePayload = buildFilePayload(files);
@@ -1148,7 +1148,7 @@
 	async function handleDeleteMessage(messageId) {
 		isSendingMsg = true;
 		clearInstantLogs();
-		resetStorage();
+		resetChatStorage();
 		await deleteConversationMessage(params.conversationId, messageId);
 		isSendingMsg = false;
 	}
@@ -1293,7 +1293,7 @@
 		latestStateLog = null;
 	}
 
-	function resetStorage() {
+	function resetChatStorage() {
 		conversationUserAttachmentStore.reset();
 	}
 
@@ -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/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index 68b89c99..d5f5c891 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -9,9 +9,9 @@
 	import TablePagination from '$lib/common/TablePagination.svelte';
 	import { getAgentOptions } from '$lib/services/agent-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
-	import { getInstructionLogs, getInstructionLogSearchKeys } from '$lib/services/instruct-service';
+	import { getInstructionLogSearchKeys } from '$lib/services/instruct-service';
+	import { getInstructionLogs } from '$lib/services/logging-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import LogItem from './log-item.svelte';
 	import { convertTimeRange, removeDuplicates } from '$lib/helpers/utils/common';
 	import StateSearch from '$lib/common/StateSearch.svelte';
 	import Select from '$lib/common/Select.svelte';
@@ -22,6 +22,8 @@
 	} from '$lib/helpers/utils/common';
 	import { TimeRange } from '$lib/helpers/enums';
 	import { TIME_RANGE_OPTIONS } from '$lib/helpers/constants';
+	import LogItem from './log-item.svelte';
+	
 
     const firstPage = 1;
 	const pageSize = 15;
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>