@memberjunction/ng-core-entity-forms 2.50.0 → 2.52.0

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

@@ -7,220 +7,1117 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component } from '@angular/core';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
-import { Metadata } from '@memberjunction/core';
+import { CompositeKey, Metadata, RunView } from '@memberjunction/core';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { AIAgentFormComponent } from '../../generated/Entities/AIAgent/aiagent.form.component';
+import { EntitySelectorDialogComponent } from '../shared/entity-selector-dialog.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-layout";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-dropdowns";
-import * as i6 from "@progress/kendo-angular-buttons";
-import * as i7 from "@memberjunction/ng-user-view-grid";
-import * as i8 from "@memberjunction/ng-form-toolbar";
-import * as i9 from "@memberjunction/ng-container-directives";
-import * as i10 from "./ai-agent-execution-dialog.component";
+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 "@memberjunction/ng-container-directives";
+import * as i11 from "../ai-test-harness/ai-test-harness.component";
 const _c0 = ["*"];
-const _c1 = () => ({ text: "Active", value: "Active" });
-const _c2 = () => ({ text: "Pending", value: "Pending" });
-const _c3 = () => ({ text: "Disabled", value: "Disabled" });
-const _c4 = (a0, a1, a2) => [a0, a1, a2];
+const _forTrack0 = ($index, $item) => $item.ID;
 function AIAgentFormComponentExtended_form_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textbox", 23);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_1_Conditional_9_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Name, $event) || (ctx_r1.record.Name = $event); return i0.ɵɵresetView($event); });
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Name);
+    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) {
-    i0.ɵɵelementStart(0, "h4", 24);
+    i0.ɵɵelementStart(0, "h1", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 25);
-    i0.ɵɵtext(3);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Untitled AI Agent");
+} }
+function AIAgentFormComponentExtended_form_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 28);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("background-color", ctx_r2.getStatusBadgeColor());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Status, " ");
+} }
+function AIAgentFormComponentExtended_form_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled AI Agent");
+    i0.ɵɵclassMap(ctx_r2.getExecutionModeIcon(ctx_r2.record.ExecutionMode));
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r1.getStatusBadgeColor());
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.ExecutionMode, " ");
+} }
+function AIAgentFormComponentExtended_form_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Child of ", ctx_r2.record.Parent, " ");
+} }
+function AIAgentFormComponentExtended_form_1_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.ɵɵelement(1, "i", 32);
+    i0.ɵɵtext(2, " Run ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    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) {
+    i0.ɵɵelement(0, "i", 33);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Status, " ");
+    i0.ɵɵtextInterpolate1(" Prompts", ctx_r2.promptCount > 0 ? " (" + ctx_r2.promptCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "div")(2, "label", 26);
-    i0.ɵɵtext(3, "Status");
+function AIAgentFormComponentExtended_form_1_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.ɵɵ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) {
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Prompts Configured");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Add prompts to define how this agent processes requests and generates responses.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_Conditional_21_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "kendo-button", 42);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "kendo-dropdownlist", 27);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_1_Conditional_11_Template_kendo_dropdownlist_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.record.Status, $event) || (ctx_r1.record.Status = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.Status);
-    i0.ɵɵproperty("data", i0.ɵɵpureFunction3(6, _c4, i0.ɵɵpureFunction0(3, _c1), i0.ɵɵpureFunction0(4, _c2), i0.ɵɵpureFunction0(5, _c3)))("valuePrimitive", true);
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 14);
+function AIAgentFormComponentExtended_form_1_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();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const prompt_r8 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.record.Description, " ");
+    i0.ɵɵtextInterpolate2("", prompt_r8.TemplateText.substring(0, 120), "", prompt_r8.TemplateText.length > 120 ? "..." : "", "");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-button", 28);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_15_Template_kendo_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.executeAIAgent()); });
-    i0.ɵɵelement(1, "i", 29);
-    i0.ɵɵtext(2, " Execute Agent ");
+function AIAgentFormComponentExtended_form_1_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();
+} if (rf & 2) {
+    const prompt_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(prompt_r8.PromptRole);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-button", 18);
-    i0.ɵɵelement(1, "i", 30);
-    i0.ɵɵtext(2, " Cannot Execute ");
+function AIAgentFormComponentExtended_form_1_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.ɵɵelement(1, "i", 58);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("disabled", true);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-button", 19);
-    i0.ɵɵelement(1, "i", 31);
-    i0.ɵɵtext(2, " History ");
+function AIAgentFormComponentExtended_form_1_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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵelement(11, "i", 56);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const prompt_r8 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(prompt_r8.Type || "System Prompt");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(prompt_r8.TemplateText ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(prompt_r8.PromptRole ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 10 : -1);
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " \u2022 Agent must be Active");
-    i0.ɵɵelement(1, "br");
+function AIAgentFormComponentExtended_form_1_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.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("View all ", ctx_r2.promptCount, " prompts...");
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_18_Conditional_1_Template, 2, 0, "br");
+function AIAgentFormComponentExtended_form_1_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.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.Status !== "Active" ? 1 : -1);
+    i0.ɵɵrepeater(ctx_r2.agentPrompts);
+    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) {
+    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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.promptCount === 0 ? 4 : 5);
+} }
+function AIAgentFormComponentExtended_form_1_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.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("expanded", true);
 } }
 function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
-    i0.ɵɵelement(1, "i", 37);
-    i0.ɵɵtext(2, " Execution History ");
+    i0.ɵɵelement(0, "i", 60);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    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) {
+    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.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Add Action ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
-    i0.ɵɵelement(1, "i", 38);
-    i0.ɵɵtext(2, " Agent Prompts ");
+function AIAgentFormComponentExtended_form_1_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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Actions Configured");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Add actions to enable this agent to perform specific tasks and operations.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_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) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r14 = i0.ɵɵnextContext().$implicit;
+    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) {
+    i0.ɵɵelementStart(0, "span", 53);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r14 = i0.ɵɵnextContext().$implicit;
+    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) {
+    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.ɵɵ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) {
+    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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵelement(14, "i", 56);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const action_r14 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(action_r14.Name || "Untitled Action");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(action_r14.Description ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(action_r14.Type ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", action_r14.Status === "Active")("inactive", action_r14.Status !== "Active");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-check-circle", action_r14.Status === "Active")("fa-times-circle", action_r14.Status !== "Active");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", action_r14.Status, " ");
+    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) {
+    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.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    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) {
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.agentActions);
+    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) {
+    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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.actionCount === 0 ? 4 : 5);
 } }
 function AIAgentFormComponentExtended_form_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-expansionpanel", 32);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_1_Template, 3, 0, "ng-template", 33);
-    i0.ɵɵelementStart(2, "div", 34);
-    i0.ɵɵelement(3, "mj-user-view-grid", 35);
+    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.ɵɵ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) {
+    i0.ɵɵelement(0, "i", 30);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    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) {
+    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.ɵɵ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) {
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Sub-Agents");
+    i0.ɵɵelementEnd();
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const subAgent_r20 = i0.ɵɵnextContext().$implicit;
+    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) {
+    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const subAgent_r20 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵstyleProp("background-color", ctx_r2.getStatusBadgeColor());
+    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) {
+    i0.ɵɵelementStart(0, "span", 53);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const subAgent_r20 = i0.ɵɵnextContext().$implicit;
+    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) {
+    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.ɵɵ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.ɵɵ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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 54);
+    i0.ɵɵelement(11, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "kendo-expansionpanel", 32);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_1_Conditional_22_ng_template_5_Template, 3, 0, "ng-template", 33);
-    i0.ɵɵelementStart(6, "div", 34);
-    i0.ɵɵelement(7, "mj-user-view-grid", 35);
+} if (rf & 2) {
+    const subAgent_r20 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(subAgent_r20.Name || "Untitled Sub-Agent");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(subAgent_r20.Description ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(subAgent_r20.Status ? 8 : -1);
+    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) {
+    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.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    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) {
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.subAgents);
+    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) {
+    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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.subAgentCount === 0 ? 6 : 7);
+} }
+function AIAgentFormComponentExtended_form_1_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.ɵɵ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) {
+    i0.ɵɵelement(0, "i", 71);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    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) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 71);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Learning Cycles");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    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) {
+    i0.ɵɵelementStart(0, "span", 53);
+    i0.ɵɵelement(1, "i", 74);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "date");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cycle_r23 = i0.ɵɵnextContext().$implicit;
+    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) {
+    i0.ɵɵelementStart(0, "span", 63);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cycle_r23 = i0.ɵɵnextContext().$implicit;
+    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) {
+    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.ɵɵelementStart(1, "div", 47);
+    i0.ɵɵelement(2, "i", 71);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 49)(4, "div", 50);
+    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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 54);
+    i0.ɵɵelement(10, "i", 56);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const cycle_r23 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Learning Cycle ", cycle_r23.ID.substring(0, 8), "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(cycle_r23.StartedAt ? 7 : -1);
+    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) {
+    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.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    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) {
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.learningCycles);
+    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) {
+    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.ɵɵ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) {
+    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.ɵɵelementEnd();
+} if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: AI Agent Runs", "AgentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: AI Agent Runs"))("AllowLoad", true)("EditMode", ctx_r1.GridEditMode())("BottomMargin", 0);
+} }
+function AIAgentFormComponentExtended_form_1_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 75);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    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) {
+    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.ɵɵ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) {
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 75);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Notes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Add notes to document important information, observations, or instructions for this agent.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_1_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) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const note_r28 = i0.ɵɵnextContext().$implicit;
+    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) {
+    i0.ɵɵelementStart(0, "span", 53);
+    i0.ɵɵelement(1, "i", 74);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "date");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const note_r28 = i0.ɵɵnextContext().$implicit;
+    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) {
+    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.ɵɵ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.ɵɵ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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 54);
+    i0.ɵɵelement(10, "i", 56);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const note_r28 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(note_r28.Type || "Note");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(note_r28.Note ? 6 : -1);
+    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) {
+    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.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    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) {
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.agentNotes);
+    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) {
+    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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 5 : -1);
     i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.noteCount === 0 ? 6 : 7);
+} }
+function AIAgentFormComponentExtended_form_1_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.ɵɵelementEnd();
+} if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
+} }
+function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 78);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    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) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 78);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Execution History");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    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_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 87);
+    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const execution_r31 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    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_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const execution_r31 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", execution_r31.Result.substring(0, 120), "", execution_r31.Result.length > 120 ? "..." : "", "");
+} }
+function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const execution_r31 = i0.ɵɵrestoreView(_r30).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Runs", execution_r31.ID)); });
+    i0.ɵɵelementStart(1, "div", 82);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 83)(4, "div", 84);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(6, "span", 85);
+    i0.ɵɵtext(7);
+    i0.ɵɵpipe(8, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 86)(10, "span", 28);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_12_Template, 3, 1, "span", 87);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 2, "div", 88);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const execution_r31 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r2.getExecutionStatusColor(execution_r31.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.getExecutionStatusIcon(execution_r31.Status));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: AI Agent Prompts", "AgentID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: AI Agent Prompts"))("AllowLoad", true)("EditMode", ctx_r1.GridEditMode())("BottomMargin", 0);
+    i0.ɵɵtextInterpolate1(" Execution #", execution_r31.ID.substring(0, 8), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 11, execution_r31.__mj_CreatedAt, "MMM d, h:mm a"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("background-color", ctx_r2.getExecutionStatusColor(execution_r31.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", execution_r31.Status || "Unknown", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(execution_r31.CompletedAt ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(execution_r31.Result ? 13 : -1);
+} }
+function AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = 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(_r32); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.navigateToEntity("AI Agent Runs", "")); });
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    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) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_1_Conditional_26_ng_template_2_Conditional_5_For_2_Template, 14, 14, "div", 80, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_1_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);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.recentExecutions);
+    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) {
+    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.ɵɵ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) {
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("expanded", false);
+} }
+function AIAgentFormComponentExtended_form_1_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 90);
+    i0.ɵɵtext(1, " Details ");
+} }
+function AIAgentFormComponentExtended_form_1_ng_template_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 91);
+    i0.ɵɵprojection(2);
+    i0.ɵɵelementEnd()();
 } }
 function AIAgentFormComponentExtended_form_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "form", 4, 0);
     i0.ɵɵelement(2, "mj-form-toolbar", 5);
-    i0.ɵɵelementStart(3, "div", 6)(4, "div", 7)(5, "div", 8)(6, "div", 9)(7, "div", 10);
-    i0.ɵɵelement(8, "i", 11);
-    i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_1_Conditional_9_Template, 1, 1, "kendo-textbox", 12)(10, AIAgentFormComponentExtended_form_1_Conditional_10_Template, 4, 4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_1_Conditional_11_Template, 5, 10, "div", 13)(12, AIAgentFormComponentExtended_form_1_Conditional_12_Template, 2, 1, "p", 14);
+    i0.ɵɵelementStart(3, "div", 6)(4, "div", 7)(5, "div", 8)(6, "div", 9);
+    i0.ɵɵelement(7, "i", 10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 15)(14, "div", 16);
-    i0.ɵɵtemplate(15, AIAgentFormComponentExtended_form_1_Conditional_15_Template, 3, 0, "kendo-button", 17)(16, AIAgentFormComponentExtended_form_1_Conditional_16_Template, 3, 1, "kendo-button", 18)(17, AIAgentFormComponentExtended_form_1_Conditional_17_Template, 3, 0, "kendo-button", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(18, AIAgentFormComponentExtended_form_1_Conditional_18_Template, 2, 1, "div", 20);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(19, "div", 21);
-    i0.ɵɵprojection(20);
-    i0.ɵɵelement(21, "div", 22);
-    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_1_Conditional_22_Template, 8, 12);
+    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.ɵɵ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.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(15, "div", 18);
+    i0.ɵɵtemplate(16, AIAgentFormComponentExtended_form_1_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.ɵɵ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.ɵɵ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.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("form", ctx_r1);
+    i0.ɵɵproperty("form", ctx_r2);
     i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 9 : 10);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 11 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.Description ? 12 : -1);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 9 : 10);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.record.ID && ctx_r1.canExecute ? 15 : ctx_r1.record.ID && !ctx_r1.canExecute ? 16 : -1);
+    i0.ɵɵconditional(ctx_r2.record.Status ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.ExecutionMode ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.Parent ? 14 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.record.ID ? 17 : -1);
+    i0.ɵɵconditional(ctx_r2.record.ID ? 16 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r2.record.ID ? 21 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.canExecute && ctx_r1.record.ID ? 18 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.record.IsSaved ? 22 : -1);
+    i0.ɵɵconditional(ctx_r2.record.ID ? 22 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.ID ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.ID ? 24 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.ID ? 25 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.ID ? 26 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("expanded", false);
 } }
 function AIAgentFormComponentExtended_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-ai-agent-execution-dialog", 39);
-    i0.ɵɵlistener("visibilityChange", function AIAgentFormComponentExtended_Conditional_2_Template_mj_ai_agent_execution_dialog_visibilityChange_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onExecutionDialogClosed()); });
-    i0.ɵɵelementEnd();
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-window", 92);
+    i0.ɵɵlistener("close", function AIAgentFormComponentExtended_Conditional_2_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTestHarnessVisibilityChanged(false)); });
+    i0.ɵɵelementStart(1, "mj-ai-test-harness", 93);
+    i0.ɵɵlistener("visibilityChange", function AIAgentFormComponentExtended_Conditional_2_Template_mj_ai_test_harness_visibilityChange_1_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTestHarnessVisibilityChanged($event)); });
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("aiAgent", ctx_r1.record)("isVisible", ctx_r1.showExecutionDialog);
+    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,
+ * related entity management, and execution history tracking.
+ *
+ * ## Key Features:
+ * - **Integrated Test Harness**: Built-in access to agent testing capabilities
+ * - **Related Entity Management**: Display and manage sub-agents, prompts, and actions
+ * - **Execution History**: View recent agent runs with status and timing information
+ * - **Rich UI Components**: Enhanced cards, badges, and status indicators
+ * - **Navigation Support**: Links to related entities and management functions
+ *
+ * ## Form Sections:
+ * - **Agent Details**: Basic agent configuration and settings
+ * - **Sub-Agents**: Hierarchical agent relationships
+ * - **Prompts**: Associated prompts with priority ordering
+ * - **Actions**: Available actions and configurations
+ * - **Execution History**: Recent runs with detailed status information
+ *
+ * ## Usage:
+ * This component is automatically loaded when editing AI Agent entities through
+ * the MemberJunction form system. It extends the base generated form with
+ * additional functionality while maintaining full compatibility.
+ *
+ * @example
+ * ```html
+ * <!-- Automatically used by form system -->
+ * <mj-ai-agent-form [recordId]="agentId"></mj-ai-agent-form>
+ * ```
+ */
 let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AIAgentFormComponent {
-    constructor() {
-        super(...arguments);
-        this.showExecutionDialog = false;
-        this._metadata = new Metadata();
+    constructor(elementRef, sharedService, router, route, cdr, dialogService, viewContainerRef) {
+        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;
+        // === Related Entity Counts ===
+        /** Number of sub-agents under this agent */
+        this.subAgentCount = 0;
+        /** Number of prompts associated with this agent */
+        this.promptCount = 0;
+        /** Number of actions configured for this agent */
+        this.actionCount = 0;
+        /** Number of learning cycles for this agent */
+        this.learningCycleCount = 0;
+        /** Number of notes associated with this agent */
+        this.noteCount = 0;
+        /** Number of execution history records */
+        this.executionHistoryCount = 0;
+        // === Related Entity Data for Display ===
+        /** Array of sub-agent entities for card display */
+        this.subAgents = [];
+        /** Array of agent prompt entities for card display */
+        this.agentPrompts = [];
+        /** Array of agent action entities for card display */
+        this.agentActions = [];
+        /** Array of learning cycle entities for display */
+        this.learningCycles = [];
+        /** Array of agent note entities for display */
+        this.agentNotes = [];
+        /** Array of recent execution records for history display */
+        this.recentExecutions = [];
     }
+    /**
+     * Component initialization. Calls parent initialization and loads related entity data
+     * if an agent record is already available.
+     */
     async ngOnInit() {
         await super.ngOnInit();
+        if (this.record?.ID) {
+            await this.loadRelatedCounts();
+        }
     }
     /**
-     * Determines if the agent can be executed
+     * Loads counts and preview data for all related entities including sub-agents,
+     * prompts, actions, learning cycles, notes, and execution history.
+     * This data populates the various expander panels in the enhanced form interface.
+     * @private
      */
-    get canExecute() {
-        return !!(this.record?.ID &&
-            this.record.Status === 'Active');
+    async loadRelatedCounts() {
+        if (!this.record?.ID)
+            return;
+        try {
+            console.log('🔍 AI Agent Form - Loading related data for Agent ID:', this.record.ID);
+            const rv = new RunView();
+            // Load sub-agents with data
+            const subAgentResult = await rv.RunView({
+                EntityName: 'AI Agents',
+                ExtraFilter: `ParentID='${this.record.ID}'`,
+                OrderBy: 'Name ASC',
+                ResultType: 'entity_object'
+            });
+            this.subAgents = subAgentResult.Results || [];
+            this.subAgentCount = subAgentResult.TotalRowCount || 0;
+            const promptResult = await rv.RunView({
+                EntityName: 'AI Prompts',
+                ExtraFilter: `ID IN (SELECT PromptID FROM __mj.vwAIAgentPrompts WHERE AgentID='${this.record.ID}')`
+            });
+            this.agentPrompts = promptResult.Results || [];
+            this.promptCount = promptResult.TotalRowCount || 0;
+            const actionResult = await rv.RunView({
+                EntityName: 'Actions',
+                ExtraFilter: `ID IN (SELECT ActionID FROM __mj.vwAIAgentActions WHERE AgentID='${this.record.ID}')`,
+                OrderBy: 'Name ASC',
+                ResultType: 'entity_object'
+            });
+            this.agentActions = actionResult.Results || [];
+            this.actionCount = actionResult.TotalRowCount || 0;
+            console.log('⚡ Final actions count:', this.actionCount, 'items');
+            // Load learning cycles with data
+            const learningResult = await rv.RunView({
+                EntityName: 'AI Agent Learning Cycles',
+                ExtraFilter: `AgentID='${this.record.ID}'`,
+                OrderBy: 'StartedAt DESC',
+                ResultType: 'entity_object'
+            });
+            this.learningCycles = learningResult.Results || [];
+            this.learningCycleCount = learningResult.TotalRowCount || 0;
+            // Load notes with data
+            const noteResult = await rv.RunView({
+                EntityName: 'AI Agent Notes',
+                ExtraFilter: `AgentID='${this.record.ID}'`,
+                ResultType: 'entity_object'
+            });
+            this.agentNotes = noteResult.Results || [];
+            this.noteCount = noteResult.TotalRowCount || 0;
+            // Load recent execution history
+            const historyResult = await rv.RunView({
+                EntityName: 'MJ: AI Agent Runs',
+                ExtraFilter: `AgentID='${this.record.ID}'`,
+                OrderBy: '__mj_CreatedAt DESC',
+                ResultType: 'entity_object'
+            });
+            this.recentExecutions = historyResult.Results || [];
+            this.executionHistoryCount = historyResult.TotalRowCount || 0;
+        }
+        catch (error) {
+            console.error('Error loading related data:', error);
+            // Set all counts to 0 on error to ensure UI shows proper empty states
+            this.subAgentCount = 0;
+            this.promptCount = 0;
+            this.actionCount = 0;
+            this.learningCycleCount = 0;
+            this.noteCount = 0;
+            this.executionHistoryCount = 0;
+        }
     }
     /**
-     * Executes the AI agent
+     * Opens the integrated test harness for the current agent.
+     * Validates that the agent has been saved before allowing testing.
+     * Shows a notification if the agent needs to be saved first.
      */
-    executeAIAgent() {
+    openTestHarness() {
         if (!this.record?.ID) {
-            MJNotificationService.Instance.CreateSimpleNotification('Please save the AI agent before executing', 'warning', 4000);
+            MJNotificationService.Instance.CreateSimpleNotification('Please save the AI agent before testing', 'warning', 4000);
             return;
         }
-        if (this.record.Status !== 'Active') {
-            MJNotificationService.Instance.CreateSimpleNotification('AI agent must be Active to execute', 'warning', 4000);
-            return;
-        }
-        this.showExecutionDialog = true;
+        this.showTestHarness = true;
     }
     /**
-     * Gets status badge color
+     * Returns the appropriate color for the agent status badge.
+     * Uses standard color coding: green for active, yellow for pending, gray for disabled.
+     * @returns CSS color value for the status badge
      */
     getStatusBadgeColor() {
         switch (this.record?.Status) {
@@ -231,24 +1128,393 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         }
     }
     /**
-     * Handles when execution dialog is closed
+     * Event handler for test harness visibility changes.
+     * 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
+     */
+    getSubAgentCount() {
+        return this.subAgentCount;
+    }
+    /**
+     * Gets the count of prompts
+     */
+    getPromptCount() {
+        return this.promptCount;
+    }
+    /**
+     * Gets the count of actions
+     */
+    getActionCount() {
+        return this.actionCount;
+    }
+    /**
+     * Gets the icon for the execution mode
+     */
+    getExecutionModeIcon(mode) {
+        switch (mode) {
+            case 'Sequential':
+                return 'fa-solid fa-list-ol';
+            case 'Parallel':
+                return 'fa-solid fa-layer-group';
+            default:
+                return 'fa-solid fa-robot';
+        }
+    }
+    /**
+     * Creates a new sub-agent
+     */
+    async createSubAgent() {
+        // Open a new AI Agent form with ParentID pre-populated
+        MJNotificationService.Instance.CreateSimpleNotification('Opening new sub-agent form...', 'info', 2000);
+        // For now, we'll just show a notification
+        // In a full implementation, this would emit an event to open a new form
+        // with ParentID pre-populated to this.record.ID
+    }
+    /**
+     * Adds a new prompt to the agent
+     */
+    async addPrompt() {
+        const config = {
+            entityName: 'AI Prompts',
+            title: 'Select AI Prompt',
+            displayField: 'Name',
+            descriptionField: 'Description',
+            statusField: 'Status',
+            filters: `Status='Active'`,
+            orderBy: 'Name ASC',
+            icon: 'fa-solid fa-comment-dots'
+        };
+        const dialogRef = this.dialogService.open({
+            content: EntitySelectorDialogComponent
+        });
+        const componentInstance = dialogRef.content.instance;
+        componentInstance.config = config;
+        const result = await dialogRef.result;
+        if (result && result.entity) {
+            // User selected an existing prompt
+            await this.linkPromptToAgent(result.entity);
+        }
+        else if (result && result.createNew) {
+            // User wants to create a new prompt
+            await this.createNewPrompt();
+        }
+    }
+    /**
+     * Opens the action configuration dialog
      */
-    onExecutionDialogClosed() {
-        this.showExecutionDialog = false;
+    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
+        });
+        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
+     */
+    getExecutionStatusIcon(status) {
+        switch (status?.toLowerCase()) {
+            case 'completed':
+            case 'success':
+                return 'fa-solid fa-check-circle';
+            case 'failed':
+            case 'error':
+                return 'fa-solid fa-exclamation-triangle';
+            case 'running':
+            case 'in_progress':
+                return 'fa-solid fa-spinner fa-spin';
+            case 'pending':
+                return 'fa-solid fa-clock';
+            default:
+                return 'fa-solid fa-question-circle';
+        }
+    }
+    /**
+     * Gets the status color for execution runs
+     */
+    getExecutionStatusColor(status) {
+        switch (status?.toLowerCase()) {
+            case 'completed':
+            case 'success':
+                return '#28a745';
+            case 'failed':
+            case 'error':
+                return '#dc3545';
+            case 'running':
+            case 'in_progress':
+                return '#17a2b8';
+            case 'pending':
+                return '#ffc107';
+            default:
+                return '#6c757d';
+        }
+    }
+    formatExecutionTimeFromDates(startDate, endDate) {
+        if (!startDate || !endDate)
+            return 'N/A';
+        const milliseconds = endDate.getTime() - startDate.getTime();
+        return this.formatExecutionTime(milliseconds);
+    }
+    /**
+     * Formats execution time
+     */
+    formatExecutionTime(milliseconds) {
+        if (!milliseconds)
+            return 'N/A';
+        if (milliseconds >= 60000) {
+            const minutes = Math.floor(milliseconds / 60000);
+            const seconds = ((milliseconds % 60000) / 1000).toFixed(1);
+            return `${minutes}m ${seconds}s`;
+        }
+        else if (milliseconds >= 1000) {
+            return `${(milliseconds / 1000).toFixed(1)}s`;
+        }
+        else {
+            return `${milliseconds}ms`;
+        }
+    }
+    /**
+     * Gets the priority badge color
+     */
+    getPriorityBadgeColor(priority) {
+        if (priority <= 1)
+            return '#dc3545'; // High priority - red
+        if (priority <= 5)
+            return '#ffc107'; // Medium priority - yellow
+        return '#28a745'; // Low priority - green
+    }
+    /**
+     * Gets the priority label
+     */
+    getPriorityLabel(priority) {
+        if (priority <= 1)
+            return 'High';
+        if (priority <= 5)
+            return 'Medium';
+        return 'Low';
+    }
+    /**
+     * Navigates to a related entity
+     */
+    navigateToEntity(entityName, recordId) {
+        this.sharedService.OpenEntityRecord(entityName, CompositeKey.FromID(recordId));
+    }
+    /**
+     * Refreshes the related data
+     */
+    async refreshRelatedData() {
+        if (this.record?.ID) {
+            await this.loadRelatedCounts();
+            MJNotificationService.Instance.CreateSimpleNotification('Related data refreshed', 'success', 2000);
+        }
+    }
+    /**
+     * Adds a new note to the agent
+     */
+    addNote() {
+        MJNotificationService.Instance.CreateSimpleNotification('Opening new note form...', 'info', 2000);
+        // In a full implementation, this would open a new AI Agent Note form
+        // with AgentID pre-populated to this.record.ID
+    }
+    /**
+     * Links an existing prompt to the agent
+     */
+    async linkPromptToAgent(prompt) {
+        try {
+            const md = new Metadata();
+            const agentPrompt = await md.GetEntityObject('AI Agent Prompts');
+            agentPrompt.AgentID = this.record.ID;
+            agentPrompt.PromptID = prompt.ID;
+            agentPrompt.Status = 'Active'; // Default value
+            agentPrompt.ExecutionOrder = 1; // Default execution order
+            const result = await agentPrompt.Save();
+            if (result) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Prompt "${prompt.Name}" added successfully`, 'success', 3000);
+                await this.loadRelatedCounts();
+            }
+            else {
+                throw new Error('Failed to save AI Agent Prompt');
+            }
+        }
+        catch (error) {
+            console.error('Error linking prompt to agent:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to add prompt', 'error', 3000);
+        }
+    }
+    /**
+     * Creates a new prompt and links it to the agent
+     */
+    async createNewPrompt() {
+        // TODO: Open new AI Prompt form
+        // await this.sharedService.CreateNewRecord('AI Prompts', undefined, [
+        //     { FieldName: 'Status', Value: 'Active' }
+        // ]);
+        MJNotificationService.Instance.CreateSimpleNotification('Creating new prompt - functionality to be implemented', 'info', 3000);
+    }
+    /**
+     * Links an existing action to the agent
+     */
+    async linkActionToAgent(action) {
+        try {
+            const md = new Metadata();
+            const agentAction = await md.GetEntityObject('AI Agent Actions');
+            agentAction.AgentID = this.record.ID;
+            agentAction.ActionID = action.ID;
+            agentAction.Status = 'Active'; // Default status
+            const result = await agentAction.Save();
+            if (result) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Action "${action.Name}" added successfully`, 'success', 3000);
+                await this.loadRelatedCounts();
+            }
+            else {
+                throw new Error('Failed to save AI Agent Action');
+            }
+        }
+        catch (error) {
+            console.error('Error linking action to agent:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to add action', 'error', 3000);
+        }
+    }
+    /**
+     * Creates a new action and links it to the agent
+     */
+    async createNewAction() {
+        // TODO: Open new Action form
+        // await this.sharedService.CreateNewRecord('Actions', undefined, [
+        //     { FieldName: 'Status', Value: 'Active' }
+        // ]);
+        MJNotificationService.Instance.CreateSimpleNotification('Creating new action - functionality to be implemented', 'info', 3000);
+    }
+    /**
+     * Removes a prompt from the agent
+     */
+    async removePrompt(prompt, event) {
+        event.stopPropagation(); // Prevent navigation
+        const confirmDialog = this.dialogService.open({
+            title: 'Remove Prompt',
+            content: `Are you sure you want to remove the prompt "${prompt.Name}" from this agent?`,
+            actions: [
+                { text: 'Cancel' },
+                { text: 'Remove', themeColor: 'error' }
+            ],
+            width: 450,
+            height: 200
+        });
+        const result = await confirmDialog.result;
+        if (result && result.text === 'Remove') {
+            try {
+                // Find the AI Agent Prompt link record
+                const rv = new RunView();
+                const linkResult = await rv.RunView({
+                    EntityName: 'AI Agent Prompts',
+                    ExtraFilter: `AgentID='${this.record.ID}' AND PromptID='${prompt.ID}'`,
+                    ResultType: 'entity_object'
+                });
+                if (linkResult.Results && linkResult.Results.length > 0) {
+                    const agentPrompt = linkResult.Results[0];
+                    const deleteResult = await agentPrompt.Delete();
+                    if (deleteResult) {
+                        MJNotificationService.Instance.CreateSimpleNotification(`Prompt "${prompt.Name}" removed successfully`, 'success', 3000);
+                        await this.loadRelatedCounts();
+                    }
+                    else {
+                        throw new Error('Failed to delete AI Agent Prompt link');
+                    }
+                }
+                else {
+                    throw new Error('AI Agent Prompt link not found');
+                }
+            }
+            catch (error) {
+                console.error('Error removing prompt from agent:', error);
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to remove prompt', 'error', 3000);
+            }
+        }
+    }
+    /**
+     * Removes an action from the agent
+     */
+    async removeAction(action, event) {
+        event.stopPropagation(); // Prevent navigation
+        const confirmDialog = this.dialogService.open({
+            title: 'Remove Action',
+            content: `Are you sure you want to remove the action "${action.Name}" from this agent?`,
+            actions: [
+                { text: 'Cancel' },
+                { text: 'Remove', themeColor: 'error' }
+            ],
+            width: 450,
+            height: 200
+        });
+        const result = await confirmDialog.result;
+        if (result && result.text === 'Remove') {
+            try {
+                // Find the AI Agent Action link record
+                const rv = new RunView();
+                const linkResult = await rv.RunView({
+                    EntityName: 'AI Agent Actions',
+                    ExtraFilter: `AgentID='${this.record.ID}' AND ActionID='${action.ID}'`,
+                    ResultType: 'entity_object'
+                });
+                if (linkResult.Results && linkResult.Results.length > 0) {
+                    const agentAction = linkResult.Results[0];
+                    const deleteResult = await agentAction.Delete();
+                    if (deleteResult) {
+                        MJNotificationService.Instance.CreateSimpleNotification(`Action "${action.Name}" removed successfully`, 'success', 3000);
+                        await this.loadRelatedCounts();
+                    }
+                    else {
+                        throw new Error('Failed to delete AI Agent Action link');
+                    }
+                }
+                else {
+                    throw new Error('AI Agent Action link not found');
+                }
+            }
+            catch (error) {
+                console.error('Error removing action from agent:', error);
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to remove action', 'error', 3000);
+            }
+        }
     }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵAIAgentFormComponentExtended_BaseFactory; return function AIAgentFormComponentExtended_Factory(t) { return (ɵAIAgentFormComponentExtended_BaseFactory || (ɵAIAgentFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(AIAgentFormComponentExtended)))(t || AIAgentFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 4, consts: [["form", "ngForm"], ["mjFillContainer", "", 1, "record-form-container", 3, "bottomMargin", "rightMargin"], ["class", "record-form", "mjFillContainer", "", 4, "ngIf"], [3, "aiAgent", "isVisible"], ["mjFillContainer", "", 1, "record-form"], [3, "form"], [1, "agent-main-area", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow-y", "auto"], [1, "agent-header", 2, "flex-shrink", "0", "padding", "20px", "background", "#f8f9fa", "border-bottom", "2px solid #e9ecef"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [1, "fa-solid", "fa-robot", 2, "color", "#17a2b8", "font-size", "1.4em"], ["name", "agentName", "placeholder", "Enter agent name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap"], [2, "margin", "8px 0 0 0", "color", "#6c757d", "line-height", "1.4", "max-width", "600px"], [1, "action-buttons", 2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], [2, "display", "flex", "gap", "8px"], ["themeColor", "info", "size", "large", "title", "Execute this AI agent"], ["themeColor", "info", "size", "large", "title", "Agent must be Active to execute", 3, "disabled"], ["fillMode", "outline", "themeColor", "info", "title", "View execution history"], [2, "font-size", "0.75em", "color", "#dc3545", "text-align", "right", "max-width", "200px"], [1, "form-content", 2, "flex", "1", "padding", "20px"], [1, "generated-fields"], ["name", "agentName", "placeholder", "Enter agent name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [2, "margin", "0", "color", "#495057", "font-weight", "600", "flex", "1"], [1, "status-badge", 2, "color", "white", "padding", "4px 10px", "border-radius", "12px", "font-size", "0.75em", "font-weight", "500"], [2, "display", "block", "margin-bottom", "4px", "font-weight", "600", "color", "#495057", "font-size", "0.9em"], ["name", "agentStatus", "textField", "text", "valueField", "value", 2, "width", "150px", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["themeColor", "info", "size", "large", "title", "Execute this AI agent", 3, "click"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-history"], [2, "margin-top", "20px", 3, "expanded"], ["kendoExpansionPanelTitleDirective", ""], [2, "padding", "16px 0"], [2, "height", "300px", 3, "Params", "NewRecordValues", "AllowLoad", "EditMode", "BottomMargin"], [2, "display", "flex", "align-items", "center", "gap", "8px", "font-weight", "600"], [1, "fa-solid", "fa-history", 2, "color", "#6c757d"], [1, "fa-solid", "fa-comments", 2, "color", "#6c757d"], [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)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 3, vars: 4, consts: [["form", "ngForm"], ["mjFillContainer", "", 1, "record-form-container", 3, "bottomMargin", "rightMargin"], ["class", "record-form", "mjFillContainer", "", 4, "ngIf"], [3, "width", "height", "minWidth", "minHeight", "draggable", "resizable", "state", "title"], ["mjFillContainer", "", 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"], [1, "timeline-item", 3, "click"], [1, "timeline-marker"], [1, "timeline-content"], [1, "timeline-title"], [1, "timeline-date"], [1, "timeline-meta"], [1, "execution-time"], [1, "timeline-preview"], [1, "fa-solid", "fa-stopwatch"], [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) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Template, 23, 8, "form", 2)(2, AIAgentFormComponentExtended_Conditional_2_Template, 1, 2, "mj-ai-agent-execution-dialog", 3);
+            i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_1_Template, 30, 13, "form", 2)(2, AIAgentFormComponentExtended_Conditional_2_Template, 2, 11, "kendo-window", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("bottomMargin", 20)("rightMargin", 5);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.record);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showExecutionDialog ? 2 : -1);
-        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.NgForm, i3.ExpansionPanelComponent, i3.ExpansionPanelTitleDirective, i4.TextBoxComponent, i5.DropDownListComponent, i6.ButtonComponent, i7.UserViewGridComponent, i8.FormToolbarComponent, i9.FillContainer, i10.AIAgentExecutionDialogComponent], styles: ["\n\n.agent-main-area[_ngcontent-%COMP%] {\n    background: #ffffff;\n}\n\n.agent-header[_ngcontent-%COMP%] {\n    border-radius: 8px 8px 0 0;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    font-size: 0.75rem;\n    font-weight: 600;\n    letter-spacing: 0.025em;\n    text-transform: uppercase;\n}\n\n.action-buttons[_ngcontent-%COMP%]   kendo-button[_ngcontent-%COMP%] {\n    min-width: 140px;\n}\n\n.action-buttons[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n}\n\n\n\n.form-content[_ngcontent-%COMP%] {\n    background: #ffffff;\n}\n\n.generated-fields[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n\n\nkendo-expansionpanel[_ngcontent-%COMP%] {\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\nmj-user-view-grid[_ngcontent-%COMP%] {\n    border: 1px solid #e9ecef;\n    border-radius: 4px;\n}\n\n\n\n.status-active[_ngcontent-%COMP%] {\n    background-color: #28a745;\n}\n\n.status-pending[_ngcontent-%COMP%] {\n    background-color: #ffc107;\n}\n\n.status-disabled[_ngcontent-%COMP%] {\n    background-color: #6c757d;\n}"] }); }
+            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.FillContainer, i11.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    margin-bottom: 24px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    transform: translateX(4px);\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-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}\n\n.timeline-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\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}\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.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')
@@ -256,9 +1522,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\" mjFillContainer [bottomMargin]=\"20\" [rightMargin]=\"5\">\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\" mjFillContainer>\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Main Content Area -->\n        <div class=\"agent-main-area\" style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto;\">\n            \n            <!-- Header Section -->\n            <div class=\"agent-header\" style=\"flex-shrink: 0; padding: 20px; background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n                <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n                    \n                    <!-- Left: Agent Info -->\n                    <div style=\"flex: 1; min-width: 0;\">\n                        <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                            <i class=\"fa-solid fa-robot\" style=\"color: #17a2b8; font-size: 1.4em;\"></i>\n                            @if (EditMode) {\n                                <kendo-textbox [(ngModel)]=\"record.Name\" \n                                              name=\"agentName\"\n                                              placeholder=\"Enter agent name...\"\n                                              style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                                </kendo-textbox>\n                            } @else {\n                                <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled AI Agent' }}</h4>\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\" \n                                      style=\"color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                                    {{ record.Status }}\n                                </span>\n                            }\n                        </div>\n                        \n                        <!-- Status Editor when in edit mode -->\n                        @if (EditMode) {\n                            <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;\">\n                                <div>\n                                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Status</label>\n                                    <kendo-dropdownlist [(ngModel)]=\"record.Status\"\n                                                       name=\"agentStatus\"\n                                                       [data]=\"[{text: 'Active', value: 'Active'}, {text: 'Pending', value: 'Pending'}, {text: 'Disabled', value: 'Disabled'}]\"\n                                                       textField=\"text\"\n                                                       valueField=\"value\"\n                                                       [valuePrimitive]=\"true\"\n                                                       style=\"width: 150px;\">\n                                    </kendo-dropdownlist>\n                                </div>\n                            </div>\n                        }\n                        \n                        <!-- Description -->\n                        @if (record.Description) {\n                            <p style=\"margin: 8px 0 0 0; color: #6c757d; line-height: 1.4; max-width: 600px;\">\n                                {{ record.Description }}\n                            </p>\n                        }\n                    </div>\n                    \n                    <!-- Right: Action Buttons -->\n                    <div class=\"action-buttons\" style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n                        <div style=\"display: flex; gap: 8px;\">\n                            @if (record.ID && canExecute) {\n                                <kendo-button themeColor=\"info\" size=\"large\"\n                                            (click)=\"executeAIAgent()\"\n                                            title=\"Execute this AI agent\">\n                                    <i class=\"fa-solid fa-play\"></i> Execute Agent\n                                </kendo-button>\n                            } @else if (record.ID && !canExecute) {\n                                <kendo-button themeColor=\"info\" size=\"large\" [disabled]=\"true\"\n                                            title=\"Agent must be Active to execute\">\n                                    <i class=\"fa-solid fa-exclamation-triangle\"></i> Cannot Execute\n                                </kendo-button>\n                            }\n                            \n                            @if (record.ID) {\n                                <kendo-button fillMode=\"outline\" themeColor=\"info\"\n                                            title=\"View execution history\">\n                                    <i class=\"fa-solid fa-history\"></i> History\n                                </kendo-button>\n                            }\n                        </div>\n                        \n                        @if (!canExecute && record.ID) {\n                            <div style=\"font-size: 0.75em; color: #dc3545; text-align: right; max-width: 200px;\">\n                                @if (record.Status !== 'Active') {\n                                    \u2022 Agent must be Active<br>\n                                }\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Main Form Content -->\n            <div class=\"form-content\" style=\"flex: 1; padding: 20px;\">\n                <!-- Use the generated form's default content -->\n                <ng-content></ng-content>\n                \n                <!-- Generated form fields will be inserted here by the base component -->\n                <div class=\"generated-fields\">\n                    <!-- The base component will render all the standard fields here -->\n                </div>\n                \n                @if (record.IsSaved) {\n                    <!-- Agent Execution History -->\n                    <kendo-expansionpanel [expanded]=\"false\" style=\"margin-top: 20px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-history\" style=\"color: #6c757d;\"></i>\n                                Execution History\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            <mj-user-view-grid \n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Agent Runs','AgentID')\"  \n                                [NewRecordValues]=\"NewRecordValues('MJ: AI Agent Runs')\"\n                                [AllowLoad]=\"true\"\n                                [EditMode]=\"GridEditMode()\"  \n                                [BottomMargin]=\"0\"\n                                style=\"height: 300px;\">\n                            </mj-user-view-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                    \n                    <!-- Agent Prompts -->\n                    <kendo-expansionpanel [expanded]=\"false\" style=\"margin-top: 20px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-comments\" style=\"color: #6c757d;\"></i>\n                                Agent Prompts\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px 0;\">\n                            <mj-user-view-grid \n                                [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Agent Prompts','AgentID')\"  \n                                [NewRecordValues]=\"NewRecordValues('MJ: AI Agent Prompts')\"\n                                [AllowLoad]=\"true\"\n                                [EditMode]=\"GridEditMode()\"  \n                                [BottomMargin]=\"0\"\n                                style=\"height: 300px;\">\n                            </mj-user-view-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                }\n            </div>\n        </div>\n    </form>\n\n    <!-- AI Agent Execution Dialog -->\n    @if (showExecutionDialog) {\n        <mj-ai-agent-execution-dialog \n            [aiAgent]=\"record\"\n            [isVisible]=\"showExecutionDialog\"\n            (visibilityChange)=\"onExecutionDialogClosed()\">\n        </mj-ai-agent-execution-dialog>\n    }\n</div>", styles: ["/* AI Agent Form Styles */\n.agent-main-area {\n    background: #ffffff;\n}\n\n.agent-header {\n    border-radius: 8px 8px 0 0;\n}\n\n.status-badge {\n    display: inline-block;\n    font-size: 0.75rem;\n    font-weight: 600;\n    letter-spacing: 0.025em;\n    text-transform: uppercase;\n}\n\n.action-buttons kendo-button {\n    min-width: 140px;\n}\n\n.action-buttons i {\n    margin-right: 6px;\n}\n\n/* Form content styling */\n.form-content {\n    background: #ffffff;\n}\n\n.generated-fields {\n    margin-bottom: 20px;\n}\n\n/* Expansion panel styling */\nkendo-expansionpanel {\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Grid styling */\nmj-user-view-grid {\n    border: 1px solid #e9ecef;\n    border-radius: 4px;\n}\n\n/* Status-specific styling */\n.status-active {\n    background-color: #28a745;\n}\n\n.status-pending {\n    background-color: #ffc107;\n}\n\n.status-disabled {\n    background-color: #6c757d;\n}"] }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 16 }); })();
+        args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\" mjFillContainer [bottomMargin]=\"20\" [rightMargin]=\"5\">\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\" mjFillContainer>\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\" (click)=\"navigateToEntity('AI Agent Runs', execution.ID)\">\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-title\">\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) {\n                                                        <div class=\"timeline-preview\">{{ execution.Result.substring(0, 120) }}{{ execution.Result.length > 120 ? '...' : '' }}</div>\n                                                    }\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    margin-bottom: 24px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n}\n\n.timeline-item:hover {\n    background: #f8f9fa;\n    transform: translateX(4px);\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-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}\n\n.timeline-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\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}\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/* 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 }); })();
 export function LoadAIAgentFormComponentExtended() {
     // This function is called to ensure the component is loaded and registered
 }