@memberjunction/ng-dashboards 2.48.0 → 2.50.0

package/dist/AI/components/agents/agent-editor.component.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { RunView, Metadata, LogError, LogStatus } from '@memberjunction/core';
 import * as d3 from 'd3';
@@ -15,405 +6,419 @@ import * as i1 from "@angular/forms";
 import * as i2 from "@memberjunction/ng-container-directives";
 const _c0 = ["hierarchyChart"];
 const _forTrack0 = ($index, $item) => $item.id;
-function AgentEditorComponent_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 12);
-    i0.ɵɵelement(1, "i", 13);
+function AgentEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCurrentAgentRecord()); });
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵtext(2, " Open Record ");
+    i0.ɵɵelementEnd();
+} }
+function AgentEditorComponent_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵelement(1, "i", 17);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Child of ", ctx_r0.currentAgent.Parent, " ");
+    i0.ɵɵtextInterpolate1(" Child of ", ctx_r1.currentAgent.Parent, " ");
 } }
-function AgentEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "h2");
+function AgentEditorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8)(1, "h2");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, AgentEditorComponent_Conditional_6_Conditional_3_Template, 3, 1, "span", 12);
+    i0.ɵɵtemplate(3, AgentEditorComponent_Conditional_8_Conditional_3_Template, 3, 1, "span", 16);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.currentAgent.Name);
+    i0.ɵɵtextInterpolate(ctx_r1.currentAgent.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.currentAgent.Parent ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.currentAgent.Parent ? 3 : -1);
 } }
-function AgentEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "button", 14);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("hierarchy")); });
-    i0.ɵɵelement(2, "i", 15);
+function AgentEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9)(1, "button", 18);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveTab("hierarchy")); });
+    i0.ɵɵelement(2, "i", 19);
     i0.ɵɵtext(3, " Hierarchy ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 14);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("prompts")); });
-    i0.ɵɵelement(5, "i", 16);
+    i0.ɵɵelementStart(4, "button", 18);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveTab("prompts")); });
+    i0.ɵɵelement(5, "i", 20);
     i0.ɵɵtext(6, " Prompts ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 14);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("properties")); });
-    i0.ɵɵelement(8, "i", 17);
+    i0.ɵɵelementStart(7, "button", 18);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveTab("properties")); });
+    i0.ɵɵelement(8, "i", 21);
     i0.ɵɵtext(9, " Properties ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r0.activeTab === "hierarchy");
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === "hierarchy");
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r0.activeTab === "prompts");
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === "prompts");
     i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r0.activeTab === "properties");
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === "properties");
 } }
-function AgentEditorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 18)(2, "div", 19);
-    i0.ɵɵelement(3, "div", 20)(4, "div", 20)(5, "div", 20);
+function AgentEditorComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 22)(2, "div", 23);
+    i0.ɵɵelement(3, "div", 24)(4, "div", 24)(5, "div", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 21);
+    i0.ɵɵelementStart(6, "div", 25);
     i0.ɵɵtext(7, "Loading agent data...");
     i0.ɵɵelementEnd()()();
 } }
-function AgentEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 22);
-    i0.ɵɵelement(2, "i", 23);
+function AgentEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 26);
+    i0.ɵɵelement(2, "i", 27);
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "Error Loading Agent");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 24);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.loadAgentData()); });
-    i0.ɵɵelement(8, "i", 25);
+    i0.ɵɵelementStart(7, "button", 28);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadAgentData()); });
+    i0.ɵɵelement(8, "i", 29);
     i0.ɵɵtext(9, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.error);
+    i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
-function AgentEditorComponent_Conditional_10_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44)(1, "small");
-    i0.ɵɵelement(2, "i", 46);
+function AgentEditorComponent_Conditional_12_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48)(1, "small");
+    i0.ɵɵelement(2, "i", 50);
     i0.ɵɵtext(3, " Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate ");
     i0.ɵɵelementEnd()();
 } }
-function AgentEditorComponent_Conditional_10_Conditional_1_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵelement(1, "i", 15);
+function AgentEditorComponent_Conditional_12_Conditional_1_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Agent Hierarchy");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "This agent doesn't have any parent or child agents yet.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 47);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Conditional_29_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openCreateSubAgent()); });
-    i0.ɵɵelement(7, "i", 33);
+    i0.ɵɵelementStart(6, "button", 51);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_12_Conditional_1_Conditional_29_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openCreateSubAgent()); });
+    i0.ɵɵelement(7, "i", 37);
     i0.ɵɵtext(8, " Create Sub-Agent ");
     i0.ɵɵelementEnd()();
 } }
-function AgentEditorComponent_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 29)(2, "h3");
-    i0.ɵɵelement(3, "i", 15);
+function AgentEditorComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 33)(2, "h3");
+    i0.ɵɵelement(3, "i", 19);
     i0.ɵɵtext(4, " Agent Hierarchy ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 30)(6, "div", 31)(7, "button", 32);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.zoomIn()); });
-    i0.ɵɵelement(8, "i", 33);
+    i0.ɵɵelementStart(5, "div", 34)(6, "div", 35)(7, "button", 36);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_12_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.zoomIn()); });
+    i0.ɵɵelement(8, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 34);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.zoomOut()); });
-    i0.ɵɵelement(10, "i", 35);
+    i0.ɵɵelementStart(9, "button", 38);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_12_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.zoomOut()); });
+    i0.ɵɵelement(10, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 36);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.resetZoom()); });
-    i0.ɵɵelement(12, "i", 37);
+    i0.ɵɵelementStart(11, "button", 40);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_12_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.resetZoom()); });
+    i0.ɵɵelement(12, "i", 41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 38)(14, "div", 39);
-    i0.ɵɵelement(15, "div", 40);
+    i0.ɵɵelementStart(13, "div", 42)(14, "div", 43);
+    i0.ɵɵelement(15, "div", 44);
     i0.ɵɵelementStart(16, "span");
     i0.ɵɵtext(17, "Root");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 39);
-    i0.ɵɵelement(19, "div", 41);
+    i0.ɵɵelementStart(18, "div", 43);
+    i0.ɵɵelement(19, "div", 45);
     i0.ɵɵelementStart(20, "span");
     i0.ɵɵtext(21, "Level 1");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 39);
-    i0.ɵɵelement(23, "div", 42);
+    i0.ɵɵelementStart(22, "div", 43);
+    i0.ɵɵelement(23, "div", 46);
     i0.ɵɵelementStart(24, "span");
     i0.ɵɵtext(25, "Level 2+");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(26, "div", 43, 0);
-    i0.ɵɵtemplate(28, AgentEditorComponent_Conditional_10_Conditional_1_Conditional_28_Template, 4, 0, "div", 44)(29, AgentEditorComponent_Conditional_10_Conditional_1_Conditional_29_Template, 9, 0, "div", 45);
+    i0.ɵɵelementStart(26, "div", 47, 0);
+    i0.ɵɵtemplate(28, AgentEditorComponent_Conditional_12_Conditional_1_Conditional_28_Template, 4, 0, "div", 48)(29, AgentEditorComponent_Conditional_12_Conditional_1_Conditional_29_Template, 9, 0, "div", 49);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(28);
-    i0.ɵɵconditional(ctx_r0.hierarchyData && (ctx_r0.hasChildren() || ctx_r0.hasParent()) ? 28 : -1);
+    i0.ɵɵconditional(ctx_r1.hierarchyData && (ctx_r1.hasChildren() || ctx_r1.hasParent()) ? 28 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r0.hierarchyData || !ctx_r0.hasChildren() && !ctx_r0.hasParent() ? 29 : -1);
+    i0.ɵɵconditional(!ctx_r1.hierarchyData || !ctx_r1.hasChildren() && !ctx_r1.hasParent() ? 29 : -1);
 } }
-function AgentEditorComponent_Conditional_10_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵelement(1, "i", 16);
+function AgentEditorComponent_Conditional_12_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵelement(1, "i", 20);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No prompts configured for this agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 51);
-    i0.ɵɵelement(5, "i", 33);
+    i0.ɵɵelementStart(4, "button", 55);
+    i0.ɵɵelement(5, "i", 37);
     i0.ɵɵtext(6, " Add First Prompt ");
     i0.ɵɵelementEnd()();
 } }
-function AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53)(2, "div", 54)(3, "h4");
+function AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56)(1, "div", 57)(2, "div", 58)(3, "h4");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 55);
+    i0.ɵɵelementStart(5, "span", 59);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 56)(8, "button", 57);
-    i0.ɵɵelement(9, "i", 58);
+    i0.ɵɵelementStart(7, "div", 60)(8, "button", 61);
+    i0.ɵɵelement(9, "i", 62);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 59);
-    i0.ɵɵelement(11, "i", 60);
+    i0.ɵɵelementStart(10, "button", 63);
+    i0.ɵɵelement(11, "i", 64);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 61)(13, "p");
+    i0.ɵɵelementStart(12, "div", 65)(13, "p");
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const prompt_r6 = ctx.$implicit;
+    const prompt_r7 = ctx.$implicit;
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(prompt_r6.name);
+    i0.ɵɵtextInterpolate(prompt_r7.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(prompt_r6.type);
+    i0.ɵɵtextInterpolate(prompt_r7.type);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(prompt_r6.content);
+    i0.ɵɵtextInterpolate(prompt_r7.content);
 } }
-function AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_For_1_Template, 15, 3, "div", 52, _forTrack0);
+function AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_For_1_Template, 15, 3, "div", 56, _forTrack0);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵrepeater(ctx_r0.agentPrompts);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r1.agentPrompts);
 } }
-function AgentEditorComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 29)(2, "h3");
-    i0.ɵɵelement(3, "i", 16);
+function AgentEditorComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 33)(2, "h3");
+    i0.ɵɵelement(3, "i", 20);
     i0.ɵɵtext(4, " Agent Prompts ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 48);
-    i0.ɵɵelement(6, "i", 33);
+    i0.ɵɵelementStart(5, "button", 52);
+    i0.ɵɵelement(6, "i", 37);
     i0.ɵɵtext(7, " Add Prompt ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 49);
-    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_10_Conditional_2_Conditional_9_Template, 7, 0, "div", 50)(10, AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_Template, 2, 0);
+    i0.ɵɵelementStart(8, "div", 53);
+    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_9_Template, 7, 0, "div", 54)(10, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_Template, 2, 0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r0.agentPrompts.length === 0 ? 9 : 10);
+    i0.ɵɵconditional(ctx_r1.agentPrompts.length === 0 ? 9 : 10);
 } }
-function AgentEditorComponent_Conditional_10_Conditional_3_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 65)(2, "label");
+function AgentEditorComponent_Conditional_12_Conditional_3_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "div", 69)(2, "label");
     i0.ɵɵtext(3, "Message Threshold");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "input", 77);
+    i0.ɵɵelement(4, "input", 81);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 65)(6, "label");
+    i0.ɵɵelementStart(5, "div", 69)(6, "label");
     i0.ɵɵtext(7, "Retention Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(8, "input", 78);
+    i0.ɵɵelement(8, "input", 82);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r0.currentAgent.ContextCompressionMessageThreshold);
+    i0.ɵɵproperty("value", ctx_r1.currentAgent.ContextCompressionMessageThreshold);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r0.currentAgent.ContextCompressionMessageRetentionCount);
+    i0.ɵɵproperty("value", ctx_r1.currentAgent.ContextCompressionMessageRetentionCount);
 } }
-function AgentEditorComponent_Conditional_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29)(2, "h3");
-    i0.ɵɵelement(3, "i", 17);
+function AgentEditorComponent_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33)(2, "h3");
+    i0.ɵɵelement(3, "i", 21);
     i0.ɵɵtext(4, " Agent Properties ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 62);
-    i0.ɵɵelement(6, "i", 63);
+    i0.ɵɵelementStart(5, "button", 66);
+    i0.ɵɵelement(6, "i", 67);
     i0.ɵɵtext(7, " Save ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 64)(9, "div", 65)(10, "label");
+    i0.ɵɵelementStart(8, "div", 68)(9, "div", 69)(10, "label");
     i0.ɵɵtext(11, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(12, "input", 66);
+    i0.ɵɵelement(12, "input", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 65)(14, "label");
+    i0.ɵɵelementStart(13, "div", 69)(14, "label");
     i0.ɵɵtext(15, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(16, "textarea", 67);
+    i0.ɵɵelement(16, "textarea", 71);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 68)(18, "div", 65)(19, "label");
+    i0.ɵɵelementStart(17, "div", 72)(18, "div", 69)(19, "label");
     i0.ɵɵtext(20, "Execution Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "select", 69)(22, "option", 70);
+    i0.ɵɵelementStart(21, "select", 73)(22, "option", 74);
     i0.ɵɵtext(23, "Sequential");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "option", 71);
+    i0.ɵɵelementStart(24, "option", 75);
     i0.ɵɵtext(25, "Parallel");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(26, "div", 65)(27, "label");
+    i0.ɵɵelementStart(26, "div", 69)(27, "label");
     i0.ɵɵtext(28, "Execution Order");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(29, "input", 72);
+    i0.ɵɵelement(29, "input", 76);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 73)(31, "label", 74);
-    i0.ɵɵelement(32, "input", 75)(33, "span", 76);
+    i0.ɵɵelementStart(30, "div", 77)(31, "label", 78);
+    i0.ɵɵelement(32, "input", 79)(33, "span", 80);
     i0.ɵɵtext(34, " Expose as Action ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(35, "small");
     i0.ɵɵtext(36, "Allow this agent to be used as an action by other agents");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 73)(38, "label", 74);
-    i0.ɵɵelement(39, "input", 75)(40, "span", 76);
+    i0.ɵɵelementStart(37, "div", 77)(38, "label", 78);
+    i0.ɵɵelement(39, "input", 79)(40, "span", 80);
     i0.ɵɵtext(41, " Enable Context Compression ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(42, "small");
     i0.ɵɵtext(43, "Automatically compress conversation context when threshold is reached");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(44, AgentEditorComponent_Conditional_10_Conditional_3_Conditional_44_Template, 9, 2, "div", 68);
+    i0.ɵɵtemplate(44, AgentEditorComponent_Conditional_12_Conditional_3_Conditional_44_Template, 9, 2, "div", 72);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(12);
-    i0.ɵɵproperty("value", ctx_r0.currentAgent.Name);
+    i0.ɵɵproperty("value", ctx_r1.currentAgent.Name);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("value", ctx_r0.currentAgent.Description);
+    i0.ɵɵproperty("value", ctx_r1.currentAgent.Description);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", ctx_r0.currentAgent.ExecutionMode);
+    i0.ɵɵproperty("value", ctx_r1.currentAgent.ExecutionMode);
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("value", ctx_r0.currentAgent.ExecutionOrder);
+    i0.ɵɵproperty("value", ctx_r1.currentAgent.ExecutionOrder);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("checked", ctx_r0.currentAgent.ExposeAsAction);
+    i0.ɵɵproperty("checked", ctx_r1.currentAgent.ExposeAsAction);
     i0.ɵɵadvance(7);
-    i0.ɵɵproperty("checked", ctx_r0.currentAgent.EnableContextCompression);
+    i0.ɵɵproperty("checked", ctx_r1.currentAgent.EnableContextCompression);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r0.currentAgent.EnableContextCompression ? 44 : -1);
+    i0.ɵɵconditional(ctx_r1.currentAgent.EnableContextCompression ? 44 : -1);
 } }
-function AgentEditorComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵtemplate(1, AgentEditorComponent_Conditional_10_Conditional_1_Template, 30, 2, "div", 26)(2, AgentEditorComponent_Conditional_10_Conditional_2_Template, 11, 1, "div", 27)(3, AgentEditorComponent_Conditional_10_Conditional_3_Template, 45, 7, "div", 28);
+function AgentEditorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵtemplate(1, AgentEditorComponent_Conditional_12_Conditional_1_Template, 30, 2, "div", 30)(2, AgentEditorComponent_Conditional_12_Conditional_2_Template, 11, 1, "div", 31)(3, AgentEditorComponent_Conditional_12_Conditional_3_Template, 45, 7, "div", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab === "hierarchy" ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.activeTab === "hierarchy" ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab === "prompts" ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.activeTab === "prompts" ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab === "properties" ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.activeTab === "properties" ? 3 : -1);
 } }
-function AgentEditorComponent_Conditional_11_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵelement(1, "i", 23);
+function AgentEditorComponent_Conditional_13_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵelement(1, "i", 27);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.error, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.error, " ");
 } }
-function AgentEditorComponent_Conditional_11_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 92);
+function AgentEditorComponent_Conditional_13_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 96);
     i0.ɵɵtext(1, " Creating... ");
 } }
-function AgentEditorComponent_Conditional_11_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 33);
+function AgentEditorComponent_Conditional_13_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 37);
     i0.ɵɵtext(1, " Create Sub-Agent ");
 } }
-function AgentEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeCreateSubAgent()); });
-    i0.ɵɵelementStart(1, "div", 80);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 81)(3, "h3");
-    i0.ɵɵelement(4, "i", 33);
+function AgentEditorComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeCreateSubAgent()); });
+    i0.ɵɵelementStart(1, "div", 84);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 85)(3, "h3");
+    i0.ɵɵelement(4, "i", 37);
     i0.ɵɵtext(5, " Create Sub-Agent ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 82);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeCreateSubAgent()); });
-    i0.ɵɵelement(7, "i", 83);
+    i0.ɵɵelementStart(6, "button", 86);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_13_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeCreateSubAgent()); });
+    i0.ɵɵelement(7, "i", 87);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 84);
-    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_11_Conditional_9_Template, 3, 1, "div", 85);
-    i0.ɵɵelementStart(10, "div", 65)(11, "label");
+    i0.ɵɵelementStart(8, "div", 88);
+    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_13_Conditional_9_Template, 3, 1, "div", 89);
+    i0.ɵɵelementStart(10, "div", 69)(11, "label");
     i0.ɵɵtext(12, "Agent Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "input", 86);
-    i0.ɵɵtwoWayListener("ngModelChange", function AgentEditorComponent_Conditional_11_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.newSubAgentName, $event) || (ctx_r0.newSubAgentName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "input", 90);
+    i0.ɵɵtwoWayListener("ngModelChange", function AgentEditorComponent_Conditional_13_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newSubAgentName, $event) || (ctx_r1.newSubAgentName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 65)(15, "label");
+    i0.ɵɵelementStart(14, "div", 69)(15, "label");
     i0.ɵɵtext(16, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "textarea", 87);
-    i0.ɵɵtwoWayListener("ngModelChange", function AgentEditorComponent_Conditional_11_Template_textarea_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.newSubAgentDescription, $event) || (ctx_r0.newSubAgentDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(17, "textarea", 91);
+    i0.ɵɵtwoWayListener("ngModelChange", function AgentEditorComponent_Conditional_13_Template_textarea_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newSubAgentDescription, $event) || (ctx_r1.newSubAgentDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 88)(19, "strong");
+    i0.ɵɵelementStart(18, "div", 92)(19, "strong");
     i0.ɵɵtext(20, "Parent Agent:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 89)(23, "button", 90);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeCreateSubAgent()); });
+    i0.ɵɵelementStart(22, "div", 93)(23, "button", 94);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_13_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeCreateSubAgent()); });
     i0.ɵɵtext(24, " Cancel ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "button", 91);
-    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createSubAgent()); });
-    i0.ɵɵtemplate(26, AgentEditorComponent_Conditional_11_Conditional_26_Template, 2, 0)(27, AgentEditorComponent_Conditional_11_Conditional_27_Template, 2, 0);
+    i0.ɵɵelementStart(25, "button", 95);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_13_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createSubAgent()); });
+    i0.ɵɵtemplate(26, AgentEditorComponent_Conditional_13_Conditional_26_Template, 2, 0)(27, AgentEditorComponent_Conditional_13_Conditional_27_Template, 2, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r0.error ? 9 : -1);
+    i0.ɵɵconditional(ctx_r1.error ? 9 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.newSubAgentName);
-    i0.ɵɵproperty("disabled", ctx_r0.isLoading);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newSubAgentName);
+    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.newSubAgentDescription);
-    i0.ɵɵproperty("disabled", ctx_r0.isLoading);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newSubAgentDescription);
+    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.currentAgent == null ? null : ctx_r0.currentAgent.Name, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentAgent == null ? null : ctx_r1.currentAgent.Name, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r0.isLoading);
+    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r0.newSubAgentName.trim() || ctx_r0.isLoading);
+    i0.ɵɵproperty("disabled", !ctx_r1.newSubAgentName.trim() || ctx_r1.isLoading);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isLoading ? 26 : 27);
+    i0.ɵɵconditional(ctx_r1.isLoading ? 26 : 27);
 } }
 export class AgentEditorComponent {
-    constructor() {
-        this.agentId = null;
-        this.close = new EventEmitter();
-        this.openAgent = new EventEmitter();
-        this.isLoading = false;
-        this.error = null;
-        this.currentAgent = null;
-        this.allAgents = [];
-        this.hierarchyData = null;
-        this.selectedNode = null;
-        this.agentPrompts = [];
-        // Tab settings
-        this.activeTab = 'hierarchy';
-        // Legacy layout settings (keeping for compatibility)
-        this.showHierarchy = true;
-        this.showPrompts = true;
-        this.showProperties = true;
-        // Sub-agent creation
-        this.showCreateSubAgent = false;
-        this.newSubAgentName = '';
-        this.newSubAgentDescription = '';
-    }
+    agentId = null;
+    close = new EventEmitter();
+    openAgent = new EventEmitter();
+    openEntityRecord = new EventEmitter();
+    hierarchyChartRef;
+    isLoading = false;
+    error = null;
+    currentAgent = null;
+    allAgents = [];
+    hierarchyData = null;
+    selectedNode = null;
+    agentPrompts = [];
+    // Tab settings
+    activeTab = 'hierarchy';
+    // Legacy layout settings (keeping for compatibility)
+    showHierarchy = true;
+    showPrompts = true;
+    showProperties = true;
+    // Sub-agent creation
+    showCreateSubAgent = false;
+    newSubAgentName = '';
+    newSubAgentDescription = '';
+    // D3 variables
+    svg;
+    g;
+    tree;
+    root;
+    zoom;
     ngOnInit() {
         if (this.agentId) {
             this.loadAgentData();
@@ -428,40 +433,38 @@ export class AgentEditorComponent {
             this.svg.remove();
         }
     }
-    loadAgentData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.isLoading = true;
-                this.error = null;
-                // Load all agents to build hierarchy
-                const rv = new RunView();
-                const result = yield rv.RunView({
-                    EntityName: 'AI Agents',
-                    ExtraFilter: '',
-                    OrderBy: 'Name',
-                    MaxRows: 1000
-                });
-                this.allAgents = result.Results;
-                this.currentAgent = this.allAgents.find(a => a.ID === this.agentId) || null;
-                if (this.currentAgent) {
-                    this.buildHierarchy();
-                    this.loadAgentPrompts();
-                    // Initialize chart after data is loaded
-                    setTimeout(() => {
-                        if (this.hierarchyChartRef) {
-                            this.initializeChart();
-                        }
-                    }, 100);
-                }
-            }
-            catch (error) {
-                console.error('Error loading agent data:', error);
-                this.error = 'Failed to load agent data';
-            }
-            finally {
-                this.isLoading = false;
+    async loadAgentData() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            // Load all agents to build hierarchy
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'AI Agents',
+                ExtraFilter: '',
+                OrderBy: 'Name',
+                MaxRows: 1000
+            });
+            this.allAgents = result.Results;
+            this.currentAgent = this.allAgents.find(a => a.ID === this.agentId) || null;
+            if (this.currentAgent) {
+                this.buildHierarchy();
+                this.loadAgentPrompts();
+                // Initialize chart after data is loaded
+                setTimeout(() => {
+                    if (this.hierarchyChartRef) {
+                        this.initializeChart();
+                    }
+                }, 100);
             }
-        });
+        }
+        catch (error) {
+            console.error('Error loading agent data:', error);
+            this.error = 'Failed to load agent data';
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
     buildHierarchy() {
         if (!this.currentAgent)
@@ -514,26 +517,23 @@ export class AgentEditorComponent {
         }
         return null;
     }
-    loadAgentPrompts() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.currentAgent)
-                return;
-            try {
-                // This would load prompts associated with the agent
-                // For now, using mock data structure
-                this.agentPrompts = [
-                    { id: '1', name: 'System Prompt', content: 'Default system instructions...', type: 'system' },
-                    { id: '2', name: 'User Prompt', content: 'User interaction template...', type: 'user' }
-                ];
-            }
-            catch (error) {
-                console.error('Error loading agent prompts:', error);
-            }
-        });
+    async loadAgentPrompts() {
+        if (!this.currentAgent)
+            return;
+        try {
+            // This would load prompts associated with the agent
+            // For now, using mock data structure
+            this.agentPrompts = [
+                { id: '1', name: 'System Prompt', content: 'Default system instructions...', type: 'system' },
+                { id: '2', name: 'User Prompt', content: 'User interaction template...', type: 'user' }
+            ];
+        }
+        catch (error) {
+            console.error('Error loading agent prompts:', error);
+        }
     }
     initializeChart() {
-        var _a;
-        if (!((_a = this.hierarchyChartRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+        if (!this.hierarchyChartRef?.nativeElement) {
             return;
         }
         const container = this.hierarchyChartRef.nativeElement;
@@ -616,14 +616,14 @@ export class AgentEditorComponent {
             .attr('ry', 6)
             .style('fill', (d) => this.getNodeColor(d))
             .style('stroke', (d) => this.getNodeStrokeColor(d))
-            .style('stroke-width', (d) => { var _a; return d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID) ? '3px' : '2px'; })
+            .style('stroke-width', (d) => d.data.id === this.currentAgent?.ID ? '3px' : '2px')
             .style('opacity', 0.9);
         // Add node labels (agent names)
         nodes.append('text')
             .attr('dy', -2)
             .attr('text-anchor', 'middle')
             .style('font-size', '11px')
-            .style('font-weight', (d) => { var _a; return d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID) ? 'bold' : '500'; })
+            .style('font-weight', (d) => d.data.id === this.currentAgent?.ID ? 'bold' : '500')
             .style('fill', '#333')
             .style('pointer-events', 'none')
             .text((d) => {
@@ -668,9 +668,8 @@ export class AgentEditorComponent {
         };
     }
     getNodeColor(d) {
-        var _a;
         const level = d.depth;
-        const isCurrentAgent = d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID);
+        const isCurrentAgent = d.data.id === this.currentAgent?.ID;
         // Level-based color scheme
         const levelColors = [
             '#1976d2', // Level 0 (root) - Blue
@@ -689,8 +688,7 @@ export class AgentEditorComponent {
         return this.lightenColor(baseColor, 0.3);
     }
     getNodeStrokeColor(d) {
-        var _a;
-        const isCurrentAgent = d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID);
+        const isCurrentAgent = d.data.id === this.currentAgent?.ID;
         if (isCurrentAgent) {
             return '#000';
         }
@@ -708,8 +706,7 @@ export class AgentEditorComponent {
         return `rgb(${newR}, ${newG}, ${newB})`;
     }
     onNodeClick(node) {
-        var _a;
-        if (node.id !== ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID)) {
+        if (node.id !== this.currentAgent?.ID) {
             this.openAgent.emit(node.id);
         }
     }
@@ -755,112 +752,117 @@ export class AgentEditorComponent {
         this.newSubAgentName = '';
         this.newSubAgentDescription = '';
     }
-    createSubAgent() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (!this.currentAgent || !this.newSubAgentName.trim())
-                return;
-            try {
-                this.isLoading = true;
-                this.error = null;
-                const md = Metadata.Provider;
-                if (!md) {
-                    throw new Error('Metadata provider not available');
-                }
-                // Create new AI Agent entity
-                const newAgent = yield md.GetEntityObject('AI Agents', md.CurrentUser);
-                // Set agent properties
-                newAgent.Name = this.newSubAgentName.trim();
-                newAgent.Description = this.newSubAgentDescription.trim() || '';
-                newAgent.ParentID = this.currentAgent.ID;
-                // Set default values based on parent agent
-                newAgent.ExecutionMode = this.currentAgent.ExecutionMode || 'Sequential';
-                newAgent.ExecutionOrder = 1; // Default to 1, could be made configurable
-                newAgent.ExposeAsAction = false; // Default to false for sub-agents
-                newAgent.EnableContextCompression = this.currentAgent.EnableContextCompression || false;
-                newAgent.ContextCompressionMessageThreshold = this.currentAgent.ContextCompressionMessageThreshold || 10;
-                newAgent.ContextCompressionMessageRetentionCount = this.currentAgent.ContextCompressionMessageRetentionCount || 5;
-                // Save the new agent
-                const result = yield newAgent.Save();
-                if (result) {
-                    LogStatus('Sub-agent created successfully');
-                    // Close the dialog
-                    this.closeCreateSubAgent();
-                    // Reload agent data to show the new hierarchy
-                    yield this.loadAgentData();
-                    // Navigate to the newly created agent
-                    this.openAgent.emit(newAgent.ID);
-                }
-                else {
-                    // Handle save failure
-                    const errorMessage = ((_a = newAgent.LatestResult) === null || _a === void 0 ? void 0 : _a.Message) || 'Unknown error occurred while creating sub-agent';
-                    this.error = `Failed to create sub-agent: ${errorMessage}`;
-                    LogError('Sub-agent creation failed', undefined, errorMessage);
-                }
+    async createSubAgent() {
+        if (!this.currentAgent || !this.newSubAgentName.trim())
+            return;
+        try {
+            this.isLoading = true;
+            this.error = null;
+            const md = Metadata.Provider;
+            if (!md) {
+                throw new Error('Metadata provider not available');
             }
-            catch (error) {
-                const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
-                this.error = `Failed to create sub-agent: ${errorMessage}`;
-                LogError('Error creating sub-agent', undefined, error);
+            // Create new AI Agent entity
+            const newAgent = await md.GetEntityObject('AI Agents', md.CurrentUser);
+            // Set agent properties
+            newAgent.Name = this.newSubAgentName.trim();
+            newAgent.Description = this.newSubAgentDescription.trim() || '';
+            newAgent.ParentID = this.currentAgent.ID;
+            // Set default values based on parent agent
+            newAgent.ExecutionMode = this.currentAgent.ExecutionMode || 'Sequential';
+            newAgent.ExecutionOrder = 1; // Default to 1, could be made configurable
+            newAgent.ExposeAsAction = false; // Default to false for sub-agents
+            newAgent.EnableContextCompression = this.currentAgent.EnableContextCompression || false;
+            newAgent.ContextCompressionMessageThreshold = this.currentAgent.ContextCompressionMessageThreshold || 10;
+            newAgent.ContextCompressionMessageRetentionCount = this.currentAgent.ContextCompressionMessageRetentionCount || 5;
+            // Save the new agent
+            const result = await newAgent.Save();
+            if (result) {
+                LogStatus('Sub-agent created successfully');
+                // Close the dialog
+                this.closeCreateSubAgent();
+                // Reload agent data to show the new hierarchy
+                await this.loadAgentData();
+                // Navigate to the newly created agent
+                this.openAgent.emit(newAgent.ID);
             }
-            finally {
-                this.isLoading = false;
+            else {
+                // Handle save failure
+                const errorMessage = newAgent.LatestResult?.Message || 'Unknown error occurred while creating sub-agent';
+                this.error = `Failed to create sub-agent: ${errorMessage}`;
+                LogError('Sub-agent creation failed', undefined, errorMessage);
             }
-        });
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+            this.error = `Failed to create sub-agent: ${errorMessage}`;
+            LogError('Error creating sub-agent', undefined, error);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
     hasChildren() {
-        var _a;
-        return ((_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.children) && this.selectedNode.children.length > 0 || false;
+        return this.selectedNode?.children && this.selectedNode.children.length > 0 || false;
     }
     hasParent() {
-        var _a;
-        return ((_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.parent) !== undefined;
+        return this.selectedNode?.parent !== undefined;
     }
     getChildCount() {
-        var _a, _b;
-        return ((_b = (_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) || 0;
+        return this.selectedNode?.children?.length || 0;
     }
+    openCurrentAgentRecord() {
+        if (this.currentAgent) {
+            this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: this.currentAgent.ID });
+        }
+    }
+    static ɵfac = function AgentEditorComponent_Factory(t) { return new (t || AgentEditorComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentEditorComponent, selectors: [["mj-agent-editor"]], viewQuery: function AgentEditorComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.hierarchyChartRef = _t.first);
+        } }, inputs: { agentId: "agentId" }, outputs: { close: "close", openAgent: "openAgent", openEntityRecord: "openEntityRecord" }, decls: 14, vars: 9, consts: [["hierarchyChart", ""], ["mjFillContainer", "", 1, "agent-editor-container", 3, "rightMargin", "bottomMargin"], [1, "editor-header"], [1, "header-info"], [1, "header-actions"], ["type", "button", "title", "Back to Agent List", 1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], ["type", "button", "title", "Open Agent Record", 1, "open-btn"], [1, "agent-breadcrumb"], [1, "tab-navigation"], [1, "loading-container"], [1, "error-container"], ["mjFillContainer", "", 1, "tab-content"], [1, "modal-overlay"], ["type", "button", "title", "Open Agent Record", 1, "open-btn", 3, "click"], [1, "fa-solid", "fa-external-link"], [1, "breadcrumb-item"], [1, "fa-solid", "fa-chevron-right"], ["type", "button", 1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-comment-dots"], [1, "fa-solid", "fa-cog"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "retry-btn", 3, "click"], [1, "fa-solid", "fa-retry"], ["mjFillContainer", "", 1, "hierarchy-section"], ["mjFillContainer", "", 1, "prompts-section"], ["mjFillContainer", "", 1, "properties-section"], [1, "section-header"], [1, "hierarchy-controls"], [1, "zoom-controls"], ["type", "button", "title", "Zoom In", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["type", "button", "title", "Zoom Out", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-minus"], ["type", "button", "title", "Reset Zoom", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "hierarchy-legend"], [1, "legend-item"], [1, "legend-rect", "level-0"], [1, "legend-rect", "level-1"], [1, "legend-rect", "level-2"], ["mjFillContainer", "", 1, "hierarchy-chart"], [1, "chart-help"], [1, "empty-hierarchy"], [1, "fa-solid", "fa-hand-pointer"], [1, "create-subagent-btn", 3, "click"], ["title", "Add New Prompt", 1, "add-prompt-btn"], [1, "prompts-list"], [1, "empty-prompts"], [1, "add-first-prompt-btn"], [1, "prompt-card"], [1, "prompt-header"], [1, "prompt-info"], [1, "prompt-type"], [1, "prompt-actions"], ["title", "Edit Prompt", 1, "action-btn"], [1, "fa-solid", "fa-edit"], ["title", "Delete Prompt", 1, "action-btn", "danger"], [1, "fa-solid", "fa-trash"], [1, "prompt-content"], ["title", "Save Changes", 1, "save-btn"], [1, "fa-solid", "fa-save"], [1, "properties-form"], [1, "form-group"], ["type", "text", "placeholder", "Agent name", 1, "form-input", 3, "value"], ["placeholder", "Agent description", "rows", "3", 1, "form-textarea", 3, "value"], [1, "form-row"], [1, "form-select", 3, "value"], ["value", "Sequential"], ["value", "Parallel"], ["type", "number", "min", "0", 1, "form-input", 3, "value"], [1, "form-group", "checkbox-group"], [1, "checkbox-label"], ["type", "checkbox", 3, "checked"], [1, "checkmark"], ["type", "number", "min", "1", "placeholder", "Number of messages", 1, "form-input", 3, "value"], ["type", "number", "min", "0", "placeholder", "Messages to keep", 1, "form-input", 3, "value"], [1, "modal-overlay", 3, "click"], [1, "create-subagent-modal", 3, "click"], [1, "modal-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "error-message"], ["type", "text", "placeholder", "Enter agent name...", "maxlength", "255", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], ["placeholder", "Describe what this sub-agent will do...", "rows", "4", 1, "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "parent-info"], [1, "modal-footer"], [1, "cancel-btn", 3, "click", "disabled"], [1, "create-btn", 3, "click", "disabled"], [1, "loading-spinner-sm"]], template: function AgentEditorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "button", 5);
+            i0.ɵɵlistener("click", function AgentEditorComponent_Template_button_click_4_listener() { return ctx.closeEditor(); });
+            i0.ɵɵelement(5, "i", 6);
+            i0.ɵɵtext(6, " Back to Agents ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, AgentEditorComponent_Conditional_7_Template, 3, 0, "button", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(8, AgentEditorComponent_Conditional_8_Template, 4, 2, "div", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_9_Template, 10, 6, "div", 9)(10, AgentEditorComponent_Conditional_10_Template, 8, 0, "div", 10)(11, AgentEditorComponent_Conditional_11_Template, 10, 1, "div", 11)(12, AgentEditorComponent_Conditional_12_Template, 4, 3, "div", 12)(13, AgentEditorComponent_Conditional_13_Template, 28, 9, "div", 13);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional(ctx.currentAgent ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.currentAgent ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading ? 10 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.error ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showCreateSubAgent ? 13 : -1);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NgControlStatus, i1.MaxLengthValidator, i1.NgModel, i2.FillContainer], styles: ["@use \"../../../../../../../dist/packages/Angular/Explorer/explorer-core/src/generic/generic-browse-list.component\";\n\n.agent-editor-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    \n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    \n    .back-btn, .open-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      text-decoration: none;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        border-color: #ccc;\n      }\n    }\n    \n    .back-btn {\n      background: #f8f9fa;\n      color: #666;\n      \n      &:hover {\n        background: #e9ecef;\n        color: #333;\n      }\n    }\n    \n    .open-btn {\n      background: #007bff;\n      color: white;\n      \n      &:hover {\n        background: #0056b3;\n      }\n    }\n    \n    .agent-breadcrumb {\n      h2 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #333;\n      }\n      \n      .breadcrumb-item {\n        font-size: 14px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-top: 4px;\n      }\n    }\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 12px;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #f8f9fa;\n        border-color: #2196f3;\n        color: #2196f3;\n      }\n      \n      &.active {\n        background: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Tab[_ngcontent-%COMP%]   Navigation\n.tab-navigation[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  \n  .tab-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #666;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    \n    &:hover {\n      color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    i {\n      font-size: 16px;\n    }\n  }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  \n  .loading-content, .error-content {\n    text-align: center;\n    \n    .loading-spinner {\n      position: relative;\n      width: 60px;\n      height: 60px;\n      margin: 0 auto 20px;\n    }\n    \n    .spinner-ring {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border: 3px solid transparent;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n      \n      &:nth-child(1) {\n        border-top-color: #2196f3;\n        animation-delay: 0s;\n      }\n      \n      &:nth-child(2) {\n        border-top-color: #9c27b0;\n        animation-delay: 0.3s;\n        transform: scale(0.8);\n      }\n      \n      &:nth-child(3) {\n        border-top-color: #ff6b35;\n        animation-delay: 0.6s;\n        transform: scale(0.6);\n      }\n    }\n    \n    .loading-text {\n      font-size: 16px;\n      color: #666;\n    }\n    \n    i {\n      font-size: 48px;\n      color: #dc3545;\n      margin-bottom: 16px;\n    }\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #333;\n    }\n    \n    p {\n      margin: 0 0 16px 0;\n      color: #666;\n    }\n    \n    .retry-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #dc3545;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      cursor: pointer;\n      \n      &:hover {\n        background: #c82333;\n      }\n    }\n  }\n}\n\n.editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%], .bottom-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n//[_ngcontent-%COMP%]   Hierarchy[_ngcontent-%COMP%]   Section\n.hierarchy-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .hierarchy-controls {\n      display: flex;\n      align-items: center;\n      gap: 20px;\n      \n      .zoom-controls {\n        display: flex;\n        gap: 4px;\n        \n        .zoom-btn {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          background: white;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          color: #666;\n          cursor: pointer;\n          transition: all 0.2s;\n          \n          &:hover {\n            background: #f8f9fa;\n            border-color: #2196f3;\n            color: #2196f3;\n          }\n          \n          i {\n            font-size: 12px;\n          }\n        }\n      }\n      \n      .hierarchy-legend {\n        display: flex;\n        gap: 16px;\n        \n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          font-size: 12px;\n          color: #666;\n          \n          .legend-rect {\n            width: 20px;\n            height: 12px;\n            border-radius: 2px;\n            border: 1px solid;\n            \n            &.level-0 {\n              background: #1976d2;\n              border-color: #1565c0;\n            }\n            \n            &.level-1 {\n              background: #388e3c;\n              border-color: #2e7d32;\n            }\n            \n            &.level-2 {\n              background: #f57c00;\n              border-color: #ef6c00;\n            }\n          }\n        }\n      }\n    }\n  }\n  \n  .hierarchy-chart {\n    flex: 1;\n    min-height: 300px;\n    overflow: hidden;\n    position: relative;\n    \n    .chart-help {\n      position: absolute;\n      bottom: 10px;\n      left: 10px;\n      background: rgba(255, 255, 255, 0.9);\n      padding: 6px 10px;\n      border-radius: 4px;\n      border: 1px solid #e0e0e0;\n      z-index: 10;\n      \n      small {\n        font-size: 11px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        \n        i {\n          color: #2196f3;\n        }\n      }\n    }\n    \n    .empty-hierarchy {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 40px 20px;\n      text-align: center;\n      color: #666;\n      \n      i {\n        font-size: 64px;\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h4 {\n        margin: 0 0 12px 0;\n        font-size: 18px;\n        color: #333;\n      }\n      \n      p {\n        margin: 0 0 24px 0;\n        font-size: 14px;\n        color: #666;\n        line-height: 1.5;\n      }\n      \n      .create-subagent-btn {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        background: #2196f3;\n        border: none;\n        border-radius: 6px;\n        color: white;\n        font-size: 14px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: background 0.2s;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n  }\n  \n}\n\n//[_ngcontent-%COMP%]   Prompts[_ngcontent-%COMP%]   Section\n.prompts-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #f0f0f0;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .add-prompt-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #2196f3;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #1976d2;\n      }\n    }\n  }\n  \n  .prompts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 20px;\n    \n    .empty-prompts {\n      text-align: center;\n      padding: 40px 20px;\n      color: #666;\n      \n      i {\n        font-size: 48px;\n        margin-bottom: 16px;\n      }\n      \n      p {\n        margin: 0 0 20px 0;\n        font-size: 14px;\n      }\n      \n      .add-first-prompt-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 16px;\n        background: #2196f3;\n        border: none;\n        border-radius: 4px;\n        color: white;\n        cursor: pointer;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n    \n    .prompt-card {\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      margin-bottom: 12px;\n      \n      .prompt-header {\n        padding: 12px 16px;\n        border-bottom: 1px solid #e9ecef;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .prompt-info {\n          h4 {\n            margin: 0 0 4px 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #333;\n          }\n          \n          .prompt-type {\n            font-size: 11px;\n            padding: 2px 6px;\n            background: #007bff;\n            color: white;\n            border-radius: 3px;\n            text-transform: uppercase;\n          }\n        }\n        \n        .prompt-actions {\n          display: flex;\n          gap: 4px;\n          \n          .action-btn {\n            padding: 4px 8px;\n            background: none;\n            border: 1px solid #e0e0e0;\n            border-radius: 3px;\n            color: #666;\n            cursor: pointer;\n            font-size: 12px;\n            \n            &:hover {\n              background: #f0f0f0;\n              border-color: #ccc;\n            }\n            \n            &.danger:hover {\n              background: #dc3545;\n              border-color: #dc3545;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .prompt-content {\n        padding: 12px 16px;\n        \n        p {\n          margin: 0;\n          font-size: 12px;\n          color: #666;\n          line-height: 1.4;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Properties[_ngcontent-%COMP%]   Section\n.properties-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .save-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #28a745;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #218838;\n      }\n    }\n  }\n  \n  .properties-form {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    \n    .form-group {\n      margin-bottom: 16px;\n      \n      label {\n        display: block;\n        font-size: 12px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 4px;\n      }\n      \n      .form-input, .form-select, .form-textarea {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-size: 13px;\n        background: white;\n        box-sizing: border-box;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 60px;\n      }\n      \n      &.checkbox-group {\n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 500;\n          \n          input[type=\"checkbox\"] {\n            width: auto;\n            margin: 0;\n          }\n        }\n        \n        small {\n          display: block;\n          font-size: 11px;\n          color: #666;\n          margin-top: 4px;\n          margin-left: 24px;\n        }\n      }\n    }\n    \n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n//[_ngcontent-%COMP%]   Sub-Agent[_ngcontent-%COMP%]   Creation[_ngcontent-%COMP%]   Modal\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n  \n  .modal-header {\n    padding: 20px 24px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    \n    h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    \n    .close-btn {\n      background: none;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      color: #666;\n      border-radius: 4px;\n      \n      &:hover {\n        background: #f8f9fa;\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-body {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n    \n    .error-message {\n      background: #f8d7da;\n      border: 1px solid #f5c6cb;\n      border-radius: 6px;\n      padding: 12px;\n      margin-bottom: 20px;\n      color: #721c24;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      i {\n        color: #dc3545;\n      }\n    }\n    \n    .form-group {\n      margin-bottom: 20px;\n      \n      label {\n        display: block;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 8px;\n      }\n      \n      .form-input, .form-textarea {\n        width: 100%;\n        padding: 12px;\n        border: 1px solid #ddd;\n        border-radius: 6px;\n        font-size: 14px;\n        background: white;\n        box-sizing: border-box;\n        transition: border-color 0.2s;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n        \n        &::placeholder {\n          color: #999;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 80px;\n        font-family: inherit;\n      }\n    }\n    \n    .parent-info {\n      background: #f8f9fa;\n      border: 1px solid #e9ecef;\n      border-radius: 6px;\n      padding: 12px;\n      font-size: 14px;\n      color: #666;\n      \n      strong {\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-footer {\n    padding: 20px 24px;\n    border-top: 1px solid #e9ecef;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    \n    .cancel-btn, .create-btn {\n      padding: 10px 20px;\n      border: 1px solid;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n    \n    .cancel-btn {\n      background: white;\n      border-color: #ddd;\n      color: #666;\n      \n      &:hover:not(:disabled) {\n        background: #f8f9fa;\n        border-color: #ccc;\n      }\n    }\n    \n    .create-btn {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      &:hover:not(:disabled) {\n        background: #1976d2;\n        border-color: #1976d2;\n      }\n      \n      .loading-spinner-sm {\n        width: 14px;\n        height: 14px;\n        border: 2px solid transparent;\n        border-top-color: currentColor;\n        border-radius: 50%;\n        animation: _ngcontent-%COMP%_spin 1s linear infinite;\n      }\n    }\n  }\n}"] });
 }
-AgentEditorComponent.ɵfac = function AgentEditorComponent_Factory(t) { return new (t || AgentEditorComponent)(); };
-AgentEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentEditorComponent, selectors: [["mj-agent-editor"]], viewQuery: function AgentEditorComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 5);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.hierarchyChartRef = _t.first);
-    } }, inputs: { agentId: "agentId" }, outputs: { close: "close", openAgent: "openAgent" }, decls: 12, vars: 8, consts: [["hierarchyChart", ""], ["mjFillContainer", "", 1, "agent-editor-container", 3, "rightMargin", "bottomMargin"], [1, "editor-header"], [1, "header-info"], ["type", "button", "title", "Back to Agent List", 1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "agent-breadcrumb"], [1, "tab-navigation"], [1, "loading-container"], [1, "error-container"], ["mjFillContainer", "", 1, "tab-content"], [1, "modal-overlay"], [1, "breadcrumb-item"], [1, "fa-solid", "fa-chevron-right"], ["type", "button", 1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-comment-dots"], [1, "fa-solid", "fa-cog"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "retry-btn", 3, "click"], [1, "fa-solid", "fa-retry"], ["mjFillContainer", "", 1, "hierarchy-section"], ["mjFillContainer", "", 1, "prompts-section"], ["mjFillContainer", "", 1, "properties-section"], [1, "section-header"], [1, "hierarchy-controls"], [1, "zoom-controls"], ["type", "button", "title", "Zoom In", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["type", "button", "title", "Zoom Out", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-minus"], ["type", "button", "title", "Reset Zoom", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "hierarchy-legend"], [1, "legend-item"], [1, "legend-rect", "level-0"], [1, "legend-rect", "level-1"], [1, "legend-rect", "level-2"], ["mjFillContainer", "", 1, "hierarchy-chart"], [1, "chart-help"], [1, "empty-hierarchy"], [1, "fa-solid", "fa-hand-pointer"], [1, "create-subagent-btn", 3, "click"], ["title", "Add New Prompt", 1, "add-prompt-btn"], [1, "prompts-list"], [1, "empty-prompts"], [1, "add-first-prompt-btn"], [1, "prompt-card"], [1, "prompt-header"], [1, "prompt-info"], [1, "prompt-type"], [1, "prompt-actions"], ["title", "Edit Prompt", 1, "action-btn"], [1, "fa-solid", "fa-edit"], ["title", "Delete Prompt", 1, "action-btn", "danger"], [1, "fa-solid", "fa-trash"], [1, "prompt-content"], ["title", "Save Changes", 1, "save-btn"], [1, "fa-solid", "fa-save"], [1, "properties-form"], [1, "form-group"], ["type", "text", "placeholder", "Agent name", 1, "form-input", 3, "value"], ["placeholder", "Agent description", "rows", "3", 1, "form-textarea", 3, "value"], [1, "form-row"], [1, "form-select", 3, "value"], ["value", "Sequential"], ["value", "Parallel"], ["type", "number", "min", "0", 1, "form-input", 3, "value"], [1, "form-group", "checkbox-group"], [1, "checkbox-label"], ["type", "checkbox", 3, "checked"], [1, "checkmark"], ["type", "number", "min", "1", "placeholder", "Number of messages", 1, "form-input", 3, "value"], ["type", "number", "min", "0", "placeholder", "Messages to keep", 1, "form-input", 3, "value"], [1, "modal-overlay", 3, "click"], [1, "create-subagent-modal", 3, "click"], [1, "modal-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "error-message"], ["type", "text", "placeholder", "Enter agent name...", "maxlength", "255", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], ["placeholder", "Describe what this sub-agent will do...", "rows", "4", 1, "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "parent-info"], [1, "modal-footer"], [1, "cancel-btn", 3, "click", "disabled"], [1, "create-btn", 3, "click", "disabled"], [1, "loading-spinner-sm"]], template: function AgentEditorComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "button", 4);
-        i0.ɵɵlistener("click", function AgentEditorComponent_Template_button_click_3_listener() { return ctx.closeEditor(); });
-        i0.ɵɵelement(4, "i", 5);
-        i0.ɵɵtext(5, " Back to Agents ");
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, AgentEditorComponent_Conditional_6_Template, 4, 2, "div", 6);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(7, AgentEditorComponent_Conditional_7_Template, 10, 6, "div", 7)(8, AgentEditorComponent_Conditional_8_Template, 8, 0, "div", 8)(9, AgentEditorComponent_Conditional_9_Template, 10, 1, "div", 9)(10, AgentEditorComponent_Conditional_10_Template, 4, 3, "div", 10)(11, AgentEditorComponent_Conditional_11_Template, 28, 9, "div", 11);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
-        i0.ɵɵadvance(6);
-        i0.ɵɵconditional(ctx.currentAgent ? 6 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 7 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.isLoading ? 8 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.error ? 9 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 10 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.showCreateSubAgent ? 11 : -1);
-    } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NgControlStatus, i1.MaxLengthValidator, i1.NgModel, i2.FillContainer], styles: ["@use \"../../../../../../../dist/packages/Angular/Explorer/explorer-core/src/generic/generic-browse-list.component\";\n\n.agent-editor-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    \n    .back-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      text-decoration: none;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #e9ecef;\n        border-color: #ccc;\n        color: #333;\n      }\n    }\n    \n    .agent-breadcrumb {\n      h2 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #333;\n      }\n      \n      .breadcrumb-item {\n        font-size: 14px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-top: 4px;\n      }\n    }\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 12px;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #f8f9fa;\n        border-color: #2196f3;\n        color: #2196f3;\n      }\n      \n      &.active {\n        background: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Tab[_ngcontent-%COMP%]   Navigation\n.tab-navigation[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  \n  .tab-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #666;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    \n    &:hover {\n      color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    i {\n      font-size: 16px;\n    }\n  }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  \n  .loading-content, .error-content {\n    text-align: center;\n    \n    .loading-spinner {\n      position: relative;\n      width: 60px;\n      height: 60px;\n      margin: 0 auto 20px;\n    }\n    \n    .spinner-ring {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border: 3px solid transparent;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n      \n      &:nth-child(1) {\n        border-top-color: #2196f3;\n        animation-delay: 0s;\n      }\n      \n      &:nth-child(2) {\n        border-top-color: #9c27b0;\n        animation-delay: 0.3s;\n        transform: scale(0.8);\n      }\n      \n      &:nth-child(3) {\n        border-top-color: #ff6b35;\n        animation-delay: 0.6s;\n        transform: scale(0.6);\n      }\n    }\n    \n    .loading-text {\n      font-size: 16px;\n      color: #666;\n    }\n    \n    i {\n      font-size: 48px;\n      color: #dc3545;\n      margin-bottom: 16px;\n    }\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #333;\n    }\n    \n    p {\n      margin: 0 0 16px 0;\n      color: #666;\n    }\n    \n    .retry-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #dc3545;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      cursor: pointer;\n      \n      &:hover {\n        background: #c82333;\n      }\n    }\n  }\n}\n\n.editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%], .bottom-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n//[_ngcontent-%COMP%]   Hierarchy[_ngcontent-%COMP%]   Section\n.hierarchy-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .hierarchy-controls {\n      display: flex;\n      align-items: center;\n      gap: 20px;\n      \n      .zoom-controls {\n        display: flex;\n        gap: 4px;\n        \n        .zoom-btn {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          background: white;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          color: #666;\n          cursor: pointer;\n          transition: all 0.2s;\n          \n          &:hover {\n            background: #f8f9fa;\n            border-color: #2196f3;\n            color: #2196f3;\n          }\n          \n          i {\n            font-size: 12px;\n          }\n        }\n      }\n      \n      .hierarchy-legend {\n        display: flex;\n        gap: 16px;\n        \n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          font-size: 12px;\n          color: #666;\n          \n          .legend-rect {\n            width: 20px;\n            height: 12px;\n            border-radius: 2px;\n            border: 1px solid;\n            \n            &.level-0 {\n              background: #1976d2;\n              border-color: #1565c0;\n            }\n            \n            &.level-1 {\n              background: #388e3c;\n              border-color: #2e7d32;\n            }\n            \n            &.level-2 {\n              background: #f57c00;\n              border-color: #ef6c00;\n            }\n          }\n        }\n      }\n    }\n  }\n  \n  .hierarchy-chart {\n    flex: 1;\n    min-height: 300px;\n    overflow: hidden;\n    position: relative;\n    \n    .chart-help {\n      position: absolute;\n      bottom: 10px;\n      left: 10px;\n      background: rgba(255, 255, 255, 0.9);\n      padding: 6px 10px;\n      border-radius: 4px;\n      border: 1px solid #e0e0e0;\n      z-index: 10;\n      \n      small {\n        font-size: 11px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        \n        i {\n          color: #2196f3;\n        }\n      }\n    }\n    \n    .empty-hierarchy {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 40px 20px;\n      text-align: center;\n      color: #666;\n      \n      i {\n        font-size: 64px;\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h4 {\n        margin: 0 0 12px 0;\n        font-size: 18px;\n        color: #333;\n      }\n      \n      p {\n        margin: 0 0 24px 0;\n        font-size: 14px;\n        color: #666;\n        line-height: 1.5;\n      }\n      \n      .create-subagent-btn {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        background: #2196f3;\n        border: none;\n        border-radius: 6px;\n        color: white;\n        font-size: 14px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: background 0.2s;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n  }\n  \n}\n\n//[_ngcontent-%COMP%]   Prompts[_ngcontent-%COMP%]   Section\n.prompts-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #f0f0f0;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .add-prompt-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #2196f3;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #1976d2;\n      }\n    }\n  }\n  \n  .prompts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 20px;\n    \n    .empty-prompts {\n      text-align: center;\n      padding: 40px 20px;\n      color: #666;\n      \n      i {\n        font-size: 48px;\n        margin-bottom: 16px;\n      }\n      \n      p {\n        margin: 0 0 20px 0;\n        font-size: 14px;\n      }\n      \n      .add-first-prompt-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 16px;\n        background: #2196f3;\n        border: none;\n        border-radius: 4px;\n        color: white;\n        cursor: pointer;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n    \n    .prompt-card {\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      margin-bottom: 12px;\n      \n      .prompt-header {\n        padding: 12px 16px;\n        border-bottom: 1px solid #e9ecef;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .prompt-info {\n          h4 {\n            margin: 0 0 4px 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #333;\n          }\n          \n          .prompt-type {\n            font-size: 11px;\n            padding: 2px 6px;\n            background: #007bff;\n            color: white;\n            border-radius: 3px;\n            text-transform: uppercase;\n          }\n        }\n        \n        .prompt-actions {\n          display: flex;\n          gap: 4px;\n          \n          .action-btn {\n            padding: 4px 8px;\n            background: none;\n            border: 1px solid #e0e0e0;\n            border-radius: 3px;\n            color: #666;\n            cursor: pointer;\n            font-size: 12px;\n            \n            &:hover {\n              background: #f0f0f0;\n              border-color: #ccc;\n            }\n            \n            &.danger:hover {\n              background: #dc3545;\n              border-color: #dc3545;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .prompt-content {\n        padding: 12px 16px;\n        \n        p {\n          margin: 0;\n          font-size: 12px;\n          color: #666;\n          line-height: 1.4;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Properties[_ngcontent-%COMP%]   Section\n.properties-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .save-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #28a745;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #218838;\n      }\n    }\n  }\n  \n  .properties-form {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    \n    .form-group {\n      margin-bottom: 16px;\n      \n      label {\n        display: block;\n        font-size: 12px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 4px;\n      }\n      \n      .form-input, .form-select, .form-textarea {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-size: 13px;\n        background: white;\n        box-sizing: border-box;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 60px;\n      }\n      \n      &.checkbox-group {\n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 500;\n          \n          input[type=\"checkbox\"] {\n            width: auto;\n            margin: 0;\n          }\n        }\n        \n        small {\n          display: block;\n          font-size: 11px;\n          color: #666;\n          margin-top: 4px;\n          margin-left: 24px;\n        }\n      }\n    }\n    \n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n//[_ngcontent-%COMP%]   Sub-Agent[_ngcontent-%COMP%]   Creation[_ngcontent-%COMP%]   Modal\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n  \n  .modal-header {\n    padding: 20px 24px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    \n    h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    \n    .close-btn {\n      background: none;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      color: #666;\n      border-radius: 4px;\n      \n      &:hover {\n        background: #f8f9fa;\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-body {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n    \n    .error-message {\n      background: #f8d7da;\n      border: 1px solid #f5c6cb;\n      border-radius: 6px;\n      padding: 12px;\n      margin-bottom: 20px;\n      color: #721c24;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      i {\n        color: #dc3545;\n      }\n    }\n    \n    .form-group {\n      margin-bottom: 20px;\n      \n      label {\n        display: block;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 8px;\n      }\n      \n      .form-input, .form-textarea {\n        width: 100%;\n        padding: 12px;\n        border: 1px solid #ddd;\n        border-radius: 6px;\n        font-size: 14px;\n        background: white;\n        box-sizing: border-box;\n        transition: border-color 0.2s;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n        \n        &::placeholder {\n          color: #999;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 80px;\n        font-family: inherit;\n      }\n    }\n    \n    .parent-info {\n      background: #f8f9fa;\n      border: 1px solid #e9ecef;\n      border-radius: 6px;\n      padding: 12px;\n      font-size: 14px;\n      color: #666;\n      \n      strong {\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-footer {\n    padding: 20px 24px;\n    border-top: 1px solid #e9ecef;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    \n    .cancel-btn, .create-btn {\n      padding: 10px 20px;\n      border: 1px solid;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n    \n    .cancel-btn {\n      background: white;\n      border-color: #ddd;\n      color: #666;\n      \n      &:hover:not(:disabled) {\n        background: #f8f9fa;\n        border-color: #ccc;\n      }\n    }\n    \n    .create-btn {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      &:hover:not(:disabled) {\n        background: #1976d2;\n        border-color: #1976d2;\n      }\n      \n      .loading-spinner-sm {\n        width: 14px;\n        height: 14px;\n        border: 2px solid transparent;\n        border-top-color: currentColor;\n        border-radius: 50%;\n        animation: _ngcontent-%COMP%_spin 1s linear infinite;\n      }\n    }\n  }\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentEditorComponent, [{
         type: Component,
-        args: [{ selector: 'mj-agent-editor', template: "<div class=\"agent-editor-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  <!-- Header -->\n  <div class=\"editor-header\">\n    <div class=\"header-info\">\n      <button \n        type=\"button\" \n        class=\"back-btn\"\n        (click)=\"closeEditor()\"\n        title=\"Back to Agent List\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        Back to Agents\n      </button>\n      \n      @if (currentAgent) {\n        <div class=\"agent-breadcrumb\">\n          <h2>{{ currentAgent.Name }}</h2>\n          @if (currentAgent.Parent) {\n            <span class=\"breadcrumb-item\">\n              <i class=\"fa-solid fa-chevron-right\"></i>\n              Child of {{ currentAgent.Parent }}\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Navigation -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-navigation\">\n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'hierarchy'\"\n        (click)=\"setActiveTab('hierarchy')\">\n        <i class=\"fa-solid fa-sitemap\"></i>\n        Hierarchy\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'prompts'\"\n        (click)=\"setActiveTab('prompts')\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        Prompts\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'properties'\"\n        (click)=\"setActiveTab('properties')\">\n        <i class=\"fa-solid fa-cog\"></i>\n        Properties\n      </button>\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n        </div>\n        <div class=\"loading-text\">Loading agent data...</div>\n      </div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <h3>Error Loading Agent</h3>\n        <p>{{ error }}</p>\n        <button class=\"retry-btn\" (click)=\"loadAgentData()\">\n          <i class=\"fa-solid fa-retry\"></i>\n          Retry\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Tab Content -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-content\" mjFillContainer>\n      \n      <!-- Hierarchy Tab -->\n      @if (activeTab === 'hierarchy') {\n        <div class=\"hierarchy-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-sitemap\"></i>\n              Agent Hierarchy\n            </h3>\n            \n            <div class=\"hierarchy-controls\">\n              <div class=\"zoom-controls\">\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomIn()\"\n                  title=\"Zoom In\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomOut()\"\n                  title=\"Zoom Out\">\n                  <i class=\"fa-solid fa-minus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"resetZoom()\"\n                  title=\"Reset Zoom\">\n                  <i class=\"fa-solid fa-expand\"></i>\n                </button>\n              </div>\n              \n              <div class=\"hierarchy-legend\">\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-0\"></div>\n                  <span>Root</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-1\"></div>\n                  <span>Level 1</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-2\"></div>\n                  <span>Level 2+</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <div class=\"hierarchy-chart\" #hierarchyChart mjFillContainer>\n            <!-- Help text overlay -->\n            @if (hierarchyData && (hasChildren() || hasParent())) {\n              <div class=\"chart-help\">\n                <small>\n                  <i class=\"fa-solid fa-hand-pointer\"></i>\n                  Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate\n                </small>\n              </div>\n            }\n            \n            <!-- Empty state for hierarchy -->\n            @if (!hierarchyData || (!hasChildren() && !hasParent())) {\n              <div class=\"empty-hierarchy\">\n                <i class=\"fa-solid fa-sitemap\"></i>\n                <h4>No Agent Hierarchy</h4>\n                <p>This agent doesn't have any parent or child agents yet.</p>\n                <button class=\"create-subagent-btn\" (click)=\"openCreateSubAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create Sub-Agent\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Prompts Tab -->\n      @if (activeTab === 'prompts') {\n        <div class=\"prompts-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-comment-dots\"></i>\n              Agent Prompts\n            </h3>\n            <button class=\"add-prompt-btn\" title=\"Add New Prompt\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Add Prompt\n            </button>\n          </div>\n          \n          <div class=\"prompts-list\">\n            @if (agentPrompts.length === 0) {\n              <div class=\"empty-prompts\">\n                <i class=\"fa-solid fa-comment-dots\"></i>\n                <p>No prompts configured for this agent</p>\n                <button class=\"add-first-prompt-btn\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Add First Prompt\n                </button>\n              </div>\n            } @else {\n              @for (prompt of agentPrompts; track prompt.id) {\n                <div class=\"prompt-card\">\n                  <div class=\"prompt-header\">\n                    <div class=\"prompt-info\">\n                      <h4>{{ prompt.name }}</h4>\n                      <span class=\"prompt-type\">{{ prompt.type }}</span>\n                    </div>\n                    <div class=\"prompt-actions\">\n                      <button class=\"action-btn\" title=\"Edit Prompt\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                      </button>\n                      <button class=\"action-btn danger\" title=\"Delete Prompt\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"prompt-content\">\n                    <p>{{ prompt.content }}</p>\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Properties Tab -->\n      @if (activeTab === 'properties') {\n        <div class=\"properties-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-cog\"></i>\n              Agent Properties\n            </h3>\n            <button class=\"save-btn\" title=\"Save Changes\">\n              <i class=\"fa-solid fa-save\"></i>\n              Save\n            </button>\n          </div>\n          \n          <div class=\"properties-form\">\n            <div class=\"form-group\">\n              <label>Name</label>\n              <input \n                type=\"text\" \n                class=\"form-input\"\n                [value]=\"currentAgent.Name\"\n                placeholder=\"Agent name\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Description</label>\n              <textarea \n                class=\"form-textarea\"\n                [value]=\"currentAgent.Description\"\n                placeholder=\"Agent description\"\n                rows=\"3\"></textarea>\n            </div>\n            \n            <div class=\"form-row\">\n              <div class=\"form-group\">\n                <label>Execution Mode</label>\n                <select class=\"form-select\" [value]=\"currentAgent.ExecutionMode\">\n                  <option value=\"Sequential\">Sequential</option>\n                  <option value=\"Parallel\">Parallel</option>\n                </select>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Execution Order</label>\n                <input \n                  type=\"number\" \n                  class=\"form-input\"\n                  [value]=\"currentAgent.ExecutionOrder\"\n                  min=\"0\">\n              </div>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.ExposeAsAction\">\n                <span class=\"checkmark\"></span>\n                Expose as Action\n              </label>\n              <small>Allow this agent to be used as an action by other agents</small>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.EnableContextCompression\">\n                <span class=\"checkmark\"></span>\n                Enable Context Compression\n              </label>\n              <small>Automatically compress conversation context when threshold is reached</small>\n            </div>\n            \n            @if (currentAgent.EnableContextCompression) {\n              <div class=\"form-row\">\n                <div class=\"form-group\">\n                  <label>Message Threshold</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageThreshold\"\n                    min=\"1\"\n                    placeholder=\"Number of messages\">\n                </div>\n                \n                <div class=\"form-group\">\n                  <label>Retention Count</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageRetentionCount\"\n                    min=\"0\"\n                    placeholder=\"Messages to keep\">\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Sub-Agent Creation Modal -->\n  @if (showCreateSubAgent) {\n    <div class=\"modal-overlay\" (click)=\"closeCreateSubAgent()\">\n      <div class=\"create-subagent-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>\n            <i class=\"fa-solid fa-plus\"></i>\n            Create Sub-Agent\n          </h3>\n          <button class=\"close-btn\" (click)=\"closeCreateSubAgent()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        \n        <div class=\"modal-body\">\n          @if (error) {\n            <div class=\"error-message\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              {{ error }}\n            </div>\n          }\n          \n          <div class=\"form-group\">\n            <label>Agent Name *</label>\n            <input \n              type=\"text\" \n              class=\"form-input\"\n              [(ngModel)]=\"newSubAgentName\"\n              placeholder=\"Enter agent name...\"\n              maxlength=\"255\"\n              [disabled]=\"isLoading\">\n          </div>\n          \n          <div class=\"form-group\">\n            <label>Description</label>\n            <textarea \n              class=\"form-textarea\"\n              [(ngModel)]=\"newSubAgentDescription\"\n              placeholder=\"Describe what this sub-agent will do...\"\n              rows=\"4\"\n              [disabled]=\"isLoading\"></textarea>\n          </div>\n          \n          <div class=\"parent-info\">\n            <strong>Parent Agent:</strong> {{ currentAgent?.Name }}\n          </div>\n        </div>\n        \n        <div class=\"modal-footer\">\n          <button \n            class=\"cancel-btn\" \n            (click)=\"closeCreateSubAgent()\"\n            [disabled]=\"isLoading\">\n            Cancel\n          </button>\n          <button \n            class=\"create-btn\" \n            (click)=\"createSubAgent()\"\n            [disabled]=\"!newSubAgentName.trim() || isLoading\">\n            @if (isLoading) {\n              <span class=\"loading-spinner-sm\"></span>\n              Creating...\n            } @else {\n              <i class=\"fa-solid fa-plus\"></i>\n              Create Sub-Agent\n            }\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: ["@use \"../../../../../../../dist/packages/Angular/Explorer/explorer-core/src/generic/generic-browse-list.component\";\n\n.agent-editor-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n.editor-header {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    \n    .back-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      text-decoration: none;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #e9ecef;\n        border-color: #ccc;\n        color: #333;\n      }\n    }\n    \n    .agent-breadcrumb {\n      h2 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #333;\n      }\n      \n      .breadcrumb-item {\n        font-size: 14px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-top: 4px;\n      }\n    }\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 12px;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #f8f9fa;\n        border-color: #2196f3;\n        color: #2196f3;\n      }\n      \n      &.active {\n        background: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n    }\n  }\n}\n\n// Tab Navigation\n.tab-navigation {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  \n  .tab-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #666;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    \n    &:hover {\n      color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    i {\n      font-size: 16px;\n    }\n  }\n}\n\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container, .error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  \n  .loading-content, .error-content {\n    text-align: center;\n    \n    .loading-spinner {\n      position: relative;\n      width: 60px;\n      height: 60px;\n      margin: 0 auto 20px;\n    }\n    \n    .spinner-ring {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border: 3px solid transparent;\n      border-radius: 50%;\n      animation: spin 1.5s linear infinite;\n      \n      &:nth-child(1) {\n        border-top-color: #2196f3;\n        animation-delay: 0s;\n      }\n      \n      &:nth-child(2) {\n        border-top-color: #9c27b0;\n        animation-delay: 0.3s;\n        transform: scale(0.8);\n      }\n      \n      &:nth-child(3) {\n        border-top-color: #ff6b35;\n        animation-delay: 0.6s;\n        transform: scale(0.6);\n      }\n    }\n    \n    .loading-text {\n      font-size: 16px;\n      color: #666;\n    }\n    \n    i {\n      font-size: 48px;\n      color: #dc3545;\n      margin-bottom: 16px;\n    }\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #333;\n    }\n    \n    p {\n      margin: 0 0 16px 0;\n      color: #666;\n    }\n    \n    .retry-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #dc3545;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      cursor: pointer;\n      \n      &:hover {\n        background: #c82333;\n      }\n    }\n  }\n}\n\n.editor-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter, .bottom-splitter {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n// Hierarchy Section\n.hierarchy-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .hierarchy-controls {\n      display: flex;\n      align-items: center;\n      gap: 20px;\n      \n      .zoom-controls {\n        display: flex;\n        gap: 4px;\n        \n        .zoom-btn {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          background: white;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          color: #666;\n          cursor: pointer;\n          transition: all 0.2s;\n          \n          &:hover {\n            background: #f8f9fa;\n            border-color: #2196f3;\n            color: #2196f3;\n          }\n          \n          i {\n            font-size: 12px;\n          }\n        }\n      }\n      \n      .hierarchy-legend {\n        display: flex;\n        gap: 16px;\n        \n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          font-size: 12px;\n          color: #666;\n          \n          .legend-rect {\n            width: 20px;\n            height: 12px;\n            border-radius: 2px;\n            border: 1px solid;\n            \n            &.level-0 {\n              background: #1976d2;\n              border-color: #1565c0;\n            }\n            \n            &.level-1 {\n              background: #388e3c;\n              border-color: #2e7d32;\n            }\n            \n            &.level-2 {\n              background: #f57c00;\n              border-color: #ef6c00;\n            }\n          }\n        }\n      }\n    }\n  }\n  \n  .hierarchy-chart {\n    flex: 1;\n    min-height: 300px;\n    overflow: hidden;\n    position: relative;\n    \n    .chart-help {\n      position: absolute;\n      bottom: 10px;\n      left: 10px;\n      background: rgba(255, 255, 255, 0.9);\n      padding: 6px 10px;\n      border-radius: 4px;\n      border: 1px solid #e0e0e0;\n      z-index: 10;\n      \n      small {\n        font-size: 11px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        \n        i {\n          color: #2196f3;\n        }\n      }\n    }\n    \n    .empty-hierarchy {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 40px 20px;\n      text-align: center;\n      color: #666;\n      \n      i {\n        font-size: 64px;\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h4 {\n        margin: 0 0 12px 0;\n        font-size: 18px;\n        color: #333;\n      }\n      \n      p {\n        margin: 0 0 24px 0;\n        font-size: 14px;\n        color: #666;\n        line-height: 1.5;\n      }\n      \n      .create-subagent-btn {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        background: #2196f3;\n        border: none;\n        border-radius: 6px;\n        color: white;\n        font-size: 14px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: background 0.2s;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n  }\n  \n}\n\n// Prompts Section\n.prompts-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #f0f0f0;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .add-prompt-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #2196f3;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #1976d2;\n      }\n    }\n  }\n  \n  .prompts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 20px;\n    \n    .empty-prompts {\n      text-align: center;\n      padding: 40px 20px;\n      color: #666;\n      \n      i {\n        font-size: 48px;\n        margin-bottom: 16px;\n      }\n      \n      p {\n        margin: 0 0 20px 0;\n        font-size: 14px;\n      }\n      \n      .add-first-prompt-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 16px;\n        background: #2196f3;\n        border: none;\n        border-radius: 4px;\n        color: white;\n        cursor: pointer;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n    \n    .prompt-card {\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      margin-bottom: 12px;\n      \n      .prompt-header {\n        padding: 12px 16px;\n        border-bottom: 1px solid #e9ecef;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .prompt-info {\n          h4 {\n            margin: 0 0 4px 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #333;\n          }\n          \n          .prompt-type {\n            font-size: 11px;\n            padding: 2px 6px;\n            background: #007bff;\n            color: white;\n            border-radius: 3px;\n            text-transform: uppercase;\n          }\n        }\n        \n        .prompt-actions {\n          display: flex;\n          gap: 4px;\n          \n          .action-btn {\n            padding: 4px 8px;\n            background: none;\n            border: 1px solid #e0e0e0;\n            border-radius: 3px;\n            color: #666;\n            cursor: pointer;\n            font-size: 12px;\n            \n            &:hover {\n              background: #f0f0f0;\n              border-color: #ccc;\n            }\n            \n            &.danger:hover {\n              background: #dc3545;\n              border-color: #dc3545;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .prompt-content {\n        padding: 12px 16px;\n        \n        p {\n          margin: 0;\n          font-size: 12px;\n          color: #666;\n          line-height: 1.4;\n        }\n      }\n    }\n  }\n}\n\n// Properties Section\n.properties-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .save-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #28a745;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #218838;\n      }\n    }\n  }\n  \n  .properties-form {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    \n    .form-group {\n      margin-bottom: 16px;\n      \n      label {\n        display: block;\n        font-size: 12px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 4px;\n      }\n      \n      .form-input, .form-select, .form-textarea {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-size: 13px;\n        background: white;\n        box-sizing: border-box;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 60px;\n      }\n      \n      &.checkbox-group {\n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 500;\n          \n          input[type=\"checkbox\"] {\n            width: auto;\n            margin: 0;\n          }\n        }\n        \n        small {\n          display: block;\n          font-size: 11px;\n          color: #666;\n          margin-top: 4px;\n          margin-left: 24px;\n        }\n      }\n    }\n    \n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n  }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n// Sub-Agent Creation Modal\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal {\n  background: white;\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n  \n  .modal-header {\n    padding: 20px 24px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    \n    h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    \n    .close-btn {\n      background: none;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      color: #666;\n      border-radius: 4px;\n      \n      &:hover {\n        background: #f8f9fa;\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-body {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n    \n    .error-message {\n      background: #f8d7da;\n      border: 1px solid #f5c6cb;\n      border-radius: 6px;\n      padding: 12px;\n      margin-bottom: 20px;\n      color: #721c24;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      i {\n        color: #dc3545;\n      }\n    }\n    \n    .form-group {\n      margin-bottom: 20px;\n      \n      label {\n        display: block;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 8px;\n      }\n      \n      .form-input, .form-textarea {\n        width: 100%;\n        padding: 12px;\n        border: 1px solid #ddd;\n        border-radius: 6px;\n        font-size: 14px;\n        background: white;\n        box-sizing: border-box;\n        transition: border-color 0.2s;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n        \n        &::placeholder {\n          color: #999;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 80px;\n        font-family: inherit;\n      }\n    }\n    \n    .parent-info {\n      background: #f8f9fa;\n      border: 1px solid #e9ecef;\n      border-radius: 6px;\n      padding: 12px;\n      font-size: 14px;\n      color: #666;\n      \n      strong {\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-footer {\n    padding: 20px 24px;\n    border-top: 1px solid #e9ecef;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    \n    .cancel-btn, .create-btn {\n      padding: 10px 20px;\n      border: 1px solid;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n    \n    .cancel-btn {\n      background: white;\n      border-color: #ddd;\n      color: #666;\n      \n      &:hover:not(:disabled) {\n        background: #f8f9fa;\n        border-color: #ccc;\n      }\n    }\n    \n    .create-btn {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      &:hover:not(:disabled) {\n        background: #1976d2;\n        border-color: #1976d2;\n      }\n      \n      .loading-spinner-sm {\n        width: 14px;\n        height: 14px;\n        border: 2px solid transparent;\n        border-top-color: currentColor;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n      }\n    }\n  }\n}"] }]
+        args: [{ selector: 'mj-agent-editor', template: "<div class=\"agent-editor-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  <!-- Header -->\n  <div class=\"editor-header\">\n    <div class=\"header-info\">\n      <div class=\"header-actions\">\n        <button \n          type=\"button\" \n          class=\"back-btn\"\n          (click)=\"closeEditor()\"\n          title=\"Back to Agent List\">\n          <i class=\"fa-solid fa-arrow-left\"></i>\n          Back to Agents\n        </button>\n        \n        @if (currentAgent) {\n          <button \n            type=\"button\" \n            class=\"open-btn\"\n            (click)=\"openCurrentAgentRecord()\"\n            title=\"Open Agent Record\">\n            <i class=\"fa-solid fa-external-link\"></i>\n            Open Record\n          </button>\n        }\n      </div>\n      \n      @if (currentAgent) {\n        <div class=\"agent-breadcrumb\">\n          <h2>{{ currentAgent.Name }}</h2>\n          @if (currentAgent.Parent) {\n            <span class=\"breadcrumb-item\">\n              <i class=\"fa-solid fa-chevron-right\"></i>\n              Child of {{ currentAgent.Parent }}\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Navigation -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-navigation\">\n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'hierarchy'\"\n        (click)=\"setActiveTab('hierarchy')\">\n        <i class=\"fa-solid fa-sitemap\"></i>\n        Hierarchy\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'prompts'\"\n        (click)=\"setActiveTab('prompts')\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        Prompts\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'properties'\"\n        (click)=\"setActiveTab('properties')\">\n        <i class=\"fa-solid fa-cog\"></i>\n        Properties\n      </button>\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n        </div>\n        <div class=\"loading-text\">Loading agent data...</div>\n      </div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <h3>Error Loading Agent</h3>\n        <p>{{ error }}</p>\n        <button class=\"retry-btn\" (click)=\"loadAgentData()\">\n          <i class=\"fa-solid fa-retry\"></i>\n          Retry\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Tab Content -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-content\" mjFillContainer>\n      \n      <!-- Hierarchy Tab -->\n      @if (activeTab === 'hierarchy') {\n        <div class=\"hierarchy-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-sitemap\"></i>\n              Agent Hierarchy\n            </h3>\n            \n            <div class=\"hierarchy-controls\">\n              <div class=\"zoom-controls\">\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomIn()\"\n                  title=\"Zoom In\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomOut()\"\n                  title=\"Zoom Out\">\n                  <i class=\"fa-solid fa-minus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"resetZoom()\"\n                  title=\"Reset Zoom\">\n                  <i class=\"fa-solid fa-expand\"></i>\n                </button>\n              </div>\n              \n              <div class=\"hierarchy-legend\">\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-0\"></div>\n                  <span>Root</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-1\"></div>\n                  <span>Level 1</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-2\"></div>\n                  <span>Level 2+</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <div class=\"hierarchy-chart\" #hierarchyChart mjFillContainer>\n            <!-- Help text overlay -->\n            @if (hierarchyData && (hasChildren() || hasParent())) {\n              <div class=\"chart-help\">\n                <small>\n                  <i class=\"fa-solid fa-hand-pointer\"></i>\n                  Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate\n                </small>\n              </div>\n            }\n            \n            <!-- Empty state for hierarchy -->\n            @if (!hierarchyData || (!hasChildren() && !hasParent())) {\n              <div class=\"empty-hierarchy\">\n                <i class=\"fa-solid fa-sitemap\"></i>\n                <h4>No Agent Hierarchy</h4>\n                <p>This agent doesn't have any parent or child agents yet.</p>\n                <button class=\"create-subagent-btn\" (click)=\"openCreateSubAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create Sub-Agent\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Prompts Tab -->\n      @if (activeTab === 'prompts') {\n        <div class=\"prompts-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-comment-dots\"></i>\n              Agent Prompts\n            </h3>\n            <button class=\"add-prompt-btn\" title=\"Add New Prompt\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Add Prompt\n            </button>\n          </div>\n          \n          <div class=\"prompts-list\">\n            @if (agentPrompts.length === 0) {\n              <div class=\"empty-prompts\">\n                <i class=\"fa-solid fa-comment-dots\"></i>\n                <p>No prompts configured for this agent</p>\n                <button class=\"add-first-prompt-btn\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Add First Prompt\n                </button>\n              </div>\n            } @else {\n              @for (prompt of agentPrompts; track prompt.id) {\n                <div class=\"prompt-card\">\n                  <div class=\"prompt-header\">\n                    <div class=\"prompt-info\">\n                      <h4>{{ prompt.name }}</h4>\n                      <span class=\"prompt-type\">{{ prompt.type }}</span>\n                    </div>\n                    <div class=\"prompt-actions\">\n                      <button class=\"action-btn\" title=\"Edit Prompt\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                      </button>\n                      <button class=\"action-btn danger\" title=\"Delete Prompt\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"prompt-content\">\n                    <p>{{ prompt.content }}</p>\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Properties Tab -->\n      @if (activeTab === 'properties') {\n        <div class=\"properties-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-cog\"></i>\n              Agent Properties\n            </h3>\n            <button class=\"save-btn\" title=\"Save Changes\">\n              <i class=\"fa-solid fa-save\"></i>\n              Save\n            </button>\n          </div>\n          \n          <div class=\"properties-form\">\n            <div class=\"form-group\">\n              <label>Name</label>\n              <input \n                type=\"text\" \n                class=\"form-input\"\n                [value]=\"currentAgent.Name\"\n                placeholder=\"Agent name\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Description</label>\n              <textarea \n                class=\"form-textarea\"\n                [value]=\"currentAgent.Description\"\n                placeholder=\"Agent description\"\n                rows=\"3\"></textarea>\n            </div>\n            \n            <div class=\"form-row\">\n              <div class=\"form-group\">\n                <label>Execution Mode</label>\n                <select class=\"form-select\" [value]=\"currentAgent.ExecutionMode\">\n                  <option value=\"Sequential\">Sequential</option>\n                  <option value=\"Parallel\">Parallel</option>\n                </select>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Execution Order</label>\n                <input \n                  type=\"number\" \n                  class=\"form-input\"\n                  [value]=\"currentAgent.ExecutionOrder\"\n                  min=\"0\">\n              </div>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.ExposeAsAction\">\n                <span class=\"checkmark\"></span>\n                Expose as Action\n              </label>\n              <small>Allow this agent to be used as an action by other agents</small>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.EnableContextCompression\">\n                <span class=\"checkmark\"></span>\n                Enable Context Compression\n              </label>\n              <small>Automatically compress conversation context when threshold is reached</small>\n            </div>\n            \n            @if (currentAgent.EnableContextCompression) {\n              <div class=\"form-row\">\n                <div class=\"form-group\">\n                  <label>Message Threshold</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageThreshold\"\n                    min=\"1\"\n                    placeholder=\"Number of messages\">\n                </div>\n                \n                <div class=\"form-group\">\n                  <label>Retention Count</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageRetentionCount\"\n                    min=\"0\"\n                    placeholder=\"Messages to keep\">\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Sub-Agent Creation Modal -->\n  @if (showCreateSubAgent) {\n    <div class=\"modal-overlay\" (click)=\"closeCreateSubAgent()\">\n      <div class=\"create-subagent-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>\n            <i class=\"fa-solid fa-plus\"></i>\n            Create Sub-Agent\n          </h3>\n          <button class=\"close-btn\" (click)=\"closeCreateSubAgent()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        \n        <div class=\"modal-body\">\n          @if (error) {\n            <div class=\"error-message\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              {{ error }}\n            </div>\n          }\n          \n          <div class=\"form-group\">\n            <label>Agent Name *</label>\n            <input \n              type=\"text\" \n              class=\"form-input\"\n              [(ngModel)]=\"newSubAgentName\"\n              placeholder=\"Enter agent name...\"\n              maxlength=\"255\"\n              [disabled]=\"isLoading\">\n          </div>\n          \n          <div class=\"form-group\">\n            <label>Description</label>\n            <textarea \n              class=\"form-textarea\"\n              [(ngModel)]=\"newSubAgentDescription\"\n              placeholder=\"Describe what this sub-agent will do...\"\n              rows=\"4\"\n              [disabled]=\"isLoading\"></textarea>\n          </div>\n          \n          <div class=\"parent-info\">\n            <strong>Parent Agent:</strong> {{ currentAgent?.Name }}\n          </div>\n        </div>\n        \n        <div class=\"modal-footer\">\n          <button \n            class=\"cancel-btn\" \n            (click)=\"closeCreateSubAgent()\"\n            [disabled]=\"isLoading\">\n            Cancel\n          </button>\n          <button \n            class=\"create-btn\" \n            (click)=\"createSubAgent()\"\n            [disabled]=\"!newSubAgentName.trim() || isLoading\">\n            @if (isLoading) {\n              <span class=\"loading-spinner-sm\"></span>\n              Creating...\n            } @else {\n              <i class=\"fa-solid fa-plus\"></i>\n              Create Sub-Agent\n            }\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: ["@use \"../../../../../../../dist/packages/Angular/Explorer/explorer-core/src/generic/generic-browse-list.component\";\n\n.agent-editor-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n.editor-header {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    \n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n    \n    .back-btn, .open-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      text-decoration: none;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        border-color: #ccc;\n      }\n    }\n    \n    .back-btn {\n      background: #f8f9fa;\n      color: #666;\n      \n      &:hover {\n        background: #e9ecef;\n        color: #333;\n      }\n    }\n    \n    .open-btn {\n      background: #007bff;\n      color: white;\n      \n      &:hover {\n        background: #0056b3;\n      }\n    }\n    \n    .agent-breadcrumb {\n      h2 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #333;\n      }\n      \n      .breadcrumb-item {\n        font-size: 14px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-top: 4px;\n      }\n    }\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 12px;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #f8f9fa;\n        border-color: #2196f3;\n        color: #2196f3;\n      }\n      \n      &.active {\n        background: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n    }\n  }\n}\n\n// Tab Navigation\n.tab-navigation {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  \n  .tab-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #666;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    \n    &:hover {\n      color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    i {\n      font-size: 16px;\n    }\n  }\n}\n\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container, .error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  \n  .loading-content, .error-content {\n    text-align: center;\n    \n    .loading-spinner {\n      position: relative;\n      width: 60px;\n      height: 60px;\n      margin: 0 auto 20px;\n    }\n    \n    .spinner-ring {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border: 3px solid transparent;\n      border-radius: 50%;\n      animation: spin 1.5s linear infinite;\n      \n      &:nth-child(1) {\n        border-top-color: #2196f3;\n        animation-delay: 0s;\n      }\n      \n      &:nth-child(2) {\n        border-top-color: #9c27b0;\n        animation-delay: 0.3s;\n        transform: scale(0.8);\n      }\n      \n      &:nth-child(3) {\n        border-top-color: #ff6b35;\n        animation-delay: 0.6s;\n        transform: scale(0.6);\n      }\n    }\n    \n    .loading-text {\n      font-size: 16px;\n      color: #666;\n    }\n    \n    i {\n      font-size: 48px;\n      color: #dc3545;\n      margin-bottom: 16px;\n    }\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #333;\n    }\n    \n    p {\n      margin: 0 0 16px 0;\n      color: #666;\n    }\n    \n    .retry-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #dc3545;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      cursor: pointer;\n      \n      &:hover {\n        background: #c82333;\n      }\n    }\n  }\n}\n\n.editor-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter, .bottom-splitter {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n// Hierarchy Section\n.hierarchy-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .hierarchy-controls {\n      display: flex;\n      align-items: center;\n      gap: 20px;\n      \n      .zoom-controls {\n        display: flex;\n        gap: 4px;\n        \n        .zoom-btn {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          background: white;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          color: #666;\n          cursor: pointer;\n          transition: all 0.2s;\n          \n          &:hover {\n            background: #f8f9fa;\n            border-color: #2196f3;\n            color: #2196f3;\n          }\n          \n          i {\n            font-size: 12px;\n          }\n        }\n      }\n      \n      .hierarchy-legend {\n        display: flex;\n        gap: 16px;\n        \n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          font-size: 12px;\n          color: #666;\n          \n          .legend-rect {\n            width: 20px;\n            height: 12px;\n            border-radius: 2px;\n            border: 1px solid;\n            \n            &.level-0 {\n              background: #1976d2;\n              border-color: #1565c0;\n            }\n            \n            &.level-1 {\n              background: #388e3c;\n              border-color: #2e7d32;\n            }\n            \n            &.level-2 {\n              background: #f57c00;\n              border-color: #ef6c00;\n            }\n          }\n        }\n      }\n    }\n  }\n  \n  .hierarchy-chart {\n    flex: 1;\n    min-height: 300px;\n    overflow: hidden;\n    position: relative;\n    \n    .chart-help {\n      position: absolute;\n      bottom: 10px;\n      left: 10px;\n      background: rgba(255, 255, 255, 0.9);\n      padding: 6px 10px;\n      border-radius: 4px;\n      border: 1px solid #e0e0e0;\n      z-index: 10;\n      \n      small {\n        font-size: 11px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        \n        i {\n          color: #2196f3;\n        }\n      }\n    }\n    \n    .empty-hierarchy {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 40px 20px;\n      text-align: center;\n      color: #666;\n      \n      i {\n        font-size: 64px;\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h4 {\n        margin: 0 0 12px 0;\n        font-size: 18px;\n        color: #333;\n      }\n      \n      p {\n        margin: 0 0 24px 0;\n        font-size: 14px;\n        color: #666;\n        line-height: 1.5;\n      }\n      \n      .create-subagent-btn {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        background: #2196f3;\n        border: none;\n        border-radius: 6px;\n        color: white;\n        font-size: 14px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: background 0.2s;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n  }\n  \n}\n\n// Prompts Section\n.prompts-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #f0f0f0;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .add-prompt-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #2196f3;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #1976d2;\n      }\n    }\n  }\n  \n  .prompts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 20px;\n    \n    .empty-prompts {\n      text-align: center;\n      padding: 40px 20px;\n      color: #666;\n      \n      i {\n        font-size: 48px;\n        margin-bottom: 16px;\n      }\n      \n      p {\n        margin: 0 0 20px 0;\n        font-size: 14px;\n      }\n      \n      .add-first-prompt-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 16px;\n        background: #2196f3;\n        border: none;\n        border-radius: 4px;\n        color: white;\n        cursor: pointer;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n    \n    .prompt-card {\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      margin-bottom: 12px;\n      \n      .prompt-header {\n        padding: 12px 16px;\n        border-bottom: 1px solid #e9ecef;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .prompt-info {\n          h4 {\n            margin: 0 0 4px 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #333;\n          }\n          \n          .prompt-type {\n            font-size: 11px;\n            padding: 2px 6px;\n            background: #007bff;\n            color: white;\n            border-radius: 3px;\n            text-transform: uppercase;\n          }\n        }\n        \n        .prompt-actions {\n          display: flex;\n          gap: 4px;\n          \n          .action-btn {\n            padding: 4px 8px;\n            background: none;\n            border: 1px solid #e0e0e0;\n            border-radius: 3px;\n            color: #666;\n            cursor: pointer;\n            font-size: 12px;\n            \n            &:hover {\n              background: #f0f0f0;\n              border-color: #ccc;\n            }\n            \n            &.danger:hover {\n              background: #dc3545;\n              border-color: #dc3545;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .prompt-content {\n        padding: 12px 16px;\n        \n        p {\n          margin: 0;\n          font-size: 12px;\n          color: #666;\n          line-height: 1.4;\n        }\n      }\n    }\n  }\n}\n\n// Properties Section\n.properties-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .save-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #28a745;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #218838;\n      }\n    }\n  }\n  \n  .properties-form {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    \n    .form-group {\n      margin-bottom: 16px;\n      \n      label {\n        display: block;\n        font-size: 12px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 4px;\n      }\n      \n      .form-input, .form-select, .form-textarea {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-size: 13px;\n        background: white;\n        box-sizing: border-box;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 60px;\n      }\n      \n      &.checkbox-group {\n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 500;\n          \n          input[type=\"checkbox\"] {\n            width: auto;\n            margin: 0;\n          }\n        }\n        \n        small {\n          display: block;\n          font-size: 11px;\n          color: #666;\n          margin-top: 4px;\n          margin-left: 24px;\n        }\n      }\n    }\n    \n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n  }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n// Sub-Agent Creation Modal\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal {\n  background: white;\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n  \n  .modal-header {\n    padding: 20px 24px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    \n    h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    \n    .close-btn {\n      background: none;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      color: #666;\n      border-radius: 4px;\n      \n      &:hover {\n        background: #f8f9fa;\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-body {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n    \n    .error-message {\n      background: #f8d7da;\n      border: 1px solid #f5c6cb;\n      border-radius: 6px;\n      padding: 12px;\n      margin-bottom: 20px;\n      color: #721c24;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      i {\n        color: #dc3545;\n      }\n    }\n    \n    .form-group {\n      margin-bottom: 20px;\n      \n      label {\n        display: block;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 8px;\n      }\n      \n      .form-input, .form-textarea {\n        width: 100%;\n        padding: 12px;\n        border: 1px solid #ddd;\n        border-radius: 6px;\n        font-size: 14px;\n        background: white;\n        box-sizing: border-box;\n        transition: border-color 0.2s;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n        \n        &::placeholder {\n          color: #999;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 80px;\n        font-family: inherit;\n      }\n    }\n    \n    .parent-info {\n      background: #f8f9fa;\n      border: 1px solid #e9ecef;\n      border-radius: 6px;\n      padding: 12px;\n      font-size: 14px;\n      color: #666;\n      \n      strong {\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-footer {\n    padding: 20px 24px;\n    border-top: 1px solid #e9ecef;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    \n    .cancel-btn, .create-btn {\n      padding: 10px 20px;\n      border: 1px solid;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n    \n    .cancel-btn {\n      background: white;\n      border-color: #ddd;\n      color: #666;\n      \n      &:hover:not(:disabled) {\n        background: #f8f9fa;\n        border-color: #ccc;\n      }\n    }\n    \n    .create-btn {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      &:hover:not(:disabled) {\n        background: #1976d2;\n        border-color: #1976d2;\n      }\n      \n      .loading-spinner-sm {\n        width: 14px;\n        height: 14px;\n        border: 2px solid transparent;\n        border-top-color: currentColor;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n      }\n    }\n  }\n}"] }]
     }], null, { agentId: [{
             type: Input
         }], close: [{
             type: Output
         }], openAgent: [{
             type: Output
+        }], openEntityRecord: [{
+            type: Output
         }], hierarchyChartRef: [{
             type: ViewChild,
             args: ['hierarchyChart', { static: false }]