npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.29.0 → 5.30.0 - Mend

@memberjunction/ng-core-entity-forms 5.29.0 → 5.30.0

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

Files changed (77) hide show

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

@@ -7,7 +7,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 { BaseFormComponent, BaseFormSectionComponent } from '@memberjunction/ng-base-forms';
+import { BaseFormComponent, BaseFormSectionComponent, CUSTOM_LAYOUT_TOOLBAR_CONFIG } from '@memberjunction/ng-base-forms';
 import { CompositeKey, Metadata, RunView } from '@memberjunction/core';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
@@ -35,250 +35,250 @@ const _c0 = ["customSectionContainer"];
 const _c1 = () => ({ standalone: true });
 const _forTrack0 = ($index, $item) => $item.ID;
 const _forTrack1 = ($index, $item) => $item.agent.ID;
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 113);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("src", ctx_r2.record.LogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r2.record.Name + " logo");
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("src", ctx_r1.record.LogoURL, i0.ɵɵsanitizeUrl)("alt", ctx_r1.record.Name + " logo");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassMap(ctx_r2.getAgentIcon());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r1.getAgentIcon());
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 125);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_9_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
+    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) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Name);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Name);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h1", 117);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Untitled AI Agent");
+    i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled AI Agent");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getStatusBadgeColor());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getStatusBadgeColor());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Status, " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 120);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Agent Type: ", ctx_r2.record.Type, " ");
+    i0.ɵɵtextInterpolate1(" Agent Type: ", ctx_r1.record.Type, " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 128);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_14_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.navigateToParentAgent()); });
+    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.ɵɵtext(2);
     i0.ɵɵelement(3, "i", 129);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Open parent agent: ", ctx_r2.record.Parent));
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Open parent agent: ", ctx_r1.record.Parent));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Child of ", ctx_r2.record.Parent, " ");
+    i0.ɵɵtextInterpolate1(" Child of ", ctx_r1.record.Parent, " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 130);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openTestHarness()); });
+    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.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "button", 131);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openPermissionsDialog()); });
+    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.ɵɵtext(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("disabled", ctx_r2.record.Status !== "Active");
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("disabled", ctx_r1.record.Status !== "Active");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("title", ctx_r2.IsOpenToEveryone ? "Open to everyone \u2014 click to manage permissions" : "Restricted \u2014 click to manage permissions");
+    i0.ɵɵproperty("title", ctx_r1.IsOpenToEveryone ? "Open to everyone \u2014 click to manage permissions" : "Restricted \u2014 click to manage permissions");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("color", ctx_r2.IsOpenToEveryone ? "var(--mj-status-success)" : null);
-    i0.ɵɵclassProp("fa-lock-open", ctx_r2.IsOpenToEveryone)("fa-lock", !ctx_r2.IsOpenToEveryone);
+    i0.ɵɵstyleProp("color", ctx_r1.IsOpenToEveryone ? "var(--mj-status-success)" : null);
+    i0.ɵɵclassProp("fa-lock-open", ctx_r1.IsOpenToEveryone)("fa-lock", !ctx_r1.IsOpenToEveryone);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.IsOpenToEveryone ? "Open" : "Restricted", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.IsOpenToEveryone ? "Open" : "Restricted", " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleHeaderCollapsed()); });
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 111)(5, "div", 112);
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_6_Template, 1, 2, "img", 113)(7, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_7_Template, 1, 2, "i", 114);
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "div", 115);
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_9_Template, 1, 1, "input", 116)(10, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_10_Template, 2, 1, "h1", 117);
+    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_1_Conditional_3_Conditional_12_Template, 3, 3, "span", 119);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_13_Template, 2, 1, "span", 120);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_14_Template, 4, 3, "span", 121);
+    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.ɵɵelementEnd()()();
     i0.ɵɵelementStart(15, "div", 122);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Conditional_16_Template, 6, 9);
+    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Conditional_16_Template, 6, 9);
     i0.ɵɵelementStart(17, "button", 123);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.refreshRelatedData()); });
+    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.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.hasLogoURL() ? 6 : 7);
+    i0.ɵɵconditional(ctx_r1.hasLogoURL() ? 6 : 7);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 9 : 10);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 9 : 10);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.record.Status ? 12 : -1);
+    i0.ɵɵconditional(ctx_r1.record.Status ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.Type ? 13 : -1);
+    i0.ɵɵconditional(ctx_r1.record.Type ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.Parent ? 14 : -1);
+    i0.ɵɵconditional(ctx_r1.record.Parent ? 14 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.record.ID ? 16 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 16 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 139);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getStatusBadgeColor());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getStatusBadgeColor());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Status, " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 140);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openTestHarness()); });
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "button", 141);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Conditional_7_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openPermissionsDialog()); });
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("disabled", ctx_r2.record.Status !== "Active");
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("disabled", ctx_r1.record.Status !== "Active");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("title", ctx_r2.IsOpenToEveryone ? "Open to everyone" : "Restricted");
+    i0.ɵɵproperty("title", ctx_r1.IsOpenToEveryone ? "Open to everyone" : "Restricted");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("color", ctx_r2.IsOpenToEveryone ? "var(--mj-status-success)" : null);
-    i0.ɵɵclassProp("fa-lock-open", ctx_r2.IsOpenToEveryone)("fa-lock", !ctx_r2.IsOpenToEveryone);
+    i0.ɵɵstyleProp("color", ctx_r1.IsOpenToEveryone ? "var(--mj-status-success)" : null);
+    i0.ɵɵclassProp("fa-lock-open", ctx_r1.IsOpenToEveryone)("fa-lock", !ctx_r1.IsOpenToEveryone);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.ToggleHeaderCollapsed()); });
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span", 135);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Conditional_5_Template, 2, 3, "span", 136);
+    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_5_Template, 2, 3, "span", 136);
     i0.ɵɵelement(6, "div", 137);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Conditional_7_Template, 4, 8);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Conditional_7_Template, 4, 8);
     i0.ɵɵelementStart(8, "button", 138);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.refreshRelatedData()); });
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Untitled AI Agent");
+    i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled AI Agent");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.Status ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.record.Status ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.record.ID ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 7 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 144);
     i0.ɵɵtext(1);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.agentType.Name, " Configuration ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.agentType.Name, " Configuration ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 143);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("text", i0.ɵɵinterpolate1("Loading ", ctx_r2.agentType.Name, " configuration..."));
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("text", i0.ɵɵinterpolate1("Loading ", ctx_r1.agentType.Name, " configuration..."));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 9);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_6_ng_template_1_Template, 2, 1, "ng-template", 17);
+    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_1_Conditional_6_Conditional_3_Template, 1, 2, "mj-loading", 143);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_3_Template, 1, 2, "mj-loading", 143);
     i0.ɵɵelementContainer(4, null, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("custom", ctx_r2.agentType.UIFormSectionExpandedByDefault));
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("custom", ctx_r1.agentType.UIFormSectionExpandedByDefault));
     i0.ɵɵadvance(2);
     i0.ɵɵstyleProp("display", "block");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.loadingStates.customSection ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.loadingStates.customSection ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_ng_template_1_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(5);
-    i0.ɵɵtextInterpolate1(" of ", ctx_r2.totalExecutionHistoryCount);
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵtextInterpolate1(" of ", ctx_r1.totalExecutionHistoryCount);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_ng_template_1_Conditional_3_Conditional_2_Template, 1, 1);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_3_Conditional_2_Template, 1, 1);
     i0.ɵɵtext(3, ")");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" (", ctx_r2.executionHistoryCount);
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.executionHistoryCount);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.executionHistoryCount < ctx_r2.totalExecutionHistoryCount ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.executionHistoryCount < ctx_r1.totalExecutionHistoryCount ? 2 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 148);
     i0.ɵɵtext(1, " Execution History ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_1_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", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_ng_template_1_Conditional_3_Template, 4, 2, "span");
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.loadingStates.executionHistory ? 2 : ctx_r2.executionHistoryCount > 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.loadingStates.executionHistory ? 2 : ctx_r1.executionHistoryCount > 0 ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 146);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+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(2, "h4");
@@ -288,7 +288,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵtext(5, "This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.");
     i0.ɵɵelementEnd()();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+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(2, "h4");
@@ -298,11 +298,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("No execution history found matching \"", ctx_r2.executionSearchText, "\"");
+    i0.ɵɵtextInterpolate1("No execution history found matching \"", ctx_r1.executionSearchText, "\"");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -316,7 +316,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(execution_r11.Configuration);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -327,18 +327,18 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.formatExecutionTimeFromDates(execution_r11.StartedAt, execution_r11.CompletedAt));
+    i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTimeFromDates(execution_r11.StartedAt, execution_r11.CompletedAt));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(3, "Running:");
     i0.ɵɵelementEnd()();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -349,11 +349,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.formatTokenCount(execution_r11.TotalTokensUsedRollup || execution_r11.TotalTokensUsed));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r11.TotalTokensUsedRollup || execution_r11.TotalTokensUsed));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -364,11 +364,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("$", ctx_r2.formatCost(execution_r11.TotalCostRollup || execution_r11.TotalCost));
+    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r11.TotalCostRollup || execution_r11.TotalCost));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -383,7 +383,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 1, execution_r11.CompletedAt, "medium"));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -394,11 +394,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r2.formatTokenCount(execution_r11.TotalTokensUsed));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r11.TotalTokensUsed));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -409,11 +409,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r2.formatTokenCount(execution_r11.TotalTokensUsedRollup));
+    i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r11.TotalTokensUsedRollup));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -424,11 +424,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1("$", ctx_r2.formatCost(execution_r11.TotalCost));
+    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r11.TotalCost));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -439,11 +439,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1("$", ctx_r2.formatCost(execution_r11.TotalCostRollup));
+    i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r11.TotalCostRollup));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -457,7 +457,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1("", execution_r11.ConversationID.substring(0, 8), "...");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(3, " Result");
@@ -466,11 +466,11 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r2.getExecutionResultPreview(execution_r11, false))("readonly", true)("lineWrapping", true);
+    i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r11, false))("readonly", true)("lineWrapping", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(3, " Error");
@@ -483,7 +483,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(execution_r11.ErrorMessage);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+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);
@@ -493,15 +493,15 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_11_Template, 8, 4, "div", 182);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_12_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_13_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_14_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_15_Template, 7, 1, "div", 182);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_1_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", 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.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_17_Template, 5, 3, "div", 186);
-    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_1_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", 186);
+    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Conditional_5_For_7_Conditional_22_Conditional_18_Template, 6, 1, "div", 187);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r11 = i0.ɵɵnextContext().$implicit;
@@ -524,10 +524,10 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(execution_r11.ErrorMessage ? 18 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Template_div_click_1_listener() { const execution_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.toggleExecutionExpanded(execution_r11.ID)); });
+    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.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
@@ -540,27 +540,27 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵpipe(12, "date");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(13, "div", 167);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_14_Template, 6, 1, "div", 168);
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_15_Template, 6, 1, "div", 168)(16, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_16_Template, 4, 0, "div", 168);
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_17_Template, 6, 1, "div", 168);
-    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Conditional_18_Template, 6, 1, "div", 168);
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(19, "div", 169)(20, "button", 170);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Template_button_click_20_listener($event) { const execution_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); ctx_r2.openExecutionRecord(execution_r11.ID); return i0.ɵɵresetView($event.stopPropagation()); });
+    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.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(22, MJAIAgentFormComponentExtended_Conditional_1_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", 172);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r11 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("expanded", ctx_r2.expandedExecutions[execution_r11.ID]);
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r11.ID]);
     i0.ɵɵadvance(4);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getExecutionStatusColor(execution_r11.Status));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getExecutionStatusColor(execution_r11.Status));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.getExecutionStatusIcon(execution_r11.Status));
+    i0.ɵɵclassMap(ctx_r1.getExecutionStatusIcon(execution_r11.Status));
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("expanded", ctx_r2.expandedExecutions[execution_r11.ID]);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r11.ID]);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Execution #", execution_r11.ID.substring(0, 8), " ");
     i0.ɵɵadvance(2);
@@ -574,136 +574,136 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(execution_r11.TotalCostRollup || execution_r11.TotalCost ? 18 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.expandedExecutions[execution_r11.ID] ? 22 : -1);
+    i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r11.ID] ? 22 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 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.ɵɵtext(1, " Loading... ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(5);
-    i0.ɵɵtextInterpolate2(" Page ", ctx_r2.executionHistoryCurrentPage, " of ", ctx_r2.totalPages, " ");
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵtextInterpolate2(" Page ", ctx_r1.executionHistoryCurrentPage, " of ", ctx_r1.totalPages, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("(", ctx_r2.totalExecutionHistoryCount, " total)");
+    i0.ɵɵtextInterpolate1("(", ctx_r1.totalExecutionHistoryCount, " total)");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.goToPreviousPage()); });
+    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.ɵɵtext(3, " Previous ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 197);
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Conditional_5_Template, 2, 0)(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Conditional_6_Template, 3, 3);
+    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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.goToNextPage()); });
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "button", 199);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Runs", "")); });
+    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.ɵɵtext(12, " View All in Grid ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", !ctx_r2.hasPreviousPage || ctx_r2.isLoadingPage);
+    i0.ɵɵproperty("disabled", !ctx_r1.hasPreviousPage || ctx_r1.isLoadingPage);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.isLoadingPage ? 5 : 6);
+    i0.ɵɵconditional(ctx_r1.isLoadingPage ? 5 : 6);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r2.hasNextPage || ctx_r2.isLoadingPage);
+    i0.ɵɵproperty("disabled", !ctx_r1.hasNextPage || ctx_r1.isLoadingPage);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.executionSearchText, $event) || (ctx_r2.executionSearchText = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onExecutionSearchChange()); });
+    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_1_Conditional_7_Conditional_5_Conditional_5_Template, 6, 1, "div", 147);
-    i0.ɵɵrepeaterCreate(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_For_7_Template, 23, 18, "div", 156, _forTrack0);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Conditional_8_Template, 13, 3, "div", 157);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.executionSearchText);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.executionSearchText);
     i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(4, _c1));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.filteredExecutions.length === 0 ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.filteredExecutions.length === 0 ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.filteredExecutions);
+    i0.ɵɵrepeater(ctx_r1.filteredExecutions);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.totalPages > 1 ? 8 : -1);
+    i0.ɵɵconditional(ctx_r1.totalPages > 1 ? 8 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 10);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_ng_template_1_Template, 4, 1, "ng-template", 17);
+    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_1_Conditional_7_Conditional_3_Template, 1, 0, "mj-loading", 146)(4, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_4_Template, 6, 0, "div", 147)(5, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Conditional_5_Template, 9, 5);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("history", false))("Disabled", ctx_r2.loadingStates.executionHistory);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("history", false))("Disabled", ctx_r1.loadingStates.executionHistory);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.loadingStates.executionHistory ? 3 : ctx_r2.executionHistoryCount === 0 ? 4 : 5);
+    i0.ɵɵconditional(ctx_r1.loadingStates.executionHistory ? 3 : ctx_r1.executionHistoryCount === 0 ? 4 : 5);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" (", ctx_r2.actionCount, ")");
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.actionCount, ")");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 87);
     i0.ɵɵtext(1, " Actions ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_1_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", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.loadingStates.actions ? 2 : ctx_r2.actionCount > 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 2 : ctx_r1.actionCount > 0 ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 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(2, "p");
     i0.ɵɵtext(3, "Loading actions...");
     i0.ɵɵelementEnd()();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.configureActions()); });
+    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.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.configureActions()); });
+    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.ɵɵtext(2, " Configure First Action ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+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(2, "h4");
@@ -712,14 +712,14 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_
     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_1_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", 209);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreateActions ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 6 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_6_Template(rf, ctx) { if (rf & 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.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -728,7 +728,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(action_r16.Description);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -737,39 +737,39 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(action_r16.Type);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_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_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.removeAction(action_r16, $event)); });
+    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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_For_2_Template_div_click_0_listener() { const action_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: Actions", action_r16.ID)); });
+    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.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 215)(4, "div", 216);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 217);
+    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_1_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 219);
+    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.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(12, "div", 221);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 222);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
     const action_r16 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(5);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getActionIcon(action_r16));
+    i0.ɵɵclassMap(ctx_r1.getActionIcon(action_r16));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(action_r16.Name || "Untitled Action");
     i0.ɵɵadvance();
@@ -783,93 +783,93 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", action_r16.Status, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanDeleteActions ? 13 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeleteActions ? 13 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Actions", "")); });
+    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);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(5);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r2.actionCount, " actions...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+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_1_Conditional_8_Conditional_4_Conditional_4_For_2_Template, 15, 15, "div", 211, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_4_Conditional_3_Template, 3, 1, "div", 212);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.agentActions);
+    i0.ɵɵrepeater(ctx_r1.agentActions);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.actionCount > ctx_r2.agentActions.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Template(rf, ctx) { if (rf & 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_1_Conditional_8_Conditional_4_Conditional_2_Template, 3, 0, "button", 205);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_2_Template, 3, 0, "button", 205);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Conditional_3_Template, 7, 1, "div", 147)(4, MJAIAgentFormComponentExtended_Conditional_1_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", 147)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Conditional_4_Conditional_4_Template, 4, 1, "div", 206);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreateActions ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.actionCount === 0 ? 3 : 4);
+    i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 3 : 4);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 11);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_ng_template_1_Template, 4, 1, "ng-template", 17);
+    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_1_Conditional_8_Conditional_3_Template, 4, 0, "div", 203)(4, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Conditional_4_Template, 5, 2);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("actions", false))("Disabled", ctx_r2.loadingStates.actions);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("actions", false))("Disabled", ctx_r1.loadingStates.actions);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.loadingStates.actions ? 3 : 4);
+    i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 3 : 4);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" (", ctx_r2.totalSubAgentCount, ")");
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.totalSubAgentCount, ")");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 83);
     i0.ɵɵtext(1, " Sub-Agents ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_1_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", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.loadingStates.subAgents ? 2 : ctx_r2.totalSubAgentCount > 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.loadingStates.subAgents ? 2 : ctx_r1.totalSubAgentCount > 0 ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 232);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.createChildSubAgent()); });
+    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.ɵɵtext(2, " Create Child ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "button", 233);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.linkRelatedSubAgent()); });
+    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.ɵɵtext(5, " Link Related ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+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(2, "h4");
@@ -895,20 +895,20 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_
     i0.ɵɵtext(18, "Reusable agents with payload mapping");
     i0.ɵɵelementEnd()()()();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 241);
 } if (rf & 2) {
     const item_r22 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("src", item_r22.agent.LogoURL, i0.ɵɵsanitizeUrl)("alt", item_r22.agent.Name + " logo");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i");
 } if (rf & 2) {
     const item_r22 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassMap(ctx_r2.getSubAgentIcon(item_r22.agent));
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(item_r22.agent));
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 217);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -917,18 +917,18 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r22.agent.Description);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 220);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r22 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("background-color", ctx_r2.getStatusBadgeColor());
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getStatusBadgeColor());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", item_r22.agent.Status, " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 219);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -937,24 +937,24 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r22.agent.Type);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_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_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.configureOutputMapping(item_r22, $event)); });
+    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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_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_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.openSubAgentAdvancedSettings(item_r22.agent, $event)); });
+    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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_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_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(item_r22.type === "child" ? ctx_r2.removeChildSubAgent(item_r22, $event) : ctx_r2.unlinkRelatedSubAgent(item_r22, $event)); });
+    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();
 } if (rf & 2) {
@@ -963,182 +963,182 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵclassMap(item_r22.type === "child" ? "fa-solid fa-trash" : "fa-solid fa-unlink");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_0_Template, 2, 0, "button", 245);
-    i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_1_Template, 2, 0, "button", 246);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Conditional_2_Template, 2, 3, "button", 247);
+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);
 } if (rf & 2) {
     const item_r22 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(item_r22.type === "related" ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r22.type === "child" && ctx_r2.UserCanCreateSubAgents ? 1 : -1);
+    i0.ɵɵconditional(item_r22.type === "child" && ctx_r1.UserCanCreateSubAgents ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanDeleteSubAgents ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanDeleteSubAgents ? 2 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Template_div_click_0_listener() { const item_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agents", item_r22.agent.ID)); });
+    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.ɵɵelement(2, "i");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 214);
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_5_Template, 1, 2, "img", 241)(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_6_Template, 1, 2, "i", 114);
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "div", 215)(8, "div", 216);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_10_Template, 2, 1, "div", 217);
+    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.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_15_Template, 2, 3, "span", 244);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_1_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", 244);
+    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_16_Template, 2, 1, "span", 219);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(17, "div", 221);
-    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_For_2_Conditional_18_Template, 3, 3);
+    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Conditional_18_Template, 3, 3);
     i0.ɵɵelement(19, "i", 200);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r22 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵclassProp("child-sub-agent", item_r22.type === "child")("related-sub-agent", item_r22.type === "related");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r2.getSubAgentBadgeColor(item_r22));
+    i0.ɵɵstyleProp("background-color", ctx_r1.getSubAgentBadgeColor(item_r22));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.getSubAgentBadgeIcon(item_r22));
+    i0.ɵɵclassMap(ctx_r1.getSubAgentBadgeIcon(item_r22));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getSubAgentBadgeText(item_r22), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubAgentBadgeText(item_r22), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.hasSubAgentLogoURL(item_r22.agent) ? 5 : 6);
+    i0.ɵɵconditional(ctx_r1.hasSubAgentLogoURL(item_r22.agent) ? 5 : 6);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(item_r22.agent.Name || "Untitled Sub-Agent");
     i0.ɵɵadvance();
     i0.ɵɵconditional(item_r22.agent.Description ? 10 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getSubAgentPayloadInfo(item_r22), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getSubAgentPayloadInfo(item_r22), " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(item_r22.agent.Status ? 15 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(item_r22.agent.Type ? 16 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 18 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 18 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_Template(rf, ctx) { if (rf & 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_1_Conditional_9_Conditional_18_For_2_Template, 20, 16, "div", 238, _forTrack1);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_18_For_2_Template, 20, 16, "div", 238, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.filteredSubAgents);
+    i0.ɵɵrepeater(ctx_r1.filteredSubAgents);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+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_1_Conditional_9_ng_template_1_Template, 4, 1, "ng-template", 17);
+    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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setSubAgentFilter("all")); });
+    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.ɵɵtext(8);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "button", 229);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setSubAgentFilter("child")); });
+    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.ɵɵtext(11);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "button", 229);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setSubAgentFilter("related")); });
+    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.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(15, "div", 204);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_16_Template, 6, 0);
+    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Conditional_16_Template, 6, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_17_Template, 19, 0, "div", 147)(18, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Conditional_18_Template, 3, 0, "div", 206);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("subagents", false))("Disabled", ctx_r2.loadingStates.subAgents);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("subagents", false))("Disabled", ctx_r1.loadingStates.subAgents);
     i0.ɵɵadvance(6);
-    i0.ɵɵclassProp("active", ctx_r2.subAgentFilter === "all");
+    i0.ɵɵclassProp("active", ctx_r1.subAgentFilter === "all");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" All (", ctx_r2.totalSubAgentCount, ") ");
+    i0.ɵɵtextInterpolate1(" All (", ctx_r1.totalSubAgentCount, ") ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r2.subAgentFilter === "child");
+    i0.ɵɵclassProp("active", ctx_r1.subAgentFilter === "child");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Child (", ctx_r2.childSubAgentCount, ") ");
+    i0.ɵɵtextInterpolate1(" Child (", ctx_r1.childSubAgentCount, ") ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r2.subAgentFilter === "related");
+    i0.ɵɵclassProp("active", ctx_r1.subAgentFilter === "related");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Related (", ctx_r2.relatedSubAgentCount, ") ");
+    i0.ɵɵtextInterpolate1(" Related (", ctx_r1.relatedSubAgentCount, ") ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreateSubAgents ? 16 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateSubAgents ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.totalSubAgentCount === 0 ? 17 : 18);
+    i0.ɵɵconditional(ctx_r1.totalSubAgentCount === 0 ? 17 : 18);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" (", ctx_r2.promptCount, ")");
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.promptCount, ")");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 190);
     i0.ɵɵtext(1, " Prompts ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_1_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", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.loadingStates.prompts ? 2 : ctx_r2.promptCount > 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.loadingStates.prompts ? 2 : ctx_r1.promptCount > 0 ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_9_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.record.ModelSelectionMode, $event) || (ctx_r2.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
+    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) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.ModelSelectionMode);
-    i0.ɵɵproperty("Data", ctx_r2.modelSelectionModes)("ValuePrimitive", true);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.ModelSelectionMode);
+    i0.ɵɵproperty("Data", ctx_r1.modelSelectionModes)("ValuePrimitive", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 257);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.record.ModelSelectionMode || "Agent Type");
+    i0.ɵɵtextInterpolate(ctx_r1.record.ModelSelectionMode || "Agent Type");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 207);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addPrompt()); });
+    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.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_13_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.addPrompt()); });
+    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.ɵɵtext(2, " Create First Prompt ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+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(2, "h4");
@@ -1147,14 +1147,14 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional
     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_1_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", 209);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreateNewPrompts ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 6 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Conditional_6_Template(rf, ctx) { if (rf & 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.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -1163,7 +1163,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", prompt_r30.TemplateText.substring(0, 120), "", prompt_r30.TemplateText.length > 120 ? "..." : "");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 219);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -1172,42 +1172,42 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(prompt_r30.PromptRole);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_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_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.openPromptAdvancedSettings(prompt_r30, $event)); });
+    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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_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_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.removePrompt(prompt_r30, $event)); });
+    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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Template_div_click_0_listener() { const prompt_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Prompts", prompt_r30.ID)); });
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 215)(4, "div", 216);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Conditional_6_Template, 2, 2, "div", 217);
+    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_1_Conditional_10_Conditional_14_For_2_Conditional_8_Template, 2, 1, "span", 219);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_For_2_Conditional_8_Template, 2, 1, "span", 219);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 221);
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Conditional_10_Template, 2, 0, "button", 246);
-    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Conditional_11_Template, 2, 0, "button", 262);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
     const prompt_r30 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(prompt_r30.Name);
     i0.ɵɵadvance();
@@ -1215,82 +1215,82 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(prompt_r30.PromptRole ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreatePrompts ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreatePrompts ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanDeletePrompts ? 11 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeletePrompts ? 11 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Prompts", "")); });
+    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);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r2.promptCount, " prompts...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.promptCount, " prompts...");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_For_2_Template, 13, 5, "div", 259, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_Conditional_3_Template, 3, 1, "div", 212);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.agentPrompts);
+    i0.ɵɵrepeater(ctx_r1.agentPrompts);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.promptCount > ctx_r2.agentPrompts.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.promptCount > ctx_r1.agentPrompts.length ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 13);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_ng_template_1_Template, 4, 1, "ng-template", 17);
+    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.ɵɵtext(8, " Model Selection: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_9_Template, 1, 3, "mj-dropdown", 256)(10, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_10_Template, 2, 1, "span", 257);
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(11, "div", 204);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_12_Template, 3, 0, "button", 205);
+    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_10_Conditional_12_Template, 3, 0, "button", 205);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_13_Template, 7, 1, "div", 147)(14, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Conditional_14_Template, 4, 1, "div", 206);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("prompts", false))("Disabled", ctx_r2.loadingStates.prompts);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("prompts", false))("Disabled", ctx_r1.loadingStates.prompts);
     i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 9 : 10);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 9 : 10);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreateNewPrompts ? 12 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.promptCount === 0 ? 13 : 14);
+    i0.ɵɵconditional(ctx_r1.promptCount === 0 ? 13 : 14);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" (", ctx_r2.learningCycleCount, ")");
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.learningCycleCount, ")");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 264);
     i0.ɵɵtext(1, " Learning Cycles ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_1_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", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.loadingStates.learningCycles ? 2 : ctx_r2.learningCycleCount > 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.loadingStates.learningCycles ? 2 : ctx_r1.learningCycleCount > 0 ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 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(2, "h4");
@@ -1300,7 +1300,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional
     i0.ɵɵtext(5, "Learning cycles will appear here as the agent processes requests and improves over time.");
     i0.ɵɵelementEnd()();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(2);
@@ -1311,7 +1311,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r35.StartedAt, "short"), " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 220);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -1320,10 +1320,10 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cycle_r35.Status);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_For_2_Template_div_click_0_listener() { const cycle_r35 = i0.ɵɵrestoreView(_r34).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Learning Cycles", cycle_r35.ID)); });
+    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.ɵɵelementEnd();
@@ -1331,8 +1331,8 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 218);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_For_2_Conditional_7_Template, 4, 4, "span", 219);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_For_2_Conditional_8_Template, 2, 1, "span", 220);
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 221);
     i0.ɵɵelement(10, "i", 200);
@@ -1346,84 +1346,84 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional
     i0.ɵɵadvance();
     i0.ɵɵconditional(cycle_r35.Status ? 8 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Learning Cycles", "")); });
+    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);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r2.learningCycleCount, " cycles...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_For_2_Template, 11, 3, "div", 265, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_Conditional_3_Template, 3, 1, "div", 212);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.learningCycles);
+    i0.ɵɵrepeater(ctx_r1.learningCycles);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.learningCycleCount > ctx_r2.learningCycles.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.learningCycleCount > ctx_r1.learningCycles.length ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 14);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_ng_template_1_Template, 4, 1, "ng-template", 17);
+    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.ɵɵtext(5, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_6_Template, 6, 0, "div", 147)(7, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Conditional_7_Template, 4, 1, "div", 206);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("learning", false))("Disabled", ctx_r2.loadingStates.learningCycles);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("learning", false))("Disabled", ctx_r1.loadingStates.learningCycles);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.learningCycleCount === 0 ? 6 : 7);
+    i0.ɵɵconditional(ctx_r1.learningCycleCount === 0 ? 6 : 7);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" (", ctx_r2.noteCount, ")");
+    i0.ɵɵtextInterpolate1(" (", ctx_r1.noteCount, ")");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 268);
     i0.ɵɵtext(1, " Notes ");
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_ng_template_1_Conditional_2_Template, 2, 0, "span", 149)(3, MJAIAgentFormComponentExtended_Conditional_1_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", 149)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.loadingStates.notes ? 2 : ctx_r2.noteCount > 0 ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.loadingStates.notes ? 2 : ctx_r1.noteCount > 0 ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 207);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNote()); });
+    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.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_8_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.addNote()); });
+    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.ɵɵtext(2, " Create First Note ");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+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(2, "h4");
@@ -1432,14 +1432,14 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional
     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_1_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", 209);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreateNotes ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 6 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_For_2_Conditional_6_Template(rf, ctx) { if (rf & 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.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -1448,7 +1448,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", note_r40.Note.substring(0, 100), "", note_r40.Note.length > 100 ? "..." : "");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵtext(2);
@@ -1459,19 +1459,19 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, note_r40.__mj_CreatedAt, "short"), " ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_For_2_Template_div_click_0_listener() { const note_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Notes", note_r40.ID)); });
+    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.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 215)(4, "div", 216);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_For_2_Conditional_6_Template, 2, 2, "div", 217);
+    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_1_Conditional_12_Conditional_9_For_2_Conditional_8_Template, 4, 4, "span", 219);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_For_2_Conditional_8_Template, 4, 4, "span", 219);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 221);
     i0.ɵɵelement(10, "i", 200);
@@ -1485,169 +1485,169 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(note_r40.__mj_CreatedAt ? 8 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+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.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.navigateToEntity("MJ: AI Agent Notes", "")); });
+    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);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r2.noteCount, " notes...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_For_2_Template, 11, 3, "div", 269, _forTrack0);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_Conditional_3_Template, 3, 1, "div", 212);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.agentNotes);
+    i0.ɵɵrepeater(ctx_r1.agentNotes);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.noteCount > ctx_r2.agentNotes.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.noteCount > ctx_r1.agentNotes.length ? 3 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mj-accordion-panel", 15);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_ng_template_1_Template, 4, 1, "ng-template", 17);
+    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.ɵɵtext(5, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 204);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_7_Template, 3, 0, "button", 205);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_12_Conditional_7_Template, 3, 0, "button", 205);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_8_Template, 7, 1, "div", 147)(9, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Conditional_9_Template, 4, 1, "div", 206);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("notes", false))("Disabled", ctx_r2.loadingStates.notes);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("notes", false))("Disabled", ctx_r1.loadingStates.notes);
     i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r2.EditMode && ctx_r2.UserCanCreateNotes ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.noteCount === 0 ? 8 : 9);
+    i0.ɵɵconditional(ctx_r1.noteCount === 0 ? 8 : 9);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_ng_template_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 249);
     i0.ɵɵtext(1, " Payload Management ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_ng_template_140_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_ng_template_140_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 271);
     i0.ɵɵtext(1, " Execution Guardrails ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_ng_template_151_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_ng_template_151_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 272);
     i0.ɵɵtext(1, " Configuration ");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_171_Template(rf, ctx) { if (rf & 1) {
+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_1_Conditional_171_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Status, $event) || (ctx_r2.record.Status = $event); return i0.ɵɵresetView($event); });
+    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); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Status);
-    i0.ɵɵproperty("Data", ctx_r2.statusOptions)("ValuePrimitive", true);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Status);
+    i0.ɵɵproperty("Data", ctx_r1.statusOptions)("ValuePrimitive", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_172_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_172_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 82);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.record.Status || "Not Set");
+    i0.ɵɵtextInterpolate(ctx_r1.record.Status || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_183_Template(rf, ctx) { if (rf & 1) {
+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_1_Conditional_183_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.TypeID, $event) || (ctx_r2.record.TypeID = $event); return i0.ɵɵresetView($event); });
+    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); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.TypeID);
-    i0.ɵɵproperty("Data", ctx_r2.agentTypes)("ValuePrimitive", true);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.TypeID);
+    i0.ɵɵproperty("Data", ctx_r1.agentTypes)("ValuePrimitive", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_184_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_184_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 82);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.record.Type || "Not Set");
+    i0.ɵɵtextInterpolate(ctx_r1.record.Type || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_195_Template(rf, ctx) { if (rf & 1) {
+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_1_Conditional_195_Template_mj_tree_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnCategoryChange($event)); });
+    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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("BranchConfig", ctx_r2.CategoryBranchConfig)("Value", ctx_r2.SelectedCategoryKey)("Clearable", true)("EnableSearch", true);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("BranchConfig", ctx_r1.CategoryBranchConfig)("Value", ctx_r1.SelectedCategoryKey)("Clearable", true)("EnableSearch", true);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_196_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_196_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 82);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.record.Category || "Not Set");
+    i0.ɵɵtextInterpolate(ctx_r1.record.Category || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 282);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r2.selectedContextCompressionPrompt.Name);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedContextCompressionPrompt.Name);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 283);
     i0.ɵɵtext(1, "No prompt selected");
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+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_1_Conditional_322_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.clearContextCompressionPrompt()); });
+    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);
     i0.ɵɵelementEnd();
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+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_1_Conditional_322_Conditional_32_Conditional_2_Template, 2, 1, "span", 282)(3, MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Conditional_3_Template, 2, 0, "span", 283);
+    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);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 284)(5, "button", 285);
-    i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r45); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openContextCompressionPromptSelector()); });
+    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.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Conditional_8_Template, 2, 0, "button", 286);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_32_Conditional_8_Template, 2, 0, "button", 286);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.selectedContextCompressionPrompt ? 2 : 3);
+    i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 2 : 3);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.selectedContextCompressionPrompt ? "Change" : "Select", " Prompt ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedContextCompressionPrompt ? "Change" : "Select", " Prompt ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.selectedContextCompressionPrompt ? 8 : -1);
+    i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 8 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 82);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate((ctx_r2.selectedContextCompressionPrompt == null ? null : ctx_r2.selectedContextCompressionPrompt.Name) || ctx_r2.record.ContextCompressionPrompt || "Not Set");
+    i0.ɵɵtextInterpolate((ctx_r1.selectedContextCompressionPrompt == null ? null : ctx_r1.selectedContextCompressionPrompt.Name) || ctx_r1.record.ContextCompressionPrompt || "Not Set");
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Template(rf, ctx) { if (rf & 1) {
+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);
     i0.ɵɵelementEnd();
@@ -1682,33 +1682,34 @@ function MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Template(r
     i0.ɵɵtext(30, "Prompt used for summarization");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(31, "div", 80);
-    i0.ɵɵconditionalCreate(32, MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_32_Template, 9, 3, "div", 280)(33, MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Conditional_33_Template, 2, 1, "span", 82);
+    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.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(10);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(11);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(11);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 32 : 33);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 32 : 33);
 } }
-function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJAIAgentFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "form", 3, 0);
-    i0.ɵɵelement(2, "mj-form-toolbar", 5);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_1_Conditional_3_Template, 19, 6, "div", 6);
-    i0.ɵɵconditionalCreate(4, MJAIAgentFormComponentExtended_Conditional_1_Conditional_4_Template, 10, 3, "div", 7);
+    i0.ɵɵelementStart(0, "mj-record-form-container", 4);
+    i0.ɵɵlistener("Navigate", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_record_form_container_Navigate_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormNavigate($event)); })("DeleteRequested", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_record_form_container_DeleteRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteRequested()); })("FavoriteToggled", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_record_form_container_FavoriteToggled_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFavoriteToggled()); })("HistoryRequested", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_record_form_container_HistoryRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnHistoryRequested()); })("ListManagementRequested", function MJAIAgentFormComponentExtended_Conditional_0_Template_mj_record_form_container_ListManagementRequested_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnListManagementRequested()); });
+    i0.ɵɵelementStart(1, "form", 5, 0);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_3_Template, 19, 6, "div", 6);
+    i0.ɵɵconditionalCreate(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_4_Template, 10, 3, "div", 7);
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_1_Conditional_6_Template, 6, 4, "mj-accordion-panel", 9);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_1_Conditional_7_Template, 6, 3, "mj-accordion-panel", 10);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_1_Conditional_8_Template, 5, 3, "mj-accordion-panel", 11);
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_1_Conditional_9_Template, 19, 13, "mj-accordion-panel", 12);
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_1_Conditional_10_Template, 15, 5, "mj-accordion-panel", 13);
-    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_1_Conditional_11_Template, 8, 3, "mj-accordion-panel", 14);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_1_Conditional_12_Template, 10, 4, "mj-accordion-panel", 15);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template, 6, 4, "mj-accordion-panel", 9);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_7_Template, 6, 3, "mj-accordion-panel", 10);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_8_Template, 5, 3, "mj-accordion-panel", 11);
+    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_9_Template, 19, 13, "mj-accordion-panel", 12);
+    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_1_ng_template_14_Template, 2, 0, "ng-template", 17);
+    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.ɵɵelementEnd()();
@@ -1749,7 +1750,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(53, "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_1_Template_mj_code_editor_valueChange_56_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updatePayloadField("PayloadDownstreamPaths", $event)); });
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(57, "div", 42);
     i0.ɵɵelement(58, "i", 43);
@@ -1771,7 +1772,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(73, "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_1_Template_mj_code_editor_valueChange_76_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updatePayloadField("PayloadUpstreamPaths", $event)); });
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(77, "div", 42);
     i0.ɵɵelement(78, "i", 43);
@@ -1791,7 +1792,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(91, "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_1_Template_mj_code_editor_valueChange_94_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updatePayloadField("PayloadSelfReadPaths", $event)); });
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(95, "div", 42);
     i0.ɵɵelement(96, "i", 43);
@@ -1807,7 +1808,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(106, "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_1_Template_mj_code_editor_valueChange_109_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updatePayloadField("PayloadSelfWritePaths", $event)); });
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(110, "div", 42);
     i0.ɵɵelement(111, "i", 43);
@@ -1841,10 +1842,10 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(136, " 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_1_Template_mj_code_editor_valueChange_138_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.updatePayloadField("FinalPayloadValidation", $event)); });
+    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.ɵɵelementEnd()()()()()()();
     i0.ɵɵelementStart(139, "mj-accordion-panel", 64);
-    i0.ɵɵtemplate(140, MJAIAgentFormComponentExtended_Conditional_1_ng_template_140_Template, 2, 0, "ng-template", 17);
+    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.ɵɵelementEnd()();
@@ -1852,7 +1853,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵelement(146, "mj-form-field", 66)(147, "mj-form-field", 67)(148, "mj-form-field", 68)(149, "mj-form-field", 69);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(150, "mj-accordion-panel", 70);
-    i0.ɵɵtemplate(151, MJAIAgentFormComponentExtended_Conditional_1_ng_template_151_Template, 2, 0, "ng-template", 17);
+    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.ɵɵelementEnd()();
@@ -1870,7 +1871,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(169, "Current availability and operational status");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(170, "div", 80);
-    i0.ɵɵconditionalCreate(171, MJAIAgentFormComponentExtended_Conditional_1_Conditional_171_Template, 1, 3, "mj-dropdown", 81)(172, MJAIAgentFormComponentExtended_Conditional_1_Conditional_172_Template, 2, 1, "span", 82);
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(173, "div", 75)(174, "div", 76)(175, "div", 77);
     i0.ɵɵelement(176, "i", 83);
@@ -1882,7 +1883,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(181, "Category and system-level behavior");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(182, "div", 80);
-    i0.ɵɵconditionalCreate(183, MJAIAgentFormComponentExtended_Conditional_1_Conditional_183_Template, 1, 3, "mj-dropdown", 84)(184, MJAIAgentFormComponentExtended_Conditional_1_Conditional_184_Template, 2, 1, "span", 82);
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(185, "div", 75)(186, "div", 76)(187, "div", 77);
     i0.ɵɵelement(188, "i", 85);
@@ -1894,7 +1895,7 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(193, "Organizational category for this agent");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(194, "div", 80);
-    i0.ɵɵconditionalCreate(195, MJAIAgentFormComponentExtended_Conditional_1_Conditional_195_Template, 1, 4, "mj-tree-dropdown", 86)(196, MJAIAgentFormComponentExtended_Conditional_1_Conditional_196_Template, 2, 1, "span", 82);
+    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.ɵɵelementEnd()();
     i0.ɵɵelementStart(197, "div", 75)(198, "div", 76)(199, "div", 77);
     i0.ɵɵelement(200, "i", 87);
@@ -2025,97 +2026,96 @@ function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵtext(319, "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_1_Template_mj_form_field_valueChange_321_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onContextCompressionToggle($event)); });
+    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.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(322, MJAIAgentFormComponentExtended_Conditional_1_Conditional_322_Template, 34, 5);
-    i0.ɵɵelementEnd()()()()()();
+    i0.ɵɵconditionalCreate(322, MJAIAgentFormComponentExtended_Conditional_0_Conditional_322_Template, 34, 5);
+    i0.ɵɵelementEnd()()()()()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("Form", ctx_r2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.HeaderCollapsed ? 3 : -1);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Record", ctx_r1.record)("FormComponent", ctx_r1)("ToolbarConfig", ctx_r1.toolbarConfig)("WidthMode", "full-width");
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.HeaderCollapsed ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.HeaderCollapsed ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.HeaderCollapsed ? 4 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.record.ID && ctx_r2.agentType && ctx_r2.agentType.UIFormSectionKey ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID && ctx_r1.agentType && ctx_r1.agentType.UIFormSectionKey ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.ID ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.ID ? 8 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.ID ? 9 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.ID ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.ID ? 11 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.ID ? 12 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("payload", false));
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("payload", false));
     i0.ɵɵadvance(17);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(26);
-    i0.ɵɵproperty("value", ctx_r2.record.PayloadDownstreamPaths || "[\"*\"]")("readonly", !ctx_r2.EditMode)("lineWrapping", true);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadDownstreamPaths || "[\"*\"]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
     i0.ɵɵadvance(20);
-    i0.ɵɵproperty("value", ctx_r2.record.PayloadUpstreamPaths || "[\"*\"]")("readonly", !ctx_r2.EditMode)("lineWrapping", true);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadUpstreamPaths || "[\"*\"]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
     i0.ɵɵadvance(18);
-    i0.ɵɵproperty("value", ctx_r2.record.PayloadSelfReadPaths || "[]")("readonly", !ctx_r2.EditMode)("lineWrapping", true);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadSelfReadPaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
     i0.ɵɵadvance(15);
-    i0.ɵɵproperty("value", ctx_r2.record.PayloadSelfWritePaths || "[]")("readonly", !ctx_r2.EditMode)("lineWrapping", true);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadSelfWritePaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
     i0.ɵɵadvance(15);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("value", ctx_r2.record.FinalPayloadValidation || "{}")("readonly", !ctx_r2.EditMode)("lineWrapping", true);
+    i0.ɵɵproperty("value", ctx_r1.record.FinalPayloadValidation || "{}")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("guardrails", false));
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("guardrails", false));
     i0.ɵɵadvance(7);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Expanded", ctx_r2.GetSectionExpanded("config", false));
+    i0.ɵɵproperty("Expanded", ctx_r1.GetSectionExpanded("config", false));
     i0.ɵɵadvance(21);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 171 : 172);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 171 : 172);
     i0.ɵɵadvance(12);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 183 : 184);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 183 : 184);
     i0.ɵɵadvance(12);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 195 : 196);
+    i0.ɵɵconditional(ctx_r1.EditMode ? 195 : 196);
     i0.ɵɵadvance(12);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(11);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(16);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(11);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(11);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(14);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(16);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(16);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance(19);
-    i0.ɵɵproperty("EditMode", ctx_r2.EditMode)("Record", ctx_r2.record);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("Record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.record.EnableContextCompression ? 322 : -1);
+    i0.ɵɵconditional(ctx_r1.record.EnableContextCompression ? 322 : -1);
 } }
-function MJAIAgentFormComponentExtended_Conditional_2_Template(rf, ctx) { if (rf & 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_2_Template_mj_agent_permissions_dialog_Closed_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onPermissionsDialogClosed()); })("PermissionsChanged", function MJAIAgentFormComponentExtended_Conditional_2_Template_mj_agent_permissions_dialog_PermissionsChanged_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.refreshRelatedData()); });
+    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()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Agent", ctx_r2.record);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Agent", ctx_r1.record);
 } }
 /**
  * Enhanced AI Agent form component that extends the auto-generated base form
@@ -2150,6 +2150,8 @@ function MJAIAgentFormComponentExtended_Conditional_2_Template(rf, ctx) { if (rf
 let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extends MJAIAgentFormComponent {
     constructor() {
         super(...arguments);
+        /** Toolbar config — hide right-hand section controls since this form has a custom layout */
+        this.toolbarConfig = CUSTOM_LAYOUT_TOOLBAR_CONFIG;
         /** Subject for managing component lifecycle and cleaning up subscriptions */
         this.destroy$ = new Subject();
         /** Track active timeouts for cleanup */
@@ -2274,6 +2276,8 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         this.isPerformingCancel = false;
     }
     static { MJAIAgentFormComponentExtended_1 = this; }
+    /** Custom-layout AI Agent form looks best full-width on first open. */
+    getDefaultFormWidthMode() { return 'full-width'; }
     /** Helper method to create tracked setTimeout calls */
     setTrackedTimeout(callback, delay) {
         const timeoutId = setTimeout(() => {
@@ -4490,17 +4494,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: 3, vars: 2, consts: [["form", "ngForm"], ["customSectionContainer", ""], [1, "record-form-container"], [1, "record-form"], [3, "Agent"], [3, "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.ɵɵelementStart(0, "div", 2);
-            i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Template, 323, 64, "form", 3);
-            i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_2_Template, 1, 1, "mj-agent-permissions-dialog", 4);
-            i0.ɵɵelementEnd();
+        } }, 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);
+            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.record ? 1 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowPermissionsDialog ? 2 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDropdownComponent, i3.MjFormToolbarComponent, i3.MjFormFieldComponent, 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}"] }); }
+            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}"] }); }
 };
 MJAIAgentFormComponentExtended = MJAIAgentFormComponentExtended_1 = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agents')
@@ -4508,7 +4509,7 @@ MJAIAgentFormComponentExtended = MJAIAgentFormComponentExtended_1 = __decorate([
 export { MJAIAgentFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJAIAgentFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n  @if (record) {\n    <form class=\"record-form\" #form=\"ngForm\">\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\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  }\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  }\n</div>", 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          <!-- 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"] }]
     }], null, { customSectionContainer: [{
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]