@memberjunction/ng-core-entity-forms 2.70.0 → 2.72.0

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

@@ -10,23 +10,22 @@ import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 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 { firstValueFrom } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
 import * as i3 from "@progress/kendo-angular-dialog";
-import * as i4 from "./new-agent-dialog.service";
-import * as i5 from "@memberjunction/ng-action-gallery";
-import * as i6 from "@memberjunction/ng-ai-test-harness";
-import * as i7 from "@angular/common";
-import * as i8 from "@angular/forms";
-import * as i9 from "@progress/kendo-angular-layout";
-import * as i10 from "@progress/kendo-angular-inputs";
-import * as i11 from "@progress/kendo-angular-dropdowns";
-import * as i12 from "@progress/kendo-angular-buttons";
-import * as i13 from "@memberjunction/ng-base-forms";
-import * as i14 from "@memberjunction/ng-form-toolbar";
-import * as i15 from "@memberjunction/ng-code-editor";
+import * as i4 from "./ai-agent-management.service";
+import * as i5 from "@memberjunction/ng-ai-test-harness";
+import * as i6 from "@angular/common";
+import * as i7 from "@angular/forms";
+import * as i8 from "@progress/kendo-angular-layout";
+import * as i9 from "@progress/kendo-angular-inputs";
+import * as i10 from "@progress/kendo-angular-dropdowns";
+import * as i11 from "@progress/kendo-angular-buttons";
+import * as i12 from "@memberjunction/ng-base-forms";
+import * as i13 from "@memberjunction/ng-form-toolbar";
+import * as i14 from "@memberjunction/ng-code-editor";
 const _forTrack0 = ($index, $item) => $item.ID;
 function AIAgentFormComponentExtended_form_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 10);
@@ -108,227 +107,361 @@ function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Templa
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Execution History", ctx_r1.executionHistoryCount > 0 ? " (" + ctx_r1.executionHistoryCount + ")" : "", " ");
+    i0.ɵɵtextInterpolate1(" Actions", ctx_r1.actionCount > 0 ? " (" + ctx_r1.actionCount + ")" : "", " ");
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Add Action ");
+    i0.ɵɵelementEnd();
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Configure First Action ");
+    i0.ɵɵelementEnd();
 } }
 function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelementStart(0, "div", 38);
     i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementStart(2, "h4");
-    i0.ɵɵtext(3, "No Execution History");
+    i0.ɵɵtext(3, "No Actions Configured");
     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()();
+    i0.ɵɵtext(5, "Add actions to enable this agent to perform specific tasks and operations.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "button", 42);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 49);
-    i0.ɵɵelement(1, "i", 55);
-    i0.ɵɵtext(2);
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const execution_r6 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatExecutionTimeFromDates(execution_r6.StartedAt, execution_r6.CompletedAt), " ");
+    const action_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(action_r8.Description);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53);
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 52);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const execution_r6 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const action_r8 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.getExecutionResultPreview(execution_r6, true));
+    i0.ɵɵtextInterpolate(action_r8.Type);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56)(1, "h5");
-    i0.ɵɵtext(2, "Result");
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const action_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r8, $event)); });
+    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵelementEnd();
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_22_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_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const action_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r8.ID)); });
+    i0.ɵɵelementStart(1, "div", 47);
+    i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "mj-code-editor", 62);
+    i0.ɵɵelementStart(3, "div", 48)(4, "div", 49);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 1, "div", 50);
+    i0.ɵɵelementStart(7, "div", 51);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 52);
+    i0.ɵɵelementStart(9, "span", 53);
+    i0.ɵɵelement(10, "i", 54);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "div", 55);
+    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "button", 56);
+    i0.ɵɵelement(14, "i", 57);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r6 = i0.ɵɵnextContext(2).$implicit;
+    const action_r8 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getActionIcon(action_r8));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r6, false))("readonly", true)("lineWrapping", true);
+    i0.ɵɵtextInterpolate(action_r8.Name || "Untitled Action");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(action_r8.Description ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(action_r8.Type ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", action_r8.Status === "Active")("inactive", action_r8.Status !== "Active");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-check-circle", action_r8.Status === "Active")("fa-times-circle", action_r8.Status !== "Active");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", action_r8.Status, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeleteActions ? 13 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57)(1, "h5");
-    i0.ɵɵelement(2, "i", 63);
-    i0.ɵɵtext(3, " Error");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 64);
-    i0.ɵɵtext(5);
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r6 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(execution_r6.ErrorMessage);
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59)(1, "span", 60);
-    i0.ɵɵtext(2, "Completed:");
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template, 15, 15, "div", 44, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 61);
-    i0.ɵɵtext(4);
-    i0.ɵɵpipe(5, "date");
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.agentActions);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 36);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_3_Template, 3, 0, "button", 37);
     i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Template, 7, 1, "div", 38)(5, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const execution_r6 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, execution_r6.CompletedAt, "medium"));
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateActions ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 59)(1, "span", 60);
-    i0.ɵɵtext(2, "Conversation:");
+function AIAgentFormComponentExtended_form_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-panelbar-item", 24);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template, 6, 2, "ng-template", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 61);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r6 = i0.ɵɵnextContext(2).$implicit;
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(execution_r6.ConversationID);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("expanded", ctx_r1.actionCount > 0);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_1_Template, 4, 3, "div", 56)(2, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_2_Template, 6, 1, "div", 57);
-    i0.ɵɵelementStart(3, "div", 58)(4, "div", 59)(5, "span", 60);
-    i0.ɵɵtext(6, "Started:");
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 30);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Sub-Agents", ctx_r1.subAgentCount > 0 ? " (" + ctx_r1.subAgentCount + ")" : "", " ");
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Add Subagent ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 62);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_5_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
+    i0.ɵɵelement(4, "i", 41);
+    i0.ɵɵtext(5, " Create Sub-Agent ");
+    i0.ɵɵelementEnd();
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addSubAgents()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Add Subagent ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 63);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
+    i0.ɵɵelement(4, "i", 41);
+    i0.ɵɵtext(5, " Create First Sub-Agent ");
+    i0.ɵɵelementEnd();
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(2, "h4");
+    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_2_Conditional_23_ng_template_2_Conditional_6_Conditional_6_Template, 6, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateSubAgents ? 6 : -1);
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 66);
+} if (rf & 2) {
+    const subAgent_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("src", subAgent_r14.LogoURL, i0.ɵɵsanitizeUrl)("alt", subAgent_r14.Name + " logo");
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const subAgent_r14 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(subAgent_r14));
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 61);
-    i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "date");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_10_Template, 6, 4, "div", 59)(11, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_11_Template, 5, 1, "div", 59);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const execution_r6 = i0.ɵɵnextContext().$implicit;
+    const subAgent_r14 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r6.Result ? 1 : -1);
+    i0.ɵɵtextInterpolate(subAgent_r14.Description);
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 53);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const subAgent_r14 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getStatusBadgeColor());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r6.ErrorMessage ? 2 : -1);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, execution_r6.StartedAt, "medium"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(execution_r6.CompletedAt ? 10 : -1);
+    i0.ɵɵtextInterpolate1(" ", subAgent_r14.Status, " ");
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 52);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const subAgent_r14 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r6.ConversationID ? 11 : -1);
+    i0.ɵɵtextInterpolate(subAgent_r14.ExecutionMode);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41)(1, "div")(2, "div", 42);
-    i0.ɵɵelement(3, "i");
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 70);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const subAgent_r14 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openSubAgentAdvancedSettings(subAgent_r14, $event)); });
+    i0.ɵɵelement(1, "i", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 43)(5, "div", 44);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template_div_click_5_listener() { const execution_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r6.ID)); });
-    i0.ɵɵelementStart(6, "div")(7, "div", 45);
-    i0.ɵɵelement(8, "i", 46);
-    i0.ɵɵtext(9);
-    i0.ɵɵelementStart(10, "span", 47);
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "date");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 48)(14, "span", 28);
-    i0.ɵɵtext(15);
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 72);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const subAgent_r14 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeSubAgent(subAgent_r14, $event)); });
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(16, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_16_Template, 3, 1, "span", 49);
-    i0.ɵɵelementStart(17, "div", 50)(18, "button", 51);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template_button_click_18_listener($event) { const execution_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.openExecutionRecord(execution_r6.ID); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(19, "i", 52);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(20, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_20_Template, 2, 1, "div", 53);
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const subAgent_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", subAgent_r14.ID)); });
+    i0.ɵɵelementStart(1, "div", 47);
+    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_2_Template, 1, 2, "img", 66)(3, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_3_Template, 1, 2, "i", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 48)(5, "div", 49);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_7_Template, 2, 1, "div", 50);
+    i0.ɵɵelementStart(8, "div", 51);
+    i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 3, "span", 67)(10, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_10_Template, 2, 1, "span", 52);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 55);
+    i0.ɵɵtemplate(12, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_12_Template, 2, 0, "button", 68)(13, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Conditional_13_Template, 2, 0, "button", 69);
+    i0.ɵɵelement(14, "i", 57);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(21, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Conditional_21_Template, 12, 8, "div", 54);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const execution_r6 = ctx.$implicit;
+    const subAgent_r14 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r6.ID]);
     i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getExecutionStatusColor(execution_r6.Status));
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getExecutionStatusIcon(execution_r6.Status));
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r6.ID]);
+    i0.ɵɵconditional(ctx_r1.hasSubAgentLogoURL(subAgent_r14) ? 2 : 3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(subAgent_r14.Name || "Untitled Sub-Agent");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Execution #", execution_r6.ID.substring(0, 8), " ");
+    i0.ɵɵconditional(subAgent_r14.Description ? 7 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(12, 16, execution_r6.__mj_CreatedAt, "MMM d, h:mm a"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getExecutionStatusColor(execution_r6.Status));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", execution_r6.Status || "Unknown", " ");
+    i0.ɵɵconditional(subAgent_r14.Status ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r6.CompletedAt ? 16 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(execution_r6.Result && !ctx_r1.expandedExecutions[execution_r6.ID] ? 20 : -1);
+    i0.ɵɵconditional(subAgent_r14.ExecutionMode ? 10 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateSubAgents ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r6.ID] ? 21 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeleteSubAgents ? 13 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Runs", "")); });
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r1.executionHistoryCount, " executions...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.subAgentCount, " sub-agents...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_For_2_Template, 22, 19, "div", 39, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 40);
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_For_2_Template, 15, 7, "div", 64, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.recentExecutions);
+    i0.ɵɵrepeater(ctx_r1.subAgents);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.executionHistoryCount > ctx_r1.recentExecutions.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.subAgentCount > ctx_r1.subAgents.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtext(3, " Review execution history, requests, and performance metrics for this agent. ");
+function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 61);
+    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_2_Conditional_23_ng_template_2_Conditional_5_Template, 6, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_4_Template, 6, 0, "div", 37)(5, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Conditional_5_Template, 4, 1, "div", 38);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_6_Template, 7, 1, "div", 38)(7, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.executionHistoryCount === 0 ? 4 : 5);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateSubAgents ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.subAgentCount === 0 ? 6 : 7);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_22_ng_template_2_Template, 6, 1, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template, 8, 2, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    i0.ɵɵproperty("expanded", true);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("expanded", ctx_r1.subAgentCount > 0);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 66);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 73);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Prompts", ctx_r1.promptCount > 0 ? " (" + ctx_r1.promptCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 77);
-    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 80);
+    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.record.ModelSelectionMode, $event) || (ctx_r1.record.ModelSelectionMode = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.record.ModelSelectionMode);
     i0.ɵɵproperty("data", ctx_r1.modelSelectionModes)("valuePrimitive", true);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 73);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -336,97 +469,106 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.ModelSelectionMode || "Agent Type");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 79);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Add Prompt ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
-    i0.ɵɵelement(1, "i", 79);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addPrompt()); });
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " Create First Prompt ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 66);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 73);
     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_2_Conditional_23_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 80);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Conditional_6_Template, 3, 0, "button", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const prompt_r12 = i0.ɵɵnextContext().$implicit;
+    const prompt_r22 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", prompt_r12.TemplateText.substring(0, 120), "", prompt_r12.TemplateText.length > 120 ? "..." : "", "");
+    i0.ɵɵtextInterpolate2("", prompt_r22.TemplateText.substring(0, 120), "", prompt_r22.TemplateText.length > 120 ? "..." : "", "");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 52);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const prompt_r12 = i0.ɵɵnextContext().$implicit;
+    const prompt_r22 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(prompt_r12.PromptRole);
+    i0.ɵɵtextInterpolate(prompt_r22.PromptRole);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 94);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const prompt_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r12, $event)); });
-    i0.ɵɵelement(1, "i", 95);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 70);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const prompt_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.openPromptAdvancedSettings(prompt_r22, $event)); });
+    i0.ɵɵelement(1, "i", 71);
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", prompt_r12.ID)); });
-    i0.ɵɵelementStart(1, "div", 84);
-    i0.ɵɵelement(2, "i", 85);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 85);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r24); const prompt_r22 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removePrompt(prompt_r22, $event)); });
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 86)(4, "div", 87);
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 82);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Template_div_click_0_listener() { const prompt_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", prompt_r22.ID)); });
+    i0.ɵɵelementStart(1, "div", 47);
+    i0.ɵɵelement(2, "i", 83);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 48)(4, "div", 49);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 88);
-    i0.ɵɵelementStart(7, "div", 89);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 90);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_6_Template, 2, 2, "div", 50);
+    i0.ɵɵelementStart(7, "div", 51);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_8_Template, 2, 1, "span", 52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 91);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 92);
-    i0.ɵɵelement(11, "i", 93);
+    i0.ɵɵelementStart(9, "div", 55);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_10_Template, 2, 0, "button", 68)(11, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Conditional_11_Template, 2, 0, "button", 84);
+    i0.ɵɵelement(12, "i", 57);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const prompt_r12 = ctx.$implicit;
+    const prompt_r22 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(prompt_r12.Name);
+    i0.ɵɵtextInterpolate(prompt_r22.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(prompt_r12.TemplateText ? 6 : -1);
+    i0.ɵɵconditional(prompt_r22.TemplateText ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(prompt_r12.PromptRole ? 8 : -1);
+    i0.ɵɵconditional(prompt_r22.PromptRole ? 8 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreatePrompts ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanDeletePrompts ? 11 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", "")); });
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Prompts", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
@@ -435,10 +577,10 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("View all ", ctx_r1.promptCount, " prompts...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_For_2_Template, 12, 4, "div", 82, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 40);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_For_2_Template, 13, 5, "div", 81, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -447,735 +589,635 @@ function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Condit
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.promptCount > ctx_r1.agentPrompts.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 68)(3, "div", 69)(4, "label", 70);
-    i0.ɵɵelement(5, "i", 71);
+function AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 74)(3, "div", 75)(4, "label", 76);
+    i0.ɵɵelement(5, "i", 77);
     i0.ɵɵtext(6, " Model Selection: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 72)(8, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_8_Template, 2, 1, "span", 73);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 78)(8, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_8_Template, 2, 1, "span", 79);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 74);
-    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_10_Template, 3, 0, "button", 75);
+    i0.ɵɵelementStart(9, "div", 36);
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_10_Template, 3, 0, "button", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_11_Template, 7, 1, "div", 37)(12, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Conditional_12_Template, 4, 1, "div", 76);
+    i0.ɵɵtemplate(11, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_11_Template, 7, 1, "div", 38)(12, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Conditional_12_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(7);
     i0.ɵɵconditional(ctx_r1.EditMode ? 7 : 8);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 10 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNewPrompts ? 10 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.promptCount === 0 ? 11 : 12);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_23_ng_template_2_Template, 13, 3, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_24_ng_template_2_Template, 13, 3, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵproperty("expanded", true);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 96);
-    i0.ɵɵtext(1, " Payload ");
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 86);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Learning Cycles", ctx_r1.learningCycleCount > 0 ? " (" + ctx_r1.learningCycleCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_26_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtext(3, " Configure how this agent handles data payloads and validation. ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 97)(5, "h4", 98);
-    i0.ɵɵelement(6, "i", 99);
-    i0.ɵɵtext(7, " Configuration ");
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 86);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Learning Cycles");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 100);
-    i0.ɵɵelement(9, "mj-form-field", 101)(10, "mj-form-field", 102)(11, "mj-form-field", 103);
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Learning cycles will appear here as the agent processes requests and improves over time.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 104)(13, "h4", 98);
-    i0.ɵɵelement(14, "i", 105);
-    i0.ɵɵtext(15, " Path Configuration ");
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 52);
+    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 106)(17, "label", 107);
-    i0.ɵɵelement(18, "i", 108);
-    i0.ɵɵtext(19, " Downstream Paths ");
-    i0.ɵɵelementStart(20, "span", 109);
-    i0.ɵɵtext(21, "JSON array of paths to pass to sub-agents");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "mj-code-editor", 110);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_26_Template_mj_code_editor_valueChange_22_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 106)(24, "label", 107);
-    i0.ɵɵelement(25, "i", 111);
-    i0.ɵɵtext(26, " Upstream Paths ");
-    i0.ɵɵelementStart(27, "span", 109);
-    i0.ɵɵtext(28, "JSON array of paths to return to parent agent");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "mj-code-editor", 110);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_26_Template_mj_code_editor_valueChange_29_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 106)(31, "label", 107);
-    i0.ɵɵelement(32, "i", 112);
-    i0.ɵɵtext(33, " Self Read Paths ");
-    i0.ɵɵelementStart(34, "span", 109);
-    i0.ɵɵtext(35, "JSON array of paths this agent can read");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "mj-code-editor", 110);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_26_Template_mj_code_editor_valueChange_36_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 106)(38, "label", 107);
-    i0.ɵɵelement(39, "i", 113);
-    i0.ɵɵtext(40, " Self Write Paths ");
-    i0.ɵɵelementStart(41, "span", 109);
-    i0.ɵɵtext(42, "JSON array of paths this agent can write to");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "mj-code-editor", 110);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_26_Template_mj_code_editor_valueChange_43_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(44, "div", 114)(45, "h4", 98);
-    i0.ɵɵelement(46, "i", 115);
-    i0.ɵɵtext(47, " Final Payload Validation ");
+} if (rf & 2) {
+    const cycle_r27 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r27.StartedAt, "short"), " ");
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_25_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();
-    i0.ɵɵelementStart(48, "div", 106)(49, "label", 107)(50, "span", 109);
-    i0.ɵɵtext(51, "JSON validation rules or schema for final payload validation");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(52, "mj-code-editor", 116);
-    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_26_Template_mj_code_editor_valueChange_52_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
-    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(9);
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    const cycle_r27 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance(11);
-    i0.ɵɵproperty("value", ctx_r1.record.PayloadDownstreamPaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("value", ctx_r1.record.PayloadUpstreamPaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("value", ctx_r1.record.PayloadSelfReadPaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("value", ctx_r1.record.PayloadSelfWritePaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
-    i0.ɵɵadvance(9);
-    i0.ɵɵproperty("value", ctx_r1.record.FinalPayloadValidation || "{}")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
+    i0.ɵɵtextInterpolate(cycle_r27.Status);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 117);
-    i0.ɵɵtext(1);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Actions", ctx_r1.actionCount > 0 ? " (" + ctx_r1.actionCount + ")" : "", " ");
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 79);
-    i0.ɵɵtext(2, " Add Action ");
-    i0.ɵɵelementEnd();
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.configureActions()); });
-    i0.ɵɵelement(1, "i", 79);
-    i0.ɵɵtext(2, " Configure First Action ");
-    i0.ɵɵelementEnd();
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 117);
-    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_2_Conditional_27_ng_template_2_Conditional_4_Conditional_6_Template, 3, 0, "button", 80);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 6 : -1);
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const action_r19 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(action_r19.Description);
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const action_r19 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(action_r19.Type);
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 123);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r20); const action_r19 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.removeAction(action_r19, $event)); });
-    i0.ɵɵelement(1, "i", 95);
-    i0.ɵɵelementEnd();
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 119);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const action_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("Actions", action_r19.ID)); });
-    i0.ɵɵelementStart(1, "div", 84);
-    i0.ɵɵelement(2, "i");
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", cycle_r27.ID)); });
+    i0.ɵɵelementStart(1, "div", 47);
+    i0.ɵɵelement(2, "i", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 86)(4, "div", 87);
+    i0.ɵɵelementStart(3, "div", 48)(4, "div", 49);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_6_Template, 2, 1, "div", 88);
-    i0.ɵɵelementStart(7, "div", 89);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 90);
-    i0.ɵɵelementStart(9, "span", 120);
-    i0.ɵɵelement(10, "i", 121);
-    i0.ɵɵtext(11);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 91);
-    i0.ɵɵtemplate(13, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_13_Template, 2, 0, "button", 122);
-    i0.ɵɵelement(14, "i", 93);
+    i0.ɵɵelementStart(6, "div", 51);
+    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 52)(8, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 53);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 55);
+    i0.ɵɵelement(10, "i", 57);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const action_r19 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getActionIcon(action_r19));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(action_r19.Name || "Untitled Action");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(action_r19.Description ? 6 : -1);
+    const cycle_r27 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Learning Cycle ", cycle_r27.ID.substring(0, 8), "");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(action_r19.Type ? 8 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", action_r19.Status === "Active")("inactive", action_r19.Status !== "Active");
+    i0.ɵɵconditional(cycle_r27.StartedAt ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-check-circle", action_r19.Status === "Active")("fa-times-circle", action_r19.Status !== "Active");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", action_r19.Status, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 13 : -1);
+    i0.ɵɵconditional(cycle_r27.Status ? 8 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Actions", "")); });
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r1.actionCount, " actions...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 15, 15, "div", 118, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 40);
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 87, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.agentActions);
+    i0.ɵɵrepeater(ctx_r1.learningCycles);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.actionCount > ctx_r1.agentActions.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.learningCycleCount > ctx_r1.learningCycles.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 74);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_3_Template, 3, 0, "button", 75);
+function AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 61);
+    i0.ɵɵtext(3, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Template, 7, 1, "div", 37)(5, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 76);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_4_Template, 6, 0, "div", 38)(5, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Conditional_5_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.actionCount === 0 ? 4 : 5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.learningCycleCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Template, 6, 2, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_25_ng_template_2_Template, 6, 1, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 30);
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 90);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Sub-Agents", ctx_r1.subAgentCount > 0 ? " (" + ctx_r1.subAgentCount + ")" : "", " ");
+    i0.ɵɵtextInterpolate1(" Notes", ctx_r1.noteCount > 0 ? " (" + ctx_r1.noteCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
-    i0.ɵɵelement(1, "i", 79);
-    i0.ɵɵtext(2, " Add Sub-Agent ");
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Add Note ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
-    i0.ɵɵelement(1, "i", 79);
-    i0.ɵɵtext(2, " Create First Sub-Agent ");
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " Create First Note ");
     i0.ɵɵelementEnd();
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 30);
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵelementStart(2, "h4");
-    i0.ɵɵtext(3, "No Sub-Agents");
+    i0.ɵɵtext(3, "No Notes");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "Create sub-agents to build a hierarchical structure for complex workflows.");
+    i0.ɵɵtext(5, "Add notes to document important information, observations, or instructions for this agent.");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 80);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 6 : -1);
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 126);
-} if (rf & 2) {
-    const subAgent_r25 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("src", subAgent_r25.LogoURL, i0.ɵɵsanitizeUrl)("alt", subAgent_r25.Name + " logo");
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i");
-} if (rf & 2) {
-    const subAgent_r25 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵclassMap(ctx_r1.getSubAgentIcon(subAgent_r25));
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 6 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const subAgent_r25 = i0.ɵɵnextContext().$implicit;
+    const note_r32 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(subAgent_r25.Description);
+    i0.ɵɵtextInterpolate2("", note_r32.Note.substring(0, 100), "", note_r32.Note.length > 100 ? "..." : "", "");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 120);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const subAgent_r25 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵstyleProp("background-color", ctx_r1.getStatusBadgeColor());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", subAgent_r25.Status, " ");
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
-    i0.ɵɵtext(1);
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 52);
+    i0.ɵɵelement(1, "i", 89);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "date");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const subAgent_r25 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(subAgent_r25.ExecutionMode);
+    const note_r32 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, note_r32.__mj_CreatedAt, "short"), " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const subAgent_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", subAgent_r25.ID)); });
-    i0.ɵɵelementStart(1, "div", 84);
-    i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_2_Template, 1, 2, "img", 126)(3, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_3_Template, 1, 2, "i", 11);
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r32 = i0.ɵɵrestoreView(_r31).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", note_r32.ID)); });
+    i0.ɵɵelementStart(1, "div", 47);
+    i0.ɵɵelement(2, "i", 90);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 86)(5, "div", 87);
-    i0.ɵɵtext(6);
+    i0.ɵɵelementStart(3, "div", 48)(4, "div", 49);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_7_Template, 2, 1, "div", 88);
-    i0.ɵɵelementStart(8, "div", 89);
-    i0.ɵɵtemplate(9, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_9_Template, 2, 3, "span", 127)(10, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Conditional_10_Template, 2, 1, "span", 90);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 50);
+    i0.ɵɵelementStart(7, "div", 51);
+    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 91);
-    i0.ɵɵelement(12, "i", 93);
+    i0.ɵɵelementStart(9, "div", 55);
+    i0.ɵɵelement(10, "i", 57);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const subAgent_r25 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.hasSubAgentLogoURL(subAgent_r25) ? 2 : 3);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(subAgent_r25.Name || "Untitled Sub-Agent");
+    const note_r32 = ctx.$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(note_r32.Type || "Note");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(subAgent_r25.Description ? 7 : -1);
+    i0.ɵɵconditional(note_r32.Note ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(subAgent_r25.Status ? 9 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(subAgent_r25.ExecutionMode ? 10 : -1);
+    i0.ɵɵconditional(note_r32.__mj_CreatedAt ? 8 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agents", "")); });
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r1.subAgentCount, " sub-agents...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_For_2_Template, 13, 5, "div", 124, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 40);
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 91, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.subAgents);
+    i0.ɵɵrepeater(ctx_r1.agentNotes);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.subAgentCount > ctx_r1.subAgents.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.noteCount > ctx_r1.agentNotes.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtext(3, " Manage hierarchical relationships with child agents that work under this agent. ");
+function AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 61);
+    i0.ɵɵtext(3, " Manage notes, documentation, and annotations for this agent. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 74);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_5_Template, 3, 0, "button", 75);
+    i0.ɵɵelementStart(4, "div", 36);
+    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_5_Template, 3, 0, "button", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_6_Template, 7, 1, "div", 37)(7, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Conditional_7_Template, 4, 1, "div", 76);
+    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_6_Template, 7, 1, "div", 38)(7, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Conditional_7_Template, 4, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.EditMode && ctx_r1.UserCanCreateNotes ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.subAgentCount === 0 ? 6 : 7);
+    i0.ɵɵconditional(ctx_r1.noteCount === 0 ? 6 : 7);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_28_ng_template_2_Template, 8, 2, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_26_ng_template_2_Template, 8, 2, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 128);
-    i0.ɵɵtext(1, " Execution Guardrails ");
-} }
-function AIAgentFormComponentExtended_form_2_ng_template_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtext(3, " Set limits to prevent runaway agent executions and control resource usage. ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 129);
-    i0.ɵɵelement(5, "mj-form-field", 130)(6, "mj-form-field", 131)(7, "mj-form-field", 132)(8, "mj-form-field", 133);
-    i0.ɵɵelementEnd()();
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 93);
+    i0.ɵɵtext(1);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-} }
-function AIAgentFormComponentExtended_form_2_ng_template_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 99);
-    i0.ɵɵtext(1, " Configuration ");
+    i0.ɵɵtextInterpolate1(" Execution History", ctx_r1.executionHistoryCount > 0 ? " (" + ctx_r1.executionHistoryCount + ")" : "", " ");
 } }
-function AIAgentFormComponentExtended_form_2_ng_template_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtext(3, " Advanced configuration settings for agent behavior and execution. ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 129);
-    i0.ɵɵelement(5, "mj-form-field", 134)(6, "mj-form-field", 135)(7, "mj-form-field", 136)(8, "mj-form-field", 137)(9, "mj-form-field", 138)(10, "mj-form-field", 139)(11, "mj-form-field", 140)(12, "mj-form-field", 141)(13, "mj-form-field", 142);
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 93);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Execution History");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 143)(15, "h4", 98);
-    i0.ɵɵelement(16, "i", 144);
-    i0.ɵɵtext(17, " Context Compression ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 129);
-    i0.ɵɵelement(19, "mj-form-field", 145)(20, "mj-form-field", 146)(21, "mj-form-field", 147)(22, "mj-form-field", 148);
+    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_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 105);
+    i0.ɵɵelement(1, "i", 111);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    const execution_r35 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatExecutionTimeFromDates(execution_r35.StartedAt, execution_r35.CompletedAt), " ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 149);
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 109);
     i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const execution_r35 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Notes", ctx_r1.noteCount > 0 ? " (" + ctx_r1.noteCount + ")" : "", " ");
+    i0.ɵɵtextInterpolate(ctx_r1.getExecutionResultPreview(execution_r35, true));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 79);
-    i0.ɵɵtext(2, " Add Note ");
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 112)(1, "h5");
+    i0.ɵɵtext(2, "Result");
     i0.ɵɵelementEnd();
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 81);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_6_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addNote()); });
-    i0.ɵɵelement(1, "i", 79);
-    i0.ɵɵtext(2, " Create First Note ");
+    i0.ɵɵelement(3, "mj-code-editor", 118);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const execution_r35 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r1.getExecutionResultPreview(execution_r35, false))("readonly", true)("lineWrapping", true);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 149);
-    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.");
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 113)(1, "h5");
+    i0.ɵɵelement(2, "i", 119);
+    i0.ɵɵtext(3, " Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_6_Conditional_6_Template, 3, 0, "button", 80);
+    i0.ɵɵelementStart(4, "div", 120);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const execution_r35 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(execution_r35.ErrorMessage);
+} }
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 115)(1, "span", 116);
+    i0.ɵɵtext(2, "Completed:");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 117);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "date");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 6 : -1);
+    const execution_r35 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, execution_r35.CompletedAt, "medium"));
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵtext(1);
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 115)(1, "span", 116);
+    i0.ɵɵtext(2, "Conversation:");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 117);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const note_r30 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", note_r30.Note.substring(0, 100), "", note_r30.Note.length > 100 ? "..." : "", "");
+    const execution_r35 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(execution_r35.ConversationID);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
-    i0.ɵɵelement(1, "i", 152);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "date");
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 110);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_1_Template, 4, 3, "div", 112)(2, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_2_Template, 6, 1, "div", 113);
+    i0.ɵɵelementStart(3, "div", 114)(4, "div", 115)(5, "span", 116);
+    i0.ɵɵtext(6, "Started:");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 117);
+    i0.ɵɵtext(8);
+    i0.ɵɵpipe(9, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(10, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_10_Template, 6, 4, "div", 115)(11, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Conditional_11_Template, 5, 1, "div", 115);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const note_r30 = i0.ɵɵnextContext().$implicit;
+    const execution_r35 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(execution_r35.Result ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(execution_r35.ErrorMessage ? 2 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, execution_r35.StartedAt, "medium"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, note_r30.__mj_CreatedAt, "short"), " ");
+    i0.ɵɵconditional(execution_r35.CompletedAt ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(execution_r35.ConversationID ? 11 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 151);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_For_2_Template_div_click_0_listener() { const note_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", note_r30.ID)); });
-    i0.ɵɵelementStart(1, "div", 84);
-    i0.ɵɵelement(2, "i", 149);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 86)(4, "div", 87);
-    i0.ɵɵtext(5);
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 97)(1, "div")(2, "div", 98);
+    i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_For_2_Conditional_6_Template, 2, 2, "div", 88);
-    i0.ɵɵelementStart(7, "div", 89);
-    i0.ɵɵtemplate(8, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_For_2_Conditional_8_Template, 4, 4, "span", 90);
+    i0.ɵɵelementStart(4, "div", 99)(5, "div", 100);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template_div_click_5_listener() { const execution_r35 = i0.ɵɵrestoreView(_r34).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleExecutionExpanded(execution_r35.ID)); });
+    i0.ɵɵelementStart(6, "div")(7, "div", 101);
+    i0.ɵɵelement(8, "i", 102);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(10, "span", 103);
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 91);
-    i0.ɵɵelement(10, "i", 93);
+    i0.ɵɵelementStart(13, "div", 104)(14, "span", 28);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(16, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_16_Template, 3, 1, "span", 105);
+    i0.ɵɵelementStart(17, "div", 106)(18, "button", 107);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template_button_click_18_listener($event) { const execution_r35 = i0.ɵɵrestoreView(_r34).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); ctx_r1.openExecutionRecord(execution_r35.ID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(19, "i", 108);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(20, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_20_Template, 2, 1, "div", 109);
     i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(21, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Conditional_21_Template, 12, 8, "div", 110);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const note_r30 = ctx.$implicit;
+    const execution_r35 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r35.ID]);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getExecutionStatusColor(execution_r35.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getExecutionStatusIcon(execution_r35.Status));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(note_r30.Type || "Note");
+    i0.ɵɵclassProp("expanded", ctx_r1.expandedExecutions[execution_r35.ID]);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(note_r30.Note ? 6 : -1);
+    i0.ɵɵtextInterpolate1(" Execution #", execution_r35.ID.substring(0, 8), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(note_r30.__mj_CreatedAt ? 8 : -1);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(12, 16, execution_r35.__mj_CreatedAt, "MMM d, h:mm a"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getExecutionStatusColor(execution_r35.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", execution_r35.Status || "Unknown", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(execution_r35.CompletedAt ? 16 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(execution_r35.Result && !ctx_r1.expandedExecutions[execution_r35.ID] ? 20 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.expandedExecutions[execution_r35.ID] ? 21 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Notes", "")); });
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("MJ: AI Agent Runs", "")); });
     i0.ɵɵelementStart(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r1.noteCount, " notes...");
+    i0.ɵɵtextInterpolate1("View all ", ctx_r1.executionHistoryCount, " executions...");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_For_2_Template, 11, 3, "div", 150, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_Conditional_3_Template, 3, 1, "div", 40);
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95);
+    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_For_2_Template, 22, 19, "div", 96, _forTrack0);
+    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.agentNotes);
+    i0.ɵɵrepeater(ctx_r1.recentExecutions);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.noteCount > ctx_r1.agentNotes.length ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.executionHistoryCount > ctx_r1.recentExecutions.length ? 3 : -1);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtext(3, " Manage notes, documentation, and annotations for this agent. ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 74);
-    i0.ɵɵtemplate(5, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_5_Template, 3, 0, "button", 75);
+function AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94)(1, "div", 35)(2, "div", 61);
+    i0.ɵɵtext(3, " Review execution history, requests, and performance metrics for this agent. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(6, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_6_Template, 7, 1, "div", 37)(7, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Conditional_7_Template, 4, 1, "div", 76);
+    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_4_Template, 6, 0, "div", 38)(5, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Conditional_5_Template, 4, 1, "div", 95);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r1.EditMode ? 5 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.noteCount === 0 ? 6 : 7);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.executionHistoryCount === 0 ? 4 : 5);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+function AIAgentFormComponentExtended_form_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_35_ng_template_2_Template, 8, 2, "ng-template", 26);
+    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_27_ng_template_2_Template, 6, 1, "ng-template", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("expanded", false);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 153);
-    i0.ɵɵtext(1);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Learning Cycles", ctx_r1.learningCycleCount > 0 ? " (" + ctx_r1.learningCycleCount + ")" : "", " ");
+function AIAgentFormComponentExtended_form_2_ng_template_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 121);
+    i0.ɵɵtext(1, " Payload ");
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 153);
-    i0.ɵɵelementStart(2, "h4");
-    i0.ɵɵtext(3, "No Learning Cycles");
+function AIAgentFormComponentExtended_form_2_ng_template_30_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 61);
+    i0.ɵɵtext(3, " Configure how this agent handles data payloads and validation. ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 122)(5, "h4", 123);
+    i0.ɵɵelement(6, "i", 71);
+    i0.ɵɵtext(7, " Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p");
-    i0.ɵɵtext(5, "Learning cycles will appear here as the agent processes requests and improves over time.");
+    i0.ɵɵelementStart(8, "div", 124);
+    i0.ɵɵelement(9, "mj-form-field", 125)(10, "mj-form-field", 126)(11, "mj-form-field", 127);
     i0.ɵɵelementEnd()();
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
-    i0.ɵɵelement(1, "i", 152);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "date");
+    i0.ɵɵelementStart(12, "div", 128)(13, "h4", 123);
+    i0.ɵɵelement(14, "i", 129);
+    i0.ɵɵtext(15, " Path Configuration ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const cycle_r33 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(3, 1, cycle_r33.StartedAt, "short"), " ");
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 120);
-    i0.ɵɵtext(1);
+    i0.ɵɵelementStart(16, "div", 130)(17, "label", 131);
+    i0.ɵɵelement(18, "i", 132);
+    i0.ɵɵtext(19, " Downstream Paths ");
+    i0.ɵɵelementStart(20, "span", 133);
+    i0.ɵɵtext(21, "JSON array of paths to pass to sub-agents");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "mj-code-editor", 134);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_30_Template_mj_code_editor_valueChange_22_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadDownstreamPaths", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div", 130)(24, "label", 131);
+    i0.ɵɵelement(25, "i", 135);
+    i0.ɵɵtext(26, " Upstream Paths ");
+    i0.ɵɵelementStart(27, "span", 133);
+    i0.ɵɵtext(28, "JSON array of paths to return to parent agent");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(29, "mj-code-editor", 134);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_30_Template_mj_code_editor_valueChange_29_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadUpstreamPaths", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(30, "div", 130)(31, "label", 131);
+    i0.ɵɵelement(32, "i", 136);
+    i0.ɵɵtext(33, " Self Read Paths ");
+    i0.ɵɵelementStart(34, "span", 133);
+    i0.ɵɵtext(35, "JSON array of paths this agent can read");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(36, "mj-code-editor", 134);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_30_Template_mj_code_editor_valueChange_36_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfReadPaths", $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(37, "div", 130)(38, "label", 131);
+    i0.ɵɵelement(39, "i", 137);
+    i0.ɵɵtext(40, " Self Write Paths ");
+    i0.ɵɵelementStart(41, "span", 133);
+    i0.ɵɵtext(42, "JSON array of paths this agent can write to");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(43, "mj-code-editor", 134);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_30_Template_mj_code_editor_valueChange_43_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("PayloadSelfWritePaths", $event)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(44, "div", 138)(45, "h4", 123);
+    i0.ɵɵelement(46, "i", 139);
+    i0.ɵɵtext(47, " Final Payload Validation ");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(48, "div", 130)(49, "label", 131)(50, "span", 133);
+    i0.ɵɵtext(51, "JSON validation rules or schema for final payload validation");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(52, "mj-code-editor", 140);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_30_Template_mj_code_editor_valueChange_52_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.updatePayloadField("FinalPayloadValidation", $event)); });
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const cycle_r33 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(9);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cycle_r33.Status);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance(11);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadDownstreamPaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadUpstreamPaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadSelfReadPaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("value", ctx_r1.record.PayloadSelfWritePaths || "[]")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
+    i0.ɵɵadvance(9);
+    i0.ɵɵproperty("value", ctx_r1.record.FinalPayloadValidation || "{}")("readonly", !ctx_r1.EditMode)("lineWrapping", true);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 155);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_For_2_Template_div_click_0_listener() { const cycle_r33 = i0.ɵɵrestoreView(_r32).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", cycle_r33.ID)); });
-    i0.ɵɵelementStart(1, "div", 84);
-    i0.ɵɵelement(2, "i", 153);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 86)(4, "div", 87);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 89);
-    i0.ɵɵtemplate(7, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_For_2_Conditional_7_Template, 4, 4, "span", 90)(8, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_For_2_Conditional_8_Template, 2, 1, "span", 120);
+function AIAgentFormComponentExtended_form_2_ng_template_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 141);
+    i0.ɵɵtext(1, " Execution Guardrails ");
+} }
+function AIAgentFormComponentExtended_form_2_ng_template_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 61);
+    i0.ɵɵtext(3, " Set limits to prevent runaway agent executions and control resource usage. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 91);
-    i0.ɵɵelement(10, "i", 93);
+    i0.ɵɵelementStart(4, "div", 142);
+    i0.ɵɵelement(5, "mj-form-field", 143)(6, "mj-form-field", 144)(7, "mj-form-field", 145)(8, "mj-form-field", 146);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const cycle_r33 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("Learning Cycle ", cycle_r33.ID.substring(0, 8), "");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(cycle_r33.StartedAt ? 7 : -1);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(cycle_r33.Status ? 8 : -1);
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.navigateToEntity("AI Agent Learning Cycles", "")); });
-    i0.ɵɵelementStart(1, "span");
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("View all ", ctx_r1.learningCycleCount, " cycles...");
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_For_2_Template, 11, 3, "div", 154, _forTrack0);
-    i0.ɵɵtemplate(3, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_Conditional_3_Template, 3, 1, "div", 40);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.learningCycles);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.learningCycleCount > ctx_r1.learningCycles.length ? 3 : -1);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
 } }
-function AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 35)(2, "div", 36);
-    i0.ɵɵtext(3, " Monitor and manage learning cycles, training sessions, and performance analytics. ");
+function AIAgentFormComponentExtended_form_2_ng_template_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 71);
+    i0.ɵɵtext(1, " Configuration ");
+} }
+function AIAgentFormComponentExtended_form_2_ng_template_36_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35)(2, "div", 61);
+    i0.ɵɵtext(3, " Advanced configuration settings for agent behavior and execution. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_4_Template, 6, 0, "div", 37)(5, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Conditional_5_Template, 4, 1, "div", 76);
+    i0.ɵɵelementStart(4, "div", 142);
+    i0.ɵɵelement(5, "mj-form-field", 147)(6, "mj-form-field", 148)(7, "mj-form-field", 149)(8, "mj-form-field", 150)(9, "mj-form-field", 151)(10, "mj-form-field", 152)(11, "mj-form-field", 153)(12, "mj-form-field", 154)(13, "mj-form-field", 155);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.learningCycleCount === 0 ? 4 : 5);
-} }
-function AIAgentFormComponentExtended_form_2_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(1, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_1_Template, 2, 1, "ng-template", 25)(2, AIAgentFormComponentExtended_form_2_Conditional_36_ng_template_2_Template, 6, 1, "ng-template", 26);
+    i0.ɵɵelementStart(14, "div", 156)(15, "h4", 123);
+    i0.ɵɵelement(16, "i", 157);
+    i0.ɵɵtext(17, " Context Compression ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 142)(19, "mj-form-field", 158);
+    i0.ɵɵlistener("valueChange", function AIAgentFormComponentExtended_form_2_ng_template_36_Template_mj_form_field_valueChange_19_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onContextCompressionToggle($event)); });
     i0.ɵɵelementEnd();
+    i0.ɵɵelement(20, "mj-form-field", 159)(21, "mj-form-field", 160)(22, "mj-form-field", 161);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    i0.ɵɵproperty("expanded", false);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("EditMode", ctx_r1.EditMode)("record", ctx_r1.record);
 } }
 function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -1196,19 +1238,16 @@ function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(19, "i", 22);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(20, "div", 23)(21, "kendo-panelbar");
-    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_2_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 24)(23, AIAgentFormComponentExtended_form_2_Conditional_23_Template, 3, 1, "kendo-panelbar-item", 24);
-    i0.ɵɵelementStart(24, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(25, AIAgentFormComponentExtended_form_2_ng_template_25_Template, 2, 0, "ng-template", 25)(26, AIAgentFormComponentExtended_form_2_ng_template_26_Template, 53, 21, "ng-template", 26);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(27, AIAgentFormComponentExtended_form_2_Conditional_27_Template, 3, 1, "kendo-panelbar-item", 24)(28, AIAgentFormComponentExtended_form_2_Conditional_28_Template, 3, 1, "kendo-panelbar-item", 24);
-    i0.ɵɵelementStart(29, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(30, AIAgentFormComponentExtended_form_2_ng_template_30_Template, 2, 0, "ng-template", 25)(31, AIAgentFormComponentExtended_form_2_ng_template_31_Template, 9, 8, "ng-template", 26);
+    i0.ɵɵtemplate(22, AIAgentFormComponentExtended_form_2_Conditional_22_Template, 3, 1, "kendo-panelbar-item", 24)(23, AIAgentFormComponentExtended_form_2_Conditional_23_Template, 3, 1, "kendo-panelbar-item", 24)(24, AIAgentFormComponentExtended_form_2_Conditional_24_Template, 3, 1, "kendo-panelbar-item", 24)(25, AIAgentFormComponentExtended_form_2_Conditional_25_Template, 3, 1, "kendo-panelbar-item", 24)(26, AIAgentFormComponentExtended_form_2_Conditional_26_Template, 3, 1, "kendo-panelbar-item", 24)(27, AIAgentFormComponentExtended_form_2_Conditional_27_Template, 3, 1, "kendo-panelbar-item", 24);
+    i0.ɵɵelementStart(28, "kendo-panelbar-item", 24);
+    i0.ɵɵtemplate(29, AIAgentFormComponentExtended_form_2_ng_template_29_Template, 2, 0, "ng-template", 25)(30, AIAgentFormComponentExtended_form_2_ng_template_30_Template, 53, 21, "ng-template", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "kendo-panelbar-item", 24);
-    i0.ɵɵtemplate(33, AIAgentFormComponentExtended_form_2_ng_template_33_Template, 2, 0, "ng-template", 25)(34, AIAgentFormComponentExtended_form_2_ng_template_34_Template, 23, 26, "ng-template", 26);
+    i0.ɵɵelementStart(31, "kendo-panelbar-item", 24);
+    i0.ɵɵtemplate(32, AIAgentFormComponentExtended_form_2_ng_template_32_Template, 2, 0, "ng-template", 25)(33, AIAgentFormComponentExtended_form_2_ng_template_33_Template, 9, 8, "ng-template", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(35, AIAgentFormComponentExtended_form_2_Conditional_35_Template, 3, 1, "kendo-panelbar-item", 24)(36, AIAgentFormComponentExtended_form_2_Conditional_36_Template, 3, 1, "kendo-panelbar-item", 24);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(34, "kendo-panelbar-item", 24);
+    i0.ɵɵtemplate(35, AIAgentFormComponentExtended_form_2_ng_template_35_Template, 2, 0, "ng-template", 25)(36, AIAgentFormComponentExtended_form_2_ng_template_36_Template, 23, 26, "ng-template", 26);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
@@ -1230,19 +1269,19 @@ function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.record.ID ? 23 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("expanded", false);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.record.ID ? 27 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 24 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.record.ID ? 25 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.ID ? 28 : -1);
+    i0.ɵɵconditional(ctx_r1.record.ID ? 26 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.record.ID ? 27 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("expanded", false);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("expanded", false);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.record.ID ? 35 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.record.ID ? 36 : -1);
+    i0.ɵɵproperty("expanded", false);
 } }
 /**
  * Enhanced AI Agent form component that extends the auto-generated base form
@@ -1275,13 +1314,131 @@ function AIAgentFormComponentExtended_form_2_Template(rf, ctx) { if (rf & 1) {
  * ```
  */
 let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AIAgentFormComponent {
-    constructor(elementRef, sharedService, router, route, cdr, dialogService, viewContainerRef, newAgentDialogService, actionGalleryService, testHarnessService) {
+    // Main AI Agent permissions inherited from BaseFormComponent:
+    // - UserCanEdit (Update permission)
+    // - UserCanRead (Read permission) 
+    // - UserCanCreate (Create permission)
+    // - UserCanDelete (Delete permission)
+    /** Check if user can create AI Agent Actions */
+    get UserCanCreateActions() {
+        return this.checkEntityPermission('AI Agent Actions', 'Create');
+    }
+    /** Check if user can update AI Agent Actions */
+    get UserCanUpdateActions() {
+        return this.checkEntityPermission('AI Agent Actions', 'Update');
+    }
+    /** Check if user can delete AI Agent Actions */
+    get UserCanDeleteActions() {
+        return this.checkEntityPermission('AI Agent Actions', 'Delete');
+    }
+    /** Check if user can create AI Agent Prompts */
+    get UserCanCreatePrompts() {
+        return this.checkEntityPermission('MJ: AI Agent Prompts', 'Create');
+    }
+    /** Check if user can update AI Agent Prompts */
+    get UserCanUpdatePrompts() {
+        return this.checkEntityPermission('MJ: AI Agent Prompts', 'Update');
+    }
+    /** Check if user can delete AI Agent Prompts */
+    get UserCanDeletePrompts() {
+        return this.checkEntityPermission('MJ: AI Agent Prompts', 'Delete');
+    }
+    /** Check if user can create AI Agents (for sub-agents) */
+    get UserCanCreateSubAgents() {
+        return this.checkEntityPermission('AI Agents', 'Create');
+    }
+    /** Check if user can update AI Agents (for sub-agents) */
+    get UserCanUpdateSubAgents() {
+        return this.checkEntityPermission('AI Agents', 'Update');
+    }
+    /** Check if user can delete AI Agents (for sub-agents) */
+    get UserCanDeleteSubAgents() {
+        return this.checkEntityPermission('AI Agents', 'Delete');
+    }
+    /** Check if user can create AI Agent Notes */
+    get UserCanCreateNotes() {
+        return this.checkEntityPermission('AI Agent Notes', 'Create');
+    }
+    /** Check if user can update AI Agent Notes */
+    get UserCanUpdateNotes() {
+        return this.checkEntityPermission('AI Agent Notes', 'Update');
+    }
+    /** Check if user can delete AI Agent Notes */
+    get UserCanDeleteNotes() {
+        return this.checkEntityPermission('AI Agent Notes', 'Delete');
+    }
+    /** Check if user can view AI Agent Learning Cycles */
+    get UserCanViewLearningCycles() {
+        return this.checkEntityPermission('AI Agent Learning Cycles', 'Read');
+    }
+    /** Check if user can view AI Agent Runs (execution history) */
+    get UserCanViewExecutionHistory() {
+        return this.checkEntityPermission('MJ: AI Agent Runs', 'Read');
+    }
+    /** Check if user can create AI Prompts (needed for creating new prompts) */
+    get UserCanCreateAIPrompts() {
+        return this.checkEntityPermission('AI Prompts', 'Create');
+    }
+    /** Check if user can create both AI Prompts and AI Agent Prompts (for createNewPrompt functionality) */
+    get UserCanCreateNewPrompts() {
+        return this.UserCanCreateAIPrompts && this.UserCanCreatePrompts;
+    }
+    /**
+     * Helper method to check entity permissions with caching
+     * @param entityName - The name of the entity to check permissions for
+     * @param permissionType - The type of permission to check (Create, Read, Update, Delete)
+     * @returns boolean indicating if user has the permission
+     */
+    checkEntityPermission(entityName, permissionType) {
+        const cacheKey = `${entityName}_${permissionType}`;
+        if (this._permissionCache.has(cacheKey)) {
+            return this._permissionCache.get(cacheKey);
+        }
+        try {
+            const md = new Metadata();
+            const entityInfo = md.Entities.find(e => e.Name === entityName);
+            if (!entityInfo) {
+                console.warn(`Entity '${entityName}' not found for permission check`);
+                this._permissionCache.set(cacheKey, false);
+                return false;
+            }
+            const userPermissions = entityInfo.GetUserPermisions(md.CurrentUser);
+            let hasPermission = false;
+            switch (permissionType) {
+                case 'Create':
+                    hasPermission = userPermissions.CanCreate;
+                    break;
+                case 'Read':
+                    hasPermission = userPermissions.CanRead;
+                    break;
+                case 'Update':
+                    hasPermission = userPermissions.CanUpdate;
+                    break;
+                case 'Delete':
+                    hasPermission = userPermissions.CanDelete;
+                    break;
+            }
+            this._permissionCache.set(cacheKey, hasPermission);
+            return hasPermission;
+        }
+        catch (error) {
+            console.error(`Error checking ${permissionType} permission for ${entityName}:`, error);
+            this._permissionCache.set(cacheKey, false);
+            return false;
+        }
+    }
+    /**
+     * Clears the permission cache. Call this when user context changes or permissions are updated.
+     */
+    clearPermissionCache() {
+        this._permissionCache.clear();
+    }
+    constructor(elementRef, sharedService, router, route, cdr, dialogService, viewContainerRef, agentManagementService, testHarnessService) {
         super(elementRef, sharedService, router, route, cdr);
         this.sharedService = sharedService;
         this.dialogService = dialogService;
         this.viewContainerRef = viewContainerRef;
-        this.newAgentDialogService = newAgentDialogService;
-        this.actionGalleryService = actionGalleryService;
+        this.agentManagementService = agentManagementService;
         this.testHarnessService = testHarnessService;
         // === Related Entity Counts ===
         /** Number of sub-agents under this agent */
@@ -1311,11 +1468,24 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         this.recentExecutions = [];
         /** Track which execution cards are expanded */
         this.expandedExecutions = {};
-        /** Available model selection modes */
+        // === Dropdown Data ===
+        /** Model selection mode options for the dropdown */
         this.modelSelectionModes = [
             { text: 'Agent Type', value: 'Agent Type' },
             { text: 'Agent', value: 'Agent' }
         ];
+        // === Permission Checks for Related Entities ===
+        /** Cache for permission checks to avoid repeated calculations */
+        this._permissionCache = new Map();
+        // === Transaction-based editing support ===
+        /** Now using BaseFormComponent's PendingRecords system exclusively */
+        /** Flag to indicate if there are unsaved changes */
+        this.hasUnsavedChanges = false;
+        // === Original State for Cancel/Revert ===
+        /** Snapshots of original data for reverting UI changes */
+        this.originalSnapshots = null;
+        /** Flag to track if we're currently performing a cancel operation */
+        this.isPerformingCancel = false;
     }
     /**
      * Component initialization. Calls parent initialization and loads related entity data
@@ -1337,7 +1507,6 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         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({
@@ -1360,7 +1529,6 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             });
             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',
@@ -1384,6 +1552,8 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             });
             this.recentExecutions = historyResult.Results || [];
             this.executionHistoryCount = historyResult.TotalRowCount || 0;
+            // Create snapshot for cancel/revert functionality
+            this.createOriginalSnapshot();
         }
         catch (error) {
             console.error('Error loading related data:', error);
@@ -1396,6 +1566,77 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             this.executionHistoryCount = 0;
         }
     }
+    /**
+     * Creates a snapshot of the current UI state for cancel/revert functionality
+     * @private
+     */
+    createOriginalSnapshot() {
+        this.originalSnapshots = {
+            agentPrompts: [...this.agentPrompts], // Deep copy of arrays
+            agentActions: [...this.agentActions],
+            subAgents: [...this.subAgents],
+            promptCount: this.promptCount,
+            actionCount: this.actionCount,
+            subAgentCount: this.subAgentCount,
+            learningCycleCount: this.learningCycleCount,
+            noteCount: this.noteCount,
+            executionHistoryCount: this.executionHistoryCount
+        };
+    }
+    /**
+     * Restores the UI to its original state using saved snapshots
+     * @private
+     */
+    restoreFromSnapshots() {
+        if (this.originalSnapshots) {
+            console.log('Restoring UI from snapshots...');
+            // Restore arrays (create new copies to ensure reactivity)
+            this.agentPrompts = [...this.originalSnapshots.agentPrompts];
+            this.agentActions = [...this.originalSnapshots.agentActions];
+            this.subAgents = [...this.originalSnapshots.subAgents];
+            // Restore counts
+            this.promptCount = this.originalSnapshots.promptCount;
+            this.actionCount = this.originalSnapshots.actionCount;
+            this.subAgentCount = this.originalSnapshots.subAgentCount;
+            this.learningCycleCount = this.originalSnapshots.learningCycleCount;
+            this.noteCount = this.originalSnapshots.noteCount;
+            this.executionHistoryCount = this.originalSnapshots.executionHistoryCount;
+            // Reset other UI state
+            this.hasUnsavedChanges = false;
+            console.log('UI restored - Prompts:', this.promptCount, 'Actions:', this.actionCount, 'SubAgents:', this.subAgentCount);
+            // Force change detection to update the UI
+            this.cdr.detectChanges();
+        }
+        else {
+            console.warn('No snapshots available to restore from');
+        }
+    }
+    /**
+     * Override CancelEdit to restore UI state when user cancels changes
+     */
+    CancelEdit() {
+        console.log('=== AI Agent CancelEdit called ===');
+        console.log('Pending records before clear:', this.PendingRecords.length);
+        // Set flag to indicate we're performing a cancel operation
+        this.isPerformingCancel = true;
+        try {
+            // CRITICAL: Clear our pending records BEFORE calling parent
+            // This ensures that any prompt/action/sub-agent changes we added don't persist
+            this.PendingRecords.length = 0;
+            console.log('Pending records after clear:', this.PendingRecords.length);
+            // Call the parent CancelEdit first (this handles main record revert and pending records)
+            super.CancelEdit();
+            // Restore our UI state after parent cancel
+            this.restoreFromSnapshots();
+            // Reset the unsaved changes flag
+            this.hasUnsavedChanges = false;
+            console.log('Cancel completed successfully');
+        }
+        finally {
+            // Always reset the flag
+            this.isPerformingCancel = false;
+        }
+    }
     /**
      * Opens the integrated test harness for the current agent.
      * Validates that the agent has been saved before allowing testing.
@@ -1501,66 +1742,230 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         return !!subAgent?.LogoURL;
     }
     /**
-     * Creates a new sub-agent
+     * Creates a new sub-agent using the create sub-agent dialog
      */
     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
+        try {
+            this.agentManagementService.openCreateSubAgentDialog({
+                title: `Create Sub-Agent for ${this.record.Name || 'Agent'}`,
+                initialName: '',
+                parentAgentId: this.record.ID,
+                parentAgentName: this.record.Name || 'Agent',
+                viewContainerRef: this.viewContainerRef
+            }).subscribe({
+                next: async (result) => {
+                    if (result && result.subAgent) {
+                        try {
+                            // Handle deferred sub-agent creation if parent is not saved
+                            if (!this.record.IsSaved) {
+                                // Store a temporary reference to the parent - will be resolved during save
+                                result.subAgent.Set('_tempParentId', this.record.ID);
+                            }
+                            // Add the sub-agent to pending records
+                            this.PendingRecords.push({
+                                entityObject: result.subAgent,
+                                action: 'save'
+                            });
+                            // Add any newly created prompts to pending records
+                            if (result.newPrompts) {
+                                for (const prompt of result.newPrompts) {
+                                    this.PendingRecords.push({
+                                        entityObject: prompt,
+                                        action: 'save'
+                                    });
+                                }
+                            }
+                            // Add any newly created prompt templates to pending records
+                            if (result.newPromptTemplates) {
+                                for (const template of result.newPromptTemplates) {
+                                    this.PendingRecords.push({
+                                        entityObject: template,
+                                        action: 'save'
+                                    });
+                                }
+                            }
+                            // Add any newly created template contents to pending records
+                            if (result.newTemplateContents) {
+                                for (const content of result.newTemplateContents) {
+                                    this.PendingRecords.push({
+                                        entityObject: content,
+                                        action: 'save'
+                                    });
+                                }
+                            }
+                            // Add agent prompt links to pending records
+                            if (result.agentPrompts) {
+                                for (const agentPrompt of result.agentPrompts) {
+                                    this.PendingRecords.push({
+                                        entityObject: agentPrompt,
+                                        action: 'save'
+                                    });
+                                }
+                            }
+                            // Add agent action links to pending records
+                            if (result.agentActions) {
+                                for (const agentAction of result.agentActions) {
+                                    this.PendingRecords.push({
+                                        entityObject: agentAction,
+                                        action: 'save'
+                                    });
+                                }
+                            }
+                            // Update UI to show the new sub-agent
+                            this.subAgents.push(result.subAgent);
+                            this.subAgentCount = this.subAgents.length;
+                            this.hasUnsavedChanges = true;
+                            // Trigger change detection
+                            this.cdr.detectChanges();
+                            MJNotificationService.Instance.CreateSimpleNotification(`Sub-agent "${result.subAgent.Name}" created and will be saved when you save the parent agent`, 'success', 4000);
+                        }
+                        catch (error) {
+                            console.error('Error processing created sub-agent:', error);
+                            MJNotificationService.Instance.CreateSimpleNotification('Error processing created sub-agent. Please try again.', 'error', 3000);
+                        }
+                    }
+                },
+                error: (error) => {
+                    console.error('Error in create sub-agent dialog:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Error opening sub-agent creation dialog. Please try again.', 'error', 3000);
+                }
+            });
+        }
+        catch (error) {
+            console.error('Error in createSubAgent:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error creating sub-agent. Please try again.', 'error', 3000);
+        }
     }
     /**
-     * Adds a new prompt to the agent
+     * Adds a new prompt to the agent (deferred until save)
      */
     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);
+        // Get currently linked and pending prompt IDs for pre-selection
+        const currentPromptIds = this.agentPrompts.map(ap => ap.ID);
+        const pendingAddIds = this.PendingRecords
+            .filter(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agent Prompts' && p.action === 'save')
+            .map(p => p.entityObject.Get('PromptID'));
+        const allLinkedIds = [...currentPromptIds, ...pendingAddIds];
+        try {
+            this.agentManagementService.openPromptSelectorDialog({
+                title: 'Add Prompts to Agent',
+                multiSelect: true,
+                selectedPromptIds: [],
+                showCreateNew: true,
+                linkedPromptIds: allLinkedIds,
+                viewContainerRef: this.viewContainerRef
+            }).subscribe({
+                next: async (result) => {
+                    if (result && result.selectedPrompts.length > 0) {
+                        // Filter out already linked or pending prompts
+                        const newPrompts = result.selectedPrompts.filter(prompt => !allLinkedIds.includes(prompt.ID));
+                        if (newPrompts.length === 0) {
+                            MJNotificationService.Instance.CreateSimpleNotification('All selected prompts are already linked to this agent', 'info', 3000);
+                            return;
+                        }
+                        // Add to pending changes (defer until save)
+                        const md = new Metadata();
+                        for (const prompt of newPrompts) {
+                            const agentPrompt = await md.GetEntityObject('MJ: AI Agent Prompts');
+                            agentPrompt.NewRecord();
+                            agentPrompt.AgentID = this.record.ID;
+                            agentPrompt.PromptID = prompt.ID;
+                            agentPrompt.Status = 'Active';
+                            agentPrompt.ExecutionOrder = 1;
+                            this.PendingRecords.push({
+                                entityObject: agentPrompt,
+                                action: 'save'
+                            });
+                        }
+                        this.hasUnsavedChanges = true;
+                        // Update UI to show the new prompts (cast to extended type for display)
+                        this.agentPrompts.push(...newPrompts);
+                        this.promptCount = this.agentPrompts.length;
+                        // Trigger change detection to update UI
+                        this.cdr.detectChanges();
+                        // Show success notification
+                        MJNotificationService.Instance.CreateSimpleNotification(`${newPrompts.length} prompt${newPrompts.length === 1 ? '' : 's'} will be added when you save the agent`, 'info', 4000);
+                    }
+                    else if (result && result.createNew) {
+                        // User wants to create a new prompt
+                        await this.createNewPrompt();
+                    }
+                },
+                error: (error) => {
+                    console.error('Error opening prompt selector:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Error opening prompt selector. Please try again.', 'error', 3000);
+                }
+            });
+        }
+        catch (error) {
+            console.error('Error in addPrompt:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error adding prompts. Please try again.', 'error', 3000);
         }
-        else if (result && result.createNew) {
-            // User wants to create a new prompt
-            await this.createNewPrompt();
+    }
+    /**
+     * Handle context compression toggle and reset related fields when disabled
+     */
+    onContextCompressionToggle(value) {
+        const enabled = value === true || value === 'true';
+        if (!enabled) {
+            // Reset context compression related fields to null when disabled
+            this.record.ContextCompressionMessageThreshold = null;
+            this.record.ContextCompressionPromptID = null;
+            this.record.ContextCompressionMessageRetentionCount = null;
+            // Trigger change detection to update the UI
+            this.cdr.detectChanges();
         }
     }
     /**
-     * Opens the enhanced action gallery for selecting actions
+     * Opens the modern Add Action dialog for selecting actions (deferred until save)
      */
     async configureActions() {
-        // Get currently linked action IDs for pre-selection
-        const linkedActionIds = this.agentActions.map(aa => aa.ID);
-        this.actionGalleryService.openForMultiSelection({
-            preSelectedActions: linkedActionIds,
-            showCategories: true,
-            enableQuickTest: true,
-            title: 'Select Actions for Agent',
-            submitButtonText: 'Add Selected Actions'
-        }, this.viewContainerRef).subscribe(async (selectedActions) => {
-            if (selectedActions && selectedActions.length > 0) {
-                // Find newly selected actions (not already linked)
-                const newActions = selectedActions.filter(action => !linkedActionIds.includes(action.ID));
-                // Link each new action to the agent
-                for (const action of newActions) {
-                    await this.linkActionToAgent(action);
+        // Get currently linked and pending action IDs for pre-selection
+        const currentActionIds = this.agentActions.map(aa => aa.ID);
+        const pendingAddIds = this.PendingRecords
+            .filter(p => p.entityObject.EntityInfo.Name === 'AI Agent Actions' && p.action === 'save')
+            .map(p => p.entityObject.Get('ActionID'));
+        const allLinkedIds = [...currentActionIds, ...pendingAddIds];
+        this.agentManagementService.openAddActionDialog({
+            agentId: this.record.ID,
+            agentName: this.record.Name || 'Agent',
+            existingActionIds: allLinkedIds,
+            viewContainerRef: this.viewContainerRef
+        }).subscribe({
+            next: async (selectedActions) => {
+                if (selectedActions && selectedActions.length > 0) {
+                    // Filter out already linked or pending actions
+                    const newActions = selectedActions.filter(action => !allLinkedIds.includes(action.ID));
+                    if (newActions.length === 0) {
+                        MJNotificationService.Instance.CreateSimpleNotification('All selected actions are already linked to this agent', 'info', 3000);
+                        return;
+                    }
+                    // Add to pending changes (defer until save)
+                    const md = new Metadata();
+                    for (const action of newActions) {
+                        const agentAction = await md.GetEntityObject('AI Agent Actions');
+                        agentAction.NewRecord();
+                        agentAction.AgentID = this.record.ID;
+                        agentAction.ActionID = action.ID;
+                        agentAction.Status = 'Active';
+                        this.PendingRecords.push({
+                            entityObject: agentAction,
+                            action: 'save'
+                        });
+                    }
+                    this.hasUnsavedChanges = true;
+                    // Update UI to show the new actions
+                    this.agentActions.push(...newActions);
+                    this.actionCount = this.agentActions.length;
+                    // Trigger change detection to update UI
+                    this.cdr.detectChanges();
+                    // Show success notification
+                    MJNotificationService.Instance.CreateSimpleNotification(`${newActions.length} action${newActions.length === 1 ? '' : 's'} will be added when you save the agent`, 'info', 4000);
                 }
-                // Reload the actions list
-                await this.loadRelatedCounts();
+            },
+            error: (error) => {
+                console.error('Error in add action dialog:', error);
+                MJNotificationService.Instance.CreateSimpleNotification('Error opening action selection dialog. Please try again.', 'error', 3000);
             }
         });
     }
@@ -1744,7 +2149,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         }
     }
     /**
-     * Refreshes the related data
+     * Refreshes the related data and updates snapshots
      */
     async refreshRelatedData() {
         if (this.record?.ID) {
@@ -1752,6 +2157,31 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             MJNotificationService.Instance.CreateSimpleNotification('Related data refreshed', 'success', 2000);
         }
     }
+    /**
+     * Manually refreshes the snapshot for cancel/revert functionality
+     * Useful when you want to reset the "original state" to the current state
+     */
+    refreshSnapshot() {
+        this.createOriginalSnapshot();
+        MJNotificationService.Instance.CreateSimpleNotification('Current state saved as new baseline', 'info', 2000);
+    }
+    /**
+     * Debug method to check current pending records state
+     * Useful for troubleshooting cancel/revert issues
+     */
+    debugPendingRecords() {
+        console.log('=== Pending Records Debug ===');
+        console.log('Pending Records Count:', this.PendingRecords.length);
+        console.log('Has Unsaved Changes:', this.hasUnsavedChanges);
+        console.log('Is Performing Cancel:', this.isPerformingCancel);
+        console.log('Pending Records:', this.PendingRecords.map(p => ({
+            entityName: p.entityObject.EntityInfo.Name,
+            id: p.entityObject.Get('ID'),
+            action: p.action,
+            isDirty: p.entityObject.Dirty
+        })));
+        console.log('=============================');
+    }
     /**
      * Adds a new note to the agent
      */
@@ -1760,77 +2190,85 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         // 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');
-            }
+            this.agentManagementService.openCreatePromptDialog({
+                title: `Create New Prompt for ${this.record.Name || 'Agent'}`,
+                initialName: '',
+                viewContainerRef: this.viewContainerRef
+            }).subscribe({
+                next: async (result) => {
+                    if (result && result.prompt) {
+                        try {
+                            // Get current user using proper MJ pattern
+                            const md = new Metadata();
+                            const currentUserId = md.CurrentUser.ID;
+                            // Add the prompt to PendingRecords (will be saved with agent)
+                            this.PendingRecords.push({
+                                entityObject: result.prompt,
+                                action: 'save'
+                            });
+                            // Add template to PendingRecords if created
+                            if (result.template) {
+                                // Set UserID on template (required field)
+                                result.template.UserID = currentUserId;
+                                this.PendingRecords.push({
+                                    entityObject: result.template,
+                                    action: 'save'
+                                });
+                            }
+                            // Add template contents to PendingRecords if created
+                            if (result.templateContents && result.templateContents.length > 0) {
+                                for (const content of result.templateContents) {
+                                    // Template content does not have UserID field, no manual user assignment needed
+                                    this.PendingRecords.push({
+                                        entityObject: content,
+                                        action: 'save'
+                                    });
+                                }
+                            }
+                            // Create the AI Agent Prompt link
+                            const agentPrompt = await md.GetEntityObject('MJ: AI Agent Prompts');
+                            agentPrompt.NewRecord();
+                            agentPrompt.AgentID = this.record.ID;
+                            agentPrompt.PromptID = result.prompt.ID;
+                            agentPrompt.Status = 'Active';
+                            agentPrompt.ExecutionOrder = 1;
+                            // AI Agent Prompt does not have UserID field, no manual user assignment needed
+                            this.PendingRecords.push({
+                                entityObject: agentPrompt,
+                                action: 'save'
+                            });
+                            this.hasUnsavedChanges = true;
+                            // Update UI to show the new prompt
+                            this.agentPrompts.push(result.prompt);
+                            this.promptCount = this.agentPrompts.length;
+                            // Trigger change detection to update UI
+                            this.cdr.detectChanges();
+                            MJNotificationService.Instance.CreateSimpleNotification(`New prompt "${result.prompt.Name}" will be created and linked when you save the agent`, 'success', 4000);
+                        }
+                        catch (error) {
+                            console.error('Error processing created prompt:', error);
+                            MJNotificationService.Instance.CreateSimpleNotification('Error processing created prompt. Please try again.', 'error', 3000);
+                        }
+                    }
+                },
+                error: (error) => {
+                    console.error('Error in create prompt dialog:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Error opening prompt creation dialog. Please try again.', 'error', 3000);
+                }
+            });
         }
         catch (error) {
-            console.error('Error linking action to agent:', error);
-            MJNotificationService.Instance.CreateSimpleNotification('Failed to add action', 'error', 3000);
+            console.error('Error in createNewPrompt:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error creating new prompt. Please try again.', '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
+     * Removes a prompt from the agent (deferred until save)
      */
     async removePrompt(prompt, event) {
         event.stopPropagation(); // Prevent navigation
@@ -1844,34 +2282,57 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             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}'`
-                });
-                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();
+        try {
+            const result = await firstValueFrom(confirmDialog.result);
+            if (result && result.text === 'Remove') {
+                try {
+                    // Check if this is a pending add (not yet in database)
+                    const pendingAddIndex = this.PendingRecords.findIndex(p => p.entityObject.EntityInfo.Name === 'MJ: AI Agent Prompts' &&
+                        p.action === 'save' &&
+                        p.entityObject.Get('PromptID') === prompt.ID);
+                    if (pendingAddIndex >= 0) {
+                        // Remove from pending adds
+                        this.PendingRecords.splice(pendingAddIndex, 1);
                     }
                     else {
-                        throw new Error('Failed to delete AI Agent Prompt link');
+                        // Find the existing AI Agent Prompt link record for deferred deletion
+                        const rv = new RunView();
+                        const linkResult = await rv.RunView({
+                            EntityName: 'MJ: AI Agent Prompts',
+                            ExtraFilter: `AgentID='${this.record.ID}' AND PromptID='${prompt.ID}'`,
+                            ResultType: 'entity_object'
+                        });
+                        if (linkResult.Success && linkResult.Results && linkResult.Results.length > 0) {
+                            const agentPromptToDelete = linkResult.Results[0];
+                            // Add to pending deletions
+                            this.PendingRecords.push({
+                                entityObject: agentPromptToDelete,
+                                action: 'delete'
+                            });
+                        }
+                        else {
+                            throw new Error('AI Agent Prompt link not found');
+                        }
+                    }
+                    // Remove from UI immediately
+                    const promptIndex = this.agentPrompts.findIndex(p => p.ID === prompt.ID);
+                    if (promptIndex >= 0) {
+                        this.agentPrompts.splice(promptIndex, 1);
+                        this.promptCount = this.agentPrompts.length;
                     }
+                    this.hasUnsavedChanges = true;
+                    // Trigger change detection to update UI
+                    this.cdr.detectChanges();
+                    MJNotificationService.Instance.CreateSimpleNotification(`Prompt "${prompt.Name}" will be removed when you save the agent`, 'info', 4000);
                 }
-                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);
                 }
             }
-            catch (error) {
-                console.error('Error removing prompt from agent:', error);
-                MJNotificationService.Instance.CreateSimpleNotification('Failed to remove prompt', 'error', 3000);
-            }
+        }
+        catch (dialogError) {
+            console.error('Error with dialog:', dialogError);
         }
     }
     /**
@@ -1885,7 +2346,133 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         }
     }
     /**
-     * Removes an action from the agent
+     * Opens the sub-agent selector dialog for adding sub-agents (deferred until save)
+     */
+    async addSubAgents() {
+        try {
+            // Get list of already pending sub-agent IDs to filter duplicates
+            const pendingSubAgentIds = this.PendingRecords
+                .filter(p => p.entityObject.EntityInfo.Name === 'AI Agents' &&
+                p.action === 'save' &&
+                p.entityObject.Get('ParentID') === this.record.ID)
+                .map(p => p.entityObject.Get('ID'));
+            const existingSubAgentIds = this.subAgents.map(agent => agent.ID);
+            const allLinkedIds = [...pendingSubAgentIds, ...existingSubAgentIds];
+            this.agentManagementService.openSubAgentSelectorDialog({
+                title: 'Add Sub-Agents',
+                multiSelect: true,
+                parentAgentId: this.record.ID,
+                showCreateNew: true,
+                viewContainerRef: this.viewContainerRef
+            }).subscribe({
+                next: async (result) => {
+                    if (result && result.selectedAgents && result.selectedAgents.length > 0) {
+                        // Filter out already linked or pending agents
+                        const newAgents = result.selectedAgents.filter(agent => !allLinkedIds.includes(agent.ID));
+                        if (newAgents.length === 0) {
+                            MJNotificationService.Instance.CreateSimpleNotification('All selected agents are already linked to this agent', 'info', 3000);
+                            return;
+                        }
+                        // Add to pending changes (defer until save)
+                        const md = new Metadata();
+                        for (const agent of newAgents) {
+                            const subAgentToUpdate = await md.GetEntityObject('AI Agents');
+                            await subAgentToUpdate.Load(agent.ID);
+                            subAgentToUpdate.ParentID = this.record.ID;
+                            // Database constraint requires ExposeAsAction = false for sub-agents
+                            subAgentToUpdate.ExposeAsAction = false;
+                            this.PendingRecords.push({
+                                entityObject: subAgentToUpdate,
+                                action: 'save'
+                            });
+                        }
+                        this.hasUnsavedChanges = true;
+                        // Update UI to show the new sub-agents
+                        this.subAgents.push(...newAgents);
+                        this.subAgentCount = this.subAgents.length;
+                        // Trigger change detection to update UI
+                        this.cdr.detectChanges();
+                        // Show success notification
+                        MJNotificationService.Instance.CreateSimpleNotification(`${newAgents.length} agent${newAgents.length === 1 ? '' : 's'} will be converted to sub-agent${newAgents.length === 1 ? '' : 's'} when you save`, 'info', 4000);
+                    }
+                    else if (result && result.createNew) {
+                        // User wants to create a new sub-agent
+                        await this.createSubAgent();
+                    }
+                },
+                error: (error) => {
+                    console.error('Error opening sub-agent selector:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Error opening sub-agent selector. Please try again.', 'error', 3000);
+                }
+            });
+        }
+        catch (error) {
+            console.error('Error in addSubAgents:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error adding sub-agents. Please try again.', 'error', 3000);
+        }
+    }
+    /**
+     * Removes a sub-agent from this agent (deferred until save)
+     */
+    async removeSubAgent(subAgent, event) {
+        event.stopPropagation(); // Prevent navigation
+        const confirmDialog = this.dialogService.open({
+            title: 'Remove Sub-Agent',
+            content: `Are you sure you want to remove "${subAgent.Name}" as a sub-agent? This will make it an independent root agent.`,
+            actions: [
+                { text: 'Cancel' },
+                { text: 'Remove', themeColor: 'error' }
+            ],
+            width: 450,
+            height: 200
+        });
+        try {
+            const result = await firstValueFrom(confirmDialog.result);
+            if (result && result.text === 'Remove') {
+                try {
+                    // Check if this is a pending add (not yet in database)
+                    const pendingAddIndex = this.PendingRecords.findIndex(p => p.entityObject.EntityInfo.Name === 'AI Agents' &&
+                        p.action === 'save' &&
+                        p.entityObject.Get('ID') === subAgent.ID &&
+                        p.entityObject.Get('ParentID') === this.record.ID);
+                    if (pendingAddIndex >= 0) {
+                        // Remove from pending adds
+                        this.PendingRecords.splice(pendingAddIndex, 1);
+                    }
+                    else {
+                        // Add to pending removals (will restore to root agent)
+                        const md = new Metadata();
+                        const subAgentToUpdate = await md.GetEntityObject('AI Agents');
+                        await subAgentToUpdate.Load(subAgent.ID);
+                        subAgentToUpdate.ParentID = null; // Will become a root agent
+                        this.PendingRecords.push({
+                            entityObject: subAgentToUpdate,
+                            action: 'save'
+                        });
+                    }
+                    // Remove from UI immediately
+                    const subAgentIndex = this.subAgents.findIndex(sa => sa.ID === subAgent.ID);
+                    if (subAgentIndex >= 0) {
+                        this.subAgents.splice(subAgentIndex, 1);
+                        this.subAgentCount = this.subAgents.length;
+                    }
+                    this.hasUnsavedChanges = true;
+                    // Trigger change detection to update UI
+                    this.cdr.detectChanges();
+                    MJNotificationService.Instance.CreateSimpleNotification(`"${subAgent.Name}" will be removed as a sub-agent when you save`, 'info', 4000);
+                }
+                catch (error) {
+                    console.error('Error removing sub-agent:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Failed to remove sub-agent', 'error', 3000);
+                }
+            }
+        }
+        catch (dialogError) {
+            console.error('Error with dialog:', dialogError);
+        }
+    }
+    /**
+     * Removes an action from the agent (deferred until save)
      */
     async removeAction(action, event) {
         event.stopPropagation(); // Prevent navigation
@@ -1899,38 +2486,342 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
             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}'`
-                });
-                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();
+        try {
+            const result = await firstValueFrom(confirmDialog.result);
+            if (result && result.text === 'Remove') {
+                try {
+                    // Check if this is a pending add (not yet in database)
+                    const pendingAddIndex = this.PendingRecords.findIndex(p => p.entityObject.EntityInfo.Name === 'AI Agent Actions' &&
+                        p.action === 'save' &&
+                        p.entityObject.Get('ActionID') === action.ID);
+                    if (pendingAddIndex >= 0) {
+                        // Remove from pending adds
+                        this.PendingRecords.splice(pendingAddIndex, 1);
                     }
                     else {
-                        throw new Error('Failed to delete AI Agent Action link');
+                        // Find the existing AI Agent Action link record for deferred deletion
+                        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.Success && linkResult.Results && linkResult.Results.length > 0) {
+                            const agentActionToDelete = linkResult.Results[0];
+                            // Add to pending deletions
+                            this.PendingRecords.push({
+                                entityObject: agentActionToDelete,
+                                action: 'delete'
+                            });
+                        }
+                        else {
+                            throw new Error('AI Agent Action link not found');
+                        }
+                    }
+                    // Remove from UI immediately
+                    const actionIndex = this.agentActions.findIndex(a => a.ID === action.ID);
+                    if (actionIndex >= 0) {
+                        this.agentActions.splice(actionIndex, 1);
+                        this.actionCount = this.agentActions.length;
+                    }
+                    this.hasUnsavedChanges = true;
+                    // Trigger change detection to update UI
+                    this.cdr.detectChanges();
+                    MJNotificationService.Instance.CreateSimpleNotification(`Action "${action.Name}" will be removed when you save the agent`, 'info', 4000);
+                }
+                catch (error) {
+                    console.error('Error removing action from agent:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Failed to remove action', 'error', 3000);
+                }
+            }
+        }
+        catch (dialogError) {
+            console.error('Error with action dialog:', dialogError);
+        }
+    }
+    /**
+     * Opens the advanced settings dialog for a prompt
+     */
+    async openPromptAdvancedSettings(prompt, event) {
+        event.stopPropagation(); // Prevent navigation
+        try {
+            // Find the corresponding AIAgentPromptEntity for this prompt
+            const rv = new RunView();
+            const agentPromptResult = await rv.RunView({
+                EntityName: 'MJ: AI Agent Prompts',
+                ExtraFilter: `AgentID='${this.record.ID}' AND PromptID='${prompt.ID}'`,
+                ResultType: 'entity_object'
+            });
+            if (!agentPromptResult.Success || !agentPromptResult.Results?.length) {
+                MJNotificationService.Instance.CreateSimpleNotification('Unable to find prompt configuration for advanced settings', 'error', 3000);
+                return;
+            }
+            const agentPrompt = agentPromptResult.Results[0];
+            // Get all agent prompts for validation
+            const allAgentPromptsResult = await rv.RunView({
+                EntityName: 'MJ: AI Agent Prompts',
+                ExtraFilter: `AgentID='${this.record.ID}'`,
+                ResultType: 'entity_object'
+            });
+            const allAgentPrompts = allAgentPromptsResult.Success ? (allAgentPromptsResult.Results || []) : [];
+            this.agentManagementService.openAgentPromptAdvancedSettingsDialog({
+                agentPrompt: agentPrompt,
+                allAgentPrompts: allAgentPrompts,
+                viewContainerRef: this.viewContainerRef
+            }).subscribe({
+                next: async (formData) => {
+                    if (formData) {
+                        try {
+                            // Update the agent prompt entity with new values
+                            agentPrompt.ExecutionOrder = formData.executionOrder;
+                            agentPrompt.Purpose = formData.purpose;
+                            agentPrompt.ConfigurationID = formData.configurationID;
+                            agentPrompt.ContextBehavior = formData.contextBehavior;
+                            agentPrompt.ContextMessageCount = formData.contextMessageCount;
+                            agentPrompt.Status = formData.status;
+                            // Save immediately to database
+                            const saveResult = await agentPrompt.Save();
+                            if (saveResult) {
+                                MJNotificationService.Instance.CreateSimpleNotification('Prompt settings updated successfully', 'success', 3000);
+                                // Refresh the related data to reflect changes
+                                await this.loadRelatedCounts();
+                            }
+                            else {
+                                MJNotificationService.Instance.CreateSimpleNotification('Failed to save prompt settings. Please try again.', 'error', 3000);
+                            }
+                        }
+                        catch (error) {
+                            console.error('Error saving prompt advanced settings:', error);
+                            MJNotificationService.Instance.CreateSimpleNotification('Error saving prompt settings. Please try again.', 'error', 3000);
+                        }
+                    }
+                },
+                error: (error) => {
+                    console.error('Error opening prompt advanced settings dialog:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Error opening advanced settings. Please try again.', 'error', 3000);
+                }
+            });
+        }
+        catch (error) {
+            console.error('Error in openPromptAdvancedSettings:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error opening prompt advanced settings. Please try again.', 'error', 3000);
+        }
+    }
+    /**
+     * Opens the advanced settings dialog for a sub-agent
+     */
+    async openSubAgentAdvancedSettings(subAgent, event) {
+        event.stopPropagation(); // Prevent navigation
+        try {
+            // Load the full sub-agent entity for editing
+            const md = new Metadata();
+            const subAgentEntity = await md.GetEntityObject('AI Agents');
+            await subAgentEntity.Load(subAgent.ID);
+            // Get all sub-agents under the same parent for validation
+            const rv = new RunView();
+            const allSubAgentsResult = await rv.RunView({
+                EntityName: 'AI Agents',
+                ExtraFilter: `ParentID='${this.record.ID}'`,
+                ResultType: 'entity_object'
+            });
+            const allSubAgents = allSubAgentsResult.Success ? (allSubAgentsResult.Results || []) : [];
+            this.agentManagementService.openSubAgentAdvancedSettingsDialog({
+                subAgent: subAgentEntity,
+                allSubAgents: allSubAgents,
+                viewContainerRef: this.viewContainerRef
+            }).subscribe({
+                next: async (formData) => {
+                    if (formData) {
+                        try {
+                            // Update the sub-agent entity with new values
+                            subAgentEntity.ExecutionOrder = formData.executionOrder;
+                            subAgentEntity.ExecutionMode = formData.executionMode;
+                            subAgentEntity.Status = formData.status;
+                            subAgentEntity.TypeID = formData.typeID;
+                            subAgentEntity.ExposeAsAction = formData.exposeAsAction;
+                            // Save immediately to database
+                            const saveResult = await subAgentEntity.Save();
+                            if (saveResult) {
+                                MJNotificationService.Instance.CreateSimpleNotification('Sub-agent settings updated successfully', 'success', 3000);
+                                // Update the local sub-agent data to reflect changes
+                                const localSubAgent = this.subAgents.find(sa => sa.ID === subAgent.ID);
+                                if (localSubAgent) {
+                                    localSubAgent.ExecutionOrder = formData.executionOrder;
+                                    localSubAgent.ExecutionMode = formData.executionMode;
+                                    localSubAgent.Status = formData.status;
+                                    localSubAgent.TypeID = formData.typeID;
+                                    localSubAgent.ExposeAsAction = formData.exposeAsAction;
+                                }
+                                // Trigger change detection to update UI
+                                this.cdr.detectChanges();
+                            }
+                            else {
+                                MJNotificationService.Instance.CreateSimpleNotification('Failed to save sub-agent settings. Please try again.', 'error', 3000);
+                            }
+                        }
+                        catch (error) {
+                            console.error('Error saving sub-agent advanced settings:', error);
+                            MJNotificationService.Instance.CreateSimpleNotification('Error saving sub-agent settings. Please try again.', 'error', 3000);
+                        }
+                    }
+                },
+                error: (error) => {
+                    console.error('Error opening sub-agent advanced settings dialog:', error);
+                    MJNotificationService.Instance.CreateSimpleNotification('Error opening advanced settings. Please try again.', 'error', 3000);
+                }
+            });
+        }
+        catch (error) {
+            console.error('Error in openSubAgentAdvancedSettings:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error opening sub-agent advanced settings. Please try again.', 'error', 3000);
+        }
+    }
+    /**
+     * Override PopulatePendingRecords to preserve our pending records before parent clears them
+     * However, during cancel operations, we want to clear all pending records completely
+     */
+    PopulatePendingRecords() {
+        // If we're in the middle of a cancel operation, don't preserve pending records
+        // The base class CancelEdit will handle reverting pending records appropriately
+        if (this.isPerformingCancel) {
+            super.PopulatePendingRecords();
+            return;
+        }
+        // IMPORTANT: The parent method clears the pending records array, so we need to preserve
+        // any records we've added before calling the parent method during normal operations
+        const currentPendingRecords = [...this.PendingRecords]; // Make a copy
+        // Call parent first to get child component pending records (this clears the array)
+        super.PopulatePendingRecords();
+        // Re-add our preserved records (only during normal save operations)
+        for (const record of currentPendingRecords) {
+            this.PendingRecords.push(record);
+        }
+    }
+    /**
+     * Override InternalSaveRecord to handle agent-specific transaction logic
+     * AI Agent must be saved first since related entities depend on it
+     */
+    /**
+     * The base SaveRecord() method will call this InternalSaveRecord() method
+     * after handling validation and pending record population
+     */
+    async InternalSaveRecord() {
+        if (!this.record) {
+            return false;
+        }
+        try {
+            const md = new Metadata();
+            const transactionGroup = await md.CreateTransactionGroup();
+            // Set transaction group on main record first
+            this.record.TransactionGroup = transactionGroup;
+            // Save entities in dependency order to avoid foreign key constraint errors
+            // We need to save Templates and Template Contents BEFORE the main AI Agent
+            // since AI Prompts depend on Templates, and AI Agent Prompts depend on AI Agents
+            // 1. First save Templates (they have no dependencies)
+            const templateRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'Templates');
+            for (const templateRecord of templateRecords) {
+                templateRecord.entityObject.TransactionGroup = transactionGroup;
+                if (templateRecord.action === 'save') {
+                    const saveResult = await templateRecord.entityObject.Save();
+                    if (!saveResult) {
+                        MJNotificationService.Instance.CreateSimpleNotification(`Failed to save Template "${templateRecord.entityObject.Get('Name')}". Please check the data and try again.`, 'error', 4000);
+                        return false;
+                    }
+                }
+                else {
+                    await templateRecord.entityObject.Delete();
+                }
+            }
+            // 2. Save Template Contents (depend on Templates)
+            const templateContentRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'Template Contents');
+            for (const contentRecord of templateContentRecords) {
+                contentRecord.entityObject.TransactionGroup = transactionGroup;
+                if (contentRecord.action === 'save') {
+                    const saveResult = await contentRecord.entityObject.Save();
+                    if (!saveResult) {
+                        MJNotificationService.Instance.CreateSimpleNotification(`Failed to save Template Content. Please check the data and try again.`, 'error', 4000);
+                        return false;
+                    }
+                }
+                else {
+                    await contentRecord.entityObject.Delete();
+                }
+            }
+            // 3. Save AI Prompts (depend on Templates)
+            const promptRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'AI Prompts');
+            for (const promptRecord of promptRecords) {
+                promptRecord.entityObject.TransactionGroup = transactionGroup;
+                if (promptRecord.action === 'save') {
+                    const saveResult = await promptRecord.entityObject.Save();
+                    if (!saveResult) {
+                        MJNotificationService.Instance.CreateSimpleNotification(`Failed to save AI Prompt "${promptRecord.entityObject.Get('Name')}". Please check the data and try again.`, 'error', 4000);
+                        return false;
+                    }
+                }
+                else {
+                    await promptRecord.entityObject.Delete();
+                }
+            }
+            // 4. Save the main AI Agent record (other entity links depend on it)
+            // The record transaction group was already set above
+            const agentSaveResult = await this.record.Save();
+            if (!agentSaveResult) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Failed to save AI agent "${this.record.Name}". Please check the data and try again.`, 'error', 4000);
+                return false;
+            }
+            // 4.1. Handle deferred sub-agent creation - set ParentID on any sub-agents created before parent was saved
+            const subAgentRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'AI Agents' &&
+                p.action === 'save' &&
+                p.entityObject.Get('_tempParentId') === this.record.ID);
+            for (const subAgentRecord of subAgentRecords) {
+                // Cast to AIAgentEntity to access ParentID property
+                const subAgent = subAgentRecord.entityObject;
+                // Set the proper ParentID now that parent is saved
+                subAgent.ParentID = this.record.ID;
+                // Clear the temporary reference
+                subAgent.Set('_tempParentId', null);
+            }
+            // 5. Save all other pending records (AI Agent Actions, AI Agent Prompts, etc.)
+            const otherRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name !== 'Templates' &&
+                p.entityObject.EntityInfo.Name !== 'Template Contents' &&
+                p.entityObject.EntityInfo.Name !== 'AI Prompts');
+            for (const record of otherRecords) {
+                record.entityObject.TransactionGroup = transactionGroup;
+                if (record.action === 'save') {
+                    const saveResult = await record.entityObject.Save();
+                    if (!saveResult) {
+                        MJNotificationService.Instance.CreateSimpleNotification(`Failed to save ${record.entityObject.EntityInfo.Name}. Transaction will be rolled back.`, 'error', 4000);
+                        return false;
                     }
                 }
                 else {
-                    throw new Error('AI Agent Action link not found');
+                    await record.entityObject.Delete();
                 }
             }
-            catch (error) {
-                console.error('Error removing action from agent:', error);
-                MJNotificationService.Instance.CreateSimpleNotification('Failed to remove action', 'error', 3000);
+            // Execute all operations atomically
+            const success = await transactionGroup.Submit();
+            if (success) {
+                // Clear our local state since save was successful
+                this.hasUnsavedChanges = false;
+                // Clear pending records since they've been saved
+                this.PendingRecords.length = 0;
+                // Reload related data to reflect database state
+                await this.loadRelatedCounts();
+                MJNotificationService.Instance.CreateSimpleNotification('AI Agent and all related changes saved successfully', 'success', 3000);
+                return true;
+            }
+            else {
+                MJNotificationService.Instance.CreateSimpleNotification('Save failed. Please try again.', 'error', 4000);
+                return false;
             }
         }
+        catch (error) {
+            MJNotificationService.Instance.CreateSimpleNotification(`Save failed: ${error instanceof Error ? error.message : 'Unknown error'}. Please try again.`, 'error', 5000);
+            return false;
+        }
     }
-    static { this.ɵfac = function AIAgentFormComponentExtended_Factory(t) { return new (t || AIAgentFormComponentExtended)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.DialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i4.NewAgentDialogService), i0.ɵɵdirectiveInject(i5.ActionGalleryDialogService), i0.ɵɵdirectiveInject(i6.AITestHarnessDialogService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container"], ["kendoDialogContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-history"], [1, "panel-content", "execution-history-panel"], [1, "section-header"], [1, "section-description"], [1, "empty-state"], [1, "timeline-list"], [1, "timeline-item", 3, "expanded"], [1, "view-more-item"], [1, "timeline-item"], [1, "timeline-marker"], [1, "timeline-content"], [1, "timeline-header", 3, "click"], [1, "timeline-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "timeline-date"], [1, "timeline-meta"], [1, "execution-time"], [1, "timeline-actions"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "timeline-preview"], [1, "timeline-expanded-content"], [1, "fa-solid", "fa-stopwatch"], [1, "result-section"], [1, "error-section"], [1, "execution-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "view-more-item", 3, "click"], [1, "fa-solid", "fa-comments"], [1, "panel-content"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "entity-list"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "prompt-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"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-box"], [1, "payload-config-section"], [1, "subsection-title"], [1, "fa-solid", "fa-cog"], [1, "payload-config-grid"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "Payload Scope", "Description", "Path to narrow payload (e.g., /functionalRequirements)", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "Validation Mode", "Description", "Action on validation failure", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "Max Retries", "Description", "Maximum validation retry attempts", 3, "EditMode", "record"], [1, "payload-paths-section"], [1, "fa-solid", "fa-route"], [1, "payload-field-group"], [1, "payload-field-label"], [1, "fa-solid", "fa-arrow-down"], [1, "field-description"], ["language", "json", 2, "height", "120px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-pen"], [1, "payload-validation-section"], [1, "fa-solid", "fa-shield-check"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-bolt"], [1, "entity-item", "action-item"], [1, "entity-item", "action-item", 3, "click"], [1, "status-tag"], [1, "fa-solid"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], ["FieldName", "Status", "Type", "dropdownlist", "Caption", "Status", "Description", "Agent availability status", 3, "EditMode", "record"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "Execution Mode", "Description", "How sub-agents are executed", 3, "EditMode", "record"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "Execution Order", "Description", "Order when run with siblings", 3, "EditMode", "record"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "Expose as Action", "Description", "Make available as an action", 3, "EditMode", "record"], ["FieldName", "TypeID", "Type", "dropdownlist", "Caption", "Agent Type", "Description", "Category of this agent", "LinkType", "Record", "LinkEntityName", "AI Agent Types", 3, "EditMode", "record"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "Driver Class", "Description", "Custom implementation class", 3, "EditMode", "record"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "Icon Class", "Description", "Font Awesome icon class", 3, "EditMode", "record"], ["FieldName", "Description", "Type", "textarea", "Caption", "Description", "Description", "Detailed agent description", 2, "grid-column", "span 2", 3, "EditMode", "record"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "Logo URL", "Description", "URL for agent logo image", 2, "grid-column", "span 2", 3, "EditMode", "record"], [1, "subsection-divider"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "Enable Compression", "Description", "Compress long conversations", 3, "EditMode", "record"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "Message Threshold", "Description", "Messages before compression", 3, "EditMode", "record"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "Messages to Keep", "Description", "Recent messages to retain", 3, "EditMode", "record"], ["FieldName", "ContextCompressionPromptID", "Type", "dropdownlist", "Caption", "Compression Prompt", "Description", "Prompt for summarization", "LinkType", "Record", "LinkEntityName", "AI Prompts", 3, "EditMode", "record"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵfac = function AIAgentFormComponentExtended_Factory(t) { return new (t || AIAgentFormComponentExtended)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i3.DialogService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i4.AIAgentManagementService), i0.ɵɵdirectiveInject(i5.AITestHarnessDialogService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentFormComponentExtended, selectors: [["mj-ai-agent-form"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container"], ["kendoDialogContainer", ""], ["class", "record-form", 4, "ngIf"], [1, "record-form"], [3, "form"], [1, "agent-header"], [1, "agent-header-content"], [1, "agent-overview"], [1, "agent-icon-wrapper"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-info"], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModel"], [1, "agent-name"], [1, "agent-meta"], [1, "status-badge", 3, "background-color"], [1, "execution-mode"], [1, "parent-agent"], [1, "agent-actions"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "disabled"], ["kendoButton", "", "fillMode", "outline", "size", "small", "title", "Refresh all data", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "form-content"], [3, "expanded"], ["kendoPanelBarItemTitle", ""], ["kendoPanelBarContent", ""], ["name", "agentName", "placeholder", "Enter agent name...", 1, "agent-name-input", 3, "ngModelChange", "ngModel"], [1, "status-badge"], [1, "fa-solid", "fa-circle"], [1, "fa-solid", "fa-sitemap"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Run this AI agent", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "fa-solid", "fa-bolt"], [1, "panel-content"], [1, "section-header"], [1, "header-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small"], [1, "empty-state"], [1, "entity-list"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "entity-item", "action-item"], [1, "view-more-item"], [1, "entity-item", "action-item", 3, "click"], [1, "item-icon"], [1, "item-content"], [1, "item-title"], [1, "item-preview"], [1, "item-meta"], [1, "meta-tag"], [1, "status-tag"], [1, "fa-solid"], [1, "item-actions"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action"], [1, "fa-solid", "fa-external-link"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove action", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "view-more-item", 3, "click"], [1, "section-description"], ["kendoButton", "", "themeColor", "secondary", "size", "small", 3, "click"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "entity-item", "sub-agent-item"], [1, "entity-item", "sub-agent-item", 3, "click"], [1, "sub-agent-logo", 3, "src", "alt"], [1, "status-tag", 3, "background-color"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent"], ["kendoButton", "", "fillMode", "flat", "themeColor", "primary", "size", "small", "title", "Advanced settings", 3, "click"], [1, "fa-solid", "fa-cog"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove sub-agent", 3, "click"], [1, "fa-solid", "fa-comments"], [1, "prompt-controls"], [1, "model-selection-mode"], [1, "model-selection-label"], [1, "fa-solid", "fa-sliders"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModel", "data", "valuePrimitive"], [1, "model-selection-value"], ["name", "modelSelectionMode", "textField", "text", "valueField", "value", 1, "model-selection-dropdown", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [1, "entity-item", "prompt-item"], [1, "entity-item", "prompt-item", 3, "click"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", "size", "small", "title", "Remove prompt", 3, "click"], [1, "fa-solid", "fa-brain"], [1, "entity-item", "learning-item"], [1, "entity-item", "learning-item", 3, "click"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-sticky-note"], [1, "entity-item", "note-item"], [1, "entity-item", "note-item", 3, "click"], [1, "fa-solid", "fa-history"], [1, "panel-content", "execution-history-panel"], [1, "timeline-list"], [1, "timeline-item", 3, "expanded"], [1, "timeline-item"], [1, "timeline-marker"], [1, "timeline-content"], [1, "timeline-header", 3, "click"], [1, "timeline-title"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "timeline-date"], [1, "timeline-meta"], [1, "execution-time"], [1, "timeline-actions"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "timeline-preview"], [1, "timeline-expanded-content"], [1, "fa-solid", "fa-stopwatch"], [1, "result-section"], [1, "error-section"], [1, "execution-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], ["language", "json", 2, "max-height", "200px", "width", "100%", 3, "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-content"], [1, "fa-solid", "fa-box"], [1, "payload-config-section"], [1, "subsection-title"], [1, "payload-config-grid"], ["FieldName", "PayloadScope", "Type", "textbox", "Caption", "Payload Scope", "Description", "Path to narrow payload (e.g., /functionalRequirements)", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMode", "Type", "dropdownlist", "Caption", "Validation Mode", "Description", "Action on validation failure", 3, "EditMode", "record"], ["FieldName", "FinalPayloadValidationMaxRetries", "Type", "numerictextbox", "Caption", "Max Retries", "Description", "Maximum validation retry attempts", 3, "EditMode", "record"], [1, "payload-paths-section"], [1, "fa-solid", "fa-route"], [1, "payload-field-group"], [1, "payload-field-label"], [1, "fa-solid", "fa-arrow-down"], [1, "field-description"], ["language", "json", 2, "height", "120px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-arrow-up"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-pen"], [1, "payload-validation-section"], [1, "fa-solid", "fa-shield-check"], ["language", "json", 2, "height", "200px", "width", "100%", 3, "valueChange", "value", "readonly", "lineWrapping"], [1, "fa-solid", "fa-shield-halved"], [1, "form-fields-grid"], ["FieldName", "MaxCostPerRun", "Type", "numerictextbox", "Caption", "Max Cost ($)", "Description", "Maximum cost per run", 3, "EditMode", "record"], ["FieldName", "MaxTokensPerRun", "Type", "numerictextbox", "Caption", "Max Tokens", "Description", "Maximum tokens per run", 3, "EditMode", "record"], ["FieldName", "MaxIterationsPerRun", "Type", "numerictextbox", "Caption", "Max Iterations", "Description", "Maximum prompt iterations", 3, "EditMode", "record"], ["FieldName", "MaxTimePerRun", "Type", "numerictextbox", "Caption", "Max Time (seconds)", "Description", "Maximum execution time", 3, "EditMode", "record"], ["FieldName", "Status", "Type", "dropdownlist", "Caption", "Status", "Description", "Agent availability status", 3, "EditMode", "record"], ["FieldName", "ExecutionMode", "Type", "dropdownlist", "Caption", "Execution Mode", "Description", "How sub-agents are executed", 3, "EditMode", "record"], ["FieldName", "ExecutionOrder", "Type", "numerictextbox", "Caption", "Execution Order", "Description", "Order when run with siblings", 3, "EditMode", "record"], ["FieldName", "ExposeAsAction", "Type", "checkbox", "Caption", "Expose as Action", "Description", "Make available as an action", 3, "EditMode", "record"], ["FieldName", "TypeID", "Type", "dropdownlist", "Caption", "Agent Type", "Description", "Category of this agent", "LinkType", "Record", "LinkEntityName", "MJ: AI Agent Types", 3, "EditMode", "record"], ["FieldName", "DriverClass", "Type", "textbox", "Caption", "Driver Class", "Description", "Custom implementation class", 3, "EditMode", "record"], ["FieldName", "IconClass", "Type", "textbox", "Caption", "Icon Class", "Description", "Font Awesome icon class", 3, "EditMode", "record"], ["FieldName", "Description", "Type", "textarea", "Caption", "Description", "Description", "Detailed agent description", 2, "grid-column", "span 2", 3, "EditMode", "record"], ["FieldName", "LogoURL", "Type", "textbox", "Caption", "Logo URL", "Description", "URL for agent logo image", 2, "grid-column", "span 2", 3, "EditMode", "record"], [1, "subsection-divider"], [1, "fa-solid", "fa-compress"], ["FieldName", "EnableContextCompression", "Type", "checkbox", "Caption", "Enable Compression", "Description", "Compress long conversations", 3, "valueChange", "EditMode", "record"], ["FieldName", "ContextCompressionMessageThreshold", "Type", "numerictextbox", "Caption", "Message Threshold", "Description", "Messages before compression", 3, "EditMode", "record"], ["FieldName", "ContextCompressionMessageRetentionCount", "Type", "numerictextbox", "Caption", "Messages to Keep", "Description", "Recent messages to retain", 3, "EditMode", "record"], ["FieldName", "ContextCompressionPromptID", "Type", "dropdownlist", "Caption", "Compression Prompt", "Description", "Prompt for summarization", "LinkType", "Record", "LinkEntityName", "AI Prompts", 3, "EditMode", "record"]], template: function AIAgentFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵelement(1, "div", 2);
             i0.ɵɵtemplate(2, AIAgentFormComponentExtended_form_2_Template, 37, 16, "form", 3);
@@ -1938,7 +2829,7 @@ let AIAgentFormComponentExtended = class AIAgentFormComponentExtended extends AI
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.record);
-        } }, dependencies: [i7.NgIf, i8.ɵNgNoValidate, i8.NgControlStatus, i8.NgControlStatusGroup, i8.NgModel, i8.NgForm, i9.PanelBarComponent, i9.PanelBarItemComponent, i9.PanelBarContentDirective, i9.PanelBarItemTitleDirective, i3.DialogContainerDirective, i10.TextBoxComponent, i11.DropDownListComponent, i12.ButtonComponent, i13.MJFormField, i14.FormToolbarComponent, i15.CodeEditorComponent, i7.DatePipe], styles: ["\n\n.record-form-container[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.agent-header[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper[_ngcontent-%COMP%]   img.agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n    font-size: 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\n\n.prompt-controls[_ngcontent-%COMP%] {\n    flex: 1;\n    margin-right: 16px;\n}\n\n\n\n.model-selection-mode[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: #f0f7ff;\n    border: 1px solid #cce5ff;\n    border-radius: 8px;\n}\n\n.model-selection-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #0066cc;\n    margin: 0;\n}\n\n.model-selection-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.model-selection-dropdown[_ngcontent-%COMP%] {\n    min-width: 140px;\n    height: 32px;\n}\n\n.model-selection-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #495057;\n    padding: 4px 12px;\n    background: white;\n    border-radius: 6px;\n    border: 1px solid #dee2e6;\n}\n\n.agent-meta-info[_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: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\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-icon[_ngcontent-%COMP%]   img.sub-agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #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.payload-config-section[_ngcontent-%COMP%], \n.payload-paths-section[_ngcontent-%COMP%], \n.payload-validation-section[_ngcontent-%COMP%] {\n    margin-bottom: 32px;\n}\n\n.subsection-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-form-field[_ngcontent-%COMP%]     textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n    opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child   .timeline-marker[_ngcontent-%COMP%]::after {\n    display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n\n\n.result-section[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n    \n\n    .agent-header[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n    \n    .agent-header-content[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    \n\n    .form-content[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n    \n      .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content[_ngcontent-%COMP%] {\n        padding: 20px 16px;\n    }\n    \n    .section-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    \n\n    .entity-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%] {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n    \n    .item-title[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n    \n    .item-preview[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n    \n    .item-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n    \n    \n\n    .timeline-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .timeline-title[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date[_ngcontent-%COMP%] {\n        align-self: flex-start;\n    }\n    \n    \n\n    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    \n\n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}"] }); }
+        } }, dependencies: [i6.NgIf, i7.ɵNgNoValidate, i7.NgControlStatus, i7.NgControlStatusGroup, i7.NgModel, i7.NgForm, i8.PanelBarComponent, i8.PanelBarItemComponent, i8.PanelBarContentDirective, i8.PanelBarItemTitleDirective, i3.DialogContainerDirective, i9.TextBoxComponent, i10.DropDownListComponent, i11.ButtonComponent, i12.MJFormField, i13.FormToolbarComponent, i14.CodeEditorComponent, i6.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-icon-wrapper[_ngcontent-%COMP%]   img.agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name[_ngcontent-%COMP%] {\n    font-size: 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\n\n.prompt-controls[_ngcontent-%COMP%] {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.agent-meta-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #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: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\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-icon[_ngcontent-%COMP%]   img.sub-agent-logo[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #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.payload-config-section[_ngcontent-%COMP%], \n.payload-paths-section[_ngcontent-%COMP%], \n.payload-validation-section[_ngcontent-%COMP%] {\n    margin-bottom: 32px;\n}\n\n.subsection-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #2196f3;\n}\n\n.subsection-divider[_ngcontent-%COMP%] {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.payload-field-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n}\n\n\n\n.payload-field-group[_ngcontent-%COMP%]   mj-form-field[_ngcontent-%COMP%]     textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.timeline-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n\n\n.cards-container[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover::before {\n    opacity: 1;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.prompt-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.action-card[_ngcontent-%COMP%]   .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n}\n\n.card-title-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active[_ngcontent-%COMP%] {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive[_ngcontent-%COMP%] {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n    color: #2196f3;\n}\n\n\n\n.priority-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\n\n.view-all-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n\n\n.timeline-container[_ngcontent-%COMP%] {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item[_ngcontent-%COMP%]:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded[_ngcontent-%COMP%] {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%] {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all[_ngcontent-%COMP%]:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker[_ngcontent-%COMP%]::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child   .timeline-marker[_ngcontent-%COMP%]::after {\n    display: none;\n}\n\n.timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker[_ngcontent-%COMP%] {\n    background: #6c757d;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header[_ngcontent-%COMP%] {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.timeline-title[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description[_ngcontent-%COMP%] {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n\n\n.timeline-expanded-content[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: _ngcontent-%COMP%_fadeIn 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.result-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%], \n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: #dc3545;\n}\n\n.result-content[_ngcontent-%COMP%], \n.error-content[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n\n\n.result-section[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content[_ngcontent-%COMP%] {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n\n\n@media (max-width: 768px) {\n    \n\n    .agent-header[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n    \n    .agent-header-content[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    \n\n    .form-content[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n    \n      .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content[_ngcontent-%COMP%] {\n        padding: 20px 16px;\n    }\n    \n    .section-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    \n\n    .entity-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%] {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n    \n    .item-title[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n    \n    .item-preview[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n    \n    .item-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n    \n    \n\n    .timeline-item[_ngcontent-%COMP%] {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .timeline-title[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date[_ngcontent-%COMP%] {\n        align-self: flex-start;\n    }\n    \n    \n\n    .form-fields-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    \n\n    .cards-container[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%] {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}"] }); }
 };
 AIAgentFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'AI Agents')
@@ -1946,8 +2837,8 @@ AIAgentFormComponentExtended = __decorate([
 export { AIAgentFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentFormComponentExtended, [{
         type: Component,
-        args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n    <!-- Dialog container for Kendo dialogs -->\n    <div kendoDialogContainer></div>\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Compact Header with Agent Overview -->\n        <div class=\"agent-header\">\n            <div class=\"agent-header-content\">\n                <div class=\"agent-overview\">\n                    <div class=\"agent-icon-wrapper\">\n                        @if (hasLogoURL()) {\n                            <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n                        } @else {\n                            <i [class]=\"getAgentIcon()\"></i>\n                        }\n                    </div>\n                    <div class=\"agent-info\">\n                        @if (EditMode) {\n                            <kendo-textbox [(ngModel)]=\"record.Name\" \n                                          name=\"agentName\"\n                                          placeholder=\"Enter agent name...\"\n                                          class=\"agent-name-input\">\n                            </kendo-textbox>\n                        } @else {\n                            <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n                        }\n                        <div class=\"agent-meta\">\n                            @if (record.Status) {\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n                                    <i class=\"fa-solid fa-circle\"></i>\n                                    {{ record.Status }}\n                                </span>\n                            }\n                            @if (record.ExecutionMode) {\n                                <span class=\"execution-mode\">\n                                    <i [class]=\"getExecutionModeIcon(record.ExecutionMode)\"></i>\n                                    {{ record.ExecutionMode }}\n                                </span>\n                            }\n                            @if (record.Parent) {\n                                <span class=\"parent-agent\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n                </div>\n                \n                <!-- Action Buttons -->\n                <div class=\"agent-actions\">\n                    @if (record.ID) {\n                        <button kendoButton themeColor=\"primary\" size=\"large\"\n                                    (click)=\"openTestHarness()\"\n                                    [disabled]=\"record.Status !== 'Active'\"\n                                    title=\"Run this AI agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                        </button>\n                    }\n                    <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content\">\n            <kendo-panelbar>\n\n                <!-- Execution History (First Panel - Expanded by default) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"true\">\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 execution-history-panel\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Review execution history, requests, and performance metrics for this agent.\n                                    </div>\n                                </div>\n                                \n                                @if (executionHistoryCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-history\"></i>\n                                        <h4>No Execution History</h4>\n                                        <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"timeline-list\">\n                                        @for (execution of recentExecutions; track execution.ID) {\n                                            <div class=\"timeline-item\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n                                                <div>\n                                                    <div class=\"timeline-marker\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                        <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n                                                    </div>\n                                                    <div class=\"timeline-content\">\n                                                    <div class=\"timeline-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n                                                        <div>\n                                                            <div class=\"timeline-title\">\n                                                                <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n                                                                Execution #{{ execution.ID.substring(0, 8) }}\n                                                                <span class=\"timeline-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</span>\n                                                            </div>\n                                                            <div class=\"timeline-meta\">\n                                                                <span class=\"status-badge\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                                    {{ execution.Status || 'Unknown' }}\n                                                                </span>\n                                                                @if (execution.CompletedAt) {\n                                                                    <span class=\"execution-time\">\n                                                                        <i class=\"fa-solid fa-stopwatch\"></i>\n                                                                        {{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}\n                                                                    </span>\n                                                                }\n                                                                <div class=\"timeline-actions\">\n                                                                    <button class=\"btn-primary\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\">\n                                                                        <i class=\"fa-solid fa-external-link-alt\"></i>\n                                                                    </button>\n                                                                </div>\n                                                            </div>\n                                                            @if (execution.Result && !expandedExecutions[execution.ID]) {\n                                                                <div class=\"timeline-preview\">{{ getExecutionResultPreview(execution, true) }}</div>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                    @if (expandedExecutions[execution.ID]) {\n                                                        <div class=\"timeline-expanded-content\">\n                                                            @if (execution.Result) {\n                                                                <div class=\"result-section\">\n                                                                    <h5>Result</h5>\n                                                                    <mj-code-editor \n                                                                        [value]=\"getExecutionResultPreview(execution, false)\"\n                                                                        [readonly]=\"true\"\n                                                                        language=\"json\"\n                                                                        [lineWrapping]=\"true\"\n                                                                        style=\"max-height: 200px; width: 100%;\">\n                                                                    </mj-code-editor>\n                                                                </div>\n                                                            }\n                                                            @if (execution.ErrorMessage) {\n                                                                <div class=\"error-section\">\n                                                                    <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n                                                                    <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n                                                                </div>\n                                                            }\n                                                            <div class=\"execution-details\">\n                                                                <div class=\"detail-row\">\n                                                                    <span class=\"detail-label\">Started:</span>\n                                                                    <span class=\"detail-value\">{{ execution.StartedAt | date:'medium' }}</span>\n                                                                </div>\n                                                                @if (execution.CompletedAt) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Completed:</span>\n                                                                        <span class=\"detail-value\">{{ execution.CompletedAt | date:'medium' }}</span>\n                                                                    </div>\n                                                                }\n                                                                @if (execution.ConversationID) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Conversation:</span>\n                                                                        <span class=\"detail-value\">{{ execution.ConversationID }}</span>\n                                                                    </div>\n                                                                }\n                                                            </div>\n                                                        </div>\n                                                    }\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (executionHistoryCount > recentExecutions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Runs', '')\">\n                                                <span>View all {{ executionHistoryCount }} executions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Prompts (Second Panel - With Model Selection) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"prompt-controls\">\n                                        <!-- Model Selection Mode Control -->\n                                        <div class=\"model-selection-mode\">\n                                            <label class=\"model-selection-label\">\n                                                <i class=\"fa-solid fa-sliders\"></i>\n                                                Model Selection:\n                                            </label>\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist\n                                                    [(ngModel)]=\"record.ModelSelectionMode\"\n                                                    name=\"modelSelectionMode\"\n                                                    [data]=\"modelSelectionModes\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    class=\"model-selection-dropdown\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (promptCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comments\"></i>\n                                        <h4>No Prompts Configured</h4>\n                                        <p>Add prompts to define how this agent processes requests and generates responses.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (prompt of agentPrompts; track prompt.ID) {\n                                            <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ prompt.Name }}</div>\n                                                    @if (prompt.TemplateText) {\n                                                        <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (prompt.PromptRole) {\n                                                            <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removePrompt(prompt, $event)\"\n                                                            title=\"Remove prompt\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (promptCount > agentPrompts.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n                                                <span>View all {{ promptCount }} prompts...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Payload (Third Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-box\"></i> Payload\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Configure how this agent handles data payloads and validation.\n                                </div>\n                            </div>\n                            \n                            <!-- Configuration Fields -->\n                            <div class=\"payload-config-section\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-cog\"></i> Configuration\n                                </h4>\n                                <div class=\"payload-config-grid\">\n                                    <!-- Payload Scope -->\n                                    <mj-form-field \n                                        FieldName=\"PayloadScope\" \n                                        Type=\"textbox\"\n                                        Caption=\"Payload Scope\"\n                                        Description=\"Path to narrow payload (e.g., /functionalRequirements)\"\n                                        [EditMode]=\"EditMode\"\n                                        [record]=\"record\">\n                                    </mj-form-field>\n\n                                    <!-- Final Payload Validation Mode -->\n                                    <mj-form-field \n                                        FieldName=\"FinalPayloadValidationMode\" \n                                        Type=\"dropdownlist\"\n                                        Caption=\"Validation Mode\"\n                                        Description=\"Action on validation failure\"\n                                        [EditMode]=\"EditMode\"\n                                        [record]=\"record\">\n                                    </mj-form-field>\n\n                                    <!-- Final Payload Validation Max Retries -->\n                                    <mj-form-field \n                                        FieldName=\"FinalPayloadValidationMaxRetries\" \n                                        Type=\"numerictextbox\"\n                                        Caption=\"Max Retries\"\n                                        Description=\"Maximum validation retry attempts\"\n                                        [EditMode]=\"EditMode\"\n                                        [record]=\"record\">\n                                    </mj-form-field>\n                                </div>\n                            </div>\n\n                            <!-- Path Configuration -->\n                            <div class=\"payload-paths-section\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-route\"></i> Path Configuration\n                                </h4>\n                                \n                                <!-- Downstream Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-arrow-down\"></i> Downstream Paths\n                                        <span class=\"field-description\">JSON array of paths to pass to sub-agents</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadDownstreamPaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n\n                                <!-- Upstream Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-arrow-up\"></i> Upstream Paths\n                                        <span class=\"field-description\">JSON array of paths to return to parent agent</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadUpstreamPaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n\n                                <!-- Self Read Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-eye\"></i> Self Read Paths\n                                        <span class=\"field-description\">JSON array of paths this agent can read</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadSelfReadPaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n\n                                <!-- Self Write Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-pen\"></i> Self Write Paths\n                                        <span class=\"field-description\">JSON array of paths this agent can write to</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadSelfWritePaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n                            </div>\n\n                            <!-- Validation Rules -->\n                            <div class=\"payload-validation-section\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-shield-check\"></i> Final Payload Validation\n                                </h4>\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <span class=\"field-description\">JSON validation rules or schema for final payload validation</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.FinalPayloadValidation || '{}'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 200px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n                                    </mj-code-editor>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n                <!-- Actions (Fourth Panel) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Action\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (actionCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-bolt\"></i>\n                                        <h4>No Actions Configured</h4>\n                                        <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Configure First Action\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (action of agentActions; track action.ID) {\n                                            <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i [class]=\"getActionIcon(action)\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n                                                    @if (action.Description) {\n                                                        <div class=\"item-preview\">{{ action.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (action.Type) {\n                                                            <span class=\"meta-tag\">{{ action.Type }}</span>\n                                                        }\n                                                        <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n                                                            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n                                                            {{ action.Status }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeAction(action, $event)\"\n                                                            title=\"Remove action\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (actionCount > agentActions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n                                                <span>View all {{ actionCount }} actions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents (Fifth Panel) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage hierarchical relationships with child agents that work under this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (subAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (subAgent of subAgents; track subAgent.ID) {\n                                            <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(subAgent)) {\n                                                        <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n                                                    }\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n                                                    @if (subAgent.Description) {\n                                                        <div class=\"item-preview\">{{ subAgent.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (subAgent.Status) {\n                                                            <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ subAgent.Status }}\n                                                            </span>\n                                                        }\n                                                        @if (subAgent.ExecutionMode) {\n                                                            <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (subAgentCount > subAgents.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n                                                <span>View all {{ subAgentCount }} sub-agents...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Execution Guardrails (New Separate Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Set limits to prevent runaway agent executions and control resource usage.\n                                </div>\n                            </div>\n                            \n                            <div class=\"form-fields-grid\">\n                                <mj-form-field \n                                    FieldName=\"MaxCostPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Cost ($)\"\n                                    Description=\"Maximum cost per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTokensPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Tokens\"\n                                    Description=\"Maximum tokens per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxIterationsPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Iterations\"\n                                    Description=\"Maximum prompt iterations\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTimePerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Time (seconds)\"\n                                    Description=\"Maximum execution time\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n                <!-- Configuration (Settings Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-cog\"></i> Configuration\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Advanced configuration settings for agent behavior and execution.\n                                </div>\n                            </div>\n                            \n                            <div class=\"form-fields-grid\">\n                                <!-- Core Settings -->\n                                <mj-form-field \n                                    FieldName=\"Status\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Status\"\n                                    Description=\"Agent availability status\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ExecutionMode\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Execution Mode\"\n                                    Description=\"How sub-agents are executed\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ExecutionOrder\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Execution Order\"\n                                    Description=\"Order when run with siblings\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ExposeAsAction\" \n                                    Type=\"checkbox\"\n                                    Caption=\"Expose as Action\"\n                                    Description=\"Make available as an action\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"TypeID\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Agent Type\"\n                                    Description=\"Category of this agent\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    LinkType=\"Record\"\n                                    LinkEntityName=\"AI Agent Types\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"DriverClass\" \n                                    Type=\"textbox\"\n                                    Caption=\"Driver Class\"\n                                    Description=\"Custom implementation class\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"IconClass\" \n                                    Type=\"textbox\"\n                                    Caption=\"Icon Class\"\n                                    Description=\"Font Awesome icon class\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"Description\" \n                                    Type=\"textarea\"\n                                    Caption=\"Description\"\n                                    Description=\"Detailed agent description\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    style=\"grid-column: span 2;\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"LogoURL\" \n                                    Type=\"textbox\"\n                                    Caption=\"Logo URL\"\n                                    Description=\"URL for agent logo image\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    style=\"grid-column: span 2;\">\n                                </mj-form-field>\n                            </div>\n\n                            <!-- Context Compression Settings -->\n                            <div class=\"subsection-divider\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-compress\"></i> Context Compression\n                                </h4>\n                            </div>\n\n                            <div class=\"form-fields-grid\">\n                                <mj-form-field \n                                    FieldName=\"EnableContextCompression\" \n                                    Type=\"checkbox\"\n                                    Caption=\"Enable Compression\"\n                                    Description=\"Compress long conversations\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ContextCompressionMessageThreshold\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Message Threshold\"\n                                    Description=\"Messages before compression\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ContextCompressionMessageRetentionCount\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Messages to Keep\"\n                                    Description=\"Recent messages to retain\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ContextCompressionPromptID\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Compression Prompt\"\n                                    Description=\"Prompt for summarization\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    LinkType=\"Record\"\n                                    LinkEntityName=\"AI Prompts\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n                <!-- Notes (Seventh Panel) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage notes, documentation, and annotations for this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Note\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (noteCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sticky-note\"></i>\n                                        <h4>No Notes</h4>\n                                        <p>Add notes to document important information, observations, or instructions for this agent.</p>\n                                        @if (EditMode) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Note\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (note of agentNotes; track note.ID) {\n                                            <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-sticky-note\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                                                    @if (note.Note) {\n                                                        <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (note.__mj_CreatedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ note.__mj_CreatedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (noteCount > agentNotes.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n                                                <span>View all {{ noteCount }} notes...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Learning Cycles (Eighth Panel) -->\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\n            </kendo-panelbar>\n        </div>\n    </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n    flex: 1;\n    margin-right: 16px;\n}\n\n/* Model Selection Mode */\n.model-selection-mode {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: #f0f7ff;\n    border: 1px solid #cce5ff;\n    border-radius: 8px;\n}\n\n.model-selection-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: #0066cc;\n    margin: 0;\n}\n\n.model-selection-label i {\n    font-size: 14px;\n}\n\n.model-selection-dropdown {\n    min-width: 140px;\n    height: 32px;\n}\n\n.model-selection-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: #495057;\n    padding: 4px 12px;\n    background: white;\n    border-radius: 6px;\n    border: 1px solid #dee2e6;\n}\n\n.agent-meta-info {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary:hover {\n    background: #5a6268;\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: white;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n    color: white;\n}\n\n.item-icon img.sub-agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n    opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n    color: #2196f3;\n}\n\n.view-more-item {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n    margin-bottom: 32px;\n}\n\n.subsection-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title i {\n    color: #2196f3;\n}\n\n.subsection-divider {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group {\n    margin-bottom: 20px;\n}\n\n.payload-field-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label i {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n    border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n    opacity: 1;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: white;\n}\n\n.card-title-section {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item i {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: #6c757d;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error i {\n    flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section,\n.error-section {\n    margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.result-content,\n.error-content {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n    font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    /* Header Responsiveness */\n    .agent-header {\n        padding: 16px;\n    }\n    \n    .agent-header-content {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    /* Panel Responsiveness */\n    .form-content {\n        padding: 12px;\n    }\n    \n    ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content {\n        padding: 20px 16px;\n    }\n    \n    .section-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    /* Entity List Responsiveness */\n    .entity-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon i {\n        font-size: 16px;\n    }\n    \n    .item-title {\n        font-size: 15px;\n    }\n    \n    .item-preview {\n        font-size: 13px;\n    }\n    \n    .item-meta {\n        gap: 8px;\n    }\n    \n    /* Timeline Responsiveness */\n    .timeline-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker i {\n        font-size: 12px;\n    }\n    \n    .timeline-title {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date {\n        align-self: flex-start;\n    }\n    \n    /* Form Field Responsiveness */\n    .form-fields-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    /* Legacy card support */\n    .cards-container {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n\n"] }]
-    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.DialogService }, { type: i0.ViewContainerRef }, { type: i4.NewAgentDialogService }, { type: i5.ActionGalleryDialogService }, { type: i6.AITestHarnessDialogService }], null); })();
+        args: [{ selector: 'mj-ai-agent-form', template: "<div class=\"record-form-container\">\n    <!-- Dialog container for Kendo dialogs -->\n    <div kendoDialogContainer></div>\n    <form *ngIf=\"record\" class=\"record-form\" #form=\"ngForm\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Compact Header with Agent Overview -->\n        <div class=\"agent-header\">\n            <div class=\"agent-header-content\">\n                <div class=\"agent-overview\">\n                    <div class=\"agent-icon-wrapper\">\n                        @if (hasLogoURL()) {\n                            <img [src]=\"record.LogoURL\" [alt]=\"record.Name + ' logo'\" class=\"agent-logo\">\n                        } @else {\n                            <i [class]=\"getAgentIcon()\"></i>\n                        }\n                    </div>\n                    <div class=\"agent-info\">\n                        @if (EditMode) {\n                            <kendo-textbox [(ngModel)]=\"record.Name\" \n                                          name=\"agentName\"\n                                          placeholder=\"Enter agent name...\"\n                                          class=\"agent-name-input\">\n                            </kendo-textbox>\n                        } @else {\n                            <h1 class=\"agent-name\">{{ record.Name || 'Untitled AI Agent' }}</h1>\n                        }\n                        <div class=\"agent-meta\">\n                            @if (record.Status) {\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\">\n                                    <i class=\"fa-solid fa-circle\"></i>\n                                    {{ record.Status }}\n                                </span>\n                            }\n                            @if (record.ExecutionMode) {\n                                <span class=\"execution-mode\">\n                                    <i [class]=\"getExecutionModeIcon(record.ExecutionMode)\"></i>\n                                    {{ record.ExecutionMode }}\n                                </span>\n                            }\n                            @if (record.Parent) {\n                                <span class=\"parent-agent\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Child of {{ record.Parent }}\n                                </span>\n                            }\n                        </div>\n                    </div>\n                </div>\n                \n                <!-- Action Buttons -->\n                <div class=\"agent-actions\">\n                    @if (record.ID) {\n                        <button kendoButton themeColor=\"primary\" size=\"large\"\n                                    (click)=\"openTestHarness()\"\n                                    [disabled]=\"record.Status !== 'Active'\"\n                                    title=\"Run this AI agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                        </button>\n                    }\n                    <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshRelatedData()\" title=\"Refresh all data\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Single Pane Layout with Expander Panels -->\n        <div class=\"form-content\">\n            <kendo-panelbar>\n\n                <!-- Actions (First Panel - Expanded by default) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"actionCount > 0\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-bolt\"></i> Actions{{ actionCount > 0 ? ' (' + actionCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateActions) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Action\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (actionCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-bolt\"></i>\n                                        <h4>No Actions Configured</h4>\n                                        <p>Add actions to enable this agent to perform specific tasks and operations.</p>\n                                        @if (EditMode && UserCanCreateActions) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"configureActions()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Configure First Action\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (action of agentActions; track action.ID) {\n                                            <div class=\"entity-item action-item\" (click)=\"navigateToEntity('Actions', action.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i [class]=\"getActionIcon(action)\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ action.Name || 'Untitled Action' }}</div>\n                                                    @if (action.Description) {\n                                                        <div class=\"item-preview\">{{ action.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (action.Type) {\n                                                            <span class=\"meta-tag\">{{ action.Type }}</span>\n                                                        }\n                                                        <span class=\"status-tag\" [class.active]=\"action.Status==='Active'\" [class.inactive]=\"action.Status!=='Active'\">\n                                                            <i class=\"fa-solid\" [class.fa-check-circle]=\"action.Status==='Active'\" [class.fa-times-circle]=\"action.Status!=='Active'\"></i>\n                                                            {{ action.Status }}\n                                                        </span>\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanDeleteActions) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeAction(action, $event)\"\n                                                            title=\"Remove action\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (actionCount > agentActions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Actions', '')\">\n                                                <span>View all {{ actionCount }} actions...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Sub-Agents (Second Panel) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"subAgentCount > 0\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sitemap\"></i> Sub-Agents{{ subAgentCount > 0 ? ' (' + subAgentCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage hierarchical relationships with child agents that work under this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addSubAgents()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Subagent\n                                            </button>\n                                            <button kendoButton themeColor=\"secondary\" size=\"small\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (subAgentCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sitemap\"></i>\n                                        <h4>No Sub-Agents</h4>\n                                        <p>Create sub-agents to build a hierarchical structure for complex workflows.</p>\n                                        @if (EditMode && UserCanCreateSubAgents) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addSubAgents()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Subagent\n                                            </button>\n                                            <button kendoButton themeColor=\"secondary\" (click)=\"createSubAgent()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Sub-Agent\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (subAgent of subAgents; track subAgent.ID) {\n                                            <div class=\"entity-item sub-agent-item\" (click)=\"navigateToEntity('AI Agents', subAgent.ID)\">\n                                                <div class=\"item-icon\">\n                                                    @if (hasSubAgentLogoURL(subAgent)) {\n                                                        <img [src]=\"subAgent.LogoURL\" [alt]=\"subAgent.Name + ' logo'\" class=\"sub-agent-logo\">\n                                                    } @else {\n                                                        <i [class]=\"getSubAgentIcon(subAgent)\"></i>\n                                                    }\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ subAgent.Name || 'Untitled Sub-Agent' }}</div>\n                                                    @if (subAgent.Description) {\n                                                        <div class=\"item-preview\">{{ subAgent.Description }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (subAgent.Status) {\n                                                            <span class=\"status-tag\" [style.background-color]=\"getStatusBadgeColor()\">\n                                                                {{ subAgent.Status }}\n                                                            </span>\n                                                        }\n                                                        @if (subAgent.ExecutionMode) {\n                                                            <span class=\"meta-tag\">{{ subAgent.ExecutionMode }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanCreateSubAgents) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"primary\" \n                                                            size=\"small\"\n                                                            (click)=\"openSubAgentAdvancedSettings(subAgent, $event)\"\n                                                            title=\"Advanced settings\">\n                                                            <i class=\"fa-solid fa-cog\"></i>\n                                                        </button>\n                                                    }\n                                                    @if (EditMode && UserCanDeleteSubAgents) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removeSubAgent(subAgent, $event)\"\n                                                            title=\"Remove sub-agent\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (subAgentCount > subAgents.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agents', '')\">\n                                                <span>View all {{ subAgentCount }} sub-agents...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Prompts (Third Panel - With Model Selection) -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"true\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-comments\"></i> Prompts{{ promptCount > 0 ? ' (' + promptCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"prompt-controls\">\n                                        <!-- Model Selection Mode Control -->\n                                        <div class=\"model-selection-mode\">\n                                            <label class=\"model-selection-label\">\n                                                <i class=\"fa-solid fa-sliders\"></i>\n                                                Model Selection:\n                                            </label>\n                                            @if (EditMode) {\n                                                <kendo-dropdownlist\n                                                    [(ngModel)]=\"record.ModelSelectionMode\"\n                                                    name=\"modelSelectionMode\"\n                                                    [data]=\"modelSelectionModes\"\n                                                    textField=\"text\"\n                                                    valueField=\"value\"\n                                                    [valuePrimitive]=\"true\"\n                                                    class=\"model-selection-dropdown\">\n                                                </kendo-dropdownlist>\n                                            } @else {\n                                                <span class=\"model-selection-value\">{{ record.ModelSelectionMode || 'Agent Type' }}</span>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateNewPrompts) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (promptCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comments\"></i>\n                                        <h4>No Prompts Configured</h4>\n                                        <p>Add prompts to define how this agent processes requests and generates responses.</p>\n                                        @if (EditMode && UserCanCreateNewPrompts) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addPrompt()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Prompt\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (prompt of agentPrompts; track prompt.ID) {\n                                            <div class=\"entity-item prompt-item\" (click)=\"navigateToEntity('AI Prompts', prompt.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-comment-dots\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ prompt.Name }}</div>\n                                                    @if (prompt.TemplateText) {\n                                                        <div class=\"item-preview\">{{ prompt.TemplateText.substring(0, 120) }}{{ prompt.TemplateText.length > 120 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (prompt.PromptRole) {\n                                                            <span class=\"meta-tag\">{{ prompt.PromptRole }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    @if (EditMode && UserCanCreatePrompts) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"primary\" \n                                                            size=\"small\"\n                                                            (click)=\"openPromptAdvancedSettings(prompt, $event)\"\n                                                            title=\"Advanced settings\">\n                                                            <i class=\"fa-solid fa-cog\"></i>\n                                                        </button>\n                                                    }\n                                                    @if (EditMode && UserCanDeletePrompts) {\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            themeColor=\"error\" \n                                                            size=\"small\"\n                                                            (click)=\"removePrompt(prompt, $event)\"\n                                                            title=\"Remove prompt\">\n                                                            <i class=\"fa-solid fa-trash\"></i>\n                                                        </button>\n                                                    }\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (promptCount > agentPrompts.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Prompts', '')\">\n                                                <span>View all {{ promptCount }} prompts...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n\n                <!-- Learning & Analytics -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-brain\"></i> Learning Cycles{{ learningCycleCount > 0 ? ' (' + learningCycleCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Monitor and manage learning cycles, training sessions, and performance analytics.\n                                    </div>\n                                </div>\n                                \n                                @if (learningCycleCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-brain\"></i>\n                                        <h4>No Learning Cycles</h4>\n                                        <p>Learning cycles will appear here as the agent processes requests and improves over time.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (cycle of learningCycles; track cycle.ID) {\n                                            <div class=\"entity-item learning-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', cycle.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-brain\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">Learning Cycle {{ cycle.ID.substring(0, 8) }}</div>\n                                                    <div class=\"item-meta\">\n                                                        @if (cycle.StartedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ cycle.StartedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                        @if (cycle.Status) {\n                                                            <span class=\"status-tag\">{{ cycle.Status }}</span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (learningCycleCount > learningCycles.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Learning Cycles', '')\">\n                                                <span>View all {{ learningCycleCount }} cycles...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Notes & Documentation -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-sticky-note\"></i> Notes{{ noteCount > 0 ? ' (' + noteCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Manage notes, documentation, and annotations for this agent.\n                                    </div>\n                                    <div class=\"header-actions\">\n                                        @if (EditMode && UserCanCreateNotes) {\n                                            <button kendoButton themeColor=\"primary\" size=\"small\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Note\n                                            </button>\n                                        }\n                                    </div>\n                                </div>\n                                \n                                @if (noteCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-sticky-note\"></i>\n                                        <h4>No Notes</h4>\n                                        <p>Add notes to document important information, observations, or instructions for this agent.</p>\n                                        @if (EditMode && UserCanCreateNotes) {\n                                            <button kendoButton themeColor=\"primary\" (click)=\"addNote()\">\n                                                <i class=\"fa-solid fa-plus\"></i> Create First Note\n                                            </button>\n                                        }\n                                    </div>\n                                } @else {\n                                    <div class=\"entity-list\">\n                                        @for (note of agentNotes; track note.ID) {\n                                            <div class=\"entity-item note-item\" (click)=\"navigateToEntity('AI Agent Notes', note.ID)\">\n                                                <div class=\"item-icon\">\n                                                    <i class=\"fa-solid fa-sticky-note\"></i>\n                                                </div>\n                                                <div class=\"item-content\">\n                                                    <div class=\"item-title\">{{ note.Type || 'Note' }}</div>\n                                                    @if (note.Note) {\n                                                        <div class=\"item-preview\">{{ note.Note.substring(0, 100) }}{{ note.Note.length > 100 ? '...' : '' }}</div>\n                                                    }\n                                                    <div class=\"item-meta\">\n                                                        @if (note.__mj_CreatedAt) {\n                                                            <span class=\"meta-tag\">\n                                                                <i class=\"fa-solid fa-calendar\"></i>\n                                                                {{ note.__mj_CreatedAt | date:'short' }}\n                                                            </span>\n                                                        }\n                                                    </div>\n                                                </div>\n                                                <div class=\"item-actions\">\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (noteCount > agentNotes.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('AI Agent Notes', '')\">\n                                                <span>View all {{ noteCount }} notes...</span>\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Requests & History -->\n                @if (record.ID) {\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <i class=\"fa-solid fa-history\"></i> Execution History{{ executionHistoryCount > 0 ? ' (' + executionHistoryCount + ')' : '' }}\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content execution-history-panel\">\n                                <div class=\"section-header\">\n                                    <div class=\"section-description\">\n                                        Review execution history, requests, and performance metrics for this agent.\n                                    </div>\n                                </div>\n                                \n                                @if (executionHistoryCount === 0) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-history\"></i>\n                                        <h4>No Execution History</h4>\n                                        <p>This agent hasn't been executed yet. Use the Test Agent button to run the agent and see execution history here.</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"timeline-list\">\n                                        @for (execution of recentExecutions; track execution.ID) {\n                                            <div class=\"timeline-item\" [class.expanded]=\"expandedExecutions[execution.ID]\">\n                                                <div>\n                                                    <div class=\"timeline-marker\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                        <i [class]=\"getExecutionStatusIcon(execution.Status)\"></i>\n                                                    </div>\n                                                    <div class=\"timeline-content\">\n                                                    <div class=\"timeline-header\" (click)=\"toggleExecutionExpanded(execution.ID)\">\n                                                        <div>\n                                                            <div class=\"timeline-title\">\n                                                                <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"expandedExecutions[execution.ID]\"></i>\n                                                                Execution #{{ execution.ID.substring(0, 8) }}\n                                                                <span class=\"timeline-date\">{{ execution.__mj_CreatedAt | date:'MMM d, h:mm a' }}</span>\n                                                            </div>\n                                                            <div class=\"timeline-meta\">\n                                                                <span class=\"status-badge\" [style.background-color]=\"getExecutionStatusColor(execution.Status)\">\n                                                                    {{ execution.Status || 'Unknown' }}\n                                                                </span>\n                                                                @if (execution.CompletedAt) {\n                                                                    <span class=\"execution-time\">\n                                                                        <i class=\"fa-solid fa-stopwatch\"></i>\n                                                                        {{ formatExecutionTimeFromDates(execution.StartedAt, execution.CompletedAt) }}\n                                                                    </span>\n                                                                }\n                                                                <div class=\"timeline-actions\">\n                                                                    <button class=\"btn-primary\" (click)=\"openExecutionRecord(execution.ID); $event.stopPropagation()\">\n                                                                        <i class=\"fa-solid fa-external-link-alt\"></i>\n                                                                    </button>\n                                                                </div>\n                                                            </div>\n                                                            @if (execution.Result && !expandedExecutions[execution.ID]) {\n                                                                <div class=\"timeline-preview\">{{ getExecutionResultPreview(execution, true) }}</div>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                    @if (expandedExecutions[execution.ID]) {\n                                                        <div class=\"timeline-expanded-content\">\n                                                            @if (execution.Result) {\n                                                                <div class=\"result-section\">\n                                                                    <h5>Result</h5>\n                                                                    <mj-code-editor \n                                                                        [value]=\"getExecutionResultPreview(execution, false)\"\n                                                                        [readonly]=\"true\"\n                                                                        language=\"json\"\n                                                                        [lineWrapping]=\"true\"\n                                                                        style=\"max-height: 200px; width: 100%;\">\n                                                                    </mj-code-editor>\n                                                                </div>\n                                                            }\n                                                            @if (execution.ErrorMessage) {\n                                                                <div class=\"error-section\">\n                                                                    <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h5>\n                                                                    <div class=\"error-content\">{{ execution.ErrorMessage }}</div>\n                                                                </div>\n                                                            }\n                                                            <div class=\"execution-details\">\n                                                                <div class=\"detail-row\">\n                                                                    <span class=\"detail-label\">Started:</span>\n                                                                    <span class=\"detail-value\">{{ execution.StartedAt | date:'medium' }}</span>\n                                                                </div>\n                                                                @if (execution.CompletedAt) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Completed:</span>\n                                                                        <span class=\"detail-value\">{{ execution.CompletedAt | date:'medium' }}</span>\n                                                                    </div>\n                                                                }\n                                                                @if (execution.ConversationID) {\n                                                                    <div class=\"detail-row\">\n                                                                        <span class=\"detail-label\">Conversation:</span>\n                                                                        <span class=\"detail-value\">{{ execution.ConversationID }}</span>\n                                                                    </div>\n                                                                }\n                                                            </div>\n                                                        </div>\n                                                    }\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        }\n                                        @if (executionHistoryCount > recentExecutions.length) {\n                                            <div class=\"view-more-item\" (click)=\"navigateToEntity('MJ: 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\n                <!-- Payload (Third Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-box\"></i> Payload\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Configure how this agent handles data payloads and validation.\n                                </div>\n                            </div>\n                            \n                            <!-- Configuration Fields -->\n                            <div class=\"payload-config-section\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-cog\"></i> Configuration\n                                </h4>\n                                <div class=\"payload-config-grid\">\n                                    <!-- Payload Scope -->\n                                    <mj-form-field \n                                        FieldName=\"PayloadScope\" \n                                        Type=\"textbox\"\n                                        Caption=\"Payload Scope\"\n                                        Description=\"Path to narrow payload (e.g., /functionalRequirements)\"\n                                        [EditMode]=\"EditMode\"\n                                        [record]=\"record\">\n                                    </mj-form-field>\n\n                                    <!-- Final Payload Validation Mode -->\n                                    <mj-form-field \n                                        FieldName=\"FinalPayloadValidationMode\" \n                                        Type=\"dropdownlist\"\n                                        Caption=\"Validation Mode\"\n                                        Description=\"Action on validation failure\"\n                                        [EditMode]=\"EditMode\"\n                                        [record]=\"record\">\n                                    </mj-form-field>\n\n                                    <!-- Final Payload Validation Max Retries -->\n                                    <mj-form-field \n                                        FieldName=\"FinalPayloadValidationMaxRetries\" \n                                        Type=\"numerictextbox\"\n                                        Caption=\"Max Retries\"\n                                        Description=\"Maximum validation retry attempts\"\n                                        [EditMode]=\"EditMode\"\n                                        [record]=\"record\">\n                                    </mj-form-field>\n                                </div>\n                            </div>\n\n                            <!-- Path Configuration -->\n                            <div class=\"payload-paths-section\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-route\"></i> Path Configuration\n                                </h4>\n                                \n                                <!-- Downstream Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-arrow-down\"></i> Downstream Paths\n                                        <span class=\"field-description\">JSON array of paths to pass to sub-agents</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadDownstreamPaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadDownstreamPaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n\n                                <!-- Upstream Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-arrow-up\"></i> Upstream Paths\n                                        <span class=\"field-description\">JSON array of paths to return to parent agent</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadUpstreamPaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadUpstreamPaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n\n                                <!-- Self Read Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-eye\"></i> Self Read Paths\n                                        <span class=\"field-description\">JSON array of paths this agent can read</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadSelfReadPaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadSelfReadPaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n\n                                <!-- Self Write Paths -->\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <i class=\"fa-solid fa-pen\"></i> Self Write Paths\n                                        <span class=\"field-description\">JSON array of paths this agent can write to</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.PayloadSelfWritePaths || '[]'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 120px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('PayloadSelfWritePaths', $event)\">\n                                    </mj-code-editor>\n                                </div>\n                            </div>\n\n                            <!-- Validation Rules -->\n                            <div class=\"payload-validation-section\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-shield-check\"></i> Final Payload Validation\n                                </h4>\n                                <div class=\"payload-field-group\">\n                                    <label class=\"payload-field-label\">\n                                        <span class=\"field-description\">JSON validation rules or schema for final payload validation</span>\n                                    </label>\n                                    <mj-code-editor \n                                        [value]=\"record.FinalPayloadValidation || '{}'\"\n                                        [readonly]=\"!EditMode\"\n                                        language=\"json\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 200px; width: 100%;\"\n                                        (valueChange)=\"updatePayloadField('FinalPayloadValidation', $event)\">\n                                    </mj-code-editor>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n\n\n                <!-- Execution Guardrails (New Separate Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-shield-halved\"></i> Execution Guardrails\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Set limits to prevent runaway agent executions and control resource usage.\n                                </div>\n                            </div>\n                            \n                            <div class=\"form-fields-grid\">\n                                <mj-form-field \n                                    FieldName=\"MaxCostPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Cost ($)\"\n                                    Description=\"Maximum cost per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTokensPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Tokens\"\n                                    Description=\"Maximum tokens per run\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxIterationsPerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Iterations\"\n                                    Description=\"Maximum prompt iterations\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"MaxTimePerRun\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Max Time (seconds)\"\n                                    Description=\"Maximum execution time\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n                <!-- Configuration (Settings Panel) -->\n                <kendo-panelbar-item [expanded]=\"false\">\n                    <ng-template kendoPanelBarItemTitle>\n                        <i class=\"fa-solid fa-cog\"></i> Configuration\n                    </ng-template>\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"panel-content\">\n                            <div class=\"section-header\">\n                                <div class=\"section-description\">\n                                    Advanced configuration settings for agent behavior and execution.\n                                </div>\n                            </div>\n                            \n                            <div class=\"form-fields-grid\">\n                                <!-- Core Settings -->\n                                <mj-form-field \n                                    FieldName=\"Status\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Status\"\n                                    Description=\"Agent availability status\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ExecutionMode\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Execution Mode\"\n                                    Description=\"How sub-agents are executed\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ExecutionOrder\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Execution Order\"\n                                    Description=\"Order when run with siblings\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ExposeAsAction\" \n                                    Type=\"checkbox\"\n                                    Caption=\"Expose as Action\"\n                                    Description=\"Make available as an action\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"TypeID\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Agent Type\"\n                                    Description=\"Category of this agent\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    LinkType=\"Record\"\n                                    LinkEntityName=\"MJ: AI Agent Types\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"DriverClass\" \n                                    Type=\"textbox\"\n                                    Caption=\"Driver Class\"\n                                    Description=\"Custom implementation class\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"IconClass\" \n                                    Type=\"textbox\"\n                                    Caption=\"Icon Class\"\n                                    Description=\"Font Awesome icon class\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"Description\" \n                                    Type=\"textarea\"\n                                    Caption=\"Description\"\n                                    Description=\"Detailed agent description\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    style=\"grid-column: span 2;\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"LogoURL\" \n                                    Type=\"textbox\"\n                                    Caption=\"Logo URL\"\n                                    Description=\"URL for agent logo image\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    style=\"grid-column: span 2;\">\n                                </mj-form-field>\n                            </div>\n\n                            <!-- Context Compression Settings -->\n                            <div class=\"subsection-divider\">\n                                <h4 class=\"subsection-title\">\n                                    <i class=\"fa-solid fa-compress\"></i> Context Compression\n                                </h4>\n                            </div>\n\n                            <div class=\"form-fields-grid\">\n                                <mj-form-field \n                                    FieldName=\"EnableContextCompression\" \n                                    Type=\"checkbox\"\n                                    Caption=\"Enable Compression\"\n                                    Description=\"Compress long conversations\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    (valueChange)=\"onContextCompressionToggle($event)\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ContextCompressionMessageThreshold\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Message Threshold\"\n                                    Description=\"Messages before compression\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ContextCompressionMessageRetentionCount\" \n                                    Type=\"numerictextbox\"\n                                    Caption=\"Messages to Keep\"\n                                    Description=\"Recent messages to retain\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\">\n                                </mj-form-field>\n\n                                <mj-form-field \n                                    FieldName=\"ContextCompressionPromptID\" \n                                    Type=\"dropdownlist\"\n                                    Caption=\"Compression Prompt\"\n                                    Description=\"Prompt for summarization\"\n                                    [EditMode]=\"EditMode\"\n                                    [record]=\"record\"\n                                    LinkType=\"Record\"\n                                    LinkEntityName=\"AI Prompts\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n\n\n\n            </kendo-panelbar>\n        </div>\n    </form>\n\n</div>", styles: ["/* AI Agent Form - Modern Redesign */\n.record-form-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    background: #f5f7fa;\n}\n\n.record-form {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Agent Header Section - Compact Design */\n.agent-header {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-bottom: 1px solid #e0e6ed;\n    padding: 12px 20px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.agent-header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 20px;\n}\n\n.agent-overview {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-icon-wrapper {\n    width: 48px;\n    height: 48px;\n    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);\n    flex-shrink: 0;\n}\n\n.agent-icon-wrapper i {\n    color: white;\n    font-size: 24px;\n}\n\n.agent-icon-wrapper img.agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 8px;\n}\n\n.agent-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.agent-name {\n    font-size: 22px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    line-height: 1.2;\n}\n\n.agent-name-input {\n    font-size: 18px !important;\n    font-weight: 500 !important;\n    height: 36px !important;\n    width: 100% !important;\n    max-width: 400px !important;\n}\n\n.agent-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.status-badge.active {\n    background: #28a745;\n    color: white;\n}\n\n.status-badge.pending {\n    background: #ffc107;\n    color: #212529;\n}\n\n.status-badge.disabled {\n    background: #6c757d;\n    color: white;\n}\n\n.execution-mode,\n.parent-agent {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 10px;\n    border-radius: 12px;\n}\n\n.execution-mode i,\n.parent-agent i {\n    font-size: 12px;\n    opacity: 0.8;\n}\n\n/* Prompt Controls Section */\n.prompt-controls {\n    flex: 1;\n    margin-right: 16px;\n}\n\n.agent-meta-info {\n    display: flex;\n    gap: 24px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.meta-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.meta-value {\n    font-size: 14px;\n    color: #495057;\n    font-weight: 500;\n}\n\n.agent-description {\n    margin-top: 16px;\n    color: #6c757d;\n    line-height: 1.6;\n    font-size: 15px;\n}\n\n.agent-description-input {\n    width: 100%;\n    max-width: 600px;\n    min-height: 80px;\n    resize: vertical;\n}\n\n/* Action Buttons Section */\n.agent-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.action-buttons-row {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.action-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-weight: 500;\n    font-size: 14px;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.08);\n}\n\n.action-button:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.12);\n}\n\n.action-button.primary {\n    background: #2196f3;\n    color: white;\n}\n\n.action-button.primary:hover {\n    background: #1976d2;\n}\n\n.action-button.secondary {\n    background: #6c757d;\n    color: white;\n}\n\n.action-button.secondary:hover {\n    background: #5a6268;\n}\n\n.action-warnings {\n    margin-top: 8px;\n    font-size: 13px;\n    color: #dc3545;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Panel-Based Form Content */\n.form-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: #f5f7fa;\n    padding: 12px;\n}\n\n/* Kendo PanelBar Styling */\n::ng-deep .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item {\n    border: none;\n    border-radius: 12px;\n    margin-bottom: 12px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    background: white;\n    overflow: hidden;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n    background: white;\n    border: none;\n    padding: 16px 20px;\n    border-radius: 12px 12px 0 0;\n    color: #2c3e50;\n    font-weight: 600;\n    font-size: 16px;\n    transition: all 0.2s ease;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header:hover {\n    background: #f8f9fa;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header {\n    background: #2196f3;\n    color: white;\n    border-radius: 12px 12px 0 0;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle {\n    position: absolute;\n    right: 24px;\n    color: inherit;\n    font-size: 14px;\n    transition: transform 0.2s ease;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item.k-panelbar-expanded > .k-header .k-panelbar-toggle {\n    transform: rotate(180deg);\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-header .k-panelbar-toggle::before {\n    content: '\\f107';\n    font-family: 'Font Awesome 6 Free';\n    font-weight: 900;\n}\n\n::ng-deep .k-panelbar > .k-panelbar-item > .k-content {\n    padding: 0;\n    border: none;\n    background: white;\n    border-radius: 0 0 12px 12px;\n}\n\n::ng-deep .k-panelbar .k-header .k-panelbar-icon {\n    font-size: 18px;\n    color: #2196f3;\n    margin-right: 8px;\n}\n\n::ng-deep .k-panelbar .k-panelbar-expanded .k-header .k-panelbar-icon {\n    color: white;\n}\n\n/* Panel Content */\n.panel-content {\n    padding: 16px;\n    background: white;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-bottom: 16px;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n\n.tab-section {\n    background: white;\n    border-radius: 12px;\n    padding: 24px;\n    margin-bottom: 24px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n    border: 1px solid #e0e6ed;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid #f0f4f8;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin: 0;\n    color: #2c3e50;\n    font-size: 18px;\n    font-weight: 600;\n}\n\n.section-title i {\n    color: #2196f3;\n    font-size: 20px;\n}\n\n.section-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.6;\n    margin-top: 8px;\n}\n\n/* Form Fields Grid */\n.form-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-top: 20px;\n}\n\n.form-field-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.form-field-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Sub-grids styling (legacy) */\n.sub-grid-container {\n    height: 500px;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n    display: none; /* Hidden as we now use cards */\n}\n\n/* Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto;\n}\n\n/* Loading State */\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.9);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n}\n\n.loading-spinner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n}\n\n.spinner-icon {\n    width: 48px;\n    height: 48px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #2196f3;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n/* Quick Actions */\n.quick-actions {\n    display: flex;\n    gap: 16px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.quick-action-card {\n    flex: 1;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e0e6ed;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: center;\n}\n\n.quick-action-card:hover {\n    background: white;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-2px);\n}\n\n.quick-action-icon {\n    font-size: 32px;\n    color: #2196f3;\n    margin-bottom: 8px;\n}\n\n.quick-action-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 4px;\n}\n\n.quick-action-description {\n    font-size: 12px;\n    color: #6c757d;\n}\n\n/* Header Actions */\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n/* Entity List Interface */\n.entity-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-top: 16px;\n}\n\n.entity-item {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.entity-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n    transform: translateY(-1px);\n}\n\n.item-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.prompt-item .item-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-item .item-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.sub-agent-item .item-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.model-item .item-icon {\n    background: linear-gradient(135deg, #6f42c1, #563d7c);\n}\n\n.learning-item .item-icon {\n    background: linear-gradient(135deg, #e83e8c, #dc3545);\n}\n\n.note-item .item-icon {\n    background: linear-gradient(135deg, #fd7e14, #e55a00);\n}\n\n.item-icon i {\n    color: #6c757d;\n    font-size: 18px;\n}\n\n.prompt-item .item-icon i,\n.action-item .item-icon i,\n.sub-agent-item .item-icon i,\n.model-item .item-icon i,\n.learning-item .item-icon i,\n.note-item .item-icon i {\n    color: white;\n}\n\n.item-icon img.sub-agent-logo {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 6px;\n}\n\n.item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.item-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n}\n\n.item-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    margin: 4px 0 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.item-meta {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n.meta-tag,\n.priority-tag,\n.status-tag {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    padding: 3px 8px;\n    border-radius: 6px;\n    font-weight: 500;\n}\n\n.meta-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.priority-tag {\n    color: white;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n.status-tag {\n    background: #e9ecef;\n    color: #495057;\n}\n\n.status-tag.active {\n    background: #d4edda;\n    color: #28a745;\n}\n\n.status-tag.inactive {\n    background: #f8d7da;\n    color: #dc3545;\n}\n\n.item-actions {\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    color: #6c757d;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.entity-item:hover .item-actions {\n    opacity: 1;\n}\n\n.entity-item:hover .item-actions > i {\n    color: #2196f3;\n}\n\n.view-more-item {\n    padding: 16px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 10px;\n    text-align: center;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-more-item:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    color: #2196f3;\n}\n\n/* Payload Section Styles */\n.payload-config-section,\n.payload-paths-section,\n.payload-validation-section {\n    margin-bottom: 32px;\n}\n\n.subsection-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 16px 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.subsection-title i {\n    color: #2196f3;\n}\n\n.subsection-divider {\n    margin-top: 32px;\n    margin-bottom: 16px;\n    padding-top: 24px;\n    border-top: 1px solid #e0e6ed;\n}\n\n.payload-config-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.payload-field-group {\n    margin-bottom: 20px;\n}\n\n.payload-field-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n}\n\n.payload-field-label i {\n    color: #6c757d;\n    font-size: 16px;\n}\n\n.field-description {\n    font-size: 12px;\n    font-weight: normal;\n    color: #6c757d;\n    margin-left: auto;\n}\n\n/* Code editor styling */\n.payload-field-group mj-code-editor {\n    border: 1px solid #dee2e6;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.payload-field-group mj-code-editor:hover {\n    border-color: #2196f3;\n}\n\n/* Payload textarea styling */\n.payload-field-group mj-form-field ::ng-deep textarea {\n    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    min-height: 120px;\n    resize: vertical;\n}\n\n/* Execution History Panel */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Timeline List for Execution History */\n.timeline-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e0e6ed;\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.timeline-item:hover {\n    background: white;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.timeline-marker {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 14px;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 8px 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    background: #e9ecef;\n    padding: 2px 8px;\n    border-radius: 6px;\n    white-space: nowrap;\n    flex-shrink: 0;\n}\n\n.timeline-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.timeline-preview {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n/* Modern Card-Based Interface (Legacy - Keep for backward compatibility) */\n.cards-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    gap: 20px;\n    margin-top: 16px;\n}\n\n.entity-card {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 12px;\n    padding: 20px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06);\n    position: relative;\n    overflow: hidden;\n}\n\n.entity-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n    border-color: #2196f3;\n}\n\n.entity-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #2196f3, #42a5f5);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n}\n\n.entity-card:hover::before {\n    opacity: 1;\n}\n\n.card-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.card-icon {\n    width: 40px;\n    height: 40px;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.sub-agent-card .card-icon {\n    background: linear-gradient(135deg, #2196f3, #1976d2);\n}\n\n.prompt-card .card-icon {\n    background: linear-gradient(135deg, #20c997, #17a673);\n}\n\n.action-card .card-icon {\n    background: linear-gradient(135deg, #ffc107, #e0a800);\n}\n\n.card-icon i {\n    font-size: 18px;\n    color: #6c757d;\n}\n\n.sub-agent-card .card-icon i,\n.prompt-card .card-icon i,\n.action-card .card-icon i {\n    color: white;\n}\n\n.card-title-section {\n    flex: 1;\n    min-width: 0;\n}\n\n.card-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0 0 4px 0;\n    line-height: 1.3;\n    word-wrap: break-word;\n}\n\n.card-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.card-meta {\n    display: flex;\n    gap: 16px;\n    margin-top: 12px;\n    flex-wrap: wrap;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #6c757d;\n    padding: 4px 8px;\n    background: #f8f9fa;\n    border-radius: 6px;\n}\n\n.meta-item i {\n    font-size: 11px;\n    opacity: 0.8;\n}\n\n.meta-item.active {\n    color: #28a745;\n    background: #d4edda;\n}\n\n.meta-item.inactive {\n    color: #dc3545;\n    background: #f8d7da;\n}\n\n.card-actions {\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    color: #6c757d;\n}\n\n.entity-card:hover .card-actions {\n    opacity: 1;\n    color: #2196f3;\n}\n\n/* Badge Styles */\n.priority-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    color: white;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.type-badge {\n    padding: 2px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    background: #e9ecef;\n    color: #495057;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n/* View All Card */\n.view-all-card {\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n}\n\n.view-all-card:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n    transform: translateY(-2px);\n}\n\n.view-all-content {\n    text-align: center;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.view-all-content i {\n    font-size: 24px;\n    margin-bottom: 8px;\n    display: block;\n}\n\n/* Timeline Interface for History */\n.timeline-container {\n    position: relative;\n    margin-top: 16px;\n}\n\n.timeline-item {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 24px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    padding: 16px;\n    background: transparent;\n    border: 1px solid transparent;\n}\n\n.timeline-item:hover {\n    background: #f8f9fa;\n    border-color: #e0e6ed;\n}\n\n.timeline-item.expanded {\n    background: #f8f9fa;\n    border-color: #2196f3;\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);\n}\n\n.timeline-item.view-all {\n    cursor: pointer;\n    background: linear-gradient(135deg, #f8f9fa, #e9ecef);\n    border: 2px dashed #dee2e6;\n}\n\n.timeline-item.view-all:hover {\n    background: linear-gradient(135deg, #e9ecef, #dee2e6);\n    border-color: #2196f3;\n}\n\n.timeline-item > div:first-child {\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-marker {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-right: 16px;\n    flex-shrink: 0;\n    position: relative;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n}\n\n.timeline-marker::after {\n    content: '';\n    position: absolute;\n    top: 50px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 2px;\n    height: 24px;\n    background: #e0e6ed;\n}\n\n.timeline-item:last-child .timeline-marker::after {\n    display: none;\n}\n\n.timeline-marker i {\n    color: white;\n    font-size: 16px;\n}\n\n.timeline-marker.view-all-marker {\n    background: #6c757d;\n}\n\n.timeline-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    align-items: flex-start;\n}\n\n.timeline-header {\n    flex: 1;\n    cursor: pointer;\n}\n\n.timeline-header > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 8px;\n    gap: 16px;\n}\n\n.expand-icon {\n    transition: transform 0.3s ease;\n    margin-right: 8px;\n    color: #6c757d;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n.timeline-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: #2c3e50;\n    margin: 0;\n    line-height: 1.3;\n}\n\n.timeline-date {\n    font-size: 12px;\n    color: #6c757d;\n    white-space: nowrap;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n    margin-left: auto;\n}\n\n.timeline-preview {\n    font-size: 13px;\n    color: #6c757d;\n    line-height: 1.5;\n    margin-top: 8px;\n    padding: 8px 12px;\n    background: #f8f9fa;\n    border-radius: 6px;\n    border: 1px solid #e0e6ed;\n}\n\n.timeline-status {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.execution-time {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #6c757d;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 6px;\n}\n\n.timeline-description {\n    color: #6c757d;\n    font-size: 14px;\n    line-height: 1.5;\n    margin: 8px 0;\n}\n\n.timeline-error {\n    color: #dc3545;\n    font-size: 13px;\n    background: #f8d7da;\n    padding: 8px 12px;\n    border-radius: 6px;\n    margin-top: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.timeline-error i {\n    flex-shrink: 0;\n}\n\n/* Expanded Content Styles */\n.timeline-expanded-content {\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid #e0e6ed;\n    animation: fadeIn 0.3s ease;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.result-section,\n.error-section {\n    margin-bottom: 20px;\n}\n\n.result-section h5,\n.error-section h5 {\n    font-size: 14px;\n    font-weight: 600;\n    color: #495057;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.error-section h5 {\n    color: #dc3545;\n}\n\n.result-content,\n.error-content {\n    background: white;\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    padding: 12px 16px;\n    font-size: 14px;\n    line-height: 1.6;\n    color: #495057;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n/* Code editor styling within result section */\n.result-section mj-code-editor {\n    border: 1px solid #e0e6ed;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.error-content {\n    background: #f8d7da;\n    border-color: #f5c6cb;\n    color: #721c24;\n}\n\n.execution-details {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.detail-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    min-width: 80px;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #495057;\n    word-break: break-all;\n}\n\n.timeline-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: #2196f3;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    transition: all 0.2s ease;\n}\n\n.btn-primary:hover {\n    background: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n}\n\n.btn-primary i {\n    font-size: 12px;\n}\n\n/* Enhanced Empty States */\n.empty-state {\n    text-align: center;\n    padding: 60px 20px;\n    color: #6c757d;\n    background: #f8f9fa;\n    border-radius: 12px;\n    border: 2px dashed #dee2e6;\n    margin-top: 16px;\n}\n\n.empty-state i {\n    font-size: 48px;\n    color: #dee2e6;\n    margin-bottom: 16px;\n}\n\n.empty-state h4 {\n    color: #495057;\n    font-weight: 600;\n    margin-bottom: 8px;\n    font-size: 18px;\n}\n\n.empty-state p {\n    font-size: 15px;\n    line-height: 1.6;\n    max-width: 400px;\n    margin: 0 auto 20px auto;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    /* Header Responsiveness */\n    .agent-header {\n        padding: 16px;\n    }\n    \n    .agent-header-content {\n        flex-direction: column;\n        gap: 16px;\n    }\n    \n    .agent-overview {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .agent-meta {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .agent-actions {\n        width: 100%;\n        align-self: stretch;\n    }\n    \n    .action-button {\n        flex: 1;\n        justify-content: center;\n    }\n    \n    /* Panel Responsiveness */\n    .form-content {\n        padding: 12px;\n    }\n    \n    ::ng-deep .k-panelbar > .k-panelbar-item > .k-header {\n        padding: 16px 20px;\n        font-size: 15px;\n    }\n    \n    .panel-content {\n        padding: 20px 16px;\n    }\n    \n    .section-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 12px;\n    }\n    \n    .header-actions {\n        flex-wrap: wrap;\n        align-self: stretch;\n    }\n    \n    /* Entity List Responsiveness */\n    .entity-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .item-icon {\n        width: 36px;\n        height: 36px;\n    }\n    \n    .item-icon i {\n        font-size: 16px;\n    }\n    \n    .item-title {\n        font-size: 15px;\n    }\n    \n    .item-preview {\n        font-size: 13px;\n    }\n    \n    .item-meta {\n        gap: 8px;\n    }\n    \n    /* Timeline Responsiveness */\n    .timeline-item {\n        padding: 12px;\n        gap: 12px;\n    }\n    \n    .timeline-marker {\n        width: 28px;\n        height: 28px;\n    }\n    \n    .timeline-marker i {\n        font-size: 12px;\n    }\n    \n    .timeline-title {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n    }\n    \n    .timeline-date {\n        align-self: flex-start;\n    }\n    \n    /* Form Field Responsiveness */\n    .form-fields-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n    \n    /* Legacy card support */\n    .cards-container {\n        grid-template-columns: 1fr;\n    }\n}\n\n/* Execution History Panel - Max Height and Scroll */\n.execution-history-panel {\n    max-height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n/* Custom scrollbar for execution history */\n.execution-history-panel::-webkit-scrollbar {\n    width: 8px;\n}\n\n.execution-history-panel::-webkit-scrollbar-track {\n    background: #f1f1f1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb {\n    background: #c1c1c1;\n    border-radius: 4px;\n}\n\n.execution-history-panel::-webkit-scrollbar-thumb:hover {\n    background: #a0a0a0;\n}\n\n"] }]
+    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i3.DialogService }, { type: i0.ViewContainerRef }, { type: i4.AIAgentManagementService }, { type: i5.AITestHarnessDialogService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 52 }); })();
 export function LoadAIAgentFormComponentExtended() {
     // This function is called to ensure the component is loaded and registered