@memberjunction/ng-core-entity-forms 6.2.0-edge.1 → 6.2.0-edge.3

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

@@ -225,7 +225,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_5_Template(rf,
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 46)(1, "mj-tab-nav", 147);
+    i0.ɵɵelementStart(0, "div", 46)(1, "mj-tab-nav", 146);
     i0.ɵɵlistener("TabChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_0_Template_mj_tab_nav_TabChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnFormTabChange($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -234,14 +234,14 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("Tabs", ctx_r1.FormTabs)("ActiveKey", ctx_r1.ActiveFormTab || "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 149);
+    i0.ɵɵelement(0, "mj-loading", 148);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("text", i0.ɵɵinterpolate1("Loading ", ctx_r1.agentType == null ? null : ctx_r1.agentType.Name, " configuration..."));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 148);
-    i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_1_Conditional_1_Template, 1, 2, "mj-loading", 149);
+    i0.ɵɵelementStart(0, "div", 147);
+    i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_1_Conditional_1_Template, 1, 2, "mj-loading", 148);
     i0.ɵɵelementContainer(2, null, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -252,18 +252,25 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 150)(1, "mj-agent-invocations", 151);
+    i0.ɵɵelementStart(0, "div", 149)(1, "mj-agent-invocations", 150);
     i0.ɵɵlistener("RecordOpenRequested", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_2_Template_mj_agent_invocations_RecordOpenRequested_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnInvocationOpenRequested($event)); });
     i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(2, "div", 151);
+    i0.ɵɵelement(3, "mj-agent-rubrics", 152);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("agent-pane--hidden", ctx_r1.ActiveFormTab !== "invocations");
     i0.ɵɵadvance();
     i0.ɵɵproperty("Provider", ctx_r1.Provider)("AgentID", ctx_r1.record.ID)("Active", ctx_r1.ActiveFormTab === "invocations")("ExposeAsAction", ctx_r1.record.ExposeAsAction)("ParentAgentName", ctx_r1.record.Parent)("ParentAgentID", ctx_r1.record.ParentID);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("agent-pane--hidden", ctx_r1.ActiveFormTab !== "rubrics");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Provider", ctx_r1.Provider)("AgentID", ctx_r1.record.ID)("Active", ctx_r1.ActiveFormTab === "rubrics");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 155);
+    i0.ɵɵelement(1, "i", 156);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_ng_template_1_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -286,7 +293,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.executionHistoryCount < ctx_r1.totalExecutionHistoryCount ? 2 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 154);
+    i0.ɵɵelement(0, "i", 155);
     i0.ɵɵtext(1, " Execution History ");
     i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_ng_template_1_Conditional_2_Template, 2, 0, "span")(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_ng_template_1_Conditional_3_Template, 4, 2, "span");
 } if (rf & 2) {
@@ -295,7 +302,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.loadingStates.executionHistory ? 2 : ctx_r1.executionHistoryCount > 0 ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 158);
+    i0.ɵɵelementStart(0, "span", 159);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -304,7 +311,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.totalExecutionHistoryCount);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 158);
+    i0.ɵɵelementStart(0, "span", 159);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -314,17 +321,17 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 153)(1, "button", 156);
+    i0.ɵɵelementStart(0, "div", 154)(1, "button", 157);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setExecutionHistoryView("runs")); });
-    i0.ɵɵelement(2, "i", 157);
+    i0.ɵɵelement(2, "i", 158);
     i0.ɵɵtext(3, " Runs ");
-    i0.ɵɵconditionalCreate(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Conditional_4_Template, 2, 1, "span", 158);
+    i0.ɵɵconditionalCreate(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Conditional_4_Template, 2, 1, "span", 159);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 156);
+    i0.ɵɵelementStart(5, "button", 157);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.setExecutionHistoryView("sessions")); });
-    i0.ɵɵelement(6, "i", 159);
+    i0.ɵɵelement(6, "i", 160);
     i0.ɵɵtext(7, " Sessions ");
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Conditional_8_Template, 2, 1, "span", 158);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Conditional_8_Template, 2, 1, "span", 159);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -338,28 +345,28 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.totalSessionCount > 0 ? 8 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 160);
+    i0.ɵɵelement(0, "mj-loading", 161);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 161);
+    i0.ɵɵelement(0, "mj-empty-state", 162);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 171);
+    i0.ɵɵelementStart(0, "span", 172);
     i0.ɵɵtext(1, "as co-agent");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 172);
+    i0.ɵɵelementStart(0, "span", 173);
     i0.ɵɵtext(1, "as target");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175);
-    i0.ɵɵelement(1, "i", 185);
-    i0.ɵɵelementStart(2, "span", 178);
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵelement(1, "i", 186);
+    i0.ɵɵelementStart(2, "span", 179);
     i0.ɵɵtext(3, "Target:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 179);
+    i0.ɵɵelementStart(4, "span", 180);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -368,12 +375,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(item_r14.targetAgentName);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175);
-    i0.ɵɵelement(1, "i", 159);
-    i0.ɵɵelementStart(2, "span", 178);
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵelement(1, "i", 160);
+    i0.ɵɵelementStart(2, "span", 179);
     i0.ɵɵtext(3, "Co-agent:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 179);
+    i0.ɵɵelementStart(4, "span", 180);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -383,52 +390,52 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 164);
+    i0.ɵɵelementStart(0, "div", 165);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Template_div_click_0_listener() { const item_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.openSessionRecord(item_r14.row.ID)); });
-    i0.ɵɵelementStart(1, "div", 165)(2, "div", 166)(3, "div", 167)(4, "div", 168);
+    i0.ɵɵelementStart(1, "div", 166)(2, "div", 167)(3, "div", 168)(4, "div", 169);
     i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 169)(7, "div", 170);
+    i0.ɵɵelementStart(6, "div", 170)(7, "div", 171);
     i0.ɵɵtext(8);
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_9_Template, 2, 0, "span", 171);
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_10_Template, 2, 0, "span", 172);
+    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_9_Template, 2, 0, "span", 172);
+    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_10_Template, 2, 0, "span", 173);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 173);
+    i0.ɵɵelementStart(11, "div", 174);
     i0.ɵɵtext(12);
     i0.ɵɵpipe(13, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 174)(15, "div", 175)(16, "span", 176);
+    i0.ɵɵelementStart(14, "div", 175)(15, "div", 176)(16, "span", 177);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 175);
-    i0.ɵɵelement(19, "i", 177);
-    i0.ɵɵelementStart(20, "span", 178);
+    i0.ɵɵelementStart(18, "div", 176);
+    i0.ɵɵelement(19, "i", 178);
+    i0.ɵɵelementStart(20, "span", 179);
     i0.ɵɵtext(21, "Duration:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "span", 179);
+    i0.ɵɵelementStart(22, "span", 180);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "div", 175);
-    i0.ɵɵelement(25, "i", 180);
-    i0.ɵɵelementStart(26, "span", 178);
+    i0.ɵɵelementStart(24, "div", 176);
+    i0.ɵɵelement(25, "i", 181);
+    i0.ɵɵelementStart(26, "span", 179);
     i0.ɵɵtext(27, "Channels:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "span", 179);
+    i0.ɵɵelementStart(28, "span", 180);
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(30, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_30_Template, 6, 1, "div", 175);
-    i0.ɵɵconditionalCreate(31, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_31_Template, 6, 1, "div", 175);
-    i0.ɵɵelementStart(32, "div", 175);
-    i0.ɵɵelement(33, "i", 181);
-    i0.ɵɵelementStart(34, "span", 178);
+    i0.ɵɵconditionalCreate(30, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_30_Template, 6, 1, "div", 176);
+    i0.ɵɵconditionalCreate(31, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Conditional_31_Template, 6, 1, "div", 176);
+    i0.ɵɵelementStart(32, "div", 176);
+    i0.ɵɵelement(33, "i", 182);
+    i0.ɵɵelementStart(34, "span", 179);
     i0.ɵɵtext(35, "User:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "span", 179);
+    i0.ɵɵelementStart(36, "span", 180);
     i0.ɵɵtext(37);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(38, "div", 182)(39, "button", 183);
+    i0.ɵɵelementStart(38, "div", 183)(39, "button", 184);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Template_button_click_39_listener($event) { const item_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); ctx_r1.openSessionRecord(item_r14.row.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(40, "i", 184);
+    i0.ɵɵelement(40, "i", 185);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const item_r14 = ctx.$implicit;
@@ -461,8 +468,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(item_r14.row.User);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 162);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Template, 41, 18, "div", 163, _forTrack0);
+    i0.ɵɵelementStart(0, "div", 163);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_For_2_Template, 41, 18, "div", 164, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -470,30 +477,30 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵrepeater(ctx_r1.agentSessions);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_0_Template, 1, 0, "mj-loading", 160)(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_1_Template, 1, 0, "mj-empty-state", 161)(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_Template, 3, 0, "div", 162);
+    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_0_Template, 1, 0, "mj-loading", 161)(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_1_Template, 1, 0, "mj-empty-state", 162)(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Conditional_2_Template, 3, 0, "div", 163);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(ctx_r1.loadingSessions ? 0 : ctx_r1.agentSessions.length === 0 ? 1 : 2);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 186);
+    i0.ɵɵelement(0, "mj-loading", 187);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 187);
+    i0.ɵɵelement(0, "mj-empty-state", 188);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 192);
+    i0.ɵɵelement(0, "mj-empty-state", 193);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵproperty("Message", ctx_r1.ExecutionSearchEmptyMessage);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175);
-    i0.ɵɵelement(1, "i", 200);
-    i0.ɵɵelementStart(2, "span", 178);
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵelement(1, "i", 201);
+    i0.ɵɵelementStart(2, "span", 179);
     i0.ɵɵtext(3, "Config:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 179);
+    i0.ɵɵelementStart(4, "span", 180);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -502,12 +509,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(execution_r17.Configuration);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175);
-    i0.ɵɵelement(1, "i", 177);
-    i0.ɵɵelementStart(2, "span", 178);
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵelement(1, "i", 178);
+    i0.ɵɵelementStart(2, "span", 179);
     i0.ɵɵtext(3, "Duration:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 179);
+    i0.ɵɵelementStart(4, "span", 180);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -517,19 +524,19 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatExecutionTimeFromDates(execution_r17.StartedAt, execution_r17.CompletedAt));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175);
-    i0.ɵɵelement(1, "i", 201);
-    i0.ɵɵelementStart(2, "span", 178);
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵelement(1, "i", 202);
+    i0.ɵɵelementStart(2, "span", 179);
     i0.ɵɵtext(3, "Running:");
     i0.ɵɵelementEnd()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175);
-    i0.ɵɵelement(1, "i", 202);
-    i0.ɵɵelementStart(2, "span", 178);
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵelement(1, "i", 203);
+    i0.ɵɵelementStart(2, "span", 179);
     i0.ɵɵtext(3, "Tokens:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 179);
+    i0.ɵɵelementStart(4, "span", 180);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -539,12 +546,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r17.TotalTokensUsedRollup || execution_r17.TotalTokensUsed));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175);
-    i0.ɵɵelement(1, "i", 203);
-    i0.ɵɵelementStart(2, "span", 178);
+    i0.ɵɵelementStart(0, "div", 176);
+    i0.ɵɵelement(1, "i", 204);
+    i0.ɵɵelementStart(2, "span", 179);
     i0.ɵɵtext(3, "Cost:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 179);
+    i0.ɵɵelementStart(4, "span", 180);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -554,12 +561,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r17.TotalCostRollup || execution_r17.TotalCost));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵelement(1, "i", 212);
-    i0.ɵɵelementStart(2, "div", 207)(3, "span", 208);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵelement(1, "i", 213);
+    i0.ɵɵelementStart(2, "div", 208)(3, "span", 209);
     i0.ɵɵtext(4, "Completed");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 209);
+    i0.ɵɵelementStart(5, "span", 210);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "date");
     i0.ɵɵelementEnd()()();
@@ -569,12 +576,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(7, 1, execution_r17.CompletedAt, "medium"));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵelement(1, "i", 202);
-    i0.ɵɵelementStart(2, "div", 207)(3, "span", 208);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵelement(1, "i", 203);
+    i0.ɵɵelementStart(2, "div", 208)(3, "span", 209);
     i0.ɵɵtext(4, "Direct Tokens");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 209);
+    i0.ɵɵelementStart(5, "span", 210);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -584,12 +591,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r17.TotalTokensUsed));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
+    i0.ɵɵelementStart(0, "div", 207);
     i0.ɵɵelement(1, "i", 30);
-    i0.ɵɵelementStart(2, "div", 207)(3, "span", 208);
+    i0.ɵɵelementStart(2, "div", 208)(3, "span", 209);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 209);
+    i0.ɵɵelementStart(5, "span", 210);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -599,12 +606,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.formatTokenCount(execution_r17.TotalTokensUsedRollup));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵelement(1, "i", 203);
-    i0.ɵɵelementStart(2, "div", 207)(3, "span", 208);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵelement(1, "i", 204);
+    i0.ɵɵelementStart(2, "div", 208)(3, "span", 209);
     i0.ɵɵtext(4, "Direct Cost");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 209);
+    i0.ɵɵelementStart(5, "span", 210);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -614,12 +621,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r17.TotalCost));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵelement(1, "i", 213);
-    i0.ɵɵelementStart(2, "div", 207)(3, "span", 208);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵelement(1, "i", 214);
+    i0.ɵɵelementStart(2, "div", 208)(3, "span", 209);
     i0.ɵɵtext(4, "Total + Sub-agents");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 209);
+    i0.ɵɵelementStart(5, "span", 210);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -629,12 +636,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("$", ctx_r1.formatCost(execution_r17.TotalCostRollup));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 206);
-    i0.ɵɵelement(1, "i", 214);
-    i0.ɵɵelementStart(2, "div", 207)(3, "span", 208);
+    i0.ɵɵelementStart(0, "div", 207);
+    i0.ɵɵelement(1, "i", 215);
+    i0.ɵɵelementStart(2, "div", 208)(3, "span", 209);
     i0.ɵɵtext(4, "Conversation");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 209);
+    i0.ɵɵelementStart(5, "span", 210);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -643,11 +650,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("", execution_r17.ConversationID.substring(0, 8), "...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 210)(1, "h5");
-    i0.ɵɵelement(2, "i", 215);
+    i0.ɵɵelementStart(0, "div", 211)(1, "h5");
+    i0.ɵɵelement(2, "i", 216);
     i0.ɵɵtext(3, " Result");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "mj-code-editor", 216);
+    i0.ɵɵelement(4, "mj-code-editor", 217);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r17 = i0.ɵɵnextContext(2).$implicit;
@@ -656,11 +663,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r17, false))("readonly", true)("lineWrapping", true);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 211)(1, "h5");
-    i0.ɵɵelement(2, "i", 217);
+    i0.ɵɵelementStart(0, "div", 212)(1, "h5");
+    i0.ɵɵelement(2, "i", 218);
     i0.ɵɵtext(3, " Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 218);
+    i0.ɵɵelementStart(4, "div", 219);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -669,24 +676,24 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(execution_r17.ErrorMessage);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 199)(1, "div", 204)(2, "div", 205)(3, "div", 206);
-    i0.ɵɵelement(4, "i", 201);
-    i0.ɵɵelementStart(5, "div", 207)(6, "span", 208);
+    i0.ɵɵelementStart(0, "div", 200)(1, "div", 205)(2, "div", 206)(3, "div", 207);
+    i0.ɵɵelement(4, "i", 202);
+    i0.ɵɵelementStart(5, "div", 208)(6, "span", 209);
     i0.ɵɵtext(7, "Started");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 209);
+    i0.ɵɵelementStart(8, "span", 210);
     i0.ɵɵtext(9);
     i0.ɵɵpipe(10, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_11_Template, 8, 4, "div", 206);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_12_Template, 7, 1, "div", 206);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_13_Template, 7, 1, "div", 206);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_14_Template, 7, 1, "div", 206);
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_15_Template, 7, 1, "div", 206);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_16_Template, 7, 1, "div", 206);
+    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_11_Template, 8, 4, "div", 207);
+    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_12_Template, 7, 1, "div", 207);
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_13_Template, 7, 1, "div", 207);
+    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_14_Template, 7, 1, "div", 207);
+    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_15_Template, 7, 1, "div", 207);
+    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_16_Template, 7, 1, "div", 207);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_17_Template, 5, 3, "div", 210);
-    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_18_Template, 6, 1, "div", 211);
+    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_17_Template, 5, 3, "div", 211);
+    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Conditional_18_Template, 6, 1, "div", 212);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r17 = i0.ɵɵnextContext().$implicit;
@@ -711,30 +718,30 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 195)(1, "div", 196);
+    i0.ɵɵelementStart(0, "div", 196)(1, "div", 197);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Template_div_click_1_listener() { const execution_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r17.ID)); });
-    i0.ɵɵelementStart(2, "div", 166)(3, "div", 167)(4, "div", 168);
+    i0.ɵɵelementStart(2, "div", 167)(3, "div", 168)(4, "div", 169);
     i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 169)(7, "div", 170);
-    i0.ɵɵelement(8, "i", 197);
+    i0.ɵɵelementStart(6, "div", 170)(7, "div", 171);
+    i0.ɵɵelement(8, "i", 198);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 173);
+    i0.ɵɵelementStart(10, "div", 174);
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 174);
-    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_14_Template, 6, 1, "div", 175);
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_15_Template, 6, 1, "div", 175)(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_16_Template, 4, 0, "div", 175);
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_17_Template, 6, 1, "div", 175);
-    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_18_Template, 6, 1, "div", 175);
+    i0.ɵɵelementStart(13, "div", 175);
+    i0.ɵɵconditionalCreate(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_14_Template, 6, 1, "div", 176);
+    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_15_Template, 6, 1, "div", 176)(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_16_Template, 4, 0, "div", 176);
+    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_17_Template, 6, 1, "div", 176);
+    i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_18_Template, 6, 1, "div", 176);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 182)(20, "button", 198);
+    i0.ɵɵelementStart(19, "div", 183)(20, "button", 199);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Template_button_click_20_listener($event) { const execution_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); ctx_r1.openExecutionRecord(execution_r17.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(21, "i", 184);
+    i0.ɵɵelement(21, "i", 185);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(22, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Template, 19, 12, "div", 199);
+    i0.ɵɵconditionalCreate(22, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Conditional_22_Template, 19, 12, "div", 200);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r17 = ctx.$implicit;
@@ -762,12 +769,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r17.ID] ? 22 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 155);
+    i0.ɵɵelement(0, "i", 156);
     i0.ɵɵtext(1, " Loading... ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
-    i0.ɵɵelementStart(1, "span", 225);
+    i0.ɵɵelementStart(1, "span", 226);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -778,22 +785,22 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 194)(1, "button", 219);
+    i0.ɵɵelementStart(0, "div", 195)(1, "button", 220);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.goToPreviousPage()); });
-    i0.ɵɵelement(2, "i", 220);
+    i0.ɵɵelement(2, "i", 221);
     i0.ɵɵtext(3, " Previous ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 221);
+    i0.ɵɵelementStart(4, "div", 222);
     i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Conditional_5_Template, 2, 0)(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Conditional_6_Template, 3, 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 219);
+    i0.ɵɵelementStart(7, "button", 220);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.goToNextPage()); });
     i0.ɵɵtext(8, " Next ");
-    i0.ɵɵelement(9, "i", 222);
+    i0.ɵɵelement(9, "i", 223);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 223);
+    i0.ɵɵelementStart(10, "button", 224);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
-    i0.ɵɵelement(11, "i", 224);
+    i0.ɵɵelement(11, "i", 225);
     i0.ɵɵtext(12, " View All in Grid ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -807,16 +814,16 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 188)(1, "div", 189);
-    i0.ɵɵelement(2, "i", 190);
-    i0.ɵɵelementStart(3, "input", 191);
+    i0.ɵɵelementStart(0, "div", 189)(1, "div", 190);
+    i0.ɵɵelement(2, "i", 191);
+    i0.ɵɵelementStart(3, "input", 192);
     i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(5); i0.ɵɵtwoWayBindingSet(ctx_r1.executionSearchText, $event) || (ctx_r1.executionSearchText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onExecutionSearchChange()); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(4, "div", 162);
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_5_Template, 1, 1, "mj-empty-state", 192);
-    i0.ɵɵrepeaterCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Template, 23, 18, "div", 193, _forTrack1);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Template, 13, 3, "div", 194);
+    i0.ɵɵelementStart(4, "div", 163);
+    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_5_Template, 1, 1, "mj-empty-state", 193);
+    i0.ɵɵrepeaterCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_For_7_Template, 23, 18, "div", 194, _forTrack1);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Conditional_8_Template, 13, 3, "div", 195);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -831,16 +838,16 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.totalPages > 1 ? 8 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_0_Template, 1, 0, "mj-loading", 186)(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_1_Template, 1, 0, "mj-empty-state", 187)(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Template, 9, 5);
+    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_0_Template, 1, 0, "mj-loading", 187)(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_1_Template, 1, 0, "mj-empty-state", 188)(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Conditional_2_Template, 9, 5);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(ctx_r1.loadingStates.executionHistory ? 0 : ctx_r1.executionHistoryCount === 0 ? 1 : 2);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 50);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_ng_template_1_Template, 4, 1, "ng-template", 58);
-    i0.ɵɵelementStart(2, "div", 152);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Template, 9, 6, "div", 153);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 49);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_ng_template_1_Template, 4, 1, "ng-template", 57);
+    i0.ɵɵelementStart(2, "div", 153);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_3_Template, 9, 6, "div", 154);
     i0.ɵɵconditionalCreate(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_4_Template, 3, 1)(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Conditional_5_Template, 3, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -853,7 +860,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 155);
+    i0.ɵɵelement(1, "i", 156);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -866,7 +873,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1(" (", ctx_r1.actionCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 127);
+    i0.ɵɵelement(0, "i", 126);
     i0.ɵɵtext(1, " Actions ");
     i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_ng_template_1_Conditional_2_Template, 2, 0, "span")(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
@@ -875,23 +882,23 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.loadingStates.actions ? 2 : ctx_r1.actionCount > 0 ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 226);
-    i0.ɵɵelement(1, "i", 155);
+    i0.ɵɵelementStart(0, "div", 227);
+    i0.ɵɵelement(1, "i", 156);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Loading actions...");
     i0.ɵɵelementEnd()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 231);
+    i0.ɵɵelementStart(0, "button", 232);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 232);
+    i0.ɵɵelement(1, "i", 233);
     i0.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 233);
+    i0.ɵɵelementStart(0, "mj-empty-state", 234);
     i0.ɵɵlistener("Action", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_3_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -899,7 +906,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("ActionText", ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? "Configure First Action" : "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 240);
+    i0.ɵɵelementStart(0, "div", 241);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -908,7 +915,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(action_r22.Description);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 242);
+    i0.ɵɵelementStart(0, "span", 243);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -918,31 +925,31 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 246);
+    i0.ɵɵelementStart(0, "button", 247);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const action_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.removeAction(action_r22, $event)); });
-    i0.ɵɵelement(1, "i", 247);
+    i0.ɵɵelement(1, "i", 248);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 236);
+    i0.ɵɵelementStart(0, "div", 237);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Template_div_click_0_listener() { const action_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: Actions", action_r22.ID)); });
-    i0.ɵɵelementStart(1, "div", 237);
+    i0.ɵɵelementStart(1, "div", 238);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 238)(4, "div", 239);
+    i0.ɵɵelementStart(3, "div", 239)(4, "div", 240);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 240);
-    i0.ɵɵelementStart(7, "div", 241);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 242);
-    i0.ɵɵelementStart(9, "span", 243);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_6_Template, 2, 1, "div", 241);
+    i0.ɵɵelementStart(7, "div", 242);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_8_Template, 2, 1, "span", 243);
+    i0.ɵɵelementStart(9, "span", 244);
     i0.ɵɵelement(10, "i", 35);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 244);
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 245);
-    i0.ɵɵelement(14, "i", 224);
+    i0.ɵɵelementStart(12, "div", 245);
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Conditional_13_Template, 2, 0, "button", 246);
+    i0.ɵɵelement(14, "i", 225);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const action_r22 = ctx.$implicit;
@@ -966,7 +973,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 248);
+    i0.ɵɵelementStart(0, "div", 249);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Actions", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -977,9 +984,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 230);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Template, 15, 15, "div", 234, _forTrack1);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_Conditional_3_Template, 3, 1, "div", 235);
+    i0.ɵɵelementStart(0, "div", 231);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_For_2_Template, 15, 15, "div", 235, _forTrack1);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_Conditional_3_Template, 3, 1, "div", 236);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -989,10 +996,10 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60)(1, "div", 227);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_2_Template, 3, 0, "button", 228);
+    i0.ɵɵelementStart(0, "div", 59)(1, "div", 228);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_2_Template, 3, 0, "button", 229);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_3_Template, 1, 1, "mj-empty-state", 229)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_Template, 4, 1, "div", 230);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_3_Template, 1, 1, "mj-empty-state", 230)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Conditional_4_Template, 4, 1, "div", 231);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(2);
@@ -1001,10 +1008,10 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 3 : 4);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 51);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_ng_template_1_Template, 4, 1, "ng-template", 58);
-    i0.ɵɵelementStart(2, "div", 59);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_3_Template, 4, 0, "div", 226)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Template, 5, 2);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 50);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_ng_template_1_Template, 4, 1, "ng-template", 57);
+    i0.ɵɵelementStart(2, "div", 58);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_3_Template, 4, 0, "div", 227)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Conditional_4_Template, 5, 2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1014,7 +1021,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 155);
+    i0.ɵɵelement(1, "i", 156);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -1037,28 +1044,28 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 256);
+    i0.ɵɵelementStart(0, "button", 257);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createChildSubAgent()); });
-    i0.ɵɵelement(1, "i", 253);
+    i0.ɵɵelement(1, "i", 254);
     i0.ɵɵtext(2, " Create Child ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 257);
+    i0.ɵɵelementStart(3, "button", 258);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.linkRelatedSubAgent()); });
-    i0.ɵɵelement(4, "i", 254);
+    i0.ɵɵelement(4, "i", 255);
     i0.ɵɵtext(5, " Link Related ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-empty-state", 255)(1, "div", 258)(2, "div", 259);
-    i0.ɵɵelement(3, "i", 260);
+    i0.ɵɵelementStart(0, "mj-empty-state", 256)(1, "div", 259)(2, "div", 260);
+    i0.ɵɵelement(3, "i", 261);
     i0.ɵɵelementStart(4, "strong");
     i0.ɵɵtext(5, "Child Sub-Agents");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "p");
     i0.ɵɵtext(7, "Share payload structure, dedicated to parent");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 259);
-    i0.ɵɵelement(9, "i", 261);
+    i0.ɵɵelementStart(8, "div", 260);
+    i0.ɵɵelement(9, "i", 262);
     i0.ɵɵelementStart(10, "strong");
     i0.ɵɵtext(11, "Related Sub-Agents");
     i0.ɵɵelementEnd();
@@ -1067,7 +1074,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵelementEnd()()()();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 265);
+    i0.ɵɵelement(0, "img", 266);
 } if (rf & 2) {
     const item_r28 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("src", item_r28.agent.LogoURL, i0.ɵɵsanitizeUrl)("alt", item_r28.agent.Name + " logo");
@@ -1080,7 +1087,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(item_r28.agent));
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 240);
+    i0.ɵɵelementStart(0, "div", 241);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1089,7 +1096,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(item_r28.agent.Description);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 243);
+    i0.ɵɵelementStart(0, "span", 244);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1100,7 +1107,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1(" ", item_r28.agent.Status, " ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 242);
+    i0.ɵɵelementStart(0, "span", 243);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1110,21 +1117,21 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 272);
+    i0.ɵɵelementStart(0, "button", 273);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_0_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r29); const item_r28 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureOutputMapping(item_r28, $event)); });
-    i0.ɵɵelement(1, "i", 273);
+    i0.ɵɵelement(1, "i", 274);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 274);
+    i0.ɵɵelementStart(0, "button", 275);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_1_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r30); const item_r28 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(item_r28.agent, $event)); });
-    i0.ɵɵelement(1, "i", 200);
+    i0.ɵɵelement(1, "i", 201);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 275);
+    i0.ɵɵelementStart(0, "button", 276);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r31); const item_r28 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(item_r28.type === "child" ? ctx_r1.removeChildSubAgent(item_r28, $event) : ctx_r1.unlinkRelatedSubAgent(item_r28, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
@@ -1135,9 +1142,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵclassMap(item_r28.type === "child" ? "fa-solid fa-trash" : "fa-solid fa-unlink");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_0_Template, 2, 0, "button", 269);
-    i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_1_Template, 2, 0, "button", 270);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_2_Template, 2, 3, "button", 271);
+    i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_0_Template, 2, 0, "button", 270);
+    i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_1_Template, 2, 0, "button", 271);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Conditional_2_Template, 2, 3, "button", 272);
 } if (rf & 2) {
     const item_r28 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -1149,29 +1156,29 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 263);
+    i0.ɵɵelementStart(0, "div", 264);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Template_div_click_0_listener() { const item_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agents", item_r28.agent.ID)); });
-    i0.ɵɵelementStart(1, "div", 264);
+    i0.ɵɵelementStart(1, "div", 265);
     i0.ɵɵelement(2, "i");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 237);
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_5_Template, 1, 2, "img", 265)(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_6_Template, 1, 2, "i", 15);
+    i0.ɵɵelementStart(4, "div", 238);
+    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_5_Template, 1, 2, "img", 266)(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_6_Template, 1, 2, "i", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 238)(8, "div", 239);
+    i0.ɵɵelementStart(7, "div", 239)(8, "div", 240);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_10_Template, 2, 1, "div", 240);
-    i0.ɵɵelementStart(11, "div", 241)(12, "span", 266);
-    i0.ɵɵelement(13, "i", 267);
+    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_10_Template, 2, 1, "div", 241);
+    i0.ɵɵelementStart(11, "div", 242)(12, "span", 267);
+    i0.ɵɵelement(13, "i", 268);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_15_Template, 2, 3, "span", 268);
-    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_16_Template, 2, 1, "span", 242);
+    i0.ɵɵconditionalCreate(15, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_15_Template, 2, 3, "span", 269);
+    i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_16_Template, 2, 1, "span", 243);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 244);
+    i0.ɵɵelementStart(17, "div", 245);
     i0.ɵɵconditionalCreate(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Conditional_18_Template, 3, 3);
-    i0.ɵɵelement(19, "i", 224);
+    i0.ɵɵelement(19, "i", 225);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r28 = ctx.$implicit;
@@ -1199,8 +1206,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.EditMode ? 18 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 230);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Template, 20, 16, "div", 262, _forTrack2);
+    i0.ɵɵelementStart(0, "div", 231);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_For_2_Template, 20, 16, "div", 263, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1209,27 +1216,27 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 52);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_ng_template_1_Template, 4, 1, "ng-template", 58);
-    i0.ɵɵelementStart(2, "div", 59)(3, "div", 249)(4, "div", 250)(5, "div", 251)(6, "button", 252);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 51);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_ng_template_1_Template, 4, 1, "ng-template", 57);
+    i0.ɵɵelementStart(2, "div", 58)(3, "div", 250)(4, "div", 251)(5, "div", 252)(6, "button", 253);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("all")); });
-    i0.ɵɵelement(7, "i", 132);
+    i0.ɵɵelement(7, "i", 131);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 252);
+    i0.ɵɵelementStart(9, "button", 253);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("child")); });
-    i0.ɵɵelement(10, "i", 253);
+    i0.ɵɵelement(10, "i", 254);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 252);
+    i0.ɵɵelementStart(12, "button", 253);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setSubAgentFilter("related")); });
-    i0.ɵɵelement(13, "i", 254);
+    i0.ɵɵelement(13, "i", 255);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 227);
+    i0.ɵɵelementStart(15, "div", 228);
     i0.ɵɵconditionalCreate(16, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_16_Template, 6, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_17_Template, 14, 0, "mj-empty-state", 255)(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_Template, 3, 0, "div", 230);
+    i0.ɵɵconditionalCreate(17, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_17_Template, 14, 0, "mj-empty-state", 256)(18, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Conditional_18_Template, 3, 0, "div", 231);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1253,7 +1260,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 155);
+    i0.ɵɵelement(1, "i", 156);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -1266,7 +1273,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1(" (", ctx_r1.promptCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 214);
+    i0.ɵɵelement(0, "i", 215);
     i0.ɵɵtext(1, " Prompts ");
     i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_ng_template_1_Conditional_2_Template, 2, 0, "span")(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
@@ -1276,7 +1283,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 283);
+    i0.ɵɵelementStart(0, "mj-dropdown", 284);
     i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_9_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1285,7 +1292,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("Data", ctx_r1.modelSelectionModes)("ValuePrimitive", true);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 281);
+    i0.ɵɵelementStart(0, "span", 282);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1295,15 +1302,15 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 231);
+    i0.ɵɵelementStart(0, "button", 232);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 232);
+    i0.ɵɵelement(1, "i", 233);
     i0.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 284);
+    i0.ɵɵelementStart(0, "mj-empty-state", 285);
     i0.ɵɵlistener("Action", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_13_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1311,7 +1318,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("ActionText", ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? "Create First Prompt" : "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 240);
+    i0.ɵɵelementStart(0, "div", 241);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1320,7 +1327,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate2("", prompt_r36.TemplateText.substring(0, 120), "", prompt_r36.TemplateText.length > 120 ? "..." : "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 242);
+    i0.ɵɵelementStart(0, "span", 243);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1330,36 +1337,36 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 274);
+    i0.ɵɵelementStart(0, "button", 275);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r37); const prompt_r36 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r36, $event)); });
-    i0.ɵɵelement(1, "i", 200);
+    i0.ɵɵelement(1, "i", 201);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 289);
+    i0.ɵɵelementStart(0, "button", 290);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r38); const prompt_r36 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r36, $event)); });
-    i0.ɵɵelement(1, "i", 247);
+    i0.ɵɵelement(1, "i", 248);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 286);
+    i0.ɵɵelementStart(0, "div", 287);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Template_div_click_0_listener() { const prompt_r36 = i0.ɵɵrestoreView(_r35).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Prompts", prompt_r36.ID)); });
-    i0.ɵɵelementStart(1, "div", 237);
-    i0.ɵɵelement(2, "i", 287);
+    i0.ɵɵelementStart(1, "div", 238);
+    i0.ɵɵelement(2, "i", 288);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 238)(4, "div", 239);
+    i0.ɵɵelementStart(3, "div", 239)(4, "div", 240);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_6_Template, 2, 2, "div", 240);
-    i0.ɵɵelementStart(7, "div", 241);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_8_Template, 2, 1, "span", 242);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_6_Template, 2, 2, "div", 241);
+    i0.ɵɵelementStart(7, "div", 242);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_8_Template, 2, 1, "span", 243);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 244);
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_10_Template, 2, 0, "button", 270);
-    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_11_Template, 2, 0, "button", 288);
-    i0.ɵɵelement(12, "i", 224);
+    i0.ɵɵelementStart(9, "div", 245);
+    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_10_Template, 2, 0, "button", 271);
+    i0.ɵɵconditionalCreate(11, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Conditional_11_Template, 2, 0, "button", 289);
+    i0.ɵɵelement(12, "i", 225);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const prompt_r36 = ctx.$implicit;
@@ -1377,7 +1384,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 248);
+    i0.ɵɵelementStart(0, "div", 249);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Prompts", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -1388,9 +1395,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.promptCount, " prompts...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 230);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Template, 13, 5, "div", 285, _forTrack1);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_Conditional_3_Template, 3, 1, "div", 235);
+    i0.ɵɵelementStart(0, "div", 231);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_For_2_Template, 13, 5, "div", 286, _forTrack1);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_Conditional_3_Template, 3, 1, "div", 236);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1400,18 +1407,18 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.promptCount > ctx_r1.agentPrompts.length ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 53);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_ng_template_1_Template, 4, 1, "ng-template", 58);
-    i0.ɵɵelementStart(2, "div", 59)(3, "div", 60)(4, "div", 276)(5, "div", 277)(6, "label", 278);
-    i0.ɵɵelement(7, "i", 279);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 52);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_ng_template_1_Template, 4, 1, "ng-template", 57);
+    i0.ɵɵelementStart(2, "div", 58)(3, "div", 59)(4, "div", 277)(5, "div", 278)(6, "label", 279);
+    i0.ɵɵelement(7, "i", 280);
     i0.ɵɵtext(8, " Model Selection: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_9_Template, 1, 3, "mj-dropdown", 280)(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_10_Template, 2, 1, "span", 281);
+    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_9_Template, 1, 3, "mj-dropdown", 281)(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_10_Template, 2, 1, "span", 282);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 227);
-    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_12_Template, 3, 0, "button", 228);
+    i0.ɵɵelementStart(11, "div", 228);
+    i0.ɵɵconditionalCreate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_12_Template, 3, 0, "button", 229);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_13_Template, 1, 1, "mj-empty-state", 282)(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_Template, 4, 1, "div", 230);
+    i0.ɵɵconditionalCreate(13, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_13_Template, 1, 1, "mj-empty-state", 283)(14, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Conditional_14_Template, 4, 1, "div", 231);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1425,7 +1432,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 155);
+    i0.ɵɵelement(1, "i", 156);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -1438,7 +1445,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1(" (", ctx_r1.learningCycleCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 291);
+    i0.ɵɵelement(0, "i", 292);
     i0.ɵɵtext(1, " Learning Cycles ");
     i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_ng_template_1_Conditional_2_Template, 2, 0, "span")(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
@@ -1447,11 +1454,11 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.loadingStates.learningCycles ? 2 : ctx_r1.learningCycleCount > 0 ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 290);
+    i0.ɵɵelement(0, "mj-empty-state", 291);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 242);
-    i0.ɵɵelement(1, "i", 294);
+    i0.ɵɵelementStart(0, "span", 243);
+    i0.ɵɵelement(1, "i", 295);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -1461,7 +1468,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r41.StartedAt, "short"), " ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 243);
+    i0.ɵɵelementStart(0, "span", 244);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1471,20 +1478,20 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 293);
+    i0.ɵɵelementStart(0, "div", 294);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Template_div_click_0_listener() { const cycle_r41 = i0.ɵɵrestoreView(_r40).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Learning Cycles", cycle_r41.ID)); });
-    i0.ɵɵelementStart(1, "div", 237);
-    i0.ɵɵelement(2, "i", 291);
+    i0.ɵɵelementStart(1, "div", 238);
+    i0.ɵɵelement(2, "i", 292);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 238)(4, "div", 239);
+    i0.ɵɵelementStart(3, "div", 239)(4, "div", 240);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 241);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Conditional_7_Template, 4, 4, "span", 242);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Conditional_8_Template, 2, 1, "span", 243);
+    i0.ɵɵelementStart(6, "div", 242);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Conditional_7_Template, 4, 4, "span", 243);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Conditional_8_Template, 2, 1, "span", 244);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 244);
-    i0.ɵɵelement(10, "i", 224);
+    i0.ɵɵelementStart(9, "div", 245);
+    i0.ɵɵelement(10, "i", 225);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const cycle_r41 = ctx.$implicit;
@@ -1497,7 +1504,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 248);
+    i0.ɵɵelementStart(0, "div", 249);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Learning Cycles", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -1508,9 +1515,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 230);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Template, 11, 3, "div", 292, _forTrack1);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_Conditional_3_Template, 3, 1, "div", 235);
+    i0.ɵɵelementStart(0, "div", 231);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_For_2_Template, 11, 3, "div", 293, _forTrack1);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_Conditional_3_Template, 3, 1, "div", 236);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1520,12 +1527,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.learningCycleCount > ctx_r1.learningCycles.length ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 54);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_ng_template_1_Template, 4, 1, "ng-template", 58);
-    i0.ɵɵelementStart(2, "div", 59)(3, "div", 60)(4, "div", 61);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 53);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_ng_template_1_Template, 4, 1, "ng-template", 57);
+    i0.ɵɵelementStart(2, "div", 58)(3, "div", 59)(4, "div", 60);
     i0.ɵɵtext(5, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_6_Template, 1, 0, "mj-empty-state", 290)(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_Template, 4, 1, "div", 230);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_6_Template, 1, 0, "mj-empty-state", 291)(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Conditional_7_Template, 4, 1, "div", 231);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1535,7 +1542,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 155);
+    i0.ɵɵelement(1, "i", 156);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
@@ -1548,7 +1555,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1(" (", ctx_r1.noteCount, ")");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 296);
+    i0.ɵɵelement(0, "i", 297);
     i0.ɵɵtext(1, " Notes ");
     i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_ng_template_1_Conditional_2_Template, 2, 0, "span")(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_ng_template_1_Conditional_3_Template, 2, 1, "span");
 } if (rf & 2) {
@@ -1558,15 +1565,15 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 231);
+    i0.ɵɵelementStart(0, "button", 232);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r43); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 232);
+    i0.ɵɵelement(1, "i", 233);
     i0.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r44 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 297);
+    i0.ɵɵelementStart(0, "mj-empty-state", 298);
     i0.ɵɵlistener("Action", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_8_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r44); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1574,7 +1581,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("ActionText", ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? "Create First Note" : "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 240);
+    i0.ɵɵelementStart(0, "div", 241);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1583,8 +1590,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate2("", note_r46.Note.substring(0, 100), "", note_r46.Note.length > 100 ? "..." : "");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 242);
-    i0.ɵɵelement(1, "i", 294);
+    i0.ɵɵelementStart(0, "span", 243);
+    i0.ɵɵelement(1, "i", 295);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
@@ -1595,20 +1602,20 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 299);
+    i0.ɵɵelementStart(0, "div", 300);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Template_div_click_0_listener() { const note_r46 = i0.ɵɵrestoreView(_r45).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Notes", note_r46.ID)); });
-    i0.ɵɵelementStart(1, "div", 237);
-    i0.ɵɵelement(2, "i", 296);
+    i0.ɵɵelementStart(1, "div", 238);
+    i0.ɵɵelement(2, "i", 297);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 238)(4, "div", 239);
+    i0.ɵɵelementStart(3, "div", 239)(4, "div", 240);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Conditional_6_Template, 2, 2, "div", 240);
-    i0.ɵɵelementStart(7, "div", 241);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Conditional_8_Template, 4, 4, "span", 242);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Conditional_6_Template, 2, 2, "div", 241);
+    i0.ɵɵelementStart(7, "div", 242);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Conditional_8_Template, 4, 4, "span", 243);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 244);
-    i0.ɵɵelement(10, "i", 224);
+    i0.ɵɵelementStart(9, "div", 245);
+    i0.ɵɵelement(10, "i", 225);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const note_r46 = ctx.$implicit;
@@ -1621,7 +1628,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r47 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 248);
+    i0.ɵɵelementStart(0, "div", 249);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Notes", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
@@ -1632,9 +1639,9 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 230);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Template, 11, 3, "div", 298, _forTrack1);
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_Conditional_3_Template, 3, 1, "div", 235);
+    i0.ɵɵelementStart(0, "div", 231);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_For_2_Template, 11, 3, "div", 299, _forTrack1);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_Conditional_3_Template, 3, 1, "div", 236);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1644,15 +1651,15 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.noteCount > ctx_r1.agentNotes.length ? 3 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 55);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_ng_template_1_Template, 4, 1, "ng-template", 58);
-    i0.ɵɵelementStart(2, "div", 59)(3, "div", 60)(4, "div", 61);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 54);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_ng_template_1_Template, 4, 1, "ng-template", 57);
+    i0.ɵɵelementStart(2, "div", 58)(3, "div", 59)(4, "div", 60);
     i0.ɵɵtext(5, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 227);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_7_Template, 3, 0, "button", 228);
+    i0.ɵɵelementStart(6, "div", 228);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_7_Template, 3, 0, "button", 229);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_8_Template, 1, 1, "mj-empty-state", 295)(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_Template, 4, 1, "div", 230);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_8_Template, 1, 1, "mj-empty-state", 296)(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Conditional_9_Template, 4, 1, "div", 231);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -1663,21 +1670,21 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.noteCount === 0 ? 8 : 9);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 311);
+    i0.ɵɵelement(0, "i", 312);
     i0.ɵɵtext(1, " Search ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 318);
+    i0.ɵɵelementStart(0, "div", 319);
     i0.ɵɵtext(1, "Loading permissions\u2026");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 319);
+    i0.ɵɵelementStart(0, "div", 320);
     i0.ɵɵtext(1, " No scopes assigned yet \u2014 permissions will appear here once you add scopes above. ");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 322);
+    i0.ɵɵelementStart(0, "div", 323);
     i0.ɵɵtext(1, " No explicit permissions. Access falls back to this agent's ");
     i0.ɵɵelementStart(2, "code");
     i0.ɵɵtext(3, "SearchScopeAccess");
@@ -1686,12 +1693,12 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 324);
+    i0.ɵɵelementStart(0, "li", 325);
     i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementStart(2, "strong");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 318);
+    i0.ɵɵelementStart(4, "span", 319);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6, " \u2014 ");
@@ -1712,8 +1719,8 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(p_r50.Level);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 323);
-    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_4_For_2_Template, 9, 9, "li", 324, _forTrack4);
+    i0.ɵɵelementStart(0, "ul", 324);
+    i0.ɵɵrepeaterCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_4_For_2_Template, 9, 9, "li", 325, _forTrack4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const s_r51 = i0.ɵɵnextContext().$implicit;
@@ -1721,10 +1728,10 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵrepeater(s_r51.Permissions);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 320)(1, "div", 321);
+    i0.ɵɵelementStart(0, "div", 321)(1, "div", 322);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_3_Template, 5, 0, "div", 322)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_4_Template, 3, 0, "ul", 323);
+    i0.ɵɵconditionalCreate(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_3_Template, 5, 0, "div", 323)(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Conditional_4_Template, 3, 0, "ul", 324);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const s_r51 = ctx.$implicit;
@@ -1734,17 +1741,17 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(s_r51.Permissions.length === 0 ? 3 : 4);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Template, 5, 2, "div", 320, _forTrack3);
+    i0.ɵɵrepeaterCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_For_1_Template, 5, 2, "div", 321, _forTrack3);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵrepeater(ctx_r1.PermissionSummary);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     const _r49 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 312)(1, "h4");
+    i0.ɵɵelementStart(0, "div", 313)(1, "h4");
     i0.ɵɵtext(2, "Assigned Scopes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 61)(4, "strong");
+    i0.ɵɵelementStart(3, "p", 60)(4, "strong");
     i0.ɵɵtext(5, "Pre-Execution");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6, " scopes are injected automatically before the first LLM call. ");
@@ -1757,21 +1764,21 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵelementEnd();
     i0.ɵɵtext(12, " covers both paths. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "mj-search-scope-child-grid", 313);
+    i0.ɵɵelementStart(13, "mj-search-scope-child-grid", 314);
     i0.ɵɵlistener("RowsChanged", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Template_mj_search_scope_child_grid_RowsChanged_13_listener() { i0.ɵɵrestoreView(_r49); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.LoadPermissionSummary()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 314)(15, "h4", 315);
-    i0.ɵɵelement(16, "i", 316);
+    i0.ɵɵelementStart(14, "div", 315)(15, "h4", 316);
+    i0.ɵɵelement(16, "i", 317);
     i0.ɵɵtext(17, " Effective scope permissions ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "p", 317);
+    i0.ɵɵelementStart(18, "p", 318);
     i0.ɵɵtext(19, " Per-user / per-role grants on the scopes assigned above. Edit grants in ");
     i0.ɵɵelementStart(20, "strong");
     i0.ɵɵtext(21, "Knowledge Hub Config \u2192 Search Scopes \u2192 Permissions");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(22, ". ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(23, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_23_Template, 2, 0, "div", 318)(24, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_24_Template, 2, 0, "div", 319)(25, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_Template, 2, 0);
+    i0.ɵɵconditionalCreate(23, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_23_Template, 2, 0, "div", 319)(24, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_24_Template, 2, 0, "div", 320)(25, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Conditional_25_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1782,43 +1789,43 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r48 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 56);
-    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_ng_template_1_Template, 2, 0, "ng-template", 58);
-    i0.ɵɵelementStart(2, "div", 59)(3, "div", 60)(4, "div", 61);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 55);
+    i0.ɵɵtemplate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_ng_template_1_Template, 2, 0, "ng-template", 57);
+    i0.ɵɵelementStart(2, "div", 58)(3, "div", 59)(4, "div", 60);
     i0.ɵɵtext(5, " Control this agent's access to ");
     i0.ɵɵelementStart(6, "strong");
     i0.ɵɵtext(7, "Scoped Search");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(8, " and assign the scopes it can use for pre-execution RAG or agent-invoked search. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 300)(10, "label", 301)(11, "input", 302);
+    i0.ɵɵelementStart(9, "div", 301)(10, "label", 302)(11, "input", 303);
     i0.ɵɵlistener("change", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Template_input_change_11_listener() { i0.ɵɵrestoreView(_r48); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.record.SearchScopeAccess = "All"); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(12, "i", 303);
-    i0.ɵɵelementStart(13, "div", 304)(14, "div", 305);
+    i0.ɵɵelement(12, "i", 304);
+    i0.ɵɵelementStart(13, "div", 305)(14, "div", 306);
     i0.ɵɵtext(15, "All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 306);
+    i0.ɵɵelementStart(16, "div", 307);
     i0.ɵɵtext(17, "Can use any scope including Global. No scope restriction.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "label", 301)(19, "input", 307);
+    i0.ɵɵelementStart(18, "label", 302)(19, "input", 308);
     i0.ɵɵlistener("change", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Template_input_change_19_listener() { i0.ɵɵrestoreView(_r48); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.record.SearchScopeAccess = "Assigned"); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(20, "i", 308);
-    i0.ɵɵelementStart(21, "div", 304)(22, "div", 305);
+    i0.ɵɵelement(20, "i", 309);
+    i0.ɵɵelementStart(21, "div", 305)(22, "div", 306);
     i0.ɵɵtext(23, "Assigned");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 306);
+    i0.ɵɵelementStart(24, "div", 307);
     i0.ɵɵtext(25, "Can use ONLY scopes listed below. Other scopes are rejected with ACCESS_DENIED.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(26, "label", 301)(27, "input", 309);
+    i0.ɵɵelementStart(26, "label", 302)(27, "input", 310);
     i0.ɵɵlistener("change", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Template_input_change_27_listener() { i0.ɵɵrestoreView(_r48); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.record.SearchScopeAccess = "None"); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(28, "i", 310);
-    i0.ɵɵelementStart(29, "div", 304)(30, "div", 305);
+    i0.ɵɵelement(28, "i", 311);
+    i0.ɵɵelementStart(29, "div", 305)(30, "div", 306);
     i0.ɵɵtext(31, "None");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "div", 306);
+    i0.ɵɵelementStart(32, "div", 307);
     i0.ɵɵtext(33, "No search capability. The Scoped Search action is disabled for this agent.");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵconditionalCreate(34, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Conditional_34_Template, 26, 4);
@@ -1842,20 +1849,20 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.record.SearchScopeAccess !== "None" ? 34 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 273);
+    i0.ɵɵelement(0, "i", 274);
     i0.ɵɵtext(1, " Payload Management ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_138_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 316);
+    i0.ɵɵelement(0, "i", 317);
     i0.ɵɵtext(1, " Execution Guardrails ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_149_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 325);
+    i0.ɵɵelement(0, "i", 326);
     i0.ɵɵtext(1, " Configuration ");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_169_Template(rf, ctx) { if (rf & 1) {
     const _r52 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 326);
+    i0.ɵɵelementStart(0, "mj-dropdown", 327);
     i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_169_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r52); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1864,7 +1871,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("Data", ctx_r1.statusOptions)("ValuePrimitive", true);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_170_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 123);
+    i0.ɵɵelementStart(0, "span", 122);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1874,7 +1881,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_181_Template(rf, ctx) { if (rf & 1) {
     const _r53 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dropdown", 327);
+    i0.ɵɵelementStart(0, "mj-dropdown", 328);
     i0.ɵɵtwoWayListener("ngModelChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_181_Template_mj_dropdown_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r53); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.record.TypeID, $event) || (ctx_r1.record.TypeID = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1883,7 +1890,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("Data", ctx_r1.agentTypes)("ValuePrimitive", true);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_182_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 123);
+    i0.ɵɵelementStart(0, "span", 122);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1893,7 +1900,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_193_Template(rf, ctx) { if (rf & 1) {
     const _r54 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-tree-dropdown", 328);
+    i0.ɵɵelementStart(0, "mj-tree-dropdown", 329);
     i0.ɵɵlistener("ValueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_193_Template_mj_tree_dropdown_ValueChange_0_listener($event) { i0.ɵɵrestoreView(_r54); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCategoryChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1901,7 +1908,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵproperty("BranchConfig", ctx_r1.CategoryBranchConfig)("Value", ctx_r1.SelectedCategoryKey)("Clearable", true)("EnableSearch", true);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_194_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 123);
+    i0.ɵɵelementStart(0, "span", 122);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1910,7 +1917,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.record.Category || "Not Set");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 335);
+    i0.ɵɵelementStart(0, "span", 336);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1919,28 +1926,28 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate(ctx_r1.selectedContextCompressionPrompt.Name);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 336);
+    i0.ɵɵelementStart(0, "span", 337);
     i0.ɵɵtext(1, "No prompt selected");
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r56 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 340);
+    i0.ɵɵelementStart(0, "button", 341);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r56); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.clearContextCompressionPrompt()); });
-    i0.ɵɵelement(1, "i", 341);
+    i0.ɵɵelement(1, "i", 342);
     i0.ɵɵelementEnd();
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     const _r55 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 333)(1, "div", 334);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_2_Template, 2, 1, "span", 335)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_3_Template, 2, 0, "span", 336);
+    i0.ɵɵelementStart(0, "div", 334)(1, "div", 335);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_2_Template, 2, 1, "span", 336)(3, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_3_Template, 2, 0, "span", 337);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 337)(5, "button", 338);
+    i0.ɵɵelementStart(4, "div", 338)(5, "button", 339);
     i0.ɵɵlistener("click", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r55); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.openContextCompressionPromptSelector()); });
-    i0.ɵɵelement(6, "i", 190);
+    i0.ɵɵelement(6, "i", 191);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_8_Template, 2, 0, "button", 339);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Conditional_8_Template, 2, 0, "button", 340);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -1952,7 +1959,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵconditional(ctx_r1.selectedContextCompressionPrompt ? 8 : -1);
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 123);
+    i0.ɵɵelementStart(0, "span", 122);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1961,41 +1968,41 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_
     i0.ɵɵtextInterpolate((ctx_r1.selectedContextCompressionPrompt == null ? null : ctx_r1.selectedContextCompressionPrompt.Name) || ctx_r1.record.ContextCompressionPrompt || "Not Set");
 } }
 function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 116)(1, "div", 117)(2, "div", 118);
-    i0.ɵɵelement(3, "i", 329);
+    i0.ɵɵelementStart(0, "div", 115)(1, "div", 116)(2, "div", 117);
+    i0.ɵɵelement(3, "i", 330);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 120)(5, "h4");
+    i0.ɵɵelementStart(4, "div", 119)(5, "h4");
     i0.ɵɵtext(6, "Message Threshold");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "p");
     i0.ɵɵtext(8, "Messages before compression triggers");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 121);
-    i0.ɵɵelement(10, "mj-form-field", 330);
+    i0.ɵɵelementStart(9, "div", 120);
+    i0.ɵɵelement(10, "mj-form-field", 331);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 116)(12, "div", 117)(13, "div", 118);
-    i0.ɵɵelement(14, "i", 331);
+    i0.ɵɵelementStart(11, "div", 115)(12, "div", 116)(13, "div", 117);
+    i0.ɵɵelement(14, "i", 332);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 120)(16, "h4");
+    i0.ɵɵelementStart(15, "div", 119)(16, "h4");
     i0.ɵɵtext(17, "Messages to Keep");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "p");
     i0.ɵɵtext(19, "Recent messages to retain uncompressed");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(20, "div", 121);
-    i0.ɵɵelement(21, "mj-form-field", 332);
+    i0.ɵɵelementStart(20, "div", 120);
+    i0.ɵɵelement(21, "mj-form-field", 333);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 116)(23, "div", 117)(24, "div", 118);
-    i0.ɵɵelement(25, "i", 287);
+    i0.ɵɵelementStart(22, "div", 115)(23, "div", 116)(24, "div", 117);
+    i0.ɵɵelement(25, "i", 288);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 120)(27, "h4");
+    i0.ɵɵelementStart(26, "div", 119)(27, "h4");
     i0.ɵɵtext(28, "Compression Prompt");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(29, "p");
     i0.ɵɵtext(30, "Prompt used for summarization");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(31, "div", 121);
-    i0.ɵɵconditionalCreate(32, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Template, 9, 3, "div", 333)(33, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_33_Template, 2, 1, "span", 123);
+    i0.ɵɵelementStart(31, "div", 120);
+    i0.ɵɵconditionalCreate(32, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_32_Template, 9, 3, "div", 334)(33, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Conditional_33_Template, 2, 1, "span", 122);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -2010,34 +2017,34 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template(rf,
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_0_Template, 2, 2, "div", 46);
     i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_1_Template, 4, 3, "div", 47);
-    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_2_Template, 2, 8, "div", 48);
-    i0.ɵɵelementStart(3, "div", 49);
-    i0.ɵɵconditionalCreate(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Template, 6, 4, "mj-accordion-panel", 50);
-    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Template, 5, 3, "mj-accordion-panel", 51);
-    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Template, 19, 13, "mj-accordion-panel", 52);
-    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Template, 15, 5, "mj-accordion-panel", 53);
-    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Template, 8, 3, "mj-accordion-panel", 54);
-    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Template, 10, 4, "mj-accordion-panel", 55);
-    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Template, 35, 14, "mj-accordion-panel", 56);
-    i0.ɵɵelementStart(11, "mj-accordion-panel", 57);
-    i0.ɵɵtemplate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_12_Template, 2, 0, "ng-template", 58);
-    i0.ɵɵelementStart(13, "div", 59)(14, "div", 60)(15, "div", 61);
+    i0.ɵɵconditionalCreate(2, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_2_Template, 4, 13);
+    i0.ɵɵelementStart(3, "div", 48);
+    i0.ɵɵconditionalCreate(4, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_4_Template, 6, 4, "mj-accordion-panel", 49);
+    i0.ɵɵconditionalCreate(5, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_5_Template, 5, 3, "mj-accordion-panel", 50);
+    i0.ɵɵconditionalCreate(6, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_6_Template, 19, 13, "mj-accordion-panel", 51);
+    i0.ɵɵconditionalCreate(7, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_7_Template, 15, 5, "mj-accordion-panel", 52);
+    i0.ɵɵconditionalCreate(8, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_8_Template, 8, 3, "mj-accordion-panel", 53);
+    i0.ɵɵconditionalCreate(9, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_9_Template, 10, 4, "mj-accordion-panel", 54);
+    i0.ɵɵconditionalCreate(10, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_10_Template, 35, 14, "mj-accordion-panel", 55);
+    i0.ɵɵelementStart(11, "mj-accordion-panel", 56);
+    i0.ɵɵtemplate(12, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_12_Template, 2, 0, "ng-template", 57);
+    i0.ɵɵelementStart(13, "div", 58)(14, "div", 59)(15, "div", 60);
     i0.ɵɵtext(16, " Configure how this agent handles data payloads, path routing, and validation between parent and child agents. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 62)(18, "h3", 63);
-    i0.ɵɵelement(19, "i", 64);
+    i0.ɵɵelementStart(17, "div", 61)(18, "h3", 62);
+    i0.ɵɵelement(19, "i", 63);
     i0.ɵɵtext(20, " Payload Scope ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 65)(22, "div", 66)(23, "label", 67);
+    i0.ɵɵelementStart(21, "div", 64)(22, "div", 65)(23, "label", 66);
     i0.ɵɵtext(24, "Payload Scope Path");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "p", 68);
+    i0.ɵɵelementStart(25, "p", 67);
     i0.ɵɵtext(26, " Specify a path within the parent payload that this sub-agent should operate on. Leave empty to receive the entire payload. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 69);
-    i0.ɵɵelement(28, "mj-form-field", 70);
-    i0.ɵɵelementStart(29, "div", 71);
-    i0.ɵɵelement(30, "i", 72);
+    i0.ɵɵelementStart(27, "div", 68);
+    i0.ɵɵelement(28, "mj-form-field", 69);
+    i0.ɵɵelementStart(29, "div", 70);
+    i0.ɵɵelement(30, "i", 71);
     i0.ɵɵelementStart(31, "span");
     i0.ɵɵtext(32, "Example: ");
     i0.ɵɵelementStart(33, "code");
@@ -2047,24 +2054,24 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template(rf,
     i0.ɵɵelementStart(36, "code");
     i0.ɵɵtext(37, "/analysis/results");
     i0.ɵɵelementEnd()()()()()();
-    i0.ɵɵelementStart(38, "div", 62)(39, "h3", 63);
-    i0.ɵɵelement(40, "i", 73);
+    i0.ɵɵelementStart(38, "div", 61)(39, "h3", 62);
+    i0.ɵɵelement(40, "i", 72);
     i0.ɵɵtext(41, " Path Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "div", 74)(43, "div", 75)(44, "div", 76)(45, "div", 77);
-    i0.ɵɵelement(46, "i", 78);
+    i0.ɵɵelementStart(42, "div", 73)(43, "div", 74)(44, "div", 75)(45, "div", 76);
+    i0.ɵɵelement(46, "i", 77);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "div", 79)(48, "h4");
+    i0.ɵɵelementStart(47, "div", 78)(48, "h4");
     i0.ɵɵtext(49, "Downstream Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(50, "p");
     i0.ɵɵtext(51, "JSON array of paths to pass to sub-agents");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(52, "div", 80)(53, "div", 81)(54, "mj-code-editor", 82);
+    i0.ɵɵelementStart(52, "div", 79)(53, "div", 80)(54, "mj-code-editor", 81);
     i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template_mj_code_editor_valueChange_54_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(55, "div", 83);
-    i0.ɵɵelement(56, "i", 84);
+    i0.ɵɵelementStart(55, "div", 82);
+    i0.ɵɵelement(56, "i", 83);
     i0.ɵɵtext(57, " Use ");
     i0.ɵɵelementStart(58, "code");
     i0.ɵɵtext(59, "[\"*\"]");
@@ -2073,270 +2080,270 @@ function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template(rf,
     i0.ɵɵelementStart(61, "code");
     i0.ɵɵtext(62, "[\"user.id\", \"order.*\"]");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(63, "div", 75)(64, "div", 76)(65, "div", 85);
-    i0.ɵɵelement(66, "i", 86);
+    i0.ɵɵelementStart(63, "div", 74)(64, "div", 75)(65, "div", 84);
+    i0.ɵɵelement(66, "i", 85);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(67, "div", 79)(68, "h4");
+    i0.ɵɵelementStart(67, "div", 78)(68, "h4");
     i0.ɵɵtext(69, "Upstream Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(70, "p");
     i0.ɵɵtext(71, "JSON array of paths sub-agents can write back");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(72, "div", 80)(73, "div", 81)(74, "mj-code-editor", 82);
+    i0.ɵɵelementStart(72, "div", 79)(73, "div", 80)(74, "mj-code-editor", 81);
     i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template_mj_code_editor_valueChange_74_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(75, "div", 83);
-    i0.ɵɵelement(76, "i", 84);
+    i0.ɵɵelementStart(75, "div", 82);
+    i0.ɵɵelement(76, "i", 83);
     i0.ɵɵtext(77, " Use ");
     i0.ɵɵelementStart(78, "code");
     i0.ɵɵtext(79, "[\"*\"]");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(80, " to allow all writes or limit to specific paths ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(81, "div", 75)(82, "div", 76)(83, "div", 87);
-    i0.ɵɵelement(84, "i", 88);
+    i0.ɵɵelementStart(81, "div", 74)(82, "div", 75)(83, "div", 86);
+    i0.ɵɵelement(84, "i", 87);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(85, "div", 79)(86, "h4");
+    i0.ɵɵelementStart(85, "div", 78)(86, "h4");
     i0.ɵɵtext(87, "Self Read Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(88, "p");
     i0.ɵɵtext(89, "JSON array of paths this agent can read");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(90, "div", 80)(91, "div", 81)(92, "mj-code-editor", 82);
+    i0.ɵɵelementStart(90, "div", 79)(91, "div", 80)(92, "mj-code-editor", 81);
     i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template_mj_code_editor_valueChange_92_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(93, "div", 83);
-    i0.ɵɵelement(94, "i", 84);
+    i0.ɵɵelementStart(93, "div", 82);
+    i0.ɵɵelement(94, "i", 83);
     i0.ɵɵtext(95, " Paths this agent's prompts can read from the payload ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(96, "div", 75)(97, "div", 76)(98, "div", 89);
-    i0.ɵɵelement(99, "i", 90);
+    i0.ɵɵelementStart(96, "div", 74)(97, "div", 75)(98, "div", 88);
+    i0.ɵɵelement(99, "i", 89);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(100, "div", 79)(101, "h4");
+    i0.ɵɵelementStart(100, "div", 78)(101, "h4");
     i0.ɵɵtext(102, "Self Write Paths");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(103, "p");
     i0.ɵɵtext(104, "JSON array of paths this agent can write to");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(105, "div", 80)(106, "div", 81)(107, "mj-code-editor", 82);
+    i0.ɵɵelementStart(105, "div", 79)(106, "div", 80)(107, "mj-code-editor", 81);
     i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template_mj_code_editor_valueChange_107_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(108, "div", 83);
-    i0.ɵɵelement(109, "i", 84);
+    i0.ɵɵelementStart(108, "div", 82);
+    i0.ɵɵelement(109, "i", 83);
     i0.ɵɵtext(110, " Paths this agent's prompts can write back to the payload ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(111, "div", 62)(112, "h3", 63);
-    i0.ɵɵelement(113, "i", 91);
+    i0.ɵɵelementStart(111, "div", 61)(112, "h3", 62);
+    i0.ɵɵelement(113, "i", 90);
     i0.ɵɵtext(114, " Final Payload Validation ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(115, "div", 92)(116, "div", 93)(117, "div", 94)(118, "label", 95);
+    i0.ɵɵelementStart(115, "div", 91)(116, "div", 92)(117, "div", 93)(118, "label", 94);
     i0.ɵɵtext(119, "Validation Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(120, "p", 96);
+    i0.ɵɵelementStart(120, "p", 95);
     i0.ɵɵtext(121, "How to handle validation failures");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(122, "mj-form-field", 97);
+    i0.ɵɵelement(122, "mj-form-field", 96);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(123, "div", 94)(124, "label", 95);
+    i0.ɵɵelementStart(123, "div", 93)(124, "label", 94);
     i0.ɵɵtext(125, "Max Retries");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(126, "p", 96);
+    i0.ɵɵelementStart(126, "p", 95);
     i0.ɵɵtext(127, "Maximum validation retry attempts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(128, "mj-form-field", 98);
+    i0.ɵɵelement(128, "mj-form-field", 97);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(129, "div", 99)(130, "label", 100);
-    i0.ɵɵelement(131, "i", 101);
+    i0.ɵɵelementStart(129, "div", 98)(130, "label", 99);
+    i0.ɵɵelement(131, "i", 100);
     i0.ɵɵtext(132, " Validation Schema ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(133, "p", 102);
+    i0.ɵɵelementStart(133, "p", 101);
     i0.ɵɵtext(134, " JSON schema or validation rules for the final payload structure ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(135, "div", 103)(136, "mj-code-editor", 104);
+    i0.ɵɵelementStart(135, "div", 102)(136, "mj-code-editor", 103);
     i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template_mj_code_editor_valueChange_136_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
     i0.ɵɵelementEnd()()()()()()();
-    i0.ɵɵelementStart(137, "mj-accordion-panel", 105);
-    i0.ɵɵtemplate(138, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_138_Template, 2, 0, "ng-template", 58);
-    i0.ɵɵelementStart(139, "div", 59)(140, "div", 60)(141, "div", 61);
+    i0.ɵɵelementStart(137, "mj-accordion-panel", 104);
+    i0.ɵɵtemplate(138, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_138_Template, 2, 0, "ng-template", 57);
+    i0.ɵɵelementStart(139, "div", 58)(140, "div", 59)(141, "div", 60);
     i0.ɵɵtext(142, " Set limits to prevent runaway agent executions and control resource usage. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(143, "div", 106);
-    i0.ɵɵelement(144, "mj-form-field", 107)(145, "mj-form-field", 108)(146, "mj-form-field", 109)(147, "mj-form-field", 110);
+    i0.ɵɵelementStart(143, "div", 105);
+    i0.ɵɵelement(144, "mj-form-field", 106)(145, "mj-form-field", 107)(146, "mj-form-field", 108)(147, "mj-form-field", 109);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(148, "mj-accordion-panel", 111);
-    i0.ɵɵtemplate(149, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_149_Template, 2, 0, "ng-template", 58);
-    i0.ɵɵelementStart(150, "div", 59)(151, "div", 60)(152, "div", 61);
+    i0.ɵɵelementStart(148, "mj-accordion-panel", 110);
+    i0.ɵɵtemplate(149, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_ng_template_149_Template, 2, 0, "ng-template", 57);
+    i0.ɵɵelementStart(150, "div", 58)(151, "div", 59)(152, "div", 60);
     i0.ɵɵtext(153, " Configure agent behavior, execution settings, and advanced features. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(154, "div", 112)(155, "h3", 113);
-    i0.ɵɵelement(156, "i", 114);
+    i0.ɵɵelementStart(154, "div", 111)(155, "h3", 112);
+    i0.ɵɵelement(156, "i", 113);
     i0.ɵɵtext(157, " Identity & Behavior ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(158, "div", 115)(159, "div", 116)(160, "div", 117)(161, "div", 118);
-    i0.ɵɵelement(162, "i", 119);
+    i0.ɵɵelementStart(158, "div", 114)(159, "div", 115)(160, "div", 116)(161, "div", 117);
+    i0.ɵɵelement(162, "i", 118);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(163, "div", 120)(164, "h4");
+    i0.ɵɵelementStart(163, "div", 119)(164, "h4");
     i0.ɵɵtext(165, "Agent Status");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(166, "p");
     i0.ɵɵtext(167, "Current availability and operational status");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(168, "div", 121);
-    i0.ɵɵconditionalCreate(169, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_169_Template, 1, 3, "mj-dropdown", 122)(170, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_170_Template, 2, 1, "span", 123);
+    i0.ɵɵelementStart(168, "div", 120);
+    i0.ɵɵconditionalCreate(169, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_169_Template, 1, 3, "mj-dropdown", 121)(170, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_170_Template, 2, 1, "span", 122);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(171, "div", 116)(172, "div", 117)(173, "div", 118);
+    i0.ɵɵelementStart(171, "div", 115)(172, "div", 116)(173, "div", 117);
     i0.ɵɵelement(174, "i", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(175, "div", 120)(176, "h4");
+    i0.ɵɵelementStart(175, "div", 119)(176, "h4");
     i0.ɵɵtext(177, "Agent Type");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(178, "p");
     i0.ɵɵtext(179, "Category and system-level behavior");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(180, "div", 121);
-    i0.ɵɵconditionalCreate(181, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_181_Template, 1, 3, "mj-dropdown", 124)(182, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_182_Template, 2, 1, "span", 123);
+    i0.ɵɵelementStart(180, "div", 120);
+    i0.ɵɵconditionalCreate(181, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_181_Template, 1, 3, "mj-dropdown", 123)(182, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_182_Template, 2, 1, "span", 122);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(183, "div", 116)(184, "div", 117)(185, "div", 118);
-    i0.ɵɵelement(186, "i", 125);
+    i0.ɵɵelementStart(183, "div", 115)(184, "div", 116)(185, "div", 117);
+    i0.ɵɵelement(186, "i", 124);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(187, "div", 120)(188, "h4");
+    i0.ɵɵelementStart(187, "div", 119)(188, "h4");
     i0.ɵɵtext(189, "Category");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(190, "p");
     i0.ɵɵtext(191, "Organizational category for this agent");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(192, "div", 121);
-    i0.ɵɵconditionalCreate(193, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_193_Template, 1, 4, "mj-tree-dropdown", 126)(194, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_194_Template, 2, 1, "span", 123);
+    i0.ɵɵelementStart(192, "div", 120);
+    i0.ɵɵconditionalCreate(193, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_193_Template, 1, 4, "mj-tree-dropdown", 125)(194, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_194_Template, 2, 1, "span", 122);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(195, "div", 116)(196, "div", 117)(197, "div", 118);
-    i0.ɵɵelement(198, "i", 127);
+    i0.ɵɵelementStart(195, "div", 115)(196, "div", 116)(197, "div", 117);
+    i0.ɵɵelement(198, "i", 126);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(199, "div", 120)(200, "h4");
+    i0.ɵɵelementStart(199, "div", 119)(200, "h4");
     i0.ɵɵtext(201, "Expose as Action");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(202, "p");
     i0.ɵɵtext(203, "Make available as an action for other agents");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(204, "div", 121);
-    i0.ɵɵelement(205, "mj-form-field", 128);
+    i0.ɵɵelementStart(204, "div", 120);
+    i0.ɵɵelement(205, "mj-form-field", 127);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(206, "div", 129)(207, "div", 117)(208, "div", 118);
-    i0.ɵɵelement(209, "i", 130);
+    i0.ɵɵelementStart(206, "div", 128)(207, "div", 116)(208, "div", 117);
+    i0.ɵɵelement(209, "i", 129);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(210, "div", 120)(211, "h4");
+    i0.ɵɵelementStart(210, "div", 119)(211, "h4");
     i0.ɵɵtext(212, "Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(213, "p");
     i0.ɵɵtext(214, "Detailed agent description and purpose");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(215, "div", 121);
-    i0.ɵɵelement(216, "mj-form-field", 131);
+    i0.ɵɵelementStart(215, "div", 120);
+    i0.ɵɵelement(216, "mj-form-field", 130);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(217, "div", 112)(218, "h3", 113);
+    i0.ɵɵelementStart(217, "div", 111)(218, "h3", 112);
     i0.ɵɵelement(219, "i", 33);
     i0.ɵɵtext(220, " Execution Settings ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(221, "div", 115)(222, "div", 116)(223, "div", 117)(224, "div", 118);
-    i0.ɵɵelement(225, "i", 132);
+    i0.ɵɵelementStart(221, "div", 114)(222, "div", 115)(223, "div", 116)(224, "div", 117);
+    i0.ɵɵelement(225, "i", 131);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(226, "div", 120)(227, "h4");
+    i0.ɵɵelementStart(226, "div", 119)(227, "h4");
     i0.ɵɵtext(228, "Execution Mode");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(229, "p");
     i0.ɵɵtext(230, "How sub-agents are executed");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(231, "div", 121);
-    i0.ɵɵelement(232, "mj-form-field", 133);
+    i0.ɵɵelementStart(231, "div", 120);
+    i0.ɵɵelement(232, "mj-form-field", 132);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(233, "div", 116)(234, "div", 117)(235, "div", 118);
-    i0.ɵɵelement(236, "i", 134);
+    i0.ɵɵelementStart(233, "div", 115)(234, "div", 116)(235, "div", 117);
+    i0.ɵɵelement(236, "i", 133);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(237, "div", 120)(238, "h4");
+    i0.ɵɵelementStart(237, "div", 119)(238, "h4");
     i0.ɵɵtext(239, "Execution Order");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(240, "p");
     i0.ɵɵtext(241, "Order when run with siblings");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(242, "div", 121);
-    i0.ɵɵelement(243, "mj-form-field", 135);
+    i0.ɵɵelementStart(242, "div", 120);
+    i0.ɵɵelement(243, "mj-form-field", 134);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(244, "div", 116)(245, "div", 117)(246, "div", 118);
-    i0.ɵɵelement(247, "i", 136);
+    i0.ɵɵelementStart(244, "div", 115)(245, "div", 116)(246, "div", 117);
+    i0.ɵɵelement(247, "i", 135);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(248, "div", 120)(249, "h4");
+    i0.ɵɵelementStart(248, "div", 119)(249, "h4");
     i0.ɵɵtext(250, "Default Effort Level");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(251, "p");
     i0.ɵɵtext(252, "Default effort level for all prompts (1-100)");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(253, "div", 121);
-    i0.ɵɵelement(254, "mj-form-field", 137);
-    i0.ɵɵelementStart(255, "div", 138);
-    i0.ɵɵelement(256, "i", 84);
+    i0.ɵɵelementStart(253, "div", 120);
+    i0.ɵɵelement(254, "mj-form-field", 136);
+    i0.ɵɵelementStart(255, "div", 137);
+    i0.ɵɵelement(256, "i", 83);
     i0.ɵɵtext(257, " Higher values request more thorough reasoning (1=minimal, 100=maximum) ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(258, "div", 116)(259, "div", 117)(260, "div", 118);
-    i0.ɵɵelement(261, "i", 101);
+    i0.ɵɵelementStart(258, "div", 115)(259, "div", 116)(260, "div", 117);
+    i0.ɵɵelement(261, "i", 100);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(262, "div", 120)(263, "h4");
+    i0.ɵɵelementStart(262, "div", 119)(263, "h4");
     i0.ɵɵtext(264, "Driver Class");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(265, "p");
     i0.ɵɵtext(266, "Custom implementation class");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(267, "div", 121);
-    i0.ɵɵelement(268, "mj-form-field", 139);
+    i0.ɵɵelementStart(267, "div", 120);
+    i0.ɵɵelement(268, "mj-form-field", 138);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(269, "div", 112)(270, "h3", 113);
-    i0.ɵɵelement(271, "i", 140);
+    i0.ɵɵelementStart(269, "div", 111)(270, "h3", 112);
+    i0.ɵɵelement(271, "i", 139);
     i0.ɵɵtext(272, " Visual Identity ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(273, "div", 115)(274, "div", 116)(275, "div", 117)(276, "div", 118);
-    i0.ɵɵelement(277, "i", 141);
+    i0.ɵɵelementStart(273, "div", 114)(274, "div", 115)(275, "div", 116)(276, "div", 117);
+    i0.ɵɵelement(277, "i", 140);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(278, "div", 120)(279, "h4");
+    i0.ɵɵelementStart(278, "div", 119)(279, "h4");
     i0.ɵɵtext(280, "Icon Class");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(281, "p");
     i0.ɵɵtext(282, "Font Awesome icon class");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(283, "div", 121);
-    i0.ɵɵelement(284, "mj-form-field", 142);
-    i0.ɵɵelementStart(285, "div", 138);
-    i0.ɵɵelement(286, "i", 84);
+    i0.ɵɵelementStart(283, "div", 120);
+    i0.ɵɵelement(284, "mj-form-field", 141);
+    i0.ɵɵelementStart(285, "div", 137);
+    i0.ɵɵelement(286, "i", 83);
     i0.ɵɵtext(287, " Example: ");
     i0.ɵɵelementStart(288, "code");
     i0.ɵɵtext(289, "fa-solid fa-robot");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(290, "div", 116)(291, "div", 117)(292, "div", 118);
-    i0.ɵɵelement(293, "i", 143);
+    i0.ɵɵelementStart(290, "div", 115)(291, "div", 116)(292, "div", 117);
+    i0.ɵɵelement(293, "i", 142);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(294, "div", 120)(295, "h4");
+    i0.ɵɵelementStart(294, "div", 119)(295, "h4");
     i0.ɵɵtext(296, "Logo URL");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(297, "p");
     i0.ɵɵtext(298, "URL for agent logo image");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(299, "div", 121);
-    i0.ɵɵelement(300, "mj-form-field", 144);
-    i0.ɵɵelementStart(301, "div", 138);
-    i0.ɵɵelement(302, "i", 84);
+    i0.ɵɵelementStart(299, "div", 120);
+    i0.ɵɵelement(300, "mj-form-field", 143);
+    i0.ɵɵelementStart(301, "div", 137);
+    i0.ɵɵelement(302, "i", 83);
     i0.ɵɵtext(303, " Takes precedence over Icon Class ");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(304, "div", 112)(305, "h3", 113);
-    i0.ɵɵelement(306, "i", 145);
+    i0.ɵɵelementStart(304, "div", 111)(305, "h3", 112);
+    i0.ɵɵelement(306, "i", 144);
     i0.ɵɵtext(307, " Context Compression ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(308, "div", 115)(309, "div", 129)(310, "div", 117)(311, "div", 118);
-    i0.ɵɵelement(312, "i", 119);
+    i0.ɵɵelementStart(308, "div", 114)(309, "div", 128)(310, "div", 116)(311, "div", 117);
+    i0.ɵɵelement(312, "i", 118);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(313, "div", 120)(314, "h4");
+    i0.ɵɵelementStart(313, "div", 119)(314, "h4");
     i0.ɵɵtext(315, "Enable Context Compression");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(316, "p");
     i0.ɵɵtext(317, "Automatically compress conversation context when message threshold is reached");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(318, "div", 121)(319, "mj-form-field", 146);
+    i0.ɵɵelementStart(318, "div", 120)(319, "mj-form-field", 145);
     i0.ɵɵlistener("valueChange", function MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Template_mj_form_field_valueChange_319_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(320, MJAIAgentFormComponentExtended_Conditional_0_Conditional_6_Conditional_320_Template, 34, 5);
@@ -2442,7 +2449,7 @@ function MJAIAgentFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf
 } }
 function MJAIAgentFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r57 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-agent-permissions-dialog", 342);
+    i0.ɵɵelementStart(0, "mj-agent-permissions-dialog", 343);
     i0.ɵɵlistener("Closed", function MJAIAgentFormComponentExtended_Conditional_1_Template_mj_agent_permissions_dialog_Closed_0_listener() { i0.ɵɵrestoreView(_r57); 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(_r57); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -5716,6 +5723,7 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
      * Component cleanup - critical for preventing memory leaks
      */
     ngOnDestroy() {
+        super.ngOnDestroy();
         // Signal all subscriptions to complete
         this.destroy$.next();
         this.destroy$.complete();
@@ -5760,14 +5768,14 @@ let MJAIAgentFormComponentExtended = class MJAIAgentFormComponentExtended extend
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CustomSectionContainer = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 2, consts: [["form", "ngForm"], ["customSectionContainer", ""], [3, "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [3, "Agent"], [3, "Navigate", "DeleteRequested", "FavoriteToggled", "HistoryRequested", "ListManagementRequested", "Record", "FormComponent", "ToolbarConfig", "WidthMode"], [1, "record-form"], [1, "agent-header"], [1, "agent-header-mini"], [1, "agent-form-loading"], [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-sitemap"], [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"], [1, "fa-solid", "fa-play"], ["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"], ["text", "Loading agent...", "size", "medium"], [1, "agent-tabbar"], [1, "agent-pane", "agent-pane--designer", 3, "agent-pane--hidden"], [1, "agent-pane", "agent-pane--invocations", 3, "agent-pane--hidden"], [1, "form-content", "agent-pane"], ["id", "history", 3, "Expanded", "Disabled"], ["id", "actions", 3, "Expanded", "Disabled"], ["id", "subagents", 3, "Expanded", "Disabled"], ["id", "prompts", 3, "Expanded", "Disabled"], ["id", "learning", 3, "Expanded", "Disabled"], ["id", "notes", 3, "Expanded", "Disabled"], ["id", "search", 3, "Expanded"], ["id", "payload", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "panel-content"], [1, "section-header"], [1, "section-description"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], ["id", "guardrails", 3, "Expanded"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "Record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "Record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "Record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "Record"], ["id", "config", 3, "Expanded"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["TextField", "text", "ValueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "Data", "ValuePrimitive"], [1, "config-field-display"], ["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-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"], [3, "TabChange", "Tabs", "ActiveKey"], [1, "agent-pane", "agent-pane--designer"], ["size", "medium", 3, "text"], [1, "agent-pane", "agent-pane--invocations"], [3, "RecordOpenRequested", "Provider", "AgentID", "Active", "ExposeAsAction", "ParentAgentName", "ParentAgentID"], [1, "panel-content", "execution-history-panel"], ["role", "tablist", 1, "history-view-toggle"], [1, "fa-solid", "fa-history"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["type", "button", 1, "history-toggle-option", 3, "click"], [1, "fa-solid", "fa-person-running"], [1, "history-toggle-count"], [1, "fa-solid", "fa-tower-broadcast"], ["text", "Loading sessions...", "size", "medium"], ["Icon", "fa-solid fa-tower-broadcast", "Title", "No Voice Sessions", "Message", "This agent hasn't participated in any realtime voice sessions yet \u2014 neither as the co-agent nor as a delegation target.", "Size", "compact"], [1, "execution-history-list"], ["title", "Open session", 1, "execution-card", "session-card"], ["title", "Open session", 1, "execution-card", "session-card", 3, "click"], [1, "execution-header"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "session-role-chip"], [1, "session-role-chip", "session-role-chip--target"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "session-status-pill"], [1, "fa-solid", "fa-stopwatch"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-plug"], [1, "fa-solid", "fa-user"], [1, "execution-actions"], ["title", "View session details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-bullseye"], ["text", "Loading execution history...", "size", "medium"], ["Icon", "fa-solid fa-clock-rotate-left", "Title", "No Execution History", "Message", "This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.", "Size", "compact"], [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"], ["Variant", "no-results", "Title", "No Matching Results", "Size", "compact", 3, "Message"], [1, "execution-card", 3, "expanded"], [1, "pagination-controls"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [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, "record-count"], [1, "loading-state"], [1, "header-actions"], ["mjButton", "", "variant", "primary", "size", "sm"], ["Icon", "fa-solid fa-bolt", "Title", "No Actions Configured", "Message", "Add actions to enable this agent to perform specific tasks and operations.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], [1, "entity-list"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["Icon", "fa-solid fa-bolt", "Title", "No Actions Configured", "Message", "Add actions to enable this agent to perform specific tasks and operations.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [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"], ["Icon", "fa-solid fa-sitemap", "Title", "No Sub-Agents", "Message", "Sub-agents help build complex workflows through hierarchical orchestration.", "Size", "compact"], ["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"], ["Icon", "fa-solid fa-comments", "Title", "No Prompts Configured", "Message", "Add prompts to define how this agent processes requests and generates responses.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], ["name", "modelSelectionMode", "TextField", "text", "ValueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["Icon", "fa-solid fa-comments", "Title", "No Prompts Configured", "Message", "Add prompts to define how this agent processes requests and generates responses.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [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"], ["Icon", "fa-solid fa-brain", "Title", "No Learning Cycles", "Message", "Learning cycles will appear here as the agent processes requests and improves over time.", "Size", "compact"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], ["Icon", "fa-solid fa-sticky-note", "Title", "No Notes", "Message", "Add notes to document important information, observations, or instructions for this agent.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], [1, "fa-solid", "fa-sticky-note"], ["Icon", "fa-solid fa-sticky-note", "Title", "No Notes", "Message", "Add notes to document important information, observations, or instructions for this agent.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "agent-search-access"], [1, "agent-search-access-option"], ["type", "radio", "name", "SearchScopeAccess", "value", "All", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-globe"], [1, "agent-search-access-text"], [1, "agent-search-access-title"], [1, "agent-search-access-desc"], ["type", "radio", "name", "SearchScopeAccess", "value", "Assigned", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-user-check"], ["type", "radio", "name", "SearchScopeAccess", "value", "None", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-ban"], [1, "fa-solid", "fa-magnifying-glass"], [1, "agent-search-grid-header"], ["ChildEntityName", "MJ: AI Agent Search Scopes", "ParentFieldName", "AgentID", "AddButtonLabel", "+ Assign another scope", "EmptyMessage", "No scopes assigned yet. Assign at least one if this agent will use Scoped Search.", 3, "RowsChanged", "ParentID", "Columns", "Disabled"], [1, "agent-search-section", 2, "margin-top", "16px"], [2, "margin", "0 0 8px 0"], [1, "fa-solid", "fa-shield-halved"], [1, "section-description", 2, "margin-bottom", "8px"], [2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-muted)", "font-style", "italic"], [2, "margin-bottom", "12px", "padding", "8px 12px", "background", "var(--mj-bg-surface-card)", "border", "1px solid var(--mj-border-subtle)", "border-radius", "4px"], [2, "font-weight", "600", "margin-bottom", "4px"], [2, "color", "var(--mj-text-muted)", "font-size", "0.9em"], [2, "margin", "4px 0 0 16px", "padding", "0"], [2, "font-size", "0.9em", "padding", "2px 0"], [1, "fa-solid", "fa-cogs"], ["TextField", "text", "ValueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["TextField", "Name", "ValueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "mjButton", "", "variant", "outline", "size", "sm", 1, "prompt-select-btn", 3, "click"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "Closed", "PermissionsChanged", "Agent"]], template: function MJAIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+        } }, 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, "agent-form-loading"], [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-sitemap"], [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"], [1, "fa-solid", "fa-play"], ["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"], ["text", "Loading agent...", "size", "medium"], [1, "agent-tabbar"], [1, "agent-pane", "agent-pane--designer", 3, "agent-pane--hidden"], [1, "form-content", "agent-pane"], ["id", "history", 3, "Expanded", "Disabled"], ["id", "actions", 3, "Expanded", "Disabled"], ["id", "subagents", 3, "Expanded", "Disabled"], ["id", "prompts", 3, "Expanded", "Disabled"], ["id", "learning", 3, "Expanded", "Disabled"], ["id", "notes", 3, "Expanded", "Disabled"], ["id", "search", 3, "Expanded"], ["id", "payload", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "panel-content"], [1, "section-header"], [1, "section-description"], [1, "payload-section"], [1, "payload-section-title"], [1, "fa-solid", "fa-target"], [1, "payload-field-container"], [1, "payload-field-info"], [1, "payload-field-label"], [1, "payload-field-description"], [1, "payload-field-input"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "payload-field-example"], [1, "fa-solid", "fa-lightbulb"], [1, "fa-solid", "fa-route"], [1, "payload-paths-grid"], [1, "payload-path-card"], [1, "payload-path-header"], [1, "payload-path-icon", "downstream"], [1, "fa-solid", "fa-arrow-down"], [1, "payload-path-info"], [1, "payload-path-content"], [1, "json-editor-container"], ["language", "json", 2, "height", "100px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "payload-path-hint"], [1, "fa-solid", "fa-info-circle"], [1, "payload-path-icon", "upstream"], [1, "fa-solid", "fa-arrow-up"], [1, "payload-path-icon", "self-read"], [1, "fa-solid", "fa-eye"], [1, "payload-path-icon", "self-write"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-shield-check"], [1, "payload-validation-container"], [1, "payload-validation-settings"], [1, "validation-field-group"], [1, "validation-field-label"], [1, "validation-field-description"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "", 2, "width", "100%", 3, "EditMode", "Record"], [1, "payload-validation-schema"], [1, "validation-schema-label"], [1, "fa-solid", "fa-code"], [1, "validation-schema-description"], [1, "validation-schema-editor"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], ["id", "guardrails", 3, "Expanded"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "Record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "Record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "Record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "Record"], ["id", "config", 3, "Expanded"], [1, "config-section"], [1, "config-section-title"], [1, "fa-solid", "fa-id-card"], [1, "config-grid"], [1, "config-card"], [1, "config-card-header"], [1, "config-card-icon"], [1, "fa-solid", "fa-toggle-on"], [1, "config-card-info"], [1, "config-card-content"], ["TextField", "text", "ValueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModel", "Data", "ValuePrimitive"], [1, "config-field-display"], ["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-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"], [3, "TabChange", "Tabs", "ActiveKey"], [1, "agent-pane", "agent-pane--designer"], ["size", "medium", 3, "text"], [1, "agent-pane", "agent-pane--invocations"], [3, "RecordOpenRequested", "Provider", "AgentID", "Active", "ExposeAsAction", "ParentAgentName", "ParentAgentID"], [1, "agent-pane", "agent-pane--rubrics"], [3, "Provider", "AgentID", "Active"], [1, "panel-content", "execution-history-panel"], ["role", "tablist", 1, "history-view-toggle"], [1, "fa-solid", "fa-history"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["type", "button", 1, "history-toggle-option", 3, "click"], [1, "fa-solid", "fa-person-running"], [1, "history-toggle-count"], [1, "fa-solid", "fa-tower-broadcast"], ["text", "Loading sessions...", "size", "medium"], ["Icon", "fa-solid fa-tower-broadcast", "Title", "No Voice Sessions", "Message", "This agent hasn't participated in any realtime voice sessions yet \u2014 neither as the co-agent nor as a delegation target.", "Size", "compact"], [1, "execution-history-list"], ["title", "Open session", 1, "execution-card", "session-card"], ["title", "Open session", 1, "execution-card", "session-card", 3, "click"], [1, "execution-header"], [1, "execution-left-section"], [1, "execution-status"], [1, "status-indicator"], [1, "execution-info"], [1, "execution-title"], [1, "session-role-chip"], [1, "session-role-chip", "session-role-chip--target"], [1, "execution-date"], [1, "execution-metrics"], [1, "metric-item"], [1, "session-status-pill"], [1, "fa-solid", "fa-stopwatch"], [1, "metric-label"], [1, "metric-value"], [1, "fa-solid", "fa-plug"], [1, "fa-solid", "fa-user"], [1, "execution-actions"], ["title", "View session details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-bullseye"], ["text", "Loading execution history...", "size", "medium"], ["Icon", "fa-solid fa-clock-rotate-left", "Title", "No Execution History", "Message", "This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.", "Size", "compact"], [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"], ["Variant", "no-results", "Title", "No Matching Results", "Size", "compact", 3, "Message"], [1, "execution-card", 3, "expanded"], [1, "pagination-controls"], [1, "execution-card"], [1, "execution-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], ["title", "View details", 1, "action-btn", 3, "click"], [1, "execution-expanded-content"], [1, "fa-solid", "fa-cog"], [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, "record-count"], [1, "loading-state"], [1, "header-actions"], ["mjButton", "", "variant", "primary", "size", "sm"], ["Icon", "fa-solid fa-bolt", "Title", "No Actions Configured", "Message", "Add actions to enable this agent to perform specific tasks and operations.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], [1, "entity-list"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["Icon", "fa-solid fa-bolt", "Title", "No Actions Configured", "Message", "Add actions to enable this agent to perform specific tasks and operations.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [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"], ["Icon", "fa-solid fa-sitemap", "Title", "No Sub-Agents", "Message", "Sub-agents help build complex workflows through hierarchical orchestration.", "Size", "compact"], ["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"], ["Icon", "fa-solid fa-comments", "Title", "No Prompts Configured", "Message", "Add prompts to define how this agent processes requests and generates responses.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], ["name", "modelSelectionMode", "TextField", "text", "ValueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["Icon", "fa-solid fa-comments", "Title", "No Prompts Configured", "Message", "Add prompts to define how this agent processes requests and generates responses.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [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"], ["Icon", "fa-solid fa-brain", "Title", "No Learning Cycles", "Message", "Learning cycles will appear here as the agent processes requests and improves over time.", "Size", "compact"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], ["Icon", "fa-solid fa-sticky-note", "Title", "No Notes", "Message", "Add notes to document important information, observations, or instructions for this agent.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "ActionText"], [1, "fa-solid", "fa-sticky-note"], ["Icon", "fa-solid fa-sticky-note", "Title", "No Notes", "Message", "Add notes to document important information, observations, or instructions for this agent.", "ActionIcon", "fa-solid fa-plus", "Size", "compact", 3, "Action", "ActionText"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "agent-search-access"], [1, "agent-search-access-option"], ["type", "radio", "name", "SearchScopeAccess", "value", "All", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-globe"], [1, "agent-search-access-text"], [1, "agent-search-access-title"], [1, "agent-search-access-desc"], ["type", "radio", "name", "SearchScopeAccess", "value", "Assigned", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-user-check"], ["type", "radio", "name", "SearchScopeAccess", "value", "None", 3, "change", "checked", "disabled"], [1, "fa-solid", "fa-ban"], [1, "fa-solid", "fa-magnifying-glass"], [1, "agent-search-grid-header"], ["ChildEntityName", "MJ: AI Agent Search Scopes", "ParentFieldName", "AgentID", "AddButtonLabel", "+ Assign another scope", "EmptyMessage", "No scopes assigned yet. Assign at least one if this agent will use Scoped Search.", 3, "RowsChanged", "ParentID", "Columns", "Disabled"], [1, "agent-search-section", 2, "margin-top", "16px"], [2, "margin", "0 0 8px 0"], [1, "fa-solid", "fa-shield-halved"], [1, "section-description", 2, "margin-bottom", "8px"], [2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-muted)", "font-style", "italic"], [2, "margin-bottom", "12px", "padding", "8px 12px", "background", "var(--mj-bg-surface-card)", "border", "1px solid var(--mj-border-subtle)", "border-radius", "4px"], [2, "font-weight", "600", "margin-bottom", "4px"], [2, "color", "var(--mj-text-muted)", "font-size", "0.9em"], [2, "margin", "4px 0 0 16px", "padding", "0"], [2, "font-size", "0.9em", "padding", "2px 0"], [1, "fa-solid", "fa-cogs"], ["TextField", "text", "ValueField", "value", "name", "agentStatus", 1, "config-field-input", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["TextField", "Name", "ValueField", "ID", "name", "agentTypeID", 1, "config-field-input", 3, "ngModelChange", "ngModel", "Data", "ValuePrimitive"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "Select a category...", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [1, "fa-solid", "fa-hashtag"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "fa-solid", "fa-save"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "", 3, "EditMode", "Record"], [1, "prompt-selector-container"], [1, "prompt-display"], [1, "prompt-name"], [1, "no-prompt"], [1, "prompt-actions"], ["type", "button", "mjButton", "", "variant", "outline", "size", "sm", 1, "prompt-select-btn", 3, "click"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn"], ["type", "button", "mjButton", "", "variant", "flat", "size", "sm", "title", "Clear selection", 1, "prompt-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [3, "Closed", "PermissionsChanged", "Agent"]], template: function MJAIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, MJAIAgentFormComponentExtended_Conditional_0_Template, 7, 7, "mj-record-form-container", 2);
             i0.ɵɵconditionalCreate(1, MJAIAgentFormComponentExtended_Conditional_1_Template, 1, 1, "mj-agent-permissions-dialog", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.record ? 0 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowPermissionsDialog ? 1 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJEmptyStateComponent, i2.MJTabNavComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDropdownComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, i4.CodeEditorComponent, i5.LoadingComponent, i6.AgentPermissionsDialogComponent, i6.AgentInvocationsComponent, i7.TreeDropdownComponent, i8.SearchScopeChildGridComponent, i9.DatePipe], styles: ["\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.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.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.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.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.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.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.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.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.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.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\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.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.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\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.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.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.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.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.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\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.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.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.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.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.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.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@media (max-width: 768px) {\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    .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    .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    .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    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    \n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\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.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.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.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.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.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@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        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.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.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.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.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.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.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.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@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.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.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.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.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.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\n@media (max-width: 768px) {\n    .sub-agent-filter-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .filter-controls[_ngcontent-%COMP%], \n   .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .empty-state-info[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n.agent-search-access[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n    margin: 8px 0 20px;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 24px 28px 1fr;\n    align-items: start;\n    gap: 10px;\n    padding: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    transition: background 120ms ease, border-color 120ms ease;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-search-access-option.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n    accent-color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    text-align: center;\n    margin-top: 2px;\n}\n\n.agent-search-access-text[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.agent-search-access-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.agent-search-access-desc[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    line-height: 1.3;\n}\n\n.agent-search-grid-header[_ngcontent-%COMP%] {\n    margin: 8px 0 12px;\n}\n\n.agent-search-grid-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n    font-size: 1rem;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n    .agent-search-access[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n.history-view-toggle[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 2px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 3px;\n    margin-bottom: 14px;\n}\n\n.history-toggle-option[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    padding: 6px 16px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.history-toggle-option[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.history-toggle-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 1px 7px;\n    border-radius: 10px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active[_ngcontent-%COMP%]   .history-toggle-count[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n\n.session-card[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.session-role-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    margin-left: 8px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 10.5px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.session-role-chip--target[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n    color: var(--mj-status-info);\n}\n\n.session-status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.session-status-pill[data-status=\"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    border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.session-status-pill[data-status=\"Idle\"][_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n\n\n\n\n\n\n.agent-tabbar[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    padding: 8px 12px 0;\n    background: var(--mj-bg-page);\n}\n\n.agent-pane[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.agent-pane--hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.agent-pane--designer[_ngcontent-%COMP%] {\n    overflow: hidden;\n    padding: 8px 12px 12px;\n    background: var(--mj-bg-page);\n}\n\n\n\n.agent-pane--designer[_ngcontent-%COMP%]    > ng-component[_ngcontent-%COMP%], \n.agent-pane--designer[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n.agent-pane--invocations[_ngcontent-%COMP%] {\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mj-bg-page);\n}\n\n\n\n\n.agent-form-loading[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 240px;\n    padding: 32px;\n    background: var(--mj-bg-page);\n}"] }); }
+        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.MJEmptyStateComponent, i2.MJTabNavComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDropdownComponent, i3.MjFormFieldComponent, i3.MjRecordFormContainerComponent, i4.CodeEditorComponent, i5.LoadingComponent, i6.AgentPermissionsDialogComponent, i6.AgentInvocationsComponent, i6.AgentRubricsComponent, i7.TreeDropdownComponent, i8.SearchScopeChildGridComponent, i9.DatePipe], styles: ["\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.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.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.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.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.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.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.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.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.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.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\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.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.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\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.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.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.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.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.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\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.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.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.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.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.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.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@media (max-width: 768px) {\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    .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    .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    .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    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    \n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\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.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.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.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.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.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@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        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.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.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.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.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.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.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.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@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.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.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.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.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.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\n@media (max-width: 768px) {\n    .sub-agent-filter-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .filter-controls[_ngcontent-%COMP%], \n   .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .empty-state-info[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n.agent-search-access[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n    margin: 8px 0 20px;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 24px 28px 1fr;\n    align-items: start;\n    gap: 10px;\n    padding: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    transition: background 120ms ease, border-color 120ms ease;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-search-access-option.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n    accent-color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.agent-search-access-option[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    text-align: center;\n    margin-top: 2px;\n}\n\n.agent-search-access-text[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.agent-search-access-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.agent-search-access-desc[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    line-height: 1.3;\n}\n\n.agent-search-grid-header[_ngcontent-%COMP%] {\n    margin: 8px 0 12px;\n}\n\n.agent-search-grid-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n    font-size: 1rem;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n    .agent-search-access[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n.history-view-toggle[_ngcontent-%COMP%] {\n    display: inline-flex;\n    gap: 2px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 3px;\n    margin-bottom: 14px;\n}\n\n.history-toggle-option[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    padding: 6px 16px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.history-toggle-option[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.history-toggle-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 1px 7px;\n    border-radius: 10px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active[_ngcontent-%COMP%]   .history-toggle-count[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n\n.session-card[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.session-role-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    margin-left: 8px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 10.5px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.session-role-chip--target[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n    color: var(--mj-status-info);\n}\n\n.session-status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.session-status-pill[data-status=\"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    border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.session-status-pill[data-status=\"Idle\"][_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n\n\n\n\n\n\n.agent-tabbar[_ngcontent-%COMP%] {\n    flex: 0 0 auto;\n    padding: 8px 12px 0;\n    background: var(--mj-bg-page);\n}\n\n.agent-pane[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.agent-pane--hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.agent-pane--designer[_ngcontent-%COMP%] {\n    overflow: hidden;\n    padding: 8px 12px 12px;\n    background: var(--mj-bg-page);\n}\n\n\n\n.agent-pane--designer[_ngcontent-%COMP%]    > ng-component[_ngcontent-%COMP%], \n.agent-pane--designer[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n}\n\n.agent-pane--invocations[_ngcontent-%COMP%] {\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mj-bg-page);\n}\n\n\n\n\n.agent-form-loading[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 240px;\n    padding: 32px;\n    background: var(--mj-bg-page);\n}"] }); }
 };
 MJAIAgentFormComponentExtended = MJAIAgentFormComponentExtended_1 = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: AI Agents')
@@ -5775,7 +5783,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: "@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      <!-- The tab strip and every pane depend on the agent's TYPE, which loads asynchronously.\n           Without this the form rendered its header over an empty area for the whole load \u2014\n           no tabs, no designer, and the details pane hidden because no tab was active yet. -->\n      @if (IsFormInitializing) {\n        <div class=\"agent-form-loading\">\n          <mj-loading text=\"Loading agent...\" size=\"medium\"></mj-loading>\n        </div>\n      } @else {\n        <!-- Tabs, not accordions. For an agent type that ships a designer, the diagram IS the agent;\n             leaving it as one collapsed panel among eleven made the record's most important view its\n             least reachable one. Invocations is offered for every agent, because \"what runs this when\n             I'm not looking?\" is a question you can ask of any of them. -->\n        @if (FormTabs.length > 1) {\n          <div class=\"agent-tabbar\">\n            <mj-tab-nav [Tabs]=\"FormTabs\" [ActiveKey]=\"ActiveFormTab || ''\" (TabChange)=\"OnFormTabChange($event)\"></mj-tab-nav>\n          </div>\n        }\n\n        @if (HasDesignerTab) {\n          <!-- Hidden with CSS rather than removed with @if: the designer holds UNSAVED edits, and\n               destroying it on a tab switch would discard them without a word. Keeping it mounted also\n               means the canvas keeps its zoom and node positions across trips to Details. -->\n          <div class=\"agent-pane agent-pane--designer\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'designer'\">\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        }\n\n        @if (record.ID) {\n          <div class=\"agent-pane agent-pane--invocations\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'invocations'\">\n            <mj-agent-invocations\n              [Provider]=\"Provider\"\n              [AgentID]=\"record.ID\"\n              [Active]=\"ActiveFormTab === 'invocations'\"\n              [ExposeAsAction]=\"record.ExposeAsAction\"\n              [ParentAgentName]=\"record.Parent\"\n              [ParentAgentID]=\"record.ParentID\"\n              (RecordOpenRequested)=\"OnInvocationOpenRequested($event)\">\n            </mj-agent-invocations>\n          </div>\n        }\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content agent-pane\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'details'\">\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><i class=\"fa-solid fa-spinner fa-spin\"></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                    <!-- Segmented toggle: agent runs vs. realtime voice sessions -->\n                    @if (UserCanViewSessions) {\n                      <div class=\"history-view-toggle\" role=\"tablist\">\n                        <button type=\"button\" class=\"history-toggle-option\"\n                          [class.active]=\"executionHistoryView === 'runs'\"\n                          (click)=\"setExecutionHistoryView('runs')\">\n                          <i class=\"fa-solid fa-person-running\"></i> Runs\n                          @if (totalExecutionHistoryCount > 0) {\n                            <span class=\"history-toggle-count\">{{ totalExecutionHistoryCount }}</span>\n                          }\n                        </button>\n                        <button type=\"button\" class=\"history-toggle-option\"\n                          [class.active]=\"executionHistoryView === 'sessions'\"\n                          (click)=\"setExecutionHistoryView('sessions')\">\n                          <i class=\"fa-solid fa-tower-broadcast\"></i> Sessions\n                          @if (totalSessionCount > 0) {\n                            <span class=\"history-toggle-count\">{{ totalSessionCount }}</span>\n                          }\n                        </button>\n                      </div>\n                    }\n                    @if (executionHistoryView === 'sessions') {\n                      <!-- Voice/realtime sessions list -->\n                      @if (loadingSessions) {\n                        <mj-loading text=\"Loading sessions...\" size=\"medium\"></mj-loading>\n                      } @else if (agentSessions.length === 0) {\n                        <mj-empty-state\n                          Icon=\"fa-solid fa-tower-broadcast\"\n                          Title=\"No Voice Sessions\"\n                          Message=\"This agent hasn't participated in any realtime voice sessions yet \u2014 neither as the co-agent nor as a delegation target.\"\n                          Size=\"compact\" />\n                      } @else {\n                        <div class=\"execution-history-list\">\n                          @for (item of agentSessions; track item.row.ID) {\n                            <div class=\"execution-card session-card\" (click)=\"openSessionRecord(item.row.ID)\" title=\"Open session\">\n                              <div class=\"execution-header\">\n                                <div class=\"execution-left-section\">\n                                  <div class=\"execution-status\">\n                                    <div class=\"status-indicator\" [style.background-color]=\"getSessionStatusColor(item.row.Status)\">\n                                      <i [class]=\"getSessionStatusIcon(item.row.Status)\"></i>\n                                    </div>\n                                    <div class=\"execution-info\">\n                                      <div class=\"execution-title\">\n                                        Session #{{ item.row.ID.substring(0, 8) }}\n                                        @if (item.isCoAgent) {\n                                          <span class=\"session-role-chip\">as co-agent</span>\n                                        }\n                                        @if (item.isTarget) {\n                                          <span class=\"session-role-chip session-role-chip--target\">as target</span>\n                                        }\n                                      </div>\n                                      <div class=\"execution-date\">{{ item.row.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n                                    </div>\n                                  </div>\n                                  <div class=\"execution-metrics\">\n                                    <div class=\"metric-item\">\n                                      <span class=\"session-status-pill\" [attr.data-status]=\"item.row.Status\">{{ item.row.Status }}</span>\n                                    </div>\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\">{{ formatSessionDuration(item) }}</span>\n                                    </div>\n                                    <div class=\"metric-item\">\n                                      <i class=\"fa-solid fa-plug\"></i>\n                                      <span class=\"metric-label\">Channels:</span>\n                                      <span class=\"metric-value\">{{ item.channelCount }}</span>\n                                    </div>\n                                    @if (item.isCoAgent && item.targetAgentName) {\n                                      <div class=\"metric-item\">\n                                        <i class=\"fa-solid fa-bullseye\"></i>\n                                        <span class=\"metric-label\">Target:</span>\n                                        <span class=\"metric-value\">{{ item.targetAgentName }}</span>\n                                      </div>\n                                    }\n                                    @if (item.isTarget && !item.isCoAgent && item.row.Agent) {\n                                      <div class=\"metric-item\">\n                                        <i class=\"fa-solid fa-tower-broadcast\"></i>\n                                        <span class=\"metric-label\">Co-agent:</span>\n                                        <span class=\"metric-value\">{{ item.row.Agent }}</span>\n                                      </div>\n                                    }\n                                    <div class=\"metric-item\">\n                                      <i class=\"fa-solid fa-user\"></i>\n                                      <span class=\"metric-label\">User:</span>\n                                      <span class=\"metric-value\">{{ item.row.User }}</span>\n                                    </div>\n                                  </div>\n                                </div>\n                                <div class=\"execution-actions\">\n                                  <button class=\"action-btn\" (click)=\"openSessionRecord(item.row.ID); $event.stopPropagation()\" title=\"View session details\">\n                                    <i class=\"fa-solid fa-external-link-alt\"></i>\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n                    } @else {\n                    @if (loadingStates.executionHistory) {\n                      <mj-loading text=\"Loading execution history...\" size=\"medium\"></mj-loading>\n                    } @else if (executionHistoryCount === 0) {\n                      <mj-empty-state\n                        Icon=\"fa-solid fa-clock-rotate-left\"\n                        Title=\"No Execution History\"\n                        Message=\"This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.\"\n                        Size=\"compact\" />\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                          <mj-empty-state\n                            Variant=\"no-results\"\n                            Title=\"No Matching Results\"\n                            [Message]=\"ExecutionSearchEmptyMessage\"\n                            Size=\"compact\" />\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                    }\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><i class=\"fa-solid fa-spinner fa-spin\"></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                        <mj-empty-state\n                          Icon=\"fa-solid fa-bolt\"\n                          Title=\"No Actions Configured\"\n                          Message=\"Add actions to enable this agent to perform specific tasks and operations.\"\n                          [ActionText]=\"(EditMode && UserCanCreateActions) ? 'Configure First Action' : ''\"\n                          ActionIcon=\"fa-solid fa-plus\"\n                          (Action)=\"configureActions()\"\n                          Size=\"compact\" />\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-sitemap\"\n                        Title=\"No Sub-Agents\"\n                        Message=\"Sub-agents help build complex workflows through hierarchical orchestration.\"\n                        Size=\"compact\">\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                      </mj-empty-state>\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-comments\"\n                        Title=\"No Prompts Configured\"\n                        Message=\"Add prompts to define how this agent processes requests and generates responses.\"\n                        [ActionText]=\"(EditMode && UserCanCreateNewPrompts) ? 'Create First Prompt' : ''\"\n                        ActionIcon=\"fa-solid fa-plus\"\n                        (Action)=\"addPrompt()\"\n                        Size=\"compact\" />\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-brain\"\n                        Title=\"No Learning Cycles\"\n                        Message=\"Learning cycles will appear here as the agent processes requests and improves over time.\"\n                        Size=\"compact\" />\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-sticky-note\"\n                        Title=\"No Notes\"\n                        Message=\"Add notes to document important information, observations, or instructions for this agent.\"\n                        [ActionText]=\"(EditMode && UserCanCreateNotes) ? 'Create First Note' : ''\"\n                        ActionIcon=\"fa-solid fa-plus\"\n                        (Action)=\"addNote()\"\n                        Size=\"compact\" />\n                    } @else {\n                      <div class=\"entity-list\">\n                        @for (note of agentNotes; track note.ID) {\n                          <div class=\"entity-item note-item\" (click)=\"navigateToEntity('MJ: AI Agent Notes', note.ID)\">\n                            <div class=\"item-icon\">\n                              <i class=\"fa-solid fa-sticky-note\"></i>\n                            </div>\n                            <div class=\"item-content\">\n                              <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                              @if (note.Note) {\n                                <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                              }\n                              <div class=\"item-meta\">\n                                @if (note.__mj_CreatedAt) {\n                                  <span class=\"meta-tag\">\n                                    <i class=\"fa-solid fa-calendar\"></i>\n                                    {{ note.__mj_CreatedAt | date:'short' }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                            <div class=\"item-actions\">\n                              <i class=\"fa-solid fa-external-link\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if (noteCount > agentNotes.length) {\n                          <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Notes', '')\">\n                            <span>View all {{ noteCount }} notes...</span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n              </mj-accordion-panel>\n            }\n            <!-- Search -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"search\"\n                [Expanded]=\"GetSectionExpanded('search', false)\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-magnifying-glass\"></i> Search\n                  </ng-template>\n                  <div class=\"panel-content\">\n                    <div class=\"section-header\">\n                      <div class=\"section-description\">\n                        Control this agent's access to <strong>Scoped Search</strong> and assign the scopes it can use for pre-execution RAG or agent-invoked search.\n                      </div>\n                    </div>\n\n                    <!-- Scope Access mode -->\n                    <div class=\"agent-search-access\">\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'All'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"All\" [checked]=\"record.SearchScopeAccess === 'All'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'All'\">\n                        <i class=\"fa-solid fa-globe\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">All</div>\n                          <div class=\"agent-search-access-desc\">Can use any scope including Global. No scope restriction.</div>\n                        </div>\n                      </label>\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'Assigned'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"Assigned\" [checked]=\"record.SearchScopeAccess === 'Assigned'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'Assigned'\">\n                        <i class=\"fa-solid fa-user-check\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">Assigned</div>\n                          <div class=\"agent-search-access-desc\">Can use ONLY scopes listed below. Other scopes are rejected with ACCESS_DENIED.</div>\n                        </div>\n                      </label>\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'None'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"None\" [checked]=\"record.SearchScopeAccess === 'None'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'None'\">\n                        <i class=\"fa-solid fa-ban\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">None</div>\n                          <div class=\"agent-search-access-desc\">No search capability. The Scoped Search action is disabled for this agent.</div>\n                        </div>\n                      </label>\n                    </div>\n\n                    <!-- Assigned scopes grid -->\n                    @if (record.SearchScopeAccess !== 'None') {\n                      <div class=\"agent-search-grid-header\">\n                        <h4>Assigned Scopes</h4>\n                        <p class=\"section-description\">\n                          <strong>Pre-Execution</strong> scopes are injected automatically before the first LLM call.\n                          <strong>Agent-Invoked</strong> scopes are callable via the Scoped Search tool during execution.\n                          <strong>Both</strong> covers both paths.\n                        </p>\n                      </div>\n                      <mj-search-scope-child-grid\n                        [ParentID]=\"record.ID\"\n                        ChildEntityName=\"MJ: AI Agent Search Scopes\"\n                        ParentFieldName=\"AgentID\"\n                        [Columns]=\"AgentSearchScopeColumns\"\n                        [Disabled]=\"!EditMode\"\n                        AddButtonLabel=\"+ Assign another scope\"\n                        EmptyMessage=\"No scopes assigned yet. Assign at least one if this agent will use Scoped Search.\"\n                        (RowsChanged)=\"LoadPermissionSummary()\">\n                      </mj-search-scope-child-grid>\n\n                      <!-- Phase 2A: read-only audit summary of who has\n                           permission on each of this agent's assigned scopes.\n                           Editing happens in the Knowledge Hub Config dashboard\n                           (see \"Permissions\" subtab under Search Scopes). -->\n                      <div class=\"agent-search-section\" style=\"margin-top: 16px;\">\n                        <h4 style=\"margin: 0 0 8px 0;\">\n                          <i class=\"fa-solid fa-shield-halved\"></i> Effective scope permissions\n                        </h4>\n                        <p class=\"section-description\" style=\"margin-bottom: 8px;\">\n                          Per-user / per-role grants on the scopes assigned above. Edit grants in\n                          <strong>Knowledge Hub Config &rarr; Search Scopes &rarr; Permissions</strong>.\n                        </p>\n                        @if (IsLoadingPermissions) {\n                          <div style=\"color: var(--mj-text-muted);\">Loading permissions&hellip;</div>\n                        } @else if (PermissionSummary.length === 0) {\n                          <div style=\"color: var(--mj-text-muted); font-style: italic;\">\n                            No scopes assigned yet \u2014 permissions will appear here once you add scopes above.\n                          </div>\n                        } @else {\n                          @for (s of PermissionSummary; track s.ScopeID) {\n                            <div style=\"margin-bottom: 12px; padding: 8px 12px; background: var(--mj-bg-surface-card); border: 1px solid var(--mj-border-subtle); border-radius: 4px;\">\n                              <div style=\"font-weight: 600; margin-bottom: 4px;\">{{ s.ScopeName }}</div>\n                              @if (s.Permissions.length === 0) {\n                                <div style=\"color: var(--mj-text-muted); font-size: 0.9em;\">\n                                  No explicit permissions. Access falls back to this agent's <code>SearchScopeAccess</code> setting.\n                                </div>\n                              } @else {\n                                <ul style=\"margin: 4px 0 0 16px; padding: 0;\">\n                                  @for (p of s.Permissions; track p.Principal + p.Level) {\n                                    <li style=\"font-size: 0.9em; padding: 2px 0;\">\n                                      <i class=\"fa-solid\" [class.fa-user]=\"p.PrincipalType === 'User'\" [class.fa-users]=\"p.PrincipalType === 'Role'\"></i>\n                                      <strong>{{ p.Principal }}</strong>\n                                      <span style=\"color: var(--mj-text-muted);\">({{ p.PrincipalType }})</span>\n                                      &mdash; <span [style.color]=\"p.Level === 'None' ? 'var(--mj-status-error-text)' : 'var(--mj-text-primary)'\">{{ p.Level }}</span>\n                                    </li>\n                                  }\n                                </ul>\n                              }\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n              </mj-accordion-panel>\n            }\n            <!-- Payload -->\n            <mj-accordion-panel id=\"payload\"\n              [Expanded]=\"GetSectionExpanded('payload', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n                </ng-template>\n                <div class=\"panel-content\">\n                  <div class=\"section-header\">\n                    <div class=\"section-description\">\n                      Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n                    </div>\n                  </div>\n                  <!-- Payload Scope Section -->\n                  <div class=\"payload-section\">\n                    <h3 class=\"payload-section-title\">\n                      <i class=\"fa-solid fa-target\"></i>\n                      Payload Scope\n                    </h3>\n                    <div class=\"payload-field-container\">\n                      <div class=\"payload-field-info\">\n                        <label class=\"payload-field-label\">Payload Scope Path</label>\n                        <p class=\"payload-field-description\">\n                          Specify a path within the parent payload that this sub-agent should operate on.\n                          Leave empty to receive the entire payload.\n                        </p>\n                      </div>\n                      <div class=\"payload-field-input\">\n                        <mj-form-field\n                          FieldName=\"PayloadScope\"\n                          Type=\"textbox\"\n                          Caption=\"\"\n                          [EditMode]=\"EditMode\"\n                          [Record]=\"record\"\n                          style=\"width: 100%;\">\n                        </mj-form-field>\n                        <div class=\"payload-field-example\">\n                          <i class=\"fa-solid fa-lightbulb\"></i>\n                          <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Path Configuration Section -->\n                  <div class=\"payload-section\">\n                    <h3 class=\"payload-section-title\">\n                      <i class=\"fa-solid fa-route\"></i>\n                      Path Configuration\n                    </h3>\n                    <div class=\"payload-paths-grid\">\n                      <!-- Downstream Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon downstream\">\n                            <i class=\"fa-solid fa-arrow-down\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Downstream Paths</h4>\n                            <p>JSON array of paths to pass to sub-agents</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadDownstreamPaths || '[&quot;*&quot;]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n                          </div>\n                        </div>\n                      </div>\n                      <!-- Upstream Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon upstream\">\n                            <i class=\"fa-solid fa-arrow-up\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Upstream Paths</h4>\n                            <p>JSON array of paths sub-agents can write back</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadUpstreamPaths || '[&quot;*&quot;]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n                          </div>\n                        </div>\n                      </div>\n                      <!-- Self Read Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon self-read\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Self Read Paths</h4>\n                            <p>JSON array of paths this agent can read</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadSelfReadPaths || '[]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Paths this agent's prompts can read from the payload\n                          </div>\n                        </div>\n                      </div>\n                      <!-- Self Write Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon self-write\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Self Write Paths</h4>\n                            <p>JSON array of paths this agent can write to</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadSelfWritePaths || '[]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Paths this agent's prompts can write back to the payload\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Validation Section -->\n                  <div class=\"payload-section\">\n                    <h3 class=\"payload-section-title\">\n                      <i class=\"fa-solid fa-shield-check\"></i>\n                      Final Payload Validation\n                    </h3>\n                    <div class=\"payload-validation-container\">\n                      <div class=\"payload-validation-settings\">\n                        <div class=\"validation-field-group\">\n                          <label class=\"validation-field-label\">Validation Mode</label>\n                          <p class=\"validation-field-description\">How to handle validation failures</p>\n                          <mj-form-field\n                            FieldName=\"FinalPayloadValidationMode\"\n                            Type=\"dropdownlist\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            style=\"width: 100%;\">\n                          </mj-form-field>\n                        </div>\n                        <div class=\"validation-field-group\">\n                          <label class=\"validation-field-label\">Max Retries</label>\n                          <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n                          <mj-form-field\n                            FieldName=\"FinalPayloadValidationMaxRetries\"\n                            Type=\"numerictextbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            style=\"width: 100%;\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"payload-validation-schema\">\n                        <label class=\"validation-schema-label\">\n                          <i class=\"fa-solid fa-code\"></i>\n                          Validation Schema\n                        </label>\n                        <p class=\"validation-schema-description\">\n                          JSON schema or validation rules for the final payload structure\n                        </p>\n                        <div class=\"validation-schema-editor\">\n                          <mj-code-editor\n                            [value]=\"record.FinalPayloadValidation || '{}'\"\n                            [readonly]=\"!EditMode\"\n                            language=\"json\"\n                            [lineWrapping]=\"true\"\n                            style=\"height: 200px; width: 100%;\"\n                            (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n                          </mj-code-editor>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n            </mj-accordion-panel>\n            <!-- Execution Guardrails (New Separate Panel) -->\n            <mj-accordion-panel id=\"guardrails\"\n              [Expanded]=\"GetSectionExpanded('guardrails', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n                </ng-template>\n                <div class=\"panel-content\">\n                  <div class=\"section-header\">\n                    <div class=\"section-description\">\n                      Set limits to prevent runaway agent executions and control resource usage.\n                    </div>\n                  </div>\n                  <div class=\"form-fields-grid\">\n                    <mj-form-field\n                      FieldName=\"MaxCostPerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Cost ($)\"\n                      Description=\"Maximum cost per run\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                    <mj-form-field\n                      FieldName=\"MaxTokensPerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Tokens\"\n                      Description=\"Maximum tokens per run\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                    <mj-form-field\n                      FieldName=\"MaxIterationsPerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Iterations\"\n                      Description=\"Maximum prompt iterations\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                    <mj-form-field\n                      FieldName=\"MaxTimePerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Time (seconds)\"\n                      Description=\"Maximum execution time\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                  </div>\n                </div>\n            </mj-accordion-panel>\n            <!-- Configuration (Settings Panel) -->\n            <mj-accordion-panel id=\"config\"\n              [Expanded]=\"GetSectionExpanded('config', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-cogs\"></i> Configuration\n                </ng-template>\n                <div class=\"panel-content\">\n                  <div class=\"section-header\">\n                    <div class=\"section-description\">\n                      Configure agent behavior, execution settings, and advanced features.\n                    </div>\n                  </div>\n                  <!-- Identity & Behavior Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-id-card\"></i>\n                      Identity & Behavior\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-toggle-on\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Agent Status</h4>\n                            <p>Current availability and operational status</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          @if (EditMode) {\n                            <mj-dropdown\n                              [(ngModel)]=\"record.Status\"\n                              [Data]=\"statusOptions\"\n                              TextField=\"text\"\n                              ValueField=\"value\"\n                              [ValuePrimitive]=\"true\"\n                              name=\"agentStatus\"\n                              class=\"config-field-input\">\n                            </mj-dropdown>\n                          } @else {\n                            <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-sitemap\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Agent Type</h4>\n                            <p>Category and system-level behavior</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          @if (EditMode) {\n                            <mj-dropdown\n                              [(ngModel)]=\"record.TypeID\"\n                              [Data]=\"agentTypes\"\n                              TextField=\"Name\"\n                              ValueField=\"ID\"\n                              [ValuePrimitive]=\"true\"\n                              name=\"agentTypeID\"\n                              class=\"config-field-input\">\n                            </mj-dropdown>\n                          } @else {\n                            <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-folder-tree\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Category</h4>\n                            <p>Organizational category for this agent</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          @if (EditMode) {\n                            <mj-tree-dropdown\n                              [BranchConfig]=\"CategoryBranchConfig\"\n                              [Value]=\"SelectedCategoryKey\"\n                              SelectionMode=\"single\"\n                              SelectableTypes=\"branch\"\n                              Placeholder=\"Select a category...\"\n                              [Clearable]=\"true\"\n                              [EnableSearch]=\"true\"\n                              (ValueChange)=\"OnCategoryChange($event)\">\n                            </mj-tree-dropdown>\n                          } @else {\n                            <span class=\"config-field-display\">{{ record.Category || 'Not Set' }}</span>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-bolt\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Expose as Action</h4>\n                            <p>Make available as an action for other agents</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"ExposeAsAction\"\n                            Type=\"checkbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"config-card full-width\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-align-left\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Description</h4>\n                            <p>Detailed agent description and purpose</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"Description\"\n                            Type=\"textarea\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            style=\"width: 100%;\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Execution Settings Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-play\"></i>\n                      Execution Settings\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-layer-group\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Execution Mode</h4>\n                            <p>How sub-agents are executed</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"ExecutionMode\"\n                            Type=\"dropdownlist\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-sort-numeric-down\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Execution Order</h4>\n                            <p>Order when run with siblings</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"ExecutionOrder\"\n                            Type=\"numerictextbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-tachometer-alt\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Default Effort Level</h4>\n                            <p>Default effort level for all prompts (1-100)</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"DefaultPromptEffortLevel\"\n                            Type=\"numerictextbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                          <div class=\"config-card-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Higher values request more thorough reasoning (1=minimal, 100=maximum)\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-code\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Driver Class</h4>\n                            <p>Custom implementation class</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"DriverClass\"\n                            Type=\"textbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Visual Identity Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-palette\"></i>\n                      Visual Identity\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-icons\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Icon Class</h4>\n                            <p>Font Awesome icon class</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"IconClass\"\n                            Type=\"textbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                          <div class=\"config-card-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Example: <code>fa-solid fa-robot</code>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-image\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Logo URL</h4>\n                            <p>URL for agent logo image</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"LogoURL\"\n                            Type=\"textbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                          <div class=\"config-card-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Takes precedence over Icon Class\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Context Compression Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-compress\"></i>\n                      Context Compression\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card full-width\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-toggle-on\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Enable Context Compression</h4>\n                            <p>Automatically compress conversation context when message threshold is reached</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"EnableContextCompression\"\n                            Type=\"checkbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            (valueChange)=\"onContextCompressionToggle($event)\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      @if (record.EnableContextCompression) {\n                        <div class=\"config-card\">\n                          <div class=\"config-card-header\">\n                            <div class=\"config-card-icon\">\n                              <i class=\"fa-solid fa-hashtag\"></i>\n                            </div>\n                            <div class=\"config-card-info\">\n                              <h4>Message Threshold</h4>\n                              <p>Messages before compression triggers</p>\n                            </div>\n                          </div>\n                          <div class=\"config-card-content\">\n                            <mj-form-field\n                              FieldName=\"ContextCompressionMessageThreshold\"\n                              Type=\"numerictextbox\"\n                              Caption=\"\"\n                              [EditMode]=\"EditMode\"\n                              [Record]=\"record\">\n                            </mj-form-field>\n                          </div>\n                        </div>\n                        <div class=\"config-card\">\n                          <div class=\"config-card-header\">\n                            <div class=\"config-card-icon\">\n                              <i class=\"fa-solid fa-save\"></i>\n                            </div>\n                            <div class=\"config-card-info\">\n                              <h4>Messages to Keep</h4>\n                              <p>Recent messages to retain uncompressed</p>\n                            </div>\n                          </div>\n                          <div class=\"config-card-content\">\n                            <mj-form-field\n                              FieldName=\"ContextCompressionMessageRetentionCount\"\n                              Type=\"numerictextbox\"\n                              Caption=\"\"\n                              [EditMode]=\"EditMode\"\n                              [Record]=\"record\">\n                            </mj-form-field>\n                          </div>\n                        </div>\n                        <div class=\"config-card\">\n                          <div class=\"config-card-header\">\n                            <div class=\"config-card-icon\">\n                              <i class=\"fa-solid fa-comment-dots\"></i>\n                            </div>\n                            <div class=\"config-card-info\">\n                              <h4>Compression Prompt</h4>\n                              <p>Prompt used for summarization</p>\n                            </div>\n                          </div>\n                          <div class=\"config-card-content\">\n                            @if (EditMode) {\n                              <div class=\"prompt-selector-container\">\n                                <div class=\"prompt-display\">\n                                  @if (selectedContextCompressionPrompt) {\n                                    <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n                                  } @else {\n                                    <span class=\"no-prompt\">No prompt selected</span>\n                                  }\n                                </div>\n                                <div class=\"prompt-actions\">\n                                  <button type=\"button\"\n                                    mjButton\n                                    variant=\"outline\"\n                                    size=\"sm\"\n                                    (click)=\"openContextCompressionPromptSelector()\"\n                                    class=\"prompt-select-btn\">\n                                    <i class=\"fa-solid fa-search\"></i>\n                                    {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n                                  </button>\n                                  @if (selectedContextCompressionPrompt) {\n                                    <button type=\"button\"\n                                      mjButton\n                                      variant=\"flat\"\n                                      size=\"sm\"\n                                      (click)=\"clearContextCompressionPrompt()\"\n                                      class=\"prompt-clear-btn\"\n                                      title=\"Clear selection\">\n                                      <i class=\"fa-solid fa-times\"></i>\n                                    </button>\n                                  }\n                                </div>\n                              </div>\n                            } @else {\n                              <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n            </mj-accordion-panel>\n        </div>\n      }\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/* 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/* 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/* 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/* Responsive adjustments for sub-agent filters */\n@media (max-width: 768px) {\n    .sub-agent-filter-header {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .filter-controls,\n    .header-actions {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .empty-state-info {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* ===== Search Scope Access (mockup #5) ===== */\n.agent-search-access {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n    margin: 8px 0 20px;\n}\n\n.agent-search-access-option {\n    display: grid;\n    grid-template-columns: 24px 28px 1fr;\n    align-items: start;\n    gap: 10px;\n    padding: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    transition: background 120ms ease, border-color 120ms ease;\n}\n\n.agent-search-access-option:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-search-access-option.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-search-access-option input[type=\"radio\"] {\n    accent-color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.agent-search-access-option > i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    text-align: center;\n    margin-top: 2px;\n}\n\n.agent-search-access-text {\n    min-width: 0;\n}\n\n.agent-search-access-title {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.agent-search-access-desc {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    line-height: 1.3;\n}\n\n.agent-search-grid-header {\n    margin: 8px 0 12px;\n}\n\n.agent-search-grid-header h4 {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n    font-size: 1rem;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n    .agent-search-access {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* \u2500\u2500 Execution History: Runs | Sessions segmented toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.history-view-toggle {\n    display: inline-flex;\n    gap: 2px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 3px;\n    margin-bottom: 14px;\n}\n\n.history-toggle-option {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    padding: 6px 16px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.history-toggle-option:hover {\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.history-toggle-count {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 1px 7px;\n    border-radius: 10px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active .history-toggle-count {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500 Voice session rows in Execution History \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.session-card {\n    cursor: pointer;\n}\n\n.session-role-chip {\n    display: inline-flex;\n    align-items: center;\n    margin-left: 8px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 10.5px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.session-role-chip--target {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n    color: var(--mj-status-info);\n}\n\n.session-status-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.session-status-pill[data-status=\"Active\"] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.session-status-pill[data-status=\"Idle\"] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n/* \u2500\u2500 Form tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Panes are hidden with `display: none`, never removed from the DOM. The\n   designer pane holds UNSAVED canvas edits; @if-ing it away on a tab switch\n   would discard them silently, and would also throw away the canvas's zoom and\n   node positions on every trip to Details. */\n\n.agent-tabbar {\n    flex: 0 0 auto;\n    padding: 8px 12px 0;\n    background: var(--mj-bg-page);\n}\n\n.agent-pane {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.agent-pane--hidden {\n    display: none;\n}\n\n.agent-pane--designer {\n    overflow: hidden;\n    padding: 8px 12px 12px;\n    background: var(--mj-bg-page);\n}\n\n/* The designer's dynamically-created section has no height of its own, so without\n   this the flow canvas collapses to zero and renders as an empty strip. */\n.agent-pane--designer > ng-component,\n.agent-pane--designer > * {\n    flex: 1;\n    min-height: 0;\n}\n\n.agent-pane--invocations {\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mj-bg-page);\n}\n\n/* Initial load: the form's header renders as soon as the record arrives, but the tab strip and\n   every pane wait on the agent TYPE. This fills that window so the page reads as loading rather\n   than as broken. */\n.agent-form-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 240px;\n    padding: 32px;\n    background: var(--mj-bg-page);\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      <!-- The tab strip and every pane depend on the agent's TYPE, which loads asynchronously.\n           Without this the form rendered its header over an empty area for the whole load \u2014\n           no tabs, no designer, and the details pane hidden because no tab was active yet. -->\n      @if (IsFormInitializing) {\n        <div class=\"agent-form-loading\">\n          <mj-loading text=\"Loading agent...\" size=\"medium\"></mj-loading>\n        </div>\n      } @else {\n        <!-- Tabs, not accordions. For an agent type that ships a designer, the diagram IS the agent;\n             leaving it as one collapsed panel among eleven made the record's most important view its\n             least reachable one. Invocations is offered for every agent, because \"what runs this when\n             I'm not looking?\" is a question you can ask of any of them. -->\n        @if (FormTabs.length > 1) {\n          <div class=\"agent-tabbar\">\n            <mj-tab-nav [Tabs]=\"FormTabs\" [ActiveKey]=\"ActiveFormTab || ''\" (TabChange)=\"OnFormTabChange($event)\"></mj-tab-nav>\n          </div>\n        }\n\n        @if (HasDesignerTab) {\n          <!-- Hidden with CSS rather than removed with @if: the designer holds UNSAVED edits, and\n               destroying it on a tab switch would discard them without a word. Keeping it mounted also\n               means the canvas keeps its zoom and node positions across trips to Details. -->\n          <div class=\"agent-pane agent-pane--designer\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'designer'\">\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        }\n\n        @if (record.ID) {\n          <div class=\"agent-pane agent-pane--invocations\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'invocations'\">\n            <mj-agent-invocations\n              [Provider]=\"Provider\"\n              [AgentID]=\"record.ID\"\n              [Active]=\"ActiveFormTab === 'invocations'\"\n              [ExposeAsAction]=\"record.ExposeAsAction\"\n              [ParentAgentName]=\"record.Parent\"\n              [ParentAgentID]=\"record.ParentID\"\n              (RecordOpenRequested)=\"OnInvocationOpenRequested($event)\">\n            </mj-agent-invocations>\n          </div>\n          <div class=\"agent-pane agent-pane--rubrics\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'rubrics'\">\n            <mj-agent-rubrics\n              [Provider]=\"Provider\"\n              [AgentID]=\"record.ID\"\n              [Active]=\"ActiveFormTab === 'rubrics'\">\n            </mj-agent-rubrics>\n          </div>\n        }\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content agent-pane\" [class.agent-pane--hidden]=\"ActiveFormTab !== 'details'\">\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><i class=\"fa-solid fa-spinner fa-spin\"></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                    <!-- Segmented toggle: agent runs vs. realtime voice sessions -->\n                    @if (UserCanViewSessions) {\n                      <div class=\"history-view-toggle\" role=\"tablist\">\n                        <button type=\"button\" class=\"history-toggle-option\"\n                          [class.active]=\"executionHistoryView === 'runs'\"\n                          (click)=\"setExecutionHistoryView('runs')\">\n                          <i class=\"fa-solid fa-person-running\"></i> Runs\n                          @if (totalExecutionHistoryCount > 0) {\n                            <span class=\"history-toggle-count\">{{ totalExecutionHistoryCount }}</span>\n                          }\n                        </button>\n                        <button type=\"button\" class=\"history-toggle-option\"\n                          [class.active]=\"executionHistoryView === 'sessions'\"\n                          (click)=\"setExecutionHistoryView('sessions')\">\n                          <i class=\"fa-solid fa-tower-broadcast\"></i> Sessions\n                          @if (totalSessionCount > 0) {\n                            <span class=\"history-toggle-count\">{{ totalSessionCount }}</span>\n                          }\n                        </button>\n                      </div>\n                    }\n                    @if (executionHistoryView === 'sessions') {\n                      <!-- Voice/realtime sessions list -->\n                      @if (loadingSessions) {\n                        <mj-loading text=\"Loading sessions...\" size=\"medium\"></mj-loading>\n                      } @else if (agentSessions.length === 0) {\n                        <mj-empty-state\n                          Icon=\"fa-solid fa-tower-broadcast\"\n                          Title=\"No Voice Sessions\"\n                          Message=\"This agent hasn't participated in any realtime voice sessions yet \u2014 neither as the co-agent nor as a delegation target.\"\n                          Size=\"compact\" />\n                      } @else {\n                        <div class=\"execution-history-list\">\n                          @for (item of agentSessions; track item.row.ID) {\n                            <div class=\"execution-card session-card\" (click)=\"openSessionRecord(item.row.ID)\" title=\"Open session\">\n                              <div class=\"execution-header\">\n                                <div class=\"execution-left-section\">\n                                  <div class=\"execution-status\">\n                                    <div class=\"status-indicator\" [style.background-color]=\"getSessionStatusColor(item.row.Status)\">\n                                      <i [class]=\"getSessionStatusIcon(item.row.Status)\"></i>\n                                    </div>\n                                    <div class=\"execution-info\">\n                                      <div class=\"execution-title\">\n                                        Session #{{ item.row.ID.substring(0, 8) }}\n                                        @if (item.isCoAgent) {\n                                          <span class=\"session-role-chip\">as co-agent</span>\n                                        }\n                                        @if (item.isTarget) {\n                                          <span class=\"session-role-chip session-role-chip--target\">as target</span>\n                                        }\n                                      </div>\n                                      <div class=\"execution-date\">{{ item.row.__mj_CreatedAt | date:'MMM d, h:mm a' }}</div>\n                                    </div>\n                                  </div>\n                                  <div class=\"execution-metrics\">\n                                    <div class=\"metric-item\">\n                                      <span class=\"session-status-pill\" [attr.data-status]=\"item.row.Status\">{{ item.row.Status }}</span>\n                                    </div>\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\">{{ formatSessionDuration(item) }}</span>\n                                    </div>\n                                    <div class=\"metric-item\">\n                                      <i class=\"fa-solid fa-plug\"></i>\n                                      <span class=\"metric-label\">Channels:</span>\n                                      <span class=\"metric-value\">{{ item.channelCount }}</span>\n                                    </div>\n                                    @if (item.isCoAgent && item.targetAgentName) {\n                                      <div class=\"metric-item\">\n                                        <i class=\"fa-solid fa-bullseye\"></i>\n                                        <span class=\"metric-label\">Target:</span>\n                                        <span class=\"metric-value\">{{ item.targetAgentName }}</span>\n                                      </div>\n                                    }\n                                    @if (item.isTarget && !item.isCoAgent && item.row.Agent) {\n                                      <div class=\"metric-item\">\n                                        <i class=\"fa-solid fa-tower-broadcast\"></i>\n                                        <span class=\"metric-label\">Co-agent:</span>\n                                        <span class=\"metric-value\">{{ item.row.Agent }}</span>\n                                      </div>\n                                    }\n                                    <div class=\"metric-item\">\n                                      <i class=\"fa-solid fa-user\"></i>\n                                      <span class=\"metric-label\">User:</span>\n                                      <span class=\"metric-value\">{{ item.row.User }}</span>\n                                    </div>\n                                  </div>\n                                </div>\n                                <div class=\"execution-actions\">\n                                  <button class=\"action-btn\" (click)=\"openSessionRecord(item.row.ID); $event.stopPropagation()\" title=\"View session details\">\n                                    <i class=\"fa-solid fa-external-link-alt\"></i>\n                                  </button>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      }\n                    } @else {\n                    @if (loadingStates.executionHistory) {\n                      <mj-loading text=\"Loading execution history...\" size=\"medium\"></mj-loading>\n                    } @else if (executionHistoryCount === 0) {\n                      <mj-empty-state\n                        Icon=\"fa-solid fa-clock-rotate-left\"\n                        Title=\"No Execution History\"\n                        Message=\"This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.\"\n                        Size=\"compact\" />\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                          <mj-empty-state\n                            Variant=\"no-results\"\n                            Title=\"No Matching Results\"\n                            [Message]=\"ExecutionSearchEmptyMessage\"\n                            Size=\"compact\" />\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                    }\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><i class=\"fa-solid fa-spinner fa-spin\"></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                        <mj-empty-state\n                          Icon=\"fa-solid fa-bolt\"\n                          Title=\"No Actions Configured\"\n                          Message=\"Add actions to enable this agent to perform specific tasks and operations.\"\n                          [ActionText]=\"(EditMode && UserCanCreateActions) ? 'Configure First Action' : ''\"\n                          ActionIcon=\"fa-solid fa-plus\"\n                          (Action)=\"configureActions()\"\n                          Size=\"compact\" />\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-sitemap\"\n                        Title=\"No Sub-Agents\"\n                        Message=\"Sub-agents help build complex workflows through hierarchical orchestration.\"\n                        Size=\"compact\">\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                      </mj-empty-state>\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-comments\"\n                        Title=\"No Prompts Configured\"\n                        Message=\"Add prompts to define how this agent processes requests and generates responses.\"\n                        [ActionText]=\"(EditMode && UserCanCreateNewPrompts) ? 'Create First Prompt' : ''\"\n                        ActionIcon=\"fa-solid fa-plus\"\n                        (Action)=\"addPrompt()\"\n                        Size=\"compact\" />\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-brain\"\n                        Title=\"No Learning Cycles\"\n                        Message=\"Learning cycles will appear here as the agent processes requests and improves over time.\"\n                        Size=\"compact\" />\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><i class=\"fa-solid fa-spinner fa-spin\"></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                      <mj-empty-state\n                        Icon=\"fa-solid fa-sticky-note\"\n                        Title=\"No Notes\"\n                        Message=\"Add notes to document important information, observations, or instructions for this agent.\"\n                        [ActionText]=\"(EditMode && UserCanCreateNotes) ? 'Create First Note' : ''\"\n                        ActionIcon=\"fa-solid fa-plus\"\n                        (Action)=\"addNote()\"\n                        Size=\"compact\" />\n                    } @else {\n                      <div class=\"entity-list\">\n                        @for (note of agentNotes; track note.ID) {\n                          <div class=\"entity-item note-item\" (click)=\"navigateToEntity('MJ: AI Agent Notes', note.ID)\">\n                            <div class=\"item-icon\">\n                              <i class=\"fa-solid fa-sticky-note\"></i>\n                            </div>\n                            <div class=\"item-content\">\n                              <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                              @if (note.Note) {\n                                <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                              }\n                              <div class=\"item-meta\">\n                                @if (note.__mj_CreatedAt) {\n                                  <span class=\"meta-tag\">\n                                    <i class=\"fa-solid fa-calendar\"></i>\n                                    {{ note.__mj_CreatedAt | date:'short' }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                            <div class=\"item-actions\">\n                              <i class=\"fa-solid fa-external-link\"></i>\n                            </div>\n                          </div>\n                        }\n                        @if (noteCount > agentNotes.length) {\n                          <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: AI Agent Notes', '')\">\n                            <span>View all {{ noteCount }} notes...</span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n              </mj-accordion-panel>\n            }\n            <!-- Search -->\n            @if (record.ID) {\n              <mj-accordion-panel id=\"search\"\n                [Expanded]=\"GetSectionExpanded('search', false)\">\n                  <ng-template mjAccordionTitle>\n                      <i class=\"fa-solid fa-magnifying-glass\"></i> Search\n                  </ng-template>\n                  <div class=\"panel-content\">\n                    <div class=\"section-header\">\n                      <div class=\"section-description\">\n                        Control this agent's access to <strong>Scoped Search</strong> and assign the scopes it can use for pre-execution RAG or agent-invoked search.\n                      </div>\n                    </div>\n\n                    <!-- Scope Access mode -->\n                    <div class=\"agent-search-access\">\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'All'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"All\" [checked]=\"record.SearchScopeAccess === 'All'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'All'\">\n                        <i class=\"fa-solid fa-globe\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">All</div>\n                          <div class=\"agent-search-access-desc\">Can use any scope including Global. No scope restriction.</div>\n                        </div>\n                      </label>\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'Assigned'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"Assigned\" [checked]=\"record.SearchScopeAccess === 'Assigned'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'Assigned'\">\n                        <i class=\"fa-solid fa-user-check\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">Assigned</div>\n                          <div class=\"agent-search-access-desc\">Can use ONLY scopes listed below. Other scopes are rejected with ACCESS_DENIED.</div>\n                        </div>\n                      </label>\n                      <label class=\"agent-search-access-option\" [class.active]=\"record.SearchScopeAccess === 'None'\">\n                        <input type=\"radio\" name=\"SearchScopeAccess\" value=\"None\" [checked]=\"record.SearchScopeAccess === 'None'\" [disabled]=\"!EditMode\" (change)=\"record.SearchScopeAccess = 'None'\">\n                        <i class=\"fa-solid fa-ban\"></i>\n                        <div class=\"agent-search-access-text\">\n                          <div class=\"agent-search-access-title\">None</div>\n                          <div class=\"agent-search-access-desc\">No search capability. The Scoped Search action is disabled for this agent.</div>\n                        </div>\n                      </label>\n                    </div>\n\n                    <!-- Assigned scopes grid -->\n                    @if (record.SearchScopeAccess !== 'None') {\n                      <div class=\"agent-search-grid-header\">\n                        <h4>Assigned Scopes</h4>\n                        <p class=\"section-description\">\n                          <strong>Pre-Execution</strong> scopes are injected automatically before the first LLM call.\n                          <strong>Agent-Invoked</strong> scopes are callable via the Scoped Search tool during execution.\n                          <strong>Both</strong> covers both paths.\n                        </p>\n                      </div>\n                      <mj-search-scope-child-grid\n                        [ParentID]=\"record.ID\"\n                        ChildEntityName=\"MJ: AI Agent Search Scopes\"\n                        ParentFieldName=\"AgentID\"\n                        [Columns]=\"AgentSearchScopeColumns\"\n                        [Disabled]=\"!EditMode\"\n                        AddButtonLabel=\"+ Assign another scope\"\n                        EmptyMessage=\"No scopes assigned yet. Assign at least one if this agent will use Scoped Search.\"\n                        (RowsChanged)=\"LoadPermissionSummary()\">\n                      </mj-search-scope-child-grid>\n\n                      <!-- Phase 2A: read-only audit summary of who has\n                           permission on each of this agent's assigned scopes.\n                           Editing happens in the Knowledge Hub Config dashboard\n                           (see \"Permissions\" subtab under Search Scopes). -->\n                      <div class=\"agent-search-section\" style=\"margin-top: 16px;\">\n                        <h4 style=\"margin: 0 0 8px 0;\">\n                          <i class=\"fa-solid fa-shield-halved\"></i> Effective scope permissions\n                        </h4>\n                        <p class=\"section-description\" style=\"margin-bottom: 8px;\">\n                          Per-user / per-role grants on the scopes assigned above. Edit grants in\n                          <strong>Knowledge Hub Config &rarr; Search Scopes &rarr; Permissions</strong>.\n                        </p>\n                        @if (IsLoadingPermissions) {\n                          <div style=\"color: var(--mj-text-muted);\">Loading permissions&hellip;</div>\n                        } @else if (PermissionSummary.length === 0) {\n                          <div style=\"color: var(--mj-text-muted); font-style: italic;\">\n                            No scopes assigned yet \u2014 permissions will appear here once you add scopes above.\n                          </div>\n                        } @else {\n                          @for (s of PermissionSummary; track s.ScopeID) {\n                            <div style=\"margin-bottom: 12px; padding: 8px 12px; background: var(--mj-bg-surface-card); border: 1px solid var(--mj-border-subtle); border-radius: 4px;\">\n                              <div style=\"font-weight: 600; margin-bottom: 4px;\">{{ s.ScopeName }}</div>\n                              @if (s.Permissions.length === 0) {\n                                <div style=\"color: var(--mj-text-muted); font-size: 0.9em;\">\n                                  No explicit permissions. Access falls back to this agent's <code>SearchScopeAccess</code> setting.\n                                </div>\n                              } @else {\n                                <ul style=\"margin: 4px 0 0 16px; padding: 0;\">\n                                  @for (p of s.Permissions; track p.Principal + p.Level) {\n                                    <li style=\"font-size: 0.9em; padding: 2px 0;\">\n                                      <i class=\"fa-solid\" [class.fa-user]=\"p.PrincipalType === 'User'\" [class.fa-users]=\"p.PrincipalType === 'Role'\"></i>\n                                      <strong>{{ p.Principal }}</strong>\n                                      <span style=\"color: var(--mj-text-muted);\">({{ p.PrincipalType }})</span>\n                                      &mdash; <span [style.color]=\"p.Level === 'None' ? 'var(--mj-status-error-text)' : 'var(--mj-text-primary)'\">{{ p.Level }}</span>\n                                    </li>\n                                  }\n                                </ul>\n                              }\n                            </div>\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n              </mj-accordion-panel>\n            }\n            <!-- Payload -->\n            <mj-accordion-panel id=\"payload\"\n              [Expanded]=\"GetSectionExpanded('payload', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-exchange-alt\"></i> Payload Management\n                </ng-template>\n                <div class=\"panel-content\">\n                  <div class=\"section-header\">\n                    <div class=\"section-description\">\n                      Configure how this agent handles data payloads, path routing, and validation between parent and child agents.\n                    </div>\n                  </div>\n                  <!-- Payload Scope Section -->\n                  <div class=\"payload-section\">\n                    <h3 class=\"payload-section-title\">\n                      <i class=\"fa-solid fa-target\"></i>\n                      Payload Scope\n                    </h3>\n                    <div class=\"payload-field-container\">\n                      <div class=\"payload-field-info\">\n                        <label class=\"payload-field-label\">Payload Scope Path</label>\n                        <p class=\"payload-field-description\">\n                          Specify a path within the parent payload that this sub-agent should operate on.\n                          Leave empty to receive the entire payload.\n                        </p>\n                      </div>\n                      <div class=\"payload-field-input\">\n                        <mj-form-field\n                          FieldName=\"PayloadScope\"\n                          Type=\"textbox\"\n                          Caption=\"\"\n                          [EditMode]=\"EditMode\"\n                          [Record]=\"record\"\n                          style=\"width: 100%;\">\n                        </mj-form-field>\n                        <div class=\"payload-field-example\">\n                          <i class=\"fa-solid fa-lightbulb\"></i>\n                          <span>Example: <code>/customer/profile</code> or <code>/analysis/results</code></span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Path Configuration Section -->\n                  <div class=\"payload-section\">\n                    <h3 class=\"payload-section-title\">\n                      <i class=\"fa-solid fa-route\"></i>\n                      Path Configuration\n                    </h3>\n                    <div class=\"payload-paths-grid\">\n                      <!-- Downstream Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon downstream\">\n                            <i class=\"fa-solid fa-arrow-down\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Downstream Paths</h4>\n                            <p>JSON array of paths to pass to sub-agents</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadDownstreamPaths || '[&quot;*&quot;]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Use <code>[\"*\"]</code> to pass entire payload or specify paths like <code>[\"user.id\", \"order.*\"]</code>\n                          </div>\n                        </div>\n                      </div>\n                      <!-- Upstream Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon upstream\">\n                            <i class=\"fa-solid fa-arrow-up\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Upstream Paths</h4>\n                            <p>JSON array of paths sub-agents can write back</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadUpstreamPaths || '[&quot;*&quot;]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Use <code>[\"*\"]</code> to allow all writes or limit to specific paths\n                          </div>\n                        </div>\n                      </div>\n                      <!-- Self Read Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon self-read\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Self Read Paths</h4>\n                            <p>JSON array of paths this agent can read</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadSelfReadPaths || '[]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Paths this agent's prompts can read from the payload\n                          </div>\n                        </div>\n                      </div>\n                      <!-- Self Write Paths -->\n                      <div class=\"payload-path-card\">\n                        <div class=\"payload-path-header\">\n                          <div class=\"payload-path-icon self-write\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                          </div>\n                          <div class=\"payload-path-info\">\n                            <h4>Self Write Paths</h4>\n                            <p>JSON array of paths this agent can write to</p>\n                          </div>\n                        </div>\n                        <div class=\"payload-path-content\">\n                          <div class=\"json-editor-container\">\n                            <mj-code-editor\n                              [value]=\"record.PayloadSelfWritePaths || '[]'\"\n                              [readonly]=\"!EditMode\"\n                              language=\"json\"\n                              [lineWrapping]=\"true\"\n                              style=\"height: 100px; width: 100%;\"\n                              (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n                            </mj-code-editor>\n                          </div>\n                          <div class=\"payload-path-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Paths this agent's prompts can write back to the payload\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Validation Section -->\n                  <div class=\"payload-section\">\n                    <h3 class=\"payload-section-title\">\n                      <i class=\"fa-solid fa-shield-check\"></i>\n                      Final Payload Validation\n                    </h3>\n                    <div class=\"payload-validation-container\">\n                      <div class=\"payload-validation-settings\">\n                        <div class=\"validation-field-group\">\n                          <label class=\"validation-field-label\">Validation Mode</label>\n                          <p class=\"validation-field-description\">How to handle validation failures</p>\n                          <mj-form-field\n                            FieldName=\"FinalPayloadValidationMode\"\n                            Type=\"dropdownlist\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            style=\"width: 100%;\">\n                          </mj-form-field>\n                        </div>\n                        <div class=\"validation-field-group\">\n                          <label class=\"validation-field-label\">Max Retries</label>\n                          <p class=\"validation-field-description\">Maximum validation retry attempts</p>\n                          <mj-form-field\n                            FieldName=\"FinalPayloadValidationMaxRetries\"\n                            Type=\"numerictextbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            style=\"width: 100%;\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"payload-validation-schema\">\n                        <label class=\"validation-schema-label\">\n                          <i class=\"fa-solid fa-code\"></i>\n                          Validation Schema\n                        </label>\n                        <p class=\"validation-schema-description\">\n                          JSON schema or validation rules for the final payload structure\n                        </p>\n                        <div class=\"validation-schema-editor\">\n                          <mj-code-editor\n                            [value]=\"record.FinalPayloadValidation || '{}'\"\n                            [readonly]=\"!EditMode\"\n                            language=\"json\"\n                            [lineWrapping]=\"true\"\n                            style=\"height: 200px; width: 100%;\"\n                            (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n                          </mj-code-editor>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n            </mj-accordion-panel>\n            <!-- Execution Guardrails (New Separate Panel) -->\n            <mj-accordion-panel id=\"guardrails\"\n              [Expanded]=\"GetSectionExpanded('guardrails', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n                </ng-template>\n                <div class=\"panel-content\">\n                  <div class=\"section-header\">\n                    <div class=\"section-description\">\n                      Set limits to prevent runaway agent executions and control resource usage.\n                    </div>\n                  </div>\n                  <div class=\"form-fields-grid\">\n                    <mj-form-field\n                      FieldName=\"MaxCostPerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Cost ($)\"\n                      Description=\"Maximum cost per run\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                    <mj-form-field\n                      FieldName=\"MaxTokensPerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Tokens\"\n                      Description=\"Maximum tokens per run\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                    <mj-form-field\n                      FieldName=\"MaxIterationsPerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Iterations\"\n                      Description=\"Maximum prompt iterations\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                    <mj-form-field\n                      FieldName=\"MaxTimePerRun\"\n                      Type=\"numerictextbox\"\n                      Caption=\"Max Time (seconds)\"\n                      Description=\"Maximum execution time\"\n                      [EditMode]=\"EditMode\"\n                      [Record]=\"record\">\n                    </mj-form-field>\n                  </div>\n                </div>\n            </mj-accordion-panel>\n            <!-- Configuration (Settings Panel) -->\n            <mj-accordion-panel id=\"config\"\n              [Expanded]=\"GetSectionExpanded('config', false)\">\n                <ng-template mjAccordionTitle>\n                    <i class=\"fa-solid fa-cogs\"></i> Configuration\n                </ng-template>\n                <div class=\"panel-content\">\n                  <div class=\"section-header\">\n                    <div class=\"section-description\">\n                      Configure agent behavior, execution settings, and advanced features.\n                    </div>\n                  </div>\n                  <!-- Identity & Behavior Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-id-card\"></i>\n                      Identity & Behavior\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-toggle-on\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Agent Status</h4>\n                            <p>Current availability and operational status</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          @if (EditMode) {\n                            <mj-dropdown\n                              [(ngModel)]=\"record.Status\"\n                              [Data]=\"statusOptions\"\n                              TextField=\"text\"\n                              ValueField=\"value\"\n                              [ValuePrimitive]=\"true\"\n                              name=\"agentStatus\"\n                              class=\"config-field-input\">\n                            </mj-dropdown>\n                          } @else {\n                            <span class=\"config-field-display\">{{ record.Status || 'Not Set' }}</span>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-sitemap\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Agent Type</h4>\n                            <p>Category and system-level behavior</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          @if (EditMode) {\n                            <mj-dropdown\n                              [(ngModel)]=\"record.TypeID\"\n                              [Data]=\"agentTypes\"\n                              TextField=\"Name\"\n                              ValueField=\"ID\"\n                              [ValuePrimitive]=\"true\"\n                              name=\"agentTypeID\"\n                              class=\"config-field-input\">\n                            </mj-dropdown>\n                          } @else {\n                            <span class=\"config-field-display\">{{ record.Type || 'Not Set' }}</span>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-folder-tree\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Category</h4>\n                            <p>Organizational category for this agent</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          @if (EditMode) {\n                            <mj-tree-dropdown\n                              [BranchConfig]=\"CategoryBranchConfig\"\n                              [Value]=\"SelectedCategoryKey\"\n                              SelectionMode=\"single\"\n                              SelectableTypes=\"branch\"\n                              Placeholder=\"Select a category...\"\n                              [Clearable]=\"true\"\n                              [EnableSearch]=\"true\"\n                              (ValueChange)=\"OnCategoryChange($event)\">\n                            </mj-tree-dropdown>\n                          } @else {\n                            <span class=\"config-field-display\">{{ record.Category || 'Not Set' }}</span>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-bolt\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Expose as Action</h4>\n                            <p>Make available as an action for other agents</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"ExposeAsAction\"\n                            Type=\"checkbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"config-card full-width\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-align-left\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Description</h4>\n                            <p>Detailed agent description and purpose</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"Description\"\n                            Type=\"textarea\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            style=\"width: 100%;\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Execution Settings Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-play\"></i>\n                      Execution Settings\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-layer-group\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Execution Mode</h4>\n                            <p>How sub-agents are executed</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"ExecutionMode\"\n                            Type=\"dropdownlist\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-sort-numeric-down\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Execution Order</h4>\n                            <p>Order when run with siblings</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"ExecutionOrder\"\n                            Type=\"numerictextbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-tachometer-alt\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Default Effort Level</h4>\n                            <p>Default effort level for all prompts (1-100)</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"DefaultPromptEffortLevel\"\n                            Type=\"numerictextbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                          <div class=\"config-card-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Higher values request more thorough reasoning (1=minimal, 100=maximum)\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-code\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Driver Class</h4>\n                            <p>Custom implementation class</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"DriverClass\"\n                            Type=\"textbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Visual Identity Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-palette\"></i>\n                      Visual Identity\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-icons\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Icon Class</h4>\n                            <p>Font Awesome icon class</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"IconClass\"\n                            Type=\"textbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                          <div class=\"config-card-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Example: <code>fa-solid fa-robot</code>\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"config-card\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-image\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Logo URL</h4>\n                            <p>URL for agent logo image</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"LogoURL\"\n                            Type=\"textbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\">\n                          </mj-form-field>\n                          <div class=\"config-card-hint\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            Takes precedence over Icon Class\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- Context Compression Section -->\n                  <div class=\"config-section\">\n                    <h3 class=\"config-section-title\">\n                      <i class=\"fa-solid fa-compress\"></i>\n                      Context Compression\n                    </h3>\n                    <div class=\"config-grid\">\n                      <div class=\"config-card full-width\">\n                        <div class=\"config-card-header\">\n                          <div class=\"config-card-icon\">\n                            <i class=\"fa-solid fa-toggle-on\"></i>\n                          </div>\n                          <div class=\"config-card-info\">\n                            <h4>Enable Context Compression</h4>\n                            <p>Automatically compress conversation context when message threshold is reached</p>\n                          </div>\n                        </div>\n                        <div class=\"config-card-content\">\n                          <mj-form-field\n                            FieldName=\"EnableContextCompression\"\n                            Type=\"checkbox\"\n                            Caption=\"\"\n                            [EditMode]=\"EditMode\"\n                            [Record]=\"record\"\n                            (valueChange)=\"onContextCompressionToggle($event)\">\n                          </mj-form-field>\n                        </div>\n                      </div>\n                      @if (record.EnableContextCompression) {\n                        <div class=\"config-card\">\n                          <div class=\"config-card-header\">\n                            <div class=\"config-card-icon\">\n                              <i class=\"fa-solid fa-hashtag\"></i>\n                            </div>\n                            <div class=\"config-card-info\">\n                              <h4>Message Threshold</h4>\n                              <p>Messages before compression triggers</p>\n                            </div>\n                          </div>\n                          <div class=\"config-card-content\">\n                            <mj-form-field\n                              FieldName=\"ContextCompressionMessageThreshold\"\n                              Type=\"numerictextbox\"\n                              Caption=\"\"\n                              [EditMode]=\"EditMode\"\n                              [Record]=\"record\">\n                            </mj-form-field>\n                          </div>\n                        </div>\n                        <div class=\"config-card\">\n                          <div class=\"config-card-header\">\n                            <div class=\"config-card-icon\">\n                              <i class=\"fa-solid fa-save\"></i>\n                            </div>\n                            <div class=\"config-card-info\">\n                              <h4>Messages to Keep</h4>\n                              <p>Recent messages to retain uncompressed</p>\n                            </div>\n                          </div>\n                          <div class=\"config-card-content\">\n                            <mj-form-field\n                              FieldName=\"ContextCompressionMessageRetentionCount\"\n                              Type=\"numerictextbox\"\n                              Caption=\"\"\n                              [EditMode]=\"EditMode\"\n                              [Record]=\"record\">\n                            </mj-form-field>\n                          </div>\n                        </div>\n                        <div class=\"config-card\">\n                          <div class=\"config-card-header\">\n                            <div class=\"config-card-icon\">\n                              <i class=\"fa-solid fa-comment-dots\"></i>\n                            </div>\n                            <div class=\"config-card-info\">\n                              <h4>Compression Prompt</h4>\n                              <p>Prompt used for summarization</p>\n                            </div>\n                          </div>\n                          <div class=\"config-card-content\">\n                            @if (EditMode) {\n                              <div class=\"prompt-selector-container\">\n                                <div class=\"prompt-display\">\n                                  @if (selectedContextCompressionPrompt) {\n                                    <span class=\"prompt-name\">{{ selectedContextCompressionPrompt.Name }}</span>\n                                  } @else {\n                                    <span class=\"no-prompt\">No prompt selected</span>\n                                  }\n                                </div>\n                                <div class=\"prompt-actions\">\n                                  <button type=\"button\"\n                                    mjButton\n                                    variant=\"outline\"\n                                    size=\"sm\"\n                                    (click)=\"openContextCompressionPromptSelector()\"\n                                    class=\"prompt-select-btn\">\n                                    <i class=\"fa-solid fa-search\"></i>\n                                    {{ selectedContextCompressionPrompt ? 'Change' : 'Select' }} Prompt\n                                  </button>\n                                  @if (selectedContextCompressionPrompt) {\n                                    <button type=\"button\"\n                                      mjButton\n                                      variant=\"flat\"\n                                      size=\"sm\"\n                                      (click)=\"clearContextCompressionPrompt()\"\n                                      class=\"prompt-clear-btn\"\n                                      title=\"Clear selection\">\n                                      <i class=\"fa-solid fa-times\"></i>\n                                    </button>\n                                  }\n                                </div>\n                              </div>\n                            } @else {\n                              <span class=\"config-field-display\">{{ selectedContextCompressionPrompt?.Name || record.ContextCompressionPrompt || 'Not Set' }}</span>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                </div>\n            </mj-accordion-panel>\n        </div>\n      }\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/* 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/* 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/* 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/* Responsive adjustments for sub-agent filters */\n@media (max-width: 768px) {\n    .sub-agent-filter-header {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .filter-controls,\n    .header-actions {\n        width: 100%;\n        justify-content: center;\n    }\n\n    .empty-state-info {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* ===== Search Scope Access (mockup #5) ===== */\n.agent-search-access {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 12px;\n    margin: 8px 0 20px;\n}\n\n.agent-search-access-option {\n    display: grid;\n    grid-template-columns: 24px 28px 1fr;\n    align-items: start;\n    gap: 10px;\n    padding: 14px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n    transition: background 120ms ease, border-color 120ms ease;\n}\n\n.agent-search-access-option:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n}\n\n.agent-search-access-option.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.agent-search-access-option input[type=\"radio\"] {\n    accent-color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.agent-search-access-option > i {\n    font-size: 20px;\n    color: var(--mj-brand-primary);\n    text-align: center;\n    margin-top: 2px;\n}\n\n.agent-search-access-text {\n    min-width: 0;\n}\n\n.agent-search-access-title {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n}\n\n.agent-search-access-desc {\n    font-size: 0.8rem;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n    line-height: 1.3;\n}\n\n.agent-search-grid-header {\n    margin: 8px 0 12px;\n}\n\n.agent-search-grid-header h4 {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n    font-size: 1rem;\n    font-weight: 600;\n}\n\n@media (max-width: 768px) {\n    .agent-search-access {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* \u2500\u2500 Execution History: Runs | Sessions segmented toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.history-view-toggle {\n    display: inline-flex;\n    gap: 2px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    padding: 3px;\n    margin-bottom: 14px;\n}\n\n.history-toggle-option {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    padding: 6px 16px;\n    border: none;\n    border-radius: 8px;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.history-toggle-option:hover {\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.history-toggle-count {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 1px 7px;\n    border-radius: 10px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n}\n\n.history-toggle-option.active .history-toggle-count {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500 Voice session rows in Execution History \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.session-card {\n    cursor: pointer;\n}\n\n.session-role-chip {\n    display: inline-flex;\n    align-items: center;\n    margin-left: 8px;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 10.5px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n    color: var(--mj-brand-primary);\n}\n\n.session-role-chip--target {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n    color: var(--mj-status-info);\n}\n\n.session-status-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n}\n\n.session-status-pill[data-status=\"Active\"] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-color: color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.session-status-pill[data-status=\"Idle\"] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n/* \u2500\u2500 Form tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Panes are hidden with `display: none`, never removed from the DOM. The\n   designer pane holds UNSAVED canvas edits; @if-ing it away on a tab switch\n   would discard them silently, and would also throw away the canvas's zoom and\n   node positions on every trip to Details. */\n\n.agent-tabbar {\n    flex: 0 0 auto;\n    padding: 8px 12px 0;\n    background: var(--mj-bg-page);\n}\n\n.agent-pane {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.agent-pane--hidden {\n    display: none;\n}\n\n.agent-pane--designer {\n    overflow: hidden;\n    padding: 8px 12px 12px;\n    background: var(--mj-bg-page);\n}\n\n/* The designer's dynamically-created section has no height of its own, so without\n   this the flow canvas collapses to zero and renders as an empty strip. */\n.agent-pane--designer > ng-component,\n.agent-pane--designer > * {\n    flex: 1;\n    min-height: 0;\n}\n\n.agent-pane--invocations {\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mj-bg-page);\n}\n\n/* Initial load: the form's header renders as soon as the record arrives, but the tab strip and\n   every pane wait on the agent TYPE. This fills that window so the page reads as loading rather\n   than as broken. */\n.agent-form-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 240px;\n    padding: 32px;\n    background: var(--mj-bg-page);\n}\n"] }]
     }], null, { CustomSectionContainer: [{
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]