@memberjunction/ng-ai-test-harness 5.4.1 → 5.6.0

package/dist/lib/ai-test-harness.component.js

@@ -4,7 +4,7 @@ import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { SharedService } from '@memberjunction/ng-shared';
 import { Subject } from 'rxjs';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
-import { ParseJSONRecursive } from '@memberjunction/global';
+import { ParseJSONRecursive, UUIDsEqual } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/platform-browser";
 import * as i2 from "@progress/kendo-angular-dialog";
@@ -482,7 +482,7 @@ function AITestHarnessComponent_Conditional_0_Conditional_4_Conditional_23_Condi
 } if (rf & 2) {
     const config_r19 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵconditional(config_r19.ID === ctx_r1.agentConfigurationId && config_r19.Description ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.IsConfigMatchById(config_r19, ctx_r1.agentConfigurationId) && config_r19.Description ? 0 : -1);
 } }
 function AITestHarnessComponent_Conditional_0_Conditional_4_Conditional_23_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, AITestHarnessComponent_Conditional_0_Conditional_4_Conditional_23_Conditional_12_For_1_Template, 1, 1, null, null, _forTrack1);
@@ -587,7 +587,7 @@ function AITestHarnessComponent_Conditional_0_Conditional_4_Conditional_25_Condi
 } if (rf & 2) {
     const config_r25 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵconditional(config_r25.ID === ctx_r1.selectedConfigurationId && config_r25.Description ? 0 : -1);
+    i0.ɵɵconditional(ctx_r1.IsConfigMatchById(config_r25, ctx_r1.selectedConfigurationId) && config_r25.Description ? 0 : -1);
 } }
 function AITestHarnessComponent_Conditional_0_Conditional_4_Conditional_25_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, AITestHarnessComponent_Conditional_0_Conditional_4_Conditional_25_Conditional_26_For_1_Template, 1, 1, null, null, _forTrack1);
@@ -1568,7 +1568,7 @@ export class AITestHarnessComponent {
         if (this.entity && 'AIModelTypeID' in this.entity) {
             const prompt = this.entity;
             if (prompt.AIModelTypeID) {
-                filteredModels = AIEngineBase.Instance.Models.filter(model => model.AIModelTypeID === prompt.AIModelTypeID && model.IsActive);
+                filteredModels = AIEngineBase.Instance.Models.filter(model => UUIDsEqual(model.AIModelTypeID, prompt.AIModelTypeID) && model.IsActive);
             }
             else {
                 // No model type restriction, show all active models
@@ -1618,7 +1618,7 @@ export class AITestHarnessComponent {
     async getDefaultModelName(prompt) {
         try {
             // Get prompt-specific model associations
-            const promptModels = AIEngineBase.Instance.PromptModels.filter(pm => pm.PromptID === prompt.ID &&
+            const promptModels = AIEngineBase.Instance.PromptModels.filter(pm => UUIDsEqual(pm.PromptID, prompt.ID) &&
                 (pm.Status === 'Active' || pm.Status === 'Preview'));
             let defaultModel = null;
             if (promptModels.length > 0) {
@@ -1626,7 +1626,7 @@ export class AITestHarnessComponent {
                 promptModels.sort((a, b) => (b.Priority || 0) - (a.Priority || 0));
                 // Find the first active model
                 for (const pm of promptModels) {
-                    const model = AIEngineBase.Instance.Models.find(m => m.ID === pm.ModelID && m.IsActive);
+                    const model = AIEngineBase.Instance.Models.find(m => UUIDsEqual(m.ID, pm.ModelID) && m.IsActive);
                     if (model) {
                         defaultModel = model;
                         break;
@@ -1636,7 +1636,7 @@ export class AITestHarnessComponent {
             // If no prompt-specific model, use selection strategy
             if (!defaultModel) {
                 const candidates = AIEngineBase.Instance.Models.filter(m => m.IsActive &&
-                    (!prompt.AIModelTypeID || m.AIModelTypeID === prompt.AIModelTypeID));
+                    (!prompt.AIModelTypeID || UUIDsEqual(m.AIModelTypeID, prompt.AIModelTypeID)));
                 if (candidates.length > 0) {
                     // Apply selection strategy
                     if (prompt.SelectionStrategy === 'ByPower') {
@@ -1673,13 +1673,13 @@ export class AITestHarnessComponent {
                 return;
             }
             // Get vendors that offer this model - same logic as loadVendorsForModel
-            const modelVendors = AIEngineBase.Instance.ModelVendors.filter(mv => mv.ModelID === this.defaultModel.ID &&
+            const modelVendors = AIEngineBase.Instance.ModelVendors.filter(mv => UUIDsEqual(mv.ModelID, this.defaultModel.ID) &&
                 mv.Status === 'Active' &&
                 mv.Type?.trim().toLowerCase() === 'inference provider');
             // Map to vendor objects with priority from ModelVendor
             const vendorObjects = [];
             for (const mv of modelVendors) {
-                const vendor = AIEngineBase.Instance.Vendors.find(v => v.ID === mv.VendorID);
+                const vendor = AIEngineBase.Instance.Vendors.find(v => UUIDsEqual(v.ID, mv.VendorID));
                 if (vendor) {
                     vendorObjects.push({
                         ID: vendor.ID,
@@ -1763,13 +1763,13 @@ export class AITestHarnessComponent {
             return;
         }
         // Get model-specific vendors
-        const modelVendors = AIEngineBase.Instance.ModelVendors.filter(mv => mv.ModelID === this.selectedModelId &&
+        const modelVendors = AIEngineBase.Instance.ModelVendors.filter(mv => UUIDsEqual(mv.ModelID, this.selectedModelId) &&
             mv.Status === 'Active' &&
             mv.Type?.trim().toLowerCase() === 'inference provider');
         // Map to vendor objects with priority from ModelVendor
         const vendorObjects = [];
         for (const mv of modelVendors) {
-            const vendor = AIEngineBase.Instance.Vendors.find(v => v.ID === mv.VendorID);
+            const vendor = AIEngineBase.Instance.Vendors.find(v => UUIDsEqual(v.ID, mv.VendorID));
             if (vendor) {
                 // For now, include all vendors. TODO: Filter by vendor type when available
                 vendorObjects.push({
@@ -3869,6 +3869,10 @@ export class AITestHarnessComponent {
             console.error('❌ Failed to load prompt run:', promptRunId);
         }
     }
+    /** Case-insensitive UUID comparison for configuration ID matching in templates. */
+    IsConfigMatchById(config, id) {
+        return UUIDsEqual(config.ID, id);
+    }
     static { this.ɵfac = function AITestHarnessComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AITestHarnessComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i2.WindowService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.Router)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AITestHarnessComponent, selectors: [["mj-ai-test-harness"]], viewQuery: function AITestHarnessComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5)(_c3, 5);
@@ -3892,7 +3896,7 @@ export class AITestHarnessComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AITestHarnessComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-test-harness', template: "@if (isVisible) {\n  <div class=\"harness-container\" kendoWindowContainer>\n    <!-- Header -->\n    <div class=\"harness-header\">\n      @if (entity) {\n        <div class=\"agent-info\">\n          <div class=\"agent-details\">\n            @if (hasEntityLogo()) {\n              <img [src]=\"getEntityLogoURL()\" [alt]=\"getEntityName() + ' logo'\" class=\"entity-logo\">\n            } @else {\n              <i [class]=\"getEntityIconClass()\"></i>\n            }\n            <div>\n              <h3>{{ getEntityName() }}</h3>\n              @if (entity.Description) {\n                <p>{{ entity.Description }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"header-actions\">\n            <button\n              class=\"custom-button\"\n              (click)=\"clearConversation()\"\n              [disabled]=\"isExecuting || conversationMessages.length === 0\"\n              title=\"Clear conversation\">\n              <i class=\"fa-solid fa-broom\"></i>\n              Clear\n            </button>\n            <button\n              class=\"custom-button\"\n              (click)=\"saveConversation()\"\n              [disabled]=\"conversationMessages.length === 0\"\n              title=\"Save conversation\">\n              <i class=\"fa-solid fa-save\"></i>\n              Save\n            </button>\n            <button\n              class=\"custom-button\"\n              (click)=\"exportConversation()\"\n              [disabled]=\"conversationMessages.length === 0\"\n              title=\"Export conversation\">\n              <i class=\"fa-solid fa-download\"></i>\n              Export\n            </button>\n            <button\n              class=\"custom-button\"\n              (click)=\"importConversation()\"\n              title=\"Import conversation\">\n              <i class=\"fa-solid fa-upload\"></i>\n              Import\n            </button>\n            <input\n              #fileInput\n              type=\"file\"\n              accept=\".json\"\n              style=\"display: none\"\n              (change)=\"onFileSelected($event)\">\n            <button\n              class=\"custom-button icon-only\"\n              (click)=\"toggleSidebar()\"\n              title=\"Toggle sidebar\">\n              <i class=\"fa-solid\" [class.fa-chevron-right]=\"!showSidebar\" [class.fa-chevron-left]=\"showSidebar\"></i>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n    <!-- Main Content Area with Splitter -->\n    <div class=\"harness-body\">\n      @if (showSidebar) {\n        <kendo-splitter\n          orientation=\"horizontal\"\n          style=\"height: 100%; width: 100%;\">\n          <!-- Chat Area (Left Pane) -->\n          <kendo-splitter-pane\n            [collapsible]=\"false\"\n            [resizable]=\"true\"\n            [min]=\"'400px'\">\n            <div class=\"chat-area\">\n              <!-- Messages Container -->\n              <div class=\"messages-container\" #messagesContainer>\n                @if (conversationMessages.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-comments\"></i>\n                    <h4>Start a conversation</h4>\n                    <p>Send a message to begin testing the AI agent</p>\n                  </div>\n                }\n                @for (message of conversationMessages; track message.id) {\n                  <div [ngClass]=\"getMessageClass(message)\">\n                    <div class=\"message-header\">\n                      <span class=\"message-role\">\n                        @if (message.role === 'user') {\n                          <i class=\"fa-solid fa-user\"></i> You\n                        } @else {\n                          @if (hasEntityLogo()) {\n                            <img [src]=\"getEntityLogoURL()\" [alt]=\"getEntityName() + ' logo'\" class=\"message-role-logo\">\n                          } @else {\n                            <i [class]=\"getEntityIconClass()\"></i>\n                          }\n                          {{ getEntityName() || 'Assistant' }}\n                        }\n                      </span>\n                      <span class=\"message-time\">{{ formatTimestamp(message.timestamp) }}</span>\n                      @if (message.isStreaming && message.elapsedTime !== undefined) {\n                        <span class=\"execution-time streaming\">\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i> {{ formatElapsedTime(message.elapsedTime) }}\n                        </span>\n                      } @else if (message.executionTime) {\n                        <span class=\"execution-time\" [title]=\"getExecutionSummary(message)\">{{ formatExecutionTime(message.executionTime) }}</span>\n                      }\n                      @if (showRawToggle(message)) {\n                        <button class=\"raw-toggle\" (click)=\"showRawJsonDialog(message)\" title=\"View raw JSON response\">\n                          <i class=\"fa-solid fa-code\"></i>\n                        </button>\n                      }\n                    </div>\n                    <div class=\"message-content\">\n                      <button class=\"copy-button-in-bubble\" (click)=\"copyMessage(message)\" title=\"Copy message\">\n                        <i class=\"fa-solid fa-copy\"></i>\n                      </button>\n                      @if (message.isStreaming) {\n                        <div class=\"streaming-wrapper\">\n                          <span class=\"streaming-content\" [innerHTML]=\"getFormattedStreamingContent(message)\"></span>\n                          <span class=\"cursor\">|</span>\n                        </div>\n                      } @else {\n                        <div [innerHTML]=\"getFormattedContent(message)\"></div>\n                      }\n                      @if (message.error) {\n                        <div class=\"error-details\">\n                          <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                          {{ message.error }}\n                        </div>\n                      }\n                      @if (hasPayload(message.payload) && mode === 'agent' && message.role === 'assistant') {\n                        <div class=\"payload-section\" [class.collapsed]=\"message.payloadCollapsed\">\n                          <div class=\"payload-header\" (click)=\"togglePayloadCollapse(message)\">\n                            <span class=\"payload-label\">\n                              <i class=\"fa-solid fa-code\"></i> Payload\n                            </span>\n                            <button class=\"payload-toggle\" type=\"button\">\n                              <i class=\"fa-solid\" [class.fa-chevron-down]=\"!message.payloadCollapsed\" [class.fa-chevron-right]=\"message.payloadCollapsed\"></i>\n                            </button>\n                          </div>\n                          @if (!message.payloadCollapsed) {\n                            <div class=\"payload-content\">\n                              <mj-code-editor\n                                [ngModel]=\"formatJson(message.payload)\"\n                                [language]=\"'json'\"\n                                [readonly]=\"true\"\n                                style=\"height: 300px; width: 100%;\">\n                              </mj-code-editor>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n              <!-- Input Area -->\n              <div class=\"input-area\">\n                @if (originalPromptRunId && conversationMessages.length > 0) {\n                  <!-- Re-run mode - show loaded message -->\n                  <div class=\"rerun-mode-container\">\n                    <div class=\"rerun-message\">\n                      <i class=\"fa-solid fa-rotate-right\"></i>\n                      <span>Messages from Prompt Run <strong>{{ originalPromptRunId.substring(0, 8) }}</strong> loaded above</span>\n                    </div>\n                    <div class=\"rerun-buttons\">\n                      @if (!hasExecutedRerun) {\n                        <!-- Show Re-Run button if we haven't executed yet -->\n                        <button\n                          class=\"send-button rerun-button\"\n                          (click)=\"executeRerun()\"\n                          [disabled]=\"isExecuting\"\n                          title=\"Re-run with loaded messages\">\n                          @if (isExecuting) {\n                            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                            <span>Running...</span>\n                          } @else {\n                            <i class=\"fa-solid fa-play\"></i>\n                            <span>Re-Run</span>\n                          }\n                        </button>\n                      } @else {\n                        <!-- Show only Reset button after execution -->\n                        <button\n                          class=\"send-button reset-button\"\n                          (click)=\"resetToOriginalMessages()\"\n                          [disabled]=\"isExecuting\"\n                          title=\"Reset conversation messages to the original state from the prompt run. Model settings and parameters will be preserved.\">\n                          <i class=\"fa-solid fa-rotate-left\"></i>\n                          <span>Reset Messages</span>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                } @else {\n                  <!-- Normal mode - show text input -->\n                  <div class=\"input-container\">\n                    <kendo-textarea\n                      #messageInput\n                      [(ngModel)]=\"currentUserMessage\"\n                      [rows]=\"3\"\n                      placeholder=\"Type your message here... (Press Enter to send, Shift+Enter for new line)\"\n                      (keypress)=\"handleKeyPress($event)\"\n                      [disabled]=\"isExecuting\"\n                      class=\"message-input\">\n                    </kendo-textarea>\n                    <button\n                      class=\"send-button\"\n                      (click)=\"sendMessage()\"\n                      [disabled]=\"isExecuting || !currentUserMessage.trim()\"\n                      title=\"Send message\">\n                      @if (isExecuting) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                      } @else {\n                        <i class=\"fa-solid fa-paper-plane\"></i>\n                      }\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          </kendo-splitter-pane>\n          <!-- Sidebar (Right Pane) -->\n          <kendo-splitter-pane\n            [collapsible]=\"false\"\n            [resizable]=\"true\"\n            [size]=\"'30%'\"\n            [min]=\"'300px'\">\n            <div class=\"sidebar\">\n              <!-- Tab Navigation -->\n              <div class=\"sidebar-tabs\">\n                @if (mode === 'agent') {\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'agentVariables'\"\n                    [disabled]=\"executionMonitorMode === 'live' && activeTab !== 'agentVariables'\"\n                    (click)=\"selectTab('agentVariables')\">\n                    <i class=\"fa-solid fa-code\"></i>\n                    Agent Variables\n                  </button>\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'executionMonitor'\"\n                    (click)=\"selectTab('executionMonitor')\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    Execution Monitor\n                  </button>\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'agentSettings'\"\n                    [disabled]=\"executionMonitorMode === 'live' && activeTab !== 'agentSettings'\"\n                    (click)=\"selectTab('agentSettings')\">\n                    <i class=\"fa-solid fa-sliders\"></i>\n                    Settings\n                  </button>\n                } @else {\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'templateVariables'\"\n                    (click)=\"selectTab('templateVariables')\">\n                    <i class=\"fa-solid fa-code\"></i>\n                    Template Variables\n                  </button>\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'modelSettings'\"\n                    (click)=\"selectTab('modelSettings')\">\n                    <i class=\"fa-solid fa-sliders\"></i>\n                    Model Settings\n                  </button>\n                }\n                <button\n                  class=\"tab-button\"\n                  [class.active]=\"activeTab === 'savedConversations'\"\n                  [disabled]=\"executionMonitorMode === 'live' && activeTab !== 'savedConversations'\"\n                  (click)=\"selectTab('savedConversations')\">\n                  <i class=\"fa-solid fa-history\"></i>\n                  Saved\n                  @if (savedConversations.length > 0) {\n                    <span class=\"badge\">{{ savedConversations.length }}</span>\n                  }\n                </button>\n              </div>\n              <!-- Tab Content -->\n              <div class=\"sidebar-content\">\n                <!-- Agent Variables Tab (Unified) -->\n                @if (activeTab === 'agentVariables') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Agent Variables</h4>\n                      <p>Variables available during agent execution and template rendering</p>\n                    </div>\n                    <div class=\"variables-list\">\n                      @if (agentVariables.length === 0) {\n                        <div class=\"empty-variables\">\n                          <p>No variables defined. Click \"Add Variable\" to get started.</p>\n                        </div>\n                      }\n                      @for (variable of agentVariables; track $index) {\n                        <div class=\"variable-item\">\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.name\"\n                            placeholder=\"Variable name\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-name\">\n                          </kendo-textbox>\n                          <kendo-dropdownlist\n                            [(ngModel)]=\"variable.type\"\n                                                [data]=\"[\n                                                    {text: 'String', value: 'string'}, \n                                                    {text: 'Number', value: 'number'}, \n                                                    {text: 'Boolean', value: 'boolean'}, \n                                                    {text: 'Object', value: 'object'}\n                                                ]\"\n                            textField=\"text\"\n                            valueField=\"value\"\n                            [valuePrimitive]=\"true\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-type\">\n                          </kendo-dropdownlist>\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.value\"\n                            [placeholder]=\"variable.type === 'object' ? 'JSON value' : 'Value'\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-value\">\n                          </kendo-textbox>\n                          <button\n                            class=\"remove-button\"\n                            (click)=\"removeAgentVariable($index)\"\n                            [disabled]=\"isExecuting\"\n                            title=\"Remove variable\">\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                    <button\n                      class=\"add-button\"\n                      (click)=\"addAgentVariable()\"\n                      [disabled]=\"isExecuting\">\n                      <i class=\"fa-solid fa-plus\"></i> Add Variable\n                    </button>\n                  </div>\n                }\n                <!-- Execution Monitor Tab -->\n                @if (activeTab === 'executionMonitor') {\n                  <div class=\"tab-content\" style=\"padding: 0; height: 100%;\">\n                    <mj-agent-execution-monitor\n                      [mode]=\"executionMonitorMode\"\n                      [agentRun]=\"currentAgentRun\"\n                      [liveSteps]=\"liveAgentSteps\"\n                      [autoExpand]=\"true\"\n                      (viewRunClick)=\"navigateToAgentRun($event)\"\n                      [runId]=\"getLastRunId()\"\n                      [runType]=\"mode\">\n                    </mj-agent-execution-monitor>\n                  </div>\n                }\n                <!-- Agent Settings Tab -->\n                @if (activeTab === 'agentSettings') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Agent Settings</h4>\n                      <p>Configure agent execution parameters</p>\n                    </div>\n                    <div class=\"model-settings\">\n                      <div class=\"setting-group\">\n                        <label>AI Configuration</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"agentConfigurationId\"\n                          [data]=\"availableConfigurations\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          placeholder=\"Select a configuration...\"\n                          class=\"configuration-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          @if (agentConfigurationId) {\n                            @for (config of availableConfigurations; track config.ID) {\n                              @if (config.ID === agentConfigurationId && config.Description) {\n                                {{ config.Description }}\n                              }\n                            }\n                          } @else {\n                            Using default configuration\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Template Variables Tab (Prompt Mode) -->\n                @if (activeTab === 'templateVariables') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Template Variables</h4>\n                      <p>Variables for prompt template rendering</p>\n                    </div>\n                    <div class=\"variables-list\">\n                      @for (variable of templateVariables; track $index) {\n                        <div class=\"variable-item\">\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.name\"\n                            placeholder=\"Variable name\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-name\">\n                          </kendo-textbox>\n                          <kendo-dropdownlist\n                            [(ngModel)]=\"variable.type\"\n                                                [data]=\"[\n                                                    {text: 'String', value: 'string'}, \n                                                    {text: 'Number', value: 'number'}, \n                                                    {text: 'Boolean', value: 'boolean'}, \n                                                    {text: 'Object', value: 'object'}\n                                                ]\"\n                            textField=\"text\"\n                            valueField=\"value\"\n                            [valuePrimitive]=\"true\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-type\">\n                          </kendo-dropdownlist>\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.value\"\n                            [placeholder]=\"variable.type === 'object' ? 'JSON value' : 'Value'\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-value\">\n                          </kendo-textbox>\n                          <button\n                            class=\"remove-button\"\n                            (click)=\"removeTemplateVariable($index)\"\n                            title=\"Remove variable\">\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                    <button\n                      class=\"add-button\"\n                      (click)=\"addTemplateVariable()\">\n                      <i class=\"fa-solid fa-plus\"></i>\n                      Add Variable\n                    </button>\n                  </div>\n                }\n                <!-- Model Settings Tab (Prompt Mode) -->\n                @if (activeTab === 'modelSettings') {\n                  <div class=\"tab-content\" style=\"overflow-y: auto;\">\n                    <div class=\"tab-header\">\n                      <h4>Model Settings</h4>\n                      <p>Configure AI model parameters</p>\n                      <button class=\"custom-button icon-only\" (click)=\"resetToPromptDefaults()\" title=\"Reset to Prompt Settings\">\n                        <i class=\"fa-solid fa-undo\"></i>\n                      </button>\n                    </div>\n                    <div class=\"model-settings\">\n                      <div class=\"setting-group\">\n                        <label>AI Model</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedModelId\"\n                          (ngModelChange)=\"onModelSelectionChange()\"\n                          [data]=\"availableModels\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          placeholder=\"Select a model...\"\n                          class=\"model-selector\">\n                        </kendo-dropdownlist>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>AI Vendor</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedVendorId\"\n                          [data]=\"availableVendors\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          [disabled]=\"availableVendors.length <= 1 || !selectedModelId\"\n                          placeholder=\"Select a vendor...\"\n                          class=\"vendor-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          @if (!selectedModelId) {\n                            Using default vendor for the default model\n                          } @else if (availableVendors.length <= 1) {\n                            Only one vendor available for this model\n                          } @else {\n                            Select the inference provider for this model\n                          }\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>AI Configuration</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedConfigurationId\"\n                          [data]=\"availableConfigurations\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          placeholder=\"Select a configuration...\"\n                          class=\"configuration-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          @if (selectedConfigurationId) {\n                            @for (config of availableConfigurations; track config.ID) {\n                              @if (config.ID === selectedConfigurationId && config.Description) {\n                                {{ config.Description }}\n                              }\n                            }\n                          } @else {\n                            Using default configuration\n                          }\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>Response Format</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedResponseFormat\"\n                          [data]=\"responseFormatOptions\"\n                          textField=\"text\"\n                          valueField=\"value\"\n                          placeholder=\"Select format...\"\n                          class=\"format-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          Expected format for AI response (defaults to prompt setting)\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>Max Tokens</label>\n                        <kendo-numerictextbox\n                          [(ngModel)]=\"maxTokens\"\n                          [min]=\"100\"\n                          [max]=\"8000\"\n                          [step]=\"100\"\n                          placeholder=\"Max tokens...\"\n                          class=\"max-tokens-input\">\n                        </kendo-numerictextbox>\n                        <div class=\"setting-help\">\n                          Maximum length of generated response\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label class=\"checkbox-label\">\n                          <input type=\"checkbox\"\n                            [(ngModel)]=\"skipValidation\"\n                            class=\"skip-validation-checkbox\">\n                          Skip Validation\n                        </label>\n                        <div class=\"setting-help\">\n                          Skip output validation during testing\n                        </div>\n                      </div>\n                      <!-- Advanced Parameters Expansion Panel -->\n                      <kendo-expansionpanel\n                        [expanded]=\"advancedParamsExpanded\"\n                        (action)=\"toggleAdvancedParams()\"\n                        title=\"Advanced Parameters\"\n                        class=\"advanced-params-panel\">\n                        <div class=\"advanced-settings\">\n                          <div class=\"setting-group\">\n                            <label title=\"Controls randomness: 0 = more focused and deterministic, 2 = more random and creative\">\n                              Temperature\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.temperature\"\n                              [min]=\"0\"\n                              [max]=\"2\"\n                              [step]=\"0.1\"\n                              [format]=\"'n1'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Nucleus sampling: only consider tokens with cumulative probability up to this value. 1 = consider all tokens\">\n                              Top P\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.topP\"\n                              [min]=\"0\"\n                              [max]=\"1\"\n                              [step]=\"0.01\"\n                              [format]=\"'n2'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Only sample from the top K tokens. Lower values reduce randomness\">\n                              Top K\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.topK\"\n                              [min]=\"1\"\n                              [max]=\"100\"\n                              [step]=\"1\"\n                              [format]=\"'n0'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Minimum probability for token selection. Filters out low-probability tokens\">\n                              Min P\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.minP\"\n                              [min]=\"0\"\n                              [max]=\"1\"\n                              [step]=\"0.01\"\n                              [format]=\"'n2'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Penalizes tokens based on their frequency in the text. Positive values reduce repetition\">\n                              Frequency Penalty\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.frequencyPenalty\"\n                              [min]=\"-2\"\n                              [max]=\"2\"\n                              [step]=\"0.1\"\n                              [format]=\"'n1'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Penalizes tokens that have appeared in the text. Positive values increase topic diversity\">\n                              Presence Penalty\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.presencePenalty\"\n                              [min]=\"-2\"\n                              [max]=\"2\"\n                              [step]=\"0.1\"\n                              [format]=\"'n1'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Random seed for deterministic generation. Same seed produces same output\">\n                              Seed\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.seed\"\n                              [format]=\"'n0'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Sequences that will stop generation when encountered. Enter comma-separated values\">\n                              Stop Sequences\n                            </label>\n                            <kendo-textarea\n                              [(ngModel)]=\"stopSequencesText\"\n                              (ngModelChange)=\"updateStopSequences()\"\n                              [rows]=\"2\"\n                              placeholder=\"Enter comma-separated sequences\"\n                              class=\"advanced-param-input\">\n                            </kendo-textarea>\n                            <div class=\"setting-help\">\n                              Separate multiple sequences with commas\n                            </div>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Include log probabilities of the output tokens in the response\">\n                              Include Log Probs\n                            </label>\n                            <kendo-switch\n                              [(ngModel)]=\"advancedParams.includeLogProbs\"\n                              class=\"advanced-param-switch\">\n                            </kendo-switch>\n                          </div>\n                          @if (advancedParams.includeLogProbs) {\n                            <div class=\"setting-group\">\n                              <label title=\"Number of top log probabilities to include for each token\">\n                                Top Log Probs\n                              </label>\n                              <kendo-numerictextbox\n                                [(ngModel)]=\"advancedParams.topLogProbs\"\n                                [min]=\"2\"\n                                [max]=\"20\"\n                                [step]=\"1\"\n                                [format]=\"'n0'\"\n                                placeholder=\"2\"\n                                class=\"advanced-param-input\">\n                              </kendo-numerictextbox>\n                            </div>\n                          }\n                        </div>\n                      </kendo-expansionpanel>\n                    </div>\n                  </div>\n                }\n                <!-- Saved Conversations Tab -->\n                @if (activeTab === 'savedConversations') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Saved Conversations</h4>\n                      <p>Previously saved test sessions</p>\n                      @if (currentConversationId) {\n                        <button class=\"custom-button small primary\" (click)=\"newConversation()\" title=\"Start a new conversation\">\n                          <i class=\"fa-solid fa-plus\"></i>\n                          New\n                        </button>\n                      }\n                    </div>\n                    <div class=\"saved-list\">\n                      @if (savedConversations.length === 0) {\n                        <div class=\"empty-saved\">\n                          <i class=\"fa-solid fa-folder-open\"></i>\n                          <p>No saved conversations</p>\n                        </div>\n                      }\n                      @for (conv of savedConversations; track conv.id) {\n                        <div class=\"saved-item\"\n                          [class.current]=\"conv.id === currentConversationId\"\n                          (click)=\"loadConversation(conv)\">\n                          <div class=\"saved-info\">\n                            <h5>{{ conv.name }}</h5>\n                            <p>{{ conv.messages.length }} messages</p>\n                            <span class=\"saved-date\">{{ conv.updatedAt | date:'short' }}</span>\n                          </div>\n                          <button\n                            class=\"delete-button\"\n                            (click)=\"deleteConversation(conv, $event)\"\n                            title=\"Delete conversation\">\n                            <i class=\"fa-solid fa-trash\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n      } @else {\n        <!-- No sidebar - full width chat -->\n        <div class=\"chat-area\">\n          <!-- Messages Container -->\n          <div class=\"messages-container\" #messagesContainer>\n            @if (conversationMessages.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-comments\"></i>\n                <h4>Start a conversation</h4>\n                <p>Send a message to begin testing the AI agent</p>\n              </div>\n            }\n            @for (message of conversationMessages; track message.id) {\n              <div [ngClass]=\"getMessageClass(message)\">\n                <div class=\"message-header\">\n                  <span class=\"message-role\">\n                    @if (message.role === 'user') {\n                      <i class=\"fa-solid fa-user\"></i> You\n                    } @else {\n                      <i class=\"fa-solid fa-robot\"></i> {{ getEntityName() || 'Assistant' }}\n                    }\n                  </span>\n                  <span class=\"message-time\">{{ formatTimestamp(message.timestamp) }}</span>\n                  @if (message.isStreaming && message.elapsedTime !== undefined) {\n                    <span class=\"execution-time streaming\">\n                      <i class=\"fa-solid fa-spinner fa-spin\"></i> {{ formatElapsedTime(message.elapsedTime) }}\n                    </span>\n                  } @else if (message.executionTime) {\n                    <span class=\"execution-time\" [title]=\"getExecutionSummary(message)\">{{ formatExecutionTime(message.executionTime) }}</span>\n                  }\n                  @if (showRawToggle(message)) {\n                    <button class=\"raw-toggle\" (click)=\"showRawJsonDialog(message)\" title=\"View raw JSON response\">\n                      <i class=\"fa-solid fa-code\"></i>\n                    </button>\n                  }\n                  @if (message.executionData && mode === 'agent' && message.role === 'assistant') {\n                    <button class=\"execution-history-toggle\" (click)=\"showMessageExecutionHistory(message)\" title=\"View execution details\">\n                      <i class=\"fa-solid fa-diagram-project\"></i>\n                    </button>\n                  }\n                  @if (message.agentRunId && mode === 'agent' && message.role === 'assistant') {\n                    <button class=\"execution-history-toggle\" (click)=\"navigateToAgentRun({runId: message.agentRunId, runType: 'agent'})\" title=\"View full run details\">\n                      <i class=\"fa-solid fa-external-link-alt\"></i>\n                    </button>\n                  }\n                </div>\n                <div class=\"message-content\">\n                  <button class=\"copy-button-in-bubble\" (click)=\"copyMessage(message)\" title=\"Copy message\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                  @if (message.isStreaming) {\n                    <div class=\"streaming-wrapper\">\n                      <span class=\"streaming-content\">{{ message.streamingContent }}<span class=\"cursor\">|</span></span>\n                    </div>\n                  } @else {\n                    <div [innerHTML]=\"getFormattedContent(message)\"></div>\n                  }\n                  @if (message.error) {\n                    <div class=\"error-details\">\n                      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                      {{ message.error }}\n                    </div>\n                  }\n                  @if (hasPayload(message.payload) && mode === 'agent' && message.role === 'assistant') {\n                    <div class=\"payload-section\" [class.collapsed]=\"message.payloadCollapsed\">\n                      <div class=\"payload-header\" (click)=\"togglePayloadCollapse(message)\">\n                        <span class=\"payload-label\">\n                          <i class=\"fa-solid fa-code\"></i> Payload\n                        </span>\n                        <button class=\"payload-toggle\" type=\"button\">\n                          <i class=\"fa-solid\" [class.fa-chevron-down]=\"!message.payloadCollapsed\" [class.fa-chevron-right]=\"message.payloadCollapsed\"></i>\n                        </button>\n                      </div>\n                      @if (!message.payloadCollapsed) {\n                        <div class=\"payload-content\">\n                          <pre>{{ formatJson(message.payload) }}</pre>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n          <!-- Input Area -->\n          <div class=\"input-area\">\n            <div class=\"input-container\">\n              <kendo-textarea\n                #messageInput\n                [(ngModel)]=\"currentUserMessage\"\n                [rows]=\"3\"\n                placeholder=\"Type your message here... (Press Enter to send, Shift+Enter for new line)\"\n                (keypress)=\"handleKeyPress($event)\"\n                [disabled]=\"isExecuting\"\n                class=\"message-input\">\n              </kendo-textarea>\n              <button\n                class=\"send-button\"\n                (click)=\"sendMessage()\"\n                [disabled]=\"isExecuting || !currentUserMessage.trim()\"\n                title=\"Send message\">\n                @if (isExecuting) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                } @else {\n                  <i class=\"fa-solid fa-paper-plane\"></i>\n                }\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Save Conversation Dialog -->\n@if (showSaveDialog) {\n  <kendo-dialog\n    [title]=\"'Save Conversation'\"\n    [width]=\"400\"\n    (close)=\"cancelSaveDialog()\"\n    class=\"save-dialog\">\n    <div class=\"dialog-content\">\n      <p>Enter a name for this conversation:</p>\n      <input\n        #saveDialogInput\n        type=\"text\"\n        (keyup)=\"updateTempConversation()\"\n        placeholder=\"Conversation name\"\n        class=\"k-textbox k-input k-input-md k-rounded-md k-input-solid full-width\"  />\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton (click)=\"cancelSaveDialog()\">Cancel</button>\n      <button kendoButton\n        [primary]=\"true\"\n        (click)=\"confirmSaveConversation()\"\n        [disabled]=\"tempConversationName === ''\">\n        Save\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n<!-- Load Confirmation Dialog -->\n@if (showLoadConfirmDialog) {\n  <kendo-dialog\n    [title]=\"'Replace Current Conversation?'\"\n    [width]=\"400\"\n    (close)=\"cancelLoadConversation()\"\n    class=\"confirm-dialog\">\n    <div class=\"dialog-content\">\n      <p>Loading this conversation will replace the current one. Any unsaved changes will be lost.</p>\n      <p>Do you want to continue?</p>\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton (click)=\"cancelLoadConversation()\">Cancel</button>\n      <button kendoButton\n        [primary]=\"true\"\n        (click)=\"confirmLoadConversation()\">\n        Load Conversation\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n", styles: ["/* Container Styles */\n.harness-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: #f8f9fa;\n}\n\n/* Custom Button Styles */\n.custom-button {\n    background: white;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 13px;\n    color: #495057;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: inherit;\n}\n\n.custom-button:hover:not(:disabled) {\n    background: #f8f9fa;\n    border-color: #adb5bd;\n    color: #212529;\n}\n\n.custom-button:active:not(:disabled) {\n    background: #e9ecef;\n    border-color: #adb5bd;\n}\n\n.custom-button:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.custom-button.icon-only {\n    padding: 6px 8px;\n}\n\n.custom-button i {\n    font-size: 14px;\n}\n\n/* Send Button - Primary Style */\n.send-button {\n    background: #0d6efd;\n    border: 1px solid #0d6efd;\n    color: white;\n    border-radius: 4px;\n    padding: 8px 16px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 44px;\n    font-family: inherit;\n}\n\n.send-button:hover:not(:disabled) {\n    background: #0b5ed7;\n    border-color: #0a58ca;\n}\n\n.send-button:active:not(:disabled) {\n    background: #0a58ca;\n    border-color: #0a58ca;\n}\n\n.send-button:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.send-button i {\n    font-size: 16px;\n}\n\n/* Add Button */\n.add-button {\n    background: white;\n    border: 1px solid #0d6efd;\n    color: #0d6efd;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: inherit;\n}\n\n.add-button:hover {\n    background: #0d6efd;\n    color: white;\n}\n\n/* Remove/Delete Buttons */\n.remove-button,\n.delete-button {\n    background: transparent;\n    border: none;\n    color: #dc3545;\n    padding: 4px 8px;\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.remove-button:hover,\n.delete-button:hover {\n    background: rgba(220, 53, 69, 0.1);\n    color: #bd2130;\n}\n\n/* Copy Button in Message Bubble */\n.copy-button-in-bubble {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: transparent;\n    border: none;\n    padding: 6px;\n    font-size: 14px;\n    color: #adb5bd;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    opacity: 0;\n    z-index: 10; /* Ensure it's above content */\n}\n\n.message-content:hover .copy-button-in-bubble {\n    opacity: 1;\n}\n\n.copy-button-in-bubble:hover {\n    background: rgba(0, 0, 0, 0.08);\n    color: #6c757d;\n}\n\n.copy-button-in-bubble i {\n    font-size: 14px;\n}\n\n/* Model Settings Styles (Prompt Mode) */\n.model-settings {\n    padding: 16px;\n}\n\n.setting-group {\n    margin-bottom: 24px;\n}\n\n.setting-group label {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 600;\n    color: #495057;\n    font-size: 14px;\n}\n\n.model-selector,\n.vendor-selector {\n    width: 100%;\n}\n\n.temperature-slider {\n    width: 100%;\n    margin-top: 8px;\n}\n\n.max-tokens-input {\n    width: 100%;\n}\n\n.setting-help {\n    margin-top: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    font-style: italic;\n}\n\n/* Checkbox Styles */\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    font-weight: 600;\n    color: #495057;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.skip-validation-checkbox {\n    margin-right: 8px;\n    cursor: pointer;\n    width: 16px;\n    height: 16px;\n}\n\n/* Header Styles */\n.harness-header {\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    padding: 16px 20px;\n}\n\n.agent-info {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.agent-details {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.agent-details i {\n    font-size: 28px;\n    color: #17a2b8;\n}\n\n.agent-details .entity-logo {\n    width: 40px;\n    height: 40px;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-details h3 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: #212529;\n}\n\n.agent-details p {\n    margin: 4px 0 0 0;\n    font-size: 14px;\n    color: #6c757d;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n}\n\n/* Body Layout */\n.harness-body {\n    flex: 1;\n    display: flex;\n    overflow: hidden;\n}\n\n/* Chat Area */\n.chat-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: white;\n    border-right: 1px solid #dee2e6;\n    height: 100%;\n    min-height: 0; /* Important for flexbox children */\n}\n\n/* Messages Container */\n.messages-container {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    scroll-behavior: smooth;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state h4 {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 500;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 14px;\n}\n\n/* Message Styles */\n.message {\n    margin-bottom: 20px;\n    animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.message-user {\n    margin-left: auto;\n    max-width: 70%;\n}\n\n.message-assistant {\n    margin-right: auto;\n    max-width: 70%;\n}\n\n.message-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 8px;\n    font-size: 13px;\n}\n\n.message-role {\n    font-weight: 600;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.message-role i {\n    font-size: 14px;\n}\n\n.message-role .message-role-logo {\n    width: 16px;\n    height: 16px;\n    object-fit: cover;\n    border-radius: 3px;\n    display: inline-block;\n    vertical-align: middle;\n}\n\n.message-user .message-role {\n    color: #6f42c1;\n}\n\n.message-assistant .message-role {\n    color: #17a2b8;\n}\n\n.message-time {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.execution-time {\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    color: #495057;\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.execution-time.streaming {\n    background: #fff3cd;\n    color: #856404;\n    border: 1px solid #ffeaa7;\n}\n\n.raw-toggle {\n    background: transparent;\n    border: none;\n    padding: 4px 8px;\n    font-size: 12px;\n    color: #6c757d;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-left: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n}\n\n.raw-toggle:hover {\n    background: rgba(0, 0, 0, 0.05);\n    color: #495057;\n}\n\n.raw-toggle i {\n    font-size: 12px;\n}\n\n/* Message content styles are now defined above in enhanced content formatting section */\n\n.message-user .message-content {\n    background: #e7f3ff;\n    border: 1px solid #b8daff;\n}\n\n.message-assistant .message-content {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n}\n\n.message.streaming .message-content {\n    background: #fff3cd;\n    border: 1px solid #ffeaa7;\n}\n\n.streaming-content {\n    display: inline;\n}\n\n.streaming-wrapper {\n    position: relative;\n}\n\n.streaming-wrapper .cursor {\n    display: inline;\n    margin-left: 2px;\n}\n\n.cursor {\n    animation: blink 1s infinite;\n    font-weight: 100;\n    color: #495057;\n}\n\n@keyframes blink {\n    0%, 50% { opacity: 1; }\n    51%, 100% { opacity: 0; }\n}\n\n.error-details {\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 6px;\n    color: #721c24;\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-details i {\n    color: #dc3545;\n}\n\n/* Payload Section Styles */\n.payload-section {\n    margin-top: 12px;\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #ffffff;\n}\n\n.payload-header {\n    background: #f8f9fa;\n    padding: 8px 12px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    transition: background-color 0.2s;\n}\n\n.payload-header:hover {\n    background: #e9ecef;\n}\n\n.payload-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.payload-label i {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.payload-content {\n    max-height: 250px;\n    overflow: auto;\n    background: #f8f9fa;\n}\n\n.payload-content pre {\n    margin: 0;\n    padding: 12px;\n    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;\n    font-size: 12px;\n    line-height: 1.5;\n    color: #212529;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    background: transparent;\n}\n\n.payload-toggle {\n    background: transparent;\n    border: none;\n    padding: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: color 0.2s;\n}\n\n.payload-toggle:hover {\n    color: #495057;\n}\n\n.payload-toggle i {\n    font-size: 12px;\n}\n\n.payload-section.collapsed .payload-header {\n    border-bottom: none;\n}\n\n/* Dialog styles */\n.save-dialog,\n.confirm-dialog {\n    .dialog-content {\n        padding: 20px;\n        \n        p {\n            margin: 0 0 16px 0;\n            color: #333;\n            font-size: 14px;\n            line-height: 1.5;\n            \n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n        \n        .full-width {\n            width: 100%;\n        }\n        \n        input.k-textbox {\n            padding: 8px 12px;\n            font-size: 14px;\n            line-height: 1.5;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            \n            &:focus {\n                outline: none;\n                border-color: #ff6358;\n                box-shadow: 0 0 0 0.25rem rgba(255, 99, 88, 0.25);\n            }\n        }\n    }\n}\n\n/* Enhanced content formatting styles */\n.markdown-content {\n    line-height: 1.6;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    max-width: 100%;\n}\n\n/* Inline JSON editor styles */\n.inline-json-editor {\n    margin: 8px 0;\n    \n    .json-editor-container {\n        background: #f8f9fa;\n        border: 1px solid #e0e0e0;\n        border-radius: 4px;\n        overflow: hidden;\n        position: relative;\n        max-height: 400px;\n        \n        pre {\n            margin: 0;\n            padding: 12px;\n            font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;\n            font-size: 13px;\n            line-height: 1.5;\n            overflow: auto;\n            height: 100%;\n            background: transparent;\n            color: #333;\n            white-space: pre-wrap;\n            word-wrap: break-word;\n        }\n    }\n}\n\n.markdown-paragraph {\n    margin: 8px 0;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n}\n\n.markdown-h1 {\n    font-size: 1.5em;\n    font-weight: 600;\n    margin: 16px 0 8px 0;\n    color: #212529;\n    border-bottom: 2px solid #e9ecef;\n    padding-bottom: 4px;\n}\n\n.markdown-h2 {\n    font-size: 1.3em;\n    font-weight: 600;\n    margin: 14px 0 6px 0;\n    color: #212529;\n    border-bottom: 1px solid #e9ecef;\n    padding-bottom: 2px;\n}\n\n.markdown-h3 {\n    font-size: 1.1em;\n    font-weight: 600;\n    margin: 12px 0 4px 0;\n    color: #212529;\n}\n\n.code-block {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    padding: 16px;\n    margin: 12px 0;\n    overflow-x: auto;\n    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #212529;\n    white-space: pre;\n    word-wrap: normal;\n    max-width: 100%;\n}\n\n.code-block code {\n    background: none;\n    border: none;\n    padding: 0;\n    font-size: inherit;\n    color: inherit;\n    white-space: pre;\n    word-wrap: normal;\n}\n\n.language-json {\n    color: #d73e48;\n}\n\n.inline-code {\n    background: #f1f3f4;\n    border: 1px solid #dadce0;\n    border-radius: 4px;\n    padding: 2px 6px;\n    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;\n    font-size: 0.9em;\n    color: #d73e48;\n    white-space: nowrap;\n}\n\n.markdown-list {\n    margin: 8px 0;\n    padding-left: 24px;\n}\n\n.markdown-list li {\n    margin: 4px 0;\n    line-height: 1.5;\n}\n\n.markdown-link {\n    color: #0d6efd;\n    text-decoration: underline;\n    transition: color 0.2s;\n}\n\n.markdown-link:hover {\n    color: #0a58ca;\n    text-decoration: none;\n}\n\n/* Ensure proper text wrapping in message content */\n.message-content {\n    background: #f8f9fa;\n    border-radius: 12px;\n    padding: 12px 40px 12px 16px; /* Extra right padding for copy button */\n    font-size: 14px;\n    line-height: 1.5;\n    word-wrap: break-word;\n    position: relative;\n    overflow-wrap: break-word;\n    hyphens: auto;\n    max-width: 100%;\n    overflow-x: hidden;\n}\n\n/* Enhanced JSON content display */\n.json-content-wrapper {\n    margin: 8px 0;\n}\n\n.json-main-content {\n    margin-bottom: 12px;\n}\n\n.json-raw-section {\n    margin-top: 12px;\n}\n\n.json-toggle-button {\n    background: white;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 12px;\n    color: #495057;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: inherit;\n}\n\n.json-toggle-button:hover {\n    background: #f8f9fa;\n    border-color: #adb5bd;\n    color: #212529;\n}\n\n.json-toggle-button i {\n    font-size: 12px;\n}\n\n/* Compact code block for JSON in collapsible sections */\n.json-raw-section .code-block {\n    margin: 8px 0 0 0;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: auto;\n}\n\n/* Better mobile responsiveness for JSON content */\n@media (max-width: 768px) {\n    .json-raw-section .code-block {\n        font-size: 11px;\n        max-height: 200px;\n    }\n}\n\n/* JSON raw section styling - simplified since we use code editor in dialog */\n.json-raw-section {\n    margin-top: 12px;\n}\n\n/* Input Area */\n.input-area {\n    padding: 16px;\n    background: white;\n    border-top: 1px solid #dee2e6;\n    flex-shrink: 0; /* Prevent input area from shrinking */\n    margin-top: auto; /* Push to bottom */\n}\n\n.input-container {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n.rerun-mode-container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background-color: #f0f9ff;\n    border-radius: 8px;\n    gap: 16px;\n}\n\n.rerun-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: #0369a1;\n    font-size: 14px;\n}\n\n.rerun-message i {\n    font-size: 16px;\n}\n\n.rerun-message strong {\n    font-family: 'Fira Code', 'Consolas', monospace;\n}\n\n.rerun-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    min-width: 100px;\n    justify-content: center;\n}\n\n.rerun-button span {\n    font-weight: 500;\n}\n\n.rerun-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.reset-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    min-width: 120px;\n    justify-content: center;\n    background-color: #6b7280;\n}\n\n.reset-button:hover:not(:disabled) {\n    background-color: #4b5563;\n}\n\n.reset-button span {\n    font-weight: 500;\n}\n\n.message-input {\n    flex: 1;\n}\n\n.message-input textarea {\n    resize: none;\n    font-size: 14px;\n}\n\n.send-button {\n    margin-bottom: 1px;\n}\n\n/* Sidebar */\n.sidebar {\n    width: 100%; /* Changed from fixed 360px to 100% */\n    background: white;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n/* Kendo Splitter Specific Styles */\n.harness-body kendo-splitter {\n    height: 100%;\n}\n\n.harness-body kendo-splitter-pane {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n/* Sidebar Tabs */\n.sidebar-tabs {\n    display: flex;\n    background: #f8f9fa;\n    border-bottom: 1px solid #dee2e6;\n}\n\n.tab-button {\n    flex: 1;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    border-bottom: 2px solid transparent;\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.tab-button:hover {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.tab-button.active {\n    color: #0d6efd;\n    border-bottom-color: #0d6efd;\n    background: white;\n}\n\n.tab-button i {\n    font-size: 14px;\n}\n\n.tab-button .badge {\n    background: #6c757d;\n    color: white;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 10px;\n    margin-left: 4px;\n}\n\n.tab-button.active .badge {\n    background: #0d6efd;\n}\n\n.tab-button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n}\n\n/* Sidebar Content */\n.sidebar-content {\n    flex: 1;\n    overflow-y: auto;\n    width: 100%; /* Ensure content takes full width */\n}\n\n.tab-content {\n    padding: 20px;\n    width: 100%; /* Ensure content takes full width */\n    box-sizing: border-box; /* Include padding in width calculation */\n}\n\n.tab-header {\n    margin-bottom: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    position: relative;\n}\n\n.tab-header .custom-button.icon-only {\n    position: absolute;\n    top: 0;\n    right: 0;\n}\n\n.tab-header h4 {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #212529;\n}\n\n.tab-header p {\n    margin: 0;\n    font-size: 13px;\n    color: #6c757d;\n}\n\n.tab-header .custom-button.small {\n    align-self: flex-start;\n    padding: 6px 12px;\n    font-size: 13px;\n}\n\n.tab-header .custom-button.small i {\n    margin-right: 4px;\n}\n\n/* Variables */\n.variables-list {\n    margin-bottom: 16px;\n    width: 100%;\n}\n\n.variable-item {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n    align-items: center;\n    width: 100%;\n}\n\n.variable-name {\n    width: 30%; /* Changed from fixed width to percentage */\n    min-width: 100px;\n}\n\n.variable-type {\n    width: 25%; /* Changed from fixed width to percentage */\n    min-width: 80px;\n}\n\n.variable-value {\n    flex: 1;\n    min-width: 0; /* Allow flex item to shrink below content size */\n}\n\n.remove-button {\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.add-variable-button {\n    width: 100%;\n}\n\n.empty-variables {\n    text-align: center;\n    padding: 40px 20px;\n    color: #6c757d;\n}\n\n/* Saved Conversations */\n.saved-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.empty-saved {\n    text-align: center;\n    padding: 40px 20px;\n    color: #6c757d;\n}\n\n.empty-saved i {\n    font-size: 36px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n.saved-item {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    padding: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.saved-item:hover {\n    background: #f8f9fa;\n    border-color: #adb5bd;\n}\n\n.saved-item.current {\n    background: #e7f3ff;\n    border-color: #0d6efd;\n}\n\n.saved-info h5 {\n    margin: 0 0 4px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #212529;\n}\n\n.saved-info p {\n    margin: 0 0 4px 0;\n    font-size: 12px;\n    color: #6c757d;\n}\n\n.saved-date {\n    font-size: 11px;\n    color: #6c757d;\n}\n\n/* Responsive adjustments */\n@media (max-width: 1200px) {\n    .sidebar {\n        width: 320px;\n    }\n}\n\n@media (max-width: 992px) {\n    .message-user,\n    .message-assistant {\n        max-width: 85%;\n    }\n    \n    .sidebar {\n        width: 280px;\n    }\n}\n\n/* Custom scrollbar */\n.messages-container::-webkit-scrollbar,\n.sidebar-content::-webkit-scrollbar {\n    width: 8px;\n}\n\n.messages-container::-webkit-scrollbar-track,\n.sidebar-content::-webkit-scrollbar-track {\n    background: #f1f1f1;\n}\n\n.messages-container::-webkit-scrollbar-thumb,\n.sidebar-content::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.messages-container::-webkit-scrollbar-thumb:hover,\n.sidebar-content::-webkit-scrollbar-thumb:hover {\n    background: #a1a1a1;\n}\n\n/* Dialog customization */\n::ng-deep .ai-agent-test-harness .k-dialog-wrapper {\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-titlebar {\n    background: #343a40;\n    color: white;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-title {\n    font-weight: 600;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-titlebar-actions .k-button {\n    color: white;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-content {\n    padding: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* JSON Dialog Styles - removed since we're using WindowService */\n\n/* Advanced Parameters Styles */\n.advanced-params-panel {\n    margin-top: 24px;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n}\n\n.advanced-params-panel ::ng-deep .k-expander-title {\n    font-weight: 600;\n    color: #495057;\n}\n\n.advanced-settings {\n    padding: 16px;\n}\n\n.advanced-param-input {\n    width: 100%;\n}\n\n.advanced-param-switch {\n    margin-top: 8px;\n}\n\n/* Format selector dropdown */\n.format-selector {\n    width: 100%;\n}"] }]
+        args: [{ standalone: false, selector: 'mj-ai-test-harness', template: "@if (isVisible) {\n  <div class=\"harness-container\" kendoWindowContainer>\n    <!-- Header -->\n    <div class=\"harness-header\">\n      @if (entity) {\n        <div class=\"agent-info\">\n          <div class=\"agent-details\">\n            @if (hasEntityLogo()) {\n              <img [src]=\"getEntityLogoURL()\" [alt]=\"getEntityName() + ' logo'\" class=\"entity-logo\">\n            } @else {\n              <i [class]=\"getEntityIconClass()\"></i>\n            }\n            <div>\n              <h3>{{ getEntityName() }}</h3>\n              @if (entity.Description) {\n                <p>{{ entity.Description }}</p>\n              }\n            </div>\n          </div>\n          <div class=\"header-actions\">\n            <button\n              class=\"custom-button\"\n              (click)=\"clearConversation()\"\n              [disabled]=\"isExecuting || conversationMessages.length === 0\"\n              title=\"Clear conversation\">\n              <i class=\"fa-solid fa-broom\"></i>\n              Clear\n            </button>\n            <button\n              class=\"custom-button\"\n              (click)=\"saveConversation()\"\n              [disabled]=\"conversationMessages.length === 0\"\n              title=\"Save conversation\">\n              <i class=\"fa-solid fa-save\"></i>\n              Save\n            </button>\n            <button\n              class=\"custom-button\"\n              (click)=\"exportConversation()\"\n              [disabled]=\"conversationMessages.length === 0\"\n              title=\"Export conversation\">\n              <i class=\"fa-solid fa-download\"></i>\n              Export\n            </button>\n            <button\n              class=\"custom-button\"\n              (click)=\"importConversation()\"\n              title=\"Import conversation\">\n              <i class=\"fa-solid fa-upload\"></i>\n              Import\n            </button>\n            <input\n              #fileInput\n              type=\"file\"\n              accept=\".json\"\n              style=\"display: none\"\n              (change)=\"onFileSelected($event)\">\n            <button\n              class=\"custom-button icon-only\"\n              (click)=\"toggleSidebar()\"\n              title=\"Toggle sidebar\">\n              <i class=\"fa-solid\" [class.fa-chevron-right]=\"!showSidebar\" [class.fa-chevron-left]=\"showSidebar\"></i>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n    <!-- Main Content Area with Splitter -->\n    <div class=\"harness-body\">\n      @if (showSidebar) {\n        <kendo-splitter\n          orientation=\"horizontal\"\n          style=\"height: 100%; width: 100%;\">\n          <!-- Chat Area (Left Pane) -->\n          <kendo-splitter-pane\n            [collapsible]=\"false\"\n            [resizable]=\"true\"\n            [min]=\"'400px'\">\n            <div class=\"chat-area\">\n              <!-- Messages Container -->\n              <div class=\"messages-container\" #messagesContainer>\n                @if (conversationMessages.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-comments\"></i>\n                    <h4>Start a conversation</h4>\n                    <p>Send a message to begin testing the AI agent</p>\n                  </div>\n                }\n                @for (message of conversationMessages; track message.id) {\n                  <div [ngClass]=\"getMessageClass(message)\">\n                    <div class=\"message-header\">\n                      <span class=\"message-role\">\n                        @if (message.role === 'user') {\n                          <i class=\"fa-solid fa-user\"></i> You\n                        } @else {\n                          @if (hasEntityLogo()) {\n                            <img [src]=\"getEntityLogoURL()\" [alt]=\"getEntityName() + ' logo'\" class=\"message-role-logo\">\n                          } @else {\n                            <i [class]=\"getEntityIconClass()\"></i>\n                          }\n                          {{ getEntityName() || 'Assistant' }}\n                        }\n                      </span>\n                      <span class=\"message-time\">{{ formatTimestamp(message.timestamp) }}</span>\n                      @if (message.isStreaming && message.elapsedTime !== undefined) {\n                        <span class=\"execution-time streaming\">\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i> {{ formatElapsedTime(message.elapsedTime) }}\n                        </span>\n                      } @else if (message.executionTime) {\n                        <span class=\"execution-time\" [title]=\"getExecutionSummary(message)\">{{ formatExecutionTime(message.executionTime) }}</span>\n                      }\n                      @if (showRawToggle(message)) {\n                        <button class=\"raw-toggle\" (click)=\"showRawJsonDialog(message)\" title=\"View raw JSON response\">\n                          <i class=\"fa-solid fa-code\"></i>\n                        </button>\n                      }\n                    </div>\n                    <div class=\"message-content\">\n                      <button class=\"copy-button-in-bubble\" (click)=\"copyMessage(message)\" title=\"Copy message\">\n                        <i class=\"fa-solid fa-copy\"></i>\n                      </button>\n                      @if (message.isStreaming) {\n                        <div class=\"streaming-wrapper\">\n                          <span class=\"streaming-content\" [innerHTML]=\"getFormattedStreamingContent(message)\"></span>\n                          <span class=\"cursor\">|</span>\n                        </div>\n                      } @else {\n                        <div [innerHTML]=\"getFormattedContent(message)\"></div>\n                      }\n                      @if (message.error) {\n                        <div class=\"error-details\">\n                          <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                          {{ message.error }}\n                        </div>\n                      }\n                      @if (hasPayload(message.payload) && mode === 'agent' && message.role === 'assistant') {\n                        <div class=\"payload-section\" [class.collapsed]=\"message.payloadCollapsed\">\n                          <div class=\"payload-header\" (click)=\"togglePayloadCollapse(message)\">\n                            <span class=\"payload-label\">\n                              <i class=\"fa-solid fa-code\"></i> Payload\n                            </span>\n                            <button class=\"payload-toggle\" type=\"button\">\n                              <i class=\"fa-solid\" [class.fa-chevron-down]=\"!message.payloadCollapsed\" [class.fa-chevron-right]=\"message.payloadCollapsed\"></i>\n                            </button>\n                          </div>\n                          @if (!message.payloadCollapsed) {\n                            <div class=\"payload-content\">\n                              <mj-code-editor\n                                [ngModel]=\"formatJson(message.payload)\"\n                                [language]=\"'json'\"\n                                [readonly]=\"true\"\n                                style=\"height: 300px; width: 100%;\">\n                              </mj-code-editor>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n              <!-- Input Area -->\n              <div class=\"input-area\">\n                @if (originalPromptRunId && conversationMessages.length > 0) {\n                  <!-- Re-run mode - show loaded message -->\n                  <div class=\"rerun-mode-container\">\n                    <div class=\"rerun-message\">\n                      <i class=\"fa-solid fa-rotate-right\"></i>\n                      <span>Messages from Prompt Run <strong>{{ originalPromptRunId.substring(0, 8) }}</strong> loaded above</span>\n                    </div>\n                    <div class=\"rerun-buttons\">\n                      @if (!hasExecutedRerun) {\n                        <!-- Show Re-Run button if we haven't executed yet -->\n                        <button\n                          class=\"send-button rerun-button\"\n                          (click)=\"executeRerun()\"\n                          [disabled]=\"isExecuting\"\n                          title=\"Re-run with loaded messages\">\n                          @if (isExecuting) {\n                            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                            <span>Running...</span>\n                          } @else {\n                            <i class=\"fa-solid fa-play\"></i>\n                            <span>Re-Run</span>\n                          }\n                        </button>\n                      } @else {\n                        <!-- Show only Reset button after execution -->\n                        <button\n                          class=\"send-button reset-button\"\n                          (click)=\"resetToOriginalMessages()\"\n                          [disabled]=\"isExecuting\"\n                          title=\"Reset conversation messages to the original state from the prompt run. Model settings and parameters will be preserved.\">\n                          <i class=\"fa-solid fa-rotate-left\"></i>\n                          <span>Reset Messages</span>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                } @else {\n                  <!-- Normal mode - show text input -->\n                  <div class=\"input-container\">\n                    <kendo-textarea\n                      #messageInput\n                      [(ngModel)]=\"currentUserMessage\"\n                      [rows]=\"3\"\n                      placeholder=\"Type your message here... (Press Enter to send, Shift+Enter for new line)\"\n                      (keypress)=\"handleKeyPress($event)\"\n                      [disabled]=\"isExecuting\"\n                      class=\"message-input\">\n                    </kendo-textarea>\n                    <button\n                      class=\"send-button\"\n                      (click)=\"sendMessage()\"\n                      [disabled]=\"isExecuting || !currentUserMessage.trim()\"\n                      title=\"Send message\">\n                      @if (isExecuting) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                      } @else {\n                        <i class=\"fa-solid fa-paper-plane\"></i>\n                      }\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n          </kendo-splitter-pane>\n          <!-- Sidebar (Right Pane) -->\n          <kendo-splitter-pane\n            [collapsible]=\"false\"\n            [resizable]=\"true\"\n            [size]=\"'30%'\"\n            [min]=\"'300px'\">\n            <div class=\"sidebar\">\n              <!-- Tab Navigation -->\n              <div class=\"sidebar-tabs\">\n                @if (mode === 'agent') {\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'agentVariables'\"\n                    [disabled]=\"executionMonitorMode === 'live' && activeTab !== 'agentVariables'\"\n                    (click)=\"selectTab('agentVariables')\">\n                    <i class=\"fa-solid fa-code\"></i>\n                    Agent Variables\n                  </button>\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'executionMonitor'\"\n                    (click)=\"selectTab('executionMonitor')\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    Execution Monitor\n                  </button>\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'agentSettings'\"\n                    [disabled]=\"executionMonitorMode === 'live' && activeTab !== 'agentSettings'\"\n                    (click)=\"selectTab('agentSettings')\">\n                    <i class=\"fa-solid fa-sliders\"></i>\n                    Settings\n                  </button>\n                } @else {\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'templateVariables'\"\n                    (click)=\"selectTab('templateVariables')\">\n                    <i class=\"fa-solid fa-code\"></i>\n                    Template Variables\n                  </button>\n                  <button\n                    class=\"tab-button\"\n                    [class.active]=\"activeTab === 'modelSettings'\"\n                    (click)=\"selectTab('modelSettings')\">\n                    <i class=\"fa-solid fa-sliders\"></i>\n                    Model Settings\n                  </button>\n                }\n                <button\n                  class=\"tab-button\"\n                  [class.active]=\"activeTab === 'savedConversations'\"\n                  [disabled]=\"executionMonitorMode === 'live' && activeTab !== 'savedConversations'\"\n                  (click)=\"selectTab('savedConversations')\">\n                  <i class=\"fa-solid fa-history\"></i>\n                  Saved\n                  @if (savedConversations.length > 0) {\n                    <span class=\"badge\">{{ savedConversations.length }}</span>\n                  }\n                </button>\n              </div>\n              <!-- Tab Content -->\n              <div class=\"sidebar-content\">\n                <!-- Agent Variables Tab (Unified) -->\n                @if (activeTab === 'agentVariables') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Agent Variables</h4>\n                      <p>Variables available during agent execution and template rendering</p>\n                    </div>\n                    <div class=\"variables-list\">\n                      @if (agentVariables.length === 0) {\n                        <div class=\"empty-variables\">\n                          <p>No variables defined. Click \"Add Variable\" to get started.</p>\n                        </div>\n                      }\n                      @for (variable of agentVariables; track $index) {\n                        <div class=\"variable-item\">\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.name\"\n                            placeholder=\"Variable name\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-name\">\n                          </kendo-textbox>\n                          <kendo-dropdownlist\n                            [(ngModel)]=\"variable.type\"\n                                                [data]=\"[\n                                                    {text: 'String', value: 'string'}, \n                                                    {text: 'Number', value: 'number'}, \n                                                    {text: 'Boolean', value: 'boolean'}, \n                                                    {text: 'Object', value: 'object'}\n                                                ]\"\n                            textField=\"text\"\n                            valueField=\"value\"\n                            [valuePrimitive]=\"true\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-type\">\n                          </kendo-dropdownlist>\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.value\"\n                            [placeholder]=\"variable.type === 'object' ? 'JSON value' : 'Value'\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-value\">\n                          </kendo-textbox>\n                          <button\n                            class=\"remove-button\"\n                            (click)=\"removeAgentVariable($index)\"\n                            [disabled]=\"isExecuting\"\n                            title=\"Remove variable\">\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                    <button\n                      class=\"add-button\"\n                      (click)=\"addAgentVariable()\"\n                      [disabled]=\"isExecuting\">\n                      <i class=\"fa-solid fa-plus\"></i> Add Variable\n                    </button>\n                  </div>\n                }\n                <!-- Execution Monitor Tab -->\n                @if (activeTab === 'executionMonitor') {\n                  <div class=\"tab-content\" style=\"padding: 0; height: 100%;\">\n                    <mj-agent-execution-monitor\n                      [mode]=\"executionMonitorMode\"\n                      [agentRun]=\"currentAgentRun\"\n                      [liveSteps]=\"liveAgentSteps\"\n                      [autoExpand]=\"true\"\n                      (viewRunClick)=\"navigateToAgentRun($event)\"\n                      [runId]=\"getLastRunId()\"\n                      [runType]=\"mode\">\n                    </mj-agent-execution-monitor>\n                  </div>\n                }\n                <!-- Agent Settings Tab -->\n                @if (activeTab === 'agentSettings') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Agent Settings</h4>\n                      <p>Configure agent execution parameters</p>\n                    </div>\n                    <div class=\"model-settings\">\n                      <div class=\"setting-group\">\n                        <label>AI Configuration</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"agentConfigurationId\"\n                          [data]=\"availableConfigurations\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          placeholder=\"Select a configuration...\"\n                          class=\"configuration-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          @if (agentConfigurationId) {\n                            @for (config of availableConfigurations; track config.ID) {\n                              @if (IsConfigMatchById(config, agentConfigurationId) && config.Description) {\n                                {{ config.Description }}\n                              }\n                            }\n                          } @else {\n                            Using default configuration\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- Template Variables Tab (Prompt Mode) -->\n                @if (activeTab === 'templateVariables') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Template Variables</h4>\n                      <p>Variables for prompt template rendering</p>\n                    </div>\n                    <div class=\"variables-list\">\n                      @for (variable of templateVariables; track $index) {\n                        <div class=\"variable-item\">\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.name\"\n                            placeholder=\"Variable name\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-name\">\n                          </kendo-textbox>\n                          <kendo-dropdownlist\n                            [(ngModel)]=\"variable.type\"\n                                                [data]=\"[\n                                                    {text: 'String', value: 'string'}, \n                                                    {text: 'Number', value: 'number'}, \n                                                    {text: 'Boolean', value: 'boolean'}, \n                                                    {text: 'Object', value: 'object'}\n                                                ]\"\n                            textField=\"text\"\n                            valueField=\"value\"\n                            [valuePrimitive]=\"true\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-type\">\n                          </kendo-dropdownlist>\n                          <kendo-textbox\n                            [(ngModel)]=\"variable.value\"\n                            [placeholder]=\"variable.type === 'object' ? 'JSON value' : 'Value'\"\n                            [disabled]=\"isExecuting\"\n                            class=\"variable-value\">\n                          </kendo-textbox>\n                          <button\n                            class=\"remove-button\"\n                            (click)=\"removeTemplateVariable($index)\"\n                            title=\"Remove variable\">\n                            <i class=\"fa-solid fa-times\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                    <button\n                      class=\"add-button\"\n                      (click)=\"addTemplateVariable()\">\n                      <i class=\"fa-solid fa-plus\"></i>\n                      Add Variable\n                    </button>\n                  </div>\n                }\n                <!-- Model Settings Tab (Prompt Mode) -->\n                @if (activeTab === 'modelSettings') {\n                  <div class=\"tab-content\" style=\"overflow-y: auto;\">\n                    <div class=\"tab-header\">\n                      <h4>Model Settings</h4>\n                      <p>Configure AI model parameters</p>\n                      <button class=\"custom-button icon-only\" (click)=\"resetToPromptDefaults()\" title=\"Reset to Prompt Settings\">\n                        <i class=\"fa-solid fa-undo\"></i>\n                      </button>\n                    </div>\n                    <div class=\"model-settings\">\n                      <div class=\"setting-group\">\n                        <label>AI Model</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedModelId\"\n                          (ngModelChange)=\"onModelSelectionChange()\"\n                          [data]=\"availableModels\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          placeholder=\"Select a model...\"\n                          class=\"model-selector\">\n                        </kendo-dropdownlist>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>AI Vendor</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedVendorId\"\n                          [data]=\"availableVendors\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          [disabled]=\"availableVendors.length <= 1 || !selectedModelId\"\n                          placeholder=\"Select a vendor...\"\n                          class=\"vendor-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          @if (!selectedModelId) {\n                            Using default vendor for the default model\n                          } @else if (availableVendors.length <= 1) {\n                            Only one vendor available for this model\n                          } @else {\n                            Select the inference provider for this model\n                          }\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>AI Configuration</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedConfigurationId\"\n                          [data]=\"availableConfigurations\"\n                          textField=\"Name\"\n                          valueField=\"ID\"\n                          [valuePrimitive]=\"true\"\n                          placeholder=\"Select a configuration...\"\n                          class=\"configuration-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          @if (selectedConfigurationId) {\n                            @for (config of availableConfigurations; track config.ID) {\n                              @if (IsConfigMatchById(config, selectedConfigurationId) && config.Description) {\n                                {{ config.Description }}\n                              }\n                            }\n                          } @else {\n                            Using default configuration\n                          }\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>Response Format</label>\n                        <kendo-dropdownlist\n                          [(ngModel)]=\"selectedResponseFormat\"\n                          [data]=\"responseFormatOptions\"\n                          textField=\"text\"\n                          valueField=\"value\"\n                          placeholder=\"Select format...\"\n                          class=\"format-selector\">\n                        </kendo-dropdownlist>\n                        <div class=\"setting-help\">\n                          Expected format for AI response (defaults to prompt setting)\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label>Max Tokens</label>\n                        <kendo-numerictextbox\n                          [(ngModel)]=\"maxTokens\"\n                          [min]=\"100\"\n                          [max]=\"8000\"\n                          [step]=\"100\"\n                          placeholder=\"Max tokens...\"\n                          class=\"max-tokens-input\">\n                        </kendo-numerictextbox>\n                        <div class=\"setting-help\">\n                          Maximum length of generated response\n                        </div>\n                      </div>\n                      <div class=\"setting-group\">\n                        <label class=\"checkbox-label\">\n                          <input type=\"checkbox\"\n                            [(ngModel)]=\"skipValidation\"\n                            class=\"skip-validation-checkbox\">\n                          Skip Validation\n                        </label>\n                        <div class=\"setting-help\">\n                          Skip output validation during testing\n                        </div>\n                      </div>\n                      <!-- Advanced Parameters Expansion Panel -->\n                      <kendo-expansionpanel\n                        [expanded]=\"advancedParamsExpanded\"\n                        (action)=\"toggleAdvancedParams()\"\n                        title=\"Advanced Parameters\"\n                        class=\"advanced-params-panel\">\n                        <div class=\"advanced-settings\">\n                          <div class=\"setting-group\">\n                            <label title=\"Controls randomness: 0 = more focused and deterministic, 2 = more random and creative\">\n                              Temperature\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.temperature\"\n                              [min]=\"0\"\n                              [max]=\"2\"\n                              [step]=\"0.1\"\n                              [format]=\"'n1'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Nucleus sampling: only consider tokens with cumulative probability up to this value. 1 = consider all tokens\">\n                              Top P\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.topP\"\n                              [min]=\"0\"\n                              [max]=\"1\"\n                              [step]=\"0.01\"\n                              [format]=\"'n2'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Only sample from the top K tokens. Lower values reduce randomness\">\n                              Top K\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.topK\"\n                              [min]=\"1\"\n                              [max]=\"100\"\n                              [step]=\"1\"\n                              [format]=\"'n0'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Minimum probability for token selection. Filters out low-probability tokens\">\n                              Min P\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.minP\"\n                              [min]=\"0\"\n                              [max]=\"1\"\n                              [step]=\"0.01\"\n                              [format]=\"'n2'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Penalizes tokens based on their frequency in the text. Positive values reduce repetition\">\n                              Frequency Penalty\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.frequencyPenalty\"\n                              [min]=\"-2\"\n                              [max]=\"2\"\n                              [step]=\"0.1\"\n                              [format]=\"'n1'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Penalizes tokens that have appeared in the text. Positive values increase topic diversity\">\n                              Presence Penalty\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.presencePenalty\"\n                              [min]=\"-2\"\n                              [max]=\"2\"\n                              [step]=\"0.1\"\n                              [format]=\"'n1'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Random seed for deterministic generation. Same seed produces same output\">\n                              Seed\n                            </label>\n                            <kendo-numerictextbox\n                              [(ngModel)]=\"advancedParams.seed\"\n                              [format]=\"'n0'\"\n                              placeholder=\"None\"\n                              class=\"advanced-param-input\">\n                            </kendo-numerictextbox>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Sequences that will stop generation when encountered. Enter comma-separated values\">\n                              Stop Sequences\n                            </label>\n                            <kendo-textarea\n                              [(ngModel)]=\"stopSequencesText\"\n                              (ngModelChange)=\"updateStopSequences()\"\n                              [rows]=\"2\"\n                              placeholder=\"Enter comma-separated sequences\"\n                              class=\"advanced-param-input\">\n                            </kendo-textarea>\n                            <div class=\"setting-help\">\n                              Separate multiple sequences with commas\n                            </div>\n                          </div>\n                          <div class=\"setting-group\">\n                            <label title=\"Include log probabilities of the output tokens in the response\">\n                              Include Log Probs\n                            </label>\n                            <kendo-switch\n                              [(ngModel)]=\"advancedParams.includeLogProbs\"\n                              class=\"advanced-param-switch\">\n                            </kendo-switch>\n                          </div>\n                          @if (advancedParams.includeLogProbs) {\n                            <div class=\"setting-group\">\n                              <label title=\"Number of top log probabilities to include for each token\">\n                                Top Log Probs\n                              </label>\n                              <kendo-numerictextbox\n                                [(ngModel)]=\"advancedParams.topLogProbs\"\n                                [min]=\"2\"\n                                [max]=\"20\"\n                                [step]=\"1\"\n                                [format]=\"'n0'\"\n                                placeholder=\"2\"\n                                class=\"advanced-param-input\">\n                              </kendo-numerictextbox>\n                            </div>\n                          }\n                        </div>\n                      </kendo-expansionpanel>\n                    </div>\n                  </div>\n                }\n                <!-- Saved Conversations Tab -->\n                @if (activeTab === 'savedConversations') {\n                  <div class=\"tab-content\">\n                    <div class=\"tab-header\">\n                      <h4>Saved Conversations</h4>\n                      <p>Previously saved test sessions</p>\n                      @if (currentConversationId) {\n                        <button class=\"custom-button small primary\" (click)=\"newConversation()\" title=\"Start a new conversation\">\n                          <i class=\"fa-solid fa-plus\"></i>\n                          New\n                        </button>\n                      }\n                    </div>\n                    <div class=\"saved-list\">\n                      @if (savedConversations.length === 0) {\n                        <div class=\"empty-saved\">\n                          <i class=\"fa-solid fa-folder-open\"></i>\n                          <p>No saved conversations</p>\n                        </div>\n                      }\n                      @for (conv of savedConversations; track conv.id) {\n                        <div class=\"saved-item\"\n                          [class.current]=\"conv.id === currentConversationId\"\n                          (click)=\"loadConversation(conv)\">\n                          <div class=\"saved-info\">\n                            <h5>{{ conv.name }}</h5>\n                            <p>{{ conv.messages.length }} messages</p>\n                            <span class=\"saved-date\">{{ conv.updatedAt | date:'short' }}</span>\n                          </div>\n                          <button\n                            class=\"delete-button\"\n                            (click)=\"deleteConversation(conv, $event)\"\n                            title=\"Delete conversation\">\n                            <i class=\"fa-solid fa-trash\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          </kendo-splitter-pane>\n        </kendo-splitter>\n      } @else {\n        <!-- No sidebar - full width chat -->\n        <div class=\"chat-area\">\n          <!-- Messages Container -->\n          <div class=\"messages-container\" #messagesContainer>\n            @if (conversationMessages.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-comments\"></i>\n                <h4>Start a conversation</h4>\n                <p>Send a message to begin testing the AI agent</p>\n              </div>\n            }\n            @for (message of conversationMessages; track message.id) {\n              <div [ngClass]=\"getMessageClass(message)\">\n                <div class=\"message-header\">\n                  <span class=\"message-role\">\n                    @if (message.role === 'user') {\n                      <i class=\"fa-solid fa-user\"></i> You\n                    } @else {\n                      <i class=\"fa-solid fa-robot\"></i> {{ getEntityName() || 'Assistant' }}\n                    }\n                  </span>\n                  <span class=\"message-time\">{{ formatTimestamp(message.timestamp) }}</span>\n                  @if (message.isStreaming && message.elapsedTime !== undefined) {\n                    <span class=\"execution-time streaming\">\n                      <i class=\"fa-solid fa-spinner fa-spin\"></i> {{ formatElapsedTime(message.elapsedTime) }}\n                    </span>\n                  } @else if (message.executionTime) {\n                    <span class=\"execution-time\" [title]=\"getExecutionSummary(message)\">{{ formatExecutionTime(message.executionTime) }}</span>\n                  }\n                  @if (showRawToggle(message)) {\n                    <button class=\"raw-toggle\" (click)=\"showRawJsonDialog(message)\" title=\"View raw JSON response\">\n                      <i class=\"fa-solid fa-code\"></i>\n                    </button>\n                  }\n                  @if (message.executionData && mode === 'agent' && message.role === 'assistant') {\n                    <button class=\"execution-history-toggle\" (click)=\"showMessageExecutionHistory(message)\" title=\"View execution details\">\n                      <i class=\"fa-solid fa-diagram-project\"></i>\n                    </button>\n                  }\n                  @if (message.agentRunId && mode === 'agent' && message.role === 'assistant') {\n                    <button class=\"execution-history-toggle\" (click)=\"navigateToAgentRun({runId: message.agentRunId, runType: 'agent'})\" title=\"View full run details\">\n                      <i class=\"fa-solid fa-external-link-alt\"></i>\n                    </button>\n                  }\n                </div>\n                <div class=\"message-content\">\n                  <button class=\"copy-button-in-bubble\" (click)=\"copyMessage(message)\" title=\"Copy message\">\n                    <i class=\"fa-solid fa-copy\"></i>\n                  </button>\n                  @if (message.isStreaming) {\n                    <div class=\"streaming-wrapper\">\n                      <span class=\"streaming-content\">{{ message.streamingContent }}<span class=\"cursor\">|</span></span>\n                    </div>\n                  } @else {\n                    <div [innerHTML]=\"getFormattedContent(message)\"></div>\n                  }\n                  @if (message.error) {\n                    <div class=\"error-details\">\n                      <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                      {{ message.error }}\n                    </div>\n                  }\n                  @if (hasPayload(message.payload) && mode === 'agent' && message.role === 'assistant') {\n                    <div class=\"payload-section\" [class.collapsed]=\"message.payloadCollapsed\">\n                      <div class=\"payload-header\" (click)=\"togglePayloadCollapse(message)\">\n                        <span class=\"payload-label\">\n                          <i class=\"fa-solid fa-code\"></i> Payload\n                        </span>\n                        <button class=\"payload-toggle\" type=\"button\">\n                          <i class=\"fa-solid\" [class.fa-chevron-down]=\"!message.payloadCollapsed\" [class.fa-chevron-right]=\"message.payloadCollapsed\"></i>\n                        </button>\n                      </div>\n                      @if (!message.payloadCollapsed) {\n                        <div class=\"payload-content\">\n                          <pre>{{ formatJson(message.payload) }}</pre>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n          <!-- Input Area -->\n          <div class=\"input-area\">\n            <div class=\"input-container\">\n              <kendo-textarea\n                #messageInput\n                [(ngModel)]=\"currentUserMessage\"\n                [rows]=\"3\"\n                placeholder=\"Type your message here... (Press Enter to send, Shift+Enter for new line)\"\n                (keypress)=\"handleKeyPress($event)\"\n                [disabled]=\"isExecuting\"\n                class=\"message-input\">\n              </kendo-textarea>\n              <button\n                class=\"send-button\"\n                (click)=\"sendMessage()\"\n                [disabled]=\"isExecuting || !currentUserMessage.trim()\"\n                title=\"Send message\">\n                @if (isExecuting) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                } @else {\n                  <i class=\"fa-solid fa-paper-plane\"></i>\n                }\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<!-- Save Conversation Dialog -->\n@if (showSaveDialog) {\n  <kendo-dialog\n    [title]=\"'Save Conversation'\"\n    [width]=\"400\"\n    (close)=\"cancelSaveDialog()\"\n    class=\"save-dialog\">\n    <div class=\"dialog-content\">\n      <p>Enter a name for this conversation:</p>\n      <input\n        #saveDialogInput\n        type=\"text\"\n        (keyup)=\"updateTempConversation()\"\n        placeholder=\"Conversation name\"\n        class=\"k-textbox k-input k-input-md k-rounded-md k-input-solid full-width\"  />\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton (click)=\"cancelSaveDialog()\">Cancel</button>\n      <button kendoButton\n        [primary]=\"true\"\n        (click)=\"confirmSaveConversation()\"\n        [disabled]=\"tempConversationName === ''\">\n        Save\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n<!-- Load Confirmation Dialog -->\n@if (showLoadConfirmDialog) {\n  <kendo-dialog\n    [title]=\"'Replace Current Conversation?'\"\n    [width]=\"400\"\n    (close)=\"cancelLoadConversation()\"\n    class=\"confirm-dialog\">\n    <div class=\"dialog-content\">\n      <p>Loading this conversation will replace the current one. Any unsaved changes will be lost.</p>\n      <p>Do you want to continue?</p>\n    </div>\n    <kendo-dialog-actions>\n      <button kendoButton (click)=\"cancelLoadConversation()\">Cancel</button>\n      <button kendoButton\n        [primary]=\"true\"\n        (click)=\"confirmLoadConversation()\">\n        Load Conversation\n      </button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n\n", styles: ["/* Container Styles */\n.harness-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: #f8f9fa;\n}\n\n/* Custom Button Styles */\n.custom-button {\n    background: white;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 13px;\n    color: #495057;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: inherit;\n}\n\n.custom-button:hover:not(:disabled) {\n    background: #f8f9fa;\n    border-color: #adb5bd;\n    color: #212529;\n}\n\n.custom-button:active:not(:disabled) {\n    background: #e9ecef;\n    border-color: #adb5bd;\n}\n\n.custom-button:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.custom-button.icon-only {\n    padding: 6px 8px;\n}\n\n.custom-button i {\n    font-size: 14px;\n}\n\n/* Send Button - Primary Style */\n.send-button {\n    background: #0d6efd;\n    border: 1px solid #0d6efd;\n    color: white;\n    border-radius: 4px;\n    padding: 8px 16px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 44px;\n    font-family: inherit;\n}\n\n.send-button:hover:not(:disabled) {\n    background: #0b5ed7;\n    border-color: #0a58ca;\n}\n\n.send-button:active:not(:disabled) {\n    background: #0a58ca;\n    border-color: #0a58ca;\n}\n\n.send-button:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.send-button i {\n    font-size: 16px;\n}\n\n/* Add Button */\n.add-button {\n    background: white;\n    border: 1px solid #0d6efd;\n    color: #0d6efd;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: inherit;\n}\n\n.add-button:hover {\n    background: #0d6efd;\n    color: white;\n}\n\n/* Remove/Delete Buttons */\n.remove-button,\n.delete-button {\n    background: transparent;\n    border: none;\n    color: #dc3545;\n    padding: 4px 8px;\n    font-size: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.remove-button:hover,\n.delete-button:hover {\n    background: rgba(220, 53, 69, 0.1);\n    color: #bd2130;\n}\n\n/* Copy Button in Message Bubble */\n.copy-button-in-bubble {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: transparent;\n    border: none;\n    padding: 6px;\n    font-size: 14px;\n    color: #adb5bd;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    opacity: 0;\n    z-index: 10; /* Ensure it's above content */\n}\n\n.message-content:hover .copy-button-in-bubble {\n    opacity: 1;\n}\n\n.copy-button-in-bubble:hover {\n    background: rgba(0, 0, 0, 0.08);\n    color: #6c757d;\n}\n\n.copy-button-in-bubble i {\n    font-size: 14px;\n}\n\n/* Model Settings Styles (Prompt Mode) */\n.model-settings {\n    padding: 16px;\n}\n\n.setting-group {\n    margin-bottom: 24px;\n}\n\n.setting-group label {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 600;\n    color: #495057;\n    font-size: 14px;\n}\n\n.model-selector,\n.vendor-selector {\n    width: 100%;\n}\n\n.temperature-slider {\n    width: 100%;\n    margin-top: 8px;\n}\n\n.max-tokens-input {\n    width: 100%;\n}\n\n.setting-help {\n    margin-top: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    font-style: italic;\n}\n\n/* Checkbox Styles */\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    font-weight: 600;\n    color: #495057;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.skip-validation-checkbox {\n    margin-right: 8px;\n    cursor: pointer;\n    width: 16px;\n    height: 16px;\n}\n\n/* Header Styles */\n.harness-header {\n    background: white;\n    border-bottom: 1px solid #dee2e6;\n    padding: 16px 20px;\n}\n\n.agent-info {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.agent-details {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.agent-details i {\n    font-size: 28px;\n    color: #17a2b8;\n}\n\n.agent-details .entity-logo {\n    width: 40px;\n    height: 40px;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-details h3 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: #212529;\n}\n\n.agent-details p {\n    margin: 4px 0 0 0;\n    font-size: 14px;\n    color: #6c757d;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n}\n\n/* Body Layout */\n.harness-body {\n    flex: 1;\n    display: flex;\n    overflow: hidden;\n}\n\n/* Chat Area */\n.chat-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: white;\n    border-right: 1px solid #dee2e6;\n    height: 100%;\n    min-height: 0; /* Important for flexbox children */\n}\n\n/* Messages Container */\n.messages-container {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    scroll-behavior: smooth;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    text-align: center;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state h4 {\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 500;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 14px;\n}\n\n/* Message Styles */\n.message {\n    margin-bottom: 20px;\n    animation: fadeIn 0.3s ease-in;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.message-user {\n    margin-left: auto;\n    max-width: 70%;\n}\n\n.message-assistant {\n    margin-right: auto;\n    max-width: 70%;\n}\n\n.message-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 8px;\n    font-size: 13px;\n}\n\n.message-role {\n    font-weight: 600;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.message-role i {\n    font-size: 14px;\n}\n\n.message-role .message-role-logo {\n    width: 16px;\n    height: 16px;\n    object-fit: cover;\n    border-radius: 3px;\n    display: inline-block;\n    vertical-align: middle;\n}\n\n.message-user .message-role {\n    color: #6f42c1;\n}\n\n.message-assistant .message-role {\n    color: #17a2b8;\n}\n\n.message-time {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.execution-time {\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    color: #495057;\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.execution-time.streaming {\n    background: #fff3cd;\n    color: #856404;\n    border: 1px solid #ffeaa7;\n}\n\n.raw-toggle {\n    background: transparent;\n    border: none;\n    padding: 4px 8px;\n    font-size: 12px;\n    color: #6c757d;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-left: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n}\n\n.raw-toggle:hover {\n    background: rgba(0, 0, 0, 0.05);\n    color: #495057;\n}\n\n.raw-toggle i {\n    font-size: 12px;\n}\n\n/* Message content styles are now defined above in enhanced content formatting section */\n\n.message-user .message-content {\n    background: #e7f3ff;\n    border: 1px solid #b8daff;\n}\n\n.message-assistant .message-content {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n}\n\n.message.streaming .message-content {\n    background: #fff3cd;\n    border: 1px solid #ffeaa7;\n}\n\n.streaming-content {\n    display: inline;\n}\n\n.streaming-wrapper {\n    position: relative;\n}\n\n.streaming-wrapper .cursor {\n    display: inline;\n    margin-left: 2px;\n}\n\n.cursor {\n    animation: blink 1s infinite;\n    font-weight: 100;\n    color: #495057;\n}\n\n@keyframes blink {\n    0%, 50% { opacity: 1; }\n    51%, 100% { opacity: 0; }\n}\n\n.error-details {\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 6px;\n    color: #721c24;\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-details i {\n    color: #dc3545;\n}\n\n/* Payload Section Styles */\n.payload-section {\n    margin-top: 12px;\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    overflow: hidden;\n    background: #ffffff;\n}\n\n.payload-header {\n    background: #f8f9fa;\n    padding: 8px 12px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    transition: background-color 0.2s;\n}\n\n.payload-header:hover {\n    background: #e9ecef;\n}\n\n.payload-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.payload-label i {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.payload-content {\n    max-height: 250px;\n    overflow: auto;\n    background: #f8f9fa;\n}\n\n.payload-content pre {\n    margin: 0;\n    padding: 12px;\n    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;\n    font-size: 12px;\n    line-height: 1.5;\n    color: #212529;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    background: transparent;\n}\n\n.payload-toggle {\n    background: transparent;\n    border: none;\n    padding: 4px;\n    cursor: pointer;\n    color: #6c757d;\n    transition: color 0.2s;\n}\n\n.payload-toggle:hover {\n    color: #495057;\n}\n\n.payload-toggle i {\n    font-size: 12px;\n}\n\n.payload-section.collapsed .payload-header {\n    border-bottom: none;\n}\n\n/* Dialog styles */\n.save-dialog,\n.confirm-dialog {\n    .dialog-content {\n        padding: 20px;\n        \n        p {\n            margin: 0 0 16px 0;\n            color: #333;\n            font-size: 14px;\n            line-height: 1.5;\n            \n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n        \n        .full-width {\n            width: 100%;\n        }\n        \n        input.k-textbox {\n            padding: 8px 12px;\n            font-size: 14px;\n            line-height: 1.5;\n            border: 1px solid #dee2e6;\n            border-radius: 4px;\n            \n            &:focus {\n                outline: none;\n                border-color: #ff6358;\n                box-shadow: 0 0 0 0.25rem rgba(255, 99, 88, 0.25);\n            }\n        }\n    }\n}\n\n/* Enhanced content formatting styles */\n.markdown-content {\n    line-height: 1.6;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    max-width: 100%;\n}\n\n/* Inline JSON editor styles */\n.inline-json-editor {\n    margin: 8px 0;\n    \n    .json-editor-container {\n        background: #f8f9fa;\n        border: 1px solid #e0e0e0;\n        border-radius: 4px;\n        overflow: hidden;\n        position: relative;\n        max-height: 400px;\n        \n        pre {\n            margin: 0;\n            padding: 12px;\n            font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;\n            font-size: 13px;\n            line-height: 1.5;\n            overflow: auto;\n            height: 100%;\n            background: transparent;\n            color: #333;\n            white-space: pre-wrap;\n            word-wrap: break-word;\n        }\n    }\n}\n\n.markdown-paragraph {\n    margin: 8px 0;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n}\n\n.markdown-h1 {\n    font-size: 1.5em;\n    font-weight: 600;\n    margin: 16px 0 8px 0;\n    color: #212529;\n    border-bottom: 2px solid #e9ecef;\n    padding-bottom: 4px;\n}\n\n.markdown-h2 {\n    font-size: 1.3em;\n    font-weight: 600;\n    margin: 14px 0 6px 0;\n    color: #212529;\n    border-bottom: 1px solid #e9ecef;\n    padding-bottom: 2px;\n}\n\n.markdown-h3 {\n    font-size: 1.1em;\n    font-weight: 600;\n    margin: 12px 0 4px 0;\n    color: #212529;\n}\n\n.code-block {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    padding: 16px;\n    margin: 12px 0;\n    overflow-x: auto;\n    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #212529;\n    white-space: pre;\n    word-wrap: normal;\n    max-width: 100%;\n}\n\n.code-block code {\n    background: none;\n    border: none;\n    padding: 0;\n    font-size: inherit;\n    color: inherit;\n    white-space: pre;\n    word-wrap: normal;\n}\n\n.language-json {\n    color: #d73e48;\n}\n\n.inline-code {\n    background: #f1f3f4;\n    border: 1px solid #dadce0;\n    border-radius: 4px;\n    padding: 2px 6px;\n    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;\n    font-size: 0.9em;\n    color: #d73e48;\n    white-space: nowrap;\n}\n\n.markdown-list {\n    margin: 8px 0;\n    padding-left: 24px;\n}\n\n.markdown-list li {\n    margin: 4px 0;\n    line-height: 1.5;\n}\n\n.markdown-link {\n    color: #0d6efd;\n    text-decoration: underline;\n    transition: color 0.2s;\n}\n\n.markdown-link:hover {\n    color: #0a58ca;\n    text-decoration: none;\n}\n\n/* Ensure proper text wrapping in message content */\n.message-content {\n    background: #f8f9fa;\n    border-radius: 12px;\n    padding: 12px 40px 12px 16px; /* Extra right padding for copy button */\n    font-size: 14px;\n    line-height: 1.5;\n    word-wrap: break-word;\n    position: relative;\n    overflow-wrap: break-word;\n    hyphens: auto;\n    max-width: 100%;\n    overflow-x: hidden;\n}\n\n/* Enhanced JSON content display */\n.json-content-wrapper {\n    margin: 8px 0;\n}\n\n.json-main-content {\n    margin-bottom: 12px;\n}\n\n.json-raw-section {\n    margin-top: 12px;\n}\n\n.json-toggle-button {\n    background: white;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    padding: 6px 12px;\n    font-size: 12px;\n    color: #495057;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-family: inherit;\n}\n\n.json-toggle-button:hover {\n    background: #f8f9fa;\n    border-color: #adb5bd;\n    color: #212529;\n}\n\n.json-toggle-button i {\n    font-size: 12px;\n}\n\n/* Compact code block for JSON in collapsible sections */\n.json-raw-section .code-block {\n    margin: 8px 0 0 0;\n    font-size: 12px;\n    max-height: 300px;\n    overflow-y: auto;\n}\n\n/* Better mobile responsiveness for JSON content */\n@media (max-width: 768px) {\n    .json-raw-section .code-block {\n        font-size: 11px;\n        max-height: 200px;\n    }\n}\n\n/* JSON raw section styling - simplified since we use code editor in dialog */\n.json-raw-section {\n    margin-top: 12px;\n}\n\n/* Input Area */\n.input-area {\n    padding: 16px;\n    background: white;\n    border-top: 1px solid #dee2e6;\n    flex-shrink: 0; /* Prevent input area from shrinking */\n    margin-top: auto; /* Push to bottom */\n}\n\n.input-container {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n.rerun-mode-container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background-color: #f0f9ff;\n    border-radius: 8px;\n    gap: 16px;\n}\n\n.rerun-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: #0369a1;\n    font-size: 14px;\n}\n\n.rerun-message i {\n    font-size: 16px;\n}\n\n.rerun-message strong {\n    font-family: 'Fira Code', 'Consolas', monospace;\n}\n\n.rerun-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    min-width: 100px;\n    justify-content: center;\n}\n\n.rerun-button span {\n    font-weight: 500;\n}\n\n.rerun-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.reset-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    min-width: 120px;\n    justify-content: center;\n    background-color: #6b7280;\n}\n\n.reset-button:hover:not(:disabled) {\n    background-color: #4b5563;\n}\n\n.reset-button span {\n    font-weight: 500;\n}\n\n.message-input {\n    flex: 1;\n}\n\n.message-input textarea {\n    resize: none;\n    font-size: 14px;\n}\n\n.send-button {\n    margin-bottom: 1px;\n}\n\n/* Sidebar */\n.sidebar {\n    width: 100%; /* Changed from fixed 360px to 100% */\n    background: white;\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n/* Kendo Splitter Specific Styles */\n.harness-body kendo-splitter {\n    height: 100%;\n}\n\n.harness-body kendo-splitter-pane {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n/* Sidebar Tabs */\n.sidebar-tabs {\n    display: flex;\n    background: #f8f9fa;\n    border-bottom: 1px solid #dee2e6;\n}\n\n.tab-button {\n    flex: 1;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    border-bottom: 2px solid transparent;\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6c757d;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.tab-button:hover {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.tab-button.active {\n    color: #0d6efd;\n    border-bottom-color: #0d6efd;\n    background: white;\n}\n\n.tab-button i {\n    font-size: 14px;\n}\n\n.tab-button .badge {\n    background: #6c757d;\n    color: white;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 10px;\n    margin-left: 4px;\n}\n\n.tab-button.active .badge {\n    background: #0d6efd;\n}\n\n.tab-button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    pointer-events: none;\n}\n\n/* Sidebar Content */\n.sidebar-content {\n    flex: 1;\n    overflow-y: auto;\n    width: 100%; /* Ensure content takes full width */\n}\n\n.tab-content {\n    padding: 20px;\n    width: 100%; /* Ensure content takes full width */\n    box-sizing: border-box; /* Include padding in width calculation */\n}\n\n.tab-header {\n    margin-bottom: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    position: relative;\n}\n\n.tab-header .custom-button.icon-only {\n    position: absolute;\n    top: 0;\n    right: 0;\n}\n\n.tab-header h4 {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #212529;\n}\n\n.tab-header p {\n    margin: 0;\n    font-size: 13px;\n    color: #6c757d;\n}\n\n.tab-header .custom-button.small {\n    align-self: flex-start;\n    padding: 6px 12px;\n    font-size: 13px;\n}\n\n.tab-header .custom-button.small i {\n    margin-right: 4px;\n}\n\n/* Variables */\n.variables-list {\n    margin-bottom: 16px;\n    width: 100%;\n}\n\n.variable-item {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n    align-items: center;\n    width: 100%;\n}\n\n.variable-name {\n    width: 30%; /* Changed from fixed width to percentage */\n    min-width: 100px;\n}\n\n.variable-type {\n    width: 25%; /* Changed from fixed width to percentage */\n    min-width: 80px;\n}\n\n.variable-value {\n    flex: 1;\n    min-width: 0; /* Allow flex item to shrink below content size */\n}\n\n.remove-button {\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.add-variable-button {\n    width: 100%;\n}\n\n.empty-variables {\n    text-align: center;\n    padding: 40px 20px;\n    color: #6c757d;\n}\n\n/* Saved Conversations */\n.saved-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.empty-saved {\n    text-align: center;\n    padding: 40px 20px;\n    color: #6c757d;\n}\n\n.empty-saved i {\n    font-size: 36px;\n    margin-bottom: 12px;\n    opacity: 0.5;\n}\n\n.saved-item {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    padding: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.saved-item:hover {\n    background: #f8f9fa;\n    border-color: #adb5bd;\n}\n\n.saved-item.current {\n    background: #e7f3ff;\n    border-color: #0d6efd;\n}\n\n.saved-info h5 {\n    margin: 0 0 4px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #212529;\n}\n\n.saved-info p {\n    margin: 0 0 4px 0;\n    font-size: 12px;\n    color: #6c757d;\n}\n\n.saved-date {\n    font-size: 11px;\n    color: #6c757d;\n}\n\n/* Responsive adjustments */\n@media (max-width: 1200px) {\n    .sidebar {\n        width: 320px;\n    }\n}\n\n@media (max-width: 992px) {\n    .message-user,\n    .message-assistant {\n        max-width: 85%;\n    }\n    \n    .sidebar {\n        width: 280px;\n    }\n}\n\n/* Custom scrollbar */\n.messages-container::-webkit-scrollbar,\n.sidebar-content::-webkit-scrollbar {\n    width: 8px;\n}\n\n.messages-container::-webkit-scrollbar-track,\n.sidebar-content::-webkit-scrollbar-track {\n    background: #f1f1f1;\n}\n\n.messages-container::-webkit-scrollbar-thumb,\n.sidebar-content::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.messages-container::-webkit-scrollbar-thumb:hover,\n.sidebar-content::-webkit-scrollbar-thumb:hover {\n    background: #a1a1a1;\n}\n\n/* Dialog customization */\n::ng-deep .ai-agent-test-harness .k-dialog-wrapper {\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-titlebar {\n    background: #343a40;\n    color: white;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-title {\n    font-weight: 600;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-titlebar-actions .k-button {\n    color: white;\n}\n\n::ng-deep .ai-agent-test-harness .k-dialog-content {\n    padding: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* JSON Dialog Styles - removed since we're using WindowService */\n\n/* Advanced Parameters Styles */\n.advanced-params-panel {\n    margin-top: 24px;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n}\n\n.advanced-params-panel ::ng-deep .k-expander-title {\n    font-weight: 600;\n    color: #495057;\n}\n\n.advanced-settings {\n    padding: 16px;\n}\n\n.advanced-param-input {\n    width: 100%;\n}\n\n.advanced-param-switch {\n    margin-top: 8px;\n}\n\n/* Format selector dropdown */\n.format-selector {\n    width: 100%;\n}"] }]
     }], () => [{ type: i1.DomSanitizer }, { type: i2.WindowService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i3.Router }], { mode: [{
             type: Input
         }], entity: [{