refine instruction testing

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>

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'

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)}
 	>

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>

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

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}
+{/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>

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;

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()}

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)"

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)"

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}

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)"

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>