From 3b7e1b7761260cd6f3a56d27cf4fa0e5c2630a78 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 26 May 2026 11:05:00 -0500
Subject: [PATCH] refine instruction testing

---
 src/lib/common/modals/StateModal.svelte       |  2 +-
 .../instruction-agent.svelte                  |  8 +-
 .../instruction-llm.svelte                    | 95 ++++++++++++++++++-
 .../instruction-state.svelte                  |  2 +-
 .../page/instruction/testing/+page.svelte     | 50 +++++++---
 5 files changed, 138 insertions(+), 19 deletions(-)

diff --git a/src/lib/common/modals/StateModal.svelte b/src/lib/common/modals/StateModal.svelte
index ee6fecdb..c489007c 100644
--- a/src/lib/common/modals/StateModal.svelte
+++ b/src/lib/common/modals/StateModal.svelte
@@ -217,7 +217,7 @@
                 <div class="min-w-0" style="flex: 0.4;">
                     {#if idx === 0}
                     <label for={`stm-key-${idx}`} class="stm-label">
-                        {`Key ${validateKey ? '*' : ''}`}
+                        {`Name ${validateKey ? '*' : ''}`}
                     </label>
                     {/if}
                     <input
diff --git a/src/routes/page/instruction/instruction-components/instruction-agent.svelte b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
index 195418a9..08edf581 100644
--- a/src/routes/page/instruction/instruction-components/instruction-agent.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
@@ -5,7 +5,7 @@
      * @type {{
      *   agents?: import('$agentTypes').AgentModel[],
      *   disabled?: boolean,
-     *   onSelectAgent?: (detail: { agent: import('$agentTypes').AgentModel | null, template: any }) => void
+     *   onSelectAgent?: (detail: { agent: import('$agentTypes').AgentModel | null, template: any, llmConfig: any }) => void
      * }}
      */
     let {
@@ -45,7 +45,8 @@
             name: x.name,
             label: x.name,
             value: x.name,
-            content: x.content
+            content: x.content,
+            llm_config: x.llm_config || null
         })) || [];
 
         fireSelectAgent();
@@ -62,7 +63,8 @@
     function fireSelectAgent() {
         onSelectAgent?.({
             agent: selectedAgent || null,
-            template: selectedTemplate || null
+            template: selectedTemplate || null,
+            llmConfig: selectedTemplate?.llm_config || selectedAgent?.llm_config || null
         });
     }
 </script>
diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
index fb4e02f0..5c2157bb 100644
--- a/src/routes/page/instruction/instruction-components/instruction-llm.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -1,5 +1,7 @@
 <script>
     import Select from '$lib/common/dropdowns/Select.svelte';
+    import { INTEGER_REGEX } from '$lib/helpers/constants';
+    import { ReasoningEffortLevel } from '$lib/helpers/enums';
 
     /**
      * @type {{
@@ -7,7 +9,9 @@
      *   disabled?: boolean,
      *   selectedProvider?: import('$commonTypes').LlmConfig | null | undefined,
      *   selectedModel?: string | null,
-     *   onSelectLlm?: (detail: { provider: import('$commonTypes').LlmConfig | null, model: string | null }) => void
+     *   selectedReasoningEffortLevel?: string | null,
+     *   selectedMaxOutputTokens?: number | null,
+     *   onSelectLlm?: (detail: { provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null }) => void
      * }}
      */
     let {
@@ -15,9 +19,17 @@
         disabled = false,
         selectedProvider = $bindable(null),
         selectedModel = $bindable(null),
+        selectedReasoningEffortLevel = $bindable(null),
+        selectedMaxOutputTokens = $bindable(null),
         onSelectLlm
     } = $props();
 
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    const defaultReasonLevelOptions = Object.entries(ReasoningEffortLevel).map(([k, v]) => ({
+        value: v,
+        label: v
+    }));
+
     /** @type {import('$commonTypes').LabelValuePair[]} */
     let providerOptions = $derived(
         llmConfigs?.map(x => ({
@@ -34,12 +46,32 @@
         }))?.sort((a, b) => a.label.localeCompare(b.label)) || []
     );
 
+    let selectedModelSetting = $derived(
+        selectedProvider?.models?.find(x => x.name === selectedModel) || null
+    );
+
+    let isReasoningModel = $derived(selectedModelSetting?.reasoning != null);
+
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    let reasoningLevelOptions = $derived.by(() => {
+        if (!isReasoningModel) {
+            return defaultReasonLevelOptions;
+        }
+        const customOptions = selectedModelSetting?.reasoning?.parameters?.EffortLevel?.options;
+        if (customOptions?.length > 0) {
+            // @ts-ignore
+            return customOptions.map(x => ({ value: x, label: x }));
+        }
+        return defaultReasonLevelOptions;
+    });
+
     /** @param {any} e */
     function selectProvider(e) {
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
         selectedProvider = selectedValues.length > 0 ? llmConfigs?.find(x => x.provider === selectedValues[0]) || null : null;
         selectedModel = null;
+        selectedReasoningEffortLevel = null;
         fireSelectLlm();
     }
 
@@ -48,13 +80,39 @@
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
         selectedModel = selectedValues.length > 0 ? modelOptions.find(x => x.value === selectedValues[0])?.value : null;
+        selectedReasoningEffortLevel = null;
+        fireSelectLlm();
+    }
+
+    /** @param {any} e */
+    function selectReasoningEffortLevel(e) {
+        // @ts-ignore
+        const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
+        selectedReasoningEffortLevel = selectedValues.length > 0 ? selectedValues[0] : null;
+        fireSelectLlm();
+    }
+
+    /** @param {any} e */
+    function changeMaxOutputTokens(e) {
+        const value = Number(e.target.value) || 0;
+        selectedMaxOutputTokens = value > 0 ? value : null;
         fireSelectLlm();
     }
 
+    /** @param {any} e */
+    function validateIntegerInput(e) {
+        const reg = new RegExp(INTEGER_REGEX, 'g');
+        if (e.key !== 'Backspace' && !reg.test(e.key)) {
+            e.preventDefault();
+        }
+    }
+
     function fireSelectLlm() {
         onSelectLlm?.({
             provider: selectedProvider || null,
-            model: selectedModel
+            model: selectedModel,
+            reasoning_effort_level: selectedReasoningEffortLevel || null,
+            max_output_tokens: selectedMaxOutputTokens || null
         });
     }
 </script>
@@ -92,4 +150,37 @@
             onselect={e => selectModel(e)}
         />
     </div>
+
+    <div>
+        <label for="max-output-tokens" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-counter text-sm leading-none"></i>
+            Max output tokens
+        </label>
+        <input
+            id="max-output-tokens"
+            type="number"
+            class="form-control block w-full"
+            disabled={disabled}
+            value={selectedMaxOutputTokens || ''}
+            onkeydown={e => validateIntegerInput(e)}
+            onchange={e => changeMaxOutputTokens(e)}
+        />
+    </div>
+
+    {#if isReasoningModel}
+    <div>
+        <label for="reasoning-effort-select" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-brain text-sm leading-none"></i>
+            Reasoning level
+        </label>
+        <Select
+            tag={'reasoning-effort-select'}
+            placeholder={'Select a level'}
+            disabled={disabled}
+            selectedValues={selectedReasoningEffortLevel ? [selectedReasoningEffortLevel] : []}
+            options={reasoningLevelOptions}
+            onselect={e => selectReasoningEffortLevel(e)}
+        />
+    </div>
+    {/if}
 </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 6e250a07..f6b82957 100644
--- a/src/routes/page/instruction/instruction-components/instruction-state.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-state.svelte
@@ -37,7 +37,7 @@
 
 <div class="flex flex-col py-3">
     <div class="grid grid-cols-[1fr_1fr_auto] gap-2 px-1 pb-1">
-        <div class="text-xs font-semibold uppercase tracking-wider text-primary">{'Key'}</div>
+        <div class="text-xs font-semibold uppercase tracking-wider text-primary">{'Name'}</div>
         <div class="text-xs font-semibold uppercase tracking-wider text-primary">{'Value'}</div>
         <div class="w-5"></div>
     </div>
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index e167b432..2b11427a 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -51,6 +51,12 @@
     /** @type {string | null} */
     let selectedModel = $state(null);
 
+    /** @type {string | null} */
+    let selectedReasoningEffortLevel = $state(null);
+
+    /** @type {number | null} */
+    let selectedMaxOutputTokens = $state(null);
+
     /** @type {string | null} */
     let selectedTemplate = $state(null);
 
@@ -102,7 +108,14 @@
         isThinking = true;
         requestDone = false;
         elapsedTime = '';
-        const formattedStates = formatKeyValues(states);
+        const clonedStates = [
+            { key: 'reasoning_effort_level', value: selectedReasoningEffortLevel ? selectedReasoningEffortLevel : 'disable' }
+        ];
+        if (selectedMaxOutputTokens && selectedMaxOutputTokens > 0) {
+            clonedStates.push({ key: 'max_tokens', value: selectedMaxOutputTokens.toString() });
+        }
+
+        const formattedStates = formatKeyValues(states, clonedStates);
         const formatedArgs = formatKeyValues(args);
         const start = new Date();
         const agentId = selectedAgent?.id || '';
@@ -113,10 +126,10 @@
             model: selectedModel,
             template: selectedTemplate,
             states: formattedStates,
-            codeOptions: {
+            codeOptions: selectedCodeScript?.name ? {
                 script_name: selectedCodeScript?.name,
                 arguments: formatedArgs
-            }
+            } : null
         }).then(res => {
             result = res?.text || '';
         }).finally(() => {
@@ -127,14 +140,20 @@
         });
     }
 
-    /** @param {import('$commonTypes').KeyValuePair[]} kvs */
-    function formatKeyValues(kvs) {
-        return kvs?.filter(x => !!util.trim(x.key) && !!util.trim(x.value)).map(x => {
+    /**
+     * @param {import('$commonTypes').KeyValuePair[]} kvs
+     * @param {import('$commonTypes').KeyValuePair[]} [defaults]
+     */
+    function formatKeyValues(kvs, defaults) {
+        const primary = kvs || [];
+        const primaryKeys = new Set(primary.map(x => util.trim(x.key)).filter(k => !!k));
+        const merged = [...(defaults || []).filter(x => !primaryKeys.has(util.trim(x.key))), ...primary];
+        return merged.filter(x => !!util.trim(x.key) && !!util.trim(x.value)).map(x => {
             return {
                 key: util.trim(x.key),
                 value: util.trim(x.value)
             };
-        }) || [];
+        });
     }
 
     /** @param {KeyboardEvent} e */
@@ -156,7 +175,7 @@
         elapsedTime = ''
     }
 
-    /** @param {{ agent: import('$agentTypes').AgentModel | null, template: any }} detail */
+    /** @param {{ agent: import('$agentTypes').AgentModel | null, template: any, llmConfig: any }} detail */
     function onAgentSelected(detail) {
         selectedAgent = detail.agent || null;
         let localText = selectedAgent?.instruction;
@@ -168,10 +187,13 @@
         }
 
         instruction = localText || '';
-        const providerName = selectedAgent?.llm_config?.provider || null;
-        const modelName = selectedAgent?.llm_config?.model || null;
+        const llmConfig = detail?.llmConfig || null;
+        const providerName = llmConfig?.provider || null;
+        const modelName = llmConfig?.model || null;
         selectedProvider = llmConfigs?.find(x => x.provider === providerName) || null;
         selectedModel = modelName;
+        selectedReasoningEffortLevel = llmConfig?.reasoning_effort_level || null;
+        selectedMaxOutputTokens = llmConfig?.max_output_tokens || null;
 
         if (selectedAgent?.id) {
             initAgentCodeScripts(selectedAgent.id);
@@ -180,10 +202,12 @@
         }
     }
 
-    /** @param {{ provider: import('$commonTypes').LlmConfig | null, model: string | null }} detail */
+    /** @param {{ provider: import('$commonTypes').LlmConfig | null, model: string | null, reasoning_effort_level: string | null, max_output_tokens: number | null }} detail */
     function onLlmSelected(detail) {
         selectedProvider = detail.provider || null;
         selectedModel = detail.model || '';
+        selectedReasoningEffortLevel = detail.reasoning_effort_level || null;
+        selectedMaxOutputTokens = detail.max_output_tokens || null;
     }
 
     /** @param {string} agentId */
@@ -246,7 +270,7 @@
                     </span>
                 {/if}
             </div>
-            <div>{text?.length || 0}/{formatNumber(maxLength)}</div>
+            <div>{formatNumber(text?.length || 0)}/{formatNumber(maxLength)}</div>
         </div>
 
         <div class="mt-3 flex justify-end">
@@ -378,6 +402,8 @@
                         disabled={isThinking}
                         bind:selectedProvider={selectedProvider}
                         bind:selectedModel={selectedModel}
+                        bind:selectedReasoningEffortLevel={selectedReasoningEffortLevel}
+                        bind:selectedMaxOutputTokens={selectedMaxOutputTokens}
                         onSelectLlm={detail => onLlmSelected(detail)}
                     />
                 </div>