@memberjunction/ng-core-entity-forms 2.119.0 → 2.120.0

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

@@ -34,6 +34,7 @@ import * as i14 from "@memberjunction/ng-code-editor";
 const _c0 = ["customSectionContainer"];
 const _forTrack0 = ($index, $item) => $item.ID;
 const _forTrack1 = ($index, $item) => $item.agent.ID;
+const _c1 = () => ({ standalone: true });
 function AIAgentFormComponentExtended_form_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 12);
 } if (rf & 2) {
@@ -181,298 +182,359 @@ function AIAgentFormComponentExtended_form_3_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_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61);
-    i0.ɵɵelement(1, "i", 66);
-    i0.ɵɵelementStart(2, "span", 67);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 54);
+} }
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Matching Results");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("No execution history found matching \"", ctx_r1.executionSearchText, "\"");
+} }
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelementStart(2, "span", 71);
     i0.ɵɵtext(3, "Config:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 68);
+    i0.ɵɵelementStart(4, "span", 72);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext().$implicit;
+    const execution_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(execution_r8.Configuration);
+    i0.ɵɵtextInterpolate(execution_r9.Configuration);
 } }
-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", 61);
-    i0.ɵɵelement(1, "i", 69);
-    i0.ɵɵelementStart(2, "span", 67);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(2, "span", 71);
     i0.ɵɵtext(3, "Duration:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 68);
+    i0.ɵɵelementStart(4, "span", 72);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext().$implicit;
+    const execution_r9 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTimeFromDates(execution_r8.StartedAt, execution_r8.CompletedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTimeFromDates(execution_r9.StartedAt, execution_r9.CompletedAt));
 } }
-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", 61);
-    i0.ɵɵelement(1, "i", 70);
-    i0.ɵɵelementStart(2, "span", 67);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelement(1, "i", 74);
+    i0.ɵɵelementStart(2, "span", 71);
     i0.ɵɵtext(3, "Running:");
     i0.ɵɵelementEnd()();
 } }
-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", 61);
-    i0.ɵɵelement(1, "i", 71);
-    i0.ɵɵelementStart(2, "span", 67);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelement(1, "i", 75);
+    i0.ɵɵelementStart(2, "span", 71);
     i0.ɵɵtext(3, "Tokens:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 68);
+    i0.ɵɵelementStart(4, "span", 72);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext().$implicit;
+    const execution_r9 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r8.TotalTokensUsedRollup || execution_r8.TotalTokensUsed));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r9.TotalTokensUsedRollup || execution_r9.TotalTokensUsed));
 } }
-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", 61);
-    i0.ɵɵelement(1, "i", 72);
-    i0.ɵɵelementStart(2, "span", 67);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelement(1, "i", 76);
+    i0.ɵɵelementStart(2, "span", 71);
     i0.ɵɵtext(3, "Cost:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 68);
+    i0.ɵɵelementStart(4, "span", 72);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext().$implicit;
+    const execution_r9 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r8.TotalCostRollup || execution_r8.TotalCost), "");
+    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r9.TotalCostRollup || execution_r9.TotalCost), "");
 } }
-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", 75);
-    i0.ɵɵelement(1, "i", 81);
-    i0.ɵɵelementStart(2, "div", 76)(3, "span", 77);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelement(1, "i", 85);
+    i0.ɵɵelementStart(2, "div", 80)(3, "span", 81);
     i0.ɵɵtext(4, "Completed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 82);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "date");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 1, execution_r8.CompletedAt, "medium"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 1, execution_r9.CompletedAt, "medium"));
 } }
-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", 75);
-    i0.ɵɵelement(1, "i", 71);
-    i0.ɵɵelementStart(2, "div", 76)(3, "span", 77);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelement(1, "i", 75);
+    i0.ɵɵelementStart(2, "div", 80)(3, "span", 81);
     i0.ɵɵtext(4, "Direct Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 82);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r8.TotalTokensUsed));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r9.TotalTokensUsed));
 } }
-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", 75);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
     i0.ɵɵelement(1, "i", 34);
-    i0.ɵɵelementStart(2, "div", 76)(3, "span", 77);
+    i0.ɵɵelementStart(2, "div", 80)(3, "span", 81);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 82);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r8.TotalTokensUsedRollup));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r9.TotalTokensUsedRollup));
 } }
-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", 75);
-    i0.ɵɵelement(1, "i", 72);
-    i0.ɵɵelementStart(2, "div", 76)(3, "span", 77);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelement(1, "i", 76);
+    i0.ɵɵelementStart(2, "div", 80)(3, "span", 81);
     i0.ɵɵtext(4, "Direct Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 82);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r8.TotalCost), "");
+    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r9.TotalCost), "");
 } }
-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", 75);
-    i0.ɵɵelement(1, "i", 82);
-    i0.ɵɵelementStart(2, "div", 76)(3, "span", 77);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelement(1, "i", 86);
+    i0.ɵɵelementStart(2, "div", 80)(3, "span", 81);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 82);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r8.TotalCostRollup), "");
+    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r9.TotalCostRollup), "");
 } }
-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", 75);
-    i0.ɵɵelement(1, "i", 83);
-    i0.ɵɵelementStart(2, "div", 76)(3, "span", 77);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵelement(1, "i", 87);
+    i0.ɵɵelementStart(2, "div", 80)(3, "span", 81);
     i0.ɵɵtext(4, "Conversation");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 82);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1("", execution_r8.ConversationID.substring(0, 8), "...");
+    i0.ɵɵtextInterpolate1("", execution_r9.ConversationID.substring(0, 8), "...");
 } }
-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", 79)(1, "h5");
-    i0.ɵɵelement(2, "i", 84);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83)(1, "h5");
+    i0.ɵɵelement(2, "i", 88);
     i0.ɵɵtext(3, " Result");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "mj-code-editor", 85);
+    i0.ɵɵelement(4, "mj-code-editor", 89);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r8, false))("readonly", true)("lineWrapping", true);
+    i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r9, false))("readonly", true)("lineWrapping", true);
 } }
-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", 80)(1, "h5");
-    i0.ɵɵelement(2, "i", 86);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84)(1, "h5");
+    i0.ɵɵelement(2, "i", 90);
     i0.ɵɵtext(3, " Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 87);
+    i0.ɵɵelementStart(4, "div", 91);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext(2).$implicit;
+    const execution_r9 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(execution_r8.ErrorMessage);
+    i0.ɵɵtextInterpolate(execution_r9.ErrorMessage);
 } }
-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", 65)(1, "div", 73)(2, "div", 74)(3, "div", 75);
-    i0.ɵɵelement(4, "i", 70);
-    i0.ɵɵelementStart(5, "div", 76)(6, "span", 77);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69)(1, "div", 77)(2, "div", 78)(3, "div", 79);
+    i0.ɵɵelement(4, "i", 74);
+    i0.ɵɵelementStart(5, "div", 80)(6, "span", 81);
     i0.ɵɵtext(7, "Started");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 78);
+    i0.ɵɵelementStart(8, "span", 82);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_11_Template, 8, 4, "div", 75)(12, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_12_Template, 7, 1, "div", 75)(13, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_13_Template, 7, 1, "div", 75)(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_14_Template, 7, 1, "div", 75)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_15_Template, 7, 1, "div", 75)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_16_Template, 7, 1, "div", 75);
+    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_11_Template, 8, 4, "div", 79)(12, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_12_Template, 7, 1, "div", 79)(13, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_13_Template, 7, 1, "div", 79)(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_14_Template, 7, 1, "div", 79)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_15_Template, 7, 1, "div", 79)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_16_Template, 7, 1, "div", 79);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_17_Template, 5, 3, "div", 79)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Conditional_18_Template, 6, 1, "div", 80);
+    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_17_Template, 5, 3, "div", 83)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Conditional_18_Template, 6, 1, "div", 84);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const execution_r8 = i0.ɵɵnextContext().$implicit;
+    const execution_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(10, 9, execution_r8.StartedAt, "medium"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(10, 9, execution_r9.StartedAt, "medium"));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(execution_r8.CompletedAt ? 11 : -1);
+    i0.ɵɵconditional(execution_r9.CompletedAt ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.TotalTokensUsed ? 12 : -1);
+    i0.ɵɵconditional(execution_r9.TotalTokensUsed ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.TotalTokensUsedRollup && execution_r8.TotalTokensUsedRollup !== execution_r8.TotalTokensUsed ? 13 : -1);
+    i0.ɵɵconditional(execution_r9.TotalTokensUsedRollup && execution_r9.TotalTokensUsedRollup !== execution_r9.TotalTokensUsed ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.TotalCost ? 14 : -1);
+    i0.ɵɵconditional(execution_r9.TotalCost ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.TotalCostRollup && execution_r8.TotalCostRollup !== execution_r8.TotalCost ? 15 : -1);
+    i0.ɵɵconditional(execution_r9.TotalCostRollup && execution_r9.TotalCostRollup !== execution_r9.TotalCost ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.ConversationID ? 16 : -1);
+    i0.ɵɵconditional(execution_r9.ConversationID ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.Result ? 17 : -1);
+    i0.ɵɵconditional(execution_r9.Result ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.ErrorMessage ? 18 : -1);
+    i0.ɵɵconditional(execution_r9.ErrorMessage ? 18 : -1);
 } }
-function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template_div_click_1_listener() { const execution_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r8.ID)); });
-    i0.ɵɵelementStart(2, "div", 53)(3, "div", 54)(4, "div", 55);
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Template_div_click_1_listener() { const execution_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r9.ID)); });
+    i0.ɵɵelementStart(2, "div", 57)(3, "div", 58)(4, "div", 59);
     i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 56)(7, "div", 57);
-    i0.ɵɵelement(8, "i", 58);
+    i0.ɵɵelementStart(6, "div", 60)(7, "div", 61);
+    i0.ɵɵelement(8, "i", 62);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 59);
+    i0.ɵɵelementStart(10, "div", 63);
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 60);
-    i0.ɵɵtemplate(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_14_Template, 6, 1, "div", 61)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_15_Template, 6, 1, "div", 61)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_16_Template, 4, 0, "div", 61)(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_17_Template, 6, 1, "div", 61)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_18_Template, 6, 1, "div", 61);
+    i0.ɵɵelementStart(13, "div", 64);
+    i0.ɵɵtemplate(14, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_14_Template, 6, 1, "div", 65)(15, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_15_Template, 6, 1, "div", 65)(16, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_16_Template, 4, 0, "div", 65)(17, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_17_Template, 6, 1, "div", 65)(18, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_18_Template, 6, 1, "div", 65);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 62)(20, "button", 63);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template_button_click_20_listener($event) { const execution_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.openExecutionRecord(execution_r8.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(21, "i", 64);
+    i0.ɵɵelementStart(19, "div", 66)(20, "button", 67);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Template_button_click_20_listener($event) { const execution_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.openExecutionRecord(execution_r9.ID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(21, "i", 68);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Conditional_22_Template, 19, 12, "div", 65);
+    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Conditional_22_Template, 19, 12, "div", 69);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const execution_r8 = ctx.$implicit;
+    const execution_r9 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r8.ID]);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r9.ID]);
     i0.ɵɵadvance(4);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getExecutionStatusColor(execution_r8.Status));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getExecutionStatusColor(execution_r9.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getExecutionStatusIcon(execution_r8.Status));
+    i0.ɵɵclassMap(ctx_r1.getExecutionStatusIcon(execution_r9.Status));
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r8.ID]);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r9.ID]);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Execution #", execution_r8.ID.substring(0, 8), " ");
+    i0.ɵɵtextInterpolate1(" Execution #", execution_r9.ID.substring(0, 8), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(12, 15, execution_r8.__mj_CreatedAt, "MMM d, h:mm a"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(12, 15, execution_r9.__mj_CreatedAt, "MMM d, h:mm a"));
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(execution_r8.Configuration ? 14 : -1);
+    i0.ɵɵconditional(execution_r9.Configuration ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.CompletedAt ? 15 : execution_r8.Status === "Running" ? 16 : -1);
+    i0.ɵɵconditional(execution_r9.CompletedAt ? 15 : execution_r9.Status === "Running" ? 16 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(execution_r8.TotalTokensUsedRollup || execution_r8.TotalTokensUsed ? 17 : -1);
+    i0.ɵɵconditional(execution_r9.TotalTokensUsedRollup || execution_r9.TotalTokensUsed ? 17 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r8.TotalCostRollup || execution_r8.TotalCost ? 18 : -1);
+    i0.ɵɵconditional(execution_r9.TotalCostRollup || execution_r9.TotalCost ? 18 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r8.ID] ? 22 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r9.ID] ? 22 : -1);
 } }
-function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
-    i0.ɵɵelementStart(1, "span");
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 99);
+    i0.ɵɵtext(1, " Loading... ");
+} }
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+    i0.ɵɵelementStart(1, "span", 95);
     i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵtextInterpolate2(" Page ", ctx_r1.executionHistoryCurrentPage, " of ", ctx_r1.totalPages, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("(", ctx_r1.totalExecutionHistoryCount, " total)");
+} }
+function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "button", 92);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.goToPreviousPage()); });
+    i0.ɵɵelement(2, "i", 93);
+    i0.ɵɵtext(3, " Previous ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 94);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Conditional_5_Template, 2, 0)(6, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Conditional_6_Template, 3, 3, "span", 95);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 92);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.goToNextPage()); });
+    i0.ɵɵtext(8, " Next ");
+    i0.ɵɵelement(9, "i", 96);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 97);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
+    i0.ɵɵelement(11, "i", 98);
+    i0.ɵɵtext(12, " View All in Grid ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", !ctx_r1.hasPreviousPage || ctx_r1.isLoadingPage);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.isLoadingPage ? 5 : 6);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r1.executionHistoryCount, " executions...");
+    i0.ɵɵproperty("disabled", !ctx_r1.hasNextPage || ctx_r1.isLoadingPage);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_2_Template, 23, 18, "div", 49, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_3_Template, 3, 1, "div", 50);
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "kendo-textbox", 49);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template_kendo_textbox_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.executionSearchText, $event) || (ctx_r1.executionSearchText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template_kendo_textbox_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onExecutionSearchChange()); });
+    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_ng_template_2_Template, 1, 0, "ng-template", 50);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(3, "div", 51);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_4_Template, 6, 1, "div", 47);
+    i0.ɵɵrepeaterCreate(5, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_For_6_Template, 23, 18, "div", 52, _forTrack0);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Conditional_7_Template, 13, 3, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.recentExecutions);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.executionSearchText);
+    i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(5, _c1))("clearButton", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.filteredExecutions.length === 0 ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.filteredExecutions);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.executionHistoryCount > ctx_r1.recentExecutions.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.totalPages > 1 ? 7 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_1_Template, 6, 0, "div", 47)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template, 4, 1, "div", 48);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_1_Template, 6, 0, "div", 47)(2, AIAgentFormComponentExtended_form_3_Conditional_23_ng_template_2_Conditional_2_Template, 8, 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -502,7 +564,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Condit
     i0.ɵɵtextInterpolate1(" (", ctx_r1.actionCount, ")");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 89);
+    i0.ɵɵelement(0, "i", 100);
     i0.ɵɵtext(1, " Actions ");
     i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Conditional_2_Template, 2, 0, "span", 44)(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
@@ -511,38 +573,38 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_1_Templa
     i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 2 : ctx_r1.actionCount > 0 ? 3 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵelement(1, "i", 92);
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵelement(1, "i", 99);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Loading actions...");
     i0.ɵɵelementEnd()();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 97);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 98);
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 107);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelement(1, "i", 108);
     i0.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 100);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 98);
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelement(1, "i", 108);
     i0.ɵɵtext(2, " Configure First Action ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵelement(1, "i", 100);
     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_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template, 3, 0, "button", 99);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Conditional_6_Template, 3, 0, "button", 109);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -550,75 +612,75 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 6 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵelementStart(0, "div", 117);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const action_r13 = i0.ɵɵnextContext().$implicit;
+    const action_r14 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(action_r13.Description);
+    i0.ɵɵtextInterpolate(action_r14.Description);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 108);
+    i0.ɵɵelementStart(0, "span", 119);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const action_r13 = i0.ɵɵnextContext().$implicit;
+    const action_r14 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(action_r13.Type);
+    i0.ɵɵtextInterpolate(action_r14.Type);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 114);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const action_r13 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.removeAction(action_r13, $event)); });
-    i0.ɵɵelement(1, "i", 115);
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 124);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const action_r14 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.removeAction(action_r14, $event)); });
+    i0.ɵɵelement(1, "i", 125);
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 102);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template_div_click_0_listener() { const action_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r13.ID)); });
-    i0.ɵɵelementStart(1, "div", 103);
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template_div_click_0_listener() { const action_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r14.ID)); });
+    i0.ɵɵelementStart(1, "div", 114);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 104)(4, "div", 105);
+    i0.ɵɵelementStart(3, "div", 115)(4, "div", 116);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 106);
-    i0.ɵɵelementStart(7, "div", 107);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 108);
-    i0.ɵɵelementStart(9, "span", 109);
-    i0.ɵɵelement(10, "i", 110);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 117);
+    i0.ɵɵelementStart(7, "div", 118);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 119);
+    i0.ɵɵelementStart(9, "span", 120);
+    i0.ɵɵelement(10, "i", 121);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 111);
-    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 112);
-    i0.ɵɵelement(14, "i", 113);
+    i0.ɵɵelementStart(12, "div", 122);
+    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 123);
+    i0.ɵɵelement(14, "i", 98);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const action_r13 = ctx.$implicit;
+    const action_r14 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getActionIcon(action_r13));
+    i0.ɵɵclassMap(ctx_r1.getActionIcon(action_r14));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(action_r13.Name || "Untitled Action");
+    i0.ɵɵtextInterpolate(action_r14.Name || "Untitled Action");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(action_r13.Description ? 6 : -1);
+    i0.ɵɵconditional(action_r14.Description ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(action_r13.Type ? 8 : -1);
+    i0.ɵɵconditional(action_r14.Type ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", action_r13.Status === "Active")("inactive", action_r13.Status !== "Active");
+    i0.ɵɵclassProp("active", action_r14.Status === "Active")("inactive", action_r14.Status !== "Active");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-check-circle", action_r13.Status === "Active")("fa-times-circle", action_r13.Status !== "Active");
+    i0.ɵɵclassProp("fa-check-circle", action_r14.Status === "Active")("fa-times-circle", action_r14.Status !== "Active");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", action_r13.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", action_r14.Status, " ");
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeleteActions ? 13 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 126);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -628,9 +690,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Condit
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template, 15, 15, "div", 101, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template, 3, 1, "div", 50);
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_For_2_Template, 15, 15, "div", 111, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Conditional_3_Template, 3, 1, "div", 112);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -640,10 +702,10 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 93)(1, "div", 94);
-    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template, 3, 0, "button", 95);
+    i0.ɵɵelementStart(0, "div", 103)(1, "div", 104);
+    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_2_Template, 3, 0, "button", 105);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Template, 7, 1, "div", 47)(4, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Template, 4, 1, "div", 96);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_3_Template, 7, 1, "div", 47)(4, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Conditional_4_Template, 4, 1, "div", 106);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
@@ -652,8 +714,8 @@ function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 3 : 4);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_1_Template, 4, 0, "div", 91)(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Template, 5, 2);
+    i0.ɵɵelementStart(0, "div", 101);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_1_Template, 4, 0, "div", 102)(2, AIAgentFormComponentExtended_form_3_Conditional_24_ng_template_2_Conditional_2_Template, 5, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -692,28 +754,28 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_1_Templa
     i0.ɵɵconditional(ctx_r1.loadingStates.subAgents ? 2 : ctx_r1.totalSubAgentCount > 0 ? 3 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 123);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createChildSubAgent()); });
-    i0.ɵɵelement(1, "i", 98)(2, "i", 121);
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 134);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createChildSubAgent()); });
+    i0.ɵɵelement(1, "i", 108)(2, "i", 132);
     i0.ɵɵtext(3, " Create Child ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 124);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_14_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.linkRelatedSubAgent()); });
-    i0.ɵɵelement(5, "i", 98)(6, "i", 122);
+    i0.ɵɵelementStart(4, "button", 135);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_14_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.linkRelatedSubAgent()); });
+    i0.ɵɵelement(5, "i", 108)(6, "i", 133);
     i0.ɵɵtext(7, " Link Related ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 129)(1, "button", 100);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Conditional_19_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createChildSubAgent()); });
-    i0.ɵɵelement(2, "i", 98);
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 140)(1, "button", 110);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Conditional_19_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createChildSubAgent()); });
+    i0.ɵɵelement(2, "i", 108);
     i0.ɵɵtext(3, " Create Child Sub-Agent ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 130);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Conditional_19_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.linkRelatedSubAgent()); });
-    i0.ɵɵelement(5, "i", 98);
+    i0.ɵɵelementStart(4, "button", 141);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Conditional_19_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.linkRelatedSubAgent()); });
+    i0.ɵɵelement(5, "i", 108);
     i0.ɵɵtext(6, " Link Related Sub-Agent ");
     i0.ɵɵelementEnd()();
 } }
@@ -726,23 +788,23 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Sub-agents help build complex workflows through hierarchical orchestration.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 125)(7, "div", 126);
-    i0.ɵɵelement(8, "i", 127);
+    i0.ɵɵelementStart(6, "div", 136)(7, "div", 137);
+    i0.ɵɵelement(8, "i", 138);
     i0.ɵɵelementStart(9, "strong");
     i0.ɵɵtext(10, "Child Sub-Agents");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "p");
     i0.ɵɵtext(12, "Share payload structure, dedicated to parent");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 126);
-    i0.ɵɵelement(14, "i", 128);
+    i0.ɵɵelementStart(13, "div", 137);
+    i0.ɵɵelement(14, "i", 139);
     i0.ɵɵelementStart(15, "strong");
     i0.ɵɵtext(16, "Related Sub-Agents");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(17, "p");
     i0.ɵɵtext(18, "Reusable agents with payload mapping");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Conditional_19_Template, 7, 0, "div", 129);
+    i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Conditional_19_Template, 7, 0, "div", 140);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -750,137 +812,137 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateSubAgents ? 19 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 134);
+    i0.ɵɵelement(0, "img", 145);
 } if (rf & 2) {
-    const item_r20 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", item_r20.agent.LogoURL, i0.ɵɵsanitizeUrl)("alt", item_r20.agent.Name + " logo");
+    const item_r21 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", item_r21.agent.LogoURL, i0.ɵɵsanitizeUrl)("alt", item_r21.agent.Name + " logo");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const item_r20 = i0.ɵɵnextContext().$implicit;
+    const item_r21 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(item_r20.agent));
+    i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(item_r21.agent));
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵelementStart(0, "div", 117);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r20 = i0.ɵɵnextContext().$implicit;
+    const item_r21 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r20.agent.Description);
+    i0.ɵɵtextInterpolate(item_r21.agent.Description);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 109);
+    i0.ɵɵelementStart(0, "span", 120);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r20 = i0.ɵɵnextContext().$implicit;
+    const item_r21 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵstyleProp("background-color", ctx_r1.getStatusBadgeColor());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", item_r20.agent.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", item_r21.agent.Status, " ");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 108);
+    i0.ɵɵelementStart(0, "span", 119);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r20 = i0.ɵɵnextContext().$implicit;
+    const item_r21 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(item_r20.agent.Type);
+    i0.ɵɵtextInterpolate(item_r21.agent.Type);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 141);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r21); const item_r20 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureOutputMapping(item_r20, $event)); });
-    i0.ɵɵelement(1, "i", 142);
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 152);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const item_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureOutputMapping(item_r21, $event)); });
+    i0.ɵɵelement(1, "i", 153);
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 143);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const item_r20 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(item_r20.agent, $event)); });
-    i0.ɵɵelement(1, "i", 66);
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 154);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const item_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(item_r21.agent, $event)); });
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 144);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const item_r20 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(item_r20.type === "child" ? ctx_r1.removeChildSubAgent(item_r20, $event) : ctx_r1.unlinkRelatedSubAgent(item_r20, $event)); });
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 155);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r24); const item_r21 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(item_r21.type === "child" ? ctx_r1.removeChildSubAgent(item_r21, $event) : ctx_r1.unlinkRelatedSubAgent(item_r21, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r20 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵproperty("title", item_r20.type === "child" ? "Delete child sub-agent" : "Unlink related sub-agent");
+    const item_r21 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("title", item_r21.type === "child" ? "Delete child sub-agent" : "Unlink related sub-agent");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(item_r20.type === "child" ? "fa-solid fa-trash" : "fa-solid fa-unlink");
+    i0.ɵɵclassMap(item_r21.type === "child" ? "fa-solid fa-trash" : "fa-solid fa-unlink");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_0_Template, 2, 0, "button", 138)(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_1_Template, 2, 0, "button", 139)(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_2_Template, 2, 3, "button", 140);
+    i0.ɵɵtemplate(0, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_0_Template, 2, 0, "button", 149)(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_1_Template, 2, 0, "button", 150)(2, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Conditional_2_Template, 2, 3, "button", 151);
 } if (rf & 2) {
-    const item_r20 = i0.ɵɵnextContext().$implicit;
+    const item_r21 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵconditional(item_r20.type === "related" ? 0 : -1);
+    i0.ɵɵconditional(item_r21.type === "related" ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r20.type === "child" && ctx_r1.UserCanCreateSubAgents ? 1 : -1);
+    i0.ɵɵconditional(item_r21.type === "child" && ctx_r1.UserCanCreateSubAgents ? 1 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.UserCanDeleteSubAgents ? 2 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 132);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Template_div_click_0_listener() { const item_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", item_r20.agent.ID)); });
-    i0.ɵɵelementStart(1, "div", 133);
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 143);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Template_div_click_0_listener() { const item_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", item_r21.agent.ID)); });
+    i0.ɵɵelementStart(1, "div", 144);
     i0.ɵɵelement(2, "i");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 103);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_5_Template, 1, 2, "img", 134)(6, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_6_Template, 1, 2, "i", 13);
+    i0.ɵɵelementStart(4, "div", 114);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_5_Template, 1, 2, "img", 145)(6, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_6_Template, 1, 2, "i", 13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 104)(8, "div", 105);
+    i0.ɵɵelementStart(7, "div", 115)(8, "div", 116);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_10_Template, 2, 1, "div", 106);
-    i0.ɵɵelementStart(11, "div", 107)(12, "span", 135);
-    i0.ɵɵelement(13, "i", 136);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_10_Template, 2, 1, "div", 117);
+    i0.ɵɵelementStart(11, "div", 118)(12, "span", 146);
+    i0.ɵɵelement(13, "i", 147);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(15, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_15_Template, 2, 3, "span", 137)(16, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_16_Template, 2, 1, "span", 108);
+    i0.ɵɵtemplate(15, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_15_Template, 2, 3, "span", 148)(16, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_16_Template, 2, 1, "span", 119);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 111);
+    i0.ɵɵelementStart(17, "div", 122);
     i0.ɵɵtemplate(18, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Conditional_18_Template, 3, 3);
-    i0.ɵɵelement(19, "i", 113);
+    i0.ɵɵelement(19, "i", 98);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r20 = ctx.$implicit;
+    const item_r21 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("child-sub-agent", item_r20.type === "child")("related-sub-agent", item_r20.type === "related");
+    i0.ɵɵclassProp("child-sub-agent", item_r21.type === "child")("related-sub-agent", item_r21.type === "related");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r1.getSubAgentBadgeColor(item_r20));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getSubAgentBadgeColor(item_r21));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getSubAgentBadgeIcon(item_r20));
+    i0.ɵɵclassMap(ctx_r1.getSubAgentBadgeIcon(item_r21));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubAgentBadgeText(item_r20), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubAgentBadgeText(item_r21), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasSubAgentLogoURL(item_r20.agent) ? 5 : 6);
+    i0.ɵɵconditional(ctx_r1.hasSubAgentLogoURL(item_r21.agent) ? 5 : 6);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(item_r20.agent.Name || "Untitled Sub-Agent");
+    i0.ɵɵtextInterpolate(item_r21.agent.Name || "Untitled Sub-Agent");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r20.agent.Description ? 10 : -1);
+    i0.ɵɵconditional(item_r21.agent.Description ? 10 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubAgentPayloadInfo(item_r20), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubAgentPayloadInfo(item_r21), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r20.agent.Status ? 15 : -1);
+    i0.ɵɵconditional(item_r21.agent.Status ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r20.agent.Type ? 16 : -1);
+    i0.ɵɵconditional(item_r21.agent.Type ? 16 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.EditMode ? 18 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Template, 20, 16, "div", 131, _forTrack1);
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_For_2_Template, 20, 16, "div", 142, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -888,26 +950,26 @@ function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Condit
     i0.ɵɵrepeater(ctx_r1.filteredSubAgents);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 116)(2, "div", 117)(3, "kendo-buttongroup", 118)(4, "button", 119);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("all")); });
-    i0.ɵɵelement(5, "i", 120);
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 127)(2, "div", 128)(3, "kendo-buttongroup", 129)(4, "button", 130);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("all")); });
+    i0.ɵɵelement(5, "i", 131);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 119);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("child")); });
-    i0.ɵɵelement(8, "i", 121);
+    i0.ɵɵelementStart(7, "button", 130);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("child")); });
+    i0.ɵɵelement(8, "i", 132);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 119);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("related")); });
-    i0.ɵɵelement(11, "i", 122);
+    i0.ɵɵelementStart(10, "button", 130);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("related")); });
+    i0.ɵɵelement(11, "i", 133);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 94);
+    i0.ɵɵelementStart(13, "div", 104);
     i0.ɵɵtemplate(14, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_14_Template, 8, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(15, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Template, 20, 1, "div", 47)(16, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_Template, 3, 0, "div", 96);
+    i0.ɵɵtemplate(15, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_15_Template, 20, 1, "div", 47)(16, AIAgentFormComponentExtended_form_3_Conditional_25_ng_template_2_Conditional_16_Template, 3, 0, "div", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -951,7 +1013,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Condit
     i0.ɵɵtextInterpolate1(" (", ctx_r1.promptCount, ")");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 83);
+    i0.ɵɵelement(0, "i", 87);
     i0.ɵɵtext(1, " Prompts ");
     i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Conditional_2_Template, 2, 0, "span", 44)(3, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
@@ -960,9 +1022,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_1_Templa
     i0.ɵɵconditional(ctx_r1.loadingStates.prompts ? 2 : ctx_r1.promptCount > 0 ? 3 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 151);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 162);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r25); 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);
@@ -970,7 +1032,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
     i0.ɵɵproperty("data", ctx_r1.modelSelectionModes)("valuePrimitive", true);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelementStart(0, "span", 161);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -979,31 +1041,31 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
     i0.ɵɵtextInterpolate(ctx_r1.record.ModelSelectionMode || "Agent Type");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 97);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 98);
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 107);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelement(1, "i", 108);
     i0.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 100);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 98);
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelement(1, "i", 108);
     i0.ɵɵtext(2, " Create First Prompt ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵelement(1, "i", 87);
     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_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 99);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 109);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1011,73 +1073,73 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 6 : -1);
 } }
 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", 106);
+    i0.ɵɵelementStart(0, "div", 117);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const prompt_r28 = i0.ɵɵnextContext().$implicit;
+    const prompt_r29 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", prompt_r28.TemplateText.substring(0, 120), "", prompt_r28.TemplateText.length > 120 ? "..." : "", "");
+    i0.ɵɵtextInterpolate2("", prompt_r29.TemplateText.substring(0, 120), "", prompt_r29.TemplateText.length > 120 ? "..." : "", "");
 } }
 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", 108);
+    i0.ɵɵelementStart(0, "span", 119);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const prompt_r28 = i0.ɵɵnextContext().$implicit;
+    const prompt_r29 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(prompt_r28.PromptRole);
+    i0.ɵɵtextInterpolate(prompt_r29.PromptRole);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 143);
-    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(_r29); const prompt_r28 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r28, $event)); });
-    i0.ɵɵelement(1, "i", 66);
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 154);
+    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(_r30); const prompt_r29 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r29, $event)); });
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 156);
-    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(_r30); const prompt_r28 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r28, $event)); });
-    i0.ɵɵelement(1, "i", 115);
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 167);
+    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(_r31); const prompt_r29 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r29, $event)); });
+    i0.ɵɵelement(1, "i", 125);
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 153);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", prompt_r28.ID)); });
-    i0.ɵɵelementStart(1, "div", 103);
-    i0.ɵɵelement(2, "i", 154);
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 164);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", prompt_r29.ID)); });
+    i0.ɵɵelementStart(1, "div", 114);
+    i0.ɵɵelement(2, "i", 165);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 104)(4, "div", 105);
+    i0.ɵɵelementStart(3, "div", 115)(4, "div", 116);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 106);
-    i0.ɵɵelementStart(7, "div", 107);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 108);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 117);
+    i0.ɵɵelementStart(7, "div", 118);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 119);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 111);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 139)(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template, 2, 0, "button", 155);
-    i0.ɵɵelement(12, "i", 113);
+    i0.ɵɵelementStart(9, "div", 122);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 150)(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Conditional_11_Template, 2, 0, "button", 166);
+    i0.ɵɵelement(12, "i", 98);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const prompt_r28 = ctx.$implicit;
+    const prompt_r29 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(prompt_r28.Name);
+    i0.ɵɵtextInterpolate(prompt_r29.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(prompt_r28.TemplateText ? 6 : -1);
+    i0.ɵɵconditional(prompt_r29.TemplateText ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(prompt_r28.PromptRole ? 8 : -1);
+    i0.ɵɵconditional(prompt_r29.PromptRole ? 8 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreatePrompts ? 10 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeletePrompts ? 11 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", "")); });
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 126);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -1087,9 +1149,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.promptCount, " prompts...");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template, 13, 5, "div", 152, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 50);
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_For_2_Template, 13, 5, "div", 163, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 112);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1099,16 +1161,16 @@ function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.promptCount > ctx_r1.agentPrompts.length ? 3 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 93)(2, "div", 145)(3, "div", 146)(4, "label", 147);
-    i0.ɵɵelement(5, "i", 148);
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 103)(2, "div", 156)(3, "div", 157)(4, "label", 158);
+    i0.ɵɵelement(5, "i", 159);
     i0.ɵɵtext(6, " Model Selection: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 149)(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template, 2, 1, "span", 150);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 160)(8, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_8_Template, 2, 1, "span", 161);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 94);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template, 3, 0, "button", 95);
+    i0.ɵɵelementStart(9, "div", 104);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_10_Template, 3, 0, "button", 105);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template, 7, 1, "div", 47)(12, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template, 4, 1, "div", 96);
+    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_11_Template, 7, 1, "div", 47)(12, AIAgentFormComponentExtended_form_3_Conditional_26_ng_template_2_Conditional_12_Template, 4, 1, "div", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1133,7 +1195,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Condit
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 157);
+    i0.ɵɵelement(0, "i", 168);
     i0.ɵɵtext(1);
     i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Conditional_2_Template, 2, 0, "span", 44);
 } if (rf & 2) {
@@ -1145,7 +1207,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_1_Templa
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵelement(1, "i", 157);
+    i0.ɵɵelement(1, "i", 168);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Learning Cycles");
     i0.ɵɵelementEnd();
@@ -1154,54 +1216,54 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
     i0.ɵɵelementEnd()();
 } }
 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", 108);
-    i0.ɵɵelement(1, "i", 161);
+    i0.ɵɵelementStart(0, "span", 119);
+    i0.ɵɵelement(1, "i", 172);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cycle_r33 = i0.ɵɵnextContext().$implicit;
+    const cycle_r34 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r33.StartedAt, "short"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r34.StartedAt, "short"), " ");
 } }
 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", 109);
+    i0.ɵɵelementStart(0, "span", 120);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cycle_r33 = i0.ɵɵnextContext().$implicit;
+    const cycle_r34 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cycle_r33.Status);
+    i0.ɵɵtextInterpolate(cycle_r34.Status);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 160);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", cycle_r33.ID)); });
-    i0.ɵɵelementStart(1, "div", 103);
-    i0.ɵɵelement(2, "i", 157);
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 171);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r34 = i0.ɵɵrestoreView(_r33).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", cycle_r34.ID)); });
+    i0.ɵɵelementStart(1, "div", 114);
+    i0.ɵɵelement(2, "i", 168);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 104)(4, "div", 105);
+    i0.ɵɵelementStart(3, "div", 115)(4, "div", 116);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 107);
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 108)(8, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 109);
+    i0.ɵɵelementStart(6, "div", 118);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 119)(8, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 120);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 111);
-    i0.ɵɵelement(10, "i", 113);
+    i0.ɵɵelementStart(9, "div", 122);
+    i0.ɵɵelement(10, "i", 98);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const cycle_r33 = ctx.$implicit;
+    const cycle_r34 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("Learning Cycle ", cycle_r33.ID.substring(0, 8), "");
+    i0.ɵɵtextInterpolate1("Learning Cycle ", cycle_r34.ID.substring(0, 8), "");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(cycle_r33.StartedAt ? 7 : -1);
+    i0.ɵɵconditional(cycle_r34.StartedAt ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(cycle_r33.Status ? 8 : -1);
+    i0.ɵɵconditional(cycle_r34.Status ? 8 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", "")); });
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 126);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); 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()();
@@ -1211,9 +1273,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 159, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 50);
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 170, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 112);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1223,10 +1285,10 @@ function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.learningCycleCount > ctx_r1.learningCycles.length ? 3 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 93)(2, "div", 158);
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 103)(2, "div", 169);
     i0.ɵɵtext(3, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template, 6, 0, "div", 47)(5, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 96);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_4_Template, 6, 0, "div", 47)(5, AIAgentFormComponentExtended_form_3_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1247,7 +1309,7 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Condit
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 162);
+    i0.ɵɵelement(0, "i", 173);
     i0.ɵɵtext(1);
     i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Conditional_2_Template, 2, 0, "span", 44);
 } if (rf & 2) {
@@ -1258,31 +1320,31 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_1_Templa
     i0.ɵɵconditional(ctx_r1.loadingStates.notes ? 2 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 97);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 98);
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 107);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelement(1, "i", 108);
     i0.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 100);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 98);
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelement(1, "i", 108);
     i0.ɵɵtext(2, " Create First Note ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵelement(1, "i", 162);
+    i0.ɵɵelement(1, "i", 173);
     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_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 99);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 109);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1290,55 +1352,55 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 6 : -1);
 } }
 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", 106);
+    i0.ɵɵelementStart(0, "div", 117);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const note_r38 = i0.ɵɵnextContext().$implicit;
+    const note_r39 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", note_r38.Note.substring(0, 100), "", note_r38.Note.length > 100 ? "..." : "", "");
+    i0.ɵɵtextInterpolate2("", note_r39.Note.substring(0, 100), "", note_r39.Note.length > 100 ? "..." : "", "");
 } }
 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", 108);
-    i0.ɵɵelement(1, "i", 161);
+    i0.ɵɵelementStart(0, "span", 119);
+    i0.ɵɵelement(1, "i", 172);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const note_r38 = i0.ɵɵnextContext().$implicit;
+    const note_r39 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, note_r38.__mj_CreatedAt, "short"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, note_r39.__mj_CreatedAt, "short"), " ");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 164);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r38 = i0.ɵɵrestoreView(_r37).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", note_r38.ID)); });
-    i0.ɵɵelementStart(1, "div", 103);
-    i0.ɵɵelement(2, "i", 162);
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 175);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r39 = i0.ɵɵrestoreView(_r38).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", note_r39.ID)); });
+    i0.ɵɵelementStart(1, "div", 114);
+    i0.ɵɵelement(2, "i", 173);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 104)(4, "div", 105);
+    i0.ɵɵelementStart(3, "div", 115)(4, "div", 116);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 106);
-    i0.ɵɵelementStart(7, "div", 107);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 108);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 117);
+    i0.ɵɵelementStart(7, "div", 118);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 119);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 111);
-    i0.ɵɵelement(10, "i", 113);
+    i0.ɵɵelementStart(9, "div", 122);
+    i0.ɵɵelement(10, "i", 98);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const note_r38 = ctx.$implicit;
+    const note_r39 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(note_r38.Type || "Note");
+    i0.ɵɵtextInterpolate(note_r39.Type || "Note");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(note_r38.Note ? 6 : -1);
+    i0.ɵɵconditional(note_r39.Note ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(note_r38.__mj_CreatedAt ? 8 : -1);
+    i0.ɵɵconditional(note_r39.__mj_CreatedAt ? 8 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", "")); });
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 126);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -1348,9 +1410,9 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 163, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 50);
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 174, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 112);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1360,13 +1422,13 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Condit
     i0.ɵɵconditional(ctx_r1.noteCount > ctx_r1.agentNotes.length ? 3 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 93)(2, "div", 158);
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 103)(2, "div", 169);
     i0.ɵɵtext(3, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 94);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template, 3, 0, "button", 95);
+    i0.ɵɵelementStart(4, "div", 104);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_5_Template, 3, 0, "button", 105);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template, 7, 1, "div", 47)(7, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template, 4, 1, "div", 96);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_6_Template, 7, 1, "div", 47)(7, AIAgentFormComponentExtended_form_3_Conditional_28_ng_template_2_Conditional_7_Template, 4, 1, "div", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1384,28 +1446,28 @@ function AIAgentFormComponentExtended_form_3_Conditional_28_Template(rf, ctx) {
     i0.ɵɵproperty("expanded", false)("disabled", ctx_r1.loadingStates.notes);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 142);
+    i0.ɵɵelement(0, "i", 153);
     i0.ɵɵtext(1, " Payload Management ");
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) { if (rf & 1) {
-    const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 93)(2, "div", 158);
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 103)(2, "div", 169);
     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", 165)(5, "h3", 166);
-    i0.ɵɵelement(6, "i", 167);
+    i0.ɵɵelementStart(4, "div", 176)(5, "h3", 177);
+    i0.ɵɵelement(6, "i", 178);
     i0.ɵɵtext(7, " Payload Scope ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 168)(9, "div", 169)(10, "label", 170);
+    i0.ɵɵelementStart(8, "div", 179)(9, "div", 180)(10, "label", 181);
     i0.ɵɵtext(11, "Payload Scope Path");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "p", 171);
+    i0.ɵɵelementStart(12, "p", 182);
     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", 172);
-    i0.ɵɵelement(15, "mj-form-field", 173);
-    i0.ɵɵelementStart(16, "div", 174);
-    i0.ɵɵelement(17, "i", 175);
+    i0.ɵɵelementStart(14, "div", 183);
+    i0.ɵɵelement(15, "mj-form-field", 184);
+    i0.ɵɵelementStart(16, "div", 185);
+    i0.ɵɵelement(17, "i", 186);
     i0.ɵɵelementStart(18, "span");
     i0.ɵɵtext(19, "Example: ");
     i0.ɵɵelementStart(20, "code");
@@ -1415,24 +1477,24 @@ function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) {
     i0.ɵɵelementStart(23, "code");
     i0.ɵɵtext(24, "/analysis/results");
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(25, "div", 165)(26, "h3", 166);
-    i0.ɵɵelement(27, "i", 176);
+    i0.ɵɵelementStart(25, "div", 176)(26, "h3", 177);
+    i0.ɵɵelement(27, "i", 187);
     i0.ɵɵtext(28, " Path Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 177)(30, "div", 178)(31, "div", 179)(32, "div", 180);
-    i0.ɵɵelement(33, "i", 181);
+    i0.ɵɵelementStart(29, "div", 188)(30, "div", 189)(31, "div", 190)(32, "div", 191);
+    i0.ɵɵelement(33, "i", 192);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "div", 182)(35, "h4");
+    i0.ɵɵelementStart(34, "div", 193)(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", 183)(40, "div", 184)(41, "mj-code-editor", 185);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_41_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
+    i0.ɵɵelementStart(39, "div", 194)(40, "div", 195)(41, "mj-code-editor", 196);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_41_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(42, "div", 186);
-    i0.ɵɵelement(43, "i", 187);
+    i0.ɵɵelementStart(42, "div", 197);
+    i0.ɵɵelement(43, "i", 198);
     i0.ɵɵtext(44, " Use ");
     i0.ɵɵelementStart(45, "code");
     i0.ɵɵtext(46, "[\"*\"]");
@@ -1441,87 +1503,87 @@ function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) {
     i0.ɵɵelementStart(48, "code");
     i0.ɵɵtext(49, "[\"user.id\", \"order.*\"]");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(50, "div", 178)(51, "div", 179)(52, "div", 188);
-    i0.ɵɵelement(53, "i", 189);
+    i0.ɵɵelementStart(50, "div", 189)(51, "div", 190)(52, "div", 199);
+    i0.ɵɵelement(53, "i", 200);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "div", 182)(55, "h4");
+    i0.ɵɵelementStart(54, "div", 193)(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", 183)(60, "div", 184)(61, "mj-code-editor", 185);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_61_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
+    i0.ɵɵelementStart(59, "div", 194)(60, "div", 195)(61, "mj-code-editor", 196);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_61_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(62, "div", 186);
-    i0.ɵɵelement(63, "i", 187);
+    i0.ɵɵelementStart(62, "div", 197);
+    i0.ɵɵelement(63, "i", 198);
     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", 178)(69, "div", 179)(70, "div", 190);
-    i0.ɵɵelement(71, "i", 191);
+    i0.ɵɵelementStart(68, "div", 189)(69, "div", 190)(70, "div", 201);
+    i0.ɵɵelement(71, "i", 202);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "div", 182)(73, "h4");
+    i0.ɵɵelementStart(72, "div", 193)(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", 183)(78, "div", 184)(79, "mj-code-editor", 185);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_79_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
+    i0.ɵɵelementStart(77, "div", 194)(78, "div", 195)(79, "mj-code-editor", 196);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_79_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(80, "div", 186);
-    i0.ɵɵelement(81, "i", 187);
+    i0.ɵɵelementStart(80, "div", 197);
+    i0.ɵɵelement(81, "i", 198);
     i0.ɵɵtext(82, " Paths this agent's prompts can read from the payload ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(83, "div", 178)(84, "div", 179)(85, "div", 192);
-    i0.ɵɵelement(86, "i", 193);
+    i0.ɵɵelementStart(83, "div", 189)(84, "div", 190)(85, "div", 203);
+    i0.ɵɵelement(86, "i", 204);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(87, "div", 182)(88, "h4");
+    i0.ɵɵelementStart(87, "div", 193)(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", 183)(93, "div", 184)(94, "mj-code-editor", 185);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_94_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
+    i0.ɵɵelementStart(92, "div", 194)(93, "div", 195)(94, "mj-code-editor", 196);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_94_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(95, "div", 186);
-    i0.ɵɵelement(96, "i", 187);
+    i0.ɵɵelementStart(95, "div", 197);
+    i0.ɵɵelement(96, "i", 198);
     i0.ɵɵtext(97, " Paths this agent's prompts can write back to the payload ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(98, "div", 165)(99, "h3", 166);
-    i0.ɵɵelement(100, "i", 194);
+    i0.ɵɵelementStart(98, "div", 176)(99, "h3", 177);
+    i0.ɵɵelement(100, "i", 205);
     i0.ɵɵtext(101, " Final Payload Validation ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(102, "div", 195)(103, "div", 196)(104, "div", 197)(105, "label", 198);
+    i0.ɵɵelementStart(102, "div", 206)(103, "div", 207)(104, "div", 208)(105, "label", 209);
     i0.ɵɵtext(106, "Validation Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(107, "p", 199);
+    i0.ɵɵelementStart(107, "p", 210);
     i0.ɵɵtext(108, "How to handle validation failures");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(109, "mj-form-field", 200);
+    i0.ɵɵelement(109, "mj-form-field", 211);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(110, "div", 197)(111, "label", 198);
+    i0.ɵɵelementStart(110, "div", 208)(111, "label", 209);
     i0.ɵɵtext(112, "Max Retries");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(113, "p", 199);
+    i0.ɵɵelementStart(113, "p", 210);
     i0.ɵɵtext(114, "Maximum validation retry attempts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(115, "mj-form-field", 201);
+    i0.ɵɵelement(115, "mj-form-field", 212);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(116, "div", 202)(117, "label", 203);
-    i0.ɵɵelement(118, "i", 204);
+    i0.ɵɵelementStart(116, "div", 213)(117, "label", 214);
+    i0.ɵɵelement(118, "i", 215);
     i0.ɵɵtext(119, " Validation Schema ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(120, "p", 205);
+    i0.ɵɵelementStart(120, "p", 216);
     i0.ɵɵtext(121, " JSON schema or validation rules for the final payload structure ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(122, "div", 206)(123, "mj-code-editor", 207);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_123_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
+    i0.ɵɵelementStart(122, "div", 217)(123, "mj-code-editor", 218);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_31_Template_mj_code_editor_valueChange_123_listener($event) { i0.ɵɵrestoreView(_r41); 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);
@@ -1543,15 +1605,15 @@ function AIAgentFormComponentExtended_form_3_ng_template_31_Template(rf, ctx) {
     i0.ɵɵproperty("value", ctx_r1.record.FinalPayloadValidation || "{}")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 208);
+    i0.ɵɵelement(0, "i", 219);
     i0.ɵɵtext(1, " Execution Guardrails ");
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 93)(2, "div", 158);
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 103)(2, "div", 169);
     i0.ɵɵtext(3, " Set limits to prevent runaway agent executions and control resource usage. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 209);
-    i0.ɵɵelement(5, "mj-form-field", 210)(6, "mj-form-field", 211)(7, "mj-form-field", 212)(8, "mj-form-field", 213);
+    i0.ɵɵelementStart(4, "div", 220);
+    i0.ɵɵelement(5, "mj-form-field", 221)(6, "mj-form-field", 222)(7, "mj-form-field", 223)(8, "mj-form-field", 224);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1565,13 +1627,13 @@ function AIAgentFormComponentExtended_form_3_ng_template_34_Template(rf, ctx) {
     i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 214);
+    i0.ɵɵelement(0, "i", 225);
     i0.ɵɵtext(1, " Configuration ");
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 246);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 257);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r43); 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);
@@ -1579,7 +1641,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Templ
     i0.ɵɵproperty("data", ctx_r1.statusOptions)("valuePrimitive", true);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 226);
+    i0.ɵɵelementStart(0, "span", 237);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1588,9 +1650,9 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Templ
     i0.ɵɵtextInterpolate(ctx_r1.record.Status || "Not Set");
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 247);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TypeID, $event) || (ctx_r1.record.TypeID = $event); return i0.ɵɵresetView($event); });
+    const _r44 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 258);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r44); 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);
@@ -1598,7 +1660,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Templ
     i0.ɵɵproperty("data", ctx_r1.agentTypes)("valuePrimitive", true);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 226);
+    i0.ɵɵelementStart(0, "span", 237);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1607,7 +1669,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Templ
     i0.ɵɵtextInterpolate(ctx_r1.record.Type || "Not Set");
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 254);
+    i0.ɵɵelementStart(0, "span", 265);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1616,28 +1678,28 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Cond
     i0.ɵɵtextInterpolate(ctx_r1.selectedContextCompressionPrompt.Name);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 255);
+    i0.ɵɵelementStart(0, "span", 266);
     i0.ɵɵtext(1, "No prompt selected");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 260);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r45); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
-    i0.ɵɵelement(1, "i", 261);
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 270);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
+    i0.ɵɵelement(1, "i", 271);
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    const _r44 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 252)(1, "div", 253);
-    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template, 2, 1, "span", 254)(3, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template, 2, 0, "span", 255);
+    const _r45 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 263)(1, "div", 264);
+    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_2_Template, 2, 1, "span", 265)(3, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_3_Template, 2, 0, "span", 266);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 256)(5, "button", 257);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r44); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
-    i0.ɵɵelement(6, "i", 258);
+    i0.ɵɵelementStart(4, "div", 267)(5, "button", 268);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r45); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
+    i0.ɵɵelement(6, "i", 54);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template, 2, 0, "button", 259);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Conditional_8_Template, 2, 0, "button", 269);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1649,7 +1711,7 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Cond
     i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 8 : -1);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 226);
+    i0.ɵɵelementStart(0, "span", 237);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1658,41 +1720,41 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Cond
     i0.ɵɵtextInterpolate((ctx_r1.selectedContextCompressionPrompt == null ? null : ctx_r1.selectedContextCompressionPrompt.Name) || ctx_r1.record.ContextCompressionPrompt || "Not Set");
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 219)(1, "div", 220)(2, "div", 221);
-    i0.ɵɵelement(3, "i", 248);
+    i0.ɵɵelementStart(0, "div", 230)(1, "div", 231)(2, "div", 232);
+    i0.ɵɵelement(3, "i", 259);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 223)(5, "h4");
+    i0.ɵɵelementStart(4, "div", 234)(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", 224);
-    i0.ɵɵelement(10, "mj-form-field", 249);
+    i0.ɵɵelementStart(9, "div", 235);
+    i0.ɵɵelement(10, "mj-form-field", 260);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 219)(12, "div", 220)(13, "div", 221);
-    i0.ɵɵelement(14, "i", 250);
+    i0.ɵɵelementStart(11, "div", 230)(12, "div", 231)(13, "div", 232);
+    i0.ɵɵelement(14, "i", 261);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 223)(16, "h4");
+    i0.ɵɵelementStart(15, "div", 234)(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", 224);
-    i0.ɵɵelement(21, "mj-form-field", 251);
+    i0.ɵɵelementStart(20, "div", 235);
+    i0.ɵɵelement(21, "mj-form-field", 262);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 219)(23, "div", 220)(24, "div", 221);
-    i0.ɵɵelement(25, "i", 154);
+    i0.ɵɵelementStart(22, "div", 230)(23, "div", 231)(24, "div", 232);
+    i0.ɵɵelement(25, "i", 165);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 223)(27, "h4");
+    i0.ɵɵelementStart(26, "div", 234)(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", 224);
-    i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template, 9, 3, "div", 252)(33, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template, 2, 1, "span", 226);
+    i0.ɵɵelementStart(31, "div", 235);
+    i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_32_Template, 9, 3, "div", 263)(33, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Conditional_33_Template, 2, 1, "span", 237);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1704,168 +1766,168 @@ function AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Temp
     i0.ɵɵconditional(ctx_r1.EditMode ? 32 : 33);
 } }
 function AIAgentFormComponentExtended_form_3_ng_template_37_Template(rf, ctx) { if (rf & 1) {
-    const _r41 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90)(1, "div", 93)(2, "div", 158);
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101)(1, "div", 103)(2, "div", 169);
     i0.ɵɵtext(3, " Configure agent behavior, execution settings, and advanced features. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 215)(5, "h3", 216);
-    i0.ɵɵelement(6, "i", 217);
+    i0.ɵɵelementStart(4, "div", 226)(5, "h3", 227);
+    i0.ɵɵelement(6, "i", 228);
     i0.ɵɵtext(7, " Identity & Behavior ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 218)(9, "div", 219)(10, "div", 220)(11, "div", 221);
-    i0.ɵɵelement(12, "i", 222);
+    i0.ɵɵelementStart(8, "div", 229)(9, "div", 230)(10, "div", 231)(11, "div", 232);
+    i0.ɵɵelement(12, "i", 233);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 223)(14, "h4");
+    i0.ɵɵelementStart(13, "div", 234)(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", 224);
-    i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template, 1, 3, "kendo-dropdownlist", 225)(20, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template, 2, 1, "span", 226);
+    i0.ɵɵelementStart(18, "div", 235);
+    i0.ɵɵtemplate(19, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_19_Template, 1, 3, "kendo-dropdownlist", 236)(20, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_20_Template, 2, 1, "span", 237);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 219)(22, "div", 220)(23, "div", 221);
+    i0.ɵɵelementStart(21, "div", 230)(22, "div", 231)(23, "div", 232);
     i0.ɵɵelement(24, "i", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 223)(26, "h4");
+    i0.ɵɵelementStart(25, "div", 234)(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", 224);
-    i0.ɵɵtemplate(31, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template, 1, 3, "kendo-dropdownlist", 227)(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template, 2, 1, "span", 226);
+    i0.ɵɵelementStart(30, "div", 235);
+    i0.ɵɵtemplate(31, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_31_Template, 1, 3, "kendo-dropdownlist", 238)(32, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_32_Template, 2, 1, "span", 237);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 219)(34, "div", 220)(35, "div", 221);
-    i0.ɵɵelement(36, "i", 89);
+    i0.ɵɵelementStart(33, "div", 230)(34, "div", 231)(35, "div", 232);
+    i0.ɵɵelement(36, "i", 100);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "div", 223)(38, "h4");
+    i0.ɵɵelementStart(37, "div", 234)(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", 224);
-    i0.ɵɵelement(43, "mj-form-field", 228);
+    i0.ɵɵelementStart(42, "div", 235);
+    i0.ɵɵelement(43, "mj-form-field", 239);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 229)(45, "div", 220)(46, "div", 221);
-    i0.ɵɵelement(47, "i", 230);
+    i0.ɵɵelementStart(44, "div", 240)(45, "div", 231)(46, "div", 232);
+    i0.ɵɵelement(47, "i", 241);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(48, "div", 223)(49, "h4");
+    i0.ɵɵelementStart(48, "div", 234)(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", 224);
-    i0.ɵɵelement(54, "mj-form-field", 231);
+    i0.ɵɵelementStart(53, "div", 235);
+    i0.ɵɵelement(54, "mj-form-field", 242);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(55, "div", 215)(56, "h3", 216);
+    i0.ɵɵelementStart(55, "div", 226)(56, "h3", 227);
     i0.ɵɵelement(57, "i", 37);
     i0.ɵɵtext(58, " Execution Settings ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(59, "div", 218)(60, "div", 219)(61, "div", 220)(62, "div", 221);
-    i0.ɵɵelement(63, "i", 120);
+    i0.ɵɵelementStart(59, "div", 229)(60, "div", 230)(61, "div", 231)(62, "div", 232);
+    i0.ɵɵelement(63, "i", 131);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "div", 223)(65, "h4");
+    i0.ɵɵelementStart(64, "div", 234)(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", 224);
-    i0.ɵɵelement(70, "mj-form-field", 232);
+    i0.ɵɵelementStart(69, "div", 235);
+    i0.ɵɵelement(70, "mj-form-field", 243);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(71, "div", 219)(72, "div", 220)(73, "div", 221);
-    i0.ɵɵelement(74, "i", 233);
+    i0.ɵɵelementStart(71, "div", 230)(72, "div", 231)(73, "div", 232);
+    i0.ɵɵelement(74, "i", 244);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(75, "div", 223)(76, "h4");
+    i0.ɵɵelementStart(75, "div", 234)(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", 224);
-    i0.ɵɵelement(81, "mj-form-field", 234);
+    i0.ɵɵelementStart(80, "div", 235);
+    i0.ɵɵelement(81, "mj-form-field", 245);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(82, "div", 219)(83, "div", 220)(84, "div", 221);
-    i0.ɵɵelement(85, "i", 235);
+    i0.ɵɵelementStart(82, "div", 230)(83, "div", 231)(84, "div", 232);
+    i0.ɵɵelement(85, "i", 246);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(86, "div", 223)(87, "h4");
+    i0.ɵɵelementStart(86, "div", 234)(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", 224);
-    i0.ɵɵelement(92, "mj-form-field", 236);
-    i0.ɵɵelementStart(93, "div", 237);
-    i0.ɵɵelement(94, "i", 187);
+    i0.ɵɵelementStart(91, "div", 235);
+    i0.ɵɵelement(92, "mj-form-field", 247);
+    i0.ɵɵelementStart(93, "div", 248);
+    i0.ɵɵelement(94, "i", 198);
     i0.ɵɵtext(95, " Higher values request more thorough reasoning (1=minimal, 100=maximum) ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(96, "div", 219)(97, "div", 220)(98, "div", 221);
-    i0.ɵɵelement(99, "i", 204);
+    i0.ɵɵelementStart(96, "div", 230)(97, "div", 231)(98, "div", 232);
+    i0.ɵɵelement(99, "i", 215);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(100, "div", 223)(101, "h4");
+    i0.ɵɵelementStart(100, "div", 234)(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", 224);
-    i0.ɵɵelement(106, "mj-form-field", 238);
+    i0.ɵɵelementStart(105, "div", 235);
+    i0.ɵɵelement(106, "mj-form-field", 249);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(107, "div", 215)(108, "h3", 216);
-    i0.ɵɵelement(109, "i", 239);
+    i0.ɵɵelementStart(107, "div", 226)(108, "h3", 227);
+    i0.ɵɵelement(109, "i", 250);
     i0.ɵɵtext(110, " Visual Identity ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(111, "div", 218)(112, "div", 219)(113, "div", 220)(114, "div", 221);
-    i0.ɵɵelement(115, "i", 240);
+    i0.ɵɵelementStart(111, "div", 229)(112, "div", 230)(113, "div", 231)(114, "div", 232);
+    i0.ɵɵelement(115, "i", 251);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(116, "div", 223)(117, "h4");
+    i0.ɵɵelementStart(116, "div", 234)(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", 224);
-    i0.ɵɵelement(122, "mj-form-field", 241);
-    i0.ɵɵelementStart(123, "div", 237);
-    i0.ɵɵelement(124, "i", 187);
+    i0.ɵɵelementStart(121, "div", 235);
+    i0.ɵɵelement(122, "mj-form-field", 252);
+    i0.ɵɵelementStart(123, "div", 248);
+    i0.ɵɵelement(124, "i", 198);
     i0.ɵɵtext(125, " Example: ");
     i0.ɵɵelementStart(126, "code");
     i0.ɵɵtext(127, "fa-solid fa-robot");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(128, "div", 219)(129, "div", 220)(130, "div", 221);
-    i0.ɵɵelement(131, "i", 242);
+    i0.ɵɵelementStart(128, "div", 230)(129, "div", 231)(130, "div", 232);
+    i0.ɵɵelement(131, "i", 253);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(132, "div", 223)(133, "h4");
+    i0.ɵɵelementStart(132, "div", 234)(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", 224);
-    i0.ɵɵelement(138, "mj-form-field", 243);
-    i0.ɵɵelementStart(139, "div", 237);
-    i0.ɵɵelement(140, "i", 187);
+    i0.ɵɵelementStart(137, "div", 235);
+    i0.ɵɵelement(138, "mj-form-field", 254);
+    i0.ɵɵelementStart(139, "div", 248);
+    i0.ɵɵelement(140, "i", 198);
     i0.ɵɵtext(141, " Takes precedence over Icon Class ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(142, "div", 215)(143, "h3", 216);
-    i0.ɵɵelement(144, "i", 244);
+    i0.ɵɵelementStart(142, "div", 226)(143, "h3", 227);
+    i0.ɵɵelement(144, "i", 255);
     i0.ɵɵtext(145, " Context Compression ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(146, "div", 218)(147, "div", 229)(148, "div", 220)(149, "div", 221);
-    i0.ɵɵelement(150, "i", 222);
+    i0.ɵɵelementStart(146, "div", 229)(147, "div", 240)(148, "div", 231)(149, "div", 232);
+    i0.ɵɵelement(150, "i", 233);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(151, "div", 223)(152, "h4");
+    i0.ɵɵelementStart(151, "div", 234)(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", 224)(157, "mj-form-field", 245);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Template_mj_form_field_valueChange_157_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
+    i0.ɵɵelementStart(156, "div", 235)(157, "mj-form-field", 256);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_3_ng_template_37_Template_mj_form_field_valueChange_157_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
     i0.ɵɵelementEnd()()();
     i0.ɵɵtemplate(158, AIAgentFormComponentExtended_form_3_ng_template_37_Conditional_158_Template, 34, 5);
     i0.ɵɵelementEnd()()();
@@ -2303,6 +2365,15 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         this.totalExecutionHistoryCount = 0;
         /** Track which execution cards are expanded */
         this.expandedExecutions = {};
+        /** Search functionality for execution history */
+        this.executionSearchText = '';
+        this.filteredExecutions = [];
+        /** Pagination state for execution history */
+        this.executionHistoryPageSize = 20;
+        this.executionHistoryCurrentPage = 1;
+        this.isLoadingPage = false;
+        /** Cache all loaded execution records for pagination */
+        this.allLoadedExecutions = [];
         // === Loading States ===
         /** Main loading state for initial data load */
         this.isLoadingData = true;
@@ -2349,6 +2420,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
          */
         this._runningTimeCache = new Map();
         this._runningTimeUpdater = null;
+        this._searchDebounceTimer = null;
         /** Flag to track if we're currently performing a cancel operation */
         this.isPerformingCancel = false;
     }
@@ -2387,6 +2459,13 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
     async loadRelatedCounts(forceRefresh) {
         if (!this.record?.ID)
             return;
+        // Reset pagination state on refresh
+        if (forceRefresh) {
+            this.executionHistoryCurrentPage = 1;
+            this.isLoadingPage = false;
+            this.allLoadedExecutions = [];
+            // Don't clear recentExecutions - keep existing data visible while loading
+        }
         // Set loading state
         this.isLoadingData = true;
         this.loadingStates = {
@@ -2465,16 +2544,17 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                     Fields: ["ID", "Name", "AgentID", "AgentNoteType", "AgentNoteTypeID", "UserID"],
                     ExtraFilter: `AgentID='${this.record.ID}'`
                 },
-                // Execution history
+                // Execution history (initial page)
                 {
                     EntityName: 'MJ: AI Agent Runs',
                     Fields: [
                         "ID", "AgentID", "ParentRunID", "Status", "StartedAt", "CompletedAt",
-                        "Success", "TotalTokensUsed", "TotalCost", "TotalCostRollUp", "TotalTokensUsedRollUp"
+                        "Success", "TotalTokensUsed", "TotalCost", "TotalCostRollUp", "TotalTokensUsedRollUp",
+                        "Configuration", "ConversationID", "Result", "ErrorMessage", "__mj_CreatedAt"
                     ],
                     ExtraFilter: `AgentID='${this.record.ID}'`,
                     OrderBy: '__mj_CreatedAt DESC',
-                    MaxRows: 100
+                    MaxRows: this.executionHistoryPageSize
                 }
             ]);
             // Process results in the same order as queries
@@ -2483,6 +2563,10 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 this.agentNotes = results[1].Results || [];
                 this.recentExecutions = results[2].Results || [];
                 this.totalExecutionHistoryCount = results[2].TotalRowCount;
+                // Initialize cache with first page of results
+                this.allLoadedExecutions = [...this.recentExecutions];
+                // Initialize filtered executions
+                this.filteredExecutions = [...this.recentExecutions];
             }
             // Create snapshot for cancel/revert functionality
             this.createOriginalSnapshot();
@@ -2522,6 +2606,106 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             executionHistoryCount: this.executionHistoryCount
         };
     }
+    /**
+     * Navigates to the next page of execution history
+     */
+    async goToNextPage() {
+        if (!this.hasNextPage || this.isLoadingPage || !this.record?.ID) {
+            return;
+        }
+        const nextPage = this.executionHistoryCurrentPage + 1;
+        await this.loadPage(nextPage);
+    }
+    /**
+     * Navigates to the previous page of execution history
+     */
+    async goToPreviousPage() {
+        if (!this.hasPreviousPage || this.isLoadingPage) {
+            return;
+        }
+        const previousPage = this.executionHistoryCurrentPage - 1;
+        await this.loadPage(previousPage);
+    }
+    /**
+     * Loads a specific page of execution history, using cache when available
+     */
+    async loadPage(pageNumber) {
+        if (!this.record?.ID) {
+            return;
+        }
+        this.isLoadingPage = true;
+        this.cdr.detectChanges();
+        try {
+            const startIndex = (pageNumber - 1) * this.executionHistoryPageSize;
+            const endIndex = startIndex + this.executionHistoryPageSize;
+            // Check if we have this page in cache
+            const cachedPageData = this.allLoadedExecutions.slice(startIndex, endIndex);
+            const hasFullPageInCache = cachedPageData.length === this.executionHistoryPageSize;
+            const isLastPage = endIndex >= this.totalExecutionHistoryCount;
+            const hasPartialPageInCache = isLastPage && cachedPageData.length > 0 &&
+                cachedPageData.length === (this.totalExecutionHistoryCount - startIndex);
+            if (hasFullPageInCache || hasPartialPageInCache) {
+                // We have the page in cache (either full page or complete last page)
+                this.executionHistoryCurrentPage = pageNumber;
+                this.recentExecutions = cachedPageData;
+                await this.applySearchFilter();
+            }
+            else {
+                // Need to load from database
+                const rv = new RunView();
+                const result = await rv.RunView({
+                    EntityName: 'MJ: AI Agent Runs',
+                    Fields: [
+                        "ID", "AgentID", "ParentRunID", "Status", "StartedAt", "CompletedAt",
+                        "Success", "TotalTokensUsed", "TotalCost", "TotalCostRollUp", "TotalTokensUsedRollUp",
+                        "Configuration", "ConversationID", "Result", "ErrorMessage", "__mj_CreatedAt"
+                    ],
+                    ExtraFilter: `AgentID='${this.record.ID}'`,
+                    OrderBy: '__mj_CreatedAt DESC',
+                    MaxRows: this.executionHistoryPageSize,
+                    StartRow: startIndex > 0 ? startIndex : undefined,
+                    ResultType: 'entity_object'
+                });
+                if (result.Success && result.Results) {
+                    // Update cache - ensure we have enough space
+                    while (this.allLoadedExecutions.length < startIndex) {
+                        this.allLoadedExecutions.push(null);
+                    }
+                    // Insert the new results into cache
+                    this.allLoadedExecutions.splice(startIndex, result.Results.length, ...result.Results);
+                    this.executionHistoryCurrentPage = pageNumber;
+                    this.recentExecutions = result.Results;
+                    await this.applySearchFilter();
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error loading page:', error);
+        }
+        finally {
+            this.isLoadingPage = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Checks if there is a next page available
+     */
+    get hasNextPage() {
+        const maxPage = Math.ceil(this.totalExecutionHistoryCount / this.executionHistoryPageSize);
+        return this.executionHistoryCurrentPage < maxPage;
+    }
+    /**
+     * Checks if there is a previous page available
+     */
+    get hasPreviousPage() {
+        return this.executionHistoryCurrentPage > 1;
+    }
+    /**
+     * Gets the total number of pages
+     */
+    get totalPages() {
+        return Math.ceil(this.totalExecutionHistoryCount / this.executionHistoryPageSize);
+    }
     /**
      * Loads the agent type entity for this agent
      * @private
@@ -3166,6 +3350,72 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
     toggleExecutionExpanded(executionId) {
         this.expandedExecutions[executionId] = !this.expandedExecutions[executionId];
     }
+    /**
+     * Handles search text changes - debounced to avoid excessive processing
+     */
+    onExecutionSearchChange() {
+        // Debounce search to avoid excessive processing during typing
+        if (this._searchDebounceTimer) {
+            clearTimeout(this._searchDebounceTimer);
+        }
+        this._searchDebounceTimer = setTimeout(() => {
+            this.applySearchFilter();
+        }, 300);
+    }
+    /**
+     * Applies search filter across all cached records and loads from database if needed
+     */
+    async applySearchFilter() {
+        if (!this.executionSearchText || this.executionSearchText.trim() === '') {
+            // No search text - show current page's executions
+            this.filteredExecutions = [...this.recentExecutions];
+            return;
+        }
+        const searchLower = this.executionSearchText.toLowerCase().trim();
+        // First, search across all cached records
+        const cachedMatches = this.allLoadedExecutions.filter(execution => execution && execution.ID.toLowerCase().includes(searchLower));
+        if (cachedMatches.length > 0) {
+            // Found matches in cache
+            this.filteredExecutions = cachedMatches;
+        }
+        else {
+            // No matches in cache - search database
+            await this.searchExecutionsFromDatabase(searchLower);
+        }
+    }
+    /**
+     * Searches execution history from database when not found in cache
+     */
+    async searchExecutionsFromDatabase(searchText) {
+        if (!this.record?.ID) {
+            return;
+        }
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: AI Agent Runs',
+                Fields: [
+                    "ID", "AgentID", "ParentRunID", "Status", "StartedAt", "CompletedAt",
+                    "Success", "TotalTokensUsed", "TotalCost", "TotalCostRollUp", "TotalTokensUsedRollUp",
+                    "Configuration", "ConversationID", "Result", "ErrorMessage", "__mj_CreatedAt"
+                ],
+                ExtraFilter: `AgentID='${this.record.ID}' AND ID LIKE '%${searchText}%'`,
+                OrderBy: '__mj_CreatedAt DESC',
+                MaxRows: 100, // Limit search results
+                ResultType: 'entity_object'
+            });
+            if (result.Success && result.Results) {
+                this.filteredExecutions = result.Results;
+            }
+            else {
+                this.filteredExecutions = [];
+            }
+        }
+        catch (error) {
+            console.error('Error searching executions:', error);
+            this.filteredExecutions = [];
+        }
+    }
     /**
      * Opens the full execution record in a new view
      */
@@ -4022,6 +4272,11 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         this.recentExecutions.length = 0;
         this.learningCycles.length = 0;
         this.agentNotes.length = 0;
+        // Reset pagination state
+        this.executionHistoryCurrentPage = 1;
+        this.totalExecutionHistoryCount = 0;
+        this.isLoadingPage = false;
+        this.allLoadedExecutions = [];
         // Clear maps and objects
         this._permissionCache.clear();
         this._runningTimeCache.clear();
@@ -4041,7 +4296,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customSectionContainer = _t.first);
-        } }, 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", "clickable", 3, "title"], [1, "agent-actions"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], [3, "expanded", "disabled"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "parent-agent", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-external-link", 2, "margin-left", "4px", "font-size", "10px"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], ["kendoButton", "", "size", "large", "title", "Manage permissions", 3, "click"], [1, "fa-solid", "fa-lock"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [2, "margin-left", "8px"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "12px"], [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, "loading-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [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-header", "sub-agent-filter-header"], [1, "filter-controls"], ["selection", "single"], ["kendoButton", "", "size", "small", 3, "click", "toggleable", "selected"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-share-nodes"], ["kendoButton", "", "themeColor", "primary", "size", "small", "title", "Create a new child sub-agent that shares this agent's payload", 3, "click"], ["kendoButton", "", "themeColor", "secondary", "size", "small", "title", "Link an existing agent as a related sub-agent with payload mapping", 3, "click"], [1, "empty-state-info"], [1, "info-card"], [1, "fa-solid", "fa-link", 2, "color", "#2196F3"], [1, "fa-solid", "fa-share-nodes", 2, "color", "#9C27B0"], [1, "empty-state-actions"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item", 3, "child-sub-agent", "related-sub-agent"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-type-badge"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "meta-tag", "payload-info"], [1, "fa-solid", "fa-database"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Configure output mapping"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", 3, "title"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Configure output mapping", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", 3, "click", "title"], [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, "section-description"], [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, "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"], ["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", "clickable", 3, "title"], [1, "agent-actions"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "keepItemContent"], [3, "expanded"], [3, "expanded", "disabled"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "parent-agent", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-external-link", 2, "margin-left", "4px", "font-size", "10px"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], ["kendoButton", "", "size", "large", "title", "Manage permissions", 3, "click"], [1, "fa-solid", "fa-lock"], [3, "stateChange", "expanded"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "custom-agent-type-section"], [1, "fa-solid", "fa-history"], [2, "margin-left", "8px"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "12px"], [1, "panel-content", "execution-history-panel"], [1, "empty-state"], [1, "execution-search-bar"], ["placeholder", "Search by Run ID...", 3, "ngModelChange", "ngModel", "ngModelOptions", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "pagination-controls"], [1, "fa-solid", "fa-search"], [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"], ["kendoButton", "", "fillMode", "outline", "size", "medium", 1, "page-nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "page-info"], [1, "record-count"], [1, "fa-solid", "fa-chevron-right"], ["kendoButton", "", "fillMode", "flat", "size", "small", 1, "view-all-btn", 3, "click"], [1, "fa-solid", "fa-external-link"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "loading-state"], [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, "view-more-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"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "section-header", "sub-agent-filter-header"], [1, "filter-controls"], ["selection", "single"], ["kendoButton", "", "size", "small", 3, "click", "toggleable", "selected"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-share-nodes"], ["kendoButton", "", "themeColor", "primary", "size", "small", "title", "Create a new child sub-agent that shares this agent's payload", 3, "click"], ["kendoButton", "", "themeColor", "secondary", "size", "small", "title", "Link an existing agent as a related sub-agent with payload mapping", 3, "click"], [1, "empty-state-info"], [1, "info-card"], [1, "fa-solid", "fa-link", 2, "color", "#2196F3"], [1, "fa-solid", "fa-share-nodes", 2, "color", "#9C27B0"], [1, "empty-state-actions"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item", 3, "child-sub-agent", "related-sub-agent"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-type-badge"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "meta-tag", "payload-info"], [1, "fa-solid", "fa-database"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Configure output mapping"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", 3, "title"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Configure output mapping", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", 3, "click", "title"], [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, "section-description"], [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, "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"], ["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"], ["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)(2, "div", 4);
             i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_3_Template, 38, 18, "form", 5);
@@ -4049,7 +4304,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         } if (rf & 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, i3.WindowContainerDirective, i9.TextBoxComponent, i10.DropDownListComponent, i11.ButtonGroupComponent, 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.parent-agent.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.parent-agent.clickable[_ngcontent-%COMP%]:hover {\n    background: #e3e7ed;\n    color: #2196f3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.parent-agent.clickable[_ngcontent-%COMP%]:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.1);\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\n\n.loading-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #64748b;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: #2196f3;\n    margin-bottom: 16px;\n    display: block;\n}\n\n.loading-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    color: #94a3b8;\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}\n\n\n\n\n\n\n\n\n.sub-agent-filter-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.filter-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.filter-controls[_ngcontent-%COMP%]   kendo-buttongroup[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n}\n\n\n\n.sub-agent-type-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    z-index: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n\n\n.sub-agent-item[_ngcontent-%COMP%] {\n    position: relative;\n    padding-left: 8px;\n    transition: all 0.2s ease;\n}\n\n.sub-agent-item.child-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid #2196F3;\n}\n\n.sub-agent-item.related-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid #9C27B0;\n}\n\n.sub-agent-item[_ngcontent-%COMP%]:hover {\n    transform: translateX(4px);\n}\n\n\n\n.payload-info[_ngcontent-%COMP%] {\n    background: #f5f5f5;\n    color: #666;\n    font-family: 'Roboto Mono', monospace;\n    font-size: 11px;\n}\n\n\n\n.empty-state-info[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin: 24px 0;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.info-card[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.info-card[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 14px;\n}\n\n.info-card[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 12px;\n    color: #666;\n}\n\n.empty-state-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 16px;\n}\n\n\n\n@media (max-width: 768px) {\n    .sub-agent-filter-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .filter-controls[_ngcontent-%COMP%], \n   .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .empty-state-info[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\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, i9.TextBoxPrefixTemplateDirective, i10.DropDownListComponent, i11.ButtonGroupComponent, 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.parent-agent.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.parent-agent.clickable[_ngcontent-%COMP%]:hover {\n    background: #e3e7ed;\n    color: #2196f3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.parent-agent.clickable[_ngcontent-%COMP%]:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.1);\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\n\n.loading-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #64748b;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: #2196f3;\n    margin-bottom: 16px;\n    display: block;\n}\n\n.loading-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    color: #94a3b8;\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.pagination-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    margin-top: 12px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    border: 1px solid #dee2e6;\n}\n\n.page-nav-btn[_ngcontent-%COMP%] {\n    min-width: 120px;\n    font-weight: 500;\n}\n\n.page-nav-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.page-nav-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 0 16px;\n    font-weight: 500;\n    color: #495057;\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info[_ngcontent-%COMP%]   .record-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    font-weight: normal;\n}\n\n.page-info[_ngcontent-%COMP%]   .fa-spinner[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: #2196f3;\n}\n\n.view-all-btn[_ngcontent-%COMP%] {\n    color: #6c757d;\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn[_ngcontent-%COMP%]:hover {\n    color: #2196f3;\n}\n\n.view-all-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 4px;\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-search-bar[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    padding: 0 4px;\n}\n\n.execution-search-bar[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.execution-search-bar[_ngcontent-%COMP%]   .fa-search[_ngcontent-%COMP%] {\n    color: #666;\n    margin-right: 8px;\n    font-size: 14px;\n}\n\n\n\n.execution-history-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 8px;\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}\n\n\n\n\n\n\n\n\n.sub-agent-filter-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.filter-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.filter-controls[_ngcontent-%COMP%]   kendo-buttongroup[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n}\n\n\n\n.sub-agent-type-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    z-index: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n\n\n.sub-agent-item[_ngcontent-%COMP%] {\n    position: relative;\n    padding-left: 8px;\n    transition: all 0.2s ease;\n}\n\n.sub-agent-item.child-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid #2196F3;\n}\n\n.sub-agent-item.related-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid #9C27B0;\n}\n\n.sub-agent-item[_ngcontent-%COMP%]:hover {\n    transform: translateX(4px);\n}\n\n\n\n.payload-info[_ngcontent-%COMP%] {\n    background: #f5f5f5;\n    color: #666;\n    font-family: 'Roboto Mono', monospace;\n    font-size: 11px;\n}\n\n\n\n.empty-state-info[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin: 24px 0;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.info-card[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.info-card[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 14px;\n}\n\n.info-card[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 12px;\n    color: #666;\n}\n\n.empty-state-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 16px;\n}\n\n\n\n@media (max-width: 768px) {\n    .sub-agent-filter-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .filter-controls[_ngcontent-%COMP%], \n   .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .empty-state-info[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"] }); }
 };
 AIAgentFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'AI Agents')
@@ -4057,7 +4312,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    <!-- 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 clickable\"\n                                      (click)=\"navigateToParentAgent()\"\n                                      title=\"Open parent agent: {{ record.Parent }}\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                    <i class=\"fa-solid fa-external-link\" style=\"margin-left: 4px; font-size: 10px;\"></i>\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                        <button kendoButton size=\"large\" \n                                (click)=\"openPermissionsDialog()\" \n                                title=\"Manage permissions\"\n                                >\n                            <i class=\"fa-solid fa-lock\"></i>\n                            Permissions\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\" [disabled]=\"loadingStates.executionHistory\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-history\"></i> Execution History\n                            @if (loadingStates.executionHistory) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (executionHistoryCount > 0) {\n                                <span> ({{ executionHistoryCount }})@if(executionHistoryCount < totalExecutionHistoryCount){ of {{ totalExecutionHistoryCount }} }</span>\n                            }\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\">{{ execution.StartedAt | runningTime }}</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\" [disabled]=\"loadingStates.actions\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions\n                            @if (loadingStates.actions) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (actionCount > 0) {\n                                <span> ({{ actionCount }})</span>\n                            }\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                @if (loadingStates.actions) {\n                                    <div class=\"loading-state\">\n                                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                        <p>Loading actions...</p>\n                                    </div>\n                                } @else {\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                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents (Unified View with Filter) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.subAgents\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents\n                            @if (loadingStates.subAgents) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (totalSubAgentCount > 0) {\n                                <span> ({{ totalSubAgentCount }})</span>\n                            }\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n\n                                <!-- Filter Controls -->\n                                <div class=\"section-header sub-agent-filter-header\">\n                                    <div class=\"filter-controls\">\n                                        <kendo-buttongroup selection=\"single\">\n                                            <button kendoButton\n                                                [toggleable]=\"true\"\n                                                [selected]=\"subAgentFilter === 'all'\"\n                                                (click)=\"setSubAgentFilter('all')\"\n                                                size=\"small\">\n                                                <i class=\"fa-solid fa-layer-group\"></i>\n                                                All ({{ totalSubAgentCount }})\n                                            </button>\n                                            <button kendoButton\n                                                [toggleable]=\"true\"\n                                                [selected]=\"subAgentFilter === 'child'\"\n                                                (click)=\"setSubAgentFilter('child')\"\n                                                size=\"small\">\n                                                <i class=\"fa-solid fa-link\"></i>\n                                                Child ({{ childSubAgentCount }})\n                                            </button>\n                                            <button kendoButton\n                                                [toggleable]=\"true\"\n                                                [selected]=\"subAgentFilter === 'related'\"\n                                                (click)=\"setSubAgentFilter('related')\"\n                                                size=\"small\">\n                                                <i class=\"fa-solid fa-share-nodes\"></i>\n                                                Related ({{ relatedSubAgentCount }})\n                                            </button>\n                                        </kendo-buttongroup>\n                                    </div>\n\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton\n                                                themeColor=\"primary\"\n                                                size=\"small\"\n                                                (click)=\"createChildSubAgent()\"\n                                                title=\"Create a new child sub-agent that shares this agent's payload\">\n                                                <i class=\"fa-solid fa-plus\"></i>\n                                                <i class=\"fa-solid fa-link\"></i>\n                                                Create Child\n                                            </button>\n                                            <button kendoButton\n                                                themeColor=\"secondary\"\n                                                size=\"small\"\n                                                (click)=\"linkRelatedSubAgent()\"\n                                                title=\"Link an existing agent as a related sub-agent with payload mapping\">\n                                                <i class=\"fa-solid fa-plus\"></i>\n                                                <i class=\"fa-solid fa-share-nodes\"></i>\n                                                Link Related\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n\n                                <!-- Empty State -->\n                                @if (totalSubAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Sub-agents help build complex workflows through hierarchical orchestration.</p>\n                                        <div class=\"empty-state-info\">\n                                            <div class=\"info-card\">\n                                                <i class=\"fa-solid fa-link\" style=\"color: #2196F3;\"></i>\n                                                <strong>Child Sub-Agents</strong>\n                                                <p>Share payload structure, dedicated to parent</p>\n                                            </div>\n                                            <div class=\"info-card\">\n                                                <i class=\"fa-solid fa-share-nodes\" style=\"color: #9C27B0;\"></i>\n                                                <strong>Related Sub-Agents</strong>\n                                                <p>Reusable agents with payload mapping</p>\n                                            </div>\n                                        </div>\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <div class=\"empty-state-actions\">\n                                                <button kendoButton themeColor=\"primary\" (click)=\"createChildSubAgent()\">\n                                                    <i class=\"fa-solid fa-plus\"></i> Create Child Sub-Agent\n                                                </button>\n                                                <button kendoButton themeColor=\"secondary\" (click)=\"linkRelatedSubAgent()\">\n                                                    <i class=\"fa-solid fa-plus\"></i> Link Related Sub-Agent\n                                                </button>\n                                            </div>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Unified Sub-Agent List -->\n                                    <div class=\"entity-list\">\n                                        @for (item of filteredSubAgents; track item.agent.ID) {\n                                            <div class=\"entity-item sub-agent-item\"\n                                                 [class.child-sub-agent]=\"item.type === 'child'\"\n                                                 [class.related-sub-agent]=\"item.type === 'related'\"\n                                                 (click)=\"navigateToEntity('AI Agents', item.agent.ID)\">\n\n                                                <!-- Type Badge -->\n                                                <div class=\"sub-agent-type-badge\"\n                                                     [style.background-color]=\"getSubAgentBadgeColor(item)\">\n                                                    <i [class]=\"getSubAgentBadgeIcon(item)\"></i>\n                                                    {{ getSubAgentBadgeText(item) }}\n                                                </div>\n\n                                                <!-- Agent Icon -->\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(item.agent)) {\n                                                        <img [src]=\"item.agent.LogoURL\"\n                                                             [alt]=\"item.agent.Name + ' logo'\"\n                                                             class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(item.agent)\"></i>\n                                                    }\n                                                </div>\n\n                                                <!-- Agent Content -->\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ item.agent.Name || 'Untitled Sub-Agent' }}</div>\n\n                                                    @if (item.agent.Description) {\n                                                        <div class=\"item-preview\">{{ item.agent.Description }}</div>\n                                                    }\n\n                                                    <div class=\"item-meta\">\n                                                        <!-- Payload Info -->\n                                                        <span class=\"meta-tag payload-info\">\n                                                            <i class=\"fa-solid fa-database\"></i>\n                                                            {{ getSubAgentPayloadInfo(item) }}\n                                                        </span>\n\n                                                        <!-- Status -->\n                                                        @if (item.agent.Status) {\n                                                            <span class=\"status-tag\"\n                                                                  [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ item.agent.Status }}\n                                                            </span>\n                                                        }\n\n                                                        <!-- Agent Type -->\n                                                        @if (item.agent.Type) {\n                                                            <span class=\"meta-tag\">{{ item.agent.Type }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n\n                                                <!-- Actions -->\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <!-- Output Mapping Config (Related only) -->\n                                                        @if (item.type === 'related') {\n                                                            <button kendoButton\n                                                                fillMode=\"flat\"\n                                                                themeColor=\"primary\"\n                                                                size=\"small\"\n                                                                (click)=\"configureOutputMapping(item, $event)\"\n                                                                title=\"Configure output mapping\">\n                                                                <i class=\"fa-solid fa-exchange-alt\"></i>\n                                                            </button>\n                                                        }\n\n                                                        <!-- Advanced Settings (Child only) -->\n                                                        @if (item.type === 'child' && UserCanCreateSubAgents) {\n                                                            <button kendoButton\n                                                                fillMode=\"flat\"\n                                                                themeColor=\"primary\"\n                                                                size=\"small\"\n                                                                (click)=\"openSubAgentAdvancedSettings(item.agent, $event)\"\n                                                                title=\"Advanced settings\">\n                                                                <i class=\"fa-solid fa-cog\"></i>\n                                                            </button>\n                                                        }\n\n                                                        <!-- Remove/Unlink -->\n                                                        @if (UserCanDeleteSubAgents) {\n                                                            <button kendoButton\n                                                                fillMode=\"flat\"\n                                                                themeColor=\"error\"\n                                                                size=\"small\"\n                                                                (click)=\"item.type === 'child' ? removeChildSubAgent(item, $event) : unlinkRelatedSubAgent(item, $event)\"\n                                                                [title]=\"item.type === 'child' ? 'Delete child sub-agent' : 'Unlink related sub-agent'\">\n                                                                <i [class]=\"item.type === 'child' ? 'fa-solid fa-trash' : 'fa-solid fa-unlink'\"></i>\n                                                            </button>\n                                                        }\n                                                    }\n\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\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\" [disabled]=\"loadingStates.prompts\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts\n                            @if (loadingStates.prompts) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (promptCount > 0) {\n                                <span> ({{ promptCount }})</span>\n                            }\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\" [disabled]=\"loadingStates.learningCycles\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                            @if (loadingStates.learningCycles) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            }\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\" [disabled]=\"loadingStates.notes\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                            @if (loadingStates.notes) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            }\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.parent-agent.clickable {\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.parent-agent.clickable:hover {\n    background: #e3e7ed;\n    color: #2196f3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.parent-agent.clickable:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.1);\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/* Loading State */\n.loading-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #64748b;\n}\n\n.loading-state i {\n    font-size: 36px;\n    color: #2196f3;\n    margin-bottom: 16px;\n    display: block;\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 14px;\n    color: #94a3b8;\n}\n\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/* ===================================\n   Unified Sub-Agents with Filtering\n   =================================== */\n\n/* Filter Controls */\n.sub-agent-filter-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.filter-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.filter-controls kendo-buttongroup {\n    flex: 0 0 auto;\n}\n\n/* Sub-Agent Type Badge */\n.sub-agent-type-badge {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    z-index: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n/* Sub-Agent Item Styling */\n.sub-agent-item {\n    position: relative;\n    padding-left: 8px;\n    transition: all 0.2s ease;\n}\n\n.sub-agent-item.child-sub-agent {\n    border-left: 4px solid #2196F3;\n}\n\n.sub-agent-item.related-sub-agent {\n    border-left: 4px solid #9C27B0;\n}\n\n.sub-agent-item:hover {\n    transform: translateX(4px);\n}\n\n/* Payload Info Tag */\n.payload-info {\n    background: #f5f5f5;\n    color: #666;\n    font-family: 'Roboto Mono', monospace;\n    font-size: 11px;\n}\n\n/* Empty State Info Cards */\n.empty-state-info {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin: 24px 0;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.info-card {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.info-card i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.info-card strong {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 14px;\n}\n\n.info-card p {\n    margin: 0;\n    font-size: 12px;\n    color: #666;\n}\n\n.empty-state-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 16px;\n}\n\n/* Responsive adjustments for sub-agent filters */\n@media (max-width: 768px) {\n    .sub-agent-filter-header {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .filter-controls,\n    .header-actions {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .empty-state-info {\n        grid-template-columns: 1fr;\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 clickable\"\n                                      (click)=\"navigateToParentAgent()\"\n                                      title=\"Open parent agent: {{ record.Parent }}\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                    <i class=\"fa-solid fa-external-link\" style=\"margin-left: 4px; font-size: 10px;\"></i>\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                        <button kendoButton size=\"large\" \n                                (click)=\"openPermissionsDialog()\" \n                                title=\"Manage permissions\"\n                                >\n                            <i class=\"fa-solid fa-lock\"></i>\n                            Permissions\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\" [disabled]=\"loadingStates.executionHistory\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-history\"></i> Execution History\n                            @if (loadingStates.executionHistory) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (executionHistoryCount > 0) {\n                                <span> ({{ executionHistoryCount }})@if(executionHistoryCount < totalExecutionHistoryCount){ of {{ totalExecutionHistoryCount }} }</span>\n                            }\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                                    <!-- Search Bar -->\n                                    <div class=\"execution-search-bar\">\n                                        <kendo-textbox\n                                            [(ngModel)]=\"executionSearchText\"\n                                            (ngModelChange)=\"onExecutionSearchChange()\"\n                                            [ngModelOptions]=\"{standalone: true}\"\n                                            placeholder=\"Search by Run ID...\"\n                                            [clearButton]=\"true\">\n                                            <ng-template kendoTextBoxPrefixTemplate>\n                                                <i class=\"fa-solid fa-search\"></i>\n                                            </ng-template>\n                                        </kendo-textbox>\n                                    </div>\n\n                                    <div class=\"execution-history-list\">\n                                        @if (filteredExecutions.length === 0) {\n                                            <div class=\"empty-state\">\n                                                <i class=\"fa-solid fa-search\"></i>\n                                                <h4>No Matching Results</h4>\n                                                <p>No execution history found matching \"{{ executionSearchText }}\"</p>\n                                            </div>\n                                        }\n                                        @for (execution of filteredExecutions; 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\">{{ execution.StartedAt | runningTime }}</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\n                                        <!-- Pagination Controls -->\n                                        @if (totalPages > 1) {\n                                            <div class=\"pagination-controls\">\n                                                <button kendoButton\n                                                        fillMode=\"outline\"\n                                                        size=\"medium\"\n                                                        (click)=\"goToPreviousPage()\"\n                                                        [disabled]=\"!hasPreviousPage || isLoadingPage\"\n                                                        class=\"page-nav-btn\">\n                                                    <i class=\"fa-solid fa-chevron-left\"></i>\n                                                    Previous\n                                                </button>\n                                                <div class=\"page-info\">\n                                                    @if (isLoadingPage) {\n                                                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                                        Loading...\n                                                    } @else {\n                                                        Page {{ executionHistoryCurrentPage }} of {{ totalPages }}\n                                                        <span class=\"record-count\">({{ totalExecutionHistoryCount }} total)</span>\n                                                    }\n                                                </div>\n                                                <button kendoButton\n                                                        fillMode=\"outline\"\n                                                        size=\"medium\"\n                                                        (click)=\"goToNextPage()\"\n                                                        [disabled]=\"!hasNextPage || isLoadingPage\"\n                                                        class=\"page-nav-btn\">\n                                                    Next\n                                                    <i class=\"fa-solid fa-chevron-right\"></i>\n                                                </button>\n                                                <button kendoButton\n                                                        fillMode=\"flat\"\n                                                        size=\"small\"\n                                                        (click)=\"navigateToEntity('MJ: AI Agent Runs', '')\"\n                                                        class=\"view-all-btn\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                    View All in Grid\n                                                </button>\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\" [disabled]=\"loadingStates.actions\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions\n                            @if (loadingStates.actions) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (actionCount > 0) {\n                                <span> ({{ actionCount }})</span>\n                            }\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                @if (loadingStates.actions) {\n                                    <div class=\"loading-state\">\n                                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                        <p>Loading actions...</p>\n                                    </div>\n                                } @else {\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                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents (Unified View with Filter) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\" [disabled]=\"loadingStates.subAgents\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents\n                            @if (loadingStates.subAgents) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (totalSubAgentCount > 0) {\n                                <span> ({{ totalSubAgentCount }})</span>\n                            }\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n\n                                <!-- Filter Controls -->\n                                <div class=\"section-header sub-agent-filter-header\">\n                                    <div class=\"filter-controls\">\n                                        <kendo-buttongroup selection=\"single\">\n                                            <button kendoButton\n                                                [toggleable]=\"true\"\n                                                [selected]=\"subAgentFilter === 'all'\"\n                                                (click)=\"setSubAgentFilter('all')\"\n                                                size=\"small\">\n                                                <i class=\"fa-solid fa-layer-group\"></i>\n                                                All ({{ totalSubAgentCount }})\n                                            </button>\n                                            <button kendoButton\n                                                [toggleable]=\"true\"\n                                                [selected]=\"subAgentFilter === 'child'\"\n                                                (click)=\"setSubAgentFilter('child')\"\n                                                size=\"small\">\n                                                <i class=\"fa-solid fa-link\"></i>\n                                                Child ({{ childSubAgentCount }})\n                                            </button>\n                                            <button kendoButton\n                                                [toggleable]=\"true\"\n                                                [selected]=\"subAgentFilter === 'related'\"\n                                                (click)=\"setSubAgentFilter('related')\"\n                                                size=\"small\">\n                                                <i class=\"fa-solid fa-share-nodes\"></i>\n                                                Related ({{ relatedSubAgentCount }})\n                                            </button>\n                                        </kendo-buttongroup>\n                                    </div>\n\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton\n                                                themeColor=\"primary\"\n                                                size=\"small\"\n                                                (click)=\"createChildSubAgent()\"\n                                                title=\"Create a new child sub-agent that shares this agent's payload\">\n                                                <i class=\"fa-solid fa-plus\"></i>\n                                                <i class=\"fa-solid fa-link\"></i>\n                                                Create Child\n                                            </button>\n                                            <button kendoButton\n                                                themeColor=\"secondary\"\n                                                size=\"small\"\n                                                (click)=\"linkRelatedSubAgent()\"\n                                                title=\"Link an existing agent as a related sub-agent with payload mapping\">\n                                                <i class=\"fa-solid fa-plus\"></i>\n                                                <i class=\"fa-solid fa-share-nodes\"></i>\n                                                Link Related\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n\n                                <!-- Empty State -->\n                                @if (totalSubAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Sub-agents help build complex workflows through hierarchical orchestration.</p>\n                                        <div class=\"empty-state-info\">\n                                            <div class=\"info-card\">\n                                                <i class=\"fa-solid fa-link\" style=\"color: #2196F3;\"></i>\n                                                <strong>Child Sub-Agents</strong>\n                                                <p>Share payload structure, dedicated to parent</p>\n                                            </div>\n                                            <div class=\"info-card\">\n                                                <i class=\"fa-solid fa-share-nodes\" style=\"color: #9C27B0;\"></i>\n                                                <strong>Related Sub-Agents</strong>\n                                                <p>Reusable agents with payload mapping</p>\n                                            </div>\n                                        </div>\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <div class=\"empty-state-actions\">\n                                                <button kendoButton themeColor=\"primary\" (click)=\"createChildSubAgent()\">\n                                                    <i class=\"fa-solid fa-plus\"></i> Create Child Sub-Agent\n                                                </button>\n                                                <button kendoButton themeColor=\"secondary\" (click)=\"linkRelatedSubAgent()\">\n                                                    <i class=\"fa-solid fa-plus\"></i> Link Related Sub-Agent\n                                                </button>\n                                            </div>\n                                        }\n                                    </div>\n                                } @else {\n                                    <!-- Unified Sub-Agent List -->\n                                    <div class=\"entity-list\">\n                                        @for (item of filteredSubAgents; track item.agent.ID) {\n                                            <div class=\"entity-item sub-agent-item\"\n                                                 [class.child-sub-agent]=\"item.type === 'child'\"\n                                                 [class.related-sub-agent]=\"item.type === 'related'\"\n                                                 (click)=\"navigateToEntity('AI Agents', item.agent.ID)\">\n\n                                                <!-- Type Badge -->\n                                                <div class=\"sub-agent-type-badge\"\n                                                     [style.background-color]=\"getSubAgentBadgeColor(item)\">\n                                                    <i [class]=\"getSubAgentBadgeIcon(item)\"></i>\n                                                    {{ getSubAgentBadgeText(item) }}\n                                                </div>\n\n                                                <!-- Agent Icon -->\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(item.agent)) {\n                                                        <img [src]=\"item.agent.LogoURL\"\n                                                             [alt]=\"item.agent.Name + ' logo'\"\n                                                             class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(item.agent)\"></i>\n                                                    }\n                                                </div>\n\n                                                <!-- Agent Content -->\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ item.agent.Name || 'Untitled Sub-Agent' }}</div>\n\n                                                    @if (item.agent.Description) {\n                                                        <div class=\"item-preview\">{{ item.agent.Description }}</div>\n                                                    }\n\n                                                    <div class=\"item-meta\">\n                                                        <!-- Payload Info -->\n                                                        <span class=\"meta-tag payload-info\">\n                                                            <i class=\"fa-solid fa-database\"></i>\n                                                            {{ getSubAgentPayloadInfo(item) }}\n                                                        </span>\n\n                                                        <!-- Status -->\n                                                        @if (item.agent.Status) {\n                                                            <span class=\"status-tag\"\n                                                                  [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ item.agent.Status }}\n                                                            </span>\n                                                        }\n\n                                                        <!-- Agent Type -->\n                                                        @if (item.agent.Type) {\n                                                            <span class=\"meta-tag\">{{ item.agent.Type }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n\n                                                <!-- Actions -->\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <!-- Output Mapping Config (Related only) -->\n                                                        @if (item.type === 'related') {\n                                                            <button kendoButton\n                                                                fillMode=\"flat\"\n                                                                themeColor=\"primary\"\n                                                                size=\"small\"\n                                                                (click)=\"configureOutputMapping(item, $event)\"\n                                                                title=\"Configure output mapping\">\n                                                                <i class=\"fa-solid fa-exchange-alt\"></i>\n                                                            </button>\n                                                        }\n\n                                                        <!-- Advanced Settings (Child only) -->\n                                                        @if (item.type === 'child' && UserCanCreateSubAgents) {\n                                                            <button kendoButton\n                                                                fillMode=\"flat\"\n                                                                themeColor=\"primary\"\n                                                                size=\"small\"\n                                                                (click)=\"openSubAgentAdvancedSettings(item.agent, $event)\"\n                                                                title=\"Advanced settings\">\n                                                                <i class=\"fa-solid fa-cog\"></i>\n                                                            </button>\n                                                        }\n\n                                                        <!-- Remove/Unlink -->\n                                                        @if (UserCanDeleteSubAgents) {\n                                                            <button kendoButton\n                                                                fillMode=\"flat\"\n                                                                themeColor=\"error\"\n                                                                size=\"small\"\n                                                                (click)=\"item.type === 'child' ? removeChildSubAgent(item, $event) : unlinkRelatedSubAgent(item, $event)\"\n                                                                [title]=\"item.type === 'child' ? 'Delete child sub-agent' : 'Unlink related sub-agent'\">\n                                                                <i [class]=\"item.type === 'child' ? 'fa-solid fa-trash' : 'fa-solid fa-unlink'\"></i>\n                                                            </button>\n                                                        }\n                                                    }\n\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\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\" [disabled]=\"loadingStates.prompts\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts\n                            @if (loadingStates.prompts) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            } @else if (promptCount > 0) {\n                                <span> ({{ promptCount }})</span>\n                            }\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\" [disabled]=\"loadingStates.learningCycles\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                            @if (loadingStates.learningCycles) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            }\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\" [disabled]=\"loadingStates.notes\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                            @if (loadingStates.notes) {\n                                <span style=\"margin-left: 8px;\"><i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 12px;\"></i></span>\n                            }\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.parent-agent.clickable {\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.parent-agent.clickable:hover {\n    background: #e3e7ed;\n    color: #2196f3;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.parent-agent.clickable:active {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(0,0,0,0.1);\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/* Loading State */\n.loading-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #64748b;\n}\n\n.loading-state i {\n    font-size: 36px;\n    color: #2196f3;\n    margin-bottom: 16px;\n    display: block;\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 14px;\n    color: #94a3b8;\n}\n\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/* Pagination Controls */\n.pagination-controls {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    margin-top: 12px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    border: 1px solid #dee2e6;\n}\n\n.page-nav-btn {\n    min-width: 120px;\n    font-weight: 500;\n}\n\n.page-nav-btn i {\n    font-size: 12px;\n}\n\n.page-nav-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-info {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 0 16px;\n    font-weight: 500;\n    color: #495057;\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info .record-count {\n    font-size: 12px;\n    color: #6c757d;\n    font-weight: normal;\n}\n\n.page-info .fa-spinner {\n    margin-right: 8px;\n    color: #2196f3;\n}\n\n.view-all-btn {\n    color: #6c757d;\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn:hover {\n    color: #2196f3;\n}\n\n.view-all-btn i {\n    margin-right: 4px;\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/* Execution History Search Bar */\n.execution-search-bar {\n    margin-bottom: 16px;\n    padding: 0 4px;\n}\n\n.execution-search-bar kendo-textbox {\n    width: 100%;\n}\n\n.execution-search-bar .fa-search {\n    color: #666;\n    margin-right: 8px;\n    font-size: 14px;\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: 8px;\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/* ===================================\n   Unified Sub-Agents with Filtering\n   =================================== */\n\n/* Filter Controls */\n.sub-agent-filter-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.filter-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.filter-controls kendo-buttongroup {\n    flex: 0 0 auto;\n}\n\n/* Sub-Agent Type Badge */\n.sub-agent-type-badge {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    z-index: 1;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n/* Sub-Agent Item Styling */\n.sub-agent-item {\n    position: relative;\n    padding-left: 8px;\n    transition: all 0.2s ease;\n}\n\n.sub-agent-item.child-sub-agent {\n    border-left: 4px solid #2196F3;\n}\n\n.sub-agent-item.related-sub-agent {\n    border-left: 4px solid #9C27B0;\n}\n\n.sub-agent-item:hover {\n    transform: translateX(4px);\n}\n\n/* Payload Info Tag */\n.payload-info {\n    background: #f5f5f5;\n    color: #666;\n    font-family: 'Roboto Mono', monospace;\n    font-size: 11px;\n}\n\n/* Empty State Info Cards */\n.empty-state-info {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n    margin: 24px 0;\n    max-width: 600px;\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.info-card {\n    background: #fafafa;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    padding: 16px;\n    text-align: left;\n}\n\n.info-card i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n.info-card strong {\n    display: block;\n    margin-bottom: 4px;\n    font-size: 14px;\n}\n\n.info-card p {\n    margin: 0;\n    font-size: 12px;\n    color: #666;\n}\n\n.empty-state-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    margin-top: 16px;\n}\n\n/* Responsive adjustments for sub-agent filters */\n@media (max-width: 768px) {\n    .sub-agent-filter-header {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .filter-controls,\n    .header-actions {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .empty-state-info {\n        grid-template-columns: 1fr;\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 }]