@memberjunction/ng-core-entity-forms 2.60.0 → 2.62.0

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

@@ -92,8 +92,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_15_Template(rf, ctx) {
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 32);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_17_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openTestHarness()); });
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openTestHarness()); });
     i0.ɵɵelement(1, "i", 33);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
@@ -111,16 +111,16 @@ function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Templa
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 41);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 44);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Configure First Action ");
     i0.ɵɵelementEnd();
@@ -134,7 +134,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Condit
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Add actions to enable this agent to perform specific tasks and operations.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "kendo-button", 43);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "button", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -161,8 +161,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Condit
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 59);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template_kendo_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const action_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r8, $event)); });
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const action_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r8, $event)); });
     i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementEnd();
 } }
@@ -184,7 +184,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Condit
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(12, "div", 56);
-    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "kendo-button", 57);
+    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "button", 57);
     i0.ɵɵelement(14, "i", 58);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -233,7 +233,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Condit
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 35)(1, "div", 36)(2, "div", 37);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template, 3, 0, "kendo-button", 38);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template, 3, 0, "button", 38);
     i0.ɵɵelementEnd()();
     i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Template, 7, 1, "div", 39)(5, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Template, 4, 1, "div", 40);
     i0.ɵɵelementEnd();
@@ -262,16 +262,16 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Templa
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 41);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Add Sub-Agent ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 44);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Create First Sub-Agent ");
     i0.ɵɵelementEnd();
@@ -285,7 +285,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Create sub-agents to build a hierarchical structure for complex workflows.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "kendo-button", 43);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -394,7 +394,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Templa
     i0.ɵɵtext(3, " Manage hierarchical relationships with child agents that work under this agent. ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 37);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template, 3, 0, "kendo-button", 38);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template, 3, 0, "button", 38);
     i0.ɵɵelementEnd()();
     i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Template, 7, 1, "div", 39)(7, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template, 4, 1, "div", 40);
     i0.ɵɵelementEnd();
@@ -442,16 +442,16 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 41);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 44);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Create First Prompt ");
     i0.ɵɵelementEnd();
@@ -465,7 +465,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Add prompts to define how this agent processes requests and generates responses.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "kendo-button", 43);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -492,8 +492,8 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 79);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template_kendo_button_click_0_listener($event) { i0.ɵɵrestoreView(_r21); const prompt_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r20, $event)); });
+    i0.ɵɵelementStart(0, "button", 79);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r21); const prompt_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r20, $event)); });
     i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementEnd();
 } }
@@ -512,7 +512,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Condit
     i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 53);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 56);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "kendo-button", 78);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 78);
     i0.ɵɵelement(11, "i", 58);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -559,7 +559,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Templa
     i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 72)(8, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_8_Template, 2, 1, "span", 73);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 37);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template, 3, 0, "kendo-button", 38);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template, 3, 0, "button", 38);
     i0.ɵɵelementEnd()();
     i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Template, 7, 1, "div", 39)(12, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_Template, 4, 1, "div", 40);
     i0.ɵɵelementEnd();
@@ -694,16 +694,16 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_1_Templa
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 41);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 44);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
     i0.ɵɵelement(1, "i", 42);
     i0.ɵɵtext(2, " Create First Note ");
     i0.ɵɵelementEnd();
@@ -717,7 +717,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Condit
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "Add notes to document important information, observations, or instructions for this agent.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "kendo-button", 43);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -799,7 +799,7 @@ function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Templa
     i0.ɵɵtext(3, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 37);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template, 3, 0, "kendo-button", 38);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template, 3, 0, "button", 38);
     i0.ɵɵelementEnd()();
     i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Template, 7, 1, "div", 39)(7, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Template, 4, 1, "div", 40);
     i0.ɵɵelementEnd();
@@ -1050,9 +1050,9 @@ function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_13_Template, 3, 3, "span", 16)(14, AIAgentFormComponentExtended_form_2_Conditional_14_Template, 3, 3, "span", 17)(15, AIAgentFormComponentExtended_form_2_Conditional_15_Template, 3, 1, "span", 18);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(16, "div", 19);
-    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_2_Conditional_17_Template, 3, 1, "kendo-button", 20);
-    i0.ɵɵelementStart(18, "kendo-button", 21);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Template_kendo_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
+    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_2_Conditional_17_Template, 3, 1, "button", 20);
+    i0.ɵɵelementStart(18, "button", 21);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshRelatedData()); });
     i0.ɵɵelement(19, "i", 22);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(20, "div", 23)(21, "kendo-panelbar");
@@ -1190,8 +1190,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             const subAgentResult = await rv.RunView({
                 EntityName: 'AI Agents',
                 ExtraFilter: `ParentID='${this.record.ID}'`,
-                OrderBy: 'Name ASC',
-                ResultType: 'entity_object'
+                OrderBy: 'Name ASC'
             });
             this.subAgents = subAgentResult.Results || [];
             this.subAgentCount = subAgentResult.TotalRowCount || 0;
@@ -1204,8 +1203,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             const actionResult = await rv.RunView({
                 EntityName: 'Actions',
                 ExtraFilter: `ID IN (SELECT ActionID FROM __mj.vwAIAgentActions WHERE AgentID='${this.record.ID}')`,
-                OrderBy: 'Name ASC',
-                ResultType: 'entity_object'
+                OrderBy: 'Name ASC'
             });
             this.agentActions = actionResult.Results || [];
             this.actionCount = actionResult.TotalRowCount || 0;
@@ -1214,16 +1212,14 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             const learningResult = await rv.RunView({
                 EntityName: 'AI Agent Learning Cycles',
                 ExtraFilter: `AgentID='${this.record.ID}'`,
-                OrderBy: 'StartedAt DESC',
-                ResultType: 'entity_object'
+                OrderBy: 'StartedAt DESC'
             });
             this.learningCycles = learningResult.Results || [];
             this.learningCycleCount = learningResult.TotalRowCount || 0;
             // Load notes with data
             const noteResult = await rv.RunView({
                 EntityName: 'AI Agent Notes',
-                ExtraFilter: `AgentID='${this.record.ID}'`,
-                ResultType: 'entity_object'
+                ExtraFilter: `AgentID='${this.record.ID}'`
             });
             this.agentNotes = noteResult.Results || [];
             this.noteCount = noteResult.TotalRowCount || 0;
@@ -1231,8 +1227,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             const historyResult = await rv.RunView({
                 EntityName: 'MJ: AI Agent Runs',
                 ExtraFilter: `AgentID='${this.record.ID}'`,
-                OrderBy: '__mj_CreatedAt DESC',
-                ResultType: 'entity_object'
+                OrderBy: '__mj_CreatedAt DESC'
             });
             this.recentExecutions = historyResult.Results || [];
             this.executionHistoryCount = historyResult.TotalRowCount || 0;
@@ -1671,8 +1666,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 const rv = new RunView();
                 const linkResult = await rv.RunView({
                     EntityName: 'AI Agent Prompts',
-                    ExtraFilter: `AgentID='${this.record.ID}' AND PromptID='${prompt.ID}'`,
-                    ResultType: 'entity_object'
+                    ExtraFilter: `AgentID='${this.record.ID}' AND PromptID='${prompt.ID}'`
                 });
                 if (linkResult.Results && linkResult.Results.length > 0) {
                     const agentPrompt = linkResult.Results[0];
@@ -1717,8 +1711,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
                 const rv = new RunView();
                 const linkResult = await rv.RunView({
                     EntityName: 'AI Agent Actions',
-                    ExtraFilter: `AgentID='${this.record.ID}' AND ActionID='${action.ID}'`,
-                    ResultType: 'entity_object'
+                    ExtraFilter: `AgentID='${this.record.ID}' AND ActionID='${action.ID}'`
                 });
                 if (linkResult.Results && linkResult.Results.length > 0) {
                     const agentAction = linkResult.Results[0];
@@ -1742,7 +1735,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         }
     }
     static { this.ɵfac = function AIAgentFormComponentExtended_Factory(t) { return new (t || AIAgentFormComponentExtended)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.DialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i4.NewAgentDialogService), i0.ɵɵdirectiveInject(i5.ActionGalleryDialogService), i0.ɵɵdirectiveInject(i6.AITestHarnessDialogService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container"], ["kendoDialogContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "expanded"], ["title", "Details", 3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["themeColor", "primary", "size", "small"], [1, "empty-state"], [1, "entity-list"], ["themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["themeColor", "primary"], ["themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "view-more-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "section-description"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], [1, "fa-solid", "fa-comments"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-history"], [1, "timeline-list"], [1, "timeline-item", 3, "expanded"], [1, "timeline-item"], [1, "timeline-marker"], [1, "timeline-content"], [1, "timeline-header", 3, "click"], [1, "timeline-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "timeline-date"], [1, "timeline-meta"], [1, "execution-time"], [1, "timeline-preview"], [1, "timeline-expanded-content"], [1, "fa-solid", "fa-stopwatch"], [1, "result-section"], [1, "error-section"], [1, "execution-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "timeline-actions"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "result-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "fa-solid", "fa-info-circle"], [1, "form-fields-grid"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container"], ["kendoDialogContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "expanded"], ["title", "Details", 3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "empty-state"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "view-more-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "section-description"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], [1, "fa-solid", "fa-comments"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-history"], [1, "timeline-list"], [1, "timeline-item", 3, "expanded"], [1, "timeline-item"], [1, "timeline-marker"], [1, "timeline-content"], [1, "timeline-header", 3, "click"], [1, "timeline-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "timeline-date"], [1, "timeline-meta"], [1, "execution-time"], [1, "timeline-preview"], [1, "timeline-expanded-content"], [1, "fa-solid", "fa-stopwatch"], [1, "result-section"], [1, "error-section"], [1, "execution-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "timeline-actions"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "result-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "fa-solid", "fa-info-circle"], [1, "form-fields-grid"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵelement(1, "div", 2);
@@ -1759,7 +1752,7 @@ AIAgentFormComponentExtended = __decorate([
 export { AIAgentFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentFormComponentExtended, [{
         type: Component,
-        args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n    <!-- Dialog container for Kendo dialogs -->\n    <div kendoDialogContainer></div>\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Compact Header with Agent Overview -->\n        <div class=\"agent-header\">\n            <div class=\"agent-header-content\">\n                <div class=\"agent-overview\">\n                    <div class=\"agent-icon-wrapper\">\n                        @if (hasLogoURL()) {\n                            <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n                        } @else {\n                            <i [class]=\"getAgentIcon()\"></i>\n                        }\n                    </div>\n                    <div class=\"agent-info\">\n                        @if (EditMode) {\n                            <kendo-textbox [(ngModel)]=\"record.Name\" \n                                          name=\"agentName\"\n                                          placeholder=\"Enter agent name...\"\n                                          class=\"agent-name-input\">\n                            </kendo-textbox>\n                        } @else {\n                            <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n                        }\n                        <div class=\"agent-meta\">\n                            @if (record.Status) {\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n                                    <i class=\"fa-solid fa-circle\"></i>\n                                    {{ record.Status }}\n                                </span>\n                            }\n                            @if (record.ExecutionMode) {\n                                <span class=\"execution-mode\">\n                                    <i [class]=\"getExecutionModeIcon(record.ExecutionMode)\"></i>\n                                    {{ record.ExecutionMode }}\n                                </span>\n                            }\n                            @if (record.Parent) {\n                                <span class=\"parent-agent\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n                </div>\n                \n                <!-- Action Buttons -->\n                <div class=\"agent-actions\">\n                    @if (record.ID) {\n                        <kendo-button themeColor=\"primary\" size=\"large\"\n                                    (click)=\"openTestHarness()\"\n                                    [disabled]=\"record.Status !== 'Active'\"\n                                    title=\"Run this AI agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                        </kendo-button>\n                    }\n                    <kendo-button fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </kendo-button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content\">\n            <kendo-panelbar>\n\n                <!-- Actions (First Panel - Expanded by default) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"actionCount > 0\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Action\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (actionCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-bolt\"></i>\n                                        <h4>No Actions Configured</h4>\n                                        <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Configure First Action\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (action of agentActions; track action.ID) {\n                                            <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i [class]=\"getActionIcon(action)\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n                                                    @if (action.Description) {\n                                                        <div class=\"item-preview\">{{ action.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (action.Type) {\n                                                            <span class=\"meta-tag\">{{ action.Type }}</span>\n                                                        }\n                                                        <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n                                                            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n                                                            {{ action.Status }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <kendo-button \n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeAction(action, $event)\"\n                                                            title=\"Remove action\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </kendo-button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (actionCount > agentActions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n                                                <span>View all {{ actionCount }} actions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents (Second Panel) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"subAgentCount > 0\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage hierarchical relationships with child agents that work under this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" size=\"small\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Sub-Agent\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (subAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (subAgent of subAgents; track subAgent.ID) {\n                                            <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(subAgent)) {\n                                                        <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n                                                    }\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n                                                    @if (subAgent.Description) {\n                                                        <div class=\"item-preview\">{{ subAgent.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (subAgent.Status) {\n                                                            <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ subAgent.Status }}\n                                                            </span>\n                                                        }\n                                                        @if (subAgent.ExecutionMode) {\n                                                            <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (subAgentCount > subAgents.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n                                                <span>View all {{ subAgentCount }} sub-agents...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Prompts (Third Panel - With Model Selection) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"true\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"prompt-controls\">\n                                        <!-- Model Selection Mode Control -->\n                                        <div class=\"model-selection-mode\">\n                                            <label class=\"model-selection-label\">\n                                                <i class=\"fa-solid fa-sliders\"></i>\n                                                Model Selection:\n                                            </label>\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist\n                                                    [(ngModel)]=\"record.ModelSelectionMode\"\n                                                    name=\"modelSelectionMode\"\n                                                    [data]=\"modelSelectionModes\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    class=\"model-selection-dropdown\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (promptCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comments\"></i>\n                                        <h4>No Prompts Configured</h4>\n                                        <p>Add prompts to define how this agent processes requests and generates responses.</p>\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (prompt of agentPrompts; track prompt.ID) {\n                                            <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ prompt.Name }}</div>\n                                                    @if (prompt.TemplateText) {\n                                                        <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (prompt.PromptRole) {\n                                                            <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <kendo-button \n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removePrompt(prompt, $event)\"\n                                                            title=\"Remove prompt\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </kendo-button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (promptCount > agentPrompts.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n                                                <span>View all {{ promptCount }} prompts...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n\n                <!-- Learning & Analytics -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Monitor and manage learning cycles, training sessions, and performance analytics.\n                                    </div>\n                                </div>\n                                \n                                @if (learningCycleCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-brain\"></i>\n                                        <h4>No Learning Cycles</h4>\n                                        <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (cycle of learningCycles; track cycle.ID) {\n                                            <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-brain\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n                                                    <div class=\"item-meta\">\n                                                        @if (cycle.StartedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ cycle.StartedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                        @if (cycle.Status) {\n                                                            <span class=\"status-tag\">{{ cycle.Status }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (learningCycleCount > learningCycles.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n                                                <span>View all {{ learningCycleCount }} cycles...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Notes & Documentation -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage notes, documentation, and annotations for this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Note\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (noteCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sticky-note\"></i>\n                                        <h4>No Notes</h4>\n                                        <p>Add notes to document important information, observations, or instructions for this agent.</p>\n                                        @if (EditMode) {\n                                            <kendo-button themeColor=\"primary\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Note\n                                            </kendo-button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (note of agentNotes; track note.ID) {\n                                            <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-sticky-note\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                                                    @if (note.Note) {\n                                                        <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (note.__mj_CreatedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ note.__mj_CreatedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (noteCount > agentNotes.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n                                                <span>View all {{ noteCount }} notes...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Requests & History -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Review execution history, requests, and performance metrics for this agent.\n                                    </div>\n                                </div>\n                                \n                                @if (executionHistoryCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-history\"></i>\n                                        <h4>No Execution History</h4>\n                                        <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"timeline-list\">\n                                        @for (execution of recentExecutions; track execution.ID) {\n                                            <div class=\"timeline-item\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n                                                <div>\n                                                    <div class=\"timeline-marker\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                        <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n                                                    </div>\n                                                    <div class=\"timeline-content\">\n                                                    <div class=\"timeline-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n                                                        <div>\n                                                            <div class=\"timeline-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                                                                <span class=\"timeline-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</span>\n                                                            </div>\n                                                        <div class=\"timeline-meta\">\n                                                            <span class=\"status-badge\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                                {{ execution.Status || 'Unknown' }}\n                                                            </span>\n                                                            @if (execution.CompletedAt) {\n                                                                <span class=\"execution-time\">\n                                                                    <i class=\"fa-solid fa-stopwatch\"></i>\n                                                                    {{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}\n                                                                </span>\n                                                            }\n                                                        </div>\n                                                        @if (execution.Result && !expandedExecutions[execution.ID]) {\n                                                            <div class=\"timeline-preview\">{{ getExecutionResultPreview(execution) }}</div>\n                                                        }\n                                                        </div>\n                                                    </div>\n                                                    @if (expandedExecutions[execution.ID]) {\n                                                        <div class=\"timeline-expanded-content\">\n                                                            @if (execution.Result) {\n                                                                <div class=\"result-section\">\n                                                                    <h5>Result</h5>\n                                                                    <div class=\"result-content\">{{ getExecutionResultMessage(execution) }}</div>\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 class=\"execution-details\">\n                                                                <div class=\"detail-row\">\n                                                                    <span class=\"detail-label\">Started:</span>\n                                                                    <span class=\"detail-value\">{{ execution.StartedAt | date:'medium' }}</span>\n                                                                </div>\n                                                                @if (execution.CompletedAt) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Completed:</span>\n                                                                        <span class=\"detail-value\">{{ execution.CompletedAt | date:'medium' }}</span>\n                                                                    </div>\n                                                                }\n                                                                @if (execution.ConversationID) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Conversation:</span>\n                                                                        <span class=\"detail-value\">{{ execution.ConversationID }}</span>\n                                                                    </div>\n                                                                }\n                                                            </div>\n                                                            <div class=\"timeline-actions\">\n                                                                <button class=\"btn-primary\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\">\n                                                                    <i class=\"fa-solid fa-external-link-alt\"></i> View Full Details\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    }\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (executionHistoryCount > recentExecutions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Runs', '')\">\n                                                <span>View all {{ executionHistoryCount }} executions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Details (Core Configuration - Last Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\" title=\"Details\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-info-circle\"></i> Details\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"form-fields-grid\">\n                                <ng-content></ng-content>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n            </kendo-panelbar>\n        </div>\n    </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n    flex: 1;\n    margin-right: 16px;\n}\n\n/* Model Selection Mode */\n.model-selection-mode {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: #f0f7ff;\n    border: 1px solid #cce5ff;\n    border-radius: 8px;\n}\n\n.model-selection-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #0066cc;\n    margin: 0;\n}\n\n.model-selection-label i {\n    font-size: 14px;\n}\n\n.model-selection-dropdown {\n    min-width: 140px;\n    height: 32px;\n}\n\n.model-selection-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: #495057;\n    padding: 4px 12px;\n    background: white;\n    border-radius: 6px;\n    border: 1px solid #dee2e6;\n}\n\n.agent-meta-info {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary:hover {\n    background: #5a6268;\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: white;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n    color: white;\n}\n\n.item-icon img.sub-agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n    opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n    color: #2196f3;\n}\n\n.view-more-item {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n    opacity: 1;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: white;\n}\n\n.card-title-section {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item i {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: #6c757d;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error i {\n    flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section,\n.error-section {\n    margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.result-content,\n.error-content {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.error-content {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n    font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    /* Header Responsiveness */\n    .agent-header {\n        padding: 16px;\n    }\n    \n    .agent-header-content {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    /* Panel Responsiveness */\n    .form-content {\n        padding: 12px;\n    }\n    \n    ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content {\n        padding: 20px 16px;\n    }\n    \n    .section-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    /* Entity List Responsiveness */\n    .entity-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon i {\n        font-size: 16px;\n    }\n    \n    .item-title {\n        font-size: 15px;\n    }\n    \n    .item-preview {\n        font-size: 13px;\n    }\n    \n    .item-meta {\n        gap: 8px;\n    }\n    \n    /* Timeline Responsiveness */\n    .timeline-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker i {\n        font-size: 12px;\n    }\n    \n    .timeline-title {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date {\n        align-self: flex-start;\n    }\n    \n    /* Form Field Responsiveness */\n    .form-fields-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    /* Legacy card support */\n    .cards-container {\n        grid-template-columns: 1fr;\n    }\n}"] }]
+        args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n    <!-- Dialog container for Kendo dialogs -->\n    <div kendoDialogContainer></div>\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Compact Header with Agent Overview -->\n        <div class=\"agent-header\">\n            <div class=\"agent-header-content\">\n                <div class=\"agent-overview\">\n                    <div class=\"agent-icon-wrapper\">\n                        @if (hasLogoURL()) {\n                            <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n                        } @else {\n                            <i [class]=\"getAgentIcon()\"></i>\n                        }\n                    </div>\n                    <div class=\"agent-info\">\n                        @if (EditMode) {\n                            <kendo-textbox [(ngModel)]=\"record.Name\" \n                                          name=\"agentName\"\n                                          placeholder=\"Enter agent name...\"\n                                          class=\"agent-name-input\">\n                            </kendo-textbox>\n                        } @else {\n                            <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n                        }\n                        <div class=\"agent-meta\">\n                            @if (record.Status) {\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n                                    <i class=\"fa-solid fa-circle\"></i>\n                                    {{ record.Status }}\n                                </span>\n                            }\n                            @if (record.ExecutionMode) {\n                                <span class=\"execution-mode\">\n                                    <i [class]=\"getExecutionModeIcon(record.ExecutionMode)\"></i>\n                                    {{ record.ExecutionMode }}\n                                </span>\n                            }\n                            @if (record.Parent) {\n                                <span class=\"parent-agent\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n                </div>\n                \n                <!-- Action Buttons -->\n                <div class=\"agent-actions\">\n                    @if (record.ID) {\n                        <button kendoButton themeColor=\"primary\" size=\"large\"\n                                    (click)=\"openTestHarness()\"\n                                    [disabled]=\"record.Status !== 'Active'\"\n                                    title=\"Run this AI agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                        </button>\n                    }\n                    <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content\">\n            <kendo-panelbar>\n\n                <!-- Actions (First Panel - Expanded by default) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"actionCount > 0\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Action\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (actionCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-bolt\"></i>\n                                        <h4>No Actions Configured</h4>\n                                        <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Configure First Action\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (action of agentActions; track action.ID) {\n                                            <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i [class]=\"getActionIcon(action)\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n                                                    @if (action.Description) {\n                                                        <div class=\"item-preview\">{{ action.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (action.Type) {\n                                                            <span class=\"meta-tag\">{{ action.Type }}</span>\n                                                        }\n                                                        <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n                                                            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n                                                            {{ action.Status }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeAction(action, $event)\"\n                                                            title=\"Remove action\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (actionCount > agentActions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n                                                <span>View all {{ actionCount }} actions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents (Second Panel) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"subAgentCount > 0\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage hierarchical relationships with child agents that work under this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (subAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (subAgent of subAgents; track subAgent.ID) {\n                                            <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(subAgent)) {\n                                                        <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n                                                    }\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n                                                    @if (subAgent.Description) {\n                                                        <div class=\"item-preview\">{{ subAgent.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (subAgent.Status) {\n                                                            <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ subAgent.Status }}\n                                                            </span>\n                                                        }\n                                                        @if (subAgent.ExecutionMode) {\n                                                            <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (subAgentCount > subAgents.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n                                                <span>View all {{ subAgentCount }} sub-agents...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Prompts (Third Panel - With Model Selection) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"true\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"prompt-controls\">\n                                        <!-- Model Selection Mode Control -->\n                                        <div class=\"model-selection-mode\">\n                                            <label class=\"model-selection-label\">\n                                                <i class=\"fa-solid fa-sliders\"></i>\n                                                Model Selection:\n                                            </label>\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist\n                                                    [(ngModel)]=\"record.ModelSelectionMode\"\n                                                    name=\"modelSelectionMode\"\n                                                    [data]=\"modelSelectionModes\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    class=\"model-selection-dropdown\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (promptCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comments\"></i>\n                                        <h4>No Prompts Configured</h4>\n                                        <p>Add prompts to define how this agent processes requests and generates responses.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (prompt of agentPrompts; track prompt.ID) {\n                                            <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ prompt.Name }}</div>\n                                                    @if (prompt.TemplateText) {\n                                                        <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (prompt.PromptRole) {\n                                                            <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removePrompt(prompt, $event)\"\n                                                            title=\"Remove prompt\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (promptCount > agentPrompts.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n                                                <span>View all {{ promptCount }} prompts...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n\n                <!-- Learning & Analytics -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Monitor and manage learning cycles, training sessions, and performance analytics.\n                                    </div>\n                                </div>\n                                \n                                @if (learningCycleCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-brain\"></i>\n                                        <h4>No Learning Cycles</h4>\n                                        <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (cycle of learningCycles; track cycle.ID) {\n                                            <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-brain\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n                                                    <div class=\"item-meta\">\n                                                        @if (cycle.StartedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ cycle.StartedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                        @if (cycle.Status) {\n                                                            <span class=\"status-tag\">{{ cycle.Status }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (learningCycleCount > learningCycles.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n                                                <span>View all {{ learningCycleCount }} cycles...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Notes & Documentation -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage notes, documentation, and annotations for this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Note\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (noteCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sticky-note\"></i>\n                                        <h4>No Notes</h4>\n                                        <p>Add notes to document important information, observations, or instructions for this agent.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Note\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (note of agentNotes; track note.ID) {\n                                            <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-sticky-note\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                                                    @if (note.Note) {\n                                                        <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (note.__mj_CreatedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ note.__mj_CreatedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (noteCount > agentNotes.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n                                                <span>View all {{ noteCount }} notes...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Requests & History -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Review execution history, requests, and performance metrics for this agent.\n                                    </div>\n                                </div>\n                                \n                                @if (executionHistoryCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-history\"></i>\n                                        <h4>No Execution History</h4>\n                                        <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"timeline-list\">\n                                        @for (execution of recentExecutions; track execution.ID) {\n                                            <div class=\"timeline-item\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n                                                <div>\n                                                    <div class=\"timeline-marker\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                        <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n                                                    </div>\n                                                    <div class=\"timeline-content\">\n                                                    <div class=\"timeline-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n                                                        <div>\n                                                            <div class=\"timeline-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                                                                <span class=\"timeline-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</span>\n                                                            </div>\n                                                        <div class=\"timeline-meta\">\n                                                            <span class=\"status-badge\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                                {{ execution.Status || 'Unknown' }}\n                                                            </span>\n                                                            @if (execution.CompletedAt) {\n                                                                <span class=\"execution-time\">\n                                                                    <i class=\"fa-solid fa-stopwatch\"></i>\n                                                                    {{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}\n                                                                </span>\n                                                            }\n                                                        </div>\n                                                        @if (execution.Result && !expandedExecutions[execution.ID]) {\n                                                            <div class=\"timeline-preview\">{{ getExecutionResultPreview(execution) }}</div>\n                                                        }\n                                                        </div>\n                                                    </div>\n                                                    @if (expandedExecutions[execution.ID]) {\n                                                        <div class=\"timeline-expanded-content\">\n                                                            @if (execution.Result) {\n                                                                <div class=\"result-section\">\n                                                                    <h5>Result</h5>\n                                                                    <div class=\"result-content\">{{ getExecutionResultMessage(execution) }}</div>\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 class=\"execution-details\">\n                                                                <div class=\"detail-row\">\n                                                                    <span class=\"detail-label\">Started:</span>\n                                                                    <span class=\"detail-value\">{{ execution.StartedAt | date:'medium' }}</span>\n                                                                </div>\n                                                                @if (execution.CompletedAt) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Completed:</span>\n                                                                        <span class=\"detail-value\">{{ execution.CompletedAt | date:'medium' }}</span>\n                                                                    </div>\n                                                                }\n                                                                @if (execution.ConversationID) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Conversation:</span>\n                                                                        <span class=\"detail-value\">{{ execution.ConversationID }}</span>\n                                                                    </div>\n                                                                }\n                                                            </div>\n                                                            <div class=\"timeline-actions\">\n                                                                <button class=\"btn-primary\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\">\n                                                                    <i class=\"fa-solid fa-external-link-alt\"></i> View Full Details\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    }\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (executionHistoryCount > recentExecutions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Runs', '')\">\n                                                <span>View all {{ executionHistoryCount }} executions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Details (Core Configuration - Last Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\" title=\"Details\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-info-circle\"></i> Details\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"form-fields-grid\">\n                                <ng-content></ng-content>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n            </kendo-panelbar>\n        </div>\n    </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n    flex: 1;\n    margin-right: 16px;\n}\n\n/* Model Selection Mode */\n.model-selection-mode {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: #f0f7ff;\n    border: 1px solid #cce5ff;\n    border-radius: 8px;\n}\n\n.model-selection-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #0066cc;\n    margin: 0;\n}\n\n.model-selection-label i {\n    font-size: 14px;\n}\n\n.model-selection-dropdown {\n    min-width: 140px;\n    height: 32px;\n}\n\n.model-selection-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: #495057;\n    padding: 4px 12px;\n    background: white;\n    border-radius: 6px;\n    border: 1px solid #dee2e6;\n}\n\n.agent-meta-info {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary:hover {\n    background: #5a6268;\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: white;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n    color: white;\n}\n\n.item-icon img.sub-agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n    opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n    color: #2196f3;\n}\n\n.view-more-item {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n    opacity: 1;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: white;\n}\n\n.card-title-section {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item i {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: #6c757d;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error i {\n    flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section,\n.error-section {\n    margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.result-content,\n.error-content {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.error-content {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n    font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    /* Header Responsiveness */\n    .agent-header {\n        padding: 16px;\n    }\n    \n    .agent-header-content {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    /* Panel Responsiveness */\n    .form-content {\n        padding: 12px;\n    }\n    \n    ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content {\n        padding: 20px 16px;\n    }\n    \n    .section-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    /* Entity List Responsiveness */\n    .entity-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon i {\n        font-size: 16px;\n    }\n    \n    .item-title {\n        font-size: 15px;\n    }\n    \n    .item-preview {\n        font-size: 13px;\n    }\n    \n    .item-meta {\n        gap: 8px;\n    }\n    \n    /* Timeline Responsiveness */\n    .timeline-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker i {\n        font-size: 12px;\n    }\n    \n    .timeline-title {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date {\n        align-self: flex-start;\n    }\n    \n    /* Form Field Responsiveness */\n    .form-fields-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    /* Legacy card support */\n    .cards-container {\n        grid-template-columns: 1fr;\n    }\n}"] }]
     }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.DialogService }, { type: i0.ViewContainerRef }, { type: i4.NewAgentDialogService }, { type: i5.ActionGalleryDialogService }, { type: i6.AITestHarnessDialogService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 52 }); })();
 export function LoadAIAgentFormComponentExtended() {