npm - @memberjunction/ng-core-entity-forms - Versions diffs - 2.82.0 → 2.83.0 - Mend

@memberjunction/ng-core-entity-forms 2.82.0 → 2.83.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/lib/custom/AIAgents/ai-agent-form.component.js CHANGED Viewed

@@ -29,29 +29,29 @@ import * as i13 from "@memberjunction/ng-form-toolbar";
 import * as i14 from "@memberjunction/ng-code-editor";
 const _c0 = ["customSectionContainer"];
 const _forTrack0 = ($index, $item) => $item.ID;
-function AIAgentFormComponentExtended_form_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 11);
+function AIAgentFormComponentExtended_form_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 12);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("src", ctx_r1.record.LogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r1.record.Name + " logo");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(ctx_r1.getAgentIcon());
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textbox", 29);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_Conditional_10_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Name, $event) || (ctx_r1.record.Name = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-textbox", 30);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_10_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Name, $event) || (ctx_r1.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Name);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h1", 15);
+function AIAgentFormComponentExtended_form_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h1", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -59,9 +59,9 @@ function AIAgentFormComponentExtended_form_2_Conditional_11_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled AI Agent");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
-    i0.ɵɵelement(1, "i", 31);
+function AIAgentFormComponentExtended_form_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -70,8 +70,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_13_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Status, " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
+function AIAgentFormComponentExtended_form_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 19);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -79,9 +79,9 @@ function AIAgentFormComponentExtended_form_2_Conditional_14_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Agent Type: ", ctx_r1.record.Type, " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 19);
-    i0.ɵɵelement(1, "i", 32);
+function AIAgentFormComponentExtended_form_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
+    i0.ɵɵelement(1, "i", 33);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89,53 +89,53 @@ function AIAgentFormComponentExtended_form_2_Conditional_15_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" Child of ", ctx_r1.record.Parent, " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openTestHarness()); });
-    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openTestHarness()); });
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r1.record.Status !== "Active");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 36);
+function AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 37);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.agentType.Name, " Configuration ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
+function AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelementContainer(1, null, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵstyleProp("display", "block");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 35);
-    i0.ɵɵlistener("stateChange", function AIAgentFormComponentExtended_form_2_Conditional_22_Template_kendo_panelbar_item_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCustomSectionStateChange($event)); });
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 27)(2, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template, 3, 2, "ng-template", 28);
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 36);
+    i0.ɵɵlistener("stateChange", function AIAgentFormComponentExtended_form_3_Conditional_22_Template_kendo_panelbar_item_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCustomSectionStateChange($event)); });
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_22_ng_template_2_Template, 3, 2, "ng-template", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("expanded", ctx_r1.agentType.UIFormSectionExpandedByDefault);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Execution History", ctx_r1.executionHistoryCount > 0 ? " (" + ctx_r1.executionHistoryCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 38);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 39);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Execution History");
     i0.ɵɵelementEnd();
@@ -143,13 +143,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵtext(5, "This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵelement(1, "i", 59);
-    i0.ɵɵelementStart(2, "span", 60);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(2, "span", 61);
     i0.ɵɵtext(3, "Config:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 61);
+    i0.ɵɵelementStart(4, "span", 62);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -157,13 +157,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(execution_r7.Configuration);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵelement(1, "i", 62);
-    i0.ɵɵelementStart(2, "span", 60);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(2, "span", 61);
     i0.ɵɵtext(3, "Duration:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 61);
+    i0.ɵɵelementStart(4, "span", 62);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -172,13 +172,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTimeFromDates(execution_r7.StartedAt, execution_r7.CompletedAt));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵelement(1, "i", 63);
-    i0.ɵɵelementStart(2, "span", 60);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵelement(1, "i", 64);
+    i0.ɵɵelementStart(2, "span", 61);
     i0.ɵɵtext(3, "Running:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 61);
+    i0.ɵɵelementStart(4, "span", 62);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -187,13 +187,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.getRunningTime(execution_r7.StartedAt));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵelement(1, "i", 64);
-    i0.ɵɵelementStart(2, "span", 60);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵelementStart(2, "span", 61);
     i0.ɵɵtext(3, "Tokens:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 61);
+    i0.ɵɵelementStart(4, "span", 62);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -202,13 +202,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r7.TotalTokensUsedRollup || execution_r7.TotalTokensUsed));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵelement(1, "i", 65);
-    i0.ɵɵelementStart(2, "span", 60);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelementStart(2, "span", 61);
     i0.ɵɵtext(3, "Cost:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 61);
+    i0.ɵɵelementStart(4, "span", 62);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -217,13 +217,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r7.TotalCostRollup || execution_r7.TotalCost), "");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 74);
-    i0.ɵɵelementStart(2, "div", 69)(3, "span", 70);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 75);
+    i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
     i0.ɵɵtext(4, "Completed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 71);
+    i0.ɵɵelementStart(5, "span", 72);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "date");
     i0.ɵɵelementEnd()()();
@@ -232,13 +232,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 1, execution_r7.CompletedAt, "medium"));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 64);
-    i0.ɵɵelementStart(2, "div", 69)(3, "span", 70);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 65);
+    i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
     i0.ɵɵtext(4, "Direct Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 71);
+    i0.ɵɵelementStart(5, "span", 72);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -247,13 +247,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r7.TotalTokensUsed));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 32);
-    i0.ɵɵelementStart(2, "div", 69)(3, "span", 70);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 71);
+    i0.ɵɵelementStart(5, "span", 72);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -262,13 +262,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r7.TotalTokensUsedRollup));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 65);
-    i0.ɵɵelementStart(2, "div", 69)(3, "span", 70);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
     i0.ɵɵtext(4, "Direct Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 71);
+    i0.ɵɵelementStart(5, "span", 72);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -277,13 +277,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r7.TotalCost), "");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 75);
-    i0.ɵɵelementStart(2, "div", 69)(3, "span", 70);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 76);
+    i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 71);
+    i0.ɵɵelementStart(5, "span", 72);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -292,13 +292,13 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r7.TotalCostRollup), "");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
-    i0.ɵɵelement(1, "i", 76);
-    i0.ɵɵelementStart(2, "div", 69)(3, "span", 70);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 77);
+    i0.ɵɵelementStart(2, "div", 70)(3, "span", 71);
     i0.ɵɵtext(4, "Conversation");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 71);
+    i0.ɵɵelementStart(5, "span", 72);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -306,12 +306,12 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1("", execution_r7.ConversationID.substring(0, 8), "...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72)(1, "h5");
-    i0.ɵɵelement(2, "i", 77);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 73)(1, "h5");
+    i0.ɵɵelement(2, "i", 78);
     i0.ɵɵtext(3, " Result");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "mj-code-editor", 78);
+    i0.ɵɵelement(4, "mj-code-editor", 79);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r7 = i0.ɵɵnextContext(2).$implicit;
@@ -319,12 +319,12 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r7, false))("readonly", true)("lineWrapping", true);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 73)(1, "h5");
-    i0.ɵɵelement(2, "i", 79);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74)(1, "h5");
+    i0.ɵɵelement(2, "i", 80);
     i0.ɵɵtext(3, " Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 80);
+    i0.ɵɵelementStart(4, "div", 81);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -332,19 +332,19 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(execution_r7.ErrorMessage);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 66)(2, "div", 67)(3, "div", 68);
-    i0.ɵɵelement(4, "i", 63);
-    i0.ɵɵelementStart(5, "div", 69)(6, "span", 70);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59)(1, "div", 67)(2, "div", 68)(3, "div", 69);
+    i0.ɵɵelement(4, "i", 64);
+    i0.ɵɵelementStart(5, "div", 70)(6, "span", 71);
     i0.ɵɵtext(7, "Started");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 71);
+    i0.ɵɵelementStart(8, "span", 72);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template, 8, 4, "div", 68)(12, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template, 7, 1, "div", 68)(13, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template, 7, 1, "div", 68)(14, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template, 7, 1, "div", 68)(15, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template, 7, 1, "div", 68)(16, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template, 7, 1, "div", 68);
+    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template, 8, 4, "div", 69)(12, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template, 7, 1, "div", 69)(13, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template, 7, 1, "div", 69)(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template, 7, 1, "div", 69)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template, 7, 1, "div", 69)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template, 7, 1, "div", 69);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template, 5, 3, "div", 72)(18, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template, 6, 1, "div", 73);
+    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template, 5, 3, "div", 73)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template, 6, 1, "div", 74);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r7 = i0.ɵɵnextContext().$implicit;
@@ -367,29 +367,29 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(execution_r7.ErrorMessage ? 18 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Template_div_click_1_listener() { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r7.ID)); });
-    i0.ɵɵelementStart(2, "div", 46)(3, "div", 47)(4, "div", 48);
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 46);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template_div_click_1_listener() { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r7.ID)); });
+    i0.ɵɵelementStart(2, "div", 47)(3, "div", 48)(4, "div", 49);
     i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 49)(7, "div", 50);
-    i0.ɵɵelement(8, "i", 51);
+    i0.ɵɵelementStart(6, "div", 50)(7, "div", 51);
+    i0.ɵɵelement(8, "i", 52);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 52);
+    i0.ɵɵelementStart(10, "div", 53);
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 53);
-    i0.ɵɵtemplate(14, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template, 6, 1, "div", 54)(15, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template, 6, 1, "div", 54)(16, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template, 6, 1, "div", 54)(17, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template, 6, 1, "div", 54)(18, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template, 6, 1, "div", 54);
+    i0.ɵɵelementStart(13, "div", 54);
+    i0.ɵɵtemplate(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template, 6, 1, "div", 55)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template, 6, 1, "div", 55)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template, 6, 1, "div", 55)(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template, 6, 1, "div", 55)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template, 6, 1, "div", 55);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 55)(20, "button", 56);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Template_button_click_20_listener($event) { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.openExecutionRecord(execution_r7.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(21, "i", 57);
+    i0.ɵɵelementStart(19, "div", 56)(20, "button", 57);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template_button_click_20_listener($event) { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.openExecutionRecord(execution_r7.ID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(21, "i", 58);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template, 19, 12, "div", 58);
+    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template, 19, 12, "div", 59);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r7 = ctx.$implicit;
@@ -416,10 +416,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r7.ID] ? 22 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -428,10 +428,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.executionHistoryCount, " executions...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_For_2_Template, 23, 18, "div", 42, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template, 3, 1, "div", 43);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template, 23, 18, "div", 43, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template, 3, 1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -440,64 +440,64 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.executionHistoryCount > ctx_r1.recentExecutions.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_1_Template, 6, 0, "div", 40)(2, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_2_Template, 4, 1, "div", 41);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_1_Template, 6, 0, "div", 41)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template, 4, 1, "div", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.executionHistoryCount === 0 ? 1 : 2);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template, 2, 1, "ng-template", 27)(2, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template, 3, 1, "ng-template", 28);
+function AIAgentFormComponentExtended_form_3_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Template, 3, 1, "ng-template", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 82);
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 83);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Actions", ctx_r1.actionCount > 0 ? " (" + ctx_r1.actionCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 91);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Configure First Action ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 82);
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 83);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Actions Configured");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Add actions to enable this agent to perform specific tasks and operations.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "button", 90);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "button", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 97);
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -505,8 +505,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(action_r12.Description);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 99);
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 100);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -514,33 +514,33 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(action_r12.Type);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 105);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const action_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r12, $event)); });
-    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵelementStart(0, "button", 106);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const action_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r12, $event)); });
+    i0.ɵɵelement(1, "i", 107);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const action_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r12.ID)); });
-    i0.ɵɵelementStart(1, "div", 94);
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const action_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r12.ID)); });
+    i0.ɵɵelementStart(1, "div", 95);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 95)(4, "div", 96);
+    i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 1, "div", 97);
-    i0.ɵɵelementStart(7, "div", 98);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 99);
-    i0.ɵɵelementStart(9, "span", 100);
-    i0.ɵɵelement(10, "i", 101);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 1, "div", 98);
+    i0.ɵɵelementStart(7, "div", 99);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 100);
+    i0.ɵɵelementStart(9, "span", 101);
+    i0.ɵɵelement(10, "i", 102);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 102);
-    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "button", 103);
-    i0.ɵɵelement(14, "i", 104);
+    i0.ɵɵelementStart(12, "div", 103);
+    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "button", 104);
+    i0.ɵɵelement(14, "i", 105);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const action_r12 = ctx.$implicit;
@@ -562,10 +562,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeleteActions ? 13 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -574,10 +574,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Template, 15, 15, "div", 92, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 43);
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_For_2_Template, 15, 15, "div", 93, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -586,11 +586,11 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 85);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_3_Template, 3, 0, "button", 86);
+function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 86);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_3_Template, 3, 0, "button", 87);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_4_Template, 7, 1, "div", 40)(5, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Template, 4, 1, "div", 87);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_4_Template, 7, 1, "div", 41)(5, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_5_Template, 4, 1, "div", 88);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -599,78 +599,78 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_1_Template, 2, 1, "ng-template", 27)(2, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Template, 6, 2, "ng-template", 28);
+function AIAgentFormComponentExtended_form_3_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Template, 6, 2, "ng-template", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 32);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 33);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Sub-Agents", ctx_r1.subAgentCount > 0 ? " (" + ctx_r1.subAgentCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Add Subagent ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 108);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
-    i0.ɵɵelement(4, "i", 89);
+    i0.ɵɵelementStart(3, "button", 109);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
+    i0.ɵɵelement(4, "i", 90);
     i0.ɵɵtext(5, " Create Sub-Agent ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 91);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Add Subagent ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 109);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
-    i0.ɵɵelement(4, "i", 89);
+    i0.ɵɵelementStart(3, "button", 110);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
+    i0.ɵɵelement(4, "i", 90);
     i0.ɵɵtext(5, " Create First Sub-Agent ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 32);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Sub-Agents");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Create sub-agents to build a hierarchical structure for complex workflows.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template, 6, 0);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template, 6, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateSubAgents ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 112);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 113);
 } if (rf & 2) {
     const subAgent_r18 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("src", subAgent_r18.LogoURL, i0.ɵɵsanitizeUrl)("alt", subAgent_r18.Name + " logo");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const subAgent_r18 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(subAgent_r18));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 97);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -678,8 +678,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(subAgent_r18.Description);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 100);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 101);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -689,8 +689,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", subAgent_r18.Status, " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 99);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 100);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -698,37 +698,37 @@ function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(subAgent_r18.ExecutionMode);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 116);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r19); const subAgent_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(subAgent_r18, $event)); });
-    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵelementStart(0, "button", 117);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r19); const subAgent_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(subAgent_r18, $event)); });
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 117);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r20); const subAgent_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeSubAgent(subAgent_r18, $event)); });
-    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵelementStart(0, "button", 118);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r20); const subAgent_r18 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeSubAgent(subAgent_r18, $event)); });
+    i0.ɵɵelement(1, "i", 107);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 111);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const subAgent_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", subAgent_r18.ID)); });
-    i0.ɵɵelementStart(1, "div", 94);
-    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_2_Template, 1, 2, "img", 112)(3, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_3_Template, 1, 2, "i", 12);
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const subAgent_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", subAgent_r18.ID)); });
+    i0.ɵɵelementStart(1, "div", 95);
+    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_2_Template, 1, 2, "img", 113)(3, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_3_Template, 1, 2, "i", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 95)(5, "div", 96);
+    i0.ɵɵelementStart(4, "div", 96)(5, "div", 97);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_7_Template, 2, 1, "div", 97);
-    i0.ɵɵelementStart(8, "div", 98);
-    i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 3, "span", 113)(10, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_10_Template, 2, 1, "span", 99);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_7_Template, 2, 1, "div", 98);
+    i0.ɵɵelementStart(8, "div", 99);
+    i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 3, "span", 114)(10, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_10_Template, 2, 1, "span", 100);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 102);
-    i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template, 2, 0, "button", 114)(13, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template, 2, 0, "button", 115);
-    i0.ɵɵelement(14, "i", 104);
+    i0.ɵɵelementStart(11, "div", 103);
+    i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_12_Template, 2, 0, "button", 115)(13, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_13_Template, 2, 0, "button", 116);
+    i0.ɵɵelement(14, "i", 105);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const subAgent_r18 = ctx.$implicit;
@@ -748,10 +748,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeleteSubAgents ? 13 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", "")); });
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -760,10 +760,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.subAgentCount, " sub-agents...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Template, 15, 7, "div", 110, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 43);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_For_2_Template, 15, 7, "div", 111, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -772,14 +772,14 @@ function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.subAgentCount > ctx_r1.subAgents.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 107);
+function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
     i0.ɵɵtext(3, " Manage hierarchical relationships with child agents that work under this agent. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 85);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template, 6, 0);
+    i0.ɵɵelementStart(4, "div", 86);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_5_Template, 6, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Template, 7, 1, "div", 40)(7, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Template, 4, 1, "div", 87);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_6_Template, 7, 1, "div", 41)(7, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_7_Template, 4, 1, "div", 88);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -788,33 +788,33 @@ function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.subAgentCount === 0 ? 6 : 7);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_1_Template, 2, 1, "ng-template", 27)(2, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Template, 8, 2, "ng-template", 28);
+function AIAgentFormComponentExtended_form_3_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template, 8, 2, "ng-template", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 76);
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 77);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Prompts", ctx_r1.promptCount > 0 ? " (" + ctx_r1.promptCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 124);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 125);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.ModelSelectionMode);
     i0.ɵɵproperty("data", ctx_r1.modelSelectionModes)("valuePrimitive", true);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 123);
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 124);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -822,40 +822,40 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.ModelSelectionMode || "Agent Type");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 91);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Create First Prompt ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 76);
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 77);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Prompts Configured");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Add prompts to define how this agent processes requests and generates responses.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 90);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 97);
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -863,8 +863,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", prompt_r26.TemplateText.substring(0, 120), "", prompt_r26.TemplateText.length > 120 ? "..." : "", "");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 99);
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 100);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -872,37 +872,37 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(prompt_r26.PromptRole);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 116);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r27); const prompt_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r26, $event)); });
-    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵelementStart(0, "button", 117);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r27); const prompt_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r26, $event)); });
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 129);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r28); const prompt_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r26, $event)); });
-    i0.ɵɵelement(1, "i", 106);
+    i0.ɵɵelementStart(0, "button", 130);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r28); const prompt_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r26, $event)); });
+    i0.ɵɵelement(1, "i", 107);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 126);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", prompt_r26.ID)); });
-    i0.ɵɵelementStart(1, "div", 94);
-    i0.ɵɵelement(2, "i", 127);
+    i0.ɵɵelementStart(0, "div", 127);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", prompt_r26.ID)); });
+    i0.ɵɵelementStart(1, "div", 95);
+    i0.ɵɵelement(2, "i", 128);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 95)(4, "div", 96);
+    i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 97);
-    i0.ɵɵelementStart(7, "div", 98);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 99);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 98);
+    i0.ɵɵelementStart(7, "div", 99);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 100);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 102);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 114)(11, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template, 2, 0, "button", 128);
-    i0.ɵɵelement(12, "i", 104);
+    i0.ɵɵelementStart(9, "div", 103);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 115)(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template, 2, 0, "button", 129);
+    i0.ɵɵelement(12, "i", 105);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const prompt_r26 = ctx.$implicit;
@@ -918,10 +918,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeletePrompts ? 11 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", "")); });
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -930,10 +930,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.promptCount, " prompts...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_For_2_Template, 13, 5, "div", 125, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 43);
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template, 13, 5, "div", 126, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -942,17 +942,17 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.promptCount > ctx_r1.agentPrompts.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 118)(3, "div", 119)(4, "label", 120);
-    i0.ɵɵelement(5, "i", 121);
+function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 119)(3, "div", 120)(4, "label", 121);
+    i0.ɵɵelement(5, "i", 122);
     i0.ɵɵtext(6, " Model Selection: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 122)(8, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_8_Template, 2, 1, "span", 123);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 123)(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template, 2, 1, "span", 124);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 85);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_10_Template, 3, 0, "button", 86);
+    i0.ɵɵelementStart(9, "div", 86);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template, 3, 0, "button", 87);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_11_Template, 7, 1, "div", 40)(12, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_12_Template, 4, 1, "div", 87);
+    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template, 7, 1, "div", 41)(12, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template, 4, 1, "div", 88);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -963,24 +963,24 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.promptCount === 0 ? 11 : 12);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_1_Template, 2, 1, "ng-template", 27)(2, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Template, 13, 3, "ng-template", 28);
+function AIAgentFormComponentExtended_form_3_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Template, 13, 3, "ng-template", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 130);
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 131);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Learning Cycles", ctx_r1.learningCycleCount > 0 ? " (" + ctx_r1.learningCycleCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 130);
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 131);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Learning Cycles");
     i0.ɵɵelementEnd();
@@ -988,9 +988,9 @@ function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Condit
     i0.ɵɵtext(5, "Learning cycles will appear here as the agent processes requests and improves over time.");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 99);
-    i0.ɵɵelement(1, "i", 133);
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 100);
+    i0.ɵɵelement(1, "i", 134);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -999,8 +999,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r31.StartedAt, "short"), " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 100);
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 101);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1008,21 +1008,21 @@ function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cycle_r31.Status);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 132);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r31 = i0.ɵɵrestoreView(_r30).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", cycle_r31.ID)); });
-    i0.ɵɵelementStart(1, "div", 94);
-    i0.ɵɵelement(2, "i", 130);
+    i0.ɵɵelementStart(0, "div", 133);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r31 = i0.ɵɵrestoreView(_r30).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", cycle_r31.ID)); });
+    i0.ɵɵelementStart(1, "div", 95);
+    i0.ɵɵelement(2, "i", 131);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 95)(4, "div", 96);
+    i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 98);
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 99)(8, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 100);
+    i0.ɵɵelementStart(6, "div", 99);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 100)(8, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 101);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 102);
-    i0.ɵɵelement(10, "i", 104);
+    i0.ɵɵelementStart(9, "div", 103);
+    i0.ɵɵelement(10, "i", 105);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const cycle_r31 = ctx.$implicit;
@@ -1033,10 +1033,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(cycle_r31.Status ? 8 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", "")); });
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -1045,10 +1045,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 131, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 43);
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 132, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1057,66 +1057,66 @@ function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.learningCycleCount > ctx_r1.learningCycles.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 107);
+function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
     i0.ɵɵtext(3, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Template, 6, 0, "div", 40)(5, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 87);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template, 6, 0, "div", 41)(5, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 88);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.learningCycleCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_1_Template, 2, 1, "ng-template", 27)(2, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Template, 6, 1, "ng-template", 28);
+function AIAgentFormComponentExtended_form_3_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Template, 6, 1, "ng-template", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 134);
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 135);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Notes", ctx_r1.noteCount > 0 ? " (" + ctx_r1.noteCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 91);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵtext(2, " Create First Note ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵelement(1, "i", 134);
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 135);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Notes");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Add notes to document important information, observations, or instructions for this agent.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 90);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 97);
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1124,9 +1124,9 @@ function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", note_r36.Note.substring(0, 100), "", note_r36.Note.length > 100 ? "..." : "", "");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 99);
-    i0.ɵɵelement(1, "i", 133);
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 100);
+    i0.ɵɵelement(1, "i", 134);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -1135,22 +1135,22 @@ function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, note_r36.__mj_CreatedAt, "short"), " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 136);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r36 = i0.ɵɵrestoreView(_r35).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", note_r36.ID)); });
-    i0.ɵɵelementStart(1, "div", 94);
-    i0.ɵɵelement(2, "i", 134);
+    i0.ɵɵelementStart(0, "div", 137);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r36 = i0.ɵɵrestoreView(_r35).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", note_r36.ID)); });
+    i0.ɵɵelementStart(1, "div", 95);
+    i0.ɵɵelement(2, "i", 135);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 95)(4, "div", 96);
+    i0.ɵɵelementStart(3, "div", 96)(4, "div", 97);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 97);
-    i0.ɵɵelementStart(7, "div", 98);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 99);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 98);
+    i0.ɵɵelementStart(7, "div", 99);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 100);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 102);
-    i0.ɵɵelement(10, "i", 104);
+    i0.ɵɵelementStart(9, "div", 103);
+    i0.ɵɵelement(10, "i", 105);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const note_r36 = ctx.$implicit;
@@ -1161,10 +1161,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(note_r36.__mj_CreatedAt ? 8 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", "")); });
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -1173,10 +1173,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 135, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 43);
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 136, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1185,14 +1185,14 @@ function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.noteCount > ctx_r1.agentNotes.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 107);
+function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
     i0.ɵɵtext(3, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 85);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_5_Template, 3, 0, "button", 86);
+    i0.ɵɵelementStart(4, "div", 86);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template, 3, 0, "button", 87);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Template, 7, 1, "div", 40)(7, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Template, 4, 1, "div", 87);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template, 7, 1, "div", 41)(7, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template, 4, 1, "div", 88);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1201,36 +1201,36 @@ function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.noteCount === 0 ? 6 : 7);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_1_Template, 2, 1, "ng-template", 27)(2, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Template, 8, 2, "ng-template", 28);
+function AIAgentFormComponentExtended_form_3_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Template, 2, 1, "ng-template", 28)(2, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Template, 8, 2, "ng-template", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 137);
+function AIAgentFormComponentExtended_form_3_ng_template_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 138);
     i0.ɵɵtext(1, " Payload Management ");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_31_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) { if (rf & 1) {
     const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 107);
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
     i0.ɵɵtext(3, " Configure how this agent handles data payloads, path routing, and validation between parent and child agents. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 138)(5, "h3", 139);
-    i0.ɵɵelement(6, "i", 140);
+    i0.ɵɵelementStart(4, "div", 139)(5, "h3", 140);
+    i0.ɵɵelement(6, "i", 141);
     i0.ɵɵtext(7, " Payload Scope ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 141)(9, "div", 142)(10, "label", 143);
+    i0.ɵɵelementStart(8, "div", 142)(9, "div", 143)(10, "label", 144);
     i0.ɵɵtext(11, "Payload Scope Path");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "p", 144);
+    i0.ɵɵelementStart(12, "p", 145);
     i0.ɵɵtext(13, " Specify a path within the parent payload that this sub-agent should operate on. Leave empty to receive the entire payload. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 145);
-    i0.ɵɵelement(15, "mj-form-field", 146);
-    i0.ɵɵelementStart(16, "div", 147);
-    i0.ɵɵelement(17, "i", 148);
+    i0.ɵɵelementStart(14, "div", 146);
+    i0.ɵɵelement(15, "mj-form-field", 147);
+    i0.ɵɵelementStart(16, "div", 148);
+    i0.ɵɵelement(17, "i", 149);
     i0.ɵɵelementStart(18, "span");
     i0.ɵɵtext(19, "Example: ");
     i0.ɵɵelementStart(20, "code");
@@ -1240,24 +1240,24 @@ function AIAgentFormComponentExtended_form_2_ng_template_31_Template(rf, ctx) {
     i0.ɵɵelementStart(23, "code");
     i0.ɵɵtext(24, "/analysis/results");
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(25, "div", 138)(26, "h3", 139);
-    i0.ɵɵelement(27, "i", 149);
+    i0.ɵɵelementStart(25, "div", 139)(26, "h3", 140);
+    i0.ɵɵelement(27, "i", 150);
     i0.ɵɵtext(28, " Path Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 150)(30, "div", 151)(31, "div", 152)(32, "div", 153);
-    i0.ɵɵelement(33, "i", 154);
+    i0.ɵɵelementStart(29, "div", 151)(30, "div", 152)(31, "div", 153)(32, "div", 154);
+    i0.ɵɵelement(33, "i", 155);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "div", 155)(35, "h4");
+    i0.ɵɵelementStart(34, "div", 156)(35, "h4");
     i0.ɵɵtext(36, "Downstream Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(37, "p");
     i0.ɵɵtext(38, "JSON array of paths to pass to sub-agents");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(39, "div", 156)(40, "div", 157)(41, "mj-code-editor", 158);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_31_Template_mj_code_editor_valueChange_41_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
+    i0.ɵɵelementStart(39, "div", 157)(40, "div", 158)(41, "mj-code-editor", 159);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_41_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(42, "div", 159);
-    i0.ɵɵelement(43, "i", 160);
+    i0.ɵɵelementStart(42, "div", 160);
+    i0.ɵɵelement(43, "i", 161);
     i0.ɵɵtext(44, " Use ");
     i0.ɵɵelementStart(45, "code");
     i0.ɵɵtext(46, "[\"*\"]");
@@ -1266,87 +1266,87 @@ function AIAgentFormComponentExtended_form_2_ng_template_31_Template(rf, ctx) {
     i0.ɵɵelementStart(48, "code");
     i0.ɵɵtext(49, "[\"user.id\", \"order.*\"]");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(50, "div", 151)(51, "div", 152)(52, "div", 161);
-    i0.ɵɵelement(53, "i", 162);
+    i0.ɵɵelementStart(50, "div", 152)(51, "div", 153)(52, "div", 162);
+    i0.ɵɵelement(53, "i", 163);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "div", 155)(55, "h4");
+    i0.ɵɵelementStart(54, "div", 156)(55, "h4");
     i0.ɵɵtext(56, "Upstream Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(57, "p");
     i0.ɵɵtext(58, "JSON array of paths sub-agents can write back");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(59, "div", 156)(60, "div", 157)(61, "mj-code-editor", 158);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_31_Template_mj_code_editor_valueChange_61_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
+    i0.ɵɵelementStart(59, "div", 157)(60, "div", 158)(61, "mj-code-editor", 159);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_61_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(62, "div", 159);
-    i0.ɵɵelement(63, "i", 160);
+    i0.ɵɵelementStart(62, "div", 160);
+    i0.ɵɵelement(63, "i", 161);
     i0.ɵɵtext(64, " Use ");
     i0.ɵɵelementStart(65, "code");
     i0.ɵɵtext(66, "[\"*\"]");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(67, " to allow all writes or limit to specific paths ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(68, "div", 151)(69, "div", 152)(70, "div", 163);
-    i0.ɵɵelement(71, "i", 164);
+    i0.ɵɵelementStart(68, "div", 152)(69, "div", 153)(70, "div", 164);
+    i0.ɵɵelement(71, "i", 165);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "div", 155)(73, "h4");
+    i0.ɵɵelementStart(72, "div", 156)(73, "h4");
     i0.ɵɵtext(74, "Self Read Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(75, "p");
     i0.ɵɵtext(76, "JSON array of paths this agent can read");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(77, "div", 156)(78, "div", 157)(79, "mj-code-editor", 158);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_31_Template_mj_code_editor_valueChange_79_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
+    i0.ɵɵelementStart(77, "div", 157)(78, "div", 158)(79, "mj-code-editor", 159);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_79_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(80, "div", 159);
-    i0.ɵɵelement(81, "i", 160);
+    i0.ɵɵelementStart(80, "div", 160);
+    i0.ɵɵelement(81, "i", 161);
     i0.ɵɵtext(82, " Paths this agent's prompts can read from the payload ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(83, "div", 151)(84, "div", 152)(85, "div", 165);
-    i0.ɵɵelement(86, "i", 166);
+    i0.ɵɵelementStart(83, "div", 152)(84, "div", 153)(85, "div", 166);
+    i0.ɵɵelement(86, "i", 167);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(87, "div", 155)(88, "h4");
+    i0.ɵɵelementStart(87, "div", 156)(88, "h4");
     i0.ɵɵtext(89, "Self Write Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(90, "p");
     i0.ɵɵtext(91, "JSON array of paths this agent can write to");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(92, "div", 156)(93, "div", 157)(94, "mj-code-editor", 158);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_31_Template_mj_code_editor_valueChange_94_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
+    i0.ɵɵelementStart(92, "div", 157)(93, "div", 158)(94, "mj-code-editor", 159);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_94_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(95, "div", 159);
-    i0.ɵɵelement(96, "i", 160);
+    i0.ɵɵelementStart(95, "div", 160);
+    i0.ɵɵelement(96, "i", 161);
     i0.ɵɵtext(97, " Paths this agent's prompts can write back to the payload ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(98, "div", 138)(99, "h3", 139);
-    i0.ɵɵelement(100, "i", 167);
+    i0.ɵɵelementStart(98, "div", 139)(99, "h3", 140);
+    i0.ɵɵelement(100, "i", 168);
     i0.ɵɵtext(101, " Final Payload Validation ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(102, "div", 168)(103, "div", 169)(104, "div", 170)(105, "label", 171);
+    i0.ɵɵelementStart(102, "div", 169)(103, "div", 170)(104, "div", 171)(105, "label", 172);
     i0.ɵɵtext(106, "Validation Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(107, "p", 172);
+    i0.ɵɵelementStart(107, "p", 173);
     i0.ɵɵtext(108, "How to handle validation failures");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(109, "mj-form-field", 173);
+    i0.ɵɵelement(109, "mj-form-field", 174);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(110, "div", 170)(111, "label", 171);
+    i0.ɵɵelementStart(110, "div", 171)(111, "label", 172);
     i0.ɵɵtext(112, "Max Retries");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(113, "p", 172);
+    i0.ɵɵelementStart(113, "p", 173);
     i0.ɵɵtext(114, "Maximum validation retry attempts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(115, "mj-form-field", 174);
+    i0.ɵɵelement(115, "mj-form-field", 175);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(116, "div", 175)(117, "label", 176);
-    i0.ɵɵelement(118, "i", 177);
+    i0.ɵɵelementStart(116, "div", 176)(117, "label", 177);
+    i0.ɵɵelement(118, "i", 178);
     i0.ɵɵtext(119, " Validation Schema ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(120, "p", 178);
+    i0.ɵɵelementStart(120, "p", 179);
     i0.ɵɵtext(121, " JSON schema or validation rules for the final payload structure ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(122, "div", 179)(123, "mj-code-editor", 180);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_31_Template_mj_code_editor_valueChange_123_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
+    i0.ɵɵelementStart(122, "div", 180)(123, "mj-code-editor", 181);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_123_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
     i0.ɵɵelementEnd()()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1367,16 +1367,16 @@ function AIAgentFormComponentExtended_form_2_ng_template_31_Template(rf, ctx) {
     i0.ɵɵadvance(8);
     i0.ɵɵproperty("value", ctx_r1.record.FinalPayloadValidation || "{}")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 181);
+function AIAgentFormComponentExtended_form_3_ng_template_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 182);
     i0.ɵɵtext(1, " Execution Guardrails ");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 107);
+function AIAgentFormComponentExtended_form_3_ng_template_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
     i0.ɵɵtext(3, " Set limits to prevent runaway agent executions and control resource usage. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 182);
-    i0.ɵɵelement(5, "mj-form-field", 183)(6, "mj-form-field", 184)(7, "mj-form-field", 185)(8, "mj-form-field", 186);
+    i0.ɵɵelementStart(4, "div", 183);
+    i0.ɵɵelement(5, "mj-form-field", 184)(6, "mj-form-field", 185)(7, "mj-form-field", 186)(8, "mj-form-field", 187);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1389,22 +1389,22 @@ function AIAgentFormComponentExtended_form_2_ng_template_34_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 187);
+function AIAgentFormComponentExtended_form_3_ng_template_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 188);
     i0.ɵɵtext(1, " Configuration ");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 220);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_19_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 221);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Status);
     i0.ɵɵproperty("data", ctx_r1.statusOptions)("valuePrimitive", true);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 199);
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1412,18 +1412,18 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_20_Templ
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Status || "Not Set");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     const _r41 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 221);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_31_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TypeID, $event) || (ctx_r1.record.TypeID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 222);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TypeID, $event) || (ctx_r1.record.TypeID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.TypeID);
     i0.ɵɵproperty("data", ctx_r1.agentTypes)("valuePrimitive", true);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 199);
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1431,8 +1431,8 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_32_Templ
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Type || "Not Set");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 228);
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 229);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1440,29 +1440,29 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Cond
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.selectedContextCompressionPrompt.Name);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 229);
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 230);
     i0.ɵɵtext(1, "No prompt selected");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 234);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
-    i0.ɵɵelement(1, "i", 235);
+    i0.ɵɵelementStart(0, "button", 235);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
+    i0.ɵɵelement(1, "i", 236);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 226)(1, "div", 227);
-    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template, 2, 1, "span", 228)(3, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template, 2, 0, "span", 229);
+    i0.ɵɵelementStart(0, "div", 227)(1, "div", 228);
+    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template, 2, 1, "span", 229)(3, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template, 2, 0, "span", 230);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 230)(5, "button", 231);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
-    i0.ɵɵelement(6, "i", 232);
+    i0.ɵɵelementStart(4, "div", 231)(5, "button", 232);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
+    i0.ɵɵelement(6, "i", 233);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template, 2, 0, "button", 233);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template, 2, 0, "button", 234);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1473,8 +1473,8 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Cond
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 8 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 199);
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 200);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1482,42 +1482,42 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Cond
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate((ctx_r1.selectedContextCompressionPrompt == null ? null : ctx_r1.selectedContextCompressionPrompt.Name) || ctx_r1.record.ContextCompressionPrompt || "Not Set");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 192)(1, "div", 193)(2, "div", 194);
-    i0.ɵɵelement(3, "i", 222);
+function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 193)(1, "div", 194)(2, "div", 195);
+    i0.ɵɵelement(3, "i", 223);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 196)(5, "h4");
+    i0.ɵɵelementStart(4, "div", 197)(5, "h4");
     i0.ɵɵtext(6, "Message Threshold");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "p");
     i0.ɵɵtext(8, "Messages before compression triggers");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 197);
-    i0.ɵɵelement(10, "mj-form-field", 223);
+    i0.ɵɵelementStart(9, "div", 198);
+    i0.ɵɵelement(10, "mj-form-field", 224);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 192)(12, "div", 193)(13, "div", 194);
-    i0.ɵɵelement(14, "i", 224);
+    i0.ɵɵelementStart(11, "div", 193)(12, "div", 194)(13, "div", 195);
+    i0.ɵɵelement(14, "i", 225);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 196)(16, "h4");
+    i0.ɵɵelementStart(15, "div", 197)(16, "h4");
     i0.ɵɵtext(17, "Messages to Keep");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "p");
     i0.ɵɵtext(19, "Recent messages to retain uncompressed");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(20, "div", 197);
-    i0.ɵɵelement(21, "mj-form-field", 225);
+    i0.ɵɵelementStart(20, "div", 198);
+    i0.ɵɵelement(21, "mj-form-field", 226);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 192)(23, "div", 193)(24, "div", 194);
-    i0.ɵɵelement(25, "i", 127);
+    i0.ɵɵelementStart(22, "div", 193)(23, "div", 194)(24, "div", 195);
+    i0.ɵɵelement(25, "i", 128);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 196)(27, "h4");
+    i0.ɵɵelementStart(26, "div", 197)(27, "h4");
     i0.ɵɵtext(28, "Compression Prompt");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(29, "p");
     i0.ɵɵtext(30, "Prompt used for summarization");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 197);
-    i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_32_Template, 9, 3, "div", 226)(33, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Conditional_33_Template, 2, 1, "span", 199);
+    i0.ɵɵelementStart(31, "div", 198);
+    i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template, 9, 3, "div", 227)(33, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template, 2, 1, "span", 200);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1528,171 +1528,171 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Temp
     i0.ɵɵadvance(11);
     i0.ɵɵconditional(ctx_r1.EditMode ? 32 : 33);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_37_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_ng_template_37_Template(rf, ctx) { if (rf & 1) {
     const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83)(1, "div", 84)(2, "div", 107);
+    i0.ɵɵelementStart(0, "div", 84)(1, "div", 85)(2, "div", 108);
     i0.ɵɵtext(3, " Configure agent behavior, execution settings, and advanced features. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 188)(5, "h3", 189);
-    i0.ɵɵelement(6, "i", 190);
+    i0.ɵɵelementStart(4, "div", 189)(5, "h3", 190);
+    i0.ɵɵelement(6, "i", 191);
     i0.ɵɵtext(7, " Identity & Behavior ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 191)(9, "div", 192)(10, "div", 193)(11, "div", 194);
-    i0.ɵɵelement(12, "i", 195);
+    i0.ɵɵelementStart(8, "div", 192)(9, "div", 193)(10, "div", 194)(11, "div", 195);
+    i0.ɵɵelement(12, "i", 196);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 196)(14, "h4");
+    i0.ɵɵelementStart(13, "div", 197)(14, "h4");
     i0.ɵɵtext(15, "Agent Status");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(16, "p");
     i0.ɵɵtext(17, "Current availability and operational status");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "div", 197);
-    i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_19_Template, 1, 3, "kendo-dropdownlist", 198)(20, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_20_Template, 2, 1, "span", 199);
+    i0.ɵɵelementStart(18, "div", 198);
+    i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template, 1, 3, "kendo-dropdownlist", 199)(20, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template, 2, 1, "span", 200);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 192)(22, "div", 193)(23, "div", 194);
-    i0.ɵɵelement(24, "i", 32);
+    i0.ɵɵelementStart(21, "div", 193)(22, "div", 194)(23, "div", 195);
+    i0.ɵɵelement(24, "i", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 196)(26, "h4");
+    i0.ɵɵelementStart(25, "div", 197)(26, "h4");
     i0.ɵɵtext(27, "Agent Type");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(28, "p");
     i0.ɵɵtext(29, "Category and system-level behavior");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(30, "div", 197);
-    i0.ɵɵtemplate(31, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_31_Template, 1, 3, "kendo-dropdownlist", 200)(32, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_32_Template, 2, 1, "span", 199);
+    i0.ɵɵelementStart(30, "div", 198);
+    i0.ɵɵtemplate(31, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template, 1, 3, "kendo-dropdownlist", 201)(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template, 2, 1, "span", 200);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 192)(34, "div", 193)(35, "div", 194);
-    i0.ɵɵelement(36, "i", 82);
+    i0.ɵɵelementStart(33, "div", 193)(34, "div", 194)(35, "div", 195);
+    i0.ɵɵelement(36, "i", 83);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 196)(38, "h4");
+    i0.ɵɵelementStart(37, "div", 197)(38, "h4");
     i0.ɵɵtext(39, "Expose as Action");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(40, "p");
     i0.ɵɵtext(41, "Make available as an action for other agents");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(42, "div", 197);
-    i0.ɵɵelement(43, "mj-form-field", 201);
+    i0.ɵɵelementStart(42, "div", 198);
+    i0.ɵɵelement(43, "mj-form-field", 202);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 202)(45, "div", 193)(46, "div", 194);
-    i0.ɵɵelement(47, "i", 203);
+    i0.ɵɵelementStart(44, "div", 203)(45, "div", 194)(46, "div", 195);
+    i0.ɵɵelement(47, "i", 204);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(48, "div", 196)(49, "h4");
+    i0.ɵɵelementStart(48, "div", 197)(49, "h4");
     i0.ɵɵtext(50, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(51, "p");
     i0.ɵɵtext(52, "Detailed agent description and purpose");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(53, "div", 197);
-    i0.ɵɵelement(54, "mj-form-field", 204);
+    i0.ɵɵelementStart(53, "div", 198);
+    i0.ɵɵelement(54, "mj-form-field", 205);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(55, "div", 188)(56, "h3", 189);
-    i0.ɵɵelement(57, "i", 34);
+    i0.ɵɵelementStart(55, "div", 189)(56, "h3", 190);
+    i0.ɵɵelement(57, "i", 35);
     i0.ɵɵtext(58, " Execution Settings ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(59, "div", 191)(60, "div", 192)(61, "div", 193)(62, "div", 194);
-    i0.ɵɵelement(63, "i", 205);
+    i0.ɵɵelementStart(59, "div", 192)(60, "div", 193)(61, "div", 194)(62, "div", 195);
+    i0.ɵɵelement(63, "i", 206);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "div", 196)(65, "h4");
+    i0.ɵɵelementStart(64, "div", 197)(65, "h4");
     i0.ɵɵtext(66, "Execution Mode");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(67, "p");
     i0.ɵɵtext(68, "How sub-agents are executed");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(69, "div", 197);
-    i0.ɵɵelement(70, "mj-form-field", 206);
+    i0.ɵɵelementStart(69, "div", 198);
+    i0.ɵɵelement(70, "mj-form-field", 207);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(71, "div", 192)(72, "div", 193)(73, "div", 194);
-    i0.ɵɵelement(74, "i", 207);
+    i0.ɵɵelementStart(71, "div", 193)(72, "div", 194)(73, "div", 195);
+    i0.ɵɵelement(74, "i", 208);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(75, "div", 196)(76, "h4");
+    i0.ɵɵelementStart(75, "div", 197)(76, "h4");
     i0.ɵɵtext(77, "Execution Order");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(78, "p");
     i0.ɵɵtext(79, "Order when run with siblings");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(80, "div", 197);
-    i0.ɵɵelement(81, "mj-form-field", 208);
+    i0.ɵɵelementStart(80, "div", 198);
+    i0.ɵɵelement(81, "mj-form-field", 209);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(82, "div", 192)(83, "div", 193)(84, "div", 194);
-    i0.ɵɵelement(85, "i", 209);
+    i0.ɵɵelementStart(82, "div", 193)(83, "div", 194)(84, "div", 195);
+    i0.ɵɵelement(85, "i", 210);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(86, "div", 196)(87, "h4");
+    i0.ɵɵelementStart(86, "div", 197)(87, "h4");
     i0.ɵɵtext(88, "Default Effort Level");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(89, "p");
     i0.ɵɵtext(90, "Default effort level for all prompts (1-100)");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(91, "div", 197);
-    i0.ɵɵelement(92, "mj-form-field", 210);
-    i0.ɵɵelementStart(93, "div", 211);
-    i0.ɵɵelement(94, "i", 160);
+    i0.ɵɵelementStart(91, "div", 198);
+    i0.ɵɵelement(92, "mj-form-field", 211);
+    i0.ɵɵelementStart(93, "div", 212);
+    i0.ɵɵelement(94, "i", 161);
     i0.ɵɵtext(95, " Higher values request more thorough reasoning (1=minimal, 100=maximum) ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(96, "div", 192)(97, "div", 193)(98, "div", 194);
-    i0.ɵɵelement(99, "i", 177);
+    i0.ɵɵelementStart(96, "div", 193)(97, "div", 194)(98, "div", 195);
+    i0.ɵɵelement(99, "i", 178);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(100, "div", 196)(101, "h4");
+    i0.ɵɵelementStart(100, "div", 197)(101, "h4");
     i0.ɵɵtext(102, "Driver Class");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(103, "p");
     i0.ɵɵtext(104, "Custom implementation class");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(105, "div", 197);
-    i0.ɵɵelement(106, "mj-form-field", 212);
+    i0.ɵɵelementStart(105, "div", 198);
+    i0.ɵɵelement(106, "mj-form-field", 213);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(107, "div", 188)(108, "h3", 189);
-    i0.ɵɵelement(109, "i", 213);
+    i0.ɵɵelementStart(107, "div", 189)(108, "h3", 190);
+    i0.ɵɵelement(109, "i", 214);
     i0.ɵɵtext(110, " Visual Identity ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(111, "div", 191)(112, "div", 192)(113, "div", 193)(114, "div", 194);
-    i0.ɵɵelement(115, "i", 214);
+    i0.ɵɵelementStart(111, "div", 192)(112, "div", 193)(113, "div", 194)(114, "div", 195);
+    i0.ɵɵelement(115, "i", 215);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(116, "div", 196)(117, "h4");
+    i0.ɵɵelementStart(116, "div", 197)(117, "h4");
     i0.ɵɵtext(118, "Icon Class");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(119, "p");
     i0.ɵɵtext(120, "Font Awesome icon class");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(121, "div", 197);
-    i0.ɵɵelement(122, "mj-form-field", 215);
-    i0.ɵɵelementStart(123, "div", 211);
-    i0.ɵɵelement(124, "i", 160);
+    i0.ɵɵelementStart(121, "div", 198);
+    i0.ɵɵelement(122, "mj-form-field", 216);
+    i0.ɵɵelementStart(123, "div", 212);
+    i0.ɵɵelement(124, "i", 161);
     i0.ɵɵtext(125, " Example: ");
     i0.ɵɵelementStart(126, "code");
     i0.ɵɵtext(127, "fa-solid fa-robot");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(128, "div", 192)(129, "div", 193)(130, "div", 194);
-    i0.ɵɵelement(131, "i", 216);
+    i0.ɵɵelementStart(128, "div", 193)(129, "div", 194)(130, "div", 195);
+    i0.ɵɵelement(131, "i", 217);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(132, "div", 196)(133, "h4");
+    i0.ɵɵelementStart(132, "div", 197)(133, "h4");
     i0.ɵɵtext(134, "Logo URL");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(135, "p");
     i0.ɵɵtext(136, "URL for agent logo image");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(137, "div", 197);
-    i0.ɵɵelement(138, "mj-form-field", 217);
-    i0.ɵɵelementStart(139, "div", 211);
-    i0.ɵɵelement(140, "i", 160);
+    i0.ɵɵelementStart(137, "div", 198);
+    i0.ɵɵelement(138, "mj-form-field", 218);
+    i0.ɵɵelementStart(139, "div", 212);
+    i0.ɵɵelement(140, "i", 161);
     i0.ɵɵtext(141, " Takes precedence over Icon Class ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(142, "div", 188)(143, "h3", 189);
-    i0.ɵɵelement(144, "i", 218);
+    i0.ɵɵelementStart(142, "div", 189)(143, "h3", 190);
+    i0.ɵɵelement(144, "i", 219);
     i0.ɵɵtext(145, " Context Compression ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(146, "div", 191)(147, "div", 202)(148, "div", 193)(149, "div", 194);
-    i0.ɵɵelement(150, "i", 195);
+    i0.ɵɵelementStart(146, "div", 192)(147, "div", 203)(148, "div", 194)(149, "div", 195);
+    i0.ɵɵelement(150, "i", 196);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(151, "div", 196)(152, "h4");
+    i0.ɵɵelementStart(151, "div", 197)(152, "h4");
     i0.ɵɵtext(153, "Enable Context Compression");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(154, "p");
     i0.ɵɵtext(155, "Automatically compress conversation context when message threshold is reached");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(156, "div", 197)(157, "mj-form-field", 219);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_37_Template_mj_form_field_valueChange_157_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
+    i0.ɵɵelementStart(156, "div", 198)(157, "mj-form-field", 220);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Template_mj_form_field_valueChange_157_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(158, AIAgentFormComponentExtended_form_2_ng_template_37_Conditional_158_Template, 34, 5);
+    i0.ɵɵtemplate(158, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Template, 34, 5);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1721,34 +1721,34 @@ function AIAgentFormComponentExtended_form_2_ng_template_37_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.record.EnableContextCompression ? 158 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "form", 5, 0);
-    i0.ɵɵelement(2, "mj-form-toolbar", 6);
-    i0.ɵɵelementStart(3, "div", 7)(4, "div", 8)(5, "div", 9)(6, "div", 10);
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_7_Template, 1, 2, "img", 11)(8, AIAgentFormComponentExtended_form_2_Conditional_8_Template, 1, 2, "i", 12);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 13);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_10_Template, 1, 1, "kendo-textbox", 14)(11, AIAgentFormComponentExtended_form_2_Conditional_11_Template, 2, 1, "h1", 15);
-    i0.ɵɵelementStart(12, "div", 16);
-    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_13_Template, 3, 3, "span", 17)(14, AIAgentFormComponentExtended_form_2_Conditional_14_Template, 2, 1, "span", 18)(15, AIAgentFormComponentExtended_form_2_Conditional_15_Template, 3, 1, "span", 19);
+    i0.ɵɵelementStart(0, "form", 6, 0);
+    i0.ɵɵelement(2, "mj-form-toolbar", 7);
+    i0.ɵɵelementStart(3, "div", 8)(4, "div", 9)(5, "div", 10)(6, "div", 11);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_7_Template, 1, 2, "img", 12)(8, AIAgentFormComponentExtended_form_3_Conditional_8_Template, 1, 2, "i", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 14);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_10_Template, 1, 1, "kendo-textbox", 15)(11, AIAgentFormComponentExtended_form_3_Conditional_11_Template, 2, 1, "h1", 16);
+    i0.ɵɵelementStart(12, "div", 17);
+    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_3_Conditional_13_Template, 3, 3, "span", 18)(14, AIAgentFormComponentExtended_form_3_Conditional_14_Template, 2, 1, "span", 19)(15, AIAgentFormComponentExtended_form_3_Conditional_15_Template, 3, 1, "span", 20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(16, "div", 20);
-    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_2_Conditional_17_Template, 3, 1, "button", 21);
-    i0.ɵɵelementStart(18, "button", 22);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
-    i0.ɵɵelement(19, "i", 23);
+    i0.ɵɵelementStart(16, "div", 21);
+    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_3_Conditional_17_Template, 3, 1, "button", 22);
+    i0.ɵɵelementStart(18, "button", 23);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
+    i0.ɵɵelement(19, "i", 24);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(20, "div", 24)(21, "kendo-panelbar", 25);
-    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_2_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 26)(23, AIAgentFormComponentExtended_form_2_Conditional_23_Template, 3, 1, "kendo-panelbar-item", 26)(24, AIAgentFormComponentExtended_form_2_Conditional_24_Template, 3, 1, "kendo-panelbar-item", 26)(25, AIAgentFormComponentExtended_form_2_Conditional_25_Template, 3, 1, "kendo-panelbar-item", 26)(26, AIAgentFormComponentExtended_form_2_Conditional_26_Template, 3, 1, "kendo-panelbar-item", 26)(27, AIAgentFormComponentExtended_form_2_Conditional_27_Template, 3, 1, "kendo-panelbar-item", 26)(28, AIAgentFormComponentExtended_form_2_Conditional_28_Template, 3, 1, "kendo-panelbar-item", 26);
-    i0.ɵɵelementStart(29, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(30, AIAgentFormComponentExtended_form_2_ng_template_30_Template, 2, 0, "ng-template", 27)(31, AIAgentFormComponentExtended_form_2_ng_template_31_Template, 124, 21, "ng-template", 28);
+    i0.ɵɵelementStart(20, "div", 25)(21, "kendo-panelbar", 26);
+    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 27)(23, AIAgentFormComponentExtended_form_3_Conditional_23_Template, 3, 1, "kendo-panelbar-item", 27)(24, AIAgentFormComponentExtended_form_3_Conditional_24_Template, 3, 1, "kendo-panelbar-item", 27)(25, AIAgentFormComponentExtended_form_3_Conditional_25_Template, 3, 1, "kendo-panelbar-item", 27)(26, AIAgentFormComponentExtended_form_3_Conditional_26_Template, 3, 1, "kendo-panelbar-item", 27)(27, AIAgentFormComponentExtended_form_3_Conditional_27_Template, 3, 1, "kendo-panelbar-item", 27)(28, AIAgentFormComponentExtended_form_3_Conditional_28_Template, 3, 1, "kendo-panelbar-item", 27);
+    i0.ɵɵelementStart(29, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(30, AIAgentFormComponentExtended_form_3_ng_template_30_Template, 2, 0, "ng-template", 28)(31, AIAgentFormComponentExtended_form_3_ng_template_31_Template, 124, 21, "ng-template", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(33, AIAgentFormComponentExtended_form_2_ng_template_33_Template, 2, 0, "ng-template", 27)(34, AIAgentFormComponentExtended_form_2_ng_template_34_Template, 9, 8, "ng-template", 28);
+    i0.ɵɵelementStart(32, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(33, AIAgentFormComponentExtended_form_3_ng_template_33_Template, 2, 0, "ng-template", 28)(34, AIAgentFormComponentExtended_form_3_ng_template_34_Template, 9, 8, "ng-template", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "kendo-panelbar-item", 26);
-    i0.ɵɵtemplate(36, AIAgentFormComponentExtended_form_2_ng_template_36_Template, 2, 0, "ng-template", 27)(37, AIAgentFormComponentExtended_form_2_ng_template_37_Template, 159, 21, "ng-template", 28);
+    i0.ɵɵelementStart(35, "kendo-panelbar-item", 27);
+    i0.ɵɵtemplate(36, AIAgentFormComponentExtended_form_3_ng_template_36_Template, 2, 0, "ng-template", 28)(37, AIAgentFormComponentExtended_form_3_ng_template_37_Template, 159, 21, "ng-template", 29);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -3695,15 +3695,15 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customSectionContainer = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["form", "ngForm"], ["customSectionContainer", ""], [1, "record-form-container"], ["kendoDialogContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [1, "panel-content", "execution-history-panel"], [1, "empty-state"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "view-more-item"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "execution-actions"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-stopwatch"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-dollar-sign"], [1, "detailed-metrics"], [1, "metrics-grid"], [1, "metric-detail"], [1, "metric-info"], [1, "metric-title"], [1, "metric-data"], [1, "result-section"], [1, "error-section"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-calculator"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-file-text"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "section-description"], ["kendoButton", "", "themeColor", "secondary", "size", "small", 3, "click"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent", 3, "click"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], [1, "fa-solid", "fa-cogs"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], [1, "config-field-display"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "record"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "kendoButton", "", "fillMode", "outline", "size", "small", 1, "prompt-select-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 1, consts: [["form", "ngForm"], ["customSectionContainer", ""], [1, "record-form-container"], ["kendoDialogContainer", ""], ["kendoWindowContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [1, "panel-content", "execution-history-panel"], [1, "empty-state"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "view-more-item"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "execution-actions"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-stopwatch"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-dollar-sign"], [1, "detailed-metrics"], [1, "metrics-grid"], [1, "metric-detail"], [1, "metric-info"], [1, "metric-title"], [1, "metric-data"], [1, "result-section"], [1, "error-section"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-calculator"], [1, "fa-solid", "fa-comments"], [1, "fa-solid", "fa-file-text"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "section-description"], ["kendoButton", "", "themeColor", "secondary", "size", "small", 3, "click"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent", 3, "click"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], [1, "fa-solid", "fa-cogs"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], [1, "config-field-display"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "data", "valuePrimitive"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "record"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "record"], ["textField", "text", "valueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["textField", "Name", "valueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "kendoButton", "", "fillMode", "outline", "size", "small", 1, "prompt-select-btn", 3, "click"], [1, "fa-solid", "fa-search"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "kendoButton", "", "fillMode", "flat", "size", "small", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
-            i0.ɵɵelement(1, "div", 3);
-            i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_Template, 38, 18, "form", 4);
+            i0.ɵɵelement(1, "div", 3)(2, "div", 4);
+            i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Template, 38, 18, "form", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.record);
-        } }, dependencies: [i6.NgIf, i7.ɵNgNoValidate, i7.NgControlStatus, i7.NgControlStatusGroup, i7.NgModel, i7.NgForm, i8.PanelBarComponent, i8.PanelBarItemComponent, i8.PanelBarContentDirective, i8.PanelBarItemTitleDirective, i3.DialogContainerDirective, i9.TextBoxComponent, i10.DropDownListComponent, i11.ButtonComponent, i12.MJFormField, i13.FormToolbarComponent, i14.CodeEditorComponent, i6.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.agent-header[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   img.agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n\n\n.prompt-controls[_ngcontent-%COMP%] {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.agent-meta-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n\n\n.agent-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary[_ngcontent-%COMP%] {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n    background: #5a6268;\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.form-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n\n\n  .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n  .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n  .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n  .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: white;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n\n\n.form-fields-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.sub-grid-container[_ngcontent-%COMP%] {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; \n\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.item-icon[_ngcontent-%COMP%]   img.sub-agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag[_ngcontent-%COMP%], \n.priority-tag[_ngcontent-%COMP%], \n.status-tag[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n\n\n.payload-config-section[_ngcontent-%COMP%], \n.payload-paths-section[_ngcontent-%COMP%], \n.payload-validation-section[_ngcontent-%COMP%] {\n    margin-bottom: 32px;\n}\n\n.subsection-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-form-field[_ngcontent-%COMP%]     textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n    opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child   .timeline-marker[_ngcontent-%COMP%]::after {\n    display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n\n\n.result-section[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n    \n\n    .agent-header[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n    \n    .agent-header-content[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    \n\n    .form-content[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n    \n      .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content[_ngcontent-%COMP%] {\n        padding: 20px 16px;\n    }\n    \n    .section-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    \n\n    .entity-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%] {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n    \n    .item-title[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n    \n    .item-preview[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n    \n    .item-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n    \n    \n\n    .timeline-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .timeline-title[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date[_ngcontent-%COMP%] {\n        align-self: flex-start;\n    }\n    \n    \n\n    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    \n\n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n\n\n\n.execution-history-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.execution-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n    cursor: pointer;\n}\n\n.execution-card[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded[_ngcontent-%COMP%] {\n    border-color: #2196f3;\n    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header[_ngcontent-%COMP%] {\n    padding: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n}\n\n.execution-left-section[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.execution-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-shrink: 0;\n}\n\n.status-indicator[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.execution-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.execution-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n.execution-metrics[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    flex-wrap: wrap;\n    margin-left: 44px; \n\n}\n\n.metric-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    background: #f8f9fa;\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: #495057;\n    white-space: nowrap;\n}\n\n.metric-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.execution-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: #f8f9fa;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: #2196f3;\n    color: white;\n    transform: translateY(-1px);\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n    color: #6c757d;\n    margin-right: 4px;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n\n\n.execution-expanded-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    border-top: 1px solid #f0f4f8;\n    background: #fafbfc;\n    animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n    from {\n        opacity: 0;\n        max-height: 0;\n        padding-top: 0;\n        padding-bottom: 0;\n    }\n    to {\n        opacity: 1;\n        max-height: 500px;\n        padding-top: 16px;\n        padding-bottom: 16px;\n    }\n}\n\n.detailed-metrics[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.metrics-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px;\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 16px;\n    width: 20px;\n    text-align: center;\n}\n\n.metric-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n}\n\n.metric-title[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-data[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.result-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #721c24;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 150px;\n    overflow-y: auto;\n}\n\n\n\n@media (max-width: 768px) {\n    .execution-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .execution-left-section[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n    \n    .execution-metrics[_ngcontent-%COMP%] {\n        margin-left: 0; \n\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        width: 100%;\n    }\n    \n    .metric-item[_ngcontent-%COMP%] {\n        font-size: 11px;\n        padding: 4px 8px;\n    }\n    \n    .metrics-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n\n.payload-section[_ngcontent-%COMP%] {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.payload-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.payload-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n\n\n.payload-field-container[_ngcontent-%COMP%] {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-field-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.payload-field-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.5;\n    margin: 0;\n}\n\n.payload-field-input[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.85rem;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid #e9ecef;\n}\n\n.payload-field-example[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #ffc107;\n    font-size: 0.9rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    padding: 0.2rem 0.4rem;\n    border-radius: 4px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.8rem;\n    color: #495057;\n}\n\n\n\n.payload-paths-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n}\n\n.payload-path-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.payload-path-card[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.payload-path-icon.downstream[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.payload-path-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.payload-path-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n\n\n.payload-validation-container[_ngcontent-%COMP%] {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-validation-settings[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n}\n\n.validation-field-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.validation-field-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.validation-field-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.validation-schema-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.config-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.config-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n    width: 100%;\n}\n\n.config-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.config-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.config-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.config-card-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.config-card-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.config-card-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n}\n\n\n\n.config-field-input[_ngcontent-%COMP%] {\n    width: 100%;\n    min-width: 250px;\n}\n\n\n\n.config-card-content[_ngcontent-%COMP%]     kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-field-display[_ngcontent-%COMP%] {\n    color: #495057;\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px 0;\n    display: block;\n    min-height: 20px;\n}\n\n\n\n.prompt-selector-container[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n}\n\n.prompt-display[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-style: italic;\n    font-size: 14px;\n}\n\n.prompt-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.prompt-select-btn[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.prompt-clear-btn[_ngcontent-%COMP%] {\n    min-width: 32px;\n}\n\n.config-card-hint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n\n\n\n@media (max-width: 768px) {\n    .payload-field-container[_ngcontent-%COMP%], \n   .payload-validation-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n    }\n    \n    .payload-paths-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .config-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .payload-section-title[_ngcontent-%COMP%], \n   .config-section-title[_ngcontent-%COMP%] {\n        padding: 0.75rem 1rem;\n        font-size: 1rem;\n    }\n    \n    .payload-path-header[_ngcontent-%COMP%], \n   .config-card-header[_ngcontent-%COMP%] {\n        padding: 0.75rem;\n    }\n    \n    .payload-path-content[_ngcontent-%COMP%], \n   .config-card-content[_ngcontent-%COMP%] {\n        padding: 0.75rem;\n    }\n    \n    .payload-field-container[_ngcontent-%COMP%], \n   .payload-validation-container[_ngcontent-%COMP%] {\n        padding: 1rem;\n    }\n}"] }); }
+        } }, dependencies: [i6.NgIf, i7.ɵNgNoValidate, i7.NgControlStatus, i7.NgControlStatusGroup, i7.NgModel, i7.NgForm, i8.PanelBarComponent, i8.PanelBarItemComponent, i8.PanelBarContentDirective, i8.PanelBarItemTitleDirective, i3.DialogContainerDirective, i3.WindowContainerDirective, i9.TextBoxComponent, i10.DropDownListComponent, i11.ButtonComponent, i12.MJFormField, i13.FormToolbarComponent, i14.CodeEditorComponent, i6.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.agent-header[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   img.agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n\n\n.prompt-controls[_ngcontent-%COMP%] {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.agent-meta-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n\n\n.agent-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary[_ngcontent-%COMP%] {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n    background: #5a6268;\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.form-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n\n\n  .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n  .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n  .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n  .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: white;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n\n\n.form-fields-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.sub-grid-container[_ngcontent-%COMP%] {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; \n\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.item-icon[_ngcontent-%COMP%]   img.sub-agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag[_ngcontent-%COMP%], \n.priority-tag[_ngcontent-%COMP%], \n.status-tag[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n\n\n.payload-config-section[_ngcontent-%COMP%], \n.payload-paths-section[_ngcontent-%COMP%], \n.payload-validation-section[_ngcontent-%COMP%] {\n    margin-bottom: 32px;\n}\n\n.subsection-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-form-field[_ngcontent-%COMP%]     textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n    opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child   .timeline-marker[_ngcontent-%COMP%]::after {\n    display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n\n\n.result-section[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n    \n\n    .agent-header[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n    \n    .agent-header-content[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    \n\n    .form-content[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n    \n      .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content[_ngcontent-%COMP%] {\n        padding: 20px 16px;\n    }\n    \n    .section-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    \n\n    .entity-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%] {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n    \n    .item-title[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n    \n    .item-preview[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n    \n    .item-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n    \n    \n\n    .timeline-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .timeline-title[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date[_ngcontent-%COMP%] {\n        align-self: flex-start;\n    }\n    \n    \n\n    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    \n\n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n\n\n\n.execution-history-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.execution-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n    cursor: pointer;\n}\n\n.execution-card[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded[_ngcontent-%COMP%] {\n    border-color: #2196f3;\n    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header[_ngcontent-%COMP%] {\n    padding: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n}\n\n.execution-left-section[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.execution-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-shrink: 0;\n}\n\n.status-indicator[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.execution-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.execution-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n.execution-metrics[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    flex-wrap: wrap;\n    margin-left: 44px; \n\n}\n\n.metric-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    background: #f8f9fa;\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: #495057;\n    white-space: nowrap;\n}\n\n.metric-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.metric-label[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.execution-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: #f8f9fa;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: #2196f3;\n    color: white;\n    transform: translateY(-1px);\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n    color: #6c757d;\n    margin-right: 4px;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n\n\n.execution-expanded-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    border-top: 1px solid #f0f4f8;\n    background: #fafbfc;\n    animation: _ngcontent-%COMP%_slideDown 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n    from {\n        opacity: 0;\n        max-height: 0;\n        padding-top: 0;\n        padding-bottom: 0;\n    }\n    to {\n        opacity: 1;\n        max-height: 500px;\n        padding-top: 16px;\n        padding-bottom: 16px;\n    }\n}\n\n.detailed-metrics[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.metrics-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.metric-detail[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px;\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 16px;\n    width: 20px;\n    text-align: center;\n}\n\n.metric-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n}\n\n.metric-title[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-data[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.result-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #721c24;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 150px;\n    overflow-y: auto;\n}\n\n\n\n@media (max-width: 768px) {\n    .execution-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .execution-left-section[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n    \n    .execution-metrics[_ngcontent-%COMP%] {\n        margin-left: 0; \n\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        width: 100%;\n    }\n    \n    .metric-item[_ngcontent-%COMP%] {\n        font-size: 11px;\n        padding: 4px 8px;\n    }\n    \n    .metrics-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n\n.payload-section[_ngcontent-%COMP%] {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.payload-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.payload-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n\n\n.payload-field-container[_ngcontent-%COMP%] {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-field-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.payload-field-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.5;\n    margin: 0;\n}\n\n.payload-field-input[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.85rem;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid #e9ecef;\n}\n\n.payload-field-example[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #ffc107;\n    font-size: 0.9rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    padding: 0.2rem 0.4rem;\n    border-radius: 4px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.8rem;\n    color: #495057;\n}\n\n\n\n.payload-paths-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n}\n\n.payload-path-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.payload-path-card[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.payload-path-icon.downstream[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.payload-path-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.payload-path-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n.payload-path-hint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n\n\n.payload-validation-container[_ngcontent-%COMP%] {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-validation-settings[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n}\n\n.validation-field-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.validation-field-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.validation-field-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.validation-schema-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.validation-schema-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.config-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.config-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n    width: 100%;\n}\n\n.config-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n}\n\n.config-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.config-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.config-card-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.config-card-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.config-card-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n}\n\n\n\n.config-field-input[_ngcontent-%COMP%] {\n    width: 100%;\n    min-width: 250px;\n}\n\n\n\n.config-card-content[_ngcontent-%COMP%]     kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content[_ngcontent-%COMP%]     mj-form-field kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-field-display[_ngcontent-%COMP%] {\n    color: #495057;\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px 0;\n    display: block;\n    min-height: 20px;\n}\n\n\n\n.prompt-selector-container[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n}\n\n.prompt-display[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-style: italic;\n    font-size: 14px;\n}\n\n.prompt-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.prompt-select-btn[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.prompt-clear-btn[_ngcontent-%COMP%] {\n    min-width: 32px;\n}\n\n.config-card-hint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n\n\n\n@media (max-width: 768px) {\n    .payload-field-container[_ngcontent-%COMP%], \n   .payload-validation-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n    }\n    \n    .payload-paths-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .config-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .payload-section-title[_ngcontent-%COMP%], \n   .config-section-title[_ngcontent-%COMP%] {\n        padding: 0.75rem 1rem;\n        font-size: 1rem;\n    }\n    \n    .payload-path-header[_ngcontent-%COMP%], \n   .config-card-header[_ngcontent-%COMP%] {\n        padding: 0.75rem;\n    }\n    \n    .payload-path-content[_ngcontent-%COMP%], \n   .config-card-content[_ngcontent-%COMP%] {\n        padding: 0.75rem;\n    }\n    \n    .payload-field-container[_ngcontent-%COMP%], \n   .payload-validation-container[_ngcontent-%COMP%] {\n        padding: 1rem;\n    }\n}"] }); }
 };
 AIAgentFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'AI Agents')
@@ -3711,7 +3711,7 @@ AIAgentFormComponentExtended = __decorate([
 export { AIAgentFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentFormComponentExtended, [{
         type: Component,
-        args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n    <!-- Dialog container for Kendo dialogs -->\n    <div kendoDialogContainer></div>\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Compact Header with Agent Overview -->\n        <div class=\"agent-header\">\n            <div class=\"agent-header-content\">\n                <div class=\"agent-overview\">\n                    <div class=\"agent-icon-wrapper\">\n                        @if (hasLogoURL()) {\n                            <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n                        } @else {\n                            <i [class]=\"getAgentIcon()\"></i>\n                        }\n                    </div>\n                    <div class=\"agent-info\">\n                        @if (EditMode) {\n                            <kendo-textbox [(ngModel)]=\"record.Name\" \n                                          name=\"agentName\"\n                                          placeholder=\"Enter agent name...\"\n                                          class=\"agent-name-input\">\n                            </kendo-textbox>\n                        } @else {\n                            <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n                        }\n                        <div class=\"agent-meta\">\n                            @if (record.Status) {\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n                                    <i class=\"fa-solid fa-circle\"></i>\n                                    {{ record.Status }}\n                                </span>\n                            }\n                            @if (record.Type) {\n                                <span class=\"execution-mode\">\n                                    Agent Type: {{ record.Type }}\n                                </span>\n                            }\n                            @if (record.Parent) {\n                                <span class=\"parent-agent\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n                </div>\n                \n                <!-- Action Buttons -->\n                <div class=\"agent-actions\">\n                    @if (record.ID) {\n                        <button kendoButton themeColor=\"primary\" size=\"large\"\n                                    (click)=\"openTestHarness()\"\n                                    [disabled]=\"record.Status !== 'Active'\"\n                                    title=\"Run this AI agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                        </button>\n                    }\n                    <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content\">\n            <kendo-panelbar [keepItemContent]=\"true\">\n                <!-- Custom Agent Type Section (if defined) -->\n                @if (record.ID && agentType && agentType.UIFormSectionKey) {\n                    <kendo-panelbar-item \n                        [expanded]=\"agentType.UIFormSectionExpandedByDefault\" \n                        (stateChange)=\"onCustomSectionStateChange($event)\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n                                <ng-container #customSectionContainer></ng-container>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Requests & History -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content execution-history-panel\">\n                                \n                                @if (executionHistoryCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-history\"></i>\n                                        <h4>No Execution History</h4>\n                                        <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"execution-history-list\">\n                                        @for (execution of recentExecutions; track execution.ID) {\n                                            <div class=\"execution-card\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n                                                <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n                                                    <div class=\"execution-left-section\">\n                                                        <div class=\"execution-status\">\n                                                            <div class=\"status-indicator\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                                <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n                                                            </div>\n                                                            <div class=\"execution-info\">\n                                                                <div class=\"execution-title\">\n                                                                    <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n                                                                    Execution #{{ execution.ID.substring(0, 8) }}\n                                                                </div>\n                                                                <div class=\"execution-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n                                                            </div>\n                                                        </div>\n                                                        \n                                                        <div class=\"execution-metrics\">\n                                                        @if (execution.Configuration) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-cog\"></i>\n                                                                <span class=\"metric-label\">Config:</span>\n                                                                <span class=\"metric-value\">{{ execution.Configuration }}</span>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.CompletedAt) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-stopwatch\"></i>\n                                                                <span class=\"metric-label\">Duration:</span>\n                                                                <span class=\"metric-value\">{{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}</span>\n                                                            </div>\n                                                        } @else if (execution.Status === 'Running') {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-clock\"></i>\n                                                                <span class=\"metric-label\">Running:</span>\n                                                                <span class=\"metric-value\">{{ getRunningTime(execution.StartedAt) }}</span>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.TotalTokensUsedRollup || execution.TotalTokensUsed) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-microchip\"></i>\n                                                                <span class=\"metric-label\">Tokens:</span>\n                                                                <span class=\"metric-value\">{{ formatTokenCount(execution.TotalTokensUsedRollup || execution.TotalTokensUsed) }}</span>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.TotalCostRollup || execution.TotalCost) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-dollar-sign\"></i>\n                                                                <span class=\"metric-label\">Cost:</span>\n                                                                <span class=\"metric-value\">${{ formatCost(execution.TotalCostRollup || execution.TotalCost) }}</span>\n                                                            </div>\n                                                        }\n                                                        </div>\n                                                    </div>\n                                                    \n                                                    <div class=\"execution-actions\">\n                                                        <button class=\"action-btn\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\" title=\"View details\">\n                                                            <i class=\"fa-solid fa-external-link-alt\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                @if (expandedExecutions[execution.ID]) {\n                                                    <div class=\"execution-expanded-content\">\n                                                        <!-- Detailed Metrics -->\n                                                        <div class=\"detailed-metrics\">\n                                                            <div class=\"metrics-grid\">\n                                                                <div class=\"metric-detail\">\n                                                                    <i class=\"fa-solid fa-clock\"></i>\n                                                                    <div class=\"metric-info\">\n                                                                        <span class=\"metric-title\">Started</span>\n                                                                        <span class=\"metric-data\">{{ execution.StartedAt | date:'medium' }}</span>\n                                                                    </div>\n                                                                </div>\n                                                                \n                                                                @if (execution.CompletedAt) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-check-circle\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Completed</span>\n                                                                            <span class=\"metric-data\">{{ execution.CompletedAt | date:'medium' }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalTokensUsed) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-microchip\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Direct Tokens</span>\n                                                                            <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsed) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalTokensUsedRollup && execution.TotalTokensUsedRollup !== execution.TotalTokensUsed) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Total + Sub-agents</span>\n                                                                            <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsedRollup) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalCost) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-dollar-sign\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Direct Cost</span>\n                                                                            <span class=\"metric-data\">${{ formatCost(execution.TotalCost) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalCostRollup && execution.TotalCostRollup !== execution.TotalCost) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-calculator\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Total + Sub-agents</span>\n                                                                            <span class=\"metric-data\">${{ formatCost(execution.TotalCostRollup) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.ConversationID) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-comments\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Conversation</span>\n                                                                            <span class=\"metric-data\">{{ execution.ConversationID.substring(0, 8) }}...</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                            </div>\n                                                        </div>\n                                                        \n                                                        @if (execution.Result) {\n                                                            <div class=\"result-section\">\n                                                                <h5><i class=\"fa-solid fa-file-text\"></i> Result</h5>\n                                                                <mj-code-editor \n                                                                    [value]=\"getExecutionResultPreview(execution, false)\"\n                                                                    [readonly]=\"true\"\n                                                                    language=\"json\"\n                                                                    [lineWrapping]=\"true\"\n                                                                    style=\"max-height: 200px; width: 100%;\">\n                                                                </mj-code-editor>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.ErrorMessage) {\n                                                            <div class=\"error-section\">\n                                                                <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n                                                                <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                        @if (executionHistoryCount > recentExecutions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\">\n                                                <span>View all {{ executionHistoryCount }} executions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Actions -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateActions) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Action\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (actionCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-bolt\"></i>\n                                        <h4>No Actions Configured</h4>\n                                        <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n                                        @if (EditMode && UserCanCreateActions) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Configure First Action\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (action of agentActions; track action.ID) {\n                                            <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i [class]=\"getActionIcon(action)\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n                                                    @if (action.Description) {\n                                                        <div class=\"item-preview\">{{ action.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (action.Type) {\n                                                            <span class=\"meta-tag\">{{ action.Type }}</span>\n                                                        }\n                                                        <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n                                                            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n                                                            {{ action.Status }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanDeleteActions) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeAction(action, $event)\"\n                                                            title=\"Remove action\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (actionCount > agentActions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n                                                <span>View all {{ actionCount }} actions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage hierarchical relationships with child agents that work under this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addSubAgents()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Subagent\n                                            </button>\n                                            <button kendoButton themeColor=\"secondary\" size=\"small\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (subAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addSubAgents()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Subagent\n                                            </button>\n                                            <button kendoButton themeColor=\"secondary\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (subAgent of subAgents; track subAgent.ID) {\n                                            <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(subAgent)) {\n                                                        <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n                                                    }\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n                                                    @if (subAgent.Description) {\n                                                        <div class=\"item-preview\">{{ subAgent.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (subAgent.Status) {\n                                                            <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ subAgent.Status }}\n                                                            </span>\n                                                        }\n                                                        @if (subAgent.ExecutionMode) {\n                                                            <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanCreateSubAgents) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"primary\" \n                                                            size=\"small\"\n                                                            (click)=\"openSubAgentAdvancedSettings(subAgent, $event)\"\n                                                            title=\"Advanced settings\">\n                                                            <i class=\"fa-solid fa-cog\"></i>\n                                                        </button>\n                                                    }\n                                                    @if (EditMode && UserCanDeleteSubAgents) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeSubAgent(subAgent, $event)\"\n                                                            title=\"Remove sub-agent\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (subAgentCount > subAgents.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n                                                <span>View all {{ subAgentCount }} sub-agents...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Prompts (With Model Selection) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"prompt-controls\">\n                                        <!-- Model Selection Mode Control -->\n                                        <div class=\"model-selection-mode\">\n                                            <label class=\"model-selection-label\">\n                                                <i class=\"fa-solid fa-sliders\"></i>\n                                                Model Selection:\n                                            </label>\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist\n                                                    [(ngModel)]=\"record.ModelSelectionMode\"\n                                                    name=\"modelSelectionMode\"\n                                                    [data]=\"modelSelectionModes\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    class=\"model-selection-dropdown\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateNewPrompts) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (promptCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comments\"></i>\n                                        <h4>No Prompts Configured</h4>\n                                        <p>Add prompts to define how this agent processes requests and generates responses.</p>\n                                        @if (EditMode && UserCanCreateNewPrompts) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (prompt of agentPrompts; track prompt.ID) {\n                                            <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ prompt.Name }}</div>\n                                                    @if (prompt.TemplateText) {\n                                                        <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (prompt.PromptRole) {\n                                                            <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanCreatePrompts) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"primary\" \n                                                            size=\"small\"\n                                                            (click)=\"openPromptAdvancedSettings(prompt, $event)\"\n                                                            title=\"Advanced settings\">\n                                                            <i class=\"fa-solid fa-cog\"></i>\n                                                        </button>\n                                                    }\n                                                    @if (EditMode && UserCanDeletePrompts) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removePrompt(prompt, $event)\"\n                                                            title=\"Remove prompt\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (promptCount > agentPrompts.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n                                                <span>View all {{ promptCount }} prompts...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n\n                <!-- Learning & Analytics -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Monitor and manage learning cycles, training sessions, and performance analytics.\n                                    </div>\n                                </div>\n                                \n                                @if (learningCycleCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-brain\"></i>\n                                        <h4>No Learning Cycles</h4>\n                                        <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (cycle of learningCycles; track cycle.ID) {\n                                            <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-brain\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n                                                    <div class=\"item-meta\">\n                                                        @if (cycle.StartedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ cycle.StartedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                        @if (cycle.Status) {\n                                                            <span class=\"status-tag\">{{ cycle.Status }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (learningCycleCount > learningCycles.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n                                                <span>View all {{ learningCycleCount }} cycles...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Notes & Documentation -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage notes, documentation, and annotations for this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateNotes) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Note\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (noteCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sticky-note\"></i>\n                                        <h4>No Notes</h4>\n                                        <p>Add notes to document important information, observations, or instructions for this agent.</p>\n                                        @if (EditMode && UserCanCreateNotes) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Note\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (note of agentNotes; track note.ID) {\n                                            <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-sticky-note\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                                                    @if (note.Note) {\n                                                        <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (note.__mj_CreatedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ note.__mj_CreatedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (noteCount > agentNotes.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n                                                <span>View all {{ noteCount }} notes...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n\n\n                <!-- Payload -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n                                </div>\n                            </div>\n                            \n                            <!-- Payload Scope Section -->\n                            <div class=\"payload-section\">\n                                <h3 class=\"payload-section-title\">\n                                    <i class=\"fa-solid fa-target\"></i>\n                                    Payload Scope\n                                </h3>\n                                \n                                <div class=\"payload-field-container\">\n                                    <div class=\"payload-field-info\">\n                                        <label class=\"payload-field-label\">Payload Scope Path</label>\n                                        <p class=\"payload-field-description\">\n                                            Specify a path within the parent payload that this sub-agent should operate on. \n                                            Leave empty to receive the entire payload.\n                                        </p>\n                                    </div>\n                                    \n                                    <div class=\"payload-field-input\">\n                                        <mj-form-field \n                                            FieldName=\"PayloadScope\" \n                                            Type=\"textbox\"\n                                            Caption=\"\"\n                                            [EditMode]=\"EditMode\"\n                                            [record]=\"record\"\n                                            style=\"width: 100%;\">\n                                        </mj-form-field>\n                                        <div class=\"payload-field-example\">\n                                            <i class=\"fa-solid fa-lightbulb\"></i>\n                                            <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Path Configuration Section -->\n                            <div class=\"payload-section\">\n                                <h3 class=\"payload-section-title\">\n                                    <i class=\"fa-solid fa-route\"></i>\n                                    Path Configuration\n                                </h3>\n                                \n                                <div class=\"payload-paths-grid\">\n                                    <!-- Downstream Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon downstream\">\n                                                <i class=\"fa-solid fa-arrow-down\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Downstream Paths</h4>\n                                                <p>JSON array of paths to pass to sub-agents</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadDownstreamPaths || '[&quot;*&quot;]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <!-- Upstream Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon upstream\">\n                                                <i class=\"fa-solid fa-arrow-up\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Upstream Paths</h4>\n                                                <p>JSON array of paths sub-agents can write back</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadUpstreamPaths || '[&quot;*&quot;]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <!-- Self Read Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon self-read\">\n                                                <i class=\"fa-solid fa-eye\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Self Read Paths</h4>\n                                                <p>JSON array of paths this agent can read</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadSelfReadPaths || '[]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Paths this agent's prompts can read from the payload\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <!-- Self Write Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon self-write\">\n                                                <i class=\"fa-solid fa-pen\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Self Write Paths</h4>\n                                                <p>JSON array of paths this agent can write to</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadSelfWritePaths || '[]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Paths this agent's prompts can write back to the payload\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Validation Section -->\n                            <div class=\"payload-section\">\n                                <h3 class=\"payload-section-title\">\n                                    <i class=\"fa-solid fa-shield-check\"></i>\n                                    Final Payload Validation\n                                </h3>\n                                \n                                <div class=\"payload-validation-container\">\n                                    <div class=\"payload-validation-settings\">\n                                        <div class=\"validation-field-group\">\n                                            <label class=\"validation-field-label\">Validation Mode</label>\n                                            <p class=\"validation-field-description\">How to handle validation failures</p>\n                                            <mj-form-field \n                                                FieldName=\"FinalPayloadValidationMode\" \n                                                Type=\"dropdownlist\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                style=\"width: 100%;\">\n                                            </mj-form-field>\n                                        </div>\n                                        \n                                        <div class=\"validation-field-group\">\n                                            <label class=\"validation-field-label\">Max Retries</label>\n                                            <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n                                            <mj-form-field \n                                                FieldName=\"FinalPayloadValidationMaxRetries\" \n                                                Type=\"numerictextbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                style=\"width: 100%;\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"payload-validation-schema\">\n                                        <label class=\"validation-schema-label\">\n                                            <i class=\"fa-solid fa-code\"></i>\n                                            Validation Schema\n                                        </label>\n                                        <p class=\"validation-schema-description\">\n                                            JSON schema or validation rules for the final payload structure\n                                        </p>\n                                        <div class=\"validation-schema-editor\">\n                                            <mj-code-editor \n                                                [value]=\"record.FinalPayloadValidation || '{}'\"\n                                                [readonly]=\"!EditMode\"\n                                                language=\"json\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 200px; width: 100%;\"\n                                                (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n\n\n                <!-- Execution Guardrails (New Separate Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Set limits to prevent runaway agent executions and control resource usage.\n                                </div>\n                            </div>\n                            \n                            <div class=\"form-fields-grid\">\n                                <mj-form-field \n                                    FieldName=\"MaxCostPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Cost ($)\"\n                                    Description=\"Maximum cost per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTokensPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Tokens\"\n                                    Description=\"Maximum tokens per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxIterationsPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Iterations\"\n                                    Description=\"Maximum prompt iterations\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTimePerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Time (seconds)\"\n                                    Description=\"Maximum execution time\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n                <!-- Configuration (Settings Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-cogs\"></i> Configuration\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Configure agent behavior, execution settings, and advanced features.\n                                </div>\n                            </div>\n                            \n                            <!-- Identity & Behavior Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-id-card\"></i>\n                                    Identity & Behavior\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-toggle-on\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Agent Status</h4>\n                                                <p>Current availability and operational status</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist \n                                                    [(ngModel)]=\"record.Status\"\n                                                    [data]=\"statusOptions\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    name=\"agentStatus\"\n                                                    class=\"config-field-input\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-sitemap\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Agent Type</h4>\n                                                <p>Category and system-level behavior</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist \n                                                    [(ngModel)]=\"record.TypeID\"\n                                                    [data]=\"agentTypes\"\n                                                    textField=\"Name\"\n                                                    valueField=\"ID\"\n                                                    [valuePrimitive]=\"true\"\n                                                    name=\"agentTypeID\"\n                                                    class=\"config-field-input\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-bolt\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Expose as Action</h4>\n                                                <p>Make available as an action for other agents</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"ExposeAsAction\" \n                                                Type=\"checkbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card full-width\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-align-left\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Description</h4>\n                                                <p>Detailed agent description and purpose</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"Description\" \n                                                Type=\"textarea\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                style=\"width: 100%;\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Execution Settings Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-play\"></i>\n                                    Execution Settings\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-layer-group\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Execution Mode</h4>\n                                                <p>How sub-agents are executed</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"ExecutionMode\" \n                                                Type=\"dropdownlist\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-sort-numeric-down\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Execution Order</h4>\n                                                <p>Order when run with siblings</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"ExecutionOrder\" \n                                                Type=\"numerictextbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-tachometer-alt\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Default Effort Level</h4>\n                                                <p>Default effort level for all prompts (1-100)</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"DefaultPromptEffortLevel\" \n                                                Type=\"numerictextbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                            <div class=\"config-card-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Higher values request more thorough reasoning (1=minimal, 100=maximum)\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-code\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Driver Class</h4>\n                                                <p>Custom implementation class</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"DriverClass\" \n                                                Type=\"textbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Visual Identity Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-palette\"></i>\n                                    Visual Identity\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-icons\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Icon Class</h4>\n                                                <p>Font Awesome icon class</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"IconClass\" \n                                                Type=\"textbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                            <div class=\"config-card-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Example: <code>fa-solid fa-robot</code>\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-image\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Logo URL</h4>\n                                                <p>URL for agent logo image</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"LogoURL\" \n                                                Type=\"textbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                            <div class=\"config-card-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Takes precedence over Icon Class\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Context Compression Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-compress\"></i>\n                                    Context Compression\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card full-width\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-toggle-on\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Enable Context Compression</h4>\n                                                <p>Automatically compress conversation context when message threshold is reached</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"EnableContextCompression\" \n                                                Type=\"checkbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                (valueChange)=\"onContextCompressionToggle($event)\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    @if (record.EnableContextCompression) {\n                                        <div class=\"config-card\">\n                                            <div class=\"config-card-header\">\n                                                <div class=\"config-card-icon\">\n                                                    <i class=\"fa-solid fa-hashtag\"></i>\n                                                </div>\n                                                <div class=\"config-card-info\">\n                                                    <h4>Message Threshold</h4>\n                                                    <p>Messages before compression triggers</p>\n                                                </div>\n                                            </div>\n                                            <div class=\"config-card-content\">\n                                                <mj-form-field \n                                                    FieldName=\"ContextCompressionMessageThreshold\" \n                                                    Type=\"numerictextbox\"\n                                                    Caption=\"\"\n                                                    [EditMode]=\"EditMode\"\n                                                    [record]=\"record\">\n                                                </mj-form-field>\n                                            </div>\n                                        </div>\n\n                                        <div class=\"config-card\">\n                                            <div class=\"config-card-header\">\n                                                <div class=\"config-card-icon\">\n                                                    <i class=\"fa-solid fa-save\"></i>\n                                                </div>\n                                                <div class=\"config-card-info\">\n                                                    <h4>Messages to Keep</h4>\n                                                    <p>Recent messages to retain uncompressed</p>\n                                                </div>\n                                            </div>\n                                            <div class=\"config-card-content\">\n                                                <mj-form-field \n                                                    FieldName=\"ContextCompressionMessageRetentionCount\" \n                                                    Type=\"numerictextbox\"\n                                                    Caption=\"\"\n                                                    [EditMode]=\"EditMode\"\n                                                    [record]=\"record\">\n                                                </mj-form-field>\n                                            </div>\n                                        </div>\n\n                                        <div class=\"config-card\">\n                                            <div class=\"config-card-header\">\n                                                <div class=\"config-card-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"config-card-info\">\n                                                    <h4>Compression Prompt</h4>\n                                                    <p>Prompt used for summarization</p>\n                                                </div>\n                                            </div>\n                                            <div class=\"config-card-content\">\n                                                @if (EditMode) {\n                                                    <div class=\"prompt-selector-container\">\n                                                        <div class=\"prompt-display\">\n                                                            @if (selectedContextCompressionPrompt) {\n                                                                <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n                                                            } @else {\n                                                                <span class=\"no-prompt\">No prompt selected</span>\n                                                            }\n                                                        </div>\n                                                        <div class=\"prompt-actions\">\n                                                            <button type=\"button\" \n                                                                    kendoButton \n                                                                    fillMode=\"outline\" \n                                                                    size=\"small\"\n                                                                    (click)=\"openContextCompressionPromptSelector()\"\n                                                                    class=\"prompt-select-btn\">\n                                                                <i class=\"fa-solid fa-search\"></i>\n                                                                {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n                                                            </button>\n                                                            @if (selectedContextCompressionPrompt) {\n                                                                <button type=\"button\" \n                                                                        kendoButton \n                                                                        fillMode=\"flat\" \n                                                                        size=\"small\"\n                                                                        (click)=\"clearContextCompressionPrompt()\"\n                                                                        class=\"prompt-clear-btn\"\n                                                                        title=\"Clear selection\">\n                                                                    <i class=\"fa-solid fa-times\"></i>\n                                                                </button>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                } @else {\n                                                    <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n\n\n\n            </kendo-panelbar>\n        </div>\n    </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.agent-meta-info {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary:hover {\n    background: #5a6268;\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: white;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n    color: white;\n}\n\n.item-icon img.sub-agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n    opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n    color: #2196f3;\n}\n\n.view-more-item {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n    margin-bottom: 32px;\n}\n\n.subsection-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title i {\n    color: #2196f3;\n}\n\n.subsection-divider {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group {\n    margin-bottom: 20px;\n}\n\n.payload-field-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label i {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n    border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n    opacity: 1;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: white;\n}\n\n.card-title-section {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item i {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: #6c757d;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error i {\n    flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: fadeIn 0.3s ease;\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.result-section,\n.error-section {\n    margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.result-content,\n.error-content {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n    font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    /* Header Responsiveness */\n    .agent-header {\n        padding: 16px;\n    }\n    \n    .agent-header-content {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    /* Panel Responsiveness */\n    .form-content {\n        padding: 12px;\n    }\n    \n    ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content {\n        padding: 20px 16px;\n    }\n    \n    .section-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    /* Entity List Responsiveness */\n    .entity-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon i {\n        font-size: 16px;\n    }\n    \n    .item-title {\n        font-size: 15px;\n    }\n    \n    .item-preview {\n        font-size: 13px;\n    }\n    \n    .item-meta {\n        gap: 8px;\n    }\n    \n    /* Timeline Responsiveness */\n    .timeline-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker i {\n        font-size: 12px;\n    }\n    \n    .timeline-title {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date {\n        align-self: flex-start;\n    }\n    \n    /* Form Field Responsiveness */\n    .form-fields-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    /* Legacy card support */\n    .cards-container {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n\n/* New Execution History Card Design */\n.execution-history-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.execution-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n    cursor: pointer;\n}\n\n.execution-card:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n    border-color: #2196f3;\n    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header {\n    padding: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n}\n\n.execution-left-section {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.execution-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-shrink: 0;\n}\n\n.status-indicator {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator i {\n    color: white;\n    font-size: 14px;\n}\n\n.execution-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.execution-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n.execution-metrics {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    flex-wrap: wrap;\n    margin-left: 44px; /* Align with execution title text, accounting for status indicator + gap */\n}\n\n.metric-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    background: #f8f9fa;\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: #495057;\n    white-space: nowrap;\n}\n\n.metric-item i {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.metric-label {\n    font-weight: 500;\n}\n\n.metric-value {\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.execution-actions {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.action-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: #f8f9fa;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n}\n\n.action-btn:hover {\n    background: #2196f3;\n    color: white;\n    transform: translateY(-1px);\n}\n\n.action-btn i {\n    font-size: 12px;\n}\n\n.expand-icon {\n    transition: transform 0.2s ease;\n    color: #6c757d;\n    margin-right: 4px;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n/* Execution Expanded Content */\n.execution-expanded-content {\n    padding: 16px;\n    border-top: 1px solid #f0f4f8;\n    background: #fafbfc;\n    animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n    from {\n        opacity: 0;\n        max-height: 0;\n        padding-top: 0;\n        padding-bottom: 0;\n    }\n    to {\n        opacity: 1;\n        max-height: 500px;\n        padding-top: 16px;\n        padding-bottom: 16px;\n    }\n}\n\n.detailed-metrics {\n    margin-bottom: 20px;\n}\n\n.metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.metric-detail {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px;\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n}\n\n.metric-detail i {\n    color: #2196f3;\n    font-size: 16px;\n    width: 20px;\n    text-align: center;\n}\n\n.metric-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n}\n\n.metric-title {\n    font-size: 11px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-data {\n    font-size: 14px;\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.result-section {\n    margin-top: 16px;\n}\n\n.result-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.error-content {\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #721c24;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 150px;\n    overflow-y: auto;\n}\n\n/* Responsive adjustments for execution history */\n@media (max-width: 768px) {\n    .execution-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .execution-left-section {\n        width: 100%;\n    }\n    \n    .execution-metrics {\n        margin-left: 0; /* Remove left margin on mobile */\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        width: 100%;\n    }\n    \n    .metric-item {\n        font-size: 11px;\n        padding: 4px 8px;\n    }\n    \n    .metrics-grid {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* === PAYLOAD MANAGEMENT SECTION === */\n.payload-section {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.payload-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.payload-section-title i {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n/* Payload Scope Styling */\n.payload-field-container {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-field-info {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-label {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.payload-field-description {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.5;\n    margin: 0;\n}\n\n.payload-field-input {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-example {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.85rem;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid #e9ecef;\n}\n\n.payload-field-example i {\n    color: #ffc107;\n    font-size: 0.9rem;\n}\n\n.payload-field-example code {\n    background: #e9ecef;\n    padding: 0.2rem 0.4rem;\n    border-radius: 4px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.8rem;\n    color: #495057;\n}\n\n/* Path Configuration Grid */\n.payload-paths-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n}\n\n.payload-path-card {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.payload-path-icon.downstream {\n    background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream {\n    background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read {\n    background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write {\n    background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon i {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.payload-path-info h4 {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.payload-path-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-content {\n    padding: 1rem;\n}\n\n.json-editor-container {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n    border-color: #2196f3;\n}\n\n.payload-path-hint {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-hint i {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint code {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n/* Payload Validation Container */\n.payload-validation-container {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-validation-settings {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n}\n\n.validation-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.validation-field-label {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.validation-field-description {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n}\n\n.validation-schema-label {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.validation-schema-label i {\n    color: #2196f3;\n}\n\n.validation-schema-description {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}\n\n.validation-schema-editor {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n    border-color: #2196f3;\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.config-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.config-section-title i {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n    width: 100%;\n}\n\n.config-card {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width {\n    grid-column: 1 / -1;\n}\n\n.config-card-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.config-card-icon i {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.config-card-info h4 {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.config-card-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.config-card-content {\n    padding: 1rem;\n}\n\n/* Custom field styling for config cards */\n.config-field-input {\n    width: 100%;\n    min-width: 250px;\n}\n\n/* Fix numeric textbox cutoff issue */\n.config-card-content ::ng-deep kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-card-content ::ng-deep mj-form-field {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-field-display {\n    color: #495057;\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px 0;\n    display: block;\n    min-height: 20px;\n}\n\n/* Prompt selector styling */\n.prompt-selector-container {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n}\n\n.prompt-display {\n    flex: 1;\n    min-width: 0;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n}\n\n.prompt-name {\n    color: #495057;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt {\n    color: #6c757d;\n    font-style: italic;\n    font-size: 14px;\n}\n\n.prompt-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.prompt-select-btn {\n    white-space: nowrap;\n}\n\n.prompt-clear-btn {\n    min-width: 32px;\n}\n\n.config-card-hint {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint code {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n\n/* === RESPONSIVE DESIGN === */\n@media (max-width: 768px) {\n    .payload-field-container,\n    .payload-validation-container {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n    }\n    \n    .payload-paths-grid {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .config-grid {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .payload-section-title,\n    .config-section-title {\n        padding: 0.75rem 1rem;\n        font-size: 1rem;\n    }\n    \n    .payload-path-header,\n    .config-card-header {\n        padding: 0.75rem;\n    }\n    \n    .payload-path-content,\n    .config-card-content {\n        padding: 0.75rem;\n    }\n    \n    .payload-field-container,\n    .payload-validation-container {\n        padding: 1rem;\n    }\n}\n\n"] }]
+        args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n    <!-- Dialog container for Kendo dialogs -->\n    <div kendoDialogContainer></div>\n    <!-- Window container for Kendo windows -->\n    <div kendoWindowContainer></div>\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Compact Header with Agent Overview -->\n        <div class=\"agent-header\">\n            <div class=\"agent-header-content\">\n                <div class=\"agent-overview\">\n                    <div class=\"agent-icon-wrapper\">\n                        @if (hasLogoURL()) {\n                            <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n                        } @else {\n                            <i [class]=\"getAgentIcon()\"></i>\n                        }\n                    </div>\n                    <div class=\"agent-info\">\n                        @if (EditMode) {\n                            <kendo-textbox [(ngModel)]=\"record.Name\" \n                                          name=\"agentName\"\n                                          placeholder=\"Enter agent name...\"\n                                          class=\"agent-name-input\">\n                            </kendo-textbox>\n                        } @else {\n                            <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n                        }\n                        <div class=\"agent-meta\">\n                            @if (record.Status) {\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n                                    <i class=\"fa-solid fa-circle\"></i>\n                                    {{ record.Status }}\n                                </span>\n                            }\n                            @if (record.Type) {\n                                <span class=\"execution-mode\">\n                                    Agent Type: {{ record.Type }}\n                                </span>\n                            }\n                            @if (record.Parent) {\n                                <span class=\"parent-agent\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n                </div>\n                \n                <!-- Action Buttons -->\n                <div class=\"agent-actions\">\n                    @if (record.ID) {\n                        <button kendoButton themeColor=\"primary\" size=\"large\"\n                                    (click)=\"openTestHarness()\"\n                                    [disabled]=\"record.Status !== 'Active'\"\n                                    title=\"Run this AI agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                        </button>\n                    }\n                    <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content\">\n            <kendo-panelbar [keepItemContent]=\"true\">\n                <!-- Custom Agent Type Section (if defined) -->\n                @if (record.ID && agentType && agentType.UIFormSectionKey) {\n                    <kendo-panelbar-item \n                        [expanded]=\"agentType.UIFormSectionExpandedByDefault\" \n                        (stateChange)=\"onCustomSectionStateChange($event)\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n                                <ng-container #customSectionContainer></ng-container>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Requests & History -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content execution-history-panel\">\n                                \n                                @if (executionHistoryCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-history\"></i>\n                                        <h4>No Execution History</h4>\n                                        <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"execution-history-list\">\n                                        @for (execution of recentExecutions; track execution.ID) {\n                                            <div class=\"execution-card\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n                                                <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n                                                    <div class=\"execution-left-section\">\n                                                        <div class=\"execution-status\">\n                                                            <div class=\"status-indicator\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                                <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n                                                            </div>\n                                                            <div class=\"execution-info\">\n                                                                <div class=\"execution-title\">\n                                                                    <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n                                                                    Execution #{{ execution.ID.substring(0, 8) }}\n                                                                </div>\n                                                                <div class=\"execution-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n                                                            </div>\n                                                        </div>\n                                                        \n                                                        <div class=\"execution-metrics\">\n                                                        @if (execution.Configuration) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-cog\"></i>\n                                                                <span class=\"metric-label\">Config:</span>\n                                                                <span class=\"metric-value\">{{ execution.Configuration }}</span>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.CompletedAt) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-stopwatch\"></i>\n                                                                <span class=\"metric-label\">Duration:</span>\n                                                                <span class=\"metric-value\">{{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}</span>\n                                                            </div>\n                                                        } @else if (execution.Status === 'Running') {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-clock\"></i>\n                                                                <span class=\"metric-label\">Running:</span>\n                                                                <span class=\"metric-value\">{{ getRunningTime(execution.StartedAt) }}</span>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.TotalTokensUsedRollup || execution.TotalTokensUsed) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-microchip\"></i>\n                                                                <span class=\"metric-label\">Tokens:</span>\n                                                                <span class=\"metric-value\">{{ formatTokenCount(execution.TotalTokensUsedRollup || execution.TotalTokensUsed) }}</span>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.TotalCostRollup || execution.TotalCost) {\n                                                            <div class=\"metric-item\">\n                                                                <i class=\"fa-solid fa-dollar-sign\"></i>\n                                                                <span class=\"metric-label\">Cost:</span>\n                                                                <span class=\"metric-value\">${{ formatCost(execution.TotalCostRollup || execution.TotalCost) }}</span>\n                                                            </div>\n                                                        }\n                                                        </div>\n                                                    </div>\n                                                    \n                                                    <div class=\"execution-actions\">\n                                                        <button class=\"action-btn\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\" title=\"View details\">\n                                                            <i class=\"fa-solid fa-external-link-alt\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                @if (expandedExecutions[execution.ID]) {\n                                                    <div class=\"execution-expanded-content\">\n                                                        <!-- Detailed Metrics -->\n                                                        <div class=\"detailed-metrics\">\n                                                            <div class=\"metrics-grid\">\n                                                                <div class=\"metric-detail\">\n                                                                    <i class=\"fa-solid fa-clock\"></i>\n                                                                    <div class=\"metric-info\">\n                                                                        <span class=\"metric-title\">Started</span>\n                                                                        <span class=\"metric-data\">{{ execution.StartedAt | date:'medium' }}</span>\n                                                                    </div>\n                                                                </div>\n                                                                \n                                                                @if (execution.CompletedAt) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-check-circle\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Completed</span>\n                                                                            <span class=\"metric-data\">{{ execution.CompletedAt | date:'medium' }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalTokensUsed) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-microchip\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Direct Tokens</span>\n                                                                            <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsed) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalTokensUsedRollup && execution.TotalTokensUsedRollup !== execution.TotalTokensUsed) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Total + Sub-agents</span>\n                                                                            <span class=\"metric-data\">{{ formatTokenCount(execution.TotalTokensUsedRollup) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalCost) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-dollar-sign\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Direct Cost</span>\n                                                                            <span class=\"metric-data\">${{ formatCost(execution.TotalCost) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.TotalCostRollup && execution.TotalCostRollup !== execution.TotalCost) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-calculator\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Total + Sub-agents</span>\n                                                                            <span class=\"metric-data\">${{ formatCost(execution.TotalCostRollup) }}</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                                \n                                                                @if (execution.ConversationID) {\n                                                                    <div class=\"metric-detail\">\n                                                                        <i class=\"fa-solid fa-comments\"></i>\n                                                                        <div class=\"metric-info\">\n                                                                            <span class=\"metric-title\">Conversation</span>\n                                                                            <span class=\"metric-data\">{{ execution.ConversationID.substring(0, 8) }}...</span>\n                                                                        </div>\n                                                                    </div>\n                                                                }\n                                                            </div>\n                                                        </div>\n                                                        \n                                                        @if (execution.Result) {\n                                                            <div class=\"result-section\">\n                                                                <h5><i class=\"fa-solid fa-file-text\"></i> Result</h5>\n                                                                <mj-code-editor \n                                                                    [value]=\"getExecutionResultPreview(execution, false)\"\n                                                                    [readonly]=\"true\"\n                                                                    language=\"json\"\n                                                                    [lineWrapping]=\"true\"\n                                                                    style=\"max-height: 200px; width: 100%;\">\n                                                                </mj-code-editor>\n                                                            </div>\n                                                        }\n                                                        \n                                                        @if (execution.ErrorMessage) {\n                                                            <div class=\"error-section\">\n                                                                <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n                                                                <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                }\n                                            </div>\n                                        }\n                                        @if (executionHistoryCount > recentExecutions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\">\n                                                <span>View all {{ executionHistoryCount }} executions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Actions -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateActions) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Action\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (actionCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-bolt\"></i>\n                                        <h4>No Actions Configured</h4>\n                                        <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n                                        @if (EditMode && UserCanCreateActions) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Configure First Action\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (action of agentActions; track action.ID) {\n                                            <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i [class]=\"getActionIcon(action)\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n                                                    @if (action.Description) {\n                                                        <div class=\"item-preview\">{{ action.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (action.Type) {\n                                                            <span class=\"meta-tag\">{{ action.Type }}</span>\n                                                        }\n                                                        <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n                                                            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n                                                            {{ action.Status }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanDeleteActions) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeAction(action, $event)\"\n                                                            title=\"Remove action\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (actionCount > agentActions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n                                                <span>View all {{ actionCount }} actions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage hierarchical relationships with child agents that work under this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addSubAgents()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Subagent\n                                            </button>\n                                            <button kendoButton themeColor=\"secondary\" size=\"small\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (subAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addSubAgents()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Subagent\n                                            </button>\n                                            <button kendoButton themeColor=\"secondary\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (subAgent of subAgents; track subAgent.ID) {\n                                            <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(subAgent)) {\n                                                        <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n                                                    }\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n                                                    @if (subAgent.Description) {\n                                                        <div class=\"item-preview\">{{ subAgent.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (subAgent.Status) {\n                                                            <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ subAgent.Status }}\n                                                            </span>\n                                                        }\n                                                        @if (subAgent.ExecutionMode) {\n                                                            <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanCreateSubAgents) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"primary\" \n                                                            size=\"small\"\n                                                            (click)=\"openSubAgentAdvancedSettings(subAgent, $event)\"\n                                                            title=\"Advanced settings\">\n                                                            <i class=\"fa-solid fa-cog\"></i>\n                                                        </button>\n                                                    }\n                                                    @if (EditMode && UserCanDeleteSubAgents) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeSubAgent(subAgent, $event)\"\n                                                            title=\"Remove sub-agent\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (subAgentCount > subAgents.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n                                                <span>View all {{ subAgentCount }} sub-agents...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Prompts (With Model Selection) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"prompt-controls\">\n                                        <!-- Model Selection Mode Control -->\n                                        <div class=\"model-selection-mode\">\n                                            <label class=\"model-selection-label\">\n                                                <i class=\"fa-solid fa-sliders\"></i>\n                                                Model Selection:\n                                            </label>\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist\n                                                    [(ngModel)]=\"record.ModelSelectionMode\"\n                                                    name=\"modelSelectionMode\"\n                                                    [data]=\"modelSelectionModes\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    class=\"model-selection-dropdown\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateNewPrompts) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (promptCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comments\"></i>\n                                        <h4>No Prompts Configured</h4>\n                                        <p>Add prompts to define how this agent processes requests and generates responses.</p>\n                                        @if (EditMode && UserCanCreateNewPrompts) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (prompt of agentPrompts; track prompt.ID) {\n                                            <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ prompt.Name }}</div>\n                                                    @if (prompt.TemplateText) {\n                                                        <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (prompt.PromptRole) {\n                                                            <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanCreatePrompts) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"primary\" \n                                                            size=\"small\"\n                                                            (click)=\"openPromptAdvancedSettings(prompt, $event)\"\n                                                            title=\"Advanced settings\">\n                                                            <i class=\"fa-solid fa-cog\"></i>\n                                                        </button>\n                                                    }\n                                                    @if (EditMode && UserCanDeletePrompts) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removePrompt(prompt, $event)\"\n                                                            title=\"Remove prompt\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (promptCount > agentPrompts.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n                                                <span>View all {{ promptCount }} prompts...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n\n                <!-- Learning & Analytics -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Monitor and manage learning cycles, training sessions, and performance analytics.\n                                    </div>\n                                </div>\n                                \n                                @if (learningCycleCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-brain\"></i>\n                                        <h4>No Learning Cycles</h4>\n                                        <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (cycle of learningCycles; track cycle.ID) {\n                                            <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-brain\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n                                                    <div class=\"item-meta\">\n                                                        @if (cycle.StartedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ cycle.StartedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                        @if (cycle.Status) {\n                                                            <span class=\"status-tag\">{{ cycle.Status }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (learningCycleCount > learningCycles.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n                                                <span>View all {{ learningCycleCount }} cycles...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Notes & Documentation -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage notes, documentation, and annotations for this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateNotes) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Note\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (noteCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sticky-note\"></i>\n                                        <h4>No Notes</h4>\n                                        <p>Add notes to document important information, observations, or instructions for this agent.</p>\n                                        @if (EditMode && UserCanCreateNotes) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Note\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (note of agentNotes; track note.ID) {\n                                            <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-sticky-note\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                                                    @if (note.Note) {\n                                                        <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (note.__mj_CreatedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ note.__mj_CreatedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (noteCount > agentNotes.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n                                                <span>View all {{ noteCount }} notes...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n\n\n                <!-- Payload -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n                                </div>\n                            </div>\n                            \n                            <!-- Payload Scope Section -->\n                            <div class=\"payload-section\">\n                                <h3 class=\"payload-section-title\">\n                                    <i class=\"fa-solid fa-target\"></i>\n                                    Payload Scope\n                                </h3>\n                                \n                                <div class=\"payload-field-container\">\n                                    <div class=\"payload-field-info\">\n                                        <label class=\"payload-field-label\">Payload Scope Path</label>\n                                        <p class=\"payload-field-description\">\n                                            Specify a path within the parent payload that this sub-agent should operate on. \n                                            Leave empty to receive the entire payload.\n                                        </p>\n                                    </div>\n                                    \n                                    <div class=\"payload-field-input\">\n                                        <mj-form-field \n                                            FieldName=\"PayloadScope\" \n                                            Type=\"textbox\"\n                                            Caption=\"\"\n                                            [EditMode]=\"EditMode\"\n                                            [record]=\"record\"\n                                            style=\"width: 100%;\">\n                                        </mj-form-field>\n                                        <div class=\"payload-field-example\">\n                                            <i class=\"fa-solid fa-lightbulb\"></i>\n                                            <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Path Configuration Section -->\n                            <div class=\"payload-section\">\n                                <h3 class=\"payload-section-title\">\n                                    <i class=\"fa-solid fa-route\"></i>\n                                    Path Configuration\n                                </h3>\n                                \n                                <div class=\"payload-paths-grid\">\n                                    <!-- Downstream Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon downstream\">\n                                                <i class=\"fa-solid fa-arrow-down\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Downstream Paths</h4>\n                                                <p>JSON array of paths to pass to sub-agents</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadDownstreamPaths || '[&quot;*&quot;]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <!-- Upstream Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon upstream\">\n                                                <i class=\"fa-solid fa-arrow-up\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Upstream Paths</h4>\n                                                <p>JSON array of paths sub-agents can write back</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadUpstreamPaths || '[&quot;*&quot;]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <!-- Self Read Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon self-read\">\n                                                <i class=\"fa-solid fa-eye\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Self Read Paths</h4>\n                                                <p>JSON array of paths this agent can read</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadSelfReadPaths || '[]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Paths this agent's prompts can read from the payload\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <!-- Self Write Paths -->\n                                    <div class=\"payload-path-card\">\n                                        <div class=\"payload-path-header\">\n                                            <div class=\"payload-path-icon self-write\">\n                                                <i class=\"fa-solid fa-pen\"></i>\n                                            </div>\n                                            <div class=\"payload-path-info\">\n                                                <h4>Self Write Paths</h4>\n                                                <p>JSON array of paths this agent can write to</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"payload-path-content\">\n                                            <div class=\"json-editor-container\">\n                                                <mj-code-editor \n                                                    [value]=\"record.PayloadSelfWritePaths || '[]'\"\n                                                    [readonly]=\"!EditMode\"\n                                                    language=\"json\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 100px; width: 100%;\"\n                                                    (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n                                                </mj-code-editor>\n                                            </div>\n                                            <div class=\"payload-path-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Paths this agent's prompts can write back to the payload\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Validation Section -->\n                            <div class=\"payload-section\">\n                                <h3 class=\"payload-section-title\">\n                                    <i class=\"fa-solid fa-shield-check\"></i>\n                                    Final Payload Validation\n                                </h3>\n                                \n                                <div class=\"payload-validation-container\">\n                                    <div class=\"payload-validation-settings\">\n                                        <div class=\"validation-field-group\">\n                                            <label class=\"validation-field-label\">Validation Mode</label>\n                                            <p class=\"validation-field-description\">How to handle validation failures</p>\n                                            <mj-form-field \n                                                FieldName=\"FinalPayloadValidationMode\" \n                                                Type=\"dropdownlist\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                style=\"width: 100%;\">\n                                            </mj-form-field>\n                                        </div>\n                                        \n                                        <div class=\"validation-field-group\">\n                                            <label class=\"validation-field-label\">Max Retries</label>\n                                            <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n                                            <mj-form-field \n                                                FieldName=\"FinalPayloadValidationMaxRetries\" \n                                                Type=\"numerictextbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                style=\"width: 100%;\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"payload-validation-schema\">\n                                        <label class=\"validation-schema-label\">\n                                            <i class=\"fa-solid fa-code\"></i>\n                                            Validation Schema\n                                        </label>\n                                        <p class=\"validation-schema-description\">\n                                            JSON schema or validation rules for the final payload structure\n                                        </p>\n                                        <div class=\"validation-schema-editor\">\n                                            <mj-code-editor \n                                                [value]=\"record.FinalPayloadValidation || '{}'\"\n                                                [readonly]=\"!EditMode\"\n                                                language=\"json\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 200px; width: 100%;\"\n                                                (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n\n\n                <!-- Execution Guardrails (New Separate Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Set limits to prevent runaway agent executions and control resource usage.\n                                </div>\n                            </div>\n                            \n                            <div class=\"form-fields-grid\">\n                                <mj-form-field \n                                    FieldName=\"MaxCostPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Cost ($)\"\n                                    Description=\"Maximum cost per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTokensPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Tokens\"\n                                    Description=\"Maximum tokens per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxIterationsPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Iterations\"\n                                    Description=\"Maximum prompt iterations\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTimePerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Time (seconds)\"\n                                    Description=\"Maximum execution time\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n                <!-- Configuration (Settings Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-cogs\"></i> Configuration\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Configure agent behavior, execution settings, and advanced features.\n                                </div>\n                            </div>\n                            \n                            <!-- Identity & Behavior Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-id-card\"></i>\n                                    Identity & Behavior\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-toggle-on\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Agent Status</h4>\n                                                <p>Current availability and operational status</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist \n                                                    [(ngModel)]=\"record.Status\"\n                                                    [data]=\"statusOptions\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    name=\"agentStatus\"\n                                                    class=\"config-field-input\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-sitemap\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Agent Type</h4>\n                                                <p>Category and system-level behavior</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist \n                                                    [(ngModel)]=\"record.TypeID\"\n                                                    [data]=\"agentTypes\"\n                                                    textField=\"Name\"\n                                                    valueField=\"ID\"\n                                                    [valuePrimitive]=\"true\"\n                                                    name=\"agentTypeID\"\n                                                    class=\"config-field-input\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-bolt\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Expose as Action</h4>\n                                                <p>Make available as an action for other agents</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"ExposeAsAction\" \n                                                Type=\"checkbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card full-width\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-align-left\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Description</h4>\n                                                <p>Detailed agent description and purpose</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"Description\" \n                                                Type=\"textarea\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                style=\"width: 100%;\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Execution Settings Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-play\"></i>\n                                    Execution Settings\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-layer-group\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Execution Mode</h4>\n                                                <p>How sub-agents are executed</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"ExecutionMode\" \n                                                Type=\"dropdownlist\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-sort-numeric-down\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Execution Order</h4>\n                                                <p>Order when run with siblings</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"ExecutionOrder\" \n                                                Type=\"numerictextbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-tachometer-alt\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Default Effort Level</h4>\n                                                <p>Default effort level for all prompts (1-100)</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"DefaultPromptEffortLevel\" \n                                                Type=\"numerictextbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                            <div class=\"config-card-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Higher values request more thorough reasoning (1=minimal, 100=maximum)\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-code\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Driver Class</h4>\n                                                <p>Custom implementation class</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"DriverClass\" \n                                                Type=\"textbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Visual Identity Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-palette\"></i>\n                                    Visual Identity\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-icons\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Icon Class</h4>\n                                                <p>Font Awesome icon class</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"IconClass\" \n                                                Type=\"textbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                            <div class=\"config-card-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Example: <code>fa-solid fa-robot</code>\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div class=\"config-card\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-image\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Logo URL</h4>\n                                                <p>URL for agent logo image</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"LogoURL\" \n                                                Type=\"textbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\">\n                                            </mj-form-field>\n                                            <div class=\"config-card-hint\">\n                                                <i class=\"fa-solid fa-info-circle\"></i>\n                                                Takes precedence over Icon Class\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n\n                            <!-- Context Compression Section -->\n                            <div class=\"config-section\">\n                                <h3 class=\"config-section-title\">\n                                    <i class=\"fa-solid fa-compress\"></i>\n                                    Context Compression\n                                </h3>\n                                \n                                <div class=\"config-grid\">\n                                    <div class=\"config-card full-width\">\n                                        <div class=\"config-card-header\">\n                                            <div class=\"config-card-icon\">\n                                                <i class=\"fa-solid fa-toggle-on\"></i>\n                                            </div>\n                                            <div class=\"config-card-info\">\n                                                <h4>Enable Context Compression</h4>\n                                                <p>Automatically compress conversation context when message threshold is reached</p>\n                                            </div>\n                                        </div>\n                                        <div class=\"config-card-content\">\n                                            <mj-form-field \n                                                FieldName=\"EnableContextCompression\" \n                                                Type=\"checkbox\"\n                                                Caption=\"\"\n                                                [EditMode]=\"EditMode\"\n                                                [record]=\"record\"\n                                                (valueChange)=\"onContextCompressionToggle($event)\">\n                                            </mj-form-field>\n                                        </div>\n                                    </div>\n\n                                    @if (record.EnableContextCompression) {\n                                        <div class=\"config-card\">\n                                            <div class=\"config-card-header\">\n                                                <div class=\"config-card-icon\">\n                                                    <i class=\"fa-solid fa-hashtag\"></i>\n                                                </div>\n                                                <div class=\"config-card-info\">\n                                                    <h4>Message Threshold</h4>\n                                                    <p>Messages before compression triggers</p>\n                                                </div>\n                                            </div>\n                                            <div class=\"config-card-content\">\n                                                <mj-form-field \n                                                    FieldName=\"ContextCompressionMessageThreshold\" \n                                                    Type=\"numerictextbox\"\n                                                    Caption=\"\"\n                                                    [EditMode]=\"EditMode\"\n                                                    [record]=\"record\">\n                                                </mj-form-field>\n                                            </div>\n                                        </div>\n\n                                        <div class=\"config-card\">\n                                            <div class=\"config-card-header\">\n                                                <div class=\"config-card-icon\">\n                                                    <i class=\"fa-solid fa-save\"></i>\n                                                </div>\n                                                <div class=\"config-card-info\">\n                                                    <h4>Messages to Keep</h4>\n                                                    <p>Recent messages to retain uncompressed</p>\n                                                </div>\n                                            </div>\n                                            <div class=\"config-card-content\">\n                                                <mj-form-field \n                                                    FieldName=\"ContextCompressionMessageRetentionCount\" \n                                                    Type=\"numerictextbox\"\n                                                    Caption=\"\"\n                                                    [EditMode]=\"EditMode\"\n                                                    [record]=\"record\">\n                                                </mj-form-field>\n                                            </div>\n                                        </div>\n\n                                        <div class=\"config-card\">\n                                            <div class=\"config-card-header\">\n                                                <div class=\"config-card-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"config-card-info\">\n                                                    <h4>Compression Prompt</h4>\n                                                    <p>Prompt used for summarization</p>\n                                                </div>\n                                            </div>\n                                            <div class=\"config-card-content\">\n                                                @if (EditMode) {\n                                                    <div class=\"prompt-selector-container\">\n                                                        <div class=\"prompt-display\">\n                                                            @if (selectedContextCompressionPrompt) {\n                                                                <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n                                                            } @else {\n                                                                <span class=\"no-prompt\">No prompt selected</span>\n                                                            }\n                                                        </div>\n                                                        <div class=\"prompt-actions\">\n                                                            <button type=\"button\" \n                                                                    kendoButton \n                                                                    fillMode=\"outline\" \n                                                                    size=\"small\"\n                                                                    (click)=\"openContextCompressionPromptSelector()\"\n                                                                    class=\"prompt-select-btn\">\n                                                                <i class=\"fa-solid fa-search\"></i>\n                                                                {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n                                                            </button>\n                                                            @if (selectedContextCompressionPrompt) {\n                                                                <button type=\"button\" \n                                                                        kendoButton \n                                                                        fillMode=\"flat\" \n                                                                        size=\"small\"\n                                                                        (click)=\"clearContextCompressionPrompt()\"\n                                                                        class=\"prompt-clear-btn\"\n                                                                        title=\"Clear selection\">\n                                                                    <i class=\"fa-solid fa-times\"></i>\n                                                                </button>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                } @else {\n                                                    <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n\n\n\n            </kendo-panelbar>\n        </div>\n    </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.agent-meta-info {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary:hover {\n    background: #5a6268;\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: white;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n    color: white;\n}\n\n.item-icon img.sub-agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n    opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n    color: #2196f3;\n}\n\n.view-more-item {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n    margin-bottom: 32px;\n}\n\n.subsection-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title i {\n    color: #2196f3;\n}\n\n.subsection-divider {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group {\n    margin-bottom: 20px;\n}\n\n.payload-field-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label i {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n    border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n    opacity: 1;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: white;\n}\n\n.card-title-section {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item i {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: #6c757d;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error i {\n    flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: fadeIn 0.3s ease;\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.result-section,\n.error-section {\n    margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.result-content,\n.error-content {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n    font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    /* Header Responsiveness */\n    .agent-header {\n        padding: 16px;\n    }\n    \n    .agent-header-content {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    /* Panel Responsiveness */\n    .form-content {\n        padding: 12px;\n    }\n    \n    ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content {\n        padding: 20px 16px;\n    }\n    \n    .section-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    /* Entity List Responsiveness */\n    .entity-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon i {\n        font-size: 16px;\n    }\n    \n    .item-title {\n        font-size: 15px;\n    }\n    \n    .item-preview {\n        font-size: 13px;\n    }\n    \n    .item-meta {\n        gap: 8px;\n    }\n    \n    /* Timeline Responsiveness */\n    .timeline-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker i {\n        font-size: 12px;\n    }\n    \n    .timeline-title {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date {\n        align-self: flex-start;\n    }\n    \n    /* Form Field Responsiveness */\n    .form-fields-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    /* Legacy card support */\n    .cards-container {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n\n/* New Execution History Card Design */\n.execution-history-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.execution-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n    cursor: pointer;\n}\n\n.execution-card:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n    border-color: #2196f3;\n    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.15);\n}\n\n.execution-header {\n    padding: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n}\n\n.execution-left-section {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.execution-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-shrink: 0;\n}\n\n.status-indicator {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.status-indicator i {\n    color: white;\n    font-size: 14px;\n}\n\n.execution-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.execution-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n.execution-metrics {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    flex-wrap: wrap;\n    margin-left: 44px; /* Align with execution title text, accounting for status indicator + gap */\n}\n\n.metric-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    background: #f8f9fa;\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: #495057;\n    white-space: nowrap;\n}\n\n.metric-item i {\n    color: #6c757d;\n    font-size: 12px;\n}\n\n.metric-label {\n    font-weight: 500;\n}\n\n.metric-value {\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.execution-actions {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.action-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: #f8f9fa;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n}\n\n.action-btn:hover {\n    background: #2196f3;\n    color: white;\n    transform: translateY(-1px);\n}\n\n.action-btn i {\n    font-size: 12px;\n}\n\n.expand-icon {\n    transition: transform 0.2s ease;\n    color: #6c757d;\n    margin-right: 4px;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n/* Execution Expanded Content */\n.execution-expanded-content {\n    padding: 16px;\n    border-top: 1px solid #f0f4f8;\n    background: #fafbfc;\n    animation: slideDown 0.2s ease;\n}\n\n@keyframes slideDown {\n    from {\n        opacity: 0;\n        max-height: 0;\n        padding-top: 0;\n        padding-bottom: 0;\n    }\n    to {\n        opacity: 1;\n        max-height: 500px;\n        padding-top: 16px;\n        padding-bottom: 16px;\n    }\n}\n\n.detailed-metrics {\n    margin-bottom: 20px;\n}\n\n.metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.metric-detail {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px;\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n}\n\n.metric-detail i {\n    color: #2196f3;\n    font-size: 16px;\n    width: 20px;\n    text-align: center;\n}\n\n.metric-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n}\n\n.metric-title {\n    font-size: 11px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-data {\n    font-size: 14px;\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.result-section {\n    margin-top: 16px;\n}\n\n.result-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.error-content {\n    background: #f8d7da;\n    border: 1px solid #f5c6cb;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #721c24;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 150px;\n    overflow-y: auto;\n}\n\n/* Responsive adjustments for execution history */\n@media (max-width: 768px) {\n    .execution-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .execution-left-section {\n        width: 100%;\n    }\n    \n    .execution-metrics {\n        margin-left: 0; /* Remove left margin on mobile */\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        width: 100%;\n    }\n    \n    .metric-item {\n        font-size: 11px;\n        padding: 4px 8px;\n    }\n    \n    .metrics-grid {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* === PAYLOAD MANAGEMENT SECTION === */\n.payload-section {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.payload-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.payload-section-title i {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n/* Payload Scope Styling */\n.payload-field-container {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-field-info {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-label {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.payload-field-description {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.5;\n    margin: 0;\n}\n\n.payload-field-input {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.payload-field-example {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.85rem;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid #e9ecef;\n}\n\n.payload-field-example i {\n    color: #ffc107;\n    font-size: 0.9rem;\n}\n\n.payload-field-example code {\n    background: #e9ecef;\n    padding: 0.2rem 0.4rem;\n    border-radius: 4px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.8rem;\n    color: #495057;\n}\n\n/* Path Configuration Grid */\n.payload-paths-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n}\n\n.payload-path-card {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.payload-path-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.payload-path-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.payload-path-icon.downstream {\n    background: linear-gradient(135deg, #28a745, #20c997);\n}\n\n.payload-path-icon.upstream {\n    background: linear-gradient(135deg, #007bff, #6610f2);\n}\n\n.payload-path-icon.self-read {\n    background: linear-gradient(135deg, #17a2b8, #20c997);\n}\n\n.payload-path-icon.self-write {\n    background: linear-gradient(135deg, #ffc107, #fd7e14);\n}\n\n.payload-path-icon i {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.payload-path-info h4 {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.payload-path-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-content {\n    padding: 1rem;\n}\n\n.json-editor-container {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n    border-color: #2196f3;\n}\n\n.payload-path-hint {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.payload-path-hint i {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint code {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n/* Payload Validation Container */\n.payload-validation-container {\n    padding: 1.5rem;\n    display: grid;\n    grid-template-columns: 1fr 2fr;\n    gap: 2rem;\n    align-items: start;\n}\n\n.payload-validation-settings {\n    display: flex;\n    flex-direction: column;\n    gap: 1.5rem;\n}\n\n.validation-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.validation-field-label {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n}\n\n.validation-field-description {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0 0 0.5rem 0;\n}\n\n.payload-validation-schema {\n    display: flex;\n    flex-direction: column;\n    gap: 0.75rem;\n}\n\n.validation-schema-label {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.95rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.validation-schema-label i {\n    color: #2196f3;\n}\n\n.validation-schema-description {\n    color: #6c757d;\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}\n\n.validation-schema-editor {\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n    border-color: #2196f3;\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n    margin-bottom: 2rem;\n    background: white;\n    border-radius: 12px;\n    border: 1px solid #e0e0e0;\n    overflow: hidden;\n}\n\n.config-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n    color: #495057;\n    font-size: 1.1rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.config-section-title i {\n    color: #2196f3;\n    font-size: 1.2rem;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n    gap: 1.5rem;\n    padding: 1.5rem;\n    width: 100%;\n}\n\n.config-card {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card:hover {\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);\n}\n\n.config-card.full-width {\n    grid-column: 1 / -1;\n}\n\n.config-card-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.config-card-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.config-card-icon i {\n    color: white;\n    font-size: 1.2rem;\n}\n\n.config-card-info h4 {\n    margin: 0 0 0.25rem 0;\n    font-size: 1rem;\n    font-weight: 600;\n    color: #495057;\n}\n\n.config-card-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: #6c757d;\n    line-height: 1.4;\n}\n\n.config-card-content {\n    padding: 1rem;\n}\n\n/* Custom field styling for config cards */\n.config-field-input {\n    width: 100%;\n    min-width: 250px;\n}\n\n/* Fix numeric textbox cutoff issue */\n.config-card-content ::ng-deep kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-card-content ::ng-deep mj-form-field {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-numerictextbox {\n    width: 100% !important;\n}\n\n.config-card-content ::ng-deep mj-form-field kendo-numerictextbox .k-input {\n    width: 100% !important;\n    min-width: 200px !important;\n}\n\n.config-field-display {\n    color: #495057;\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px 0;\n    display: block;\n    min-height: 20px;\n}\n\n/* Prompt selector styling */\n.prompt-selector-container {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n}\n\n.prompt-display {\n    flex: 1;\n    min-width: 0;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border: 1px solid #dee2e6;\n    border-radius: 6px;\n}\n\n.prompt-name {\n    color: #495057;\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt {\n    color: #6c757d;\n    font-style: italic;\n    font-size: 14px;\n}\n\n.prompt-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.prompt-select-btn {\n    white-space: nowrap;\n}\n\n.prompt-clear-btn {\n    min-width: 32px;\n}\n\n.config-card-hint {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.5rem;\n    font-size: 0.8rem;\n    color: #6c757d;\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n    color: #17a2b8;\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint code {\n    background: #e9ecef;\n    padding: 0.1rem 0.3rem;\n    border-radius: 3px;\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 0.75rem;\n    color: #495057;\n}\n\n\n/* === RESPONSIVE DESIGN === */\n@media (max-width: 768px) {\n    .payload-field-container,\n    .payload-validation-container {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n    }\n    \n    .payload-paths-grid {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .config-grid {\n        grid-template-columns: 1fr;\n        gap: 1rem;\n        padding: 1rem;\n    }\n    \n    .payload-section-title,\n    .config-section-title {\n        padding: 0.75rem 1rem;\n        font-size: 1rem;\n    }\n    \n    .payload-path-header,\n    .config-card-header {\n        padding: 0.75rem;\n    }\n    \n    .payload-path-content,\n    .config-card-content {\n        padding: 0.75rem;\n    }\n    \n    .payload-field-container,\n    .payload-validation-container {\n        padding: 1rem;\n    }\n}\n\n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.DialogService }, { type: i0.ViewContainerRef }, { type: i4.AIAgentManagementService }, { type: i5.AITestHarnessDialogService }], { customSectionContainer: [{
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]