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 1/2] 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>

From 422d5b057eac12997a896aa11c4f49c478b3f81b Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Wed, 27 May 2026 19:50:41 -0500
Subject: [PATCH 2/2] refine stylings

---
 .../dropdowns/FullScreenDropdown.svelte       |   2 +-
 .../common/dropdowns/LanguageDropdown.svelte  |   4 +-
 .../dropdowns/NotificationDropdown.svelte     |   2 +-
 .../common/dropdowns/ProfileDropdown.svelte   |   4 +-
 src/lib/common/shared/InPlaceEdit.svelte      | 116 +++++++++++++++++-
 src/lib/styles/pages/_agent.scss              |  12 ++
 src/routes/VerticalLayout/Header.svelte       |   2 +-
 .../instant-log/latest-state-log.svelte       |   1 +
 .../conversation-state-log-element.svelte     |   1 +
 .../agent-components/agent-overview.svelte    |   4 +-
 .../[conversationId]/conv-states.svelte       |   1 +
 src/routes/page/instruction/log/+page.svelte  |   2 +-
 .../page/instruction/log/log-item.svelte      |   1 +
 .../common/table/table-item.svelte            |   1 +
 14 files changed, 138 insertions(+), 15 deletions(-)

diff --git a/src/lib/common/dropdowns/FullScreenDropdown.svelte b/src/lib/common/dropdowns/FullScreenDropdown.svelte
index bd7ba062..9a549bcd 100644
--- a/src/lib/common/dropdowns/FullScreenDropdown.svelte
+++ b/src/lib/common/dropdowns/FullScreenDropdown.svelte
@@ -45,7 +45,7 @@
 <div class="ms-1 hidden lg:inline-block">
 	<button
 		onclick={toggleFullscreen}
-		class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+		class="inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 		aria-label="Toggle fullscreen"
 	>
 		<i class={isFullScreenMode ? 'bx bx-fullscreen text-[22px]' : 'bx bx-exit-fullscreen text-[22px]'}></i>
diff --git a/src/lib/common/dropdowns/LanguageDropdown.svelte b/src/lib/common/dropdowns/LanguageDropdown.svelte
index 1bfc99ca..a5ed406f 100644
--- a/src/lib/common/dropdowns/LanguageDropdown.svelte
+++ b/src/lib/common/dropdowns/LanguageDropdown.svelte
@@ -38,7 +38,7 @@
 >
 	<button
 		type="button"
-		class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+		class="inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 		aria-label="Select language"
 		onclick={() => (isOpen = !isOpen)}
 	>
@@ -53,7 +53,7 @@
 			{#each languages as language}
 				<button
 					type="button"
-					class={`flex w-full items-center px-4 py-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
+					class={`flex w-full cursor-pointer items-center px-4 py-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
 						selectedLang === language.value
 							? 'bg-gray-50 text-primary dark:bg-gray-700'
 							: 'text-gray-700 dark:text-gray-200'
diff --git a/src/lib/common/dropdowns/NotificationDropdown.svelte b/src/lib/common/dropdowns/NotificationDropdown.svelte
index ffa9cd03..0215bb51 100644
--- a/src/lib/common/dropdowns/NotificationDropdown.svelte
+++ b/src/lib/common/dropdowns/NotificationDropdown.svelte
@@ -21,7 +21,7 @@
 >
 	<button
 		type="button"
-		class="relative inline-flex h-[var(--header-height)] items-center px-3 text-[22px] text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+		class="relative inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-[22px] text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 		aria-label="Notifications"
 		onclick={() => (isOpen = !isOpen)}
 	>
diff --git a/src/lib/common/dropdowns/ProfileDropdown.svelte b/src/lib/common/dropdowns/ProfileDropdown.svelte
index fac39295..e96caafe 100644
--- a/src/lib/common/dropdowns/ProfileDropdown.svelte
+++ b/src/lib/common/dropdowns/ProfileDropdown.svelte
@@ -51,7 +51,7 @@
 >
 	<button
 		type="button"
-		class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+		class="inline-flex h-[var(--header-height)] cursor-pointer items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 		id="page-header-user-dropdown"
 		aria-label="User menu"
 		onclick={() => (isOpen = !isOpen)}
@@ -87,7 +87,7 @@
 			<div class="my-1 h-px bg-gray-200 dark:bg-gray-700"></div>
 			<button
 				type="button"
-				class="flex w-full items-center px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+				class="flex w-full cursor-pointer items-center px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
 				onclick={() => logout()}
 			>
 				<i class="bx bx-power-off me-2 align-middle text-base text-danger"></i>
diff --git a/src/lib/common/shared/InPlaceEdit.svelte b/src/lib/common/shared/InPlaceEdit.svelte
index 340c1c94..66057ab5 100644
--- a/src/lib/common/shared/InPlaceEdit.svelte
+++ b/src/lib/common/shared/InPlaceEdit.svelte
@@ -45,14 +45,15 @@
     /** @param {HTMLInputElement} element */
     function focus(element) {
         element.focus();
+        element.select();
     }
 </script>
 
 {#if editing}
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-    <form onsubmit={(e) => { e.preventDefault(); submit(); }} onkeydown={e => keydown(e)}>
+    <form class="ipe-form" onsubmit={(e) => { e.preventDefault(); submit(); }} onkeydown={e => keydown(e)}>
         <input
-            class="form-control"
+            class="form-control ipe-input"
             bind:value={value}
             {required}
             maxlength={maxLength}
@@ -64,11 +65,114 @@
 {:else}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div style="width: fit-content; min-width: 30%;" class="clickable ellipsis" onclick={() => edit()}>
+    <div
+        class="ipe-display"
+        title="Click to edit"
+        onclick={() => edit()}
+    >
         {#if !!value?.trim()}
-            <span>{value}</span>
+            <span class="ipe-text">{value}</span>
         {:else}
-            <span class="text-secondary fw-light">{placeholder}</span>
+            <span class="ipe-text ipe-placeholder">{placeholder}</span>
         {/if}
+        <i class="mdi mdi-pencil-outline ipe-pencil" aria-hidden="true"></i>
     </div>
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+    /* Display affordance — text reads as static copy, but a soft tinted
+       pill, dashed underline, and fade-in pencil glyph signal that the
+       value is editable on hover. */
+    .ipe-display {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+        width: fit-content;
+        min-width: 30%;
+        max-width: 100%;
+        padding: 0.125rem 0.5rem;
+        border: 1px solid transparent;
+        border-radius: 0.375rem;
+        cursor: text;
+        transition:
+            background-color 0.15s ease,
+            border-color 0.15s ease,
+            color 0.15s ease;
+    }
+
+    .ipe-text {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-bottom: 1px dashed transparent;
+        transition: border-color 0.15s ease;
+    }
+
+    .ipe-placeholder {
+        color: var(--color-secondary);
+        font-weight: 300;
+        font-style: italic;
+    }
+
+    .ipe-display:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+        border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
+    }
+    .ipe-display:hover .ipe-text {
+        border-bottom-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
+    }
+
+    /* Pencil hint — invisible by default, fades in on hover so it does
+       not steal space or attention while idle. */
+    .ipe-pencil {
+        flex-shrink: 0;
+        font-size: 0.875rem;
+        line-height: 1;
+        color: var(--color-primary);
+        opacity: 0;
+        transform: translateX(-2px);
+        transition: opacity 0.15s ease, transform 0.15s ease;
+    }
+    .ipe-display:hover .ipe-pencil {
+        opacity: 0.8;
+        transform: translateX(0);
+    }
+
+    /* Editing input — overrides Bootstrap's flat .form-control so it
+       blends with the surrounding text and shows a primary-tinted focus
+       ring instead of the default blue one. */
+    .ipe-form {
+        margin: 0;
+        width: 100%;
+    }
+    .ipe-input.form-control {
+        width: 100%;
+        padding: 0.25rem 0.5rem;
+        font: inherit;
+        color: inherit;
+        background-color: rgb(255 255 255);
+        border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
+        border-radius: 0.375rem;
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+    }
+    .ipe-input.form-control:focus {
+        border-color: var(--color-primary);
+        outline: 0;
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
+    }
+
+    /* Dark mode — bump tint strength and swap the input surface so the
+       component remains legible on darker panels. */
+    :global(.dark) .ipe-display:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
+        border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
+    }
+    :global(.dark) .ipe-input.form-control {
+        background-color: rgb(17 24 39);
+        color: rgb(229 231 235);
+        border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/styles/pages/_agent.scss b/src/lib/styles/pages/_agent.scss
index 1d937d23..a6819455 100644
--- a/src/lib/styles/pages/_agent.scss
+++ b/src/lib/styles/pages/_agent.scss
@@ -898,6 +898,18 @@
 		.ao-chat-btn { animation: none; }
 }
 
+@media (max-width: 768px) {
+		.ao-chat-btn {
+				gap: 0;
+				padding: 0;
+				width: 1.875rem;
+				justify-content: center;
+		}
+		.ao-chat-btn-label {
+				display: none;
+		}
+}
+
 
 .ao-name {
     margin: 0.25rem 0;
diff --git a/src/routes/VerticalLayout/Header.svelte b/src/routes/VerticalLayout/Header.svelte
index a9892047..9682984c 100644
--- a/src/routes/VerticalLayout/Header.svelte
+++ b/src/routes/VerticalLayout/Header.svelte
@@ -95,7 +95,7 @@
 
 			<button
 				type="button"
-				class="ml-1 inline-flex h-10 w-10 items-center justify-center rounded text-base text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+				class="ml-1 inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded text-base text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 				id="vertical-menu-btn"
 				aria-label="Toggle sidebar"
 				onclick={() => toggleSideBar()}
diff --git a/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte b/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte
index f4d7d884..d0050582 100644
--- a/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte
@@ -17,6 +17,7 @@
       <JSONTree
         value={formatObject(data)}
         defaultExpandedLevel={1}
+        --json-tree-font-family="var(--font-code)"
         --json-tree-property-color="white"
         --json-tree-label-color="white"
         --json-tree-number-color="var(--color-info, #0ea5e9)"
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
index 44eba58c..a33daaa6 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
@@ -16,6 +16,7 @@
     <div class="csle-content log-content">
         <JSONTree
             value={formatObject(data?.states)}
+            --json-tree-font-family="var(--font-code)"
             --json-tree-property-color="white"
             --json-tree-label-color="white"
             --json-tree-number-color="var(--color-info, #0ea5e9)"
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
index b081e654..f87830c1 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -107,9 +107,11 @@
                     <button
                         type="button"
                         class="ao-chat-btn"
+                        title="Chat with me"
+                        aria-label="Chat with me"
                         onclick={() => chatWithAgent()}
                     >
-                        <span>{'Chat with me'}</span>
+                        <span class="ao-chat-btn-label">{'Chat with me'}</span>
                         <i class="mdi mdi-chat"></i>
                     </button>
                 {/if}
diff --git a/src/routes/page/conversation/[conversationId]/conv-states.svelte b/src/routes/page/conversation/[conversationId]/conv-states.svelte
index ba718d03..3ff9bcc0 100644
--- a/src/routes/page/conversation/[conversationId]/conv-states.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-states.svelte
@@ -23,6 +23,7 @@
             <JSONTree
                 value={formatObject(conversation.states)}
                 defaultExpandedLevel={1}
+                --json-tree-font-family="var(--font-sans)"
                 --json-tree-number-color="var(--color-info)"
                 --json-tree-boolean-color="var(--color-info)"
                 --json-tree-string-color="var(--color-info)"
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index 3cf9b926..4e6744fa 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -412,7 +412,7 @@
 					<div class="lg:col-span-1">
 						<button
 							type="button"
-							class="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover"
+							class="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-white shadow-sm transition-colors cursor-pointer hover:bg-primary-hover"
 							onclick={() => search()}
 						>
 							<i class="mdi mdi-filter-outline align-middle"></i>
diff --git a/src/routes/page/instruction/log/log-item.svelte b/src/routes/page/instruction/log/log-item.svelte
index 1287045a..52396403 100644
--- a/src/routes/page/instruction/log/log-item.svelte
+++ b/src/routes/page/instruction/log/log-item.svelte
@@ -130,6 +130,7 @@
                         <JSONTree
                             value={formatObject(item.states)}
                             defaultExpandedLevel={1}
+                            --json-tree-font-family="var(--font-sans)"
                             --json-tree-number-color="var(--color-info)"
                             --json-tree-boolean-color="var(--color-info)"
                             --json-tree-string-color="var(--color-info)"
diff --git a/src/routes/page/knowledge-base/common/table/table-item.svelte b/src/routes/page/knowledge-base/common/table/table-item.svelte
index e13a598f..66b00e8c 100644
--- a/src/routes/page/knowledge-base/common/table/table-item.svelte
+++ b/src/routes/page/knowledge-base/common/table/table-item.svelte
@@ -97,6 +97,7 @@
                             <JSONTree
                                 value={formatObject(item)}
                                 defaultExpandedLevel={1}
+                                --json-tree-font-family="var(--font-sans)"
                                 --json-tree-number-color="var(--color-info)"
                                 --json-tree-boolean-color="var(--color-info)"
                                 --json-tree-string-color="var(--color-info)"