npm - @memberjunction/ng-core-entity-forms - Versions diffs - 2.54.0 → 2.55.0 - Mend

@memberjunction/ng-core-entity-forms 2.54.0 → 2.55.0

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

Files changed (77) hide show

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

@@ -15,25 +15,27 @@ import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
 import * as i3 from "@progress/kendo-angular-dialog";
-import * as i4 from "@angular/common";
-import * as i5 from "@angular/forms";
-import * as i6 from "@progress/kendo-angular-layout";
-import * as i7 from "@progress/kendo-angular-inputs";
-import * as i8 from "@progress/kendo-angular-buttons";
-import * as i9 from "@memberjunction/ng-form-toolbar";
-import * as i10 from "../ai-test-harness/ai-test-harness.component";
+import * as i4 from "./new-agent-dialog.service";
+import * as i5 from "@memberjunction/ng-action-gallery";
+import * as i6 from "@memberjunction/ng-ai-test-harness";
+import * as i7 from "@angular/common";
+import * as i8 from "@angular/forms";
+import * as i9 from "@progress/kendo-angular-layout";
+import * as i10 from "@progress/kendo-angular-inputs";
+import * as i11 from "@progress/kendo-angular-buttons";
+import * as i12 from "@memberjunction/ng-form-toolbar";
 const _c0 = ["*"];
 const _forTrack0 = ($index, $item) => $item.ID;
-function AIAgentFormComponentExtended_form_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-textbox", 27);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_1_Conditional_9_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_Conditional_9_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Name);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h1", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -42,7 +44,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_10_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Untitled AI Agent");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 28);
     i0.ɵɵelement(1, "i", 29);
     i0.ɵɵtext(2);
@@ -53,7 +55,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_12_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Status, " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵelement(1, "i");
     i0.ɵɵtext(2);
@@ -65,7 +67,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_13_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.record.ExecutionMode, " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 17);
     i0.ɵɵelement(1, "i", 30);
     i0.ɵɵtext(2);
@@ -75,10 +77,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_14_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" Child of ", ctx_r2.record.Parent, " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 31);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_16_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openTestHarness()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_16_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openTestHarness()); });
     i0.ɵɵelement(1, "i", 32);
     i0.ɵɵtext(2, " Run ");
     i0.ɵɵelementEnd();
@@ -86,7 +88,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_16_Template(rf, ctx) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r2.record.Status !== "Active");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 33);
     i0.ɵɵtext(1);
 } if (rf & 2) {
@@ -94,23 +96,23 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_1_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Prompts", ctx_r2.promptCount > 0 ? " (" + ctx_r2.promptCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 40);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_3_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.addPrompt()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_3_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.addPrompt()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 43);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_4_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addPrompt()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_4_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addPrompt()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Create First Prompt ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementStart(2, "h4");
@@ -119,14 +121,14 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_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_1_Conditional_21_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "kendo-button", 42);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "kendo-button", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -135,7 +137,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", prompt_r8.TemplateText.substring(0, 120), "", prompt_r8.TemplateText.length > 120 ? "..." : "", "");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -144,29 +146,29 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(prompt_r8.PromptRole);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 57);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_10_Template_kendo_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const prompt_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.removePrompt(prompt_r8, $event)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_10_Template_kendo_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const prompt_r8 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.removePrompt(prompt_r8, $event)); });
     i0.ɵɵelement(1, "i", 58);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const prompt_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Prompts", prompt_r8.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const prompt_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Prompts", prompt_r8.ID)); });
     i0.ɵɵelementStart(1, "div", 47);
     i0.ɵɵelement(2, "i", 48);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 49)(4, "div", 50);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 2, "div", 51);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 2, "div", 51);
     i0.ɵɵelementStart(7, "div", 52);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 53);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 53);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 54);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_10_Template, 2, 0, "kendo-button", 55);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Conditional_10_Template, 2, 0, "kendo-button", 55);
     i0.ɵɵelement(11, "i", 56);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -181,10 +183,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.EditMode ? 10 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Prompts", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Prompts", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -193,10 +195,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r2.promptCount, " prompts...");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_For_2_Template, 12, 4, "div", 44, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_For_2_Template, 12, 4, "div", 44, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -205,11 +207,11 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.promptCount > ctx_r2.agentPrompts.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_3_Template, 3, 0, "kendo-button", 37);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_3_Template, 3, 0, "kendo-button", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_4_Template, 7, 1, "div", 38)(5, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_4_Template, 7, 1, "div", 38)(5, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -218,14 +220,14 @@ function AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.promptCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 23);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Template, 6, 2, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_21_ng_template_2_Template, 6, 2, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", true);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 60);
     i0.ɵɵtext(1);
 } if (rf & 2) {
@@ -233,23 +235,23 @@ function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_1_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Actions", ctx_r2.actionCount > 0 ? " (" + ctx_r2.actionCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 40);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_3_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.configureActions()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.configureActions()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 43);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.configureActions()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.configureActions()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Configure First Action ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementStart(2, "h4");
@@ -258,14 +260,14 @@ function AIAgentFormComponentExtended_form_1_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_1_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "kendo-button", 42);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "kendo-button", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -274,7 +276,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(action_r14.Description);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -283,32 +285,32 @@ function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(action_r14.Type);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 66);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template_kendo_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const action_r14 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.removeAction(action_r14, $event)); });
+    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(_r15); const action_r14 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.removeAction(action_r14, $event)); });
     i0.ɵɵelement(1, "i", 58);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const action_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("Actions", action_r14.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const action_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("Actions", action_r14.ID)); });
     i0.ɵɵelementStart(1, "div", 47);
     i0.ɵɵelement(2, "i", 60);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 49)(4, "div", 50);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 1, "div", 51);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 1, "div", 51);
     i0.ɵɵelementStart(7, "div", 52);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 53);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 53);
     i0.ɵɵelementStart(9, "span", 63);
     i0.ɵɵelement(10, "i", 64);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(12, "div", 54);
-    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "kendo-button", 65);
+    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "kendo-button", 65);
     i0.ɵɵelement(14, "i", 56);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -329,10 +331,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.EditMode ? 13 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Actions", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Actions", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -341,10 +343,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r2.actionCount, " actions...");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_For_2_Template, 15, 13, "div", 61, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template, 15, 13, "div", 61, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -353,11 +355,11 @@ function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.actionCount > ctx_r2.agentActions.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_3_Template, 3, 0, "kendo-button", 37);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template, 3, 0, "kendo-button", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_4_Template, 7, 1, "div", 38)(5, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Template, 7, 1, "div", 38)(5, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -366,15 +368,15 @@ function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.actionCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 23);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_2_Template, 6, 2, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template, 6, 2, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("expanded", ctx_r2.actionCount > 0);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 30);
     i0.ɵɵtext(1);
 } if (rf & 2) {
@@ -382,23 +384,23 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_1_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Sub-Agents", ctx_r2.subAgentCount > 0 ? " (" + ctx_r2.subAgentCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 40);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_5_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.createSubAgent()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.createSubAgent()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Add Sub-Agent ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 43);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.createSubAgent()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.createSubAgent()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Create First Sub-Agent ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelement(1, "i", 30);
     i0.ɵɵelementStart(2, "h4");
@@ -407,14 +409,14 @@ function AIAgentFormComponentExtended_form_1_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_1_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "kendo-button", 42);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "kendo-button", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -423,7 +425,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(subAgent_r20.Description);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 63);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -434,7 +436,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", subAgent_r20.Status, " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -443,19 +445,19 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(subAgent_r20.ExecutionMode);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 69);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const subAgent_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agents", subAgent_r20.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const subAgent_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agents", subAgent_r20.ID)); });
     i0.ɵɵelementStart(1, "div", 47);
     i0.ɵɵelement(2, "i", 10);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 49)(4, "div", 50);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 1, "div", 51);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 1, "div", 51);
     i0.ɵɵelementStart(7, "div", 52);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 2, 3, "span", 70)(9, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 1, "span", 53);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 2, 3, "span", 70)(9, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 1, "span", 53);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(10, "div", 54);
     i0.ɵɵelement(11, "i", 56);
@@ -471,10 +473,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(subAgent_r20.ExecutionMode ? 9 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agents", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agents", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -483,10 +485,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r2.subAgentCount, " sub-agents...");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_For_2_Template, 12, 4, "div", 68, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 45);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Template, 12, 4, "div", 68, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -495,14 +497,14 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.subAgentCount > ctx_r2.subAgents.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 67);
     i0.ɵɵtext(3, " Manage hierarchical relationships with child agents that work under this agent. ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 36);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_5_Template, 3, 0, "kendo-button", 37);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template, 3, 0, "kendo-button", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_6_Template, 7, 1, "div", 38)(7, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Conditional_7_Template, 4, 1, "div", 39);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Template, 7, 1, "div", 38)(7, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -511,15 +513,15 @@ function AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.subAgentCount === 0 ? 6 : 7);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 23);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_1_Conditional_23_ng_template_2_Template, 8, 2, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template, 8, 2, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("expanded", ctx_r2.subAgentCount > 0);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 71);
     i0.ɵɵtext(1);
 } if (rf & 2) {
@@ -527,7 +529,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_1_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Learning Cycles", ctx_r2.learningCycleCount > 0 ? " (" + ctx_r2.learningCycleCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelement(1, "i", 71);
     i0.ɵɵelementStart(2, "h4");
@@ -537,7 +539,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Condit
     i0.ɵɵtext(5, "Learning cycles will appear here as the agent processes requests and improves over time.");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵelement(1, "i", 74);
     i0.ɵɵtext(2);
@@ -548,7 +550,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r23.StartedAt, "short"), " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 63);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -557,10 +559,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cycle_r23.Status);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 73);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Learning Cycles", cycle_r23.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Learning Cycles", cycle_r23.ID)); });
     i0.ɵɵelementStart(1, "div", 47);
     i0.ɵɵelement(2, "i", 71);
     i0.ɵɵelementEnd();
@@ -568,7 +570,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Condit
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 52);
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 53)(8, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 63);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 53)(8, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 63);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 54);
     i0.ɵɵelement(10, "i", 56);
@@ -582,10 +584,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(cycle_r23.Status ? 8 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Learning Cycles", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Learning Cycles", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -594,10 +596,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r2.learningCycleCount, " cycles...");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 72, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 72, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -606,25 +608,25 @@ function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.learningCycleCount > ctx_r2.learningCycles.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 67);
     i0.ɵɵtext(3, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_4_Template, 6, 0, "div", 38)(5, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_4_Template, 6, 0, "div", 38)(5, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r2.learningCycleCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 23);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_1_Conditional_24_ng_template_2_Template, 6, 1, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Template, 6, 1, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 75);
     i0.ɵɵtext(1);
 } if (rf & 2) {
@@ -632,23 +634,23 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_1_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Notes", ctx_r2.noteCount > 0 ? " (" + ctx_r2.noteCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 40);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_5_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.addNote()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.addNote()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-button", 43);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addNote()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.addNote()); });
     i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Create First Note ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelement(1, "i", 75);
     i0.ɵɵelementStart(2, "h4");
@@ -657,14 +659,14 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_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_1_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "kendo-button", 42);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "kendo-button", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
     i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -673,7 +675,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2("", note_r28.Note.substring(0, 100), "", note_r28.Note.length > 100 ? "..." : "", "");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵelement(1, "i", 74);
     i0.ɵɵtext(2);
@@ -684,19 +686,19 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, note_r28.__mj_CreatedAt, "short"), " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 77);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Notes", note_r28.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Notes", note_r28.ID)); });
     i0.ɵɵelementStart(1, "div", 47);
     i0.ɵɵelement(2, "i", 75);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 49)(4, "div", 50);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 51);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 51);
     i0.ɵɵelementStart(7, "div", 52);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 53);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 53);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(9, "div", 54);
     i0.ɵɵelement(10, "i", 56);
@@ -710,10 +712,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(note_r28.__mj_CreatedAt ? 8 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Notes", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Notes", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -722,10 +724,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r2.noteCount, " notes...");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 76, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 45);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 76, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -734,14 +736,14 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.noteCount > ctx_r2.agentNotes.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 67);
     i0.ɵɵtext(3, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 36);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_5_Template, 3, 0, "kendo-button", 37);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template, 3, 0, "kendo-button", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_6_Template, 7, 1, "div", 38)(7, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Conditional_7_Template, 4, 1, "div", 39);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_6_Template, 7, 1, "div", 38)(7, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_7_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -750,14 +752,14 @@ function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Templa
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.noteCount === 0 ? 6 : 7);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 23);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_2_Template, 8, 2, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Template, 8, 2, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 78);
     i0.ɵɵtext(1);
 } if (rf & 2) {
@@ -765,7 +767,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_1_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Execution History", ctx_r2.executionHistoryCount > 0 ? " (" + ctx_r2.executionHistoryCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelement(1, "i", 78);
     i0.ɵɵelementStart(2, "h4");
@@ -775,7 +777,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵtext(5, "This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.");
     i0.ɵɵelementEnd()();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 89);
     i0.ɵɵelement(1, "i", 92);
     i0.ɵɵtext(2);
@@ -786,7 +788,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.formatExecutionTimeFromDates(execution_r31.StartedAt, execution_r31.CompletedAt), " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 90);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -796,7 +798,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.getExecutionResultPreview(execution_r31));
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 93)(1, "h5");
     i0.ɵɵtext(2, "Result");
     i0.ɵɵelementEnd();
@@ -809,7 +811,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.getExecutionResultMessage(execution_r31));
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 94)(1, "h5");
     i0.ɵɵelement(2, "i", 103);
     i0.ɵɵtext(3, " Error");
@@ -822,7 +824,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(execution_r31.ErrorMessage);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 96)(1, "span", 97);
     i0.ɵɵtext(2, "Completed:");
     i0.ɵɵelementEnd();
@@ -835,7 +837,7 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, execution_r31.CompletedAt, "medium"));
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 96)(1, "span", 97);
     i0.ɵɵtext(2, "Conversation:");
     i0.ɵɵelementEnd();
@@ -847,10 +849,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(execution_r31.ConversationID);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_1_Template, 5, 1, "div", 93)(2, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_2_Template, 6, 1, "div", 94);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_1_Template, 5, 1, "div", 93)(2, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_2_Template, 6, 1, "div", 94);
     i0.ɵɵelementStart(3, "div", 95)(4, "div", 96)(5, "span", 97);
     i0.ɵɵtext(6, "Started:");
     i0.ɵɵelementEnd();
@@ -858,10 +860,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_10_Template, 6, 4, "div", 96)(11, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_11_Template, 5, 1, "div", 96);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_10_Template, 6, 4, "div", 96)(11, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Conditional_11_Template, 5, 1, "div", 96);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "div", 99)(13, "button", 100);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Template_button_click_13_listener($event) { i0.ɵɵrestoreView(_r32); const execution_r31 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.openExecutionRecord(execution_r31.ID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Template_button_click_13_listener($event) { i0.ɵɵrestoreView(_r32); const execution_r31 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(5); ctx_r2.openExecutionRecord(execution_r31.ID); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelement(14, "i", 101);
     i0.ɵɵtext(15, " View Full Details ");
     i0.ɵɵelementEnd()()();
@@ -878,13 +880,13 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(execution_r31.ConversationID ? 11 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 81)(1, "div")(2, "div", 82);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 83)(5, "div", 84);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Template_div_click_5_listener() { const execution_r31 = i0.ɵɵrestoreView(_r30).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.toggleExecutionExpanded(execution_r31.ID)); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Template_div_click_5_listener() { const execution_r31 = i0.ɵɵrestoreView(_r30).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.toggleExecutionExpanded(execution_r31.ID)); });
     i0.ɵɵelementStart(6, "div")(7, "div", 85);
     i0.ɵɵelement(8, "i", 86);
     i0.ɵɵtext(9);
@@ -895,11 +897,11 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵelementStart(13, "div", 88)(14, "span", 28);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(16, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_16_Template, 3, 1, "span", 89);
+    i0.ɵɵtemplate(16, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_16_Template, 3, 1, "span", 89);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_17_Template, 2, 1, "div", 90);
+    i0.ɵɵtemplate(17, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_17_Template, 2, 1, "div", 90);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(18, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Template, 16, 8, "div", 91);
+    i0.ɵɵtemplate(18, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_18_Template, 16, 8, "div", 91);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const execution_r31 = ctx.$implicit;
@@ -926,10 +928,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.expandedExecutions[execution_r31.ID] ? 18 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Runs", "")); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Runs", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -938,10 +940,10 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r2.executionHistoryCount, " executions...");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Template, 19, 19, "div", 80, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_For_2_Template, 19, 19, "div", 80, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -950,34 +952,34 @@ function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.executionHistoryCount > ctx_r2.recentExecutions.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 67);
     i0.ɵɵtext(3, " Review execution history, requests, and performance metrics for this agent. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_4_Template, 6, 0, "div", 38)(5, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_Template, 4, 1, "div", 79);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_4_Template, 6, 0, "div", 38)(5, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template, 4, 1, "div", 79);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r2.executionHistoryCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 23);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Template, 6, 1, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Template, 6, 1, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_1_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_ng_template_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 105);
     i0.ɵɵtext(1, " Details ");
 } }
-function AIAgentFormComponentExtended_form_1_ng_template_29_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_ng_template_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34)(1, "div", 106);
     i0.ɵɵprojection(2);
     i0.ɵɵelementEnd()();
 } }
-function AIAgentFormComponentExtended_form_1_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "form", 4, 0);
     i0.ɵɵelement(2, "mj-form-toolbar", 5);
@@ -985,20 +987,20 @@ function AIAgentFormComponentExtended_form_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(7, "i", 10);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "div", 11);
-    i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_1_Conditional_9_Template, 1, 1, "kendo-textbox", 12)(10, AIAgentFormComponentExtended_form_1_Conditional_10_Template, 2, 1, "h1", 13);
+    i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_2_Conditional_9_Template, 1, 1, "kendo-textbox", 12)(10, AIAgentFormComponentExtended_form_2_Conditional_10_Template, 2, 1, "h1", 13);
     i0.ɵɵelementStart(11, "div", 14);
-    i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_1_Conditional_12_Template, 3, 3, "span", 15)(13, AIAgentFormComponentExtended_form_1_Conditional_13_Template, 3, 3, "span", 16)(14, AIAgentFormComponentExtended_form_1_Conditional_14_Template, 3, 1, "span", 17);
+    i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_2_Conditional_12_Template, 3, 3, "span", 15)(13, AIAgentFormComponentExtended_form_2_Conditional_13_Template, 3, 3, "span", 16)(14, AIAgentFormComponentExtended_form_2_Conditional_14_Template, 3, 1, "span", 17);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(15, "div", 18);
-    i0.ɵɵtemplate(16, AIAgentFormComponentExtended_form_1_Conditional_16_Template, 3, 1, "kendo-button", 19);
+    i0.ɵɵtemplate(16, AIAgentFormComponentExtended_form_2_Conditional_16_Template, 3, 1, "kendo-button", 19);
     i0.ɵɵelementStart(17, "kendo-button", 20);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Template_kendo_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.refreshRelatedData()); });
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Template_kendo_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.refreshRelatedData()); });
     i0.ɵɵelement(18, "i", 21);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(19, "div", 22)(20, "kendo-panelbar");
-    i0.ɵɵtemplate(21, AIAgentFormComponentExtended_form_1_Conditional_21_Template, 3, 1, "kendo-panelbar-item", 23)(22, AIAgentFormComponentExtended_form_1_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 23)(23, AIAgentFormComponentExtended_form_1_Conditional_23_Template, 3, 1, "kendo-panelbar-item", 23)(24, AIAgentFormComponentExtended_form_1_Conditional_24_Template, 3, 1, "kendo-panelbar-item", 23)(25, AIAgentFormComponentExtended_form_1_Conditional_25_Template, 3, 1, "kendo-panelbar-item", 23)(26, AIAgentFormComponentExtended_form_1_Conditional_26_Template, 3, 1, "kendo-panelbar-item", 23);
+    i0.ɵɵtemplate(21, AIAgentFormComponentExtended_form_2_Conditional_21_Template, 3, 1, "kendo-panelbar-item", 23)(22, AIAgentFormComponentExtended_form_2_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 23)(23, AIAgentFormComponentExtended_form_2_Conditional_23_Template, 3, 1, "kendo-panelbar-item", 23)(24, AIAgentFormComponentExtended_form_2_Conditional_24_Template, 3, 1, "kendo-panelbar-item", 23)(25, AIAgentFormComponentExtended_form_2_Conditional_25_Template, 3, 1, "kendo-panelbar-item", 23)(26, AIAgentFormComponentExtended_form_2_Conditional_26_Template, 3, 1, "kendo-panelbar-item", 23);
     i0.ɵɵelementStart(27, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(28, AIAgentFormComponentExtended_form_1_ng_template_28_Template, 2, 0, "ng-template", 25)(29, AIAgentFormComponentExtended_form_1_ng_template_29_Template, 3, 0, "ng-template", 26);
+    i0.ɵɵtemplate(28, AIAgentFormComponentExtended_form_2_ng_template_28_Template, 2, 0, "ng-template", 25)(29, AIAgentFormComponentExtended_form_2_ng_template_29_Template, 3, 0, "ng-template", 26);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -1029,20 +1031,6 @@ function AIAgentFormComponentExtended_form_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 107);
-    i0.ɵɵlistener("close", function AIAgentFormComponentExtended_Conditional_2_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTestHarnessVisibilityChanged(false)); });
-    i0.ɵɵelementStart(1, "mj-ai-test-harness", 108);
-    i0.ɵɵlistener("visibilityChange", function AIAgentFormComponentExtended_Conditional_2_Template_mj_ai_test_harness_visibilityChange_1_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTestHarnessVisibilityChanged($event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵpropertyInterpolate1("title", "Run AI Agent - ", ctx_r2.record.Name || "Untitled", "");
-    i0.ɵɵproperty("width", 1200)("height", 800)("minWidth", 800)("minHeight", 600)("draggable", true)("resizable", true)("state", "default");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("aiAgent", ctx_r2.record)("isVisible", ctx_r2.showTestHarness);
-} }
 /**
  * Enhanced AI Agent form component that extends the auto-generated base form
  * with comprehensive agent management capabilities including test harness integration,
@@ -1074,13 +1062,14 @@ function AIAgentFormComponentExtended_Conditional_2_Template(rf, ctx) { if (rf &
  * ```
  */
 let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AIAgentFormComponent {
-    constructor(elementRef, sharedService, router, route, cdr, dialogService, viewContainerRef) {
+    constructor(elementRef, sharedService, router, route, cdr, dialogService, viewContainerRef, newAgentDialogService, actionGalleryService, testHarnessService) {
         super(elementRef, sharedService, router, route, cdr);
         this.sharedService = sharedService;
         this.dialogService = dialogService;
         this.viewContainerRef = viewContainerRef;
-        /** Whether the test harness is currently visible */
-        this.showTestHarness = false;
+        this.newAgentDialogService = newAgentDialogService;
+        this.actionGalleryService = actionGalleryService;
+        this.testHarnessService = testHarnessService;
         // === Related Entity Counts ===
         /** Number of sub-agents under this agent */
         this.subAgentCount = 0;
@@ -1204,7 +1193,8 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             MJNotificationService.Instance.CreateSimpleNotification('Please save the AI agent before testing', 'warning', 4000);
             return;
         }
-        this.showTestHarness = true;
+        // Use the new test harness dialog service
+        this.testHarnessService.openForAgent(this.record.ID);
     }
     /**
      * Returns the appropriate color for the agent status badge.
@@ -1224,9 +1214,6 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
      * Updates the component state when the test harness is opened or closed.
      * @param isVisible - Whether the test harness is currently visible
      */
-    onTestHarnessVisibilityChanged(isVisible) {
-        this.showTestHarness = isVisible;
-    }
     /**
      * Gets the count of sub-agents
      */
@@ -1298,33 +1285,29 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         }
     }
     /**
-     * Opens the action configuration dialog
+     * Opens the enhanced action gallery for selecting actions
      */
     async configureActions() {
-        const config = {
-            entityName: 'Actions',
-            title: 'Select Action',
-            displayField: 'Name',
-            descriptionField: 'Description',
-            statusField: 'Status',
-            filters: `Status='Active'`,
-            orderBy: 'Name ASC',
-            icon: 'fa-solid fa-bolt'
-        };
-        const dialogRef = this.dialogService.open({
-            content: EntitySelectorDialogComponent
+        // Get currently linked action IDs for pre-selection
+        const linkedActionIds = this.agentActions.map(aa => aa.ID);
+        this.actionGalleryService.openForMultiSelection({
+            preSelectedActions: linkedActionIds,
+            showCategories: true,
+            enableQuickTest: true,
+            title: 'Select Actions for Agent',
+            submitButtonText: 'Add Selected Actions'
+        }, this.viewContainerRef).subscribe(async (selectedActions) => {
+            if (selectedActions && selectedActions.length > 0) {
+                // Find newly selected actions (not already linked)
+                const newActions = selectedActions.filter(action => !linkedActionIds.includes(action.ID));
+                // Link each new action to the agent
+                for (const action of newActions) {
+                    await this.linkActionToAgent(action);
+                }
+                // Reload the actions list
+                await this.loadRelatedCounts();
+            }
         });
-        const componentInstance = dialogRef.content.instance;
-        componentInstance.config = config;
-        const result = await dialogRef.result;
-        if (result && result.entity) {
-            // User selected an existing action
-            await this.linkActionToAgent(result.entity);
-        }
-        else if (result && result.createNew) {
-            // User wants to create a new action
-            await this.createNewAction();
-        }
     }
     /**
      * Gets the status icon for execution runs
@@ -1651,18 +1634,17 @@ 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)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 2, consts: [["form", "ngForm"], [1, "record-form-container"], ["class", "record-form", 4, "ngIf"], [3, "width", "height", "minWidth", "minHeight", "draggable", "resizable", "state", "title"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "fa-solid", "fa-robot"], [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-comments"], [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", "prompt-item"], [1, "view-more-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "item-icon"], [1, "fa-solid", "fa-comment-dots"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "item-actions"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], [1, "fa-solid", "fa-external-link"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "status-tag"], [1, "fa-solid"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "section-description"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "status-tag", 3, "background-color"], [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"], [3, "close", "width", "height", "minWidth", "minHeight", "draggable", "resizable", "state", "title"], [3, "visibilityChange", "aiAgent", "isVisible"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    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, "fa-solid", "fa-robot"], [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-comments"], [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", "prompt-item"], [1, "view-more-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "item-icon"], [1, "fa-solid", "fa-comment-dots"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "item-actions"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], [1, "fa-solid", "fa-external-link"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-bolt"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "status-tag"], [1, "fa-solid"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], ["fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "section-description"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "status-tag", 3, "background-color"], [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.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Template, 30, 13, "form", 2)(2, AIAgentFormComponentExtended_Conditional_2_Template, 2, 11, "kendo-window", 3);
+            i0.ɵɵelement(1, "div", 2);
+            i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_Template, 30, 13, "form", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance();
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.record);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showTestHarness ? 2 : -1);
-        } }, dependencies: [i4.NgIf, i5.ɵNgNoValidate, i5.NgControlStatus, i5.NgControlStatusGroup, i5.NgModel, i5.NgForm, i6.PanelBarComponent, i6.PanelBarItemComponent, i6.PanelBarContentDirective, i6.PanelBarItemTitleDirective, i3.WindowComponent, i7.TextBoxComponent, i8.ButtonComponent, i9.FormToolbarComponent, i10.AITestHarnessComponent, i4.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.agent-header[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n.agent-meta-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n\n\n.agent-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary[_ngcontent-%COMP%] {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n    background: #5a6268;\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.form-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n\n\n  .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n  .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n  .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n  .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: white;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n    gap: 16px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n\n\n.form-fields-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.sub-grid-container[_ngcontent-%COMP%] {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; \n\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag[_ngcontent-%COMP%], \n.priority-tag[_ngcontent-%COMP%], \n.status-tag[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n    opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child   .timeline-marker[_ngcontent-%COMP%]::after {\n    display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n    \n\n    .agent-header[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n    \n    .agent-header-content[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    \n\n    .form-content[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n    \n      .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content[_ngcontent-%COMP%] {\n        padding: 20px 16px;\n    }\n    \n    .section-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    \n\n    .entity-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%] {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n    \n    .item-title[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n    \n    .item-preview[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n    \n    .item-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n    \n    \n\n    .timeline-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .timeline-title[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date[_ngcontent-%COMP%] {\n        align-self: flex-start;\n    }\n    \n    \n\n    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    \n\n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"] }); }
+        } }, dependencies: [i7.NgIf, i8.ɵNgNoValidate, i8.NgControlStatus, i8.NgControlStatusGroup, i8.NgModel, i8.NgForm, i9.PanelBarComponent, i9.PanelBarItemComponent, i9.PanelBarContentDirective, i9.PanelBarItemTitleDirective, i3.DialogContainerDirective, i10.TextBoxComponent, i11.ButtonComponent, i12.FormToolbarComponent, i7.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.agent-header[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input[_ngcontent-%COMP%] {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending[_ngcontent-%COMP%] {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.parent-agent[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n.agent-meta-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description[_ngcontent-%COMP%] {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n\n\n.agent-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary[_ngcontent-%COMP%] {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary[_ngcontent-%COMP%] {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary[_ngcontent-%COMP%]:hover {\n    background: #5a6268;\n}\n\n.action-warnings[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n\n.form-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n\n\n  .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n  .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n  .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n  .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n  .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n  .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n  .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: white;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n    gap: 16px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section[_ngcontent-%COMP%] {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n\n\n.form-fields-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.sub-grid-container[_ngcontent-%COMP%] {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; \n\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card[_ngcontent-%COMP%]:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.sub-agent-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.model-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.learning-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.note-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag[_ngcontent-%COMP%], \n.priority-tag[_ngcontent-%COMP%], \n.status-tag[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag[_ngcontent-%COMP%] {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag[_ngcontent-%COMP%] {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active[_ngcontent-%COMP%] {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.view-more-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n    opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child   .timeline-marker[_ngcontent-%COMP%]::after {\n    display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n    \n\n    .agent-header[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n    \n    .agent-header-content[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    \n\n    .form-content[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n    \n      .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content[_ngcontent-%COMP%] {\n        padding: 20px 16px;\n    }\n    \n    .section-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    \n\n    .entity-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%] {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n    \n    .item-title[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n    \n    .item-preview[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n    \n    .item-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n    \n    \n\n    .timeline-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .timeline-title[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date[_ngcontent-%COMP%] {\n        align-self: flex-start;\n    }\n    \n    \n\n    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    \n\n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"] }); }
 };
 AIAgentFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'AI Agents')
@@ -1670,9 +1652,9 @@ 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    <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                        <i class=\"fa-solid fa-robot\"></i>\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                <!-- Prompts (High Priority - Expanded by default for existing agents) -->\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=\"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.Type || 'System Prompt' }}</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                <!-- Actions (High Priority - Expanded by default for existing agents) -->\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=\"fa-solid fa-bolt\"></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 (High Priority - Expanded by default for existing agents) -->\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                                                    <i class=\"fa-solid fa-robot\"></i>\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\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    <!-- AI Agent Test Harness -->\n    @if (showTestHarness) {\n        <kendo-window \n            [width]=\"1200\" \n            [height]=\"800\" \n            [minWidth]=\"800\"\n            [minHeight]=\"600\"\n            [draggable]=\"true\"\n            [resizable]=\"true\"\n            [state]=\"'default'\"\n            (close)=\"onTestHarnessVisibilityChanged(false)\"\n            title=\"Run AI Agent - {{ record.Name || 'Untitled' }}\">\n            <mj-ai-test-harness\n                [aiAgent]=\"record\"\n                [isVisible]=\"showTestHarness\"\n                (visibilityChange)=\"onTestHarnessVisibilityChanged($event)\">\n            </mj-ai-test-harness>\n        </kendo-window>\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-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.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: flex-start;\n    margin-bottom: 20px;\n    gap: 16px;\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-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 }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 49 }); })();
+        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                        <i class=\"fa-solid fa-robot\"></i>\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                <!-- Prompts (High Priority - Expanded by default for existing agents) -->\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=\"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.Type || 'System Prompt' }}</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                <!-- Actions (High Priority - Expanded by default for existing agents) -->\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=\"fa-solid fa-bolt\"></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 (High Priority - Expanded by default for existing agents) -->\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                                                    <i class=\"fa-solid fa-robot\"></i>\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\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-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.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: flex-start;\n    margin-bottom: 20px;\n    gap: 16px;\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-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() {
     // This function is called to ensure the component is loaded and registered
 }