From 69c676692b7891e3a49021c05d97e27cca9c647a Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 29 Oct 2025 20:17:36 -0500
Subject: [PATCH 01/18] temp save

---
 src/lib/helpers/types/agentTypes.js           |  2 +
 src/lib/scss/custom/pages/_agent.scss         |  6 ++
 src/routes/page/agent/[agentId]/+page.svelte  | 40 +++++-----
 .../agent-components/agent-rule.svelte        | 74 ++++++++++++++++---
 .../agent-components/agent-utility.svelte     |  6 +-
 .../page/agent/[agentId]/agent-tabs.svelte    |  7 +-
 6 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index d3fb5a06..086ff4ce 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -204,6 +204,8 @@
  * @property {string} criteria
  * @property {string?} [displayName]
  * @property {boolean} disabled
+ * @property {any?} [output_args]
+ * @property {string?} [json_args]
  */
 
 
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index c5396a2b..7c6e5899 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -268,6 +268,12 @@
     .markdown-div {
         max-height: 500px;
         font-size: 15px;
+
+        pre {
+            white-space: pre !important;
+            margin-top: 1em;
+            margin-bottom: 1em;
+        }
     }
 
     &.show {
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-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index 3f6d3b92..501ff58e 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -2,13 +2,19 @@
     import { onMount } from 'svelte';
     import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
 	import { getAgentRuleOptions } from '$lib/services/agent-service';
+	import Markdown from '$lib/common/markdown/Markdown.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
+	import { ADMIN_ROLES } from '$lib/helpers/constants';
 
     const limit = 100;
-    const textLimit = 200;
+    const textLimit = 1024;
 
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
+    /** @type {import('$userTypes').UserModel} */
+    export let user;
+
     /** @type {() => void} */
     export let handleAgentChange = () => {};
 
@@ -49,22 +55,23 @@
             const list = data?.map(x => {
                 return {
                     name: x.trigger_name,
-                    displayName: ""
+                    displayName: "",
+                    json_args: x.json_args
                 };
             }) || [];
             ruleOptions = [{
                 name: "",
                 displayName: ""
             }, ...list];
+            init();
         });
-        init();
     });
 
     function init() {
         const list = agent.rules?.map(x => {
             return {
                 ...x,
-                displayName: "",
+                displayName: ""
             };
         }) || [];
         innerRefresh(list);
@@ -138,11 +145,14 @@
     /** @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,
+                // json_args: found?.json_args
+                json_args: `\`\`\`json\n${JSON.stringify({
+                    test: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the mo',
+                    name: 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Mal'
+                }, null, 2)}\n\`\`\``
             }
         }) || [];
     }
@@ -220,19 +230,61 @@
                         <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}
+                                        <div
+                                            class="line-align-center clickable text-primary fs-4"
+                                            data-bs-toggle="tooltip"
+                                            data-bs-placement="top"
+                                            title="Compile"
+                                        >
+                                            <i class="mdi mdi-file-code" />
+                                        </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 bx-info-circle"
+                                                    style="font-size: 15px;"
+                                                    id={`rule-${uid}`}
+                                                />
+                                                <BotsharpTooltip
+                                                    isOpen
+                                                    containerClasses="agent-utility-desc"
+                                                    style={`min-width: 100px;`}
+                                                    target={`rule-${uid}`}
+                                                    placement="right"
+                                                    persist={false}
+                                                >
+                                                    <Markdown
+                                                        rawText
+                                                        scrollable
+                                                        containerClasses={'markdown-div'}
+                                                        containerStyles={`max-width: 500px; max-height: 100px;`}
+                                                        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..86ec4439 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -4,7 +4,7 @@
     import { getAgentUtilityOptions } from '$lib/services/agent-service';
 	import { 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-";
@@ -446,7 +446,7 @@
                                                     style="font-size: 15px;"
                                                     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 +460,7 @@
                                                         containerStyles={`max-width: ${Math.floor(windowWidth*0.55)}px;`}
                                                         text={description}
                                                     />
-                                                </BotSharpTooltip>
+                                                </BotsharpTooltip>
                                             </div>
                                             {/if}
                                         </div>
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index ac799eb9..1d379a6a 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 = () => {};
 
@@ -57,7 +60,7 @@
     ];
 
     onMount(() => {
-        selectedTab = tabs[0]?.name;
+        selectedTab = tabs[4]?.name;
     });
 
     /** @param {string} selected */
@@ -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} />

From 7a97ba33acd93cd72a2b5835300b3feb50752f7b Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Wed, 29 Oct 2025 22:55:52 -0500
Subject: [PATCH 02/18] add output arguments

---
 src/lib/scss/custom/pages/_agent.scss         |  3 +-
 .../agent-components/agent-rule.svelte        | 31 ++++++++++++-------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 7c6e5899..d4d42782 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -262,7 +262,7 @@
     .tooltip-inner {
         text-align: start;
         max-width: fit-content;
-        padding: 20px;
+        padding: 5px 10px;
     }
 
     .markdown-div {
@@ -271,6 +271,7 @@
 
         pre {
             white-space: pre !important;
+            width: fit-content;
             margin-top: 1em;
             margin-bottom: 1em;
         }
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 501ff58e..5954616e 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -9,6 +9,9 @@
     const limit = 100;
     const textLimit = 1024;
 
+    let windowWidth = 0;
+    let windowHeight = 0;
+
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
@@ -51,6 +54,7 @@
     let scrollContainer;
 
     onMount(async () =>{
+        resizeWindow();
         getAgentRuleOptions().then(data => {
             const list = data?.map(x => {
                 return {
@@ -148,11 +152,7 @@
             const found = ruleOptions.find(y => y.name === x.trigger_name);
             return {
                 ...x,
-                // json_args: found?.json_args
-                json_args: `\`\`\`json\n${JSON.stringify({
-                    test: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the mo',
-                    name: 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Mal'
-                }, null, 2)}\n\`\`\``
+                json_args: found?.json_args
             }
         }) || [];
     }
@@ -167,8 +167,15 @@
             }, 0);
         }
     }
+
+    function resizeWindow() {
+        windowWidth = window.innerWidth;
+        windowHeight = window.innerHeight;
+    }
 </script>
 
+<svelte:window on:resize={() => resizeWindow()}/>
+
 <Card>
     <CardBody>
         <div class="text-center">
@@ -234,12 +241,12 @@
                                         <div class="line-align-center">
                                             {'Criteria'}
                                         </div>
-                                        {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name}
+                                        {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && !!rule.criteria?.trim()}
                                         <div
                                             class="line-align-center clickable text-primary fs-4"
                                             data-bs-toggle="tooltip"
                                             data-bs-placement="top"
-                                            title="Compile"
+                                            title="Compile code script"
                                         >
                                             <i class="mdi mdi-file-code" />
                                         </div>
@@ -265,20 +272,22 @@
                                                     class="bx bx-info-circle"
                                                     style="font-size: 15px;"
                                                     id={`rule-${uid}`}
+                                                    data-bs-toggle="tooltip"
+                                                    data-bs-placement="top"
+                                                    title="Output arguments"
                                                 />
                                                 <BotsharpTooltip
-                                                    isOpen
                                                     containerClasses="agent-utility-desc"
-                                                    style={`min-width: 100px;`}
+                                                    style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
                                                     target={`rule-${uid}`}
                                                     placement="right"
-                                                    persist={false}
+                                                    persist
                                                 >
                                                     <Markdown
                                                         rawText
                                                         scrollable
                                                         containerClasses={'markdown-div'}
-                                                        containerStyles={`max-width: 500px; max-height: 100px;`}
+                                                        containerStyles={`max-width: ${Math.floor(windowWidth*0.3)}px;`}
                                                         text={rule.json_args}
                                                     />
                                                 </BotsharpTooltip>

From 6feddb02f2eddcccb3534065d032289cea7fbee3 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 30 Oct 2025 11:22:18 -0500
Subject: [PATCH 03/18] integrate code generate endpoint

---
 src/lib/helpers/http.js                       |  3 +-
 src/lib/helpers/types/agentTypes.js           | 25 +++++
 src/lib/scss/custom/pages/_agent.scss         |  2 -
 src/lib/services/agent-service.js             | 14 +++
 src/lib/services/api-endpoints.js             |  1 +
 .../agent-components/agent-rule.svelte        | 97 ++++++++++++++++++-
 6 files changed, 135 insertions(+), 7 deletions(-)

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 8e470866..d6a57302 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -75,7 +75,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/document/(.*?)/page', 'g'),
         new RegExp('http(s*)://(.*?)/users', 'g'),
         new RegExp('http(s*)://(.*?)/instruct/chat-completion', 'g'),
-        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-script/generate', 'g')
     ];
 
     /** @type {RegExp[]} */
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 086ff4ce..05bacc39 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
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index d4d42782..0bee7e2f 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -272,8 +272,6 @@
         pre {
             white-space: pre !important;
             width: fit-content;
-            margin-top: 1em;
-            margin-bottom: 1em;
         }
     }
 
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index d4d87e7b..4b6d0995 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -156,4 +156,18 @@ export async function updateAgentCodeScripts(agentId, update) {
         ...update
     });
     return response.data;
+}
+
+/**
+ * Generate agent code script
+ * @param {string} agentId
+ * @param {import('$agentTypes').AgentCodeScriptGenerateModel} request
+ * @returns {Promise<import('$agentTypes').CodeGenerationResult>}
+ */
+export async function generateAgentCodeScript(agentId, request) {
+    const url = endpoints.agentCodeScriptGenerateUrl.replace("{agentId}", agentId);
+    const response = await axios.post(url, {
+        ...request
+    });
+    return response.data;
 }
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 1ee3cc59..17b81a9b 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -41,6 +41,7 @@ export const endpoints = {
     // agent code script:
     agentCodeScriptListUrl: `${host}/agent/{agentId}/code-scripts`,
     agentCodeScriptUpdateUrl: `${host}/agent/{agentId}/code-scripts`,
+    agentCodeScriptGenerateUrl: `${host}/agent/{agentId}/code-script/generate`,
     
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index 5954616e..71fe5923 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -1,17 +1,32 @@
 <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 { ADMIN_ROLES } from '$lib/helpers/constants';
+	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+    import { ADMIN_ROLES } from '$lib/helpers/constants';
+	import { AgentCodeScriptType } from '$lib/helpers/enums';
 
     const limit = 100;
     const textLimit = 1024;
-
+    
+    /** @type {boolean} */
+    let isLoading = false;
+    /** @type {boolean} */
+    let isComplete = false;
+    /** @type {boolean} */
+    let isError = false;
+    /** @type {number} */
+    let duration = 2000;
     let windowWidth = 0;
     let windowHeight = 0;
 
+    /** @type {string} */
+    let successText = '';
+    let errorText = '';
+
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
@@ -145,6 +160,72 @@
         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>"${rule.trigger_name}_rule.py"</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: rule.criteria,
+                options: {
+                    save_to_db: true,
+                    script_name: `${rule.trigger_name}_rule.py`,
+                    script_type: AgentCodeScriptType.Src,
+                    // to do:
+                    // agent_id: agent.id,
+                    // template_name: "rule"
+                }
+            }).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) {
@@ -176,6 +257,8 @@
 
 <svelte:window on:resize={() => resizeWindow()}/>
 
+<LoadingToComplete {isLoading} {isComplete} {isError} {successText} {errorText} />
+
 <Card>
     <CardBody>
         <div class="text-center">
@@ -248,7 +331,13 @@
                                             data-bs-placement="top"
                                             title="Compile code script"
                                         >
-                                            <i class="mdi mdi-file-code" />
+                                            <i
+                                                class="mdi mdi-file-code"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => compileCodeScript(rule)}
+                                            />
                                         </div>
                                         {/if}
                                     </div>

From 05624ec09937b47ebcd95b29c2ad1d251d25a361 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 30 Oct 2025 12:04:46 -0500
Subject: [PATCH 04/18] responsive styles

---
 src/lib/scss/custom/pages/_agent.scss         | 55 +++++++++++++++++--
 .../agent-components/agent-rule.svelte        |  2 +-
 .../page/agent/[agentId]/agent-tabs.svelte    |  4 +-
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 0bee7e2f..d0bc304a 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;
@@ -167,7 +167,7 @@
             box-shadow: none !important;
         }
     }
-    
+
     .utility-wrapper {
         border: 1px dotted var(--bs-primary);
         border-radius: 5px;
@@ -291,4 +291,49 @@
         overflow-x: auto;
         scrollbar-width: thin;
     }
-}
\ No newline at end of file
+}
+
+// Responsive adjustments for utility
+@media (max-width: 768px) {
+  .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/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index 71fe5923..852f42fc 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -332,7 +332,7 @@
                                             title="Compile code script"
                                         >
                                             <i
-                                                class="mdi mdi-file-code"
+                                                class="mdi mdi-code-braces-box"
                                                 role="link"
                                                 tabindex="0"
                                                 on:keydown={() => {}}
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index 1d379a6a..a585c546 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -50,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' },
@@ -60,7 +60,7 @@
     ];
 
     onMount(() => {
-        selectedTab = tabs[4]?.name;
+        selectedTab = tabs[0]?.name;
     });
 
     /** @param {string} selected */

From d699cff3c312c7c23ae1c98492bfad74ec8e6ea0 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 30 Oct 2025 13:16:04 -0500
Subject: [PATCH 05/18] add rule args

---
 .../agent/[agentId]/agent-components/agent-rule.svelte     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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 852f42fc..9e9c28eb 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -75,6 +75,7 @@
                 return {
                     name: x.trigger_name,
                     displayName: "",
+                    output_args: x.output_args,
                     json_args: x.json_args
                 };
             }) || [];
@@ -195,6 +196,9 @@
                     save_to_db: true,
                     script_name: `${rule.trigger_name}_rule.py`,
                     script_type: AgentCodeScriptType.Src,
+                    data: {
+                        'rule_args': { ...rule.output_args }
+                    }
                     // to do:
                     // agent_id: agent.id,
                     // template_name: "rule"
@@ -233,6 +237,7 @@
             const found = ruleOptions.find(y => y.name === x.trigger_name);
             return {
                 ...x,
+                output_args: found?.output_args,
                 json_args: found?.json_args
             }
         }) || [];
@@ -363,7 +368,7 @@
                                                     id={`rule-${uid}`}
                                                     data-bs-toggle="tooltip"
                                                     data-bs-placement="top"
-                                                    title="Output arguments"
+                                                    title="Rule arguments"
                                                 />
                                                 <BotsharpTooltip
                                                     containerClasses="agent-utility-desc"

From 10219a3fef83bdc9db99bc6716ea272bb518785e Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Wed, 5 Nov 2025 22:43:49 -0600
Subject: [PATCH 06/18] rename constant agent

---
 src/lib/helpers/constants.js                               | 6 +++---
 src/routes/chat/[agentId]/+page.svelte                     | 7 +++----
 src/routes/chat/[agentId]/[conversationId]/chat-box.svelte | 4 ++--
 src/routes/page/agent/card-agent.svelte                    | 4 ++--
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/lib/helpers/constants.js b/src/lib/helpers/constants.js
index 1b21bac0..9ff53dd1 100644
--- a/src/lib/helpers/constants.js
+++ b/src/lib/helpers/constants.js
@@ -37,10 +37,10 @@ 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 TRAINING_MODE = "training";
 export const DEFAULT_KNOWLEDGE_COLLECTION = "BotSharp";
 export const IMAGE_DATA_PREFIX = 'data:image';
 
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index b6b11eed..857aefdf 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -1,14 +1,13 @@
 <script>
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-
     // This page is used to initialize a new conversation for client
+    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { page } from '$app/stores';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
     import { getToken, setToken } from '$lib/services/auth-service.js'
     import { getUserStore } from '$lib/helpers/store.js';
     import { conversationStore } from '$lib/helpers/store.js';
-	import { LEARNER_ID, TRAINING_MODE } from '$lib/helpers/constants';
+	import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
 
     const params = $page.params;
     
@@ -43,7 +42,7 @@
         const chatUrl = new URL(`chat/${agentId}/${conversationId}`, window.location.origin);
         
         const searchParams = new URLSearchParams();
-        if (agentId === LEARNER_ID) {
+        if (agentId === LEARNER_AGENT_ID) {
             searchParams.append('mode', TRAINING_MODE);
         }
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 1df045fb..af4db082 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -44,7 +44,7 @@
 		PUBLIC_LIVECHAT_STREAM_ENABLED,
 		PUBLIC_DEBUG_MODE
 	} from '$env/static/public';
-	import { BOT_SENDERS, LEARNER_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
+	import { BOT_SENDERS, LEARNER_AGENT_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { newConversation } from '$lib/services/conversation-service';
 	import DialogModal from '$lib/common/DialogModal.svelte';
@@ -1724,7 +1724,7 @@
 														Add Tags
 													</DropdownItem>
 												{/if}
-												{#if agent?.id === LEARNER_ID && mode === TRAINING_MODE}
+												{#if agent?.id === LEARNER_AGENT_ID && mode === TRAINING_MODE}
 													<DropdownItem on:click={() => handleSaveKnowledge()}>Save Knowledge</DropdownItem>
 												{/if}											
 												<DropdownItem on:click={() => pinDashboard()}>
diff --git a/src/routes/page/agent/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>

From 54c8d577f69ae8766d2bfc07a227bbc6911e8755 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 6 Nov 2025 09:44:36 -0600
Subject: [PATCH 07/18] add constants

---
 src/lib/helpers/constants.js                         |  2 ++
 .../[agentId]/agent-components/agent-rule.svelte     | 12 ++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/helpers/constants.js b/src/lib/helpers/constants.js
index 9ff53dd1..eabcaec6 100644
--- a/src/lib/helpers/constants.js
+++ b/src/lib/helpers/constants.js
@@ -39,6 +39,8 @@ export const FILE_EDITORS = [
 
 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";
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 9e9c28eb..955bf167 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -6,7 +6,7 @@
 	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 } from '$lib/helpers/constants';
+    import { ADMIN_ROLES, AI_PROGRAMMER_AGENT_ID, RULE_TRIGGER_CODE_GENERATE_TEMPLATE } from '$lib/helpers/constants';
 	import { AgentCodeScriptType } from '$lib/helpers/enums';
 
     const limit = 100;
@@ -191,17 +191,17 @@
         return new Promise((resolve, reject) => {
             isLoading = true;
             generateAgentCodeScript(agent.id, {
-                text: rule.criteria,
+                text: '',
                 options: {
+                    agent_id: AI_PROGRAMMER_AGENT_ID,
+                    template_name: RULE_TRIGGER_CODE_GENERATE_TEMPLATE,
                     save_to_db: true,
                     script_name: `${rule.trigger_name}_rule.py`,
                     script_type: AgentCodeScriptType.Src,
                     data: {
-                        'rule_args': { ...rule.output_args }
+                        'args_example': { ...rule.output_args },
+                        'user_request': rule.criteria
                     }
-                    // to do:
-                    // agent_id: agent.id,
-                    // template_name: "rule"
                 }
             }).then(res => {
                 if (res?.success) {

From 42fc2fdab97c1a3c799573ef0d9760586400587b Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 6 Nov 2025 10:00:19 -0600
Subject: [PATCH 08/18] refine icon size

---
 .../page/agent/[agentId]/agent-components/agent-rule.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 955bf167..262a435f 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -331,7 +331,7 @@
                                         </div>
                                         {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && !!rule.criteria?.trim()}
                                         <div
-                                            class="line-align-center clickable text-primary fs-4"
+                                            class="line-align-center clickable text-primary fs-5"
                                             data-bs-toggle="tooltip"
                                             data-bs-placement="top"
                                             title="Compile code script"

From 950fe9ad44fdf129c0b1d6dfb81a6bbfb937becd Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 6 Nov 2025 15:10:32 -0600
Subject: [PATCH 09/18] refine scroll

---
 src/lib/common/StateModal.svelte              |   2 +-
 src/lib/common/StateSearch.svelte             |   2 +-
 src/lib/helpers/http.js                       |   3 +-
 src/lib/helpers/types/instructTypes.js        |   9 ++
 src/lib/helpers/utils/common.js               |  15 +++
 src/lib/scss/custom/pages/_agent.scss         |  94 ++++++++-----
 src/lib/scss/custom/pages/_instruction.scss   |  10 +-
 src/lib/scss/custom/pages/_knowledgebase.scss |   2 +-
 .../agent-knowledge-base.svelte               |  18 +--
 .../agent-components/agent-mcp-tool.svelte    |  22 +--
 .../agent-components/agent-rule.svelte        |  34 ++---
 .../agent-components/agent-utility.svelte     |  32 ++---
 .../llm-configs/chat-config.svelte            |  42 +++---
 .../llm-configs/llm-basic-config.svelte       |  18 +--
 .../page/agent/code-scripts/+page.svelte      |   2 +-
 .../instruction-coding.svelte                 | 127 ++++++++++++++++++
 .../instruction-state.svelte                  |  34 +++--
 .../page/instruction/testing/+page.svelte     |  72 +++++++---
 .../common/search/advanced-search.svelte      |   2 +-
 .../vector-item-edit-modal.svelte             |   2 +-
 20 files changed, 371 insertions(+), 171 deletions(-)
 create mode 100644 src/routes/page/instruction/instruction-components/instruction-coding.svelte

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/http.js b/src/lib/helpers/http.js
index d6a57302..19e8bc21 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -112,7 +112,8 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/logger/instruction/log/keys', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/content-log', 'g'),
         new RegExp('http(s*)://(.*?)/logger/conversation/(.*?)/state-log', 'g'),
-        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g')
+        new RegExp('http(s*)://(.*?)/mcp/server-configs', 'g'),
+        new RegExp('http(s*)://(.*?)/agent/(.*?)/code-scripts', 'g')
     ];
 
     if (config.method === 'post' && postRegexes.some(regex => regex.test(config.url || ''))) {
diff --git a/src/lib/helpers/types/instructTypes.js b/src/lib/helpers/types/instructTypes.js
index c60cd137..b6ed4b3f 100644
--- a/src/lib/helpers/types/instructTypes.js
+++ b/src/lib/helpers/types/instructTypes.js
@@ -6,6 +6,7 @@
  * @property {string?} [provider] - The LLM provider.
  * @property {string?} [model] - The LLM model.
  * @property {import('$conversationTypes').ConversationStateModel[]} [states]
+ * @property {CodeInstructOptions?} [codeOptions]
  */
 
 /**
@@ -59,4 +60,12 @@
  * @property {string?} [endTime]
  */
 
+/**
+ * @typedef {Object} CodeInstructOptions
+ * @property {string?} [processor] - The code processor.
+ * @property {string?} [script_name] - The code script name.
+ * @property {string?} [script_type] - The code script type: src or test.
+ * @property {{key: string, value: string}[]?} [arguments] - The arguments.
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index 5b263aa7..e6170626 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -143,6 +143,21 @@ export function goToUrl(url, opts = {}) {
     goto(url, { replaceState, noScroll });
 }
 
+/**
+ * @param {HTMLElement | null | undefined} container
+ * @param {ScrollBehavior} behavior
+ */
+export function scrollToBottom(container, behavior = 'smooth') {
+    if (container) {
+        setTimeout(() => {
+            container.scrollTo({
+                top: container.scrollHeight,
+                behavior: behavior
+            });
+        }, 0);
+    }
+}
+
 /**
  * @param {string} str
  */
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index d0bc304a..afa4c72d 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -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 {
@@ -294,46 +310,58 @@
 }
 
 // Responsive adjustments for utility
-@media (max-width: 768px) {
-  .agent-utility-container {
-    padding: 0 5px;
+@media (max-width: 1250px) {
+    .agent-config-container {
+        .llm-config-item {
+            flex-direction: column;
 
-    .utility-wrapper {
-      .utility-row-primary {
-        flex-direction: column;
-      }
+            .llm-config-label {
+                width: 100%;
+            }
 
-      .utility-row {
-        .utility-label,
-        .utility-value {
-          width: 100%;
+            .llm-config-input {
+                width: 100%;
+            }
         }
+    }
 
-        .utility-value {
-          flex-direction: column;
-        }
+    .agent-utility-container {
+        padding: 0 5px;
 
-        .utility-input,
-        .utility-delete {
-          width: 100%;
-        }
+        .utility-wrapper {
+            .utility-row-primary {
+                flex-direction: column;
+            }
 
-        .utility-delete {
-          display: flex;
-          justify-content: flex-end;
-          align-items: end;
-          margin-top: 6px;
-        }
-      }
+            .utility-row {
+                .utility-label, .utility-value {
+                    width: 100%;
+                }
 
-      .utility-row-secondary {
-        .utility-content {
-          .utility-list-item {
-            flex-direction: column;
-            gap: 6px;
-          }
+                .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/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
index 129c8403..cb3879a6 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>
@@ -221,7 +211,7 @@
                                     data-bs-placement="top"
                                     title="Uncheck to disable knowledgebase"
                                 >
-                                    <i class="bx bx-info-circle" />
+                                    <i class="bx bx-info-circle fs-6" />
                                 </div>
                             </div>
                         </div>
@@ -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..5f4c4f70 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>
@@ -246,7 +236,7 @@
                                     />
                                 </div>
                                 <div
-                                    class="line-align-center"
+                                    class="line-align-center fs-6"
                                     data-bs-toggle="tooltip"
                                     data-bs-placement="top"
                                     title="Uncheck to disable MCP"
@@ -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 262a435f..05378bd7 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -8,6 +8,7 @@
 	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 = 1024;
@@ -121,7 +122,7 @@
                 disabled: false
             }
         ];
-        scrollToBottom();
+        scrollToBottom(scrollContainer);
         handleAgentChange();
     }
 
@@ -169,7 +170,7 @@
             title: 'Are you sure?',
             html: `
                 <div>
-                    <p>Are you sure you want to generate code script <b>"${rule.trigger_name}_rule.py"</b>?</p>
+                    <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>
             `,
@@ -196,7 +197,7 @@
                     agent_id: AI_PROGRAMMER_AGENT_ID,
                     template_name: RULE_TRIGGER_CODE_GENERATE_TEMPLATE,
                     save_to_db: true,
-                    script_name: `${rule.trigger_name}_rule.py`,
+                    script_name: buildScriptName(rule.trigger_name),
                     script_type: AgentCodeScriptType.Src,
                     data: {
                         'args_example': { ...rule.output_args },
@@ -243,15 +244,16 @@
         }) || [];
     }
 
-    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() {
@@ -286,7 +288,7 @@
                                     />
                                 </div>
                                 <div
-                                    class="line-align-center"
+                                    class="line-align-center fs-6"
                                     data-bs-toggle="tooltip"
                                     data-bs-placement="top"
                                     title="Uncheck to disable rule"
@@ -311,7 +313,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={() => {}}
@@ -332,12 +334,13 @@
                                         {#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-code-braces-box"
+                                                class="mdi mdi-play-circle"
                                                 role="link"
                                                 tabindex="0"
                                                 on:keydown={() => {}}
@@ -363,8 +366,7 @@
                                         {#if rule.json_args}
                                             <div class="line-align-center">
                                                 <i
-                                                    class="bx bx-info-circle"
-                                                    style="font-size: 15px;"
+                                                    class="bx bxs-info-circle text-primary fs-5"
                                                     id={`rule-${uid}`}
                                                     data-bs-toggle="tooltip"
                                                     data-bs-placement="top"
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 86ec4439..cdb06d24 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -2,7 +2,7 @@
     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';
 
@@ -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}
@@ -338,7 +327,7 @@
                                     data-bs-placement="top"
                                     title="Uncheck to disable utility"
                                 >
-                                    <i class="bx bx-info-circle" style="font-size: 15px;" />
+                                    <i class="bx bx-info-circle fs-6" />
                                 </div>
                             </div>
                         </div>
@@ -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,8 +431,7 @@
                                             {#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
@@ -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/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 899df295..61009801 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -9,9 +9,9 @@
     import Select from '$lib/common/Select.svelte';
     import { myInfo } from '$lib/services/auth-service';
 	import { getAgentCodeScripts, getAgentOptions, updateAgentCodeScripts } from '$lib/services/agent-service';
+    import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { AgentCodeScriptType } from '$lib/helpers/enums';
 	import ScriptEditor from './script-editor.svelte';
-	import { ADMIN_ROLES } from '$lib/helpers/constants';
 	
     /** @type {boolean} */
     let isLoading = false;
diff --git a/src/routes/page/instruction/instruction-components/instruction-coding.svelte b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
new file mode 100644
index 00000000..ecf1546f
--- /dev/null
+++ b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
@@ -0,0 +1,127 @@
+<script>
+    import { Button, Input } from '@sveltestrap/sveltestrap';
+	import Select from '$lib/common/Select.svelte';
+	import { scrollToBottom } from '$lib/helpers/utils/common';
+
+    const maxLength = 4096;
+    const limit = 10;
+
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel | null | undefined} */
+    export let selectedCodeScript = null;
+
+    /** @type {import('$commonTypes').KeyValuePair[]} */
+    export let args = [];
+
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel[]} */
+    export let codeScripts = [];
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+
+    /** @type {HTMLElement} */
+    let scrollContainer;
+
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    let codeScriptOptions = [];
+
+    $: {
+        codeScriptOptions = codeScripts?.map(x => ({
+            label: x.name,
+            value: x.name
+        })) || [];
+
+        const found = codeScripts.find(x => x.name === selectedCodeScript?.name);
+        selectedCodeScript = found || null;
+    }
+
+    /** @param {any} e */
+    function selectCodeScript(e) {
+        // @ts-ignore
+		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+        selectedCodeScript = selectedValues.length > 0 ? codeScripts?.find(x => x.name === selectedValues[0]) : null;
+    }
+
+    function addArg() {
+        args = [...args, { key: '', value: '' }];
+        scrollToBottom(scrollContainer);
+    }
+
+    /** @param {number} idx */
+    function removeArg(idx) {
+        if (disabled) return;
+
+        args = args.filter((_, index) => index !== idx);
+    }
+</script>
+
+<div class="instruct-setting-section instruct-setting-padding">
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Code Script</div>
+            <Select
+                tag={'code-script-select'}
+                placeholder={'Select Script'}
+                searchMode
+                disabled={disabled}
+                selectedValues={selectedCodeScript?.name ? [selectedCodeScript.name] : []}
+                options={codeScriptOptions}
+                on:select={e => selectCodeScript(e)}
+            />
+        </div>
+    </div>
+
+    <div class="instruct-setting-item">
+        <div class="instruct-setting-dropdown">
+            <div class="text-primary fw-bold mb-1">Arguments</div>
+            <div class="instruct-kv-container" style="max-height: 170px;" bind:this={scrollContainer}>
+                {#each args as arg, idx}
+                    <div class="instruct-kv-item" style="gap: 10px;">
+                        <div style="flex: 0.5;">
+                            <Input
+                                type="text"
+                                name={`arg-key-${idx}`}
+                                bind:value={arg.key}
+                                maxlength={maxLength}
+                                disabled={disabled}
+                                placeholder="Enter a name"
+                            />
+                        </div>
+                        <div style="flex: 0.5;">
+                            <Input
+                                type="text"
+                                name={`arg-value-${idx}`}
+                                bind:value={arg.value}
+                                maxlength={maxLength}
+                                disabled={disabled}
+                                placeholder="Enter a value"
+                            />
+                        </div>
+                        <div class="line-align-center" style={`flex: 0 0 13px; margin-top: 3px;`}>
+                            <div>
+                                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable"
+                                    on:click={() => removeArg(idx)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+            {#if args.length < limit}
+                <div class="text-center">
+                    <Button 
+                        color="link"
+                        style="padding-left: 0px;"
+                        disabled={disabled}
+                        on:click={() => addArg()}
+                    >
+                        Add +
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-state.svelte b/src/routes/page/instruction/instruction-components/instruction-state.svelte
index 31ebfc41..1d74f1b6 100644
--- a/src/routes/page/instruction/instruction-components/instruction-state.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-state.svelte
@@ -1,15 +1,18 @@
 <script>
-	import { Button, Input } from '@sveltestrap/sveltestrap';
+    import { Button, Input } from '@sveltestrap/sveltestrap';
+	import { scrollToBottom } from '$lib/helpers/utils/common';
 
-    const maxLength = 3000;
-    const limit = 8;
+    const maxLength = 4096;
+    const limit = 10;
 
-    /** @type {{key: string, value: string | null}[]} */
+    /** @type {import('$commonTypes').KeyValuePair[]} */
     export let states = [];
 
     /** @type {boolean} */
     export let disabled = false;
 
+    /** @type {HTMLElement} */
+    let scrollContainer;
 
     /** @param {number} idx */
     function removeState(idx) {
@@ -23,15 +26,16 @@
             ...states,
             { key: '', value: ''}
         ];
+        scrollToBottom(scrollContainer);
     }
 </script>
 
 
 <div class="instruct-setting-section instruct-setting-padding">
-    <div class="instruct-state-container">
+    <div class="instruct-kv-container" bind:this={scrollContainer}>
         {#each states as state, idx}
-            <div class="instruct-state-item">
-                <div>
+            <div class="instruct-kv-item">
+                <div style="flex: 0.4;">
                     {#if idx === 0}
                     <div class="text-primary mb-1">
                         {'Key'}
@@ -39,13 +43,14 @@
                     {/if}
                     <Input
                         type="text"
+                        name={`state-key-${idx}`}
                         bind:value={state.key}
                         maxlength={maxLength}
                         disabled={disabled}
-                        placeholder="Enter a state"
+                        placeholder="Enter a name"
                     />
                 </div>
-                <div>
+                <div style="flex: 0.4;">
                     {#if idx === 0}
                     <div class="text-primary mb-1">
                         {'Value'}
@@ -53,25 +58,27 @@
                     {/if}
                     <Input
                         type="text"
+                        name={`state-value-${idx}`}
                         bind:value={state.value}
                         maxlength={maxLength}
                         disabled={disabled}
                         placeholder="Enter a value"
                     />
                 </div>
-                <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '0px'}`}>
+                <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '3px'}`}>
                     <div>
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-no-static-element-interactions -->
                         <i
-                            class="bx bx-no-entry text-danger clickable"
+                            class="bx bxs-no-entry text-danger clickable"
                             on:click={() => removeState(idx)}
                         />
                     </div>
                 </div>
             </div>
         {/each}
-        {#if states.length < limit}
+    </div>
+    {#if states.length < limit}
         <div class="text-center">
             <Button 
                 color="link"
@@ -82,6 +89,5 @@
                 Add +
             </Button>
         </div>
-        {/if}
-    </div>
+    {/if}
 </div>`
\ No newline at end of file
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index 3a02b213..e2d633d8 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -8,26 +8,26 @@
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import InstructionState from '../instruction-components/instruction-state.svelte';
-	import { getAgents } from '$lib/services/agent-service';
+	import { getAgentCodeScripts, getAgents } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
 	import { executeAgentInstruction } from '$lib/services/instruct-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
-	import { LlmModelType } from '$lib/helpers/enums';
+	import { AgentCodeScriptType, LlmModelType } from '$lib/helpers/enums';
 	import NavBar from '$lib/common/nav-bar/NavBar.svelte';
 	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
 	import InstructionAgent from '../instruction-components/instruction-agent.svelte';
 	import InstructionLlm from '../instruction-components/instruction-llm.svelte';
+    import InstructionState from '../instruction-components/instruction-state.svelte';
+    import InstructionCoding from '../instruction-components/instruction-coding.svelte';
 
     const maxLength = 64000;
-    const DEFAULT_PROVIDER = 'openai';
-    const DEFAULT_MODEL = 'gpt-4o-mini';
 
     /** @type {any[]}*/
     const tabs = [
         { name: 'instruction-agent', displayText: 'Agent' },
-        { name: 'instruction-llm', displayText: 'LLM Config' },
-        { name: 'instruction-states', displayText: 'States' }
+        { name: 'instruction-llm', displayText: 'LLM' },
+        { name: 'instruction-states', displayText: 'States' },
+        { name: 'instruction-coding', displayText: 'Coding' }
     ];
 
     let isLoading = false;
@@ -52,6 +52,9 @@
 
     /** @type {string | null} */
     let selectedTemplate = null;
+
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel | null | undefined} */
+    let selectedCodeScript = null;
     
     /** @type {import('$agentTypes').AgentModel[]} */
     let agents = [];
@@ -59,10 +62,14 @@
     /** @type {import('$commonTypes').LlmConfig[]} */
     let llmConfigs = [];
 
-    /** @type {any[]} */
-    let states = [
-        { key: '', value: ''}
-    ];
+    /** @type {import('$agentTypes').AgentCodeScriptViewModel[]} */
+    let codeScripts = [];
+
+    /** @type {import('$commonTypes').KeyValuePair[]} */
+    let states = [{ key: '', value: ''}];
+
+    /** @type {import('$commonTypes').KeyValuePair[]} */
+    let args = [{ key: '', value: ''}];
 
     /** @type {string}*/
     let selectedTab = tabs[0].name;
@@ -94,7 +101,8 @@
         isThinking = true;
         requestDone = false;
         elapsedTime = '';
-        const formattedStates = formatStates(states);
+        const formattedStates = formatKeyValues(states);
+        const formatedArgs = formatKeyValues(args);
         const start = new Date();
         const agentId = selectedAgent?.id || '';
         executeAgentInstruction(agentId, {
@@ -103,7 +111,11 @@
             provider: selectedProvider?.provider,
             model: selectedModel,
             template: selectedTemplate,
-            states: formattedStates
+            states: formattedStates,
+            codeOptions: {
+                script_name: selectedCodeScript?.name,
+                arguments: formatedArgs
+            }
         }).then(res => {
             result = res?.text || '';
         }).finally(() => {
@@ -114,9 +126,9 @@
         });
     }
 
-    /** @param {any[]} states */
-    function formatStates(states) {
-        return states?.filter(x => !!util.trim(x.key) && !!util.trim(x.value)).map(x => {
+    /** @param {import('$commonTypes').KeyValuePair[]} kvs */
+    function formatKeyValues(kvs) {
+        return kvs?.filter(x => !!util.trim(x.key) && !!util.trim(x.value)).map(x => {
             return {
                 key: util.trim(x.key),
                 value: util.trim(x.value)
@@ -163,6 +175,12 @@
         const modelName = selectedAgent?.llm_config?.model || null;
         selectedProvider = llmConfigs?.find(x => x.provider === providerName) || null;
         selectedModel = modelName;
+
+        if (!!selectedAgent?.id) {
+            initAgentCodeScripts(selectedAgent.id);
+        } else {
+            codeScripts = [];
+        }
     }
     
     /** @param {any} e */
@@ -171,6 +189,18 @@
         selectedModel = e.detail.model || '';
     }
 
+    /** @param {string} agentId */
+    function initAgentCodeScripts(agentId) {
+        return new Promise((resolve, reject) => {
+            getAgentCodeScripts(agentId, { scriptTypes: [AgentCodeScriptType.Src] }).then(res => {
+                codeScripts = res || [];
+                resolve(res);
+            }).catch((error) => {
+                reject(error);
+            });
+        });
+    }
+
     /** @param {string} selected */
     function handleTabClick(selected) {
         selectedTab = selected;
@@ -302,7 +332,7 @@
                         >
                             {#each tabs as tab, idx}
                             <NavItem
-                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 2 ? tabs.length : 3})`}
+                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
                                 navBtnStyles={'text-transform: none;'}
                                 navBtnId={`${tab.name}-tab`}
                                 dataBsTarget={`#${tab.name}-tab-pane`}
@@ -336,6 +366,14 @@
                                 disabled={isThinking}
                             />
                         </div>
+                        <div class:hide={selectedTab !== 'instruction-coding'}>
+                            <InstructionCoding
+                                bind:selectedCodeScript={selectedCodeScript}
+                                bind:args={args}
+                                codeScripts={codeScripts}
+                                disabled={isThinking}
+                            />
+                        </div>
                     </CardBody>
                 </Card>
                 
diff --git a/src/routes/page/knowledge-base/common/search/advanced-search.svelte b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
index 2b4526a0..ff70cd71 100644
--- a/src/routes/page/knowledge-base/common/search/advanced-search.svelte
+++ b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
@@ -250,7 +250,7 @@
                             <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <!-- svelte-ignore a11y-no-static-element-interactions -->
                             <i
-                                class="bx bx-no-entry text-danger clickable"
+                                class="bx bxs-no-entry text-danger clickable"
                                 class:hide={items.length === 1}
                                 on:click={() => removeItem(idx)}
                             />
diff --git a/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte b/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
index 7129f58f..db55e9ce 100644
--- a/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
+++ b/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
@@ -324,7 +324,7 @@
                                     <!-- svelte-ignore a11y-click-events-have-key-events -->
                                     <!-- svelte-ignore a11y-no-static-element-interactions -->
                                     <i
-                                        class="bx bx-no-entry text-danger clickable"
+                                        class="bx bxs-no-entry text-danger clickable"
                                         on:click={() => removePayloadItem(idx)}
                                     />
                                 </div>

From f3576821a84354421959b943344fa5d3542a710f Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 6 Nov 2025 15:48:13 -0600
Subject: [PATCH 10/18] add rule statement

---
 src/lib/helpers/types/agentTypes.js           |  1 +
 .../agent-knowledge-base.svelte               |  4 +-
 .../agent-components/agent-mcp-tool.svelte    |  4 +-
 .../agent-components/agent-rule.svelte        | 43 ++++++++++++++-----
 .../agent-components/agent-utility.svelte     |  4 +-
 .../page/agent/[agentId]/agent-tabs.svelte    |  2 +-
 6 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 05bacc39..be941c2a 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -231,6 +231,7 @@
  * @property {boolean} disabled
  * @property {any?} [output_args]
  * @property {string?} [json_args]
+ * @property {string?} [statement]
  */
 
 
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 cb3879a6..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
@@ -205,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 fs-6" />
-                                </div>
+                                </div> -->
                             </div>
                         </div>
                         <div class="utility-value">
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 5f4c4f70..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
@@ -235,14 +235,14 @@
                                         on:change={e => toggleMcp(e, uid)}
                                     />
                                 </div>
-                                <div
+                                <!-- <div
                                     class="line-align-center fs-6"
                                     data-bs-toggle="tooltip"
                                     data-bs-placement="top"
                                     title="Uncheck to disable MCP"
                                 >
                                     <i class="bx bx-info-circle" />
-                                </div>
+                                </div> -->
                             </div>
                         </div>
                         <div class="utility-value">
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 05378bd7..da5689d0 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -77,7 +77,8 @@
                     name: x.trigger_name,
                     displayName: "",
                     output_args: x.output_args,
-                    json_args: x.json_args
+                    json_args: x.json_args,
+                    statement: x.statement
                 };
             }) || [];
             ruleOptions = [{
@@ -239,7 +240,8 @@
             return {
                 ...x,
                 output_args: found?.output_args,
-                json_args: found?.json_args
+                json_args: found?.json_args,
+                statement: found?.statement
             }
         }) || [];
     }
@@ -287,14 +289,33 @@
                                         on:change={e => toggleRule(e, uid)}
                                     />
                                 </div>
-                                <div
-                                    class="line-align-center fs-6"
-                                    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">
@@ -367,7 +388,7 @@
                                             <div class="line-align-center">
                                                 <i
                                                     class="bx bxs-info-circle text-primary fs-5"
-                                                    id={`rule-${uid}`}
+                                                    id={`rule-args-${uid}`}
                                                     data-bs-toggle="tooltip"
                                                     data-bs-placement="top"
                                                     title="Rule arguments"
@@ -375,7 +396,7 @@
                                                 <BotsharpTooltip
                                                     containerClasses="agent-utility-desc"
                                                     style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
-                                                    target={`rule-${uid}`}
+                                                    target={`rule-args-${uid}`}
                                                     placement="right"
                                                     persist
                                                 >
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 cdb06d24..40510dcb 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -321,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 fs-6" />
-                                </div>
+                                </div> -->
                             </div>
                         </div>
                         <div class="utility-value">
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index a585c546..145e5b2b 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -60,7 +60,7 @@
     ];
 
     onMount(() => {
-        selectedTab = tabs[0]?.name;
+        selectedTab = tabs[4]?.name;
     });
 
     /** @param {string} selected */

From 72eeb2c988bc6b56ab8c12800c30f0f7a4e3886d Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 6 Nov 2025 15:48:35 -0600
Subject: [PATCH 11/18] revert

---
 src/routes/page/agent/[agentId]/agent-tabs.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index 145e5b2b..a585c546 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -60,7 +60,7 @@
     ];
 
     onMount(() => {
-        selectedTab = tabs[4]?.name;
+        selectedTab = tabs[0]?.name;
     });
 
     /** @param {string} selected */

From a10ea02a28cf8594d4ce91f08d8d73622da64533 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 11 Nov 2025 17:33:22 -0600
Subject: [PATCH 12/18] temp save

---
 src/lib/common/ProfileDropdown.svelte         |   4 +-
 src/lib/helpers/http.js                       | 147 +++++++++++++++---
 src/lib/helpers/store.js                      |  28 +++-
 src/lib/services/api-endpoints.js             |   1 +
 src/lib/services/auth-service.js              |  38 ++++-
 .../(authentication)/login/+page.svelte       |  14 +-
 .../(authentication)/register/+page.svelte    |   2 +-
 .../[conversationId]/chat-box.svelte          |  10 +-
 8 files changed, 205 insertions(+), 39 deletions(-)

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/helpers/http.js b/src/lib/helpers/http.js
index 19e8bc21..acf54bf3 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -1,17 +1,99 @@
 import axios from 'axios';
 import { getUserStore, globalErrorStore, loaderStore } from '$lib/helpers/store.js';
+import { renewToken } from '$lib/services/auth-service';
+
+// Refresh handling state
+let isRefreshing = false;
+
+/** @type {{config: import('axios').InternalAxiosRequestConfig, resolve: (value:any)=>void, reject: (reason?: any)=>void}[]} */
+const failedQueue = [];
+
+/** @type {{config: import('axios').InternalAxiosRequestConfig, resolve: (value:any)=>void, reject: (reason?: any)=>void}[]} */
+const pendingRequestQueue = [];
+
+/**
+ * Wrap renewToken into a Promise that resolves with the new access token string
+ * @param {string} token
+ * @returns {Promise<string>}
+ */
+function refreshAccessToken(token) {
+    return new Promise((resolve, reject) => {
+        renewToken(token, (newToken) => resolve(newToken), () => reject(new Error('Failed to refresh token')));
+    });
+}
+
+/**
+ * Retry queued requests sequentially with the provided token
+ * @param {string} newToken
+ * @returns {Promise<void>}
+ */
+function processQueueSequentially(newToken) {
+    let chain = Promise.resolve();
+    while (failedQueue.length) {
+        const item = failedQueue.shift();
+        if (!item) continue;
+        const { config, resolve, reject } = item;
+        // Ensure headers exists; Axios may use AxiosHeaders type
+        // @ts-ignore
+        config.headers = config.headers || {};
+        // @ts-ignore
+        config.headers.Authorization = `Bearer ${newToken}`;
+        chain = chain.then(() => axios(config).then(resolve).catch(reject));
+    }
+    return chain;
+}
 
 // Add a request interceptor to attach authentication tokens or headers
 axios.interceptors.request.use(
     (config) => {
-        // Add your authentication logic here
         const user = getUserStore();
         if (!skipLoader(config)) {
             loaderStore.set(true);
         }
-        // For example, attach an authentication token to the request headers
-        if (user.token)
+
+        // Proactive token refresh: if expired or a refresh is in progress,
+        // queue this request until a new token is available
+        if (isTokenExired() || isRefreshing) {
+            return new Promise((resolve, reject) => {
+                pendingRequestQueue.push({ config, resolve, reject });
+
+                if (!isRefreshing) {
+                    isRefreshing = true;
+                    refreshAccessToken(user?.token || '')
+                        .then((newToken) => {
+                            isRefreshing = false;
+                            // Release queued requests with the new token
+                            while (pendingRequestQueue.length) {
+                                const item = pendingRequestQueue.shift();
+                                if (!item) continue;
+                                const { config: cfg, resolve: res } = item;
+                                // @ts-ignore
+                                cfg.headers = cfg.headers || {};
+                                // @ts-ignore
+                                cfg.headers.Authorization = `Bearer ${newToken}`;
+                                res(cfg);
+                            }
+                        })
+                        .catch((err) => {
+                            isRefreshing = false;
+                            // Reject queued requests and redirect to login
+                            while (pendingRequestQueue.length) {
+                                const item = pendingRequestQueue.shift();
+                                if (item) item.reject(err);
+                            }
+                            redirectToLogin();
+                        });
+                }
+            });
+        }
+
+        // Attach current token if present
+        if (user.token) {
+            // @ts-ignore
+            config.headers = config.headers || {};
+            // @ts-ignore
             config.headers.Authorization = `Bearer ${user.token}`;
+        }
         return config;
     },
     (error) => {
@@ -25,23 +107,46 @@ 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 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)) {
+        const originalRequest = error?.config;
+
+        // If token expired or 401 returned, attempt a single token refresh and
+        // retry failed requests in sequence.
+        if ((error?.response?.status === 401 || isTokenExired()) && originalRequest && !originalRequest._retry) {
+            originalRequest._retry = true;
+
+            return new Promise((resolve, reject) => {
+                // Push the current request into the queue
+                failedQueue.push({ config: originalRequest, resolve, reject });
+
+                // Start refresh if not already in progress
+                if (!isRefreshing) {
+                    isRefreshing = true;
+                    const user = getUserStore();
+
+                    refreshAccessToken(user?.token || '')
+                        .then((newToken) => {
+                            isRefreshing = false;
+                            return processQueueSequentially(newToken);
+                        })
+                        .catch((err) => {
+                            isRefreshing = false;
+
+                            // Reject all queued requests
+                            while (failedQueue.length) {
+                                const item = failedQueue.shift();
+                                if (item) item.reject(err);
+                            }
+
+                            redirectToLogin();
+                            throw err;
+                        });
+                }
+            });
+        } else if (!skipGlobalError(originalRequest)) {
             globalErrorStore.set(true);
             setTimeout(() => {
                 globalErrorStore.set(false);
@@ -53,6 +158,10 @@ axios.interceptors.response.use(
     }
 );
 
+function isTokenExired() {
+    const user = getUserStore();
+    return Date.now() / 1000 > user.expires;
+}
 
 function redirectToLogin() {
     const curUrl = window.location.pathname + window.location.search;
@@ -155,7 +264,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'),
@@ -201,7 +310,7 @@ export function replaceUrl(url, args) {
 
 /**
  * Replace new line as <br>
- * @param {string} text 
+ * @param {string} text
  * @returns string
  */
 export function replaceNewLine(text) {
@@ -210,7 +319,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/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 17b81a9b..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`,
diff --git a/src/lib/services/auth-service.js b/src/lib/services/auth-service.js
index 692d680b..1656d889 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) {
+    const headers = {
+        Authorization: `Bearer ${token}`,
+    };
+
+    await fetch(endpoints.renewTokenUrl, {
+        method: 'POST',
+        headers: headers,
+    }).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/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]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index af4db082..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,
@@ -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();
 	}
 

From 6198d4c16ba088cab615fbc4862210678963fbd9 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Tue, 11 Nov 2025 21:55:46 -0600
Subject: [PATCH 13/18] add renew token

---
 src/lib/helpers/http.js             | 162 +++++++++++-----------------
 src/lib/services/signalr-service.js |   2 +-
 2 files changed, 64 insertions(+), 100 deletions(-)

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index acf54bf3..5b247e83 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -1,15 +1,14 @@
 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';
 
-// Refresh handling state
-let isRefreshing = false;
 
-/** @type {{config: import('axios').InternalAxiosRequestConfig, resolve: (value:any)=>void, reject: (reason?: any)=>void}[]} */
-const failedQueue = [];
+/** @type {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}[]} */
+const retryQueue = [];
 
-/** @type {{config: import('axios').InternalAxiosRequestConfig, resolve: (value:any)=>void, reject: (reason?: any)=>void}[]} */
-const pendingRequestQueue = [];
+// Refresh handling state
+let isRefreshingToken = false;
 
 /**
  * Wrap renewToken into a Promise that resolves with the new access token string
@@ -22,76 +21,17 @@ function refreshAccessToken(token) {
     });
 }
 
-/**
- * Retry queued requests sequentially with the provided token
- * @param {string} newToken
- * @returns {Promise<void>}
- */
-function processQueueSequentially(newToken) {
-    let chain = Promise.resolve();
-    while (failedQueue.length) {
-        const item = failedQueue.shift();
-        if (!item) continue;
-        const { config, resolve, reject } = item;
-        // Ensure headers exists; Axios may use AxiosHeaders type
-        // @ts-ignore
-        config.headers = config.headers || {};
-        // @ts-ignore
-        config.headers.Authorization = `Bearer ${newToken}`;
-        chain = chain.then(() => axios(config).then(resolve).catch(reject));
-    }
-    return chain;
-}
 
 // Add a request interceptor to attach authentication tokens or headers
 axios.interceptors.request.use(
     (config) => {
+        // Add your authentication logic here
         const user = getUserStore();
         if (!skipLoader(config)) {
             loaderStore.set(true);
         }
-
-        // Proactive token refresh: if expired or a refresh is in progress,
-        // queue this request until a new token is available
-        if (isTokenExired() || isRefreshing) {
-            return new Promise((resolve, reject) => {
-                pendingRequestQueue.push({ config, resolve, reject });
-
-                if (!isRefreshing) {
-                    isRefreshing = true;
-                    refreshAccessToken(user?.token || '')
-                        .then((newToken) => {
-                            isRefreshing = false;
-                            // Release queued requests with the new token
-                            while (pendingRequestQueue.length) {
-                                const item = pendingRequestQueue.shift();
-                                if (!item) continue;
-                                const { config: cfg, resolve: res } = item;
-                                // @ts-ignore
-                                cfg.headers = cfg.headers || {};
-                                // @ts-ignore
-                                cfg.headers.Authorization = `Bearer ${newToken}`;
-                                res(cfg);
-                            }
-                        })
-                        .catch((err) => {
-                            isRefreshing = false;
-                            // Reject queued requests and redirect to login
-                            while (pendingRequestQueue.length) {
-                                const item = pendingRequestQueue.shift();
-                                if (item) item.reject(err);
-                            }
-                            redirectToLogin();
-                        });
-                }
-            });
-        }
-
-        // Attach current token if present
+        // Attach an authentication token to the request headers
         if (user.token) {
-            // @ts-ignore
-            config.headers = config.headers || {};
-            // @ts-ignore
             config.headers.Authorization = `Bearer ${user.token}`;
         }
         return config;
@@ -105,7 +45,6 @@ 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);
         return response;
     },
@@ -113,38 +52,10 @@ axios.interceptors.response.use(
         loaderStore.set(false);
         const originalRequest = error?.config;
 
-        // If token expired or 401 returned, attempt a single token refresh and
-        // retry failed requests in sequence.
-        if ((error?.response?.status === 401 || isTokenExired()) && originalRequest && !originalRequest._retry) {
-            originalRequest._retry = true;
-
+        // If token expired or 401 returned, attempt a single token refresh and retry requests in queue.
+        if ((error?.response?.status === 401 || isTokenExired()) && originalRequest) {
             return new Promise((resolve, reject) => {
-                // Push the current request into the queue
-                failedQueue.push({ config: originalRequest, resolve, reject });
-
-                // Start refresh if not already in progress
-                if (!isRefreshing) {
-                    isRefreshing = true;
-                    const user = getUserStore();
-
-                    refreshAccessToken(user?.token || '')
-                        .then((newToken) => {
-                            isRefreshing = false;
-                            return processQueueSequentially(newToken);
-                        })
-                        .catch((err) => {
-                            isRefreshing = false;
-
-                            // Reject all queued requests
-                            while (failedQueue.length) {
-                                const item = failedQueue.shift();
-                                if (item) item.reject(err);
-                            }
-
-                            redirectToLogin();
-                            throw err;
-                        });
-                }
+                enqueue({ config: originalRequest, resolve, reject });
             });
         } else if (!skipGlobalError(originalRequest)) {
             globalErrorStore.set(true);
@@ -158,6 +69,59 @@ axios.interceptors.response.use(
     }
 );
 
+/** 
+ * @param {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}} retryItem 
+ */
+function enqueue(retryItem) {
+    // Push the current request into the queue
+    retryQueue.push({ ...retryItem });
+
+    // Start refresh token
+    if (!isRefreshingToken) {
+        isRefreshingToken = true;
+        const user = getUserStore();
+
+        refreshAccessToken(user?.token || '')
+            .then((newToken) => {
+                const promise = dequeue(newToken);
+                isRefreshingToken = false;
+                return promise;
+            })
+            .catch((err) => {
+                // Reject all queued requests
+                while (retryQueue.length > 0) {
+                    const item = retryQueue.shift();
+                    if (item) {
+                        item.reject(err);
+                    }
+                }
+                isRefreshingToken = false;
+                redirectToLogin();
+            });
+    }
+}
+
+/**
+ * Retry queued requests sequentially
+ * @param {string} newToken
+ * @returns {Promise<void>}
+ */
+function dequeue(newToken) {
+    let chain = Promise.resolve();
+    while (retryQueue.length > 0) {
+        const item = retryQueue.shift();
+        if (!item) continue;
+        const { config, resolve, reject } = item;
+        // @ts-ignore
+        config.headers = config.headers || {};
+        // @ts-ignore
+        config.headers.Authorization = `Bearer ${newToken}`;
+        chain = chain.then(() => delay(20))
+                     .then(() => { axios(config).then(resolve).catch(reject); });
+    }
+    return chain;
+}
+
 function isTokenExired() {
     const user = getUserStore();
     return Date.now() / 1000 > user.expires;
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

From 03a63b903368c9e77ba9a23897ecafcbe5a759b3 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Tue, 11 Nov 2025 21:59:31 -0600
Subject: [PATCH 14/18] minor change

---
 src/lib/helpers/http.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 5b247e83..143bcc8f 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -83,11 +83,12 @@ function enqueue(retryItem) {
 
         refreshAccessToken(user?.token || '')
             .then((newToken) => {
-                const promise = dequeue(newToken);
                 isRefreshingToken = false;
+                const promise = dequeue(newToken);
                 return promise;
             })
             .catch((err) => {
+                isRefreshingToken = false;
                 // Reject all queued requests
                 while (retryQueue.length > 0) {
                     const item = retryQueue.shift();
@@ -95,7 +96,6 @@ function enqueue(retryItem) {
                         item.reject(err);
                     }
                 }
-                isRefreshingToken = false;
                 redirectToLogin();
             });
     }

From 506359edb4b3179df4e7a1e57793207b1ac081bb Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Tue, 11 Nov 2025 22:47:08 -0600
Subject: [PATCH 15/18] refine

---
 src/lib/helpers/http.js | 53 +++++++++++++++++++++++------------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 143bcc8f..e5337b07 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -50,10 +50,12 @@ axios.interceptors.response.use(
     },
     (error) => {
         loaderStore.set(false);
-        const originalRequest = error?.config;
+        const originalRequest = error?.config || {};
+        const user = getUserStore();
 
         // If token expired or 401 returned, attempt a single token refresh and retry requests in queue.
-        if ((error?.response?.status === 401 || isTokenExired()) && originalRequest) {
+        if ((error?.response?.status === 401 || isTokenExired(user.expires)) && originalRequest && !originalRequest._retried) {
+            originalRequest._retried = true;
             return new Promise((resolve, reject) => {
                 enqueue({ config: originalRequest, resolve, reject });
             });
@@ -78,26 +80,29 @@ function enqueue(retryItem) {
 
     // Start refresh token
     if (!isRefreshingToken) {
-        isRefreshingToken = true;
         const user = getUserStore();
-
-        refreshAccessToken(user?.token || '')
-            .then((newToken) => {
-                isRefreshingToken = false;
-                const promise = dequeue(newToken);
-                return promise;
-            })
-            .catch((err) => {
-                isRefreshingToken = false;
-                // Reject all queued requests
-                while (retryQueue.length > 0) {
-                    const item = retryQueue.shift();
-                    if (item) {
-                        item.reject(err);
+        if (!isTokenExired(user.expires)) {
+            dequeue(user.token);
+        } else {
+            isRefreshingToken = true;
+            refreshAccessToken(user?.token || '')
+                .then((newToken) => {
+                    isRefreshingToken = false;
+                    const promise = dequeue(newToken);
+                    return promise;
+                })
+                .catch((err) => {
+                    isRefreshingToken = false;
+                    // Reject all queued requests
+                    while (retryQueue.length > 0) {
+                        const item = retryQueue.shift();
+                        if (item) {
+                            item.reject(err);
+                        }
                     }
-                }
-                redirectToLogin();
-            });
+                    redirectToLogin();
+                });
+        }
     }
 }
 
@@ -122,9 +127,11 @@ function dequeue(newToken) {
     return chain;
 }
 
-function isTokenExired() {
-    const user = getUserStore();
-    return Date.now() / 1000 > user.expires;
+/**
+ * @param {number} expires
+ */
+function isTokenExired(expires) {
+    return Date.now() / 1000 > expires;
 }
 
 function redirectToLogin() {

From e4a3b7da222d881a401f04b19123302c0cb4b705 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 12 Nov 2025 15:54:38 -0600
Subject: [PATCH 16/18] refine request queue

---
 src/lib/helpers/http.js                      | 162 ++++++++++---------
 src/lib/helpers/types/instructTypes.js       |   1 +
 src/lib/services/auth-service.js             |   7 +-
 src/lib/services/instruct-service.js         |  17 --
 src/lib/services/logging-service.js          |  18 +++
 src/routes/page/instruction/log/+page.svelte |  10 +-
 6 files changed, 116 insertions(+), 99 deletions(-)

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index e5337b07..80ef2dda 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -4,23 +4,92 @@ import { renewToken } from '$lib/services/auth-service';
 import { delay } from './utils/common';
 
 
-/** @type {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}[]} */
-const retryQueue = [];
-
-// Refresh handling state
-let isRefreshingToken = false;
+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')));
+        });
+    },
 
-/**
- * Wrap renewToken into a Promise that resolves with the new access token string
- * @param {string} token
- * @returns {Promise<string>}
- */
-function 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(
@@ -54,10 +123,13 @@ axios.interceptors.response.use(
         const user = getUserStore();
 
         // 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) {
+        if ((error?.response?.status === 401 || isTokenExired(user.expires))
+            && originalRequest
+            && !originalRequest._retried
+            && !originalRequest.url.includes('renew-token')) {
             originalRequest._retried = true;
             return new Promise((resolve, reject) => {
-                enqueue({ config: originalRequest, resolve, reject });
+                retryQueue.enqueue({ config: originalRequest, resolve, reject });
             });
         } else if (!skipGlobalError(originalRequest)) {
             globalErrorStore.set(true);
@@ -71,62 +143,6 @@ axios.interceptors.response.use(
     }
 );
 
-/** 
- * @param {{config: import('axios').InternalAxiosRequestConfig, resolve: (value: any) => void, reject: (reason?: any) => void}} retryItem 
- */
-function enqueue(retryItem) {
-    // Push the current request into the queue
-    retryQueue.push({ ...retryItem });
-
-    // Start refresh token
-    if (!isRefreshingToken) {
-        const user = getUserStore();
-        if (!isTokenExired(user.expires)) {
-            dequeue(user.token);
-        } else {
-            isRefreshingToken = true;
-            refreshAccessToken(user?.token || '')
-                .then((newToken) => {
-                    isRefreshingToken = false;
-                    const promise = dequeue(newToken);
-                    return promise;
-                })
-                .catch((err) => {
-                    isRefreshingToken = false;
-                    // Reject all queued requests
-                    while (retryQueue.length > 0) {
-                        const item = retryQueue.shift();
-                        if (item) {
-                            item.reject(err);
-                        }
-                    }
-                    redirectToLogin();
-                });
-        }
-    }
-}
-
-/**
- * Retry queued requests sequentially
- * @param {string} newToken
- * @returns {Promise<void>}
- */
-function dequeue(newToken) {
-    let chain = Promise.resolve();
-    while (retryQueue.length > 0) {
-        const item = retryQueue.shift();
-        if (!item) continue;
-        const { config, resolve, reject } = item;
-        // @ts-ignore
-        config.headers = config.headers || {};
-        // @ts-ignore
-        config.headers.Authorization = `Bearer ${newToken}`;
-        chain = chain.then(() => delay(20))
-                     .then(() => { axios(config).then(resolve).catch(reject); });
-    }
-    return chain;
-}
-
 /**
  * @param {number} expires
  */
diff --git a/src/lib/helpers/types/instructTypes.js b/src/lib/helpers/types/instructTypes.js
index b6ed4b3f..b59f8507 100644
--- a/src/lib/helpers/types/instructTypes.js
+++ b/src/lib/helpers/types/instructTypes.js
@@ -28,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]
diff --git a/src/lib/services/auth-service.js b/src/lib/services/auth-service.js
index 1656d889..a5068138 100644
--- a/src/lib/services/auth-service.js
+++ b/src/lib/services/auth-service.js
@@ -46,13 +46,10 @@ export async function getToken(email, password, onSucceed, onError) {
  * @param {(() => void) | null} [onError]
  */
 export async function renewToken(token, onSucceed = null, onError = null) {
-    const headers = {
-        Authorization: `Bearer ${token}`,
-    };
-
     await fetch(endpoints.renewTokenUrl, {
         method: 'POST',
-        headers: headers,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ refresh_token: token, access_token: token }),
     }).then(response => {
         if (response.ok) {
             return response.json();
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/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index 68b89c99..790b2d72 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;
@@ -60,7 +62,7 @@
 		agentIds: [],
 		providers: [],
 		models: [],
-        template: '',
+        similarTemplate: '',
 		timeRange: TimeRange.Today,
 		states: []
 	};
@@ -244,7 +246,7 @@
             agentIds: agentIds,
             providers: providers,
             models: models,
-            templateNames: template ? [template] : [],
+            similarTemplateName: template,
 			startTime: innerTimeRange.startTime,
 			endTime: innerTimeRange.endTime,
 			states: states

From b28edfd1791090b173c6d38a972dccbdffa1e8bf Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 12 Nov 2025 16:09:32 -0600
Subject: [PATCH 17/18] revert

---
 src/routes/page/instruction/log/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index 790b2d72..d5f5c891 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -62,7 +62,7 @@
 		agentIds: [],
 		providers: [],
 		models: [],
-        similarTemplate: '',
+        template: '',
 		timeRange: TimeRange.Today,
 		states: []
 	};
@@ -246,7 +246,7 @@
             agentIds: agentIds,
             providers: providers,
             models: models,
-            similarTemplateName: template,
+            templateNames: template ? [template] : [],
 			startTime: innerTimeRange.startTime,
 			endTime: innerTimeRange.endTime,
 			states: states

From a3f2e5bdcd0b7a84610548e7c224f5617bb7c182 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 12 Nov 2025 16:38:23 -0600
Subject: [PATCH 18/18] add auth header

---
 src/lib/helpers/http.js          | 2 +-
 src/lib/services/auth-service.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 80ef2dda..af24706a 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -67,7 +67,7 @@ const retryQueue = {
             if (!item?.config) {
                 continue;
             }
-            
+
             const { config } = item;
             // @ts-ignore
             config.headers = config.headers || {};
diff --git a/src/lib/services/auth-service.js b/src/lib/services/auth-service.js
index a5068138..bc7543de 100644
--- a/src/lib/services/auth-service.js
+++ b/src/lib/services/auth-service.js
@@ -48,7 +48,10 @@ export async function getToken(email, password, onSucceed, onError) {
 export async function renewToken(token, onSucceed = null, onError = null) {
     await fetch(endpoints.renewTokenUrl, {
         method: 'POST',
-        headers: { "Content-Type": "application/json" },
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        },
         body: JSON.stringify({ refresh_token: token, access_token: token }),
     }).then(response => {
         if (response.ok) {