@memberjunction/ng-ai-test-harness 2.69.1 → 2.71.0

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

@@ -22,6 +22,7 @@ const _c1 = ["fileInput"];
 const _c2 = ["messageInput"];
 const _c3 = ["saveDialogInput"];
 const _forTrack0 = ($index, $item) => $item.id;
+const _forTrack1 = ($index, $item) => $item.ID;
 const _c4 = () => ({ text: "String", value: "string" });
 const _c5 = () => ({ text: "Number", value: "number" });
 const _c6 = () => ({ text: "Boolean", value: "boolean" });
@@ -278,12 +279,20 @@ function AITestHarnessComponent_div_0_Conditional_4_Conditional_18_Template(rf,
     i0.ɵɵelement(4, "i", 76);
     i0.ɵɵtext(5, " Execution Monitor ");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 41);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_18_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectTab("agentSettings")); });
+    i0.ɵɵelement(7, "i", 77);
+    i0.ɵɵtext(8, " Settings ");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("active", ctx_r1.activeTab === "agentVariables");
     i0.ɵɵproperty("disabled", ctx_r1.executionMonitorMode === "live" && ctx_r1.activeTab !== "agentVariables");
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r1.activeTab === "executionMonitor");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === "agentSettings");
+    i0.ɵɵproperty("disabled", ctx_r1.executionMonitorMode === "live" && ctx_r1.activeTab !== "agentSettings");
 } }
 function AITestHarnessComponent_div_0_Conditional_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -383,36 +392,83 @@ function AITestHarnessComponent_div_0_Conditional_4_Conditional_26_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("mode", ctx_r1.executionMonitorMode)("agentRun", ctx_r1.currentAgentRun)("liveSteps", ctx_r1.liveAgentSteps)("autoExpand", true)("runId", ctx_r1.getLastRunId())("runType", ctx_r1.mode);
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_For_8_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_12_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const config_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", config_r16.Description, " ");
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_12_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_12_For_1_Conditional_0_Template, 1, 1);
+} if (rf & 2) {
+    const config_r16 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵconditional(config_r16.ID === ctx_r1.agentConfigurationId && config_r16.Description ? 0 : -1);
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_12_For_1_Template, 1, 1, null, null, _forTrack1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵrepeater(ctx_r1.availableConfigurations);
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Using default configuration ");
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 78)(2, "h4");
+    i0.ɵɵtext(3, "Agent Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Configure agent execution parameters");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 90)(7, "div", 91)(8, "label");
+    i0.ɵɵtext(9, "AI Configuration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "kendo-dropdownlist", 92);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template_kendo_dropdownlist_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.agentConfigurationId, $event) || (ctx_r1.agentConfigurationId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 93);
+    i0.ɵɵtemplate(12, AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_12_Template, 2, 0)(13, AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Conditional_13_Template, 1, 0);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.agentConfigurationId);
+    i0.ɵɵproperty("data", ctx_r1.availableConfigurations)("valuePrimitive", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.agentConfigurationId ? 12 : 13);
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 81)(1, "kendo-textbox", 84);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_For_8_Template_kendo_textbox_ngModelChange_1_listener($event) { const variable_r17 = i0.ɵɵrestoreView(_r16).$implicit; i0.ɵɵtwoWayBindingSet(variable_r17.name, $event) || (variable_r17.name = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_For_8_Template_kendo_textbox_ngModelChange_1_listener($event) { const variable_r19 = i0.ɵɵrestoreView(_r18).$implicit; i0.ɵɵtwoWayBindingSet(variable_r19.name, $event) || (variable_r19.name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "kendo-dropdownlist", 85);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_For_8_Template_kendo_dropdownlist_ngModelChange_2_listener($event) { const variable_r17 = i0.ɵɵrestoreView(_r16).$implicit; i0.ɵɵtwoWayBindingSet(variable_r17.type, $event) || (variable_r17.type = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_For_8_Template_kendo_dropdownlist_ngModelChange_2_listener($event) { const variable_r19 = i0.ɵɵrestoreView(_r18).$implicit; i0.ɵɵtwoWayBindingSet(variable_r19.type, $event) || (variable_r19.type = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "kendo-textbox", 86);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_For_8_Template_kendo_textbox_ngModelChange_3_listener($event) { const variable_r17 = i0.ɵɵrestoreView(_r16).$implicit; i0.ɵɵtwoWayBindingSet(variable_r17.value, $event) || (variable_r17.value = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_For_8_Template_kendo_textbox_ngModelChange_3_listener($event) { const variable_r19 = i0.ɵɵrestoreView(_r18).$implicit; i0.ɵɵtwoWayBindingSet(variable_r19.value, $event) || (variable_r19.value = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 91);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_For_8_Template_button_click_4_listener() { const $index_r18 = i0.ɵɵrestoreView(_r16).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.removeTemplateVariable($index_r18)); });
+    i0.ɵɵelementStart(4, "button", 95);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_For_8_Template_button_click_4_listener() { const $index_r20 = i0.ɵɵrestoreView(_r18).$index; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.removeTemplateVariable($index_r20)); });
     i0.ɵɵelement(5, "i", 88);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const variable_r17 = ctx.$implicit;
+    const variable_r19 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", variable_r17.name);
+    i0.ɵɵtwoWayProperty("ngModel", variable_r19.name);
     i0.ɵɵproperty("disabled", ctx_r1.isExecuting);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", variable_r17.type);
+    i0.ɵɵtwoWayProperty("ngModel", variable_r19.type);
     i0.ɵɵproperty("data", i0.ɵɵpureFunction4(13, _c8, i0.ɵɵpureFunction0(9, _c4), i0.ɵɵpureFunction0(10, _c5), i0.ɵɵpureFunction0(11, _c6), i0.ɵɵpureFunction0(12, _c7)))("valuePrimitive", true)("disabled", ctx_r1.isExecuting);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", variable_r17.value);
-    i0.ɵɵproperty("placeholder", variable_r17.type === "object" ? "JSON value" : "Value")("disabled", ctx_r1.isExecuting);
+    i0.ɵɵtwoWayProperty("ngModel", variable_r19.value);
+    i0.ɵɵproperty("placeholder", variable_r19.type === "object" ? "JSON value" : "Value")("disabled", ctx_r1.isExecuting);
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 45)(1, "div", 78)(2, "h4");
     i0.ɵɵtext(3, "Template Variables");
     i0.ɵɵelementEnd();
@@ -420,10 +476,10 @@ function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template(rf,
     i0.ɵɵtext(5, "Variables for prompt template rendering");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "div", 79);
-    i0.ɵɵrepeaterCreate(7, AITestHarnessComponent_div_0_Conditional_4_Conditional_27_For_8_Template, 6, 18, "div", 81, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(7, AITestHarnessComponent_div_0_Conditional_4_Conditional_28_For_8_Template, 6, 18, "div", 81, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 90);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addTemplateVariable()); });
+    i0.ɵɵelementStart(9, "button", 94);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addTemplateVariable()); });
     i0.ɵɵelement(10, "i", 83);
     i0.ɵɵtext(11, " Add Variable ");
     i0.ɵɵelementEnd()();
@@ -432,22 +488,44 @@ function AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template(rf,
     i0.ɵɵadvance(7);
     i0.ɵɵrepeater(ctx_r1.templateVariables);
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Using default vendor for the default model ");
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Only one vendor available for this model ");
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Select the inference provider for this model ");
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_79_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 95)(1, "label", 118);
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_26_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const config_r22 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", config_r22.Description, " ");
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_26_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_26_For_1_Conditional_0_Template, 1, 1);
+} if (rf & 2) {
+    const config_r22 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵconditional(config_r22.ID === ctx_r1.selectedConfigurationId && config_r22.Description ? 0 : -1);
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_26_For_1_Template, 1, 1, null, null, _forTrack1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵrepeater(ctx_r1.availableConfigurations);
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Using default configuration ");
+} }
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_86_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 91)(1, "label", 119);
     i0.ɵɵtext(2, " Top Log Probs ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "kendo-numerictextbox", 119);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_79_Template_kendo_numerictextbox_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.topLogProbs, $event) || (ctx_r1.advancedParams.topLogProbs = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(3, "kendo-numerictextbox", 120);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_86_Template_kendo_numerictextbox_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.topLogProbs, $event) || (ctx_r1.advancedParams.topLogProbs = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -455,121 +533,130 @@ function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_7
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.advancedParams.topLogProbs);
     i0.ɵɵproperty("min", 2)("max", 20)("step", 1)("format", "n0");
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 47)(1, "div", 78)(2, "h4");
     i0.ɵɵtext(3, "Model Settings");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Configure AI model parameters");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 92);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.resetToPromptDefaults()); });
-    i0.ɵɵelement(7, "i", 93);
+    i0.ɵɵelementStart(6, "button", 96);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.resetToPromptDefaults()); });
+    i0.ɵɵelement(7, "i", 97);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 94)(9, "div", 95)(10, "label");
+    i0.ɵɵelementStart(8, "div", 90)(9, "div", 91)(10, "label");
     i0.ɵɵtext(11, "AI Model");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "kendo-dropdownlist", 96);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_dropdownlist_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedModelId, $event) || (ctx_r1.selectedModelId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_dropdownlist_ngModelChange_12_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onModelSelectionChange()); });
+    i0.ɵɵelementStart(12, "kendo-dropdownlist", 98);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_dropdownlist_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedModelId, $event) || (ctx_r1.selectedModelId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_dropdownlist_ngModelChange_12_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onModelSelectionChange()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 95)(14, "label");
+    i0.ɵɵelementStart(13, "div", 91)(14, "label");
     i0.ɵɵtext(15, "AI Vendor");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "kendo-dropdownlist", 97);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_dropdownlist_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedVendorId, $event) || (ctx_r1.selectedVendorId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(16, "kendo-dropdownlist", 99);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_dropdownlist_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedVendorId, $event) || (ctx_r1.selectedVendorId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 93);
+    i0.ɵɵtemplate(18, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_18_Template, 1, 0)(19, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_19_Template, 1, 0)(20, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_20_Template, 1, 0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "div", 91)(22, "label");
+    i0.ɵɵtext(23, "AI Configuration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "kendo-dropdownlist", 92);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_dropdownlist_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedConfigurationId, $event) || (ctx_r1.selectedConfigurationId = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 98);
-    i0.ɵɵtemplate(18, AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_18_Template, 1, 0)(19, AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_19_Template, 1, 0)(20, AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_20_Template, 1, 0);
+    i0.ɵɵelementStart(25, "div", 93);
+    i0.ɵɵtemplate(26, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_26_Template, 2, 0)(27, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_27_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 95)(22, "label");
-    i0.ɵɵtext(23, "Response Format");
+    i0.ɵɵelementStart(28, "div", 91)(29, "label");
+    i0.ɵɵtext(30, "Response Format");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "kendo-dropdownlist", 99);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_dropdownlist_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedResponseFormat, $event) || (ctx_r1.selectedResponseFormat = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(31, "kendo-dropdownlist", 100);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_dropdownlist_ngModelChange_31_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedResponseFormat, $event) || (ctx_r1.selectedResponseFormat = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 98);
-    i0.ɵɵtext(26, " Expected format for AI response (defaults to prompt setting) ");
+    i0.ɵɵelementStart(32, "div", 93);
+    i0.ɵɵtext(33, " Expected format for AI response (defaults to prompt setting) ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 95)(28, "label");
-    i0.ɵɵtext(29, "Max Tokens");
+    i0.ɵɵelementStart(34, "div", 91)(35, "label");
+    i0.ɵɵtext(36, "Max Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "kendo-numerictextbox", 100);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_30_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.maxTokens, $event) || (ctx_r1.maxTokens = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(37, "kendo-numerictextbox", 101);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.maxTokens, $event) || (ctx_r1.maxTokens = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "div", 98);
-    i0.ɵɵtext(32, " Maximum length of generated response ");
+    i0.ɵɵelementStart(38, "div", 93);
+    i0.ɵɵtext(39, " Maximum length of generated response ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 95)(34, "label", 101)(35, "input", 102);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_input_ngModelChange_35_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.skipValidation, $event) || (ctx_r1.skipValidation = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(40, "div", 91)(41, "label", 102)(42, "input", 103);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_input_ngModelChange_42_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.skipValidation, $event) || (ctx_r1.skipValidation = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(36, " Skip Validation ");
+    i0.ɵɵtext(43, " Skip Validation ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 98);
-    i0.ɵɵtext(38, " Skip output validation during testing ");
+    i0.ɵɵelementStart(44, "div", 93);
+    i0.ɵɵtext(45, " Skip output validation during testing ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "kendo-expansionpanel", 103);
-    i0.ɵɵlistener("action", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_expansionpanel_action_39_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleAdvancedParams()); });
-    i0.ɵɵelementStart(40, "div", 104)(41, "div", 95)(42, "label", 105);
-    i0.ɵɵtext(43, " Temperature ");
+    i0.ɵɵelementStart(46, "kendo-expansionpanel", 104);
+    i0.ɵɵlistener("action", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_expansionpanel_action_46_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleAdvancedParams()); });
+    i0.ɵɵelementStart(47, "div", 105)(48, "div", 91)(49, "label", 106);
+    i0.ɵɵtext(50, " Temperature ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "kendo-numerictextbox", 106);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_44_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.temperature, $event) || (ctx_r1.advancedParams.temperature = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(51, "kendo-numerictextbox", 107);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_51_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.temperature, $event) || (ctx_r1.advancedParams.temperature = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(45, "div", 95)(46, "label", 107);
-    i0.ɵɵtext(47, " Top P ");
+    i0.ɵɵelementStart(52, "div", 91)(53, "label", 108);
+    i0.ɵɵtext(54, " Top P ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(48, "kendo-numerictextbox", 106);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_48_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.topP, $event) || (ctx_r1.advancedParams.topP = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(55, "kendo-numerictextbox", 107);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_55_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.topP, $event) || (ctx_r1.advancedParams.topP = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(49, "div", 95)(50, "label", 108);
-    i0.ɵɵtext(51, " Top K ");
+    i0.ɵɵelementStart(56, "div", 91)(57, "label", 109);
+    i0.ɵɵtext(58, " Top K ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "kendo-numerictextbox", 106);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_52_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.topK, $event) || (ctx_r1.advancedParams.topK = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(59, "kendo-numerictextbox", 107);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_59_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.topK, $event) || (ctx_r1.advancedParams.topK = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(53, "div", 95)(54, "label", 109);
-    i0.ɵɵtext(55, " Min P ");
+    i0.ɵɵelementStart(60, "div", 91)(61, "label", 110);
+    i0.ɵɵtext(62, " Min P ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(56, "kendo-numerictextbox", 106);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_56_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.minP, $event) || (ctx_r1.advancedParams.minP = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(63, "kendo-numerictextbox", 107);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_63_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.minP, $event) || (ctx_r1.advancedParams.minP = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(57, "div", 95)(58, "label", 110);
-    i0.ɵɵtext(59, " Frequency Penalty ");
+    i0.ɵɵelementStart(64, "div", 91)(65, "label", 111);
+    i0.ɵɵtext(66, " Frequency Penalty ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "kendo-numerictextbox", 106);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_60_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.frequencyPenalty, $event) || (ctx_r1.advancedParams.frequencyPenalty = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(67, "kendo-numerictextbox", 107);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_67_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.frequencyPenalty, $event) || (ctx_r1.advancedParams.frequencyPenalty = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(61, "div", 95)(62, "label", 111);
-    i0.ɵɵtext(63, " Presence Penalty ");
+    i0.ɵɵelementStart(68, "div", 91)(69, "label", 112);
+    i0.ɵɵtext(70, " Presence Penalty ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "kendo-numerictextbox", 106);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_64_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.presencePenalty, $event) || (ctx_r1.advancedParams.presencePenalty = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(71, "kendo-numerictextbox", 107);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_71_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.presencePenalty, $event) || (ctx_r1.advancedParams.presencePenalty = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(65, "div", 95)(66, "label", 112);
-    i0.ɵɵtext(67, " Seed ");
+    i0.ɵɵelementStart(72, "div", 91)(73, "label", 113);
+    i0.ɵɵtext(74, " Seed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(68, "kendo-numerictextbox", 113);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_numerictextbox_ngModelChange_68_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.seed, $event) || (ctx_r1.advancedParams.seed = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(75, "kendo-numerictextbox", 114);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_numerictextbox_ngModelChange_75_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.seed, $event) || (ctx_r1.advancedParams.seed = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(69, "div", 95)(70, "label", 114);
-    i0.ɵɵtext(71, " Stop Sequences ");
+    i0.ɵɵelementStart(76, "div", 91)(77, "label", 115);
+    i0.ɵɵtext(78, " Stop Sequences ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "kendo-textarea", 115);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_textarea_ngModelChange_72_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.stopSequencesText, $event) || (ctx_r1.stopSequencesText = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_textarea_ngModelChange_72_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateStopSequences()); });
+    i0.ɵɵelementStart(79, "kendo-textarea", 116);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_textarea_ngModelChange_79_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.stopSequencesText, $event) || (ctx_r1.stopSequencesText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_textarea_ngModelChange_79_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateStopSequences()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(73, "div", 98);
-    i0.ɵɵtext(74, " Separate multiple sequences with commas ");
+    i0.ɵɵelementStart(80, "div", 93);
+    i0.ɵɵtext(81, " Separate multiple sequences with commas ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(75, "div", 95)(76, "label", 116);
-    i0.ɵɵtext(77, " Include Log Probs ");
+    i0.ɵɵelementStart(82, "div", 91)(83, "label", 117);
+    i0.ɵɵtext(84, " Include Log Probs ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(78, "kendo-switch", 117);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template_kendo_switch_ngModelChange_78_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.includeLogProbs, $event) || (ctx_r1.advancedParams.includeLogProbs = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(85, "kendo-switch", 118);
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template_kendo_switch_ngModelChange_85_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.advancedParams.includeLogProbs, $event) || (ctx_r1.advancedParams.includeLogProbs = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(79, AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Conditional_79_Template, 4, 5, "div", 95);
+    i0.ɵɵtemplate(86, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_86_Template, 4, 5, "div", 91);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -582,6 +669,11 @@ function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(!ctx_r1.selectedModelId ? 18 : ctx_r1.availableVendors.length <= 1 ? 19 : 20);
     i0.ɵɵadvance(6);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedConfigurationId);
+    i0.ɵɵproperty("data", ctx_r1.availableConfigurations)("valuePrimitive", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.selectedConfigurationId ? 26 : 27);
+    i0.ɵɵadvance(5);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedResponseFormat);
     i0.ɵɵproperty("data", ctx_r1.responseFormatOptions);
     i0.ɵɵadvance(6);
@@ -618,64 +710,64 @@ function AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template(rf,
     i0.ɵɵadvance(6);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.advancedParams.includeLogProbs);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.advancedParams.includeLogProbs ? 79 : -1);
+    i0.ɵɵconditional(ctx_r1.advancedParams.includeLogProbs ? 86 : -1);
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 124);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.newConversation()); });
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_30_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 125);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_30_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.newConversation()); });
     i0.ɵɵelement(1, "i", 83);
     i0.ɵɵtext(2, " New ");
     i0.ɵɵelementEnd();
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵelement(1, "i", 125);
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_30_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 123);
+    i0.ɵɵelement(1, "i", 126);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No saved conversations");
     i0.ɵɵelementEnd()();
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_For_10_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 126);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_For_10_Template_div_click_0_listener() { const conv_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.loadConversation(conv_r23)); });
-    i0.ɵɵelementStart(1, "div", 127)(2, "h5");
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_30_For_10_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 127);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_30_For_10_Template_div_click_0_listener() { const conv_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.loadConversation(conv_r26)); });
+    i0.ɵɵelementStart(1, "div", 128)(2, "h5");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 128);
+    i0.ɵɵelementStart(6, "span", 129);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "button", 129);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_For_10_Template_button_click_9_listener($event) { const conv_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.deleteConversation(conv_r23, $event)); });
-    i0.ɵɵelement(10, "i", 130);
+    i0.ɵɵelementStart(9, "button", 130);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Conditional_30_For_10_Template_button_click_9_listener($event) { const conv_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.deleteConversation(conv_r26, $event)); });
+    i0.ɵɵelement(10, "i", 131);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const conv_r23 = ctx.$implicit;
+    const conv_r26 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("current", conv_r23.id === ctx_r1.currentConversationId);
+    i0.ɵɵclassProp("current", conv_r26.id === ctx_r1.currentConversationId);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(conv_r23.name);
+    i0.ɵɵtextInterpolate(conv_r26.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", conv_r23.messages.length, " messages");
+    i0.ɵɵtextInterpolate1("", conv_r26.messages.length, " messages");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 5, conv_r23.updatedAt, "short"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 5, conv_r26.updatedAt, "short"));
 } }
-function AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+function AITestHarnessComponent_div_0_Conditional_4_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 45)(1, "div", 78)(2, "h4");
     i0.ɵɵtext(3, "Saved Conversations");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Previously saved test sessions");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_6_Template, 3, 0, "button", 120);
+    i0.ɵɵtemplate(6, AITestHarnessComponent_div_0_Conditional_4_Conditional_30_Conditional_6_Template, 3, 0, "button", 121);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 121);
-    i0.ɵɵtemplate(8, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Conditional_8_Template, 4, 0, "div", 122);
-    i0.ɵɵrepeaterCreate(9, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_For_10_Template, 11, 8, "div", 123, _forTrack0);
+    i0.ɵɵelementStart(7, "div", 122);
+    i0.ɵɵtemplate(8, AITestHarnessComponent_div_0_Conditional_4_Conditional_30_Conditional_8_Template, 4, 0, "div", 123);
+    i0.ɵɵrepeaterCreate(9, AITestHarnessComponent_div_0_Conditional_4_Conditional_30_For_10_Template, 11, 8, "div", 124, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -701,7 +793,7 @@ function AITestHarnessComponent_div_0_Conditional_4_Template(rf, ctx) { if (rf &
     i0.ɵɵtemplate(13, AITestHarnessComponent_div_0_Conditional_4_Conditional_13_Template, 1, 0, "i", 36)(14, AITestHarnessComponent_div_0_Conditional_4_Conditional_14_Template, 1, 0, "i", 37);
     i0.ɵɵelementEnd()()()()();
     i0.ɵɵelementStart(15, "kendo-splitter-pane", 38)(16, "div", 39)(17, "div", 40);
-    i0.ɵɵtemplate(18, AITestHarnessComponent_div_0_Conditional_4_Conditional_18_Template, 6, 5)(19, AITestHarnessComponent_div_0_Conditional_4_Conditional_19_Template, 6, 4);
+    i0.ɵɵtemplate(18, AITestHarnessComponent_div_0_Conditional_4_Conditional_18_Template, 9, 8)(19, AITestHarnessComponent_div_0_Conditional_4_Conditional_19_Template, 6, 4);
     i0.ɵɵelementStart(20, "button", 41);
     i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_4_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectTab("savedConversations")); });
     i0.ɵɵelement(21, "i", 42);
@@ -709,7 +801,7 @@ function AITestHarnessComponent_div_0_Conditional_4_Template(rf, ctx) { if (rf &
     i0.ɵɵtemplate(23, AITestHarnessComponent_div_0_Conditional_4_Conditional_23_Template, 2, 1, "span", 43);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(24, "div", 44);
-    i0.ɵɵtemplate(25, AITestHarnessComponent_div_0_Conditional_4_Conditional_25_Template, 13, 2, "div", 45)(26, AITestHarnessComponent_div_0_Conditional_4_Conditional_26_Template, 2, 6, "div", 46)(27, AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template, 12, 0, "div", 45)(28, AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template, 80, 52, "div", 47)(29, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template, 11, 2, "div", 45);
+    i0.ɵɵtemplate(25, AITestHarnessComponent_div_0_Conditional_4_Conditional_25_Template, 13, 2, "div", 45)(26, AITestHarnessComponent_div_0_Conditional_4_Conditional_26_Template, 2, 6, "div", 46)(27, AITestHarnessComponent_div_0_Conditional_4_Conditional_27_Template, 14, 4, "div", 45)(28, AITestHarnessComponent_div_0_Conditional_4_Conditional_28_Template, 12, 0, "div", 45)(29, AITestHarnessComponent_div_0_Conditional_4_Conditional_29_Template, 87, 56, "div", 47)(30, AITestHarnessComponent_div_0_Conditional_4_Conditional_30_Template, 11, 2, "div", 45);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -740,11 +832,13 @@ function AITestHarnessComponent_div_0_Conditional_4_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.activeTab === "executionMonitor" ? 26 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.activeTab === "templateVariables" ? 27 : -1);
+    i0.ɵɵconditional(ctx_r1.activeTab === "agentSettings" ? 27 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "templateVariables" ? 28 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.activeTab === "modelSettings" ? 28 : -1);
+    i0.ɵɵconditional(ctx_r1.activeTab === "modelSettings" ? 29 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.activeTab === "savedConversations" ? 29 : -1);
+    i0.ɵɵconditional(ctx_r1.activeTab === "savedConversations" ? 30 : -1);
 } }
 function AITestHarnessComponent_div_0_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 30);
@@ -761,7 +855,7 @@ function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_3_Template
     i0.ɵɵtext(1, " You ");
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 133);
+    i0.ɵɵelement(0, "i", 134);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -774,60 +868,60 @@ function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_7_Template
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const message_r26 = i0.ɵɵnextContext().$implicit;
+    const message_r29 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatElapsedTime(message_r26.elapsedTime), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatElapsedTime(message_r29.elapsedTime), " ");
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const message_r26 = i0.ɵɵnextContext().$implicit;
+    const message_r29 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("title", ctx_r1.getExecutionSummary(message_r26));
+    i0.ɵɵproperty("title", ctx_r1.getExecutionSummary(message_r29));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTime(message_r26.executionTime));
+    i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTime(message_r29.executionTime));
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
+    const _r30 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 64);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const message_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showRawJsonDialog(message_r26)); });
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r30); const message_r29 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showRawJsonDialog(message_r29)); });
     i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementEnd();
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 134);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const message_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showMessageExecutionHistory(message_r26)); });
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 135);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r31); const message_r29 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.showMessageExecutionHistory(message_r29)); });
     i0.ɵɵelement(1, "i", 76);
     i0.ɵɵelementEnd();
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 135);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r29); const message_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToAgentRun({ runId: message_r26.agentRunId, runType: "agent" })); });
-    i0.ɵɵelement(1, "i", 136);
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 136);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); const message_r29 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToAgentRun({ runId: message_r29.agentRunId, runType: "agent" })); });
+    i0.ɵɵelement(1, "i", 137);
     i0.ɵɵelementEnd();
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "span", 137);
+    i0.ɵɵelementStart(0, "div", 58)(1, "span", 138);
     i0.ɵɵtext(2);
     i0.ɵɵelementStart(3, "span", 67);
     i0.ɵɵtext(4, "|");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const message_r26 = i0.ɵɵnextContext().$implicit;
+    const message_r29 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(message_r26.streamingContent);
+    i0.ɵɵtextInterpolate(message_r29.streamingContent);
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 59);
 } if (rf & 2) {
-    const message_r26 = i0.ɵɵnextContext().$implicit;
+    const message_r29 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedContent(message_r26), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedContent(message_r29), i0.ɵɵsanitizeHtml);
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 60);
@@ -835,24 +929,24 @@ function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_17_Templat
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const message_r26 = i0.ɵɵnextContext().$implicit;
+    const message_r29 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", message_r26.error, " ");
+    i0.ɵɵtextInterpolate1(" ", message_r29.error, " ");
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 73)(1, "pre");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const message_r26 = i0.ɵɵnextContext(2).$implicit;
+    const message_r29 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatJson(message_r26.payload));
+    i0.ɵɵtextInterpolate(ctx_r1.formatJson(message_r29.payload));
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
+    const _r33 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 69)(1, "div", 70);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_18_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r30); const message_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.togglePayloadCollapse(message_r26)); });
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_18_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r33); const message_r29 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.togglePayloadCollapse(message_r29)); });
     i0.ɵɵelementStart(2, "span", 71);
     i0.ɵɵelement(3, "i", 65);
     i0.ɵɵtext(4, " Payload ");
@@ -863,51 +957,51 @@ function AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_18_Templat
     i0.ɵɵtemplate(7, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_18_Conditional_7_Template, 3, 1, "div", 73);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const message_r26 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassProp("collapsed", message_r26.payloadCollapsed);
+    const message_r29 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("collapsed", message_r29.payloadCollapsed);
     i0.ɵɵadvance(6);
-    i0.ɵɵclassProp("fa-chevron-down", !message_r26.payloadCollapsed)("fa-chevron-right", message_r26.payloadCollapsed);
+    i0.ɵɵclassProp("fa-chevron-down", !message_r29.payloadCollapsed)("fa-chevron-right", message_r29.payloadCollapsed);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!message_r26.payloadCollapsed ? 7 : -1);
+    i0.ɵɵconditional(!message_r29.payloadCollapsed ? 7 : -1);
 } }
 function AITestHarnessComponent_div_0_Conditional_5_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
+    const _r28 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 31)(1, "div", 49)(2, "span", 50);
     i0.ɵɵtemplate(3, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_3_Template, 2, 0)(4, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_4_Template, 2, 1);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span", 51);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_7_Template, 3, 1, "span", 52)(8, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_8_Template, 2, 2, "span", 53)(9, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_9_Template, 2, 0, "button", 54)(10, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_10_Template, 2, 0, "button", 131)(11, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_11_Template, 2, 0, "button", 132);
+    i0.ɵɵtemplate(7, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_7_Template, 3, 1, "span", 52)(8, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_8_Template, 2, 2, "span", 53)(9, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_9_Template, 2, 0, "button", 54)(10, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_10_Template, 2, 0, "button", 132)(11, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_11_Template, 2, 0, "button", 133);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "div", 55)(13, "button", 56);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Template_button_click_13_listener() { const message_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyMessage(message_r26)); });
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_For_5_Template_button_click_13_listener() { const message_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyMessage(message_r29)); });
     i0.ɵɵelement(14, "i", 57);
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(15, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_15_Template, 5, 1, "div", 58)(16, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_16_Template, 1, 1, "div", 59)(17, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_17_Template, 3, 1, "div", 60)(18, AITestHarnessComponent_div_0_Conditional_5_For_5_Conditional_18_Template, 8, 7, "div", 61);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const message_r26 = ctx.$implicit;
+    const message_r29 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.getMessageClass(message_r26));
+    i0.ɵɵproperty("ngClass", ctx_r1.getMessageClass(message_r29));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(message_r26.role === "user" ? 3 : 4);
+    i0.ɵɵconditional(message_r29.role === "user" ? 3 : 4);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.formatTimestamp(message_r26.timestamp));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTimestamp(message_r29.timestamp));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(message_r26.isStreaming && message_r26.elapsedTime !== undefined ? 7 : message_r26.executionTime ? 8 : -1);
+    i0.ɵɵconditional(message_r29.isStreaming && message_r29.elapsedTime !== undefined ? 7 : message_r29.executionTime ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.showRawToggle(message_r26) ? 9 : -1);
+    i0.ɵɵconditional(ctx_r1.showRawToggle(message_r29) ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(message_r26.executionData && ctx_r1.mode === "agent" && message_r26.role === "assistant" ? 10 : -1);
+    i0.ɵɵconditional(message_r29.executionData && ctx_r1.mode === "agent" && message_r29.role === "assistant" ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(message_r26.agentRunId && ctx_r1.mode === "agent" && message_r26.role === "assistant" ? 11 : -1);
+    i0.ɵɵconditional(message_r29.agentRunId && ctx_r1.mode === "agent" && message_r29.role === "assistant" ? 11 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(message_r26.isStreaming ? 15 : 16);
+    i0.ɵɵconditional(message_r29.isStreaming ? 15 : 16);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(message_r26.error ? 17 : -1);
+    i0.ɵɵconditional(message_r29.error ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasPayload(message_r26.payload) && ctx_r1.mode === "agent" && message_r26.role === "assistant" ? 18 : -1);
+    i0.ɵɵconditional(ctx_r1.hasPayload(message_r29.payload) && ctx_r1.mode === "agent" && message_r29.role === "assistant" ? 18 : -1);
 } }
 function AITestHarnessComponent_div_0_Conditional_5_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 36);
@@ -916,17 +1010,17 @@ function AITestHarnessComponent_div_0_Conditional_5_Conditional_12_Template(rf,
     i0.ɵɵelement(0, "i", 37);
 } }
 function AITestHarnessComponent_div_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
+    const _r27 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 29, 1);
     i0.ɵɵtemplate(3, AITestHarnessComponent_div_0_Conditional_5_Conditional_3_Template, 6, 0, "div", 30);
     i0.ɵɵrepeaterCreate(4, AITestHarnessComponent_div_0_Conditional_5_For_5_Template, 19, 10, "div", 31, _forTrack0);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 32)(7, "div", 33)(8, "kendo-textarea", 34, 2);
-    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_5_Template_kendo_textarea_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.currentUserMessage, $event) || (ctx_r1.currentUserMessage = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keypress", function AITestHarnessComponent_div_0_Conditional_5_Template_kendo_textarea_keypress_8_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleKeyPress($event)); });
+    i0.ɵɵtwoWayListener("ngModelChange", function AITestHarnessComponent_div_0_Conditional_5_Template_kendo_textarea_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.currentUserMessage, $event) || (ctx_r1.currentUserMessage = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keypress", function AITestHarnessComponent_div_0_Conditional_5_Template_kendo_textarea_keypress_8_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleKeyPress($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "button", 35);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.sendMessage()); });
+    i0.ɵɵlistener("click", function AITestHarnessComponent_div_0_Conditional_5_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.sendMessage()); });
     i0.ɵɵtemplate(11, AITestHarnessComponent_div_0_Conditional_5_Conditional_11_Template, 1, 0, "i", 36)(12, AITestHarnessComponent_div_0_Conditional_5_Conditional_12_Template, 1, 0, "i", 37);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -948,7 +1042,7 @@ function AITestHarnessComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(2, AITestHarnessComponent_div_0_Conditional_2_Template, 25, 10, "div", 9);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 10);
-    i0.ɵɵtemplate(4, AITestHarnessComponent_div_0_Conditional_4_Template, 30, 23, "kendo-splitter", 11)(5, AITestHarnessComponent_div_0_Conditional_5_Template, 13, 6, "div", 12);
+    i0.ɵɵtemplate(4, AITestHarnessComponent_div_0_Conditional_4_Template, 31, 24, "kendo-splitter", 11)(5, AITestHarnessComponent_div_0_Conditional_5_Template, 13, 6, "div", 12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -958,21 +1052,21 @@ function AITestHarnessComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.showSidebar ? 4 : 5);
 } }
 function AITestHarnessComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 138);
-    i0.ɵɵlistener("close", function AITestHarnessComponent_Conditional_1_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelSaveDialog()); });
-    i0.ɵɵelementStart(1, "div", 139)(2, "p");
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 139);
+    i0.ɵɵlistener("close", function AITestHarnessComponent_Conditional_1_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelSaveDialog()); });
+    i0.ɵɵelementStart(1, "div", 140)(2, "p");
     i0.ɵɵtext(3, "Enter a name for this conversation:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 140, 3);
-    i0.ɵɵlistener("keyup", function AITestHarnessComponent_Conditional_1_Template_input_keyup_4_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateTempConversation()); });
+    i0.ɵɵelementStart(4, "input", 141, 3);
+    i0.ɵɵlistener("keyup", function AITestHarnessComponent_Conditional_1_Template_input_keyup_4_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateTempConversation()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 141);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelSaveDialog()); });
+    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 142);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelSaveDialog()); });
     i0.ɵɵtext(8, "Cancel");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 142);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmSaveConversation()); });
+    i0.ɵɵelementStart(9, "button", 143);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmSaveConversation()); });
     i0.ɵɵtext(10, " Save ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -982,21 +1076,21 @@ function AITestHarnessComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("primary", true)("disabled", ctx_r1.tempConversationName === "");
 } }
 function AITestHarnessComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 143);
-    i0.ɵɵlistener("close", function AITestHarnessComponent_Conditional_2_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelLoadConversation()); });
-    i0.ɵɵelementStart(1, "div", 139)(2, "p");
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 144);
+    i0.ɵɵlistener("close", function AITestHarnessComponent_Conditional_2_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelLoadConversation()); });
+    i0.ɵɵelementStart(1, "div", 140)(2, "p");
     i0.ɵɵtext(3, "Loading this conversation will replace the current one. Any unsaved changes will be lost.");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Do you want to continue?");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 141);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelLoadConversation()); });
+    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 142);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelLoadConversation()); });
     i0.ɵɵtext(8, "Cancel");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 144);
-    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_2_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmLoadConversation()); });
+    i0.ɵɵelementStart(9, "button", 145);
+    i0.ɵɵlistener("click", function AITestHarnessComponent_Conditional_2_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmLoadConversation()); });
     i0.ɵɵtext(10, " Load Conversation ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -1086,12 +1180,18 @@ export class AITestHarnessComponent {
         this.selectedVendorId = '';
         /** Available AI vendors for the selected model */
         this.availableVendors = [];
+        /** Selected AI configuration for prompt execution */
+        this.selectedConfigurationId = '';
+        /** Available AI configurations */
+        this.availableConfigurations = [];
         /** Default model for the prompt (cached for display) */
         this.defaultModelName = '';
         /** Maximum tokens for prompt execution */
         this.maxTokens = null;
         /** Whether to skip validation when running prompts */
         this.skipValidation = false;
+        /** Selected AI configuration for agent execution */
+        this.agentConfigurationId = '';
         /** Advanced LLM Parameters */
         this.advancedParams = {
             temperature: null,
@@ -1215,6 +1315,8 @@ export class AITestHarnessComponent {
         this.loadSavedConversations();
         this.subscribeToEvents();
         this.resetHarness();
+        // Load configurations for both modes
+        this.loadAvailableConfigurations();
         // Load models if in prompt mode
         if (this.mode === 'prompt') {
             this.loadAvailableModels();
@@ -1503,6 +1605,37 @@ export class AITestHarnessComponent {
             this.availableVendors = [];
         }
     }
+    /**
+     * Loads available AI configurations from the database
+     * Only configurations with 'Active' or 'Preview' status are shown
+     */
+    async loadAvailableConfigurations() {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: AI Configurations',
+                ExtraFilter: `Status IN ('Active', 'Preview')`,
+                OrderBy: 'IsDefault DESC, Name',
+                ResultType: 'entity_object'
+            });
+            if (result.Success && result.Results) {
+                this.availableConfigurations = result.Results;
+                // Auto-select the default configuration if one exists
+                const defaultConfig = this.availableConfigurations.find(c => c.IsDefault);
+                if (defaultConfig) {
+                    this.selectedConfigurationId = defaultConfig.ID;
+                }
+            }
+            else {
+                console.error('Failed to load AI configurations:', result.ErrorMessage);
+                this.availableConfigurations = [];
+            }
+        }
+        catch (error) {
+            console.error('Error loading AI configurations:', error);
+            this.availableConfigurations = [];
+        }
+    }
     /**
      * Handles model selection change and loads available vendors for the selected model
      */
@@ -1673,6 +1806,14 @@ export class AITestHarnessComponent {
             this.maxTokens = null;
             // Reset skip validation
             this.skipValidation = false;
+            // Reset configuration to default
+            const defaultConfig = this.availableConfigurations.find(c => c.IsDefault);
+            if (defaultConfig) {
+                this.selectedConfigurationId = defaultConfig.ID;
+            }
+            else {
+                this.selectedConfigurationId = '';
+            }
             // Reset advanced parameters
             this.advancedParams = {
                 temperature: null,
@@ -1734,6 +1875,11 @@ export class AITestHarnessComponent {
         this.stopSequencesText = '';
         this.advancedParamsExpanded = false;
         this.skipValidation = false;
+        // Reset agent configuration to default
+        if (this.mode === 'agent') {
+            const defaultConfig = this.availableConfigurations.find(c => c.IsDefault);
+            this.agentConfigurationId = defaultConfig?.ID || '';
+        }
     }
     /**
      * Starts a new conversation
@@ -1981,8 +2127,8 @@ export class AITestHarnessComponent {
             const sessionId = dataProvider.sessionId;
             // Execute the agent
             const query = `
-                mutation RunAIAgent($agentId: String!, $messages: String!, $sessionId: String!, $data: String, $templateData: String, $lastRunId: String, $autoPopulateLastRunPayload: Boolean) {
-                    RunAIAgent(agentId: $agentId, messages: $messages, sessionId: $sessionId, data: $data, templateData: $templateData, lastRunId: $lastRunId, autoPopulateLastRunPayload: $autoPopulateLastRunPayload) {
+                mutation RunAIAgent($agentId: String!, $messages: String!, $sessionId: String!, $data: String, $templateData: String, $lastRunId: String, $autoPopulateLastRunPayload: Boolean, $configurationId: String) {
+                    RunAIAgent(agentId: $agentId, messages: $messages, sessionId: $sessionId, data: $data, templateData: $templateData, lastRunId: $lastRunId, autoPopulateLastRunPayload: $autoPopulateLastRunPayload, configurationId: $configurationId) {
                         success
                         errorMessage
                         executionTimeMs
@@ -1997,7 +2143,8 @@ export class AITestHarnessComponent {
                 data: Object.keys(dataContext).length > 0 ? JSON.stringify(dataContext) : null,
                 templateData: Object.keys(templateData).length > 0 ? JSON.stringify(templateData) : null,
                 lastRunId: this.lastAgentRunId,
-                autoPopulateLastRunPayload: this.lastAgentRunId ? true : false
+                autoPopulateLastRunPayload: this.lastAgentRunId ? true : false,
+                configurationId: this.agentConfigurationId || undefined
             };
             // Start typing animation while we wait for the first real stream
             this.startTypingAnimation(assistantMessage);
@@ -2208,7 +2355,7 @@ export class AITestHarnessComponent {
                 data: JSON.stringify(dataContext),
                 overrideModelId: this.selectedModelId || undefined,
                 overrideVendorId: this.selectedVendorId || undefined,
-                configurationId: undefined, // Use default configuration
+                configurationId: this.selectedConfigurationId || undefined,
                 skipValidation: this.skipValidation,
                 templateData: null, // Additional template context if needed
                 responseFormat: this.selectedResponseFormat?.value,
@@ -2534,7 +2681,9 @@ export class AITestHarnessComponent {
             advancedParams: this.mode === 'prompt' ? this.advancedParams : undefined,
             selectedModelId: this.mode === 'prompt' ? this.selectedModelId : undefined,
             selectedVendorId: this.mode === 'prompt' ? this.selectedVendorId : undefined,
+            selectedConfigurationId: this.mode === 'prompt' ? this.selectedConfigurationId : undefined,
             skipValidation: this.mode === 'prompt' ? this.skipValidation : undefined,
+            agentConfigurationId: this.mode === 'agent' ? this.agentConfigurationId : undefined,
             createdAt: new Date(),
             updatedAt: new Date()
         };
@@ -2599,12 +2748,14 @@ export class AITestHarnessComponent {
                 this.savedConversations[index].dataContext = this.buildDataContext();
                 if (this.mode === 'agent') {
                     this.savedConversations[index].templateData = this.buildTemplateData();
+                    this.savedConversations[index].agentConfigurationId = this.agentConfigurationId;
                 }
                 else {
                     this.savedConversations[index].templateVariables = this.buildTemplateVariables();
                     this.savedConversations[index].advancedParams = this.advancedParams;
                     this.savedConversations[index].selectedModelId = this.selectedModelId;
                     this.savedConversations[index].selectedVendorId = this.selectedVendorId;
+                    this.savedConversations[index].selectedConfigurationId = this.selectedConfigurationId;
                     this.savedConversations[index].skipValidation = this.skipValidation;
                 }
                 this.savedConversations[index].updatedAt = new Date();
@@ -2661,6 +2812,12 @@ export class AITestHarnessComponent {
                         typeof value === 'object' ? 'object' : 'string'
             });
         }
+        // Restore configuration for agent mode
+        if (this.mode === 'agent') {
+            if (conversation.agentConfigurationId !== undefined) {
+                this.agentConfigurationId = conversation.agentConfigurationId;
+            }
+        }
         // Restore template variables for prompt mode
         if (this.mode === 'prompt') {
             this.templateVariables = [];
@@ -2696,6 +2853,10 @@ export class AITestHarnessComponent {
             if (conversation.selectedVendorId !== undefined && !this.selectedModelId) {
                 this.selectedVendorId = conversation.selectedVendorId;
             }
+            // Restore configuration selection
+            if (conversation.selectedConfigurationId !== undefined) {
+                this.selectedConfigurationId = conversation.selectedConfigurationId;
+            }
             // Restore skip validation setting
             if (conversation.skipValidation !== undefined) {
                 this.skipValidation = conversation.skipValidation;
@@ -2752,12 +2913,16 @@ export class AITestHarnessComponent {
         // Add mode-specific data
         if (this.mode === 'agent') {
             exportData.templateData = this.buildTemplateData();
+            exportData.agentSettings = {
+                configurationId: this.agentConfigurationId
+            };
         }
         else {
             exportData.templateVariables = this.buildTemplateVariables();
             exportData.modelSettings = {
                 modelId: this.selectedModelId,
                 vendorId: this.selectedVendorId,
+                configurationId: this.selectedConfigurationId,
                 maxTokens: this.maxTokens,
                 skipValidation: this.skipValidation
             };
@@ -2812,6 +2977,40 @@ export class AITestHarnessComponent {
                             this.advancedParams = { ...this.advancedParams, ...data.advancedParams };
                             this.stopSequencesText = this.advancedParams.stopSequences?.join(', ') || '';
                         }
+                        // Import agent settings if in agent mode
+                        if (this.mode === 'agent' && data.agentSettings) {
+                            if (data.agentSettings.configurationId !== undefined) {
+                                this.agentConfigurationId = data.agentSettings.configurationId;
+                            }
+                        }
+                        // Import model settings if in prompt mode
+                        if (this.mode === 'prompt' && data.modelSettings) {
+                            if (data.modelSettings.modelId !== undefined) {
+                                this.selectedModelId = data.modelSettings.modelId;
+                                // Trigger vendor loading if model is selected
+                                if (this.selectedModelId) {
+                                    this.onModelSelectionChange();
+                                    // After vendors load, restore vendor selection
+                                    setTimeout(() => {
+                                        if (data.modelSettings.vendorId !== undefined) {
+                                            this.selectedVendorId = data.modelSettings.vendorId;
+                                        }
+                                    }, 100);
+                                }
+                            }
+                            if (data.modelSettings.vendorId !== undefined && !this.selectedModelId) {
+                                this.selectedVendorId = data.modelSettings.vendorId;
+                            }
+                            if (data.modelSettings.configurationId !== undefined) {
+                                this.selectedConfigurationId = data.modelSettings.configurationId;
+                            }
+                            if (data.modelSettings.maxTokens !== undefined) {
+                                this.maxTokens = data.modelSettings.maxTokens;
+                            }
+                            if (data.modelSettings.skipValidation !== undefined) {
+                                this.skipValidation = data.modelSettings.skipValidation;
+                            }
+                        }
                         this.currentConversationId = null;
                         this.scrollNeeded = true;
                         MJNotificationService.Instance.CreateSimpleNotification('Conversation imported successfully', 'success', 3000);
@@ -3520,7 +3719,7 @@ export class AITestHarnessComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageInput = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.saveDialogInput = _t.first);
-        } }, inputs: { mode: "mode", entity: "entity", aiAgent: "aiAgent", isVisible: "isVisible" }, outputs: { visibilityChange: "visibilityChange", runOpened: "runOpened", minimizeRequested: "minimizeRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["fileInput", ""], ["messagesContainer", ""], ["messageInput", ""], ["saveDialogInput", ""], ["class", "harness-container", "kendoWindowContainer", "", 4, "ngIf"], [1, "save-dialog", 3, "title", "width"], [1, "confirm-dialog", 3, "title", "width"], ["kendoWindowContainer", "", 1, "harness-container"], [1, "harness-header"], [1, "agent-info"], [1, "harness-body"], ["orientation", "horizontal", 2, "height", "100%", "width", "100%"], [1, "chat-area"], [1, "agent-details"], [1, "entity-logo", 3, "src", "alt"], [3, "class"], [1, "header-actions"], ["title", "Clear conversation", 1, "custom-button", 3, "click", "disabled"], [1, "fa-solid", "fa-broom"], ["title", "Save conversation", 1, "custom-button", 3, "click", "disabled"], [1, "fa-solid", "fa-save"], ["title", "Export conversation", 1, "custom-button", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], ["title", "Import conversation", 1, "custom-button", 3, "click"], [1, "fa-solid", "fa-upload"], ["type", "file", "accept", ".json", 2, "display", "none", 3, "change"], ["title", "Toggle sidebar", 1, "custom-button", "icon-only", 3, "click"], [1, "fa-solid"], [3, "collapsible", "resizable", "min"], [1, "messages-container"], [1, "empty-state"], [3, "ngClass"], [1, "input-area"], [1, "input-container"], ["placeholder", "Type your message here... (Press Enter to send, Shift+Enter for new line)", 1, "message-input", 3, "ngModelChange", "keypress", "ngModel", "rows", "disabled"], ["title", "Send message", 1, "send-button", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-paper-plane"], [3, "collapsible", "resizable", "size", "min"], [1, "sidebar"], [1, "sidebar-tabs"], [1, "tab-button", 3, "click", "disabled"], [1, "fa-solid", "fa-history"], [1, "badge"], [1, "sidebar-content"], [1, "tab-content"], [1, "tab-content", 2, "padding", "0", "height", "100%"], [1, "tab-content", 2, "overflow-y", "auto"], [1, "fa-solid", "fa-comments"], [1, "message-header"], [1, "message-role"], [1, "message-time"], [1, "execution-time", "streaming"], [1, "execution-time", 3, "title"], ["title", "View raw JSON response", 1, "raw-toggle"], [1, "message-content"], ["title", "Copy message", 1, "copy-button-in-bubble", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "streaming-wrapper"], [3, "innerHTML"], [1, "error-details"], [1, "payload-section", 3, "collapsed"], [1, "fa-solid", "fa-user"], [1, "message-role-logo", 3, "src", "alt"], ["title", "View raw JSON response", 1, "raw-toggle", 3, "click"], [1, "fa-solid", "fa-code"], [1, "streaming-content", 3, "innerHTML"], [1, "cursor"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "payload-section"], [1, "payload-header", 3, "click"], [1, "payload-label"], ["type", "button", 1, "payload-toggle"], [1, "payload-content"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [1, "tab-button", 3, "click"], [1, "fa-solid", "fa-diagram-project"], [1, "fa-solid", "fa-sliders"], [1, "tab-header"], [1, "variables-list"], [1, "empty-variables"], [1, "variable-item"], [1, "add-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["placeholder", "Variable name", 1, "variable-name", 3, "ngModelChange", "ngModel", "disabled"], ["textField", "text", "valueField", "value", 1, "variable-type", 3, "ngModelChange", "ngModel", "data", "valuePrimitive", "disabled"], [1, "variable-value", 3, "ngModelChange", "ngModel", "placeholder", "disabled"], ["title", "Remove variable", 1, "remove-button", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], [3, "viewRunClick", "mode", "agentRun", "liveSteps", "autoExpand", "runId", "runType"], [1, "add-button", 3, "click"], ["title", "Remove variable", 1, "remove-button", 3, "click"], ["title", "Reset to Prompt Settings", 1, "custom-button", "icon-only", 3, "click"], [1, "fa-solid", "fa-undo"], [1, "model-settings"], [1, "setting-group"], ["textField", "Name", "valueField", "ID", "placeholder", "Select a model...", 1, "model-selector", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "placeholder", "Select a vendor...", 1, "vendor-selector", 3, "ngModelChange", "ngModel", "data", "valuePrimitive", "disabled"], [1, "setting-help"], ["textField", "text", "valueField", "value", "placeholder", "Select format...", 1, "format-selector", 3, "ngModelChange", "ngModel", "data"], ["placeholder", "Max tokens...", 1, "max-tokens-input", 3, "ngModelChange", "ngModel", "min", "max", "step"], [1, "checkbox-label"], ["type", "checkbox", 1, "skip-validation-checkbox", 3, "ngModelChange", "ngModel"], ["title", "Advanced Parameters", 1, "advanced-params-panel", 3, "action", "expanded"], [1, "advanced-settings"], ["title", "Controls randomness: 0 = more focused and deterministic, 2 = more random and creative"], ["placeholder", "None", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "min", "max", "step", "format"], ["title", "Nucleus sampling: only consider tokens with cumulative probability up to this value. 1 = consider all tokens"], ["title", "Only sample from the top K tokens. Lower values reduce randomness"], ["title", "Minimum probability for token selection. Filters out low-probability tokens"], ["title", "Penalizes tokens based on their frequency in the text. Positive values reduce repetition"], ["title", "Penalizes tokens that have appeared in the text. Positive values increase topic diversity"], ["title", "Random seed for deterministic generation. Same seed produces same output"], ["placeholder", "None", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "format"], ["title", "Sequences that will stop generation when encountered. Enter comma-separated values"], ["placeholder", "Enter comma-separated sequences", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "rows"], ["title", "Include log probabilities of the output tokens in the response"], [1, "advanced-param-switch", 3, "ngModelChange", "ngModel"], ["title", "Number of top log probabilities to include for each token"], ["placeholder", "2", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "min", "max", "step", "format"], ["title", "Start a new conversation", 1, "custom-button", "small", "primary"], [1, "saved-list"], [1, "empty-saved"], [1, "saved-item", 3, "current"], ["title", "Start a new conversation", 1, "custom-button", "small", "primary", 3, "click"], [1, "fa-solid", "fa-folder-open"], [1, "saved-item", 3, "click"], [1, "saved-info"], [1, "saved-date"], ["title", "Delete conversation", 1, "delete-button", 3, "click"], [1, "fa-solid", "fa-trash"], ["title", "View execution details", 1, "execution-history-toggle"], ["title", "View full run details", 1, "execution-history-toggle"], [1, "fa-solid", "fa-robot"], ["title", "View execution details", 1, "execution-history-toggle", 3, "click"], ["title", "View full run details", 1, "execution-history-toggle", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "streaming-content"], [1, "save-dialog", 3, "close", "title", "width"], [1, "dialog-content"], ["type", "text", "placeholder", "Conversation name", 1, "k-textbox", "k-input", "k-input-md", "k-rounded-md", "k-input-solid", "full-width", 3, "keyup"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "click", "primary", "disabled"], [1, "confirm-dialog", 3, "close", "title", "width"], ["kendoButton", "", 3, "click", "primary"]], template: function AITestHarnessComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { mode: "mode", entity: "entity", aiAgent: "aiAgent", isVisible: "isVisible" }, outputs: { visibilityChange: "visibilityChange", runOpened: "runOpened", minimizeRequested: "minimizeRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["fileInput", ""], ["messagesContainer", ""], ["messageInput", ""], ["saveDialogInput", ""], ["class", "harness-container", "kendoWindowContainer", "", 4, "ngIf"], [1, "save-dialog", 3, "title", "width"], [1, "confirm-dialog", 3, "title", "width"], ["kendoWindowContainer", "", 1, "harness-container"], [1, "harness-header"], [1, "agent-info"], [1, "harness-body"], ["orientation", "horizontal", 2, "height", "100%", "width", "100%"], [1, "chat-area"], [1, "agent-details"], [1, "entity-logo", 3, "src", "alt"], [3, "class"], [1, "header-actions"], ["title", "Clear conversation", 1, "custom-button", 3, "click", "disabled"], [1, "fa-solid", "fa-broom"], ["title", "Save conversation", 1, "custom-button", 3, "click", "disabled"], [1, "fa-solid", "fa-save"], ["title", "Export conversation", 1, "custom-button", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], ["title", "Import conversation", 1, "custom-button", 3, "click"], [1, "fa-solid", "fa-upload"], ["type", "file", "accept", ".json", 2, "display", "none", 3, "change"], ["title", "Toggle sidebar", 1, "custom-button", "icon-only", 3, "click"], [1, "fa-solid"], [3, "collapsible", "resizable", "min"], [1, "messages-container"], [1, "empty-state"], [3, "ngClass"], [1, "input-area"], [1, "input-container"], ["placeholder", "Type your message here... (Press Enter to send, Shift+Enter for new line)", 1, "message-input", 3, "ngModelChange", "keypress", "ngModel", "rows", "disabled"], ["title", "Send message", 1, "send-button", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-paper-plane"], [3, "collapsible", "resizable", "size", "min"], [1, "sidebar"], [1, "sidebar-tabs"], [1, "tab-button", 3, "click", "disabled"], [1, "fa-solid", "fa-history"], [1, "badge"], [1, "sidebar-content"], [1, "tab-content"], [1, "tab-content", 2, "padding", "0", "height", "100%"], [1, "tab-content", 2, "overflow-y", "auto"], [1, "fa-solid", "fa-comments"], [1, "message-header"], [1, "message-role"], [1, "message-time"], [1, "execution-time", "streaming"], [1, "execution-time", 3, "title"], ["title", "View raw JSON response", 1, "raw-toggle"], [1, "message-content"], ["title", "Copy message", 1, "copy-button-in-bubble", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "streaming-wrapper"], [3, "innerHTML"], [1, "error-details"], [1, "payload-section", 3, "collapsed"], [1, "fa-solid", "fa-user"], [1, "message-role-logo", 3, "src", "alt"], ["title", "View raw JSON response", 1, "raw-toggle", 3, "click"], [1, "fa-solid", "fa-code"], [1, "streaming-content", 3, "innerHTML"], [1, "cursor"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "payload-section"], [1, "payload-header", 3, "click"], [1, "payload-label"], ["type", "button", 1, "payload-toggle"], [1, "payload-content"], [2, "height", "300px", "width", "100%", 3, "ngModel", "language", "readonly"], [1, "tab-button", 3, "click"], [1, "fa-solid", "fa-diagram-project"], [1, "fa-solid", "fa-sliders"], [1, "tab-header"], [1, "variables-list"], [1, "empty-variables"], [1, "variable-item"], [1, "add-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["placeholder", "Variable name", 1, "variable-name", 3, "ngModelChange", "ngModel", "disabled"], ["textField", "text", "valueField", "value", 1, "variable-type", 3, "ngModelChange", "ngModel", "data", "valuePrimitive", "disabled"], [1, "variable-value", 3, "ngModelChange", "ngModel", "placeholder", "disabled"], ["title", "Remove variable", 1, "remove-button", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], [3, "viewRunClick", "mode", "agentRun", "liveSteps", "autoExpand", "runId", "runType"], [1, "model-settings"], [1, "setting-group"], ["textField", "Name", "valueField", "ID", "placeholder", "Select a configuration...", 1, "configuration-selector", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "setting-help"], [1, "add-button", 3, "click"], ["title", "Remove variable", 1, "remove-button", 3, "click"], ["title", "Reset to Prompt Settings", 1, "custom-button", "icon-only", 3, "click"], [1, "fa-solid", "fa-undo"], ["textField", "Name", "valueField", "ID", "placeholder", "Select a model...", 1, "model-selector", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "placeholder", "Select a vendor...", 1, "vendor-selector", 3, "ngModelChange", "ngModel", "data", "valuePrimitive", "disabled"], ["textField", "text", "valueField", "value", "placeholder", "Select format...", 1, "format-selector", 3, "ngModelChange", "ngModel", "data"], ["placeholder", "Max tokens...", 1, "max-tokens-input", 3, "ngModelChange", "ngModel", "min", "max", "step"], [1, "checkbox-label"], ["type", "checkbox", 1, "skip-validation-checkbox", 3, "ngModelChange", "ngModel"], ["title", "Advanced Parameters", 1, "advanced-params-panel", 3, "action", "expanded"], [1, "advanced-settings"], ["title", "Controls randomness: 0 = more focused and deterministic, 2 = more random and creative"], ["placeholder", "None", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "min", "max", "step", "format"], ["title", "Nucleus sampling: only consider tokens with cumulative probability up to this value. 1 = consider all tokens"], ["title", "Only sample from the top K tokens. Lower values reduce randomness"], ["title", "Minimum probability for token selection. Filters out low-probability tokens"], ["title", "Penalizes tokens based on their frequency in the text. Positive values reduce repetition"], ["title", "Penalizes tokens that have appeared in the text. Positive values increase topic diversity"], ["title", "Random seed for deterministic generation. Same seed produces same output"], ["placeholder", "None", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "format"], ["title", "Sequences that will stop generation when encountered. Enter comma-separated values"], ["placeholder", "Enter comma-separated sequences", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "rows"], ["title", "Include log probabilities of the output tokens in the response"], [1, "advanced-param-switch", 3, "ngModelChange", "ngModel"], ["title", "Number of top log probabilities to include for each token"], ["placeholder", "2", 1, "advanced-param-input", 3, "ngModelChange", "ngModel", "min", "max", "step", "format"], ["title", "Start a new conversation", 1, "custom-button", "small", "primary"], [1, "saved-list"], [1, "empty-saved"], [1, "saved-item", 3, "current"], ["title", "Start a new conversation", 1, "custom-button", "small", "primary", 3, "click"], [1, "fa-solid", "fa-folder-open"], [1, "saved-item", 3, "click"], [1, "saved-info"], [1, "saved-date"], ["title", "Delete conversation", 1, "delete-button", 3, "click"], [1, "fa-solid", "fa-trash"], ["title", "View execution details", 1, "execution-history-toggle"], ["title", "View full run details", 1, "execution-history-toggle"], [1, "fa-solid", "fa-robot"], ["title", "View execution details", 1, "execution-history-toggle", 3, "click"], ["title", "View full run details", 1, "execution-history-toggle", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "streaming-content"], [1, "save-dialog", 3, "close", "title", "width"], [1, "dialog-content"], ["type", "text", "placeholder", "Conversation name", 1, "k-textbox", "k-input", "k-input-md", "k-rounded-md", "k-input-solid", "full-width", 3, "keyup"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "click", "primary", "disabled"], [1, "confirm-dialog", 3, "close", "title", "width"], ["kendoButton", "", 3, "click", "primary"]], template: function AITestHarnessComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, AITestHarnessComponent_div_0_Template, 6, 2, "div", 4)(1, AITestHarnessComponent_Conditional_1_Template, 11, 4, "kendo-dialog", 5)(2, AITestHarnessComponent_Conditional_2_Template, 11, 3, "kendo-dialog", 6);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.isVisible);
@@ -3532,7 +3731,7 @@ export class AITestHarnessComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AITestHarnessComponent, [{
         type: Component,
-        args: [{ selector: 'mj-ai-test-harness', template: "<div class=\"harness-container\" *ngIf=\"isVisible\" 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\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                    \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\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\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                    </kendo-splitter-pane>\n                    \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                        } @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\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                                \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                                    \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                                            \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                                            \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                                            \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                                \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\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\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                                \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                                            \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                                            \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                                            \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                                \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\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                                \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                                    \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                                    \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                                    \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                                    \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                                    \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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\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                                \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                                    \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\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\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    <!-- 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.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: [{ selector: 'mj-ai-test-harness', template: "<div class=\"harness-container\" *ngIf=\"isVisible\" 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\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                    \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\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\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                    </kendo-splitter-pane>\n                    \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\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                                \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                                    \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                                            \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                                            \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                                            \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                                \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\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\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                                \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\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                                \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                                            \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                                            \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                                            \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                                \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\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                                \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                                    \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                                    \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                                    \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                                    \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                                    \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                                    \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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                                            \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\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                                \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                                    \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\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\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    <!-- 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.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: [{
@@ -3560,5 +3759,5 @@ export class AITestHarnessComponent {
             type: ViewChild,
             args: ['saveDialogInput']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AITestHarnessComponent, { className: "AITestHarnessComponent", filePath: "lib/ai-test-harness.component.ts", lineNumber: 151 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AITestHarnessComponent, { className: "AITestHarnessComponent", filePath: "lib/ai-test-harness.component.ts", lineNumber: 155 }); })();
 //# sourceMappingURL=ai-test-harness.component.js.map