@memberjunction/ng-core-entity-forms 5.33.0 → 5.34.0

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var MJAIAgentFormComponentExtended_1;
 import { Component, ViewContainerRef, ViewChild, inject } from '@angular/core';
-import { RegisterClass, MJGlobal, UUIDsEqual } from '@memberjunction/global';
+import { RegisterClass, MJGlobal, UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
 import { BaseFormComponent, BaseFormSectionComponent, CUSTOM_LAYOUT_TOOLBAR_CONFIG } from '@memberjunction/ng-base-forms';
 import { CompositeKey, RunView } from '@memberjunction/core';
 import { UserInfoEngine } from '@memberjunction/core-entities';
@@ -30,13 +30,16 @@ import * as i4 from "@memberjunction/ng-code-editor";
 import * as i5 from "@memberjunction/ng-shared-generic";
 import * as i6 from "@memberjunction/ng-agents";
 import * as i7 from "@memberjunction/ng-trees";
-import * as i8 from "@angular/common";
+import * as i8 from "@memberjunction/ng-search";
+import * as i9 from "@angular/common";
 const _c0 = ["customSectionContainer"];
 const _c1 = () => ({ standalone: true });
 const _forTrack0 = ($index, $item) => $item.ID;
 const _forTrack1 = ($index, $item) => $item.agent.ID;
+const _forTrack2 = ($index, $item) => $item.ScopeID;
+const _forTrack3 = ($index, $item) => $item.Principal + $item.Level;
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 113);
+    i0.ɵɵelement(0, "img", 114);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("src", ctx_r1.record.LogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r1.record.Name + " logo");
@@ -49,7 +52,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 125);
+    i0.ɵɵelementStart(0, "input", 126);
     i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_9_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Name, $event) || (ctx_r1.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -57,7 +60,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Name);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h1", 117);
+    i0.ɵɵelementStart(0, "h1", 118);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -66,8 +69,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled AI Agent");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 126);
-    i0.ɵɵelement(1, "i", 127);
+    i0.ɵɵelementStart(0, "span", 127);
+    i0.ɵɵelement(1, "i", 128);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -77,7 +80,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_
     i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Status, " ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 120);
+    i0.ɵɵelementStart(0, "span", 121);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -87,11 +90,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 128);
+    i0.ɵɵelementStart(0, "span", 129);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_14_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToParentAgent()); });
-    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵtext(2);
-    i0.ɵɵelement(3, "i", 129);
+    i0.ɵɵelement(3, "i", 130);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -101,14 +104,14 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 130);
+    i0.ɵɵelementStart(0, "button", 131);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openTestHarness()); });
-    i0.ɵɵelement(1, "i", 92);
+    i0.ɵɵelement(1, "i", 93);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 131);
+    i0.ɵɵelementStart(3, "button", 132);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openPermissionsDialog()); });
-    i0.ɵɵelement(4, "i", 132);
+    i0.ɵɵelement(4, "i", 133);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -124,25 +127,25 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 108)(2, "button", 109);
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 109)(2, "button", 110);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleHeaderCollapsed()); });
-    i0.ɵɵelement(3, "i", 110);
+    i0.ɵɵelement(3, "i", 111);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 111)(5, "div", 112);
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_6_Template, 1, 2, "img", 113)(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_7_Template, 1, 2, "i", 114);
+    i0.ɵɵelementStart(4, "div", 112)(5, "div", 113);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_6_Template, 1, 2, "img", 114)(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_7_Template, 1, 2, "i", 115);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 115);
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_9_Template, 1, 1, "input", 116)(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_10_Template, 2, 1, "h1", 117);
-    i0.ɵɵelementStart(11, "div", 118);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_12_Template, 3, 3, "span", 119);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_13_Template, 2, 1, "span", 120);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_14_Template, 4, 3, "span", 121);
+    i0.ɵɵelementStart(8, "div", 116);
+    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_9_Template, 1, 1, "input", 117)(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_10_Template, 2, 1, "h1", 118);
+    i0.ɵɵelementStart(11, "div", 119);
+    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_12_Template, 3, 3, "span", 120);
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_13_Template, 2, 1, "span", 121);
+    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_14_Template, 4, 3, "span", 122);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 122);
+    i0.ɵɵelementStart(15, "div", 123);
     i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_16_Template, 6, 9);
-    i0.ɵɵelementStart(17, "button", 123);
+    i0.ɵɵelementStart(17, "button", 124);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
-    i0.ɵɵelement(18, "i", 124);
+    i0.ɵɵelement(18, "i", 125);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -160,7 +163,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Template(rf,
     i0.ɵɵconditional(ctx_r1.record.ID ? 16 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 139);
+    i0.ɵɵelementStart(0, "span", 140);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -171,13 +174,13 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 140);
+    i0.ɵɵelementStart(0, "button", 141);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openTestHarness()); });
-    i0.ɵɵelement(1, "i", 92);
+    i0.ɵɵelement(1, "i", 93);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 141);
+    i0.ɵɵelementStart(2, "button", 142);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_7_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openPermissionsDialog()); });
-    i0.ɵɵelement(3, "i", 132);
+    i0.ɵɵelement(3, "i", 133);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -190,19 +193,19 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "button", 133);
+    i0.ɵɵelementStart(0, "div", 7)(1, "button", 134);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleHeaderCollapsed()); });
-    i0.ɵɵelement(2, "i", 134);
+    i0.ɵɵelement(2, "i", 135);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 135);
+    i0.ɵɵelementStart(3, "span", 136);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_5_Template, 2, 3, "span", 136);
-    i0.ɵɵelement(6, "div", 137);
+    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_5_Template, 2, 3, "span", 137);
+    i0.ɵɵelement(6, "div", 138);
     i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_7_Template, 4, 8);
-    i0.ɵɵelementStart(8, "button", 138);
+    i0.ɵɵelementStart(8, "button", 139);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
-    i0.ɵɵelement(9, "i", 124);
+    i0.ɵɵelement(9, "i", 125);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -214,7 +217,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Template(rf,
     i0.ɵɵconditional(ctx_r1.record.ID ? 7 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 144);
+    i0.ɵɵelement(0, "i", 145);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -222,16 +225,16 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_
     i0.ɵɵtextInterpolate1(" ", ctx_r1.agentType.Name, " Configuration ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 143);
+    i0.ɵɵelement(0, "mj-loading", 144);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("text", i0.ɵɵinterpolate1("Loading ", ctx_r1.agentType.Name, " configuration..."));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 9);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_1_Template, 2, 1, "ng-template", 17);
-    i0.ɵɵelementStart(2, "div", 142);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_3_Template, 1, 2, "mj-loading", 143);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_1_Template, 2, 1, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 143);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_3_Template, 1, 2, "mj-loading", 144);
     i0.ɵɵelementContainer(4, null, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -243,8 +246,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template(rf,
     i0.ɵɵconditional(ctx_r1.loadingStates.customSection ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 149);
-    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -267,20 +270,20 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_
     i0.ɵɵconditional(ctx_r1.executionHistoryCount < ctx_r1.totalExecutionHistoryCount ? 2 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 148);
+    i0.ɵɵelement(0, "i", 149);
     i0.ɵɵtext(1, " Execution History ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_3_Template, 4, 2, "span");
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_2_Template, 2, 0, "span", 150)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_3_Template, 4, 2, "span");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.loadingStates.executionHistory ? 2 : ctx_r1.executionHistoryCount > 0 ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 146);
+    i0.ɵɵelement(0, "mj-loading", 147);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵelement(1, "i", 148);
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵelement(1, "i", 149);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Execution History");
     i0.ɵɵelementEnd();
@@ -289,8 +292,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵelementEnd()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵelement(1, "i", 153);
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵelement(1, "i", 154);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Matching Results");
     i0.ɵɵelementEnd();
@@ -303,12 +306,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate1("No execution history found matching \"", ctx_r1.executionSearchText, "\"");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 168);
-    i0.ɵɵelement(1, "i", 173);
-    i0.ɵɵelementStart(2, "span", 174);
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵelement(1, "i", 174);
+    i0.ɵɵelementStart(2, "span", 175);
     i0.ɵɵtext(3, "Config:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 175);
+    i0.ɵɵelementStart(4, "span", 176);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -317,12 +320,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate(execution_r11.Configuration);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 168);
-    i0.ɵɵelement(1, "i", 176);
-    i0.ɵɵelementStart(2, "span", 174);
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵelement(1, "i", 177);
+    i0.ɵɵelementStart(2, "span", 175);
     i0.ɵɵtext(3, "Duration:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 175);
+    i0.ɵɵelementStart(4, "span", 176);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -332,19 +335,19 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTimeFromDates(execution_r11.StartedAt, execution_r11.CompletedAt));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 168);
-    i0.ɵɵelement(1, "i", 177);
-    i0.ɵɵelementStart(2, "span", 174);
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵelement(1, "i", 178);
+    i0.ɵɵelementStart(2, "span", 175);
     i0.ɵɵtext(3, "Running:");
     i0.ɵɵelementEnd()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 168);
-    i0.ɵɵelement(1, "i", 178);
-    i0.ɵɵelementStart(2, "span", 174);
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵelement(1, "i", 179);
+    i0.ɵɵelementStart(2, "span", 175);
     i0.ɵɵtext(3, "Tokens:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 175);
+    i0.ɵɵelementStart(4, "span", 176);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -354,12 +357,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r11.TotalTokensUsedRollup || execution_r11.TotalTokensUsed));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 168);
-    i0.ɵɵelement(1, "i", 179);
-    i0.ɵɵelementStart(2, "span", 174);
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵelement(1, "i", 180);
+    i0.ɵɵelementStart(2, "span", 175);
     i0.ɵɵtext(3, "Cost:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 175);
+    i0.ɵɵelementStart(4, "span", 176);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -369,12 +372,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r11.TotalCostRollup || execution_r11.TotalCost));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 182);
-    i0.ɵɵelement(1, "i", 188);
-    i0.ɵɵelementStart(2, "div", 183)(3, "span", 184);
+    i0.ɵɵelementStart(0, "div", 183);
+    i0.ɵɵelement(1, "i", 189);
+    i0.ɵɵelementStart(2, "div", 184)(3, "span", 185);
     i0.ɵɵtext(4, "Completed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 185);
+    i0.ɵɵelementStart(5, "span", 186);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "date");
     i0.ɵɵelementEnd()()();
@@ -384,12 +387,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 1, execution_r11.CompletedAt, "medium"));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 182);
-    i0.ɵɵelement(1, "i", 178);
-    i0.ɵɵelementStart(2, "div", 183)(3, "span", 184);
+    i0.ɵɵelementStart(0, "div", 183);
+    i0.ɵɵelement(1, "i", 179);
+    i0.ɵɵelementStart(2, "div", 184)(3, "span", 185);
     i0.ɵɵtext(4, "Direct Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 185);
+    i0.ɵɵelementStart(5, "span", 186);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -399,12 +402,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r11.TotalTokensUsed));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 182);
-    i0.ɵɵelement(1, "i", 83);
-    i0.ɵɵelementStart(2, "div", 183)(3, "span", 184);
+    i0.ɵɵelementStart(0, "div", 183);
+    i0.ɵɵelement(1, "i", 84);
+    i0.ɵɵelementStart(2, "div", 184)(3, "span", 185);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 185);
+    i0.ɵɵelementStart(5, "span", 186);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -414,12 +417,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r11.TotalTokensUsedRollup));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 182);
-    i0.ɵɵelement(1, "i", 179);
-    i0.ɵɵelementStart(2, "div", 183)(3, "span", 184);
+    i0.ɵɵelementStart(0, "div", 183);
+    i0.ɵɵelement(1, "i", 180);
+    i0.ɵɵelementStart(2, "div", 184)(3, "span", 185);
     i0.ɵɵtext(4, "Direct Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 185);
+    i0.ɵɵelementStart(5, "span", 186);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -429,12 +432,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r11.TotalCost));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 182);
-    i0.ɵɵelement(1, "i", 189);
-    i0.ɵɵelementStart(2, "div", 183)(3, "span", 184);
+    i0.ɵɵelementStart(0, "div", 183);
+    i0.ɵɵelement(1, "i", 190);
+    i0.ɵɵelementStart(2, "div", 184)(3, "span", 185);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 185);
+    i0.ɵɵelementStart(5, "span", 186);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -444,12 +447,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r11.TotalCostRollup));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 182);
-    i0.ɵɵelement(1, "i", 190);
-    i0.ɵɵelementStart(2, "div", 183)(3, "span", 184);
+    i0.ɵɵelementStart(0, "div", 183);
+    i0.ɵɵelement(1, "i", 191);
+    i0.ɵɵelementStart(2, "div", 184)(3, "span", 185);
     i0.ɵɵtext(4, "Conversation");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 185);
+    i0.ɵɵelementStart(5, "span", 186);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -458,11 +461,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate1("", execution_r11.ConversationID.substring(0, 8), "...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 186)(1, "h5");
-    i0.ɵɵelement(2, "i", 191);
+    i0.ɵɵelementStart(0, "div", 187)(1, "h5");
+    i0.ɵɵelement(2, "i", 192);
     i0.ɵɵtext(3, " Result");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "mj-code-editor", 192);
+    i0.ɵɵelement(4, "mj-code-editor", 193);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext(2).$implicit;
@@ -471,11 +474,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r11, false))("readonly", true)("lineWrapping", true);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 187)(1, "h5");
-    i0.ɵɵelement(2, "i", 193);
+    i0.ɵɵelementStart(0, "div", 188)(1, "h5");
+    i0.ɵɵelement(2, "i", 194);
     i0.ɵɵtext(3, " Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 194);
+    i0.ɵɵelementStart(4, "div", 195);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -484,24 +487,24 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵtextInterpolate(execution_r11.ErrorMessage);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 172)(1, "div", 180)(2, "div", 181)(3, "div", 182);
-    i0.ɵɵelement(4, "i", 177);
-    i0.ɵɵelementStart(5, "div", 183)(6, "span", 184);
+    i0.ɵɵelementStart(0, "div", 173)(1, "div", 181)(2, "div", 182)(3, "div", 183);
+    i0.ɵɵelement(4, "i", 178);
+    i0.ɵɵelementStart(5, "div", 184)(6, "span", 185);
     i0.ɵɵtext(7, "Started");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 185);
+    i0.ɵɵelementStart(8, "span", 186);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_11_Template, 8, 4, "div", 182);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_12_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_13_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_14_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_15_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_16_Template, 7, 1, "div", 182);
+    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_11_Template, 8, 4, "div", 183);
+    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_12_Template, 7, 1, "div", 183);
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_13_Template, 7, 1, "div", 183);
+    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_14_Template, 7, 1, "div", 183);
+    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_15_Template, 7, 1, "div", 183);
+    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_16_Template, 7, 1, "div", 183);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_17_Template, 5, 3, "div", 186);
-    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_18_Template, 6, 1, "div", 187);
+    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_17_Template, 5, 3, "div", 187);
+    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_18_Template, 6, 1, "div", 188);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext().$implicit;
@@ -526,30 +529,30 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 158)(1, "div", 159);
+    i0.ɵɵelementStart(0, "div", 159)(1, "div", 160);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Template_div_click_1_listener() { const execution_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r11.ID)); });
-    i0.ɵɵelementStart(2, "div", 160)(3, "div", 161)(4, "div", 162);
+    i0.ɵɵelementStart(2, "div", 161)(3, "div", 162)(4, "div", 163);
     i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 163)(7, "div", 164);
-    i0.ɵɵelement(8, "i", 165);
+    i0.ɵɵelementStart(6, "div", 164)(7, "div", 165);
+    i0.ɵɵelement(8, "i", 166);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 166);
+    i0.ɵɵelementStart(10, "div", 167);
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 167);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_14_Template, 6, 1, "div", 168);
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_15_Template, 6, 1, "div", 168)(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_16_Template, 4, 0, "div", 168);
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_17_Template, 6, 1, "div", 168);
-    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_18_Template, 6, 1, "div", 168);
+    i0.ɵɵelementStart(13, "div", 168);
+    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_14_Template, 6, 1, "div", 169);
+    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_15_Template, 6, 1, "div", 169)(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_16_Template, 4, 0, "div", 169);
+    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_17_Template, 6, 1, "div", 169);
+    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_18_Template, 6, 1, "div", 169);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 169)(20, "button", 170);
+    i0.ɵɵelementStart(19, "div", 170)(20, "button", 171);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Template_button_click_20_listener($event) { const execution_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); ctx_r1.openExecutionRecord(execution_r11.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(21, "i", 171);
+    i0.ɵɵelement(21, "i", 172);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(22, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Template, 19, 12, "div", 172);
+    i0.ɵɵconditionalCreate(22, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Template, 19, 12, "div", 173);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r11 = ctx.$implicit;
@@ -577,12 +580,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
     i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r11.ID] ? 22 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 201);
+    i0.ɵɵelement(0, "i", 202);
     i0.ɵɵtext(1, " Loading... ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
-    i0.ɵɵelementStart(1, "span", 202);
+    i0.ɵɵelementStart(1, "span", 203);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -593,22 +596,22 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 157)(1, "button", 195);
+    i0.ɵɵelementStart(0, "div", 158)(1, "button", 196);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.goToPreviousPage()); });
-    i0.ɵɵelement(2, "i", 196);
+    i0.ɵɵelement(2, "i", 197);
     i0.ɵɵtext(3, " Previous ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 197);
+    i0.ɵɵelementStart(4, "div", 198);
     i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Conditional_5_Template, 2, 0)(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Conditional_6_Template, 3, 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 195);
+    i0.ɵɵelementStart(7, "button", 196);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.goToNextPage()); });
     i0.ɵɵtext(8, " Next ");
-    i0.ɵɵelement(9, "i", 198);
+    i0.ɵɵelement(9, "i", 199);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 199);
+    i0.ɵɵelementStart(10, "button", 200);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
-    i0.ɵɵelement(11, "i", 200);
+    i0.ɵɵelement(11, "i", 201);
     i0.ɵɵtext(12, " View All in Grid ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -622,16 +625,16 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 151)(1, "div", 152);
-    i0.ɵɵelement(2, "i", 153);
-    i0.ɵɵelementStart(3, "input", 154);
+    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
+    i0.ɵɵelement(2, "i", 154);
+    i0.ɵɵelementStart(3, "input", 155);
     i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.executionSearchText, $event) || (ctx_r1.executionSearchText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onExecutionSearchChange()); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(4, "div", 155);
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_5_Template, 6, 1, "div", 147);
-    i0.ɵɵrepeaterCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Template, 23, 18, "div", 156, _forTrack0);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Template, 13, 3, "div", 157);
+    i0.ɵɵelementStart(4, "div", 156);
+    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_5_Template, 6, 1, "div", 148);
+    i0.ɵɵrepeaterCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Template, 23, 18, "div", 157, _forTrack0);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Conditional_8_Template, 13, 3, "div", 158);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -647,9 +650,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 10);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Template, 4, 1, "ng-template", 17);
-    i0.ɵɵelementStart(2, "div", 145);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_3_Template, 1, 0, "mj-loading", 146)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_4_Template, 6, 0, "div", 147)(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Template, 9, 5);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Template, 4, 1, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 146);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_3_Template, 1, 0, "mj-loading", 147)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_4_Template, 6, 0, "div", 148)(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_Template, 9, 5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -658,8 +661,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Template(rf,
     i0.ɵɵconditional(ctx_r1.loadingStates.executionHistory ? 3 : ctx_r1.executionHistoryCount === 0 ? 4 : 5);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 149);
-    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -672,47 +675,47 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_
     i0.ɵɵtextInterpolate1(" (", ctx_r1.actionCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 87);
+    i0.ɵɵelement(0, "i", 88);
     i0.ɵɵtext(1, " Actions ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_3_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_2_Template, 2, 0, "span", 150)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 2 : ctx_r1.actionCount > 0 ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 203);
-    i0.ɵɵelement(1, "i", 201);
+    i0.ɵɵelementStart(0, "div", 204);
+    i0.ɵɵelement(1, "i", 202);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Loading actions...");
     i0.ɵɵelementEnd()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 207);
+    i0.ɵɵelementStart(0, "button", 208);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 208);
+    i0.ɵɵelement(1, "i", 209);
     i0.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 210);
+    i0.ɵɵelementStart(0, "button", 211);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 208);
+    i0.ɵɵelement(1, "i", 209);
     i0.ɵɵtext(2, " Configure First Action ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵelement(1, "i", 87);
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵelement(1, "i", 88);
     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.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_3_Conditional_6_Template, 3, 0, "button", 209);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_3_Conditional_6_Template, 3, 0, "button", 210);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -720,7 +723,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 6 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 217);
+    i0.ɵɵelementStart(0, "div", 218);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -729,7 +732,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_
     i0.ɵɵtextInterpolate(action_r16.Description);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 219);
+    i0.ɵɵelementStart(0, "span", 220);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -739,31 +742,31 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 223);
+    i0.ɵɵelementStart(0, "button", 224);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r17); const action_r16 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r16, $event)); });
-    i0.ɵɵelement(1, "i", 224);
+    i0.ɵɵelement(1, "i", 225);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 213);
+    i0.ɵɵelementStart(0, "div", 214);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Template_div_click_0_listener() { const action_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: Actions", action_r16.ID)); });
-    i0.ɵɵelementStart(1, "div", 214);
+    i0.ɵɵelementStart(1, "div", 215);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 215)(4, "div", 216);
+    i0.ɵɵelementStart(3, "div", 216)(4, "div", 217);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 217);
-    i0.ɵɵelementStart(7, "div", 218);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 219);
-    i0.ɵɵelementStart(9, "span", 220);
-    i0.ɵɵelement(10, "i", 132);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 218);
+    i0.ɵɵelementStart(7, "div", 219);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 220);
+    i0.ɵɵelementStart(9, "span", 221);
+    i0.ɵɵelement(10, "i", 133);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 221);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 222);
-    i0.ɵɵelement(14, "i", 200);
+    i0.ɵɵelementStart(12, "div", 222);
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 223);
+    i0.ɵɵelement(14, "i", 201);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const action_r16 = ctx.$implicit;
@@ -787,7 +790,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 225);
+    i0.ɵɵelementStart(0, "div", 226);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Actions", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -798,9 +801,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Template, 15, 15, "div", 211, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Conditional_3_Template, 3, 1, "div", 212);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_For_2_Template, 15, 15, "div", 212, _forTrack0);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Conditional_3_Template, 3, 1, "div", 213);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -810,10 +813,10 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_
     i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 204);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_2_Template, 3, 0, "button", 205);
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 205);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_2_Template, 3, 0, "button", 206);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_3_Template, 7, 1, "div", 147)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Template, 4, 1, "div", 206);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_3_Template, 7, 1, "div", 148)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Template, 4, 1, "div", 207);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
@@ -823,9 +826,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 11);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Template, 4, 1, "ng-template", 17);
-    i0.ɵɵelementStart(2, "div", 18);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_3_Template, 4, 0, "div", 203)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Template, 5, 2);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Template, 4, 1, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 19);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_3_Template, 4, 0, "div", 204)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Template, 5, 2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -834,8 +837,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Template(rf,
     i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 3 : 4);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 149);
-    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -848,9 +851,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_
     i0.ɵɵtextInterpolate1(" (", ctx_r1.totalSubAgentCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 83);
+    i0.ɵɵelement(0, "i", 84);
     i0.ɵɵtext(1, " Sub-Agents ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_3_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_2_Template, 2, 0, "span", 150)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
@@ -858,36 +861,36 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 232);
+    i0.ɵɵelementStart(0, "button", 233);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.createChildSubAgent()); });
-    i0.ɵɵelement(1, "i", 230);
+    i0.ɵɵelement(1, "i", 231);
     i0.ɵɵtext(2, " Create Child ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 233);
+    i0.ɵɵelementStart(3, "button", 234);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.linkRelatedSubAgent()); });
-    i0.ɵɵelement(4, "i", 231);
+    i0.ɵɵelement(4, "i", 232);
     i0.ɵɵtext(5, " Link Related ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵelement(1, "i", 83);
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Sub-Agents");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Sub-agents help build complex workflows through hierarchical orchestration.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 234)(7, "div", 235);
-    i0.ɵɵelement(8, "i", 236);
+    i0.ɵɵelementStart(6, "div", 235)(7, "div", 236);
+    i0.ɵɵelement(8, "i", 237);
     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", 235);
-    i0.ɵɵelement(14, "i", 237);
+    i0.ɵɵelementStart(13, "div", 236);
+    i0.ɵɵelement(14, "i", 238);
     i0.ɵɵelementStart(15, "strong");
     i0.ɵɵtext(16, "Related Sub-Agents");
     i0.ɵɵelementEnd();
@@ -896,7 +899,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
     i0.ɵɵelementEnd()()()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 241);
+    i0.ɵɵelement(0, "img", 242);
 } if (rf & 2) {
     const item_r22 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("src", item_r22.agent.LogoURL, i0.ɵɵsanitizeUrl)("alt", item_r22.agent.Name + " logo");
@@ -909,7 +912,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
     i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(item_r22.agent));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 217);
+    i0.ɵɵelementStart(0, "div", 218);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -918,7 +921,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
     i0.ɵɵtextInterpolate(item_r22.agent.Description);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 220);
+    i0.ɵɵelementStart(0, "span", 221);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -929,7 +932,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
     i0.ɵɵtextInterpolate1(" ", item_r22.agent.Status, " ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 219);
+    i0.ɵɵelementStart(0, "span", 220);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -939,21 +942,21 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 248);
+    i0.ɵɵelementStart(0, "button", 249);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const item_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureOutputMapping(item_r22, $event)); });
-    i0.ɵɵelement(1, "i", 249);
+    i0.ɵɵelement(1, "i", 250);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 250);
+    i0.ɵɵelementStart(0, "button", 251);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r24); const item_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(item_r22.agent, $event)); });
-    i0.ɵɵelement(1, "i", 173);
+    i0.ɵɵelement(1, "i", 174);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 251);
+    i0.ɵɵelementStart(0, "button", 252);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r25); const item_r22 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(item_r22.type === "child" ? ctx_r1.removeChildSubAgent(item_r22, $event) : ctx_r1.unlinkRelatedSubAgent(item_r22, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
@@ -964,9 +967,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
     i0.ɵɵclassMap(item_r22.type === "child" ? "fa-solid fa-trash" : "fa-solid fa-unlink");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_0_Template, 2, 0, "button", 245);
-    i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_1_Template, 2, 0, "button", 246);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_2_Template, 2, 3, "button", 247);
+    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_0_Template, 2, 0, "button", 246);
+    i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_1_Template, 2, 0, "button", 247);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_2_Template, 2, 3, "button", 248);
 } if (rf & 2) {
     const item_r22 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -978,29 +981,29 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 239);
+    i0.ɵɵelementStart(0, "div", 240);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Template_div_click_0_listener() { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agents", item_r22.agent.ID)); });
-    i0.ɵɵelementStart(1, "div", 240);
+    i0.ɵɵelementStart(1, "div", 241);
     i0.ɵɵelement(2, "i");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 214);
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_5_Template, 1, 2, "img", 241)(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_6_Template, 1, 2, "i", 114);
+    i0.ɵɵelementStart(4, "div", 215);
+    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_5_Template, 1, 2, "img", 242)(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_6_Template, 1, 2, "i", 115);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 215)(8, "div", 216);
+    i0.ɵɵelementStart(7, "div", 216)(8, "div", 217);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_10_Template, 2, 1, "div", 217);
-    i0.ɵɵelementStart(11, "div", 218)(12, "span", 242);
-    i0.ɵɵelement(13, "i", 243);
+    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_10_Template, 2, 1, "div", 218);
+    i0.ɵɵelementStart(11, "div", 219)(12, "span", 243);
+    i0.ɵɵelement(13, "i", 244);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_15_Template, 2, 3, "span", 244);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_16_Template, 2, 1, "span", 219);
+    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_15_Template, 2, 3, "span", 245);
+    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_16_Template, 2, 1, "span", 220);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 221);
+    i0.ɵɵelementStart(17, "div", 222);
     i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Template, 3, 3);
-    i0.ɵɵelement(19, "i", 200);
+    i0.ɵɵelement(19, "i", 201);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r22 = ctx.$implicit;
@@ -1028,8 +1031,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
     i0.ɵɵconditional(ctx_r1.EditMode ? 18 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Template, 20, 16, "div", 238, _forTrack1);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Template, 20, 16, "div", 239, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1039,26 +1042,26 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-accordion-panel", 12);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Template, 4, 1, "ng-template", 17);
-    i0.ɵɵelementStart(2, "div", 18)(3, "div", 226)(4, "div", 227)(5, "div", 228)(6, "button", 229);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Template, 4, 1, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 19)(3, "div", 227)(4, "div", 228)(5, "div", 229)(6, "button", 230);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("all")); });
-    i0.ɵɵelement(7, "i", 93);
+    i0.ɵɵelement(7, "i", 94);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 229);
+    i0.ɵɵelementStart(9, "button", 230);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("child")); });
-    i0.ɵɵelement(10, "i", 230);
+    i0.ɵɵelement(10, "i", 231);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 229);
+    i0.ɵɵelementStart(12, "button", 230);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("related")); });
-    i0.ɵɵelement(13, "i", 231);
+    i0.ɵɵelement(13, "i", 232);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 204);
+    i0.ɵɵelementStart(15, "div", 205);
     i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_16_Template, 6, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_17_Template, 19, 0, "div", 147)(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_Template, 3, 0, "div", 206);
+    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_17_Template, 19, 0, "div", 148)(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_Template, 3, 0, "div", 207);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1081,8 +1084,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Template(rf,
     i0.ɵɵconditional(ctx_r1.totalSubAgentCount === 0 ? 17 : 18);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 149);
-    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -1095,9 +1098,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template
     i0.ɵɵtextInterpolate1(" (", ctx_r1.promptCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 190);
+    i0.ɵɵelement(0, "i", 191);
     i0.ɵɵtext(1, " Prompts ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_3_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_2_Template, 2, 0, "span", 150)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
@@ -1105,7 +1108,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 258);
+    i0.ɵɵelementStart(0, "mj-dropdown", 259);
     i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_9_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1114,7 +1117,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
     i0.ɵɵproperty("Data", ctx_r1.modelSelectionModes)("ValuePrimitive", true);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 257);
+    i0.ɵɵelementStart(0, "span", 258);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1124,30 +1127,30 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 207);
+    i0.ɵɵelementStart(0, "button", 208);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 208);
+    i0.ɵɵelement(1, "i", 209);
     i0.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 210);
+    i0.ɵɵelementStart(0, "button", 211);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_13_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 208);
+    i0.ɵɵelement(1, "i", 209);
     i0.ɵɵtext(2, " Create First Prompt ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵelement(1, "i", 190);
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵelement(1, "i", 191);
     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.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_13_Conditional_6_Template, 3, 0, "button", 209);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_13_Conditional_6_Template, 3, 0, "button", 210);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1155,7 +1158,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 6 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 217);
+    i0.ɵɵelementStart(0, "div", 218);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1164,7 +1167,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
     i0.ɵɵtextInterpolate2("", prompt_r30.TemplateText.substring(0, 120), "", prompt_r30.TemplateText.length > 120 ? "..." : "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 219);
+    i0.ɵɵelementStart(0, "span", 220);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1174,36 +1177,36 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 250);
+    i0.ɵɵelementStart(0, "button", 251);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r31); const prompt_r30 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r30, $event)); });
-    i0.ɵɵelement(1, "i", 173);
+    i0.ɵɵelement(1, "i", 174);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 263);
+    i0.ɵɵelementStart(0, "button", 264);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r32); const prompt_r30 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r30, $event)); });
-    i0.ɵɵelement(1, "i", 224);
+    i0.ɵɵelement(1, "i", 225);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 260);
+    i0.ɵɵelementStart(0, "div", 261);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Template_div_click_0_listener() { const prompt_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Prompts", prompt_r30.ID)); });
-    i0.ɵɵelementStart(1, "div", 214);
-    i0.ɵɵelement(2, "i", 261);
+    i0.ɵɵelementStart(1, "div", 215);
+    i0.ɵɵelement(2, "i", 262);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 215)(4, "div", 216);
+    i0.ɵɵelementStart(3, "div", 216)(4, "div", 217);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_6_Template, 2, 2, "div", 217);
-    i0.ɵɵelementStart(7, "div", 218);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_8_Template, 2, 1, "span", 219);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_6_Template, 2, 2, "div", 218);
+    i0.ɵɵelementStart(7, "div", 219);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_8_Template, 2, 1, "span", 220);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 221);
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_10_Template, 2, 0, "button", 246);
-    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_11_Template, 2, 0, "button", 262);
-    i0.ɵɵelement(12, "i", 200);
+    i0.ɵɵelementStart(9, "div", 222);
+    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_10_Template, 2, 0, "button", 247);
+    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_11_Template, 2, 0, "button", 263);
+    i0.ɵɵelement(12, "i", 201);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const prompt_r30 = ctx.$implicit;
@@ -1221,7 +1224,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 225);
+    i0.ɵɵelementStart(0, "div", 226);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Prompts", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -1232,9 +1235,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.promptCount, " prompts...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Template, 13, 5, "div", 259, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Conditional_3_Template, 3, 1, "div", 212);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Template, 13, 5, "div", 260, _forTrack0);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Conditional_3_Template, 3, 1, "div", 213);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1245,17 +1248,17 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 13);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Template, 4, 1, "ng-template", 17);
-    i0.ɵɵelementStart(2, "div", 18)(3, "div", 19)(4, "div", 252)(5, "div", 253)(6, "label", 254);
-    i0.ɵɵelement(7, "i", 255);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Template, 4, 1, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 19)(3, "div", 20)(4, "div", 253)(5, "div", 254)(6, "label", 255);
+    i0.ɵɵelement(7, "i", 256);
     i0.ɵɵtext(8, " Model Selection: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_9_Template, 1, 3, "mj-dropdown", 256)(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_10_Template, 2, 1, "span", 257);
+    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_9_Template, 1, 3, "mj-dropdown", 257)(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_10_Template, 2, 1, "span", 258);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 204);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_12_Template, 3, 0, "button", 205);
+    i0.ɵɵelementStart(11, "div", 205);
+    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_12_Template, 3, 0, "button", 206);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_13_Template, 7, 1, "div", 147)(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Template, 4, 1, "div", 206);
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_13_Template, 7, 1, "div", 148)(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Template, 4, 1, "div", 207);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1268,8 +1271,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Template(rf
     i0.ɵɵconditional(ctx_r1.promptCount === 0 ? 13 : 14);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 149);
-    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -1282,17 +1285,17 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template
     i0.ɵɵtextInterpolate1(" (", ctx_r1.learningCycleCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 264);
+    i0.ɵɵelement(0, "i", 265);
     i0.ɵɵtext(1, " Learning Cycles ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_3_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_2_Template, 2, 0, "span", 150)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.loadingStates.learningCycles ? 2 : ctx_r1.learningCycleCount > 0 ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵelement(1, "i", 264);
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵelement(1, "i", 265);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Learning Cycles");
     i0.ɵɵelementEnd();
@@ -1301,8 +1304,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional
     i0.ɵɵelementEnd()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 219);
-    i0.ɵɵelement(1, "i", 267);
+    i0.ɵɵelementStart(0, "span", 220);
+    i0.ɵɵelement(1, "i", 268);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -1312,7 +1315,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r35.StartedAt, "short"), " ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 220);
+    i0.ɵɵelementStart(0, "span", 221);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1322,20 +1325,20 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 266);
+    i0.ɵɵelementStart(0, "div", 267);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Template_div_click_0_listener() { const cycle_r35 = i0.ɵɵrestoreView(_r34).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Learning Cycles", cycle_r35.ID)); });
-    i0.ɵɵelementStart(1, "div", 214);
-    i0.ɵɵelement(2, "i", 264);
+    i0.ɵɵelementStart(1, "div", 215);
+    i0.ɵɵelement(2, "i", 265);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 215)(4, "div", 216);
+    i0.ɵɵelementStart(3, "div", 216)(4, "div", 217);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 218);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Conditional_7_Template, 4, 4, "span", 219);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Conditional_8_Template, 2, 1, "span", 220);
+    i0.ɵɵelementStart(6, "div", 219);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Conditional_7_Template, 4, 4, "span", 220);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Conditional_8_Template, 2, 1, "span", 221);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 221);
-    i0.ɵɵelement(10, "i", 200);
+    i0.ɵɵelementStart(9, "div", 222);
+    i0.ɵɵelement(10, "i", 201);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const cycle_r35 = ctx.$implicit;
@@ -1348,7 +1351,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 225);
+    i0.ɵɵelementStart(0, "div", 226);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Learning Cycles", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -1359,9 +1362,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Template, 11, 3, "div", 265, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Conditional_3_Template, 3, 1, "div", 212);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Template, 11, 3, "div", 266, _forTrack0);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Conditional_3_Template, 3, 1, "div", 213);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1372,11 +1375,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 14);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Template, 4, 1, "ng-template", 17);
-    i0.ɵɵelementStart(2, "div", 18)(3, "div", 19)(4, "div", 20);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Template, 4, 1, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 19)(3, "div", 20)(4, "div", 21);
     i0.ɵɵtext(5, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_6_Template, 6, 0, "div", 147)(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Template, 4, 1, "div", 206);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_6_Template, 6, 0, "div", 148)(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Template, 4, 1, "div", 207);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1385,8 +1388,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Template(rf
     i0.ɵɵconditional(ctx_r1.learningCycleCount === 0 ? 6 : 7);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 149);
-    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(0, "span", 150);
+    i0.ɵɵelement(1, "i", 151);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -1399,9 +1402,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template
     i0.ɵɵtextInterpolate1(" (", ctx_r1.noteCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 268);
+    i0.ɵɵelement(0, "i", 269);
     i0.ɵɵtext(1, " Notes ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_3_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_2_Template, 2, 0, "span", 150)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
@@ -1409,30 +1412,30 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 207);
+    i0.ɵɵelementStart(0, "button", 208);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 208);
+    i0.ɵɵelement(1, "i", 209);
     i0.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 210);
+    i0.ɵɵelementStart(0, "button", 211);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_8_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 208);
+    i0.ɵɵelement(1, "i", 209);
     i0.ɵɵtext(2, " Create First Note ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵelement(1, "i", 268);
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵelement(1, "i", 269);
     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.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_8_Conditional_6_Template, 3, 0, "button", 209);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_8_Conditional_6_Template, 3, 0, "button", 210);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1440,7 +1443,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional
     i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 6 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 217);
+    i0.ɵɵelementStart(0, "div", 218);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1449,8 +1452,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional
     i0.ɵɵtextInterpolate2("", note_r40.Note.substring(0, 100), "", note_r40.Note.length > 100 ? "..." : "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 219);
-    i0.ɵɵelement(1, "i", 267);
+    i0.ɵɵelementStart(0, "span", 220);
+    i0.ɵɵelement(1, "i", 268);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -1461,20 +1464,20 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 270);
+    i0.ɵɵelementStart(0, "div", 271);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Template_div_click_0_listener() { const note_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Notes", note_r40.ID)); });
-    i0.ɵɵelementStart(1, "div", 214);
-    i0.ɵɵelement(2, "i", 268);
+    i0.ɵɵelementStart(1, "div", 215);
+    i0.ɵɵelement(2, "i", 269);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 215)(4, "div", 216);
+    i0.ɵɵelementStart(3, "div", 216)(4, "div", 217);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Conditional_6_Template, 2, 2, "div", 217);
-    i0.ɵɵelementStart(7, "div", 218);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Conditional_8_Template, 4, 4, "span", 219);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Conditional_6_Template, 2, 2, "div", 218);
+    i0.ɵɵelementStart(7, "div", 219);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Conditional_8_Template, 4, 4, "span", 220);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 221);
-    i0.ɵɵelement(10, "i", 200);
+    i0.ɵɵelementStart(9, "div", 222);
+    i0.ɵɵelement(10, "i", 201);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const note_r40 = ctx.$implicit;
@@ -1487,7 +1490,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r41 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 225);
+    i0.ɵɵelementStart(0, "div", 226);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r41); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Notes", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -1498,9 +1501,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Template, 11, 3, "div", 269, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Conditional_3_Template, 3, 1, "div", 212);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Template, 11, 3, "div", 270, _forTrack0);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Conditional_3_Template, 3, 1, "div", 213);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1511,14 +1514,14 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 15);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Template, 4, 1, "ng-template", 17);
-    i0.ɵɵelementStart(2, "div", 18)(3, "div", 19)(4, "div", 20);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Template, 4, 1, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 19)(3, "div", 20)(4, "div", 21);
     i0.ɵɵtext(5, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 204);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_7_Template, 3, 0, "button", 205);
+    i0.ɵɵelementStart(6, "div", 205);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_7_Template, 3, 0, "button", 206);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_8_Template, 7, 1, "div", 147)(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Template, 4, 1, "div", 206);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_8_Template, 7, 1, "div", 148)(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Template, 4, 1, "div", 207);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1528,30 +1531,209 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Template(rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.noteCount === 0 ? 8 : 9);
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 249);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 283);
+    i0.ɵɵtext(1, " Search ");
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 290);
+    i0.ɵɵtext(1, "Loading permissions\u2026");
+    i0.ɵɵelementEnd();
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 291);
+    i0.ɵɵtext(1, " No scopes assigned yet \u2014 permissions will appear here once you add scopes above. ");
+    i0.ɵɵelementEnd();
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 294);
+    i0.ɵɵtext(1, " No explicit permissions. Access falls back to this agent's ");
+    i0.ɵɵelementStart(2, "code");
+    i0.ɵɵtext(3, "SearchScopeAccess");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4, " setting. ");
+    i0.ɵɵelementEnd();
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li", 296);
+    i0.ɵɵelement(1, "i", 133);
+    i0.ɵɵelementStart(2, "strong");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 290);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(6, " \u2014 ");
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const p_r44 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-user", p_r44.PrincipalType === "User")("fa-users", p_r44.PrincipalType === "Role");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(p_r44.Principal);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("(", p_r44.PrincipalType, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", p_r44.Level === "None" ? "var(--mj-status-error-text)" : "var(--mj-text-primary)");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(p_r44.Level);
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 295);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Conditional_4_For_2_Template, 9, 9, "li", 296, _forTrack3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const s_r45 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(s_r45.Permissions);
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 292)(1, "div", 293);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Conditional_3_Template, 5, 0, "div", 294)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Conditional_4_Template, 3, 0, "ul", 295);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const s_r45 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(s_r45.ScopeName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(s_r45.Permissions.length === 0 ? 3 : 4);
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_For_1_Template, 5, 2, "div", 292, _forTrack2);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵrepeater(ctx_r1.PermissionSummary);
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 284)(1, "h4");
+    i0.ɵɵtext(2, "Assigned Scopes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 21)(4, "strong");
+    i0.ɵɵtext(5, "Pre-Execution");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(6, " scopes are injected automatically before the first LLM call. ");
+    i0.ɵɵelementStart(7, "strong");
+    i0.ɵɵtext(8, "Agent-Invoked");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(9, " scopes are callable via the Scoped Search tool during execution. ");
+    i0.ɵɵelementStart(10, "strong");
+    i0.ɵɵtext(11, "Both");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(12, " covers both paths. ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "mj-search-scope-child-grid", 285);
+    i0.ɵɵlistener("RowsChanged", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Template_mj_search_scope_child_grid_RowsChanged_13_listener() { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.LoadPermissionSummary()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 286)(15, "h4", 287);
+    i0.ɵɵelement(16, "i", 288);
+    i0.ɵɵtext(17, " Effective scope permissions ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "p", 289);
+    i0.ɵɵtext(19, " Per-user / per-role grants on the scopes assigned above. Edit grants in ");
+    i0.ɵɵelementStart(20, "strong");
+    i0.ɵɵtext(21, "Knowledge Hub Config \u2192 Search Scopes \u2192 Permissions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(22, ". ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(23, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_23_Template, 2, 0, "div", 290)(24, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_24_Template, 2, 0, "div", 291)(25, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Conditional_25_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(13);
+    i0.ɵɵproperty("ParentID", ctx_r1.record.ID)("Columns", ctx_r1.AgentSearchScopeColumns)("Disabled", !ctx_r1.EditMode);
+    i0.ɵɵadvance(10);
+    i0.ɵɵconditional(ctx_r1.IsLoadingPermissions ? 23 : ctx_r1.PermissionSummary.length === 0 ? 24 : 25);
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 16);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_ng_template_1_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(2, "div", 19)(3, "div", 20)(4, "div", 21);
+    i0.ɵɵtext(5, " Control this agent's access to ");
+    i0.ɵɵelementStart(6, "strong");
+    i0.ɵɵtext(7, "Scoped Search");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(8, " and assign the scopes it can use for pre-execution RAG or agent-invoked search. ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 272)(10, "label", 273)(11, "input", 274);
+    i0.ɵɵlistener("change", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Template_input_change_11_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.record.SearchScopeAccess = "All"); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(12, "i", 275);
+    i0.ɵɵelementStart(13, "div", 276)(14, "div", 277);
+    i0.ɵɵtext(15, "All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 278);
+    i0.ɵɵtext(17, "Can use any scope including Global. No scope restriction.");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(18, "label", 273)(19, "input", 279);
+    i0.ɵɵlistener("change", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Template_input_change_19_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.record.SearchScopeAccess = "Assigned"); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(20, "i", 280);
+    i0.ɵɵelementStart(21, "div", 276)(22, "div", 277);
+    i0.ɵɵtext(23, "Assigned");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 278);
+    i0.ɵɵtext(25, "Can use ONLY scopes listed below. Other scopes are rejected with ACCESS_DENIED.");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(26, "label", 273)(27, "input", 281);
+    i0.ɵɵlistener("change", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Template_input_change_27_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.record.SearchScopeAccess = "None"); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(28, "i", 282);
+    i0.ɵɵelementStart(29, "div", 276)(30, "div", 277);
+    i0.ɵɵtext(31, "None");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "div", 278);
+    i0.ɵɵtext(33, "No search capability. The Scoped Search action is disabled for this agent.");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵconditionalCreate(34, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Conditional_34_Template, 26, 4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("search", false));
+    i0.ɵɵadvance(10);
+    i0.ɵɵclassProp("active", ctx_r1.record.SearchScopeAccess === "All");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.record.SearchScopeAccess === "All")("disabled", !ctx_r1.EditMode);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("active", ctx_r1.record.SearchScopeAccess === "Assigned");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.record.SearchScopeAccess === "Assigned")("disabled", !ctx_r1.EditMode);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("active", ctx_r1.record.SearchScopeAccess === "None");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.record.SearchScopeAccess === "None")("disabled", !ctx_r1.EditMode);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r1.record.SearchScopeAccess !== "None" ? 34 : -1);
+} }
+function MJAIAgentFormComponentExtended_Conditional_0_ng_template_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 250);
     i0.ɵɵtext(1, " Payload Management ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_ng_template_140_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 271);
+function MJAIAgentFormComponentExtended_Conditional_0_ng_template_141_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 288);
     i0.ɵɵtext(1, " Execution Guardrails ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_ng_template_151_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 272);
+function MJAIAgentFormComponentExtended_Conditional_0_ng_template_152_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 297);
     i0.ɵɵtext(1, " Configuration ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_171_Template(rf, ctx) { if (rf & 1) {
-    const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 273);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_171_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_172_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 298);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_172_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r46); const ctx_r1 = i0.ɵɵnextContext(2); 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(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Status);
     i0.ɵɵproperty("Data", ctx_r1.statusOptions)("ValuePrimitive", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_172_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 82);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_173_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1559,18 +1741,18 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_172_Template(r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Status || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_183_Template(rf, ctx) { if (rf & 1) {
-    const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 274);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_183_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TypeID, $event) || (ctx_r1.record.TypeID = $event); return i0.ɵɵresetView($event); });
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_184_Template(rf, ctx) { if (rf & 1) {
+    const _r47 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dropdown", 299);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_184_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r47); const ctx_r1 = i0.ɵɵnextContext(2); 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(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.TypeID);
     i0.ɵɵproperty("Data", ctx_r1.agentTypes)("ValuePrimitive", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_184_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 82);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_185_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1578,17 +1760,17 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_184_Template(r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Type || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_195_Template(rf, ctx) { if (rf & 1) {
-    const _r44 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-tree-dropdown", 275);
-    i0.ɵɵlistener("ValueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_195_Template_mj_tree_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r44); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCategoryChange($event)); });
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_196_Template(rf, ctx) { if (rf & 1) {
+    const _r48 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-tree-dropdown", 300);
+    i0.ɵɵlistener("ValueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_196_Template_mj_tree_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r48); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCategoryChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("BranchConfig", ctx_r1.CategoryBranchConfig)("Value", ctx_r1.SelectedCategoryKey)("Clearable", true)("EnableSearch", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_196_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 82);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_197_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1596,8 +1778,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_196_Template(r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Category || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 282);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 307);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1605,29 +1787,29 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditiona
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.selectedContextCompressionPrompt.Name);
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 283);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 308);
     i0.ɵɵtext(1, "No prompt selected");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r46 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 287);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
-    i0.ɵɵelement(1, "i", 288);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r50 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 312);
+    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r50); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
+    i0.ɵɵelement(1, "i", 313);
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 280)(1, "div", 281);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_2_Template, 2, 1, "span", 282)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_3_Template, 2, 0, "span", 283);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r49 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 305)(1, "div", 306);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Conditional_2_Template, 2, 1, "span", 307)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Conditional_3_Template, 2, 0, "span", 308);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 284)(5, "button", 285);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r45); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
-    i0.ɵɵelement(6, "i", 153);
+    i0.ɵɵelementStart(4, "div", 309)(5, "button", 310);
+    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r49); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
+    i0.ɵɵelement(6, "i", 154);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_8_Template, 2, 0, "button", 286);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Conditional_8_Template, 2, 0, "button", 311);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1638,8 +1820,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditiona
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 8 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 82);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1647,42 +1829,42 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditiona
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate((ctx_r1.selectedContextCompressionPrompt == null ? null : ctx_r1.selectedContextCompressionPrompt.Name) || ctx_r1.record.ContextCompressionPrompt || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75)(1, "div", 76)(2, "div", 77);
-    i0.ɵɵelement(3, "i", 276);
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76)(1, "div", 77)(2, "div", 78);
+    i0.ɵɵelement(3, "i", 301);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 79)(5, "h4");
+    i0.ɵɵelementStart(4, "div", 80)(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", 80);
-    i0.ɵɵelement(10, "mj-form-field", 277);
+    i0.ɵɵelementStart(9, "div", 81);
+    i0.ɵɵelement(10, "mj-form-field", 302);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 75)(12, "div", 76)(13, "div", 77);
-    i0.ɵɵelement(14, "i", 278);
+    i0.ɵɵelementStart(11, "div", 76)(12, "div", 77)(13, "div", 78);
+    i0.ɵɵelement(14, "i", 303);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 79)(16, "h4");
+    i0.ɵɵelementStart(15, "div", 80)(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", 80);
-    i0.ɵɵelement(21, "mj-form-field", 279);
+    i0.ɵɵelementStart(20, "div", 81);
+    i0.ɵɵelement(21, "mj-form-field", 304);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 75)(23, "div", 76)(24, "div", 77);
-    i0.ɵɵelement(25, "i", 261);
+    i0.ɵɵelementStart(22, "div", 76)(23, "div", 77)(24, "div", 78);
+    i0.ɵɵelement(25, "i", 262);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 79)(27, "h4");
+    i0.ɵɵelementStart(26, "div", 80)(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", 80);
-    i0.ɵɵconditionalCreate(32, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Template, 9, 3, "div", 280)(33, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_33_Template, 2, 1, "span", 82);
+    i0.ɵɵelementStart(31, "div", 81);
+    i0.ɵɵconditionalCreate(32, MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_32_Template, 9, 3, "div", 305)(33, MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Conditional_33_Template, 2, 1, "span", 83);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -1708,327 +1890,328 @@ function MJAIAgentFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Template, 15, 5, "mj-accordion-panel", 13);
     i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Template, 8, 3, "mj-accordion-panel", 14);
     i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Template, 10, 4, "mj-accordion-panel", 15);
-    i0.ɵɵelementStart(13, "mj-accordion-panel", 16);
-    i0.ɵɵtemplate(14, MJAIAgentFormComponentExtended_Conditional_0_ng_template_14_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(15, "div", 18)(16, "div", 19)(17, "div", 20);
-    i0.ɵɵtext(18, " Configure how this agent handles data payloads, path routing, and validation between parent and child agents. ");
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_13_Template, 35, 14, "mj-accordion-panel", 16);
+    i0.ɵɵelementStart(14, "mj-accordion-panel", 17);
+    i0.ɵɵtemplate(15, MJAIAgentFormComponentExtended_Conditional_0_ng_template_15_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(16, "div", 19)(17, "div", 20)(18, "div", 21);
+    i0.ɵɵtext(19, " Configure how this agent handles data payloads, path routing, and validation between parent and child agents. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 21)(20, "h3", 22);
-    i0.ɵɵelement(21, "i", 23);
-    i0.ɵɵtext(22, " Payload Scope ");
+    i0.ɵɵelementStart(20, "div", 22)(21, "h3", 23);
+    i0.ɵɵelement(22, "i", 24);
+    i0.ɵɵtext(23, " Payload Scope ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 24)(24, "div", 25)(25, "label", 26);
-    i0.ɵɵtext(26, "Payload Scope Path");
+    i0.ɵɵelementStart(24, "div", 25)(25, "div", 26)(26, "label", 27);
+    i0.ɵɵtext(27, "Payload Scope Path");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "p", 27);
-    i0.ɵɵtext(28, " Specify a path within the parent payload that this sub-agent should operate on. Leave empty to receive the entire payload. ");
+    i0.ɵɵelementStart(28, "p", 28);
+    i0.ɵɵtext(29, " 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(29, "div", 28);
-    i0.ɵɵelement(30, "mj-form-field", 29);
-    i0.ɵɵelementStart(31, "div", 30);
-    i0.ɵɵelement(32, "i", 31);
-    i0.ɵɵelementStart(33, "span");
-    i0.ɵɵtext(34, "Example: ");
-    i0.ɵɵelementStart(35, "code");
-    i0.ɵɵtext(36, "/customer/profile");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(37, " or ");
-    i0.ɵɵelementStart(38, "code");
-    i0.ɵɵtext(39, "/analysis/results");
+    i0.ɵɵelementStart(30, "div", 29);
+    i0.ɵɵelement(31, "mj-form-field", 30);
+    i0.ɵɵelementStart(32, "div", 31);
+    i0.ɵɵelement(33, "i", 32);
+    i0.ɵɵelementStart(34, "span");
+    i0.ɵɵtext(35, "Example: ");
+    i0.ɵɵelementStart(36, "code");
+    i0.ɵɵtext(37, "/customer/profile");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(38, " or ");
+    i0.ɵɵelementStart(39, "code");
+    i0.ɵɵtext(40, "/analysis/results");
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(40, "div", 21)(41, "h3", 22);
-    i0.ɵɵelement(42, "i", 32);
-    i0.ɵɵtext(43, " Path Configuration ");
+    i0.ɵɵelementStart(41, "div", 22)(42, "h3", 23);
+    i0.ɵɵelement(43, "i", 33);
+    i0.ɵɵtext(44, " Path Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(44, "div", 33)(45, "div", 34)(46, "div", 35)(47, "div", 36);
-    i0.ɵɵelement(48, "i", 37);
+    i0.ɵɵelementStart(45, "div", 34)(46, "div", 35)(47, "div", 36)(48, "div", 37);
+    i0.ɵɵelement(49, "i", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(49, "div", 38)(50, "h4");
-    i0.ɵɵtext(51, "Downstream Paths");
+    i0.ɵɵelementStart(50, "div", 39)(51, "h4");
+    i0.ɵɵtext(52, "Downstream Paths");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "p");
-    i0.ɵɵtext(53, "JSON array of paths to pass to sub-agents");
+    i0.ɵɵelementStart(53, "p");
+    i0.ɵɵtext(54, "JSON array of paths to pass to sub-agents");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(54, "div", 39)(55, "div", 40)(56, "mj-code-editor", 41);
-    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_56_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
+    i0.ɵɵelementStart(55, "div", 40)(56, "div", 41)(57, "mj-code-editor", 42);
+    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_57_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(57, "div", 42);
-    i0.ɵɵelement(58, "i", 43);
-    i0.ɵɵtext(59, " Use ");
-    i0.ɵɵelementStart(60, "code");
-    i0.ɵɵtext(61, "[\"*\"]");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(62, " to pass entire payload or specify paths like ");
-    i0.ɵɵelementStart(63, "code");
-    i0.ɵɵtext(64, "[\"user.id\", \"order.*\"]");
+    i0.ɵɵelementStart(58, "div", 43);
+    i0.ɵɵelement(59, "i", 44);
+    i0.ɵɵtext(60, " Use ");
+    i0.ɵɵelementStart(61, "code");
+    i0.ɵɵtext(62, "[\"*\"]");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(63, " to pass entire payload or specify paths like ");
+    i0.ɵɵelementStart(64, "code");
+    i0.ɵɵtext(65, "[\"user.id\", \"order.*\"]");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(65, "div", 34)(66, "div", 35)(67, "div", 44);
-    i0.ɵɵelement(68, "i", 45);
+    i0.ɵɵelementStart(66, "div", 35)(67, "div", 36)(68, "div", 45);
+    i0.ɵɵelement(69, "i", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(69, "div", 38)(70, "h4");
-    i0.ɵɵtext(71, "Upstream Paths");
+    i0.ɵɵelementStart(70, "div", 39)(71, "h4");
+    i0.ɵɵtext(72, "Upstream Paths");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(72, "p");
-    i0.ɵɵtext(73, "JSON array of paths sub-agents can write back");
+    i0.ɵɵelementStart(73, "p");
+    i0.ɵɵtext(74, "JSON array of paths sub-agents can write back");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(74, "div", 39)(75, "div", 40)(76, "mj-code-editor", 41);
-    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_76_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
+    i0.ɵɵelementStart(75, "div", 40)(76, "div", 41)(77, "mj-code-editor", 42);
+    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_77_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(77, "div", 42);
-    i0.ɵɵelement(78, "i", 43);
-    i0.ɵɵtext(79, " Use ");
-    i0.ɵɵelementStart(80, "code");
-    i0.ɵɵtext(81, "[\"*\"]");
+    i0.ɵɵelementStart(78, "div", 43);
+    i0.ɵɵelement(79, "i", 44);
+    i0.ɵɵtext(80, " Use ");
+    i0.ɵɵelementStart(81, "code");
+    i0.ɵɵtext(82, "[\"*\"]");
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(82, " to allow all writes or limit to specific paths ");
+    i0.ɵɵtext(83, " to allow all writes or limit to specific paths ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(83, "div", 34)(84, "div", 35)(85, "div", 46);
-    i0.ɵɵelement(86, "i", 47);
+    i0.ɵɵelementStart(84, "div", 35)(85, "div", 36)(86, "div", 47);
+    i0.ɵɵelement(87, "i", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(87, "div", 38)(88, "h4");
-    i0.ɵɵtext(89, "Self Read Paths");
+    i0.ɵɵelementStart(88, "div", 39)(89, "h4");
+    i0.ɵɵtext(90, "Self Read Paths");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(90, "p");
-    i0.ɵɵtext(91, "JSON array of paths this agent can read");
+    i0.ɵɵelementStart(91, "p");
+    i0.ɵɵtext(92, "JSON array of paths this agent can read");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(92, "div", 39)(93, "div", 40)(94, "mj-code-editor", 41);
-    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_94_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
+    i0.ɵɵelementStart(93, "div", 40)(94, "div", 41)(95, "mj-code-editor", 42);
+    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_95_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(95, "div", 42);
-    i0.ɵɵelement(96, "i", 43);
-    i0.ɵɵtext(97, " Paths this agent's prompts can read from the payload ");
+    i0.ɵɵelementStart(96, "div", 43);
+    i0.ɵɵelement(97, "i", 44);
+    i0.ɵɵtext(98, " Paths this agent's prompts can read from the payload ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(98, "div", 34)(99, "div", 35)(100, "div", 48);
-    i0.ɵɵelement(101, "i", 49);
+    i0.ɵɵelementStart(99, "div", 35)(100, "div", 36)(101, "div", 49);
+    i0.ɵɵelement(102, "i", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(102, "div", 38)(103, "h4");
-    i0.ɵɵtext(104, "Self Write Paths");
+    i0.ɵɵelementStart(103, "div", 39)(104, "h4");
+    i0.ɵɵtext(105, "Self Write Paths");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(105, "p");
-    i0.ɵɵtext(106, "JSON array of paths this agent can write to");
+    i0.ɵɵelementStart(106, "p");
+    i0.ɵɵtext(107, "JSON array of paths this agent can write to");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(107, "div", 39)(108, "div", 40)(109, "mj-code-editor", 41);
-    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_109_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
+    i0.ɵɵelementStart(108, "div", 40)(109, "div", 41)(110, "mj-code-editor", 42);
+    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_110_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(110, "div", 42);
-    i0.ɵɵelement(111, "i", 43);
-    i0.ɵɵtext(112, " Paths this agent's prompts can write back to the payload ");
+    i0.ɵɵelementStart(111, "div", 43);
+    i0.ɵɵelement(112, "i", 44);
+    i0.ɵɵtext(113, " Paths this agent's prompts can write back to the payload ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(113, "div", 21)(114, "h3", 22);
-    i0.ɵɵelement(115, "i", 50);
-    i0.ɵɵtext(116, " Final Payload Validation ");
+    i0.ɵɵelementStart(114, "div", 22)(115, "h3", 23);
+    i0.ɵɵelement(116, "i", 51);
+    i0.ɵɵtext(117, " Final Payload Validation ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(117, "div", 51)(118, "div", 52)(119, "div", 53)(120, "label", 54);
-    i0.ɵɵtext(121, "Validation Mode");
+    i0.ɵɵelementStart(118, "div", 52)(119, "div", 53)(120, "div", 54)(121, "label", 55);
+    i0.ɵɵtext(122, "Validation Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(122, "p", 55);
-    i0.ɵɵtext(123, "How to handle validation failures");
+    i0.ɵɵelementStart(123, "p", 56);
+    i0.ɵɵtext(124, "How to handle validation failures");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(124, "mj-form-field", 56);
+    i0.ɵɵelement(125, "mj-form-field", 57);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(125, "div", 53)(126, "label", 54);
-    i0.ɵɵtext(127, "Max Retries");
+    i0.ɵɵelementStart(126, "div", 54)(127, "label", 55);
+    i0.ɵɵtext(128, "Max Retries");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(128, "p", 55);
-    i0.ɵɵtext(129, "Maximum validation retry attempts");
+    i0.ɵɵelementStart(129, "p", 56);
+    i0.ɵɵtext(130, "Maximum validation retry attempts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(130, "mj-form-field", 57);
+    i0.ɵɵelement(131, "mj-form-field", 58);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(131, "div", 58)(132, "label", 59);
-    i0.ɵɵelement(133, "i", 60);
-    i0.ɵɵtext(134, " Validation Schema ");
+    i0.ɵɵelementStart(132, "div", 59)(133, "label", 60);
+    i0.ɵɵelement(134, "i", 61);
+    i0.ɵɵtext(135, " Validation Schema ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(135, "p", 61);
-    i0.ɵɵtext(136, " JSON schema or validation rules for the final payload structure ");
+    i0.ɵɵelementStart(136, "p", 62);
+    i0.ɵɵtext(137, " JSON schema or validation rules for the final payload structure ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(137, "div", 62)(138, "mj-code-editor", 63);
-    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_138_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
+    i0.ɵɵelementStart(138, "div", 63)(139, "mj-code-editor", 64);
+    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_code_editor_valueChange_139_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
     i0.ɵɵelementEnd()()()()()()();
-    i0.ɵɵelementStart(139, "mj-accordion-panel", 64);
-    i0.ɵɵtemplate(140, MJAIAgentFormComponentExtended_Conditional_0_ng_template_140_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(141, "div", 18)(142, "div", 19)(143, "div", 20);
-    i0.ɵɵtext(144, " Set limits to prevent runaway agent executions and control resource usage. ");
+    i0.ɵɵelementStart(140, "mj-accordion-panel", 65);
+    i0.ɵɵtemplate(141, MJAIAgentFormComponentExtended_Conditional_0_ng_template_141_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(142, "div", 19)(143, "div", 20)(144, "div", 21);
+    i0.ɵɵtext(145, " Set limits to prevent runaway agent executions and control resource usage. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(145, "div", 65);
-    i0.ɵɵelement(146, "mj-form-field", 66)(147, "mj-form-field", 67)(148, "mj-form-field", 68)(149, "mj-form-field", 69);
+    i0.ɵɵelementStart(146, "div", 66);
+    i0.ɵɵelement(147, "mj-form-field", 67)(148, "mj-form-field", 68)(149, "mj-form-field", 69)(150, "mj-form-field", 70);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(150, "mj-accordion-panel", 70);
-    i0.ɵɵtemplate(151, MJAIAgentFormComponentExtended_Conditional_0_ng_template_151_Template, 2, 0, "ng-template", 17);
-    i0.ɵɵelementStart(152, "div", 18)(153, "div", 19)(154, "div", 20);
-    i0.ɵɵtext(155, " Configure agent behavior, execution settings, and advanced features. ");
+    i0.ɵɵelementStart(151, "mj-accordion-panel", 71);
+    i0.ɵɵtemplate(152, MJAIAgentFormComponentExtended_Conditional_0_ng_template_152_Template, 2, 0, "ng-template", 18);
+    i0.ɵɵelementStart(153, "div", 19)(154, "div", 20)(155, "div", 21);
+    i0.ɵɵtext(156, " Configure agent behavior, execution settings, and advanced features. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(156, "div", 71)(157, "h3", 72);
-    i0.ɵɵelement(158, "i", 73);
-    i0.ɵɵtext(159, " Identity & Behavior ");
+    i0.ɵɵelementStart(157, "div", 72)(158, "h3", 73);
+    i0.ɵɵelement(159, "i", 74);
+    i0.ɵɵtext(160, " Identity & Behavior ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(160, "div", 74)(161, "div", 75)(162, "div", 76)(163, "div", 77);
-    i0.ɵɵelement(164, "i", 78);
+    i0.ɵɵelementStart(161, "div", 75)(162, "div", 76)(163, "div", 77)(164, "div", 78);
+    i0.ɵɵelement(165, "i", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(165, "div", 79)(166, "h4");
-    i0.ɵɵtext(167, "Agent Status");
+    i0.ɵɵelementStart(166, "div", 80)(167, "h4");
+    i0.ɵɵtext(168, "Agent Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(168, "p");
-    i0.ɵɵtext(169, "Current availability and operational status");
+    i0.ɵɵelementStart(169, "p");
+    i0.ɵɵtext(170, "Current availability and operational status");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(170, "div", 80);
-    i0.ɵɵconditionalCreate(171, MJAIAgentFormComponentExtended_Conditional_0_Conditional_171_Template, 1, 3, "mj-dropdown", 81)(172, MJAIAgentFormComponentExtended_Conditional_0_Conditional_172_Template, 2, 1, "span", 82);
+    i0.ɵɵelementStart(171, "div", 81);
+    i0.ɵɵconditionalCreate(172, MJAIAgentFormComponentExtended_Conditional_0_Conditional_172_Template, 1, 3, "mj-dropdown", 82)(173, MJAIAgentFormComponentExtended_Conditional_0_Conditional_173_Template, 2, 1, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(173, "div", 75)(174, "div", 76)(175, "div", 77);
-    i0.ɵɵelement(176, "i", 83);
+    i0.ɵɵelementStart(174, "div", 76)(175, "div", 77)(176, "div", 78);
+    i0.ɵɵelement(177, "i", 84);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(177, "div", 79)(178, "h4");
-    i0.ɵɵtext(179, "Agent Type");
+    i0.ɵɵelementStart(178, "div", 80)(179, "h4");
+    i0.ɵɵtext(180, "Agent Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(180, "p");
-    i0.ɵɵtext(181, "Category and system-level behavior");
+    i0.ɵɵelementStart(181, "p");
+    i0.ɵɵtext(182, "Category and system-level behavior");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(182, "div", 80);
-    i0.ɵɵconditionalCreate(183, MJAIAgentFormComponentExtended_Conditional_0_Conditional_183_Template, 1, 3, "mj-dropdown", 84)(184, MJAIAgentFormComponentExtended_Conditional_0_Conditional_184_Template, 2, 1, "span", 82);
+    i0.ɵɵelementStart(183, "div", 81);
+    i0.ɵɵconditionalCreate(184, MJAIAgentFormComponentExtended_Conditional_0_Conditional_184_Template, 1, 3, "mj-dropdown", 85)(185, MJAIAgentFormComponentExtended_Conditional_0_Conditional_185_Template, 2, 1, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(185, "div", 75)(186, "div", 76)(187, "div", 77);
-    i0.ɵɵelement(188, "i", 85);
+    i0.ɵɵelementStart(186, "div", 76)(187, "div", 77)(188, "div", 78);
+    i0.ɵɵelement(189, "i", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(189, "div", 79)(190, "h4");
-    i0.ɵɵtext(191, "Category");
+    i0.ɵɵelementStart(190, "div", 80)(191, "h4");
+    i0.ɵɵtext(192, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(192, "p");
-    i0.ɵɵtext(193, "Organizational category for this agent");
+    i0.ɵɵelementStart(193, "p");
+    i0.ɵɵtext(194, "Organizational category for this agent");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(194, "div", 80);
-    i0.ɵɵconditionalCreate(195, MJAIAgentFormComponentExtended_Conditional_0_Conditional_195_Template, 1, 4, "mj-tree-dropdown", 86)(196, MJAIAgentFormComponentExtended_Conditional_0_Conditional_196_Template, 2, 1, "span", 82);
+    i0.ɵɵelementStart(195, "div", 81);
+    i0.ɵɵconditionalCreate(196, MJAIAgentFormComponentExtended_Conditional_0_Conditional_196_Template, 1, 4, "mj-tree-dropdown", 87)(197, MJAIAgentFormComponentExtended_Conditional_0_Conditional_197_Template, 2, 1, "span", 83);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(197, "div", 75)(198, "div", 76)(199, "div", 77);
-    i0.ɵɵelement(200, "i", 87);
+    i0.ɵɵelementStart(198, "div", 76)(199, "div", 77)(200, "div", 78);
+    i0.ɵɵelement(201, "i", 88);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(201, "div", 79)(202, "h4");
-    i0.ɵɵtext(203, "Expose as Action");
+    i0.ɵɵelementStart(202, "div", 80)(203, "h4");
+    i0.ɵɵtext(204, "Expose as Action");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(204, "p");
-    i0.ɵɵtext(205, "Make available as an action for other agents");
+    i0.ɵɵelementStart(205, "p");
+    i0.ɵɵtext(206, "Make available as an action for other agents");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(206, "div", 80);
-    i0.ɵɵelement(207, "mj-form-field", 88);
+    i0.ɵɵelementStart(207, "div", 81);
+    i0.ɵɵelement(208, "mj-form-field", 89);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(208, "div", 89)(209, "div", 76)(210, "div", 77);
-    i0.ɵɵelement(211, "i", 90);
+    i0.ɵɵelementStart(209, "div", 90)(210, "div", 77)(211, "div", 78);
+    i0.ɵɵelement(212, "i", 91);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(212, "div", 79)(213, "h4");
-    i0.ɵɵtext(214, "Description");
+    i0.ɵɵelementStart(213, "div", 80)(214, "h4");
+    i0.ɵɵtext(215, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(215, "p");
-    i0.ɵɵtext(216, "Detailed agent description and purpose");
+    i0.ɵɵelementStart(216, "p");
+    i0.ɵɵtext(217, "Detailed agent description and purpose");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(217, "div", 80);
-    i0.ɵɵelement(218, "mj-form-field", 91);
+    i0.ɵɵelementStart(218, "div", 81);
+    i0.ɵɵelement(219, "mj-form-field", 92);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(219, "div", 71)(220, "h3", 72);
-    i0.ɵɵelement(221, "i", 92);
-    i0.ɵɵtext(222, " Execution Settings ");
+    i0.ɵɵelementStart(220, "div", 72)(221, "h3", 73);
+    i0.ɵɵelement(222, "i", 93);
+    i0.ɵɵtext(223, " Execution Settings ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(223, "div", 74)(224, "div", 75)(225, "div", 76)(226, "div", 77);
-    i0.ɵɵelement(227, "i", 93);
+    i0.ɵɵelementStart(224, "div", 75)(225, "div", 76)(226, "div", 77)(227, "div", 78);
+    i0.ɵɵelement(228, "i", 94);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(228, "div", 79)(229, "h4");
-    i0.ɵɵtext(230, "Execution Mode");
+    i0.ɵɵelementStart(229, "div", 80)(230, "h4");
+    i0.ɵɵtext(231, "Execution Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(231, "p");
-    i0.ɵɵtext(232, "How sub-agents are executed");
+    i0.ɵɵelementStart(232, "p");
+    i0.ɵɵtext(233, "How sub-agents are executed");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(233, "div", 80);
-    i0.ɵɵelement(234, "mj-form-field", 94);
+    i0.ɵɵelementStart(234, "div", 81);
+    i0.ɵɵelement(235, "mj-form-field", 95);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(235, "div", 75)(236, "div", 76)(237, "div", 77);
-    i0.ɵɵelement(238, "i", 95);
+    i0.ɵɵelementStart(236, "div", 76)(237, "div", 77)(238, "div", 78);
+    i0.ɵɵelement(239, "i", 96);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(239, "div", 79)(240, "h4");
-    i0.ɵɵtext(241, "Execution Order");
+    i0.ɵɵelementStart(240, "div", 80)(241, "h4");
+    i0.ɵɵtext(242, "Execution Order");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(242, "p");
-    i0.ɵɵtext(243, "Order when run with siblings");
+    i0.ɵɵelementStart(243, "p");
+    i0.ɵɵtext(244, "Order when run with siblings");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(244, "div", 80);
-    i0.ɵɵelement(245, "mj-form-field", 96);
+    i0.ɵɵelementStart(245, "div", 81);
+    i0.ɵɵelement(246, "mj-form-field", 97);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(246, "div", 75)(247, "div", 76)(248, "div", 77);
-    i0.ɵɵelement(249, "i", 97);
+    i0.ɵɵelementStart(247, "div", 76)(248, "div", 77)(249, "div", 78);
+    i0.ɵɵelement(250, "i", 98);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(250, "div", 79)(251, "h4");
-    i0.ɵɵtext(252, "Default Effort Level");
+    i0.ɵɵelementStart(251, "div", 80)(252, "h4");
+    i0.ɵɵtext(253, "Default Effort Level");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(253, "p");
-    i0.ɵɵtext(254, "Default effort level for all prompts (1-100)");
+    i0.ɵɵelementStart(254, "p");
+    i0.ɵɵtext(255, "Default effort level for all prompts (1-100)");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(255, "div", 80);
-    i0.ɵɵelement(256, "mj-form-field", 98);
-    i0.ɵɵelementStart(257, "div", 99);
-    i0.ɵɵelement(258, "i", 43);
-    i0.ɵɵtext(259, " Higher values request more thorough reasoning (1=minimal, 100=maximum) ");
+    i0.ɵɵelementStart(256, "div", 81);
+    i0.ɵɵelement(257, "mj-form-field", 99);
+    i0.ɵɵelementStart(258, "div", 100);
+    i0.ɵɵelement(259, "i", 44);
+    i0.ɵɵtext(260, " Higher values request more thorough reasoning (1=minimal, 100=maximum) ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(260, "div", 75)(261, "div", 76)(262, "div", 77);
-    i0.ɵɵelement(263, "i", 60);
+    i0.ɵɵelementStart(261, "div", 76)(262, "div", 77)(263, "div", 78);
+    i0.ɵɵelement(264, "i", 61);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(264, "div", 79)(265, "h4");
-    i0.ɵɵtext(266, "Driver Class");
+    i0.ɵɵelementStart(265, "div", 80)(266, "h4");
+    i0.ɵɵtext(267, "Driver Class");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(267, "p");
-    i0.ɵɵtext(268, "Custom implementation class");
+    i0.ɵɵelementStart(268, "p");
+    i0.ɵɵtext(269, "Custom implementation class");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(269, "div", 80);
-    i0.ɵɵelement(270, "mj-form-field", 100);
+    i0.ɵɵelementStart(270, "div", 81);
+    i0.ɵɵelement(271, "mj-form-field", 101);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(271, "div", 71)(272, "h3", 72);
-    i0.ɵɵelement(273, "i", 101);
-    i0.ɵɵtext(274, " Visual Identity ");
+    i0.ɵɵelementStart(272, "div", 72)(273, "h3", 73);
+    i0.ɵɵelement(274, "i", 102);
+    i0.ɵɵtext(275, " Visual Identity ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(275, "div", 74)(276, "div", 75)(277, "div", 76)(278, "div", 77);
-    i0.ɵɵelement(279, "i", 102);
+    i0.ɵɵelementStart(276, "div", 75)(277, "div", 76)(278, "div", 77)(279, "div", 78);
+    i0.ɵɵelement(280, "i", 103);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(280, "div", 79)(281, "h4");
-    i0.ɵɵtext(282, "Icon Class");
+    i0.ɵɵelementStart(281, "div", 80)(282, "h4");
+    i0.ɵɵtext(283, "Icon Class");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(283, "p");
-    i0.ɵɵtext(284, "Font Awesome icon class");
+    i0.ɵɵelementStart(284, "p");
+    i0.ɵɵtext(285, "Font Awesome icon class");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(285, "div", 80);
-    i0.ɵɵelement(286, "mj-form-field", 103);
-    i0.ɵɵelementStart(287, "div", 99);
-    i0.ɵɵelement(288, "i", 43);
-    i0.ɵɵtext(289, " Example: ");
-    i0.ɵɵelementStart(290, "code");
-    i0.ɵɵtext(291, "fa-solid fa-robot");
+    i0.ɵɵelementStart(286, "div", 81);
+    i0.ɵɵelement(287, "mj-form-field", 104);
+    i0.ɵɵelementStart(288, "div", 100);
+    i0.ɵɵelement(289, "i", 44);
+    i0.ɵɵtext(290, " Example: ");
+    i0.ɵɵelementStart(291, "code");
+    i0.ɵɵtext(292, "fa-solid fa-robot");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(292, "div", 75)(293, "div", 76)(294, "div", 77);
-    i0.ɵɵelement(295, "i", 104);
+    i0.ɵɵelementStart(293, "div", 76)(294, "div", 77)(295, "div", 78);
+    i0.ɵɵelement(296, "i", 105);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(296, "div", 79)(297, "h4");
-    i0.ɵɵtext(298, "Logo URL");
+    i0.ɵɵelementStart(297, "div", 80)(298, "h4");
+    i0.ɵɵtext(299, "Logo URL");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(299, "p");
-    i0.ɵɵtext(300, "URL for agent logo image");
+    i0.ɵɵelementStart(300, "p");
+    i0.ɵɵtext(301, "URL for agent logo image");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(301, "div", 80);
-    i0.ɵɵelement(302, "mj-form-field", 105);
-    i0.ɵɵelementStart(303, "div", 99);
-    i0.ɵɵelement(304, "i", 43);
-    i0.ɵɵtext(305, " Takes precedence over Icon Class ");
+    i0.ɵɵelementStart(302, "div", 81);
+    i0.ɵɵelement(303, "mj-form-field", 106);
+    i0.ɵɵelementStart(304, "div", 100);
+    i0.ɵɵelement(305, "i", 44);
+    i0.ɵɵtext(306, " Takes precedence over Icon Class ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(306, "div", 71)(307, "h3", 72);
-    i0.ɵɵelement(308, "i", 106);
-    i0.ɵɵtext(309, " Context Compression ");
+    i0.ɵɵelementStart(307, "div", 72)(308, "h3", 73);
+    i0.ɵɵelement(309, "i", 107);
+    i0.ɵɵtext(310, " Context Compression ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(310, "div", 74)(311, "div", 89)(312, "div", 76)(313, "div", 77);
-    i0.ɵɵelement(314, "i", 78);
+    i0.ɵɵelementStart(311, "div", 75)(312, "div", 90)(313, "div", 77)(314, "div", 78);
+    i0.ɵɵelement(315, "i", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(315, "div", 79)(316, "h4");
-    i0.ɵɵtext(317, "Enable Context Compression");
+    i0.ɵɵelementStart(316, "div", 80)(317, "h4");
+    i0.ɵɵtext(318, "Enable Context Compression");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(318, "p");
-    i0.ɵɵtext(319, "Automatically compress conversation context when message threshold is reached");
+    i0.ɵɵelementStart(319, "p");
+    i0.ɵɵtext(320, "Automatically compress conversation context when message threshold is reached");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(320, "div", 80)(321, "mj-form-field", 107);
-    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_form_field_valueChange_321_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
+    i0.ɵɵelementStart(321, "div", 81)(322, "mj-form-field", 108);
+    i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_form_field_valueChange_322_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(322, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Template, 34, 5);
+    i0.ɵɵconditionalCreate(323, MJAIAgentFormComponentExtended_Conditional_0_Conditional_323_Template, 34, 5);
     i0.ɵɵelementEnd()()()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -2052,6 +2235,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.record.ID ? 12 : -1);
     i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.record.ID ? 13 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("payload", false));
     i0.ɵɵadvance(17);
     i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
@@ -2082,11 +2267,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("config", false));
     i0.ɵɵadvance(21);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 171 : 172);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 172 : 173);
     i0.ɵɵadvance(12);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 183 : 184);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 184 : 185);
     i0.ɵɵadvance(12);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 195 : 196);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 196 : 197);
     i0.ɵɵadvance(12);
     i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(11);
@@ -2106,12 +2291,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(19);
     i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.EnableContextCompression ? 322 : -1);
+    i0.ɵɵconditional(ctx_r1.record.EnableContextCompression ? 323 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r47 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-agent-permissions-dialog", 289);
-    i0.ɵɵlistener("Closed", function MJAIAgentFormComponentExtended_Conditional_1_Template_mj_agent_permissions_dialog_Closed_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onPermissionsDialogClosed()); })("PermissionsChanged", function MJAIAgentFormComponentExtended_Conditional_1_Template_mj_agent_permissions_dialog_PermissionsChanged_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
+    const _r51 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-agent-permissions-dialog", 314);
+    i0.ɵɵlistener("Closed", function MJAIAgentFormComponentExtended_Conditional_1_Template_mj_agent_permissions_dialog_Closed_0_listener() { i0.ɵɵrestoreView(_r51); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onPermissionsDialogClosed()); })("PermissionsChanged", function MJAIAgentFormComponentExtended_Conditional_1_Template_mj_agent_permissions_dialog_PermissionsChanged_0_listener() { i0.ɵɵrestoreView(_r51); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -2204,8 +2389,37 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             actions: true,
             learningCycles: true,
             notes: true,
-            customSection: true
+            customSection: true,
+            searchScopes: false
         };
+        /** Column spec for the AIAgentSearchScope child grid (mockup #5). */
+        this.AgentSearchScopeColumns = [
+            { Field: 'SearchScopeID', Label: 'Scope', Type: 'lookup', LookupEntityName: 'MJ: Search Scopes', LookupFilter: "Status='Active'", Width: '200px' },
+            { Field: 'Phase', Label: 'Phase', Type: 'select', Options: [
+                    { Label: 'Pre-Execution (injected before LLM)', Value: 'PreExecution' },
+                    { Label: 'Agent-Invoked (tool-callable)', Value: 'AgentInvoked' },
+                    { Label: 'Both', Value: 'Both' },
+                ], Width: '220px' },
+            { Field: 'Priority', Label: 'Priority', Type: 'number', Placeholder: 'e.g. 10', Width: '90px' },
+            { Field: 'MaxResults', Label: 'Max Results', Type: 'number', Placeholder: '10', Width: '110px' },
+            { Field: 'MinScore', Label: 'Min Score', Type: 'number', Placeholder: '0.35', Width: '110px' },
+            { Field: 'QueryTemplateID', Label: 'Query Template', Type: 'lookup', LookupEntityName: 'Templates', Width: '180px' },
+            { Field: 'FusionWeightsOverride', Label: 'Fusion Weights Override', Type: 'code', Placeholder: '{ "vector": 2.0, "fulltext": 1.0 }' },
+            { Field: 'IsDefault', Label: 'Default', Type: 'checkbox', Width: '80px' },
+        ];
+        /**
+         * Read-only summary of SearchScopePermission rows that apply to the
+         * scopes this agent is assigned to. Drives a small audit table inside
+         * the agent form's Search section so an agent owner can see at a glance
+         * who has access to the scopes their agent uses, without navigating
+         * away to the Knowledge Hub Config dashboard's full audit surface.
+         *
+         * Each entry pairs a scope name with a list of permission rows
+         * (principal type + name + level). Rebuilt whenever the agent's
+         * AIAgentSearchScope assignments change.
+         */
+        this.PermissionSummary = [];
+        this.IsLoadingPermissions = false;
         this.preferencesLoaded = false;
         /** Whether the form header is collapsed to a single compact line */
         this.HeaderCollapsed = false;
@@ -2359,6 +2573,57 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 return this.allSubAgents;
         }
     }
+    /**
+     * Loads the permission summary for the scopes currently assigned to
+     * this agent. Called on agent load and after AIAgentSearchScope edits.
+     */
+    async LoadPermissionSummary() {
+        if (!this.record?.ID) {
+            this.PermissionSummary = [];
+            return;
+        }
+        this.IsLoadingPermissions = true;
+        try {
+            const rv = new RunView();
+            // 1. Fetch the agent's assigned scope IDs.
+            const assigned = await rv.RunView({
+                EntityName: 'MJ: AI Agent Search Scopes',
+                ExtraFilter: `AgentID='${this.record.ID}'`,
+                Fields: ['SearchScopeID', 'SearchScope'],
+                ResultType: 'simple',
+            });
+            if (!assigned.Success || !assigned.Results?.length) {
+                this.PermissionSummary = [];
+                return;
+            }
+            const scopeIds = assigned.Results.map(r => r.SearchScopeID);
+            const scopeNames = new Map(assigned.Results.map(r => [r.SearchScopeID, r.SearchScope ?? r.SearchScopeID]));
+            // 2. Fetch all permission rows for those scopes in one batch.
+            const idList = scopeIds.map(id => `'${id}'`).join(',');
+            const perms = await rv.RunView({
+                EntityName: 'MJ: Search Scope Permissions',
+                ExtraFilter: `SearchScopeID IN (${idList})`,
+                Fields: ['SearchScopeID', 'UserID', 'RoleID', 'User', 'Role', 'PermissionLevel'],
+                ResultType: 'simple',
+            });
+            const rows = perms.Success ? (perms.Results ?? []) : [];
+            // 3. Group by scope.
+            this.PermissionSummary = scopeIds.map(scopeId => ({
+                ScopeID: scopeId,
+                ScopeName: scopeNames.get(scopeId) ?? scopeId,
+                Permissions: rows
+                    .filter(r => UUIDsEqual(r.SearchScopeID, scopeId))
+                    .map(r => ({
+                    Principal: r.UserID ? (r.User ?? 'unknown user') : (r.Role ?? 'unknown role'),
+                    PrincipalType: (r.UserID ? 'User' : 'Role'),
+                    Level: r.PermissionLevel,
+                })),
+            }));
+        }
+        finally {
+            this.IsLoadingPermissions = false;
+        }
+    }
     // === User Preferences ===
     static { this.PREFS_KEY = 'ai-agent-form/preferences'; }
     /** Handle category selection change from the TreeDropdown */
@@ -2583,6 +2848,10 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         if (this.record?.ID) {
             await this.loadRelatedCounts(false); // no need to force refresh on initial load
             await this.loadCurrentAgentType();
+            // Phase 2A: load the permission summary for the scopes this
+            // agent is assigned to. Fire-and-forget — the panel renders an
+            // IsLoadingPermissions skeleton while it resolves.
+            void this.LoadPermissionSummary();
             // Schedule change detection - safer than manual detectChanges()
             this.cdr.markForCheck();
             // Defer custom section loading to next tick after DOM updates
@@ -2618,18 +2887,38 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             actions: true,
             learningCycles: true,
             notes: true,
-            customSection: true
+            customSection: true,
+            searchScopes: false
         };
-        this.cdr.detectChanges(); // update UI
+        // markForCheck (not detectChanges) — we're invoked from inside ngOnInit's
+        // await chain, which still sits within the host's CD pass. A synchronous
+        // detectChanges() here forces a check whose results dev-mode checkNoChanges
+        // re-verifies against state that further awaits below mutate (totalSubAgentCount
+        // 0→1 etc.), producing NG0100. markForCheck schedules a future CD pass that
+        // runs against fully-settled state.
+        this.cdr.markForCheck();
         if (forceRefresh) {
             await AIEngineBase.Instance.Config(true); // force refresh
         }
         try {
             // Clear unified sub-agents array
             this.allSubAgents = [];
-            // Load child sub-agents (ParentID-based)
+            // Track agent IDs we've already added so the same agent doesn't appear twice
+            // when it's both a structural child (ParentID) AND has an entry in the
+            // AI Agent Relationships table. Without this dedup, `filteredSubAgents`
+            // emits two items with the same `agent.ID`, the @for(track item.agent.ID)
+            // trips NG0955 ("duplicated keys") on every CD pass, and `totalSubAgentCount`
+            // becomes inconsistent with the visible list. Normalize the UUID for the
+            // Set key — see guides/UUID_COMPARISON_GUIDE.md.
+            const seenSubAgentIds = new Set();
+            // Load child sub-agents (ParentID-based) — these take precedence over
+            // relationship-based entries since ParentID is a structural relationship.
             const childAgents = AIEngineBase.Instance.Agents.filter(a => UUIDsEqual(a.ParentID, this.record.ID));
             for (const agent of childAgents) {
+                const key = NormalizeUUID(agent.ID);
+                if (seenSubAgentIds.has(key))
+                    continue;
+                seenSubAgentIds.add(key);
                 this.allSubAgents.push({
                     agent,
                     type: 'child'
@@ -2647,13 +2936,19 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
             if (relationshipsResult.Success && relationshipsResult.Results) {
                 for (const relationship of relationshipsResult.Results) {
                     const agent = AIEngineBase.Instance.Agents.find(a => UUIDsEqual(a.ID, relationship.SubAgentID));
-                    if (agent) {
-                        this.allSubAgents.push({
-                            agent,
-                            type: 'related',
-                            relationship
-                        });
-                    }
+                    if (!agent)
+                        continue;
+                    const key = NormalizeUUID(agent.ID);
+                    // Skip if the agent is already in the list as a child OR as another
+                    // active Relationship row pointing to the same SubAgentID.
+                    if (seenSubAgentIds.has(key))
+                        continue;
+                    seenSubAgentIds.add(key);
+                    this.allSubAgents.push({
+                        agent,
+                        type: 'related',
+                        relationship
+                    });
                 }
             }
             // Sort: child agents first, then by name
@@ -2739,9 +3034,13 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
                 actions: false,
                 learningCycles: false,
                 notes: false,
-                customSection: false
+                customSection: false,
+                searchScopes: false
             };
-            this.cdr.detectChanges();
+            // See the comment on the matching call at the top of this method:
+            // markForCheck instead of detectChanges so we don't fight the parent
+            // CD pass (this method runs inside ngOnInit's await chain).
+            this.cdr.markForCheck();
         }
     }
     /**
@@ -4494,14 +4793,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.customSectionContainer = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [["form", "ngForm"], ["customSectionContainer", ""], [3, "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [3, "Agent"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form"], [1, "agent-header"], [1, "agent-header-mini"], [1, "form-content"], ["id", "custom", 3, "Expanded"], ["id", "history", 3, "Expanded", "Disabled"], ["id", "actions", 3, "Expanded", "Disabled"], ["id", "subagents", 3, "Expanded", "Disabled"], ["id", "prompts", 3, "Expanded", "Disabled"], ["id", "learning", 3, "Expanded", "Disabled"], ["id", "notes", 3, "Expanded", "Disabled"], ["id", "payload", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "panel-content"], [1, "section-header"], [1, "section-description"], [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"], ["id", "guardrails", 3, "Expanded"], [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"], ["id", "config", 3, "Expanded"], [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"], [1, "fa-solid", "fa-sitemap"], ["TextField", "Name", "ValueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-folder-tree"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "BranchConfig", "Value", "Clearable", "EnableSearch"], [1, "fa-solid", "fa-bolt"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "Record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "Record"], [1, "agent-header-content"], ["title", "Minimize header", 1, "agent-header-toggle", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["type", "text", "name", "agentName", "placeholder", "Enter agent name...", 1, "mj-input", "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"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], ["type", "text", "name", "agentName", "placeholder", "Enter agent name...", 1, "mj-input", "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-external-link", 2, "margin-left", "4px", "font-size", "10px"], ["mjButton", "", "variant", "primary", "size", "lg", "title", "Run this AI agent", 3, "click", "disabled"], ["mjButton", "", "size", "lg", 3, "click", "title"], [1, "fa-solid"], ["title", "Expand header", 1, "agent-header-mini-expand", 3, "click"], [1, "fa-solid", "fa-chevron-down"], [1, "agent-header-mini-name"], [1, "agent-header-mini-status", 3, "background-color"], [1, "agent-header-mini-spacer"], ["title", "Refresh", 1, "agent-header-mini-btn", 3, "click"], [1, "agent-header-mini-status"], ["title", "Run agent", 1, "agent-header-mini-btn", "agent-header-mini-btn--primary", 3, "click", "disabled"], [1, "agent-header-mini-btn", 3, "click", "title"], [1, "panel-content", "custom-agent-type-section"], ["size", "medium", 3, "text"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "execution-history-panel"], ["text", "Loading execution history...", "size", "medium"], [1, "empty-state"], [1, "fa-solid", "fa-history"], [2, "margin-left", "8px"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "12px"], [1, "execution-search-bar"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search by Run ID...", 1, "mj-input", 3, "ngModelChange", "ngModel", "ngModelOptions"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "pagination-controls"], [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"], ["mjButton", "", "variant", "outline", 1, "page-nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "page-info"], [1, "fa-solid", "fa-chevron-right"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "view-all-btn", 3, "click"], [1, "fa-solid", "fa-external-link"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "record-count"], [1, "loading-state"], [1, "header-actions"], ["mjButton", "", "variant", "primary", "size", "sm"], [1, "entity-list"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "primary"], ["mjButton", "", "variant", "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, "item-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove action", 1, "error-action"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove action", 1, "error-action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "section-header", "sub-agent-filter-header"], [1, "filter-controls"], [1, "mj-button-group"], ["mjButton", "", "size", "sm", 3, "click"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-share-nodes"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create a new child sub-agent that shares this agent's payload", 3, "click"], ["mjButton", "", "size", "sm", "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", "var(--mj-status-info)"], [1, "fa-solid", "fa-share-nodes", 2, "color", "var(--mj-brand-primary)"], [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"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Configure output mapping"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Advanced settings"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "error-action", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Configure output mapping", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Advanced settings", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "error-action", 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"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove prompt", 1, "error-action"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove prompt", 1, "error-action", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-cogs"], ["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"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [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", "mjButton", "", "variant", "outline", "size", "sm", 1, "prompt-select-btn", 3, "click"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "Closed", "PermissionsChanged", "Agent"]], template: function MJAIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Template, 323, 67, "mj-record-form-container", 2);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [["form", "ngForm"], ["customSectionContainer", ""], [3, "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [3, "Agent"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form"], [1, "agent-header"], [1, "agent-header-mini"], [1, "form-content"], ["id", "custom", 3, "Expanded"], ["id", "history", 3, "Expanded", "Disabled"], ["id", "actions", 3, "Expanded", "Disabled"], ["id", "subagents", 3, "Expanded", "Disabled"], ["id", "prompts", 3, "Expanded", "Disabled"], ["id", "learning", 3, "Expanded", "Disabled"], ["id", "notes", 3, "Expanded", "Disabled"], ["id", "search", 3, "Expanded"], ["id", "payload", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "panel-content"], [1, "section-header"], [1, "section-description"], [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"], ["id", "guardrails", 3, "Expanded"], [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"], ["id", "config", 3, "Expanded"], [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"], [1, "fa-solid", "fa-sitemap"], ["TextField", "Name", "ValueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModel", "Data", "ValuePrimitive"], [1, "fa-solid", "fa-folder-tree"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "BranchConfig", "Value", "Clearable", "EnableSearch"], [1, "fa-solid", "fa-bolt"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "", 3, "EditMode", "Record"], [1, "config-card", "full-width"], [1, "fa-solid", "fa-align-left"], ["FieldName", "Description", "Type", "textarea", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-layer-group"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-sort-numeric-down"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-tachometer-alt"], ["FieldName", "DefaultPromptEffortLevel", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "config-card-hint"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-icons"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-image"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "", 3, "valueChange", "EditMode", "Record"], [1, "agent-header-content"], ["title", "Minimize header", 1, "agent-header-toggle", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["type", "text", "name", "agentName", "placeholder", "Enter agent name...", 1, "mj-input", "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"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], ["type", "text", "name", "agentName", "placeholder", "Enter agent name...", 1, "mj-input", "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-external-link", 2, "margin-left", "4px", "font-size", "10px"], ["mjButton", "", "variant", "primary", "size", "lg", "title", "Run this AI agent", 3, "click", "disabled"], ["mjButton", "", "size", "lg", 3, "click", "title"], [1, "fa-solid"], ["title", "Expand header", 1, "agent-header-mini-expand", 3, "click"], [1, "fa-solid", "fa-chevron-down"], [1, "agent-header-mini-name"], [1, "agent-header-mini-status", 3, "background-color"], [1, "agent-header-mini-spacer"], ["title", "Refresh", 1, "agent-header-mini-btn", 3, "click"], [1, "agent-header-mini-status"], ["title", "Run agent", 1, "agent-header-mini-btn", "agent-header-mini-btn--primary", 3, "click", "disabled"], [1, "agent-header-mini-btn", 3, "click", "title"], [1, "panel-content", "custom-agent-type-section"], ["size", "medium", 3, "text"], [1, "fa-solid", "fa-puzzle-piece"], [1, "panel-content", "execution-history-panel"], ["text", "Loading execution history...", "size", "medium"], [1, "empty-state"], [1, "fa-solid", "fa-history"], [2, "margin-left", "8px"], [1, "fa-solid", "fa-spinner", "fa-spin", 2, "font-size", "12px"], [1, "execution-search-bar"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search by Run ID...", 1, "mj-input", 3, "ngModelChange", "ngModel", "ngModelOptions"], [1, "execution-history-list"], [1, "execution-card", 3, "expanded"], [1, "pagination-controls"], [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"], ["mjButton", "", "variant", "outline", 1, "page-nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "page-info"], [1, "fa-solid", "fa-chevron-right"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "view-all-btn", 3, "click"], [1, "fa-solid", "fa-external-link"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "record-count"], [1, "loading-state"], [1, "header-actions"], ["mjButton", "", "variant", "primary", "size", "sm"], [1, "entity-list"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["mjButton", "", "variant", "primary"], ["mjButton", "", "variant", "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, "item-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove action", 1, "error-action"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove action", 1, "error-action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "section-header", "sub-agent-filter-header"], [1, "filter-controls"], [1, "mj-button-group"], ["mjButton", "", "size", "sm", 3, "click"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-share-nodes"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create a new child sub-agent that shares this agent's payload", 3, "click"], ["mjButton", "", "size", "sm", "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", "var(--mj-status-info)"], [1, "fa-solid", "fa-share-nodes", 2, "color", "var(--mj-brand-primary)"], [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"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Configure output mapping"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Advanced settings"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "error-action", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Configure output mapping", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Advanced settings", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "error-action", 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"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove prompt", 1, "error-action"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Remove prompt", 1, "error-action", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "agent-search-access"], [1, "agent-search-access-option"], ["type", "radio", "name", "SearchScopeAccess", "value", "All", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-globe"], [1, "agent-search-access-text"], [1, "agent-search-access-title"], [1, "agent-search-access-desc"], ["type", "radio", "name", "SearchScopeAccess", "value", "Assigned", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-user-check"], ["type", "radio", "name", "SearchScopeAccess", "value", "None", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-ban"], [1, "fa-solid", "fa-magnifying-glass"], [1, "agent-search-grid-header"], ["ChildEntityName", "MJ: AI Agent Search Scopes", "ParentFieldName", "AgentID", "AddButtonLabel", "+ Assign another scope", "EmptyMessage", "No scopes assigned yet. Assign at least one if this agent will use Scoped Search.", 3, "RowsChanged", "ParentID", "Columns", "Disabled"], [1, "agent-search-section", 2, "margin-top", "16px"], [2, "margin", "0 0 8px 0"], [1, "fa-solid", "fa-shield-halved"], [1, "section-description", 2, "margin-bottom", "8px"], [2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-muted)", "font-style", "italic"], [2, "margin-bottom", "12px", "padding", "8px 12px", "background", "var(--mj-bg-surface-card)", "border", "1px solid var(--mj-border-subtle)", "border-radius", "4px"], [2, "font-weight", "600", "margin-bottom", "4px"], [2, "color", "var(--mj-text-muted)", "font-size", "0.9em"], [2, "margin", "4px 0 0 16px", "padding", "0"], [2, "font-size", "0.9em", "padding", "2px 0"], [1, "fa-solid", "fa-cogs"], ["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"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [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", "mjButton", "", "variant", "outline", "size", "sm", 1, "prompt-select-btn", 3, "click"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "Closed", "PermissionsChanged", "Agent"]], template: function MJAIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Template, 324, 68, "mj-record-form-container", 2);
             i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Template, 1, 1, "mj-agent-permissions-dialog", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.record ? 0 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowPermissionsDialog ? 1 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDropdownComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, i4.CodeEditorComponent, i5.LoadingComponent, i6.AgentPermissionsDialogComponent, i7.TreeDropdownComponent, i8.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\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: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n    transition: padding 0.2s ease;\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n}\n\n\n\n.agent-header-toggle[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-toggle[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-inverse);\n    font-size: 18px;\n}\n\n\n\n.agent-header-mini[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    height: 32px;\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 9px;\n}\n\n.agent-header-mini-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.agent-header-mini-status[_ngcontent-%COMP%] {\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.agent-header-mini-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.agent-header-mini-btn--primary[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-header-mini-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\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: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n    font-size: 16px !important;\n    font-weight: 500 !important;\n    height: 30px !important;\n    width: 100% !important;\n    max-width: 350px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-primary);\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\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: var(--mj-border-default);\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    color: var(--mj-text-muted);\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: row;\n    gap: 8px;\n    flex-shrink: 0;\n    align-items: center;\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-text-secondary);\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 13px;\n    color: var(--mj-status-error);\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: var(--mj-bg-page);\n    padding: 8px 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: 10px;\n    margin-bottom: 8px;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header {\n    background: var(--mj-bg-surface);\n    border: none;\n    padding: 10px 16px;\n    border-radius: 12px 12px 0 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-bg-surface);\n    border-radius: 0 0 12px 12px;\n}\n\n  .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    margin-right: 8px;\n}\n\n  .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: var(--mj-text-inverse);\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\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 var(--mj-border-default);\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 var(--mj-bg-surface-sunken);\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\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 var(--mj-bg-surface-sunken);\n    border-top: 4px solid var(--mj-brand-primary);\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 var(--mj-border-default);\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-status-success);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n}\n\n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n    color: var(--mj-text-inverse);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.item-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: var(--mj-text-muted);\n    font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\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: var(--mj-text-muted);\n    font-weight: normal;\n}\n\n.page-info[_ngcontent-%COMP%]   .fa-spinner[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.view-all-btn[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\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: var(--mj-text-primary);\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: var(--mj-brand-primary);\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: normal;\n    color: var(--mj-text-muted);\n    margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-brand-primary);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-text-muted);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\n    padding: 4px 8px;\n    background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: var(--mj-text-muted);\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-default);\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\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: var(--mj-border-default);\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: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    background: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-size: 13px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\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 var(--mj-border-default);\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: var(--mj-text-secondary);\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: var(--mj-status-error);\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-text-secondary);\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 var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    border: 2px dashed var(--mj-border-default);\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\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%]   .fa-search[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.metric-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-primary);\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: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-text-muted);\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 var(--mj-bg-surface-sunken);\n    background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\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: var(--mj-text-secondary);\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: var(--mj-status-error);\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-status-error);\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: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.payload-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.payload-field-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.payload-field-example[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.9rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.payload-path-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-status-success);\n}\n\n.payload-path-icon.upstream[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-read[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-write[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.payload-path-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.payload-path-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\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 var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.validation-field-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n}\n\n.validation-schema-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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 var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n    margin-bottom: 2rem;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.config-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.config-card-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\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.config-card-content[_ngcontent-%COMP%]     mj-form-field {\n    width: 100% !important;\n}\n\n.config-field-display[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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\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: var(--mj-text-inverse);\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 var(--mj-brand-primary);\n}\n\n.sub-agent-item.related-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid var(--mj-brand-primary);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]:hover {\n    transform: translateX(4px);\n}\n\n\n\n.payload-info[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\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: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDropdownComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, i4.CodeEditorComponent, i5.LoadingComponent, i6.AgentPermissionsDialogComponent, i7.TreeDropdownComponent, i8.SearchScopeChildGridComponent, i9.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\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: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n    transition: padding 0.2s ease;\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n}\n\n\n\n.agent-header-toggle[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-toggle[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-inverse);\n    font-size: 18px;\n}\n\n\n\n.agent-header-mini[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    height: 32px;\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-expand[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 9px;\n}\n\n.agent-header-mini-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.agent-header-mini-status[_ngcontent-%COMP%] {\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.agent-header-mini-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.agent-header-mini-btn--primary[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-header-mini-btn--primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.agent-header-mini-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\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: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n    font-size: 16px !important;\n    font-weight: 500 !important;\n    height: 30px !important;\n    width: 100% !important;\n    max-width: 350px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-primary);\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\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: var(--mj-border-default);\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    color: var(--mj-text-muted);\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: row;\n    gap: 8px;\n    flex-shrink: 0;\n    align-items: center;\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-text-secondary);\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 13px;\n    color: var(--mj-status-error);\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: var(--mj-bg-page);\n    padding: 8px 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: 10px;\n    margin-bottom: 8px;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header {\n    background: var(--mj-bg-surface);\n    border: none;\n    padding: 10px 16px;\n    border-radius: 12px 12px 0 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-bg-surface);\n    border-radius: 0 0 12px 12px;\n}\n\n  .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    margin-right: 8px;\n}\n\n  .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: var(--mj-text-inverse);\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\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 var(--mj-border-default);\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 var(--mj-bg-surface-sunken);\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\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: var(--mj-text-disabled);\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\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 var(--mj-bg-surface-sunken);\n    border-top: 4px solid var(--mj-brand-primary);\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 var(--mj-border-default);\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-status-success);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n}\n\n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n    color: var(--mj-text-inverse);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.item-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: var(--mj-text-muted);\n    font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\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: var(--mj-text-muted);\n    font-weight: normal;\n}\n\n.page-info[_ngcontent-%COMP%]   .fa-spinner[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.view-all-btn[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\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: var(--mj-text-primary);\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: var(--mj-brand-primary);\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: normal;\n    color: var(--mj-text-muted);\n    margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-brand-primary);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-text-muted);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\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: var(--mj-text-muted);\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: var(--mj-text-muted);\n    padding: 4px 8px;\n    background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: var(--mj-text-muted);\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-default);\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\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: var(--mj-border-default);\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: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    background: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-size: 13px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\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 var(--mj-border-default);\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: var(--mj-text-secondary);\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: var(--mj-status-error);\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-text-secondary);\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 var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    border: 2px dashed var(--mj-border-default);\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\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%]   .fa-search[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.metric-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-primary);\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: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-text-muted);\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 var(--mj-bg-surface-sunken);\n    background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.metric-detail[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\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: var(--mj-text-secondary);\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: var(--mj-status-error);\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-status-error);\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: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.payload-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.payload-field-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.payload-field-example[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.9rem;\n}\n\n.payload-field-example[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.payload-path-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-status-success);\n}\n\n.payload-path-icon.upstream[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-read[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-write[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.payload-path-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.payload-path-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\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 var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.validation-field-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n}\n\n.validation-schema-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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 var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n    margin-bottom: 2rem;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.config-section-title[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.config-card-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\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.config-card-content[_ngcontent-%COMP%]     mj-form-field {\n    width: 100% !important;\n}\n\n.config-field-display[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.prompt-name[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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\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: var(--mj-text-inverse);\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 var(--mj-brand-primary);\n}\n\n.sub-agent-item.related-sub-agent[_ngcontent-%COMP%] {\n    border-left: 4px solid var(--mj-brand-primary);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]:hover {\n    transform: translateX(4px);\n}\n\n\n\n.payload-info[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\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}\n\n\n\n.agent-search-access[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n    margin: 8px 0 20px;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 24px 28px 1fr;\n    align-items: start;\n    gap: 10px;\n    padding: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    transition: background 120ms ease, border-color 120ms ease;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-search-access-option.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n    accent-color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    text-align: center;\n    margin-top: 2px;\n}\n\n.agent-search-access-text[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.agent-search-access-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.agent-search-access-desc[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    line-height: 1.3;\n}\n\n.agent-search-grid-header[_ngcontent-%COMP%] {\n    margin: 8px 0 12px;\n}\n\n.agent-search-grid-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n    font-size: 1rem;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n    .agent-search-access[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"] }); }
 };
 MJAIAgentFormComponentExtended = MJAIAgentFormComponentExtended_1 = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agents')
@@ -4509,10 +4808,10 @@ MJAIAgentFormComponentExtended = MJAIAgentFormComponentExtended_1 = __decorate([
 export { MJAIAgentFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIAgentFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-agent-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n    <form class=\"record-form\" #form=\"ngForm\">\n      <!-- Agent Header \u2014 expanded view -->\n      @if (!HeaderCollapsed) {\n        <div class=\"agent-header\">\n          <div class=\"agent-header-content\">\n            <button class=\"agent-header-toggle\" (click)=\"ToggleHeaderCollapsed()\"\n              title=\"Minimize header\">\n              <i class=\"fa-solid fa-chevron-up\"></i>\n            </button>\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                  <input type=\"text\" class=\"mj-input agent-name-input\"\n                    [(ngModel)]=\"record.Name\"\n                    name=\"agentName\"\n                    placeholder=\"Enter agent name...\">\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            <div class=\"agent-actions\">\n              @if (record.ID) {\n                <button mjButton variant=\"primary\" size=\"lg\"\n                  (click)=\"openTestHarness()\"\n                  [disabled]=\"record.Status !== 'Active'\"\n                  title=\"Run this AI agent\">\n                  <i class=\"fa-solid fa-play\"></i> Run\n                </button>\n                <button mjButton size=\"lg\"\n                  (click)=\"openPermissionsDialog()\"\n                  [title]=\"IsOpenToEveryone ? 'Open to everyone \u2014 click to manage permissions' : 'Restricted \u2014 click to manage permissions'\">\n                  <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n                  [style.color]=\"IsOpenToEveryone ? 'var(--mj-status-success)' : null\"></i>\n                  {{ IsOpenToEveryone ? 'Open' : 'Restricted' }}\n                </button>\n              }\n              <button mjButton variant=\"outline\" size=\"sm\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                <i class=\"fa-solid fa-refresh\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Agent Header \u2014 minimized floating bar -->\n      @if (HeaderCollapsed) {\n        <div class=\"agent-header-mini\">\n          <button class=\"agent-header-mini-expand\" (click)=\"ToggleHeaderCollapsed()\"\n            title=\"Expand header\">\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          </button>\n          <span class=\"agent-header-mini-name\">{{ record.Name || 'Untitled AI Agent' }}</span>\n          @if (record.Status) {\n            <span class=\"agent-header-mini-status\" [style.background-color]=\"getStatusBadgeColor()\">\n              {{ record.Status }}\n            </span>\n          }\n          <div class=\"agent-header-mini-spacer\"></div>\n          @if (record.ID) {\n            <button class=\"agent-header-mini-btn agent-header-mini-btn--primary\"\n              (click)=\"openTestHarness()\"\n              [disabled]=\"record.Status !== 'Active'\"\n              title=\"Run agent\">\n              <i class=\"fa-solid fa-play\"></i>\n            </button>\n            <button class=\"agent-header-mini-btn\"\n              (click)=\"openPermissionsDialog()\"\n              [title]=\"IsOpenToEveryone ? 'Open to everyone' : 'Restricted'\">\n              <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n              [style.color]=\"IsOpenToEveryone ? 'var(--mj-status-success)' : null\"></i>\n            </button>\n          }\n          <button class=\"agent-header-mini-btn\"\n            (click)=\"refreshRelatedData()\" title=\"Refresh\">\n            <i class=\"fa-solid fa-refresh\"></i>\n          </button>\n        </div>\n      }\n      <!-- Single Pane Layout with Expander Panels -->\n      <div class=\"form-content\">\n          <!-- Custom Agent Type Section (if defined) -->\n          @if (record.ID && agentType && agentType.UIFormSectionKey) {\n            <mj-accordion-panel id=\"custom\"\n              [Expanded]=\"GetSectionExpanded('custom', agentType.UIFormSectionExpandedByDefault)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n                </ng-template>\n                <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n                  @if (loadingStates.customSection) {\n                    <mj-loading text=\"Loading {{ agentType.Name }} configuration...\" size=\"medium\"></mj-loading>\n                  }\n                  <ng-container #customSectionContainer></ng-container>\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Requests & History -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"history\"\n              [Expanded]=\"GetSectionExpanded('history', false)\"\n              [Disabled]=\"loadingStates.executionHistory\">\n                <ng-template mjAccordionTitle>\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                <div class=\"panel-content execution-history-panel\">\n                  @if (loadingStates.executionHistory) {\n                    <mj-loading text=\"Loading execution history...\" size=\"medium\"></mj-loading>\n                  } @else 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                      <div class=\"search-input-wrapper\">\n                        <i class=\"fa-solid fa-search\"></i>\n                        <input type=\"text\" class=\"mj-input\"\n                          [(ngModel)]=\"executionSearchText\"\n                          (ngModelChange)=\"onExecutionSearchChange()\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          placeholder=\"Search by Run ID...\">\n                      </div>\n                    </div>\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                              <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                                @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                                @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                                @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                            <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                                  @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                                  @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                                  @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                                  @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                                  @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                                  @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                              @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                              @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                      <!-- Pagination Controls -->\n                      @if (totalPages > 1) {\n                        <div class=\"pagination-controls\">\n                          <button mjButton\n                            variant=\"outline\"\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 mjButton\n                            variant=\"outline\"\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 mjButton\n                            variant=\"flat\"\n                            size=\"sm\"\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            </mj-accordion-panel>\n          }\n          <!-- Actions -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"actions\"\n              [Expanded]=\"GetSectionExpanded('actions', false)\"\n              [Disabled]=\"loadingStates.actions\">\n                <ng-template mjAccordionTitle>\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                <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 mjButton variant=\"primary\" size=\"sm\" (click)=\"configureActions()\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Action\n                          </button>\n                        }\n                      </div>\n                    </div>\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 mjButton variant=\"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('MJ: 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 mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\n                                  (click)=\"removeAction(action, $event)\"\n                                  title=\"Remove action\"\n                                  class=\"error-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('MJ: AI Agent Actions', '')\">\n                            <span>View all {{ actionCount }} actions...</span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Sub-Agents (Unified View with Filter) -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"subagents\"\n              [Expanded]=\"GetSectionExpanded('subagents', false)\"\n              [Disabled]=\"loadingStates.subAgents\">\n                <ng-template mjAccordionTitle>\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                <div class=\"panel-content\">\n                  <!-- Filter Controls -->\n                  <div class=\"section-header sub-agent-filter-header\">\n                    <div class=\"filter-controls\">\n                      <div class=\"mj-button-group\">\n                        <button mjButton\n                          size=\"sm\"\n                          [class.active]=\"subAgentFilter === 'all'\"\n                          (click)=\"setSubAgentFilter('all')\">\n                          <i class=\"fa-solid fa-layer-group\"></i>\n                          All ({{ totalSubAgentCount }})\n                        </button>\n                        <button mjButton\n                          size=\"sm\"\n                          [class.active]=\"subAgentFilter === 'child'\"\n                          (click)=\"setSubAgentFilter('child')\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Child ({{ childSubAgentCount }})\n                        </button>\n                        <button mjButton\n                          size=\"sm\"\n                          [class.active]=\"subAgentFilter === 'related'\"\n                          (click)=\"setSubAgentFilter('related')\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Related ({{ relatedSubAgentCount }})\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"header-actions\">\n                      @if (EditMode && UserCanCreateSubAgents) {\n                        <button mjButton\n                          variant=\"primary\"\n                          size=\"sm\"\n                          (click)=\"createChildSubAgent()\"\n                          title=\"Create a new child sub-agent that shares this agent's payload\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Create Child\n                        </button>\n                        <button mjButton\n                          size=\"sm\"\n                          (click)=\"linkRelatedSubAgent()\"\n                          title=\"Link an existing agent as a related sub-agent with payload mapping\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Link Related\n                        </button>\n                      }\n                    </div>\n                  </div>\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: var(--mj-status-info);\"></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: var(--mj-brand-primary);\"></i>\n                          <strong>Related Sub-Agents</strong>\n                          <p>Reusable agents with payload mapping</p>\n                        </div>\n                      </div>\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('MJ: AI Agents', item.agent.ID)\">\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                          <!-- 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                          <!-- Agent Content -->\n                          <div class=\"item-content\">\n                            <div class=\"item-title\">{{ item.agent.Name || 'Untitled Sub-Agent' }}</div>\n                            @if (item.agent.Description) {\n                              <div class=\"item-preview\">{{ item.agent.Description }}</div>\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                              <!-- Status -->\n                              @if (item.agent.Status) {\n                                <span class=\"status-tag\"\n                                  [style.background-color]=\"getStatusBadgeColor()\">\n                                  {{ item.agent.Status }}\n                                </span>\n                              }\n                              <!-- Agent Type -->\n                              @if (item.agent.Type) {\n                                <span class=\"meta-tag\">{{ item.agent.Type }}</span>\n                              }\n                            </div>\n                          </div>\n                          <!-- Actions -->\n                          <div class=\"item-actions\">\n                            @if (EditMode) {\n                              <!-- Output Mapping Config (Related only) -->\n                              @if (item.type === 'related') {\n                                <button mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\n                                  (click)=\"configureOutputMapping(item, $event)\"\n                                  title=\"Configure output mapping\">\n                                  <i class=\"fa-solid fa-exchange-alt\"></i>\n                                </button>\n                              }\n                              <!-- Advanced Settings (Child only) -->\n                              @if (item.type === 'child' && UserCanCreateSubAgents) {\n                                <button mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\n                                  (click)=\"openSubAgentAdvancedSettings(item.agent, $event)\"\n                                  title=\"Advanced settings\">\n                                  <i class=\"fa-solid fa-cog\"></i>\n                                </button>\n                              }\n                              <!-- Remove/Unlink -->\n                              @if (UserCanDeleteSubAgents) {\n                                <button mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\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                                  class=\"error-action\">\n                                  <i [class]=\"item.type === 'child' ? 'fa-solid fa-trash' : 'fa-solid fa-unlink'\"></i>\n                                </button>\n                              }\n                            }\n                            <i class=\"fa-solid fa-external-link\"></i>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Prompts (With Model Selection) -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"prompts\"\n              [Expanded]=\"GetSectionExpanded('prompts', false)\"\n              [Disabled]=\"loadingStates.prompts\">\n                <ng-template mjAccordionTitle>\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                <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                          <mj-dropdown\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                          </mj-dropdown>\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 mjButton variant=\"primary\" size=\"sm\" (click)=\"addPrompt()\">\n                          <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                        </button>\n                      }\n                    </div>\n                  </div>\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 mjButton variant=\"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('MJ: 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 mjButton\n                                variant=\"flat\"\n                                size=\"sm\"\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 mjButton\n                                variant=\"flat\"\n                                size=\"sm\"\n                                (click)=\"removePrompt(prompt, $event)\"\n                                title=\"Remove prompt\"\n                                class=\"error-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 (promptCount > agentPrompts.length) {\n                        <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Prompts', '')\">\n                          <span>View all {{ promptCount }} prompts...</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Learning & Analytics -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"learning\"\n              [Expanded]=\"GetSectionExpanded('learning', false)\"\n              [Disabled]=\"loadingStates.learningCycles\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-brain\"></i> Learning Cycles\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                    } @else if (learningCycleCount > 0) {\n                        <span> ({{ learningCycleCount }})</span>\n                    }\n                </ng-template>\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                  @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('MJ: 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('MJ: AI Agent Learning Cycles', '')\">\n                          <span>View all {{ learningCycleCount }} cycles...</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Notes & Documentation -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"notes\"\n              [Expanded]=\"GetSectionExpanded('notes', false)\"\n              [Disabled]=\"loadingStates.notes\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-sticky-note\"></i> Notes\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                    } @else if (noteCount > 0) {\n                        <span> ({{ noteCount }})</span>\n                    }\n                </ng-template>\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 mjButton variant=\"primary\" size=\"sm\" (click)=\"addNote()\">\n                          <i class=\"fa-solid fa-plus\"></i> Add Note\n                        </button>\n                      }\n                    </div>\n                  </div>\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 mjButton variant=\"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('MJ: 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('MJ: AI Agent Notes', '')\">\n                          <span>View all {{ noteCount }} notes...</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Payload -->\n          <mj-accordion-panel id=\"payload\"\n            [Expanded]=\"GetSectionExpanded('payload', false)\">\n              <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n              </ng-template>\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                <!-- 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                  <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                    <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                <!-- 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                  <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                    <!-- 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                    <!-- 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                    <!-- 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                <!-- 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                  <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                      <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                    <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          </mj-accordion-panel>\n          <!-- Execution Guardrails (New Separate Panel) -->\n          <mj-accordion-panel id=\"guardrails\"\n            [Expanded]=\"GetSectionExpanded('guardrails', false)\">\n              <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n              </ng-template>\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                <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                  <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                  <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                  <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          </mj-accordion-panel>\n          <!-- Configuration (Settings Panel) -->\n          <mj-accordion-panel id=\"config\"\n            [Expanded]=\"GetSectionExpanded('config', false)\">\n              <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-cogs\"></i> Configuration\n              </ng-template>\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                <!-- 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                  <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                          <mj-dropdown\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                          </mj-dropdown>\n                        } @else {\n                          <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n                        }\n                      </div>\n                    </div>\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                          <mj-dropdown\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                          </mj-dropdown>\n                        } @else {\n                          <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n                        }\n                      </div>\n                    </div>\n                    <div class=\"config-card\">\n                      <div class=\"config-card-header\">\n                        <div class=\"config-card-icon\">\n                          <i class=\"fa-solid fa-folder-tree\"></i>\n                        </div>\n                        <div class=\"config-card-info\">\n                          <h4>Category</h4>\n                          <p>Organizational category for this agent</p>\n                        </div>\n                      </div>\n                      <div class=\"config-card-content\">\n                        @if (EditMode) {\n                          <mj-tree-dropdown\n                            [BranchConfig]=\"CategoryBranchConfig\"\n                            [Value]=\"SelectedCategoryKey\"\n                            SelectionMode=\"single\"\n                            SelectableTypes=\"branch\"\n                            Placeholder=\"Select a category...\"\n                            [Clearable]=\"true\"\n                            [EnableSearch]=\"true\"\n                            (ValueChange)=\"OnCategoryChange($event)\">\n                          </mj-tree-dropdown>\n                        } @else {\n                          <span class=\"config-field-display\">{{ record.Category || 'Not Set' }}</span>\n                        }\n                      </div>\n                    </div>\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                    <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                <!-- 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                  <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                    <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                    <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                    <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                <!-- 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                  <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                    <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                <!-- 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                  <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                    @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                      <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                      <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                                  mjButton\n                                  variant=\"outline\"\n                                  size=\"sm\"\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                                    mjButton\n                                    variant=\"flat\"\n                                    size=\"sm\"\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          </mj-accordion-panel>\n      </div>\n    </form>\n</mj-record-form-container>\n}\n\n<!-- Permissions Dialog (from @memberjunction/ng-agents) -->\n@if (ShowPermissionsDialog) {\n  <mj-agent-permissions-dialog\n    [Agent]=\"record\"\n    (Closed)=\"onPermissionsDialogClosed()\"\n    (PermissionsChanged)=\"refreshRelatedData()\">\n  </mj-agent-permissions-dialog>\n}", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\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: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n    transition: padding 0.2s ease;\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n}\n\n/* Header collapse toggle button */\n.agent-header-toggle {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-toggle i {\n    font-size: 10px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 36px;\n    height: 36px;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper i {\n    color: var(--mj-text-inverse);\n    font-size: 18px;\n}\n\n/* \u2500\u2500 Minimized Floating Header Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.agent-header-mini {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    height: 32px;\n}\n\n.agent-header-mini-expand {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-expand i {\n    font-size: 9px;\n}\n\n.agent-header-mini-name {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.agent-header-mini-status {\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.agent-header-mini-spacer {\n    flex: 1;\n}\n\n.agent-header-mini-btn {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-btn:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.agent-header-mini-btn--primary {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-header-mini-btn--primary:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.agent-header-mini-btn i {\n    font-size: 11px;\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: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 16px !important;\n    font-weight: 500 !important;\n    height: 30px !important;\n    width: 100% !important;\n    max-width: 350px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.status-badge.active {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.status-badge.pending {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-primary);\n}\n\n.status-badge.disabled {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\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: var(--mj-border-default);\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: var(--mj-text-muted);\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: row;\n    gap: 8px;\n    flex-shrink: 0;\n    align-items: center;\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.primary:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.action-button.secondary {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.secondary:hover {\n    background: var(--mj-text-secondary);\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: var(--mj-status-error);\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: var(--mj-bg-page);\n    padding: 8px 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: 10px;\n    margin-bottom: 8px;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: var(--mj-bg-surface);\n    border: none;\n    padding: 10px 16px;\n    border-radius: 12px 12px 0 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: var(--mj-text-inverse);\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: var(--mj-bg-surface);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\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 var(--mj-border-default);\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 var(--mj-bg-surface-sunken);\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.section-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\n}\n\n.loading-state i {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n    margin-bottom: 16px;\n    display: block;\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\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 var(--mj-bg-surface-sunken);\n    border-top: 4px solid var(--mj-brand-primary);\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 var(--mj-border-default);\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-status-success);\n}\n\n.action-item .item-icon {\n    background: var(--mj-status-warning);\n}\n\n.sub-agent-item .item-icon {\n    background: var(--mj-brand-primary);\n}\n\n.model-item .item-icon {\n    background: var(--mj-brand-primary);\n}\n\n.learning-item .item-icon {\n    background: var(--mj-status-error);\n}\n\n.note-item .item-icon {\n    background: var(--mj-status-warning);\n}\n\n.item-icon i {\n    color: var(--mj-text-muted);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.priority-tag {\n    color: var(--mj-text-inverse);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-tag.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-tag.inactive {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n}\n\n.view-more-item {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: var(--mj-text-muted);\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info .record-count {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-weight: normal;\n}\n\n.page-info .fa-spinner {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.view-all-btn {\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn:hover {\n    color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title i {\n    color: var(--mj-brand-primary);\n}\n\n.subsection-divider {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.payload-field-label i {\n    color: var(--mj-text-muted);\n    font-size: 16px;\n}\n\n.field-description {\n    font-size: 12px;\n    font-weight: normal;\n    color: var(--mj-text-muted);\n    margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-brand-primary);\n}\n\n.prompt-card .card-icon {\n    background: var(--mj-status-success);\n}\n\n.action-card .card-icon {\n    background: var(--mj-status-warning);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: var(--mj-text-muted);\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    padding: 4px 8px;\n    background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.inactive {\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: var(--mj-text-muted);\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-default);\n}\n\n.timeline-item.expanded {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n}\n\n.timeline-item.view-all:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\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: var(--mj-border-default);\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: var(--mj-status-error);\n    font-size: 13px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\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 var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: var(--mj-status-error);\n}\n\n.result-content,\n.error-content {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-text-secondary);\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 var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    border: 2px dashed var(--mj-border-default);\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\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 .fa-search {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.metric-item i {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n.metric-label {\n    font-weight: 500;\n}\n\n.metric-value {\n    font-weight: 600;\n    color: var(--mj-text-primary);\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: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n}\n\n.action-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-text-muted);\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 var(--mj-bg-surface-sunken);\n    background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.metric-detail i {\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-data {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: var(--mj-status-error);\n}\n\n.error-content {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-status-error);\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: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.payload-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.payload-field-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.payload-field-example i {\n    color: var(--mj-status-warning);\n    font-size: 0.9rem;\n}\n\n.payload-field-example code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.payload-path-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-status-success);\n}\n\n.payload-path-icon.upstream {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-read {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-write {\n    background: var(--mj-status-warning);\n}\n\n.payload-path-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.payload-path-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-content {\n    padding: 1rem;\n}\n\n.json-editor-container {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-hint i {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.validation-field-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n}\n\n.validation-schema-description {\n    color: var(--mj-text-muted);\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}\n\n.validation-schema-editor {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n    margin-bottom: 2rem;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.config-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-card-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.config-card-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.config-card-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\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.config-card-content ::ng-deep mj-form-field {\n    width: 100% !important;\n}\n\n.config-field-display {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.prompt-name {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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/* 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: var(--mj-text-inverse);\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 var(--mj-brand-primary);\n}\n\n.sub-agent-item.related-sub-agent {\n    border-left: 4px solid var(--mj-brand-primary);\n}\n\n.sub-agent-item:hover {\n    transform: translateX(4px);\n}\n\n/* Payload Info Tag */\n.payload-info {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\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: [{ standalone: false, selector: 'mj-ai-agent-form', template: "@if (record) {\n<mj-record-form-container [Record]=\"record\" [FormComponent]=\"this\"\n    [ToolbarConfig]=\"toolbarConfig\"\n    [WidthMode]=\"'full-width'\"\n    (Navigate)=\"OnFormNavigate($event)\"\n    (DeleteRequested)=\"OnDeleteRequested()\"\n    (FavoriteToggled)=\"OnFavoriteToggled()\"\n    (HistoryRequested)=\"OnHistoryRequested()\"\n    (ListManagementRequested)=\"OnListManagementRequested()\">\n    <form class=\"record-form\" #form=\"ngForm\">\n      <!-- Agent Header \u2014 expanded view -->\n      @if (!HeaderCollapsed) {\n        <div class=\"agent-header\">\n          <div class=\"agent-header-content\">\n            <button class=\"agent-header-toggle\" (click)=\"ToggleHeaderCollapsed()\"\n              title=\"Minimize header\">\n              <i class=\"fa-solid fa-chevron-up\"></i>\n            </button>\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                  <input type=\"text\" class=\"mj-input agent-name-input\"\n                    [(ngModel)]=\"record.Name\"\n                    name=\"agentName\"\n                    placeholder=\"Enter agent name...\">\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            <div class=\"agent-actions\">\n              @if (record.ID) {\n                <button mjButton variant=\"primary\" size=\"lg\"\n                  (click)=\"openTestHarness()\"\n                  [disabled]=\"record.Status !== 'Active'\"\n                  title=\"Run this AI agent\">\n                  <i class=\"fa-solid fa-play\"></i> Run\n                </button>\n                <button mjButton size=\"lg\"\n                  (click)=\"openPermissionsDialog()\"\n                  [title]=\"IsOpenToEveryone ? 'Open to everyone \u2014 click to manage permissions' : 'Restricted \u2014 click to manage permissions'\">\n                  <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n                  [style.color]=\"IsOpenToEveryone ? 'var(--mj-status-success)' : null\"></i>\n                  {{ IsOpenToEveryone ? 'Open' : 'Restricted' }}\n                </button>\n              }\n              <button mjButton variant=\"outline\" size=\"sm\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                <i class=\"fa-solid fa-refresh\"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- Agent Header \u2014 minimized floating bar -->\n      @if (HeaderCollapsed) {\n        <div class=\"agent-header-mini\">\n          <button class=\"agent-header-mini-expand\" (click)=\"ToggleHeaderCollapsed()\"\n            title=\"Expand header\">\n            <i class=\"fa-solid fa-chevron-down\"></i>\n          </button>\n          <span class=\"agent-header-mini-name\">{{ record.Name || 'Untitled AI Agent' }}</span>\n          @if (record.Status) {\n            <span class=\"agent-header-mini-status\" [style.background-color]=\"getStatusBadgeColor()\">\n              {{ record.Status }}\n            </span>\n          }\n          <div class=\"agent-header-mini-spacer\"></div>\n          @if (record.ID) {\n            <button class=\"agent-header-mini-btn agent-header-mini-btn--primary\"\n              (click)=\"openTestHarness()\"\n              [disabled]=\"record.Status !== 'Active'\"\n              title=\"Run agent\">\n              <i class=\"fa-solid fa-play\"></i>\n            </button>\n            <button class=\"agent-header-mini-btn\"\n              (click)=\"openPermissionsDialog()\"\n              [title]=\"IsOpenToEveryone ? 'Open to everyone' : 'Restricted'\">\n              <i class=\"fa-solid\" [class.fa-lock-open]=\"IsOpenToEveryone\" [class.fa-lock]=\"!IsOpenToEveryone\"\n              [style.color]=\"IsOpenToEveryone ? 'var(--mj-status-success)' : null\"></i>\n            </button>\n          }\n          <button class=\"agent-header-mini-btn\"\n            (click)=\"refreshRelatedData()\" title=\"Refresh\">\n            <i class=\"fa-solid fa-refresh\"></i>\n          </button>\n        </div>\n      }\n      <!-- Single Pane Layout with Expander Panels -->\n      <div class=\"form-content\">\n          <!-- Custom Agent Type Section (if defined) -->\n          @if (record.ID && agentType && agentType.UIFormSectionKey) {\n            <mj-accordion-panel id=\"custom\"\n              [Expanded]=\"GetSectionExpanded('custom', agentType.UIFormSectionExpandedByDefault)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-puzzle-piece\"></i> {{ agentType.Name }} Configuration\n                </ng-template>\n                <div class=\"panel-content custom-agent-type-section\" [style.display]=\"'block'\">\n                  @if (loadingStates.customSection) {\n                    <mj-loading text=\"Loading {{ agentType.Name }} configuration...\" size=\"medium\"></mj-loading>\n                  }\n                  <ng-container #customSectionContainer></ng-container>\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Requests & History -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"history\"\n              [Expanded]=\"GetSectionExpanded('history', false)\"\n              [Disabled]=\"loadingStates.executionHistory\">\n                <ng-template mjAccordionTitle>\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                <div class=\"panel-content execution-history-panel\">\n                  @if (loadingStates.executionHistory) {\n                    <mj-loading text=\"Loading execution history...\" size=\"medium\"></mj-loading>\n                  } @else 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                      <div class=\"search-input-wrapper\">\n                        <i class=\"fa-solid fa-search\"></i>\n                        <input type=\"text\" class=\"mj-input\"\n                          [(ngModel)]=\"executionSearchText\"\n                          (ngModelChange)=\"onExecutionSearchChange()\"\n                          [ngModelOptions]=\"{standalone: true}\"\n                          placeholder=\"Search by Run ID...\">\n                      </div>\n                    </div>\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                              <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                                @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                                @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                                @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                            <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                                  @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                                  @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                                  @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                                  @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                                  @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                                  @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                              @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                              @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                      <!-- Pagination Controls -->\n                      @if (totalPages > 1) {\n                        <div class=\"pagination-controls\">\n                          <button mjButton\n                            variant=\"outline\"\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 mjButton\n                            variant=\"outline\"\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 mjButton\n                            variant=\"flat\"\n                            size=\"sm\"\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            </mj-accordion-panel>\n          }\n          <!-- Actions -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"actions\"\n              [Expanded]=\"GetSectionExpanded('actions', false)\"\n              [Disabled]=\"loadingStates.actions\">\n                <ng-template mjAccordionTitle>\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                <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 mjButton variant=\"primary\" size=\"sm\" (click)=\"configureActions()\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Action\n                          </button>\n                        }\n                      </div>\n                    </div>\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 mjButton variant=\"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('MJ: 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 mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\n                                  (click)=\"removeAction(action, $event)\"\n                                  title=\"Remove action\"\n                                  class=\"error-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('MJ: AI Agent Actions', '')\">\n                            <span>View all {{ actionCount }} actions...</span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Sub-Agents (Unified View with Filter) -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"subagents\"\n              [Expanded]=\"GetSectionExpanded('subagents', false)\"\n              [Disabled]=\"loadingStates.subAgents\">\n                <ng-template mjAccordionTitle>\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                <div class=\"panel-content\">\n                  <!-- Filter Controls -->\n                  <div class=\"section-header sub-agent-filter-header\">\n                    <div class=\"filter-controls\">\n                      <div class=\"mj-button-group\">\n                        <button mjButton\n                          size=\"sm\"\n                          [class.active]=\"subAgentFilter === 'all'\"\n                          (click)=\"setSubAgentFilter('all')\">\n                          <i class=\"fa-solid fa-layer-group\"></i>\n                          All ({{ totalSubAgentCount }})\n                        </button>\n                        <button mjButton\n                          size=\"sm\"\n                          [class.active]=\"subAgentFilter === 'child'\"\n                          (click)=\"setSubAgentFilter('child')\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Child ({{ childSubAgentCount }})\n                        </button>\n                        <button mjButton\n                          size=\"sm\"\n                          [class.active]=\"subAgentFilter === 'related'\"\n                          (click)=\"setSubAgentFilter('related')\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Related ({{ relatedSubAgentCount }})\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"header-actions\">\n                      @if (EditMode && UserCanCreateSubAgents) {\n                        <button mjButton\n                          variant=\"primary\"\n                          size=\"sm\"\n                          (click)=\"createChildSubAgent()\"\n                          title=\"Create a new child sub-agent that shares this agent's payload\">\n                          <i class=\"fa-solid fa-link\"></i>\n                          Create Child\n                        </button>\n                        <button mjButton\n                          size=\"sm\"\n                          (click)=\"linkRelatedSubAgent()\"\n                          title=\"Link an existing agent as a related sub-agent with payload mapping\">\n                          <i class=\"fa-solid fa-share-nodes\"></i>\n                          Link Related\n                        </button>\n                      }\n                    </div>\n                  </div>\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: var(--mj-status-info);\"></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: var(--mj-brand-primary);\"></i>\n                          <strong>Related Sub-Agents</strong>\n                          <p>Reusable agents with payload mapping</p>\n                        </div>\n                      </div>\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('MJ: AI Agents', item.agent.ID)\">\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                          <!-- 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                          <!-- Agent Content -->\n                          <div class=\"item-content\">\n                            <div class=\"item-title\">{{ item.agent.Name || 'Untitled Sub-Agent' }}</div>\n                            @if (item.agent.Description) {\n                              <div class=\"item-preview\">{{ item.agent.Description }}</div>\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                              <!-- Status -->\n                              @if (item.agent.Status) {\n                                <span class=\"status-tag\"\n                                  [style.background-color]=\"getStatusBadgeColor()\">\n                                  {{ item.agent.Status }}\n                                </span>\n                              }\n                              <!-- Agent Type -->\n                              @if (item.agent.Type) {\n                                <span class=\"meta-tag\">{{ item.agent.Type }}</span>\n                              }\n                            </div>\n                          </div>\n                          <!-- Actions -->\n                          <div class=\"item-actions\">\n                            @if (EditMode) {\n                              <!-- Output Mapping Config (Related only) -->\n                              @if (item.type === 'related') {\n                                <button mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\n                                  (click)=\"configureOutputMapping(item, $event)\"\n                                  title=\"Configure output mapping\">\n                                  <i class=\"fa-solid fa-exchange-alt\"></i>\n                                </button>\n                              }\n                              <!-- Advanced Settings (Child only) -->\n                              @if (item.type === 'child' && UserCanCreateSubAgents) {\n                                <button mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\n                                  (click)=\"openSubAgentAdvancedSettings(item.agent, $event)\"\n                                  title=\"Advanced settings\">\n                                  <i class=\"fa-solid fa-cog\"></i>\n                                </button>\n                              }\n                              <!-- Remove/Unlink -->\n                              @if (UserCanDeleteSubAgents) {\n                                <button mjButton\n                                  variant=\"flat\"\n                                  size=\"sm\"\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                                  class=\"error-action\">\n                                  <i [class]=\"item.type === 'child' ? 'fa-solid fa-trash' : 'fa-solid fa-unlink'\"></i>\n                                </button>\n                              }\n                            }\n                            <i class=\"fa-solid fa-external-link\"></i>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Prompts (With Model Selection) -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"prompts\"\n              [Expanded]=\"GetSectionExpanded('prompts', false)\"\n              [Disabled]=\"loadingStates.prompts\">\n                <ng-template mjAccordionTitle>\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                <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                          <mj-dropdown\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                          </mj-dropdown>\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 mjButton variant=\"primary\" size=\"sm\" (click)=\"addPrompt()\">\n                          <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                        </button>\n                      }\n                    </div>\n                  </div>\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 mjButton variant=\"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('MJ: 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 mjButton\n                                variant=\"flat\"\n                                size=\"sm\"\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 mjButton\n                                variant=\"flat\"\n                                size=\"sm\"\n                                (click)=\"removePrompt(prompt, $event)\"\n                                title=\"Remove prompt\"\n                                class=\"error-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 (promptCount > agentPrompts.length) {\n                        <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Prompts', '')\">\n                          <span>View all {{ promptCount }} prompts...</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Learning & Analytics -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"learning\"\n              [Expanded]=\"GetSectionExpanded('learning', false)\"\n              [Disabled]=\"loadingStates.learningCycles\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-brain\"></i> Learning Cycles\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                    } @else if (learningCycleCount > 0) {\n                        <span> ({{ learningCycleCount }})</span>\n                    }\n                </ng-template>\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                  @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('MJ: 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('MJ: AI Agent Learning Cycles', '')\">\n                          <span>View all {{ learningCycleCount }} cycles...</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Notes & Documentation -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"notes\"\n              [Expanded]=\"GetSectionExpanded('notes', false)\"\n              [Disabled]=\"loadingStates.notes\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-sticky-note\"></i> Notes\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                    } @else if (noteCount > 0) {\n                        <span> ({{ noteCount }})</span>\n                    }\n                </ng-template>\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 mjButton variant=\"primary\" size=\"sm\" (click)=\"addNote()\">\n                          <i class=\"fa-solid fa-plus\"></i> Add Note\n                        </button>\n                      }\n                    </div>\n                  </div>\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 mjButton variant=\"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('MJ: 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('MJ: AI Agent Notes', '')\">\n                          <span>View all {{ noteCount }} notes...</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Search -->\n          @if (record.ID) {\n            <mj-accordion-panel id=\"search\"\n              [Expanded]=\"GetSectionExpanded('search', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-magnifying-glass\"></i> Search\n                </ng-template>\n                <div class=\"panel-content\">\n                  <div class=\"section-header\">\n                    <div class=\"section-description\">\n                      Control this agent's access to <strong>Scoped Search</strong> and assign the scopes it can use for pre-execution RAG or agent-invoked search.\n                    </div>\n                  </div>\n\n                  <!-- Scope Access mode -->\n                  <div class=\"agent-search-access\">\n                    <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'All'\">\n                      <input type=\"radio\" name=\"SearchScopeAccess\" value=\"All\" [checked]=\"record.SearchScopeAccess === 'All'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'All'\">\n                      <i class=\"fa-solid fa-globe\"></i>\n                      <div class=\"agent-search-access-text\">\n                        <div class=\"agent-search-access-title\">All</div>\n                        <div class=\"agent-search-access-desc\">Can use any scope including Global. No scope restriction.</div>\n                      </div>\n                    </label>\n                    <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'Assigned'\">\n                      <input type=\"radio\" name=\"SearchScopeAccess\" value=\"Assigned\" [checked]=\"record.SearchScopeAccess === 'Assigned'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'Assigned'\">\n                      <i class=\"fa-solid fa-user-check\"></i>\n                      <div class=\"agent-search-access-text\">\n                        <div class=\"agent-search-access-title\">Assigned</div>\n                        <div class=\"agent-search-access-desc\">Can use ONLY scopes listed below. Other scopes are rejected with ACCESS_DENIED.</div>\n                      </div>\n                    </label>\n                    <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'None'\">\n                      <input type=\"radio\" name=\"SearchScopeAccess\" value=\"None\" [checked]=\"record.SearchScopeAccess === 'None'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'None'\">\n                      <i class=\"fa-solid fa-ban\"></i>\n                      <div class=\"agent-search-access-text\">\n                        <div class=\"agent-search-access-title\">None</div>\n                        <div class=\"agent-search-access-desc\">No search capability. The Scoped Search action is disabled for this agent.</div>\n                      </div>\n                    </label>\n                  </div>\n\n                  <!-- Assigned scopes grid -->\n                  @if (record.SearchScopeAccess !== 'None') {\n                    <div class=\"agent-search-grid-header\">\n                      <h4>Assigned Scopes</h4>\n                      <p class=\"section-description\">\n                        <strong>Pre-Execution</strong> scopes are injected automatically before the first LLM call.\n                        <strong>Agent-Invoked</strong> scopes are callable via the Scoped Search tool during execution.\n                        <strong>Both</strong> covers both paths.\n                      </p>\n                    </div>\n                    <mj-search-scope-child-grid\n                      [ParentID]=\"record.ID\"\n                      ChildEntityName=\"MJ: AI Agent Search Scopes\"\n                      ParentFieldName=\"AgentID\"\n                      [Columns]=\"AgentSearchScopeColumns\"\n                      [Disabled]=\"!EditMode\"\n                      AddButtonLabel=\"+ Assign another scope\"\n                      EmptyMessage=\"No scopes assigned yet. Assign at least one if this agent will use Scoped Search.\"\n                      (RowsChanged)=\"LoadPermissionSummary()\">\n                    </mj-search-scope-child-grid>\n\n                    <!-- Phase 2A: read-only audit summary of who has\n                         permission on each of this agent's assigned scopes.\n                         Editing happens in the Knowledge Hub Config dashboard\n                         (see \"Permissions\" subtab under Search Scopes). -->\n                    <div class=\"agent-search-section\" style=\"margin-top: 16px;\">\n                      <h4 style=\"margin: 0 0 8px 0;\">\n                        <i class=\"fa-solid fa-shield-halved\"></i> Effective scope permissions\n                      </h4>\n                      <p class=\"section-description\" style=\"margin-bottom: 8px;\">\n                        Per-user / per-role grants on the scopes assigned above. Edit grants in\n                        <strong>Knowledge Hub Config &rarr; Search Scopes &rarr; Permissions</strong>.\n                      </p>\n                      @if (IsLoadingPermissions) {\n                        <div style=\"color: var(--mj-text-muted);\">Loading permissions&hellip;</div>\n                      } @else if (PermissionSummary.length === 0) {\n                        <div style=\"color: var(--mj-text-muted); font-style: italic;\">\n                          No scopes assigned yet \u2014 permissions will appear here once you add scopes above.\n                        </div>\n                      } @else {\n                        @for (s of PermissionSummary; track s.ScopeID) {\n                          <div style=\"margin-bottom: 12px; padding: 8px 12px; background: var(--mj-bg-surface-card); border: 1px solid var(--mj-border-subtle); border-radius: 4px;\">\n                            <div style=\"font-weight: 600; margin-bottom: 4px;\">{{ s.ScopeName }}</div>\n                            @if (s.Permissions.length === 0) {\n                              <div style=\"color: var(--mj-text-muted); font-size: 0.9em;\">\n                                No explicit permissions. Access falls back to this agent's <code>SearchScopeAccess</code> setting.\n                              </div>\n                            } @else {\n                              <ul style=\"margin: 4px 0 0 16px; padding: 0;\">\n                                @for (p of s.Permissions; track p.Principal + p.Level) {\n                                  <li style=\"font-size: 0.9em; padding: 2px 0;\">\n                                    <i class=\"fa-solid\" [class.fa-user]=\"p.PrincipalType === 'User'\" [class.fa-users]=\"p.PrincipalType === 'Role'\"></i>\n                                    <strong>{{ p.Principal }}</strong>\n                                    <span style=\"color: var(--mj-text-muted);\">({{ p.PrincipalType }})</span>\n                                    &mdash; <span [style.color]=\"p.Level === 'None' ? 'var(--mj-status-error-text)' : 'var(--mj-text-primary)'\">{{ p.Level }}</span>\n                                  </li>\n                                }\n                              </ul>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n            </mj-accordion-panel>\n          }\n          <!-- Payload -->\n          <mj-accordion-panel id=\"payload\"\n            [Expanded]=\"GetSectionExpanded('payload', false)\">\n              <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n              </ng-template>\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                <!-- 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                  <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                    <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                <!-- 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                  <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                    <!-- 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                    <!-- 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                    <!-- 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                <!-- 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                  <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                      <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                    <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          </mj-accordion-panel>\n          <!-- Execution Guardrails (New Separate Panel) -->\n          <mj-accordion-panel id=\"guardrails\"\n            [Expanded]=\"GetSectionExpanded('guardrails', false)\">\n              <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n              </ng-template>\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                <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                  <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                  <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                  <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          </mj-accordion-panel>\n          <!-- Configuration (Settings Panel) -->\n          <mj-accordion-panel id=\"config\"\n            [Expanded]=\"GetSectionExpanded('config', false)\">\n              <ng-template mjAccordionTitle>\n                  <i class=\"fa-solid fa-cogs\"></i> Configuration\n              </ng-template>\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                <!-- 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                  <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                          <mj-dropdown\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                          </mj-dropdown>\n                        } @else {\n                          <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n                        }\n                      </div>\n                    </div>\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                          <mj-dropdown\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                          </mj-dropdown>\n                        } @else {\n                          <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n                        }\n                      </div>\n                    </div>\n                    <div class=\"config-card\">\n                      <div class=\"config-card-header\">\n                        <div class=\"config-card-icon\">\n                          <i class=\"fa-solid fa-folder-tree\"></i>\n                        </div>\n                        <div class=\"config-card-info\">\n                          <h4>Category</h4>\n                          <p>Organizational category for this agent</p>\n                        </div>\n                      </div>\n                      <div class=\"config-card-content\">\n                        @if (EditMode) {\n                          <mj-tree-dropdown\n                            [BranchConfig]=\"CategoryBranchConfig\"\n                            [Value]=\"SelectedCategoryKey\"\n                            SelectionMode=\"single\"\n                            SelectableTypes=\"branch\"\n                            Placeholder=\"Select a category...\"\n                            [Clearable]=\"true\"\n                            [EnableSearch]=\"true\"\n                            (ValueChange)=\"OnCategoryChange($event)\">\n                          </mj-tree-dropdown>\n                        } @else {\n                          <span class=\"config-field-display\">{{ record.Category || 'Not Set' }}</span>\n                        }\n                      </div>\n                    </div>\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                    <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                <!-- 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                  <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                    <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                    <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                    <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                <!-- 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                  <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                    <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                <!-- 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                  <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                    @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                      <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                      <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                                  mjButton\n                                  variant=\"outline\"\n                                  size=\"sm\"\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                                    mjButton\n                                    variant=\"flat\"\n                                    size=\"sm\"\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          </mj-accordion-panel>\n      </div>\n    </form>\n</mj-record-form-container>\n}\n\n<!-- Permissions Dialog (from @memberjunction/ng-agents) -->\n@if (ShowPermissionsDialog) {\n  <mj-agent-permissions-dialog\n    [Agent]=\"record\"\n    (Closed)=\"onPermissionsDialogClosed()\"\n    (PermissionsChanged)=\"refreshRelatedData()\">\n  </mj-agent-permissions-dialog>\n}", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\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: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 8px 16px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);\n    transition: padding 0.2s ease;\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 12px;\n}\n\n/* Header collapse toggle button */\n.agent-header-toggle {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n    padding: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-toggle:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-toggle i {\n    font-size: 10px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 36px;\n    height: 36px;\n    background: var(--mj-brand-primary);\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    flex-shrink: 0;\n    transition: all 0.2s ease;\n}\n\n.agent-icon-wrapper i {\n    color: var(--mj-text-inverse);\n    font-size: 18px;\n}\n\n/* \u2500\u2500 Minimized Floating Header Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.agent-header-mini {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 12px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    height: 32px;\n}\n\n.agent-header-mini-expand {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-expand:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-expand i {\n    font-size: 9px;\n}\n\n.agent-header-mini-name {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.agent-header-mini-status {\n    padding: 1px 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n    color: var(--mj-text-inverse);\n    flex-shrink: 0;\n}\n\n.agent-header-mini-spacer {\n    flex: 1;\n}\n\n.agent-header-mini-btn {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    padding: 0;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.agent-header-mini-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-header-mini-btn:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.agent-header-mini-btn--primary {\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-header-mini-btn--primary:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.agent-header-mini-btn i {\n    font-size: 11px;\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: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 16px !important;\n    font-weight: 500 !important;\n    height: 30px !important;\n    width: 100% !important;\n    max-width: 350px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.status-badge.active {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.status-badge.pending {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-primary);\n}\n\n.status-badge.disabled {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\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: var(--mj-border-default);\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: var(--mj-text-muted);\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: row;\n    gap: 8px;\n    flex-shrink: 0;\n    align-items: center;\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.primary:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.action-button.secondary {\n    background: var(--mj-text-muted);\n    color: var(--mj-text-inverse);\n}\n\n.action-button.secondary:hover {\n    background: var(--mj-text-secondary);\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: var(--mj-status-error);\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: var(--mj-bg-page);\n    padding: 8px 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: 10px;\n    margin-bottom: 8px;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: var(--mj-bg-surface);\n    border: none;\n    padding: 10px 16px;\n    border-radius: 12px 12px 0 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: var(--mj-text-inverse);\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: var(--mj-bg-surface);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\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 var(--mj-border-default);\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 var(--mj-bg-surface-sunken);\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.section-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\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: var(--mj-text-muted);\n}\n\n.loading-state i {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n    margin-bottom: 16px;\n    display: block;\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n}\n\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: var(--mj-text-muted);\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\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 var(--mj-bg-surface-sunken);\n    border-top: 4px solid var(--mj-brand-primary);\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 var(--mj-border-default);\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-status-success);\n}\n\n.action-item .item-icon {\n    background: var(--mj-status-warning);\n}\n\n.sub-agent-item .item-icon {\n    background: var(--mj-brand-primary);\n}\n\n.model-item .item-icon {\n    background: var(--mj-brand-primary);\n}\n\n.learning-item .item-icon {\n    background: var(--mj-status-error);\n}\n\n.note-item .item-icon {\n    background: var(--mj-status-warning);\n}\n\n.item-icon i {\n    color: var(--mj-text-muted);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.priority-tag {\n    color: var(--mj-text-inverse);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-tag.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-tag.inactive {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n}\n\n.view-more-item {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: var(--mj-text-muted);\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    min-width: 200px;\n    text-align: center;\n}\n\n.page-info .record-count {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    font-weight: normal;\n}\n\n.page-info .fa-spinner {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.view-all-btn {\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    margin-left: auto;\n}\n\n.view-all-btn:hover {\n    color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title i {\n    color: var(--mj-brand-primary);\n}\n\n.subsection-divider {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.payload-field-label i {\n    color: var(--mj-text-muted);\n    font-size: 16px;\n}\n\n.field-description {\n    font-size: 12px;\n    font-weight: normal;\n    color: var(--mj-text-muted);\n    margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: var(--mj-bg-surface);\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface-sunken);\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: var(--mj-brand-primary);\n}\n\n.prompt-card .card-icon {\n    background: var(--mj-status-success);\n}\n\n.action-card .card-icon {\n    background: var(--mj-status-warning);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: var(--mj-text-muted);\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    padding: 4px 8px;\n    background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.inactive {\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: var(--mj-text-muted);\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: var(--mj-brand-primary);\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: var(--mj-text-inverse);\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: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-default);\n}\n\n.timeline-item.expanded {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n}\n\n.timeline-item.view-all:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-brand-primary);\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: var(--mj-border-default);\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: var(--mj-text-inverse);\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: var(--mj-text-muted);\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: var(--mj-text-muted);\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: var(--mj-status-error);\n    font-size: 13px;\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\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 var(--mj-border-default);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: var(--mj-status-error);\n}\n\n.result-content,\n.error-content {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-text-secondary);\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 var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    border: 2px dashed var(--mj-border-default);\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: var(--mj-border-default);\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\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 .fa-search {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    transform: translateY(-1px);\n}\n\n.execution-card.expanded {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-text-inverse);\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: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-date {\n    font-size: 12px;\n    color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n    padding: 6px 10px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.metric-item i {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n.metric-label {\n    font-weight: 500;\n}\n\n.metric-value {\n    font-weight: 600;\n    color: var(--mj-text-primary);\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: var(--mj-bg-surface-card);\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: var(--mj-text-muted);\n}\n\n.action-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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: var(--mj-text-muted);\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 var(--mj-bg-surface-sunken);\n    background: var(--mj-bg-surface-card);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.metric-detail i {\n    color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-data {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\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: var(--mj-text-secondary);\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: var(--mj-status-error);\n}\n\n.error-content {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: var(--mj-status-error);\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: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.payload-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.payload-field-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    background: var(--mj-bg-surface-card);\n    padding: 0.5rem 0.75rem;\n    border-radius: 6px;\n    border: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.payload-field-example i {\n    color: var(--mj-status-warning);\n    font-size: 0.9rem;\n}\n\n.payload-field-example code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.payload-path-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.payload-path-header {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    padding: 1rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-status-success);\n}\n\n.payload-path-icon.upstream {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-read {\n    background: var(--mj-brand-primary);\n}\n\n.payload-path-icon.self-write {\n    background: var(--mj-status-warning);\n}\n\n.payload-path-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.payload-path-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-content {\n    padding: 1rem;\n}\n\n.json-editor-container {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n    margin-bottom: 0.75rem;\n}\n\n.json-editor-container:hover {\n    border-color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n    line-height: 1.4;\n}\n\n.payload-path-hint i {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.payload-path-hint code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    font-size: 0.95rem;\n}\n\n.validation-field-description {\n    color: var(--mj-text-muted);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n}\n\n.validation-schema-description {\n    color: var(--mj-text-muted);\n    font-size: 0.9rem;\n    line-height: 1.4;\n    margin: 0;\n}\n\n.validation-schema-editor {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.validation-schema-editor:hover {\n    border-color: var(--mj-brand-primary);\n}\n\n/* === CONFIGURATION SECTION === */\n.config-section {\n    margin-bottom: 2rem;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    border: 1px solid var(--mj-border-default);\n    overflow: hidden;\n}\n\n.config-section-title {\n    margin: 0;\n    padding: 1rem 1.5rem;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    transition: all 0.2s ease;\n}\n\n.config-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\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: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.config-card-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 8px;\n    background: var(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.config-card-icon i {\n    color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\n}\n\n.config-card-info p {\n    margin: 0;\n    font-size: 0.85rem;\n    color: var(--mj-text-muted);\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.config-card-content ::ng-deep mj-form-field {\n    width: 100% !important;\n}\n\n.config-field-display {\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.prompt-name {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n    font-size: 14px;\n}\n\n.no-prompt {\n    color: var(--mj-text-muted);\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: var(--mj-text-muted);\n    line-height: 1.4;\n    margin-top: 0.5rem;\n}\n\n.config-card-hint i {\n    color: var(--mj-brand-primary);\n    margin-top: 0.1rem;\n    flex-shrink: 0;\n}\n\n.config-card-hint code {\n    background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\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/* 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: var(--mj-text-inverse);\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 var(--mj-brand-primary);\n}\n\n.sub-agent-item.related-sub-agent {\n    border-left: 4px solid var(--mj-brand-primary);\n}\n\n.sub-agent-item:hover {\n    transform: translateX(4px);\n}\n\n/* Payload Info Tag */\n.payload-info {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\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: var(--mj-text-secondary);\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\n/* ===== Search Scope Access (mockup #5) ===== */\n.agent-search-access {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n    margin: 8px 0 20px;\n}\n\n.agent-search-access-option {\n    display: grid;\n    grid-template-columns: 24px 28px 1fr;\n    align-items: start;\n    gap: 10px;\n    padding: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    transition: background 120ms ease, border-color 120ms ease;\n}\n\n.agent-search-access-option:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-search-access-option.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-search-access-option input[type=\"radio\"] {\n    accent-color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.agent-search-access-option > i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    text-align: center;\n    margin-top: 2px;\n}\n\n.agent-search-access-text {\n    min-width: 0;\n}\n\n.agent-search-access-title {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.agent-search-access-desc {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    line-height: 1.3;\n}\n\n.agent-search-grid-header {\n    margin: 8px 0 12px;\n}\n\n.agent-search-grid-header h4 {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n    font-size: 1rem;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n    .agent-search-access {\n        grid-template-columns: 1fr;\n    }\n}\n"] }]
     }], null, { customSectionContainer: [{
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIAgentFormComponentExtended, { className: "MJAIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 75 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJAIAgentFormComponentExtended, { className: "MJAIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 76 }); })();
 //# sourceMappingURL=ai-agent-form.component.js.map