@memberjunction/ng-dashboards 2.121.0 → 2.122.0

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

@@ -3,6 +3,7 @@ import { RunView, Metadata, LogError, LogStatus } from '@memberjunction/core';
 import * as d3 from 'd3';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-shared-generic";
 const _c0 = ["hierarchyChart"];
 const _forTrack0 = ($index, $item) => $item.id;
 function AgentEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
@@ -63,26 +64,23 @@ function AgentEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("active", ctx_r1.activeTab === "properties");
 } }
 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.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "mj-loading", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 25);
-    i0.ɵɵtext(7, "Loading agent data...");
-    i0.ɵɵelementEnd()()();
 } }
 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(0, "div", 11)(1, "div", 23);
+    i0.ɵɵelement(2, "i", 24);
     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", 28);
+    i0.ɵɵelementStart(7, "button", 25);
     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.ɵɵelement(8, "i", 26);
     i0.ɵɵtext(9, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -91,14 +89,14 @@ function AgentEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
 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.ɵɵelementStart(0, "div", 45)(1, "small");
+    i0.ɵɵelement(2, "i", 47);
     i0.ɵɵtext(3, " Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate ");
     i0.ɵɵelementEnd()();
 } }
 function AgentEditorComponent_Conditional_12_Conditional_1_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵelementStart(0, "div", 46);
     i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Agent Hierarchy");
@@ -106,47 +104,47 @@ function AgentEditorComponent_Conditional_12_Conditional_1_Conditional_29_Templa
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "This agent doesn't have any parent or child agents yet.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 51);
+    i0.ɵɵelementStart(6, "button", 48);
     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.ɵɵelement(7, "i", 34);
     i0.ɵɵtext(8, " Create Sub-Agent ");
     i0.ɵɵelementEnd()();
 } }
 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.ɵɵelementStart(0, "div", 27)(1, "div", 30)(2, "h3");
     i0.ɵɵelement(3, "i", 19);
     i0.ɵɵtext(4, " Agent Hierarchy ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 34)(6, "div", 35)(7, "button", 36);
+    i0.ɵɵelementStart(5, "div", 31)(6, "div", 32)(7, "button", 33);
     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.ɵɵelement(8, "i", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 38);
+    i0.ɵɵelementStart(9, "button", 35);
     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.ɵɵelement(10, "i", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 40);
+    i0.ɵɵelementStart(11, "button", 37);
     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.ɵɵelement(12, "i", 38);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 42)(14, "div", 43);
-    i0.ɵɵelement(15, "div", 44);
+    i0.ɵɵelementStart(13, "div", 39)(14, "div", 40);
+    i0.ɵɵelement(15, "div", 41);
     i0.ɵɵelementStart(16, "span");
     i0.ɵɵtext(17, "Root");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 43);
-    i0.ɵɵelement(19, "div", 45);
+    i0.ɵɵelementStart(18, "div", 40);
+    i0.ɵɵelement(19, "div", 42);
     i0.ɵɵelementStart(20, "span");
     i0.ɵɵtext(21, "Level 1");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 43);
-    i0.ɵɵelement(23, "div", 46);
+    i0.ɵɵelementStart(22, "div", 40);
+    i0.ɵɵelement(23, "div", 43);
     i0.ɵɵelementStart(24, "span");
     i0.ɵɵtext(25, "Level 2+");
     i0.ɵɵelementEnd()()()()();
-    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.ɵɵelementStart(26, "div", 44, 0);
+    i0.ɵɵtemplate(28, AgentEditorComponent_Conditional_12_Conditional_1_Conditional_28_Template, 4, 0, "div", 45)(29, AgentEditorComponent_Conditional_12_Conditional_1_Conditional_29_Template, 9, 0, "div", 46);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -156,30 +154,30 @@ function AgentEditorComponent_Conditional_12_Conditional_1_Template(rf, ctx) { i
     i0.ɵɵconditional(!ctx_r1.hierarchyData || !ctx_r1.hasChildren() && !ctx_r1.hasParent() ? 29 : -1);
 } }
 function AgentEditorComponent_Conditional_12_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵelement(1, "i", 20);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No prompts configured for this agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 55);
-    i0.ɵɵelement(5, "i", 37);
+    i0.ɵɵelementStart(4, "button", 52);
+    i0.ɵɵelement(5, "i", 34);
     i0.ɵɵtext(6, " Add First Prompt ");
     i0.ɵɵelementEnd()();
 } }
 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.ɵɵelementStart(0, "div", 53)(1, "div", 54)(2, "div", 55)(3, "h4");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 59);
+    i0.ɵɵelementStart(5, "span", 56);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 60)(8, "button", 61);
-    i0.ɵɵelement(9, "i", 62);
+    i0.ɵɵelementStart(7, "div", 57)(8, "button", 58);
+    i0.ɵɵelement(9, "i", 59);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 63);
-    i0.ɵɵelement(11, "i", 64);
+    i0.ɵɵelementStart(10, "button", 60);
+    i0.ɵɵelement(11, "i", 61);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 65)(13, "p");
+    i0.ɵɵelementStart(12, "div", 62)(13, "p");
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -192,22 +190,22 @@ function AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_For_1_
     i0.ɵɵtextInterpolate(prompt_r7.content);
 } }
 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);
+    i0.ɵɵrepeaterCreate(0, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_For_1_Template, 15, 3, "div", 53, _forTrack0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵrepeater(ctx_r1.agentPrompts);
 } }
 function AgentEditorComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "div", 33)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 30)(2, "h3");
     i0.ɵɵelement(3, "i", 20);
     i0.ɵɵtext(4, " Agent Prompts ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 52);
-    i0.ɵɵelement(6, "i", 37);
+    i0.ɵɵelementStart(5, "button", 49);
+    i0.ɵɵelement(6, "i", 34);
     i0.ɵɵtext(7, " Add Prompt ");
     i0.ɵɵelementEnd()();
-    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.ɵɵelementStart(8, "div", 50);
+    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_9_Template, 7, 0, "div", 51)(10, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_Template, 2, 0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -215,15 +213,15 @@ function AgentEditorComponent_Conditional_12_Conditional_2_Template(rf, ctx) { i
     i0.ɵɵconditional(ctx_r1.agentPrompts.length === 0 ? 9 : 10);
 } }
 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.ɵɵelementStart(0, "div", 69)(1, "div", 66)(2, "label");
     i0.ɵɵtext(3, "Message Threshold");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "input", 81);
+    i0.ɵɵelement(4, "input", 78);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 69)(6, "label");
+    i0.ɵɵelementStart(5, "div", 66)(6, "label");
     i0.ɵɵtext(7, "Retention Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(8, "input", 82);
+    i0.ɵɵelement(8, "input", 79);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -233,53 +231,53 @@ function AgentEditorComponent_Conditional_12_Conditional_3_Conditional_44_Templa
     i0.ɵɵproperty("value", ctx_r1.currentAgent.ContextCompressionMessageRetentionCount);
 } }
 function AgentEditorComponent_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 33)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30)(2, "h3");
     i0.ɵɵelement(3, "i", 21);
     i0.ɵɵtext(4, " Agent Properties ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 66);
-    i0.ɵɵelement(6, "i", 67);
+    i0.ɵɵelementStart(5, "button", 63);
+    i0.ɵɵelement(6, "i", 64);
     i0.ɵɵtext(7, " Save ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 68)(9, "div", 69)(10, "label");
+    i0.ɵɵelementStart(8, "div", 65)(9, "div", 66)(10, "label");
     i0.ɵɵtext(11, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(12, "input", 70);
+    i0.ɵɵelement(12, "input", 67);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 69)(14, "label");
+    i0.ɵɵelementStart(13, "div", 66)(14, "label");
     i0.ɵɵtext(15, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(16, "textarea", 71);
+    i0.ɵɵelement(16, "textarea", 68);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 72)(18, "div", 69)(19, "label");
+    i0.ɵɵelementStart(17, "div", 69)(18, "div", 66)(19, "label");
     i0.ɵɵtext(20, "Execution Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "select", 73)(22, "option", 74);
+    i0.ɵɵelementStart(21, "select", 70)(22, "option", 71);
     i0.ɵɵtext(23, "Sequential");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "option", 75);
+    i0.ɵɵelementStart(24, "option", 72);
     i0.ɵɵtext(25, "Parallel");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(26, "div", 69)(27, "label");
+    i0.ɵɵelementStart(26, "div", 66)(27, "label");
     i0.ɵɵtext(28, "Execution Order");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(29, "input", 76);
+    i0.ɵɵelement(29, "input", 73);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 77)(31, "label", 78);
-    i0.ɵɵelement(32, "input", 79)(33, "span", 80);
+    i0.ɵɵelementStart(30, "div", 74)(31, "label", 75);
+    i0.ɵɵelement(32, "input", 76)(33, "span", 77);
     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", 77)(38, "label", 78);
-    i0.ɵɵelement(39, "input", 79)(40, "span", 80);
+    i0.ɵɵelementStart(37, "div", 74)(38, "label", 75);
+    i0.ɵɵelement(39, "input", 76)(40, "span", 77);
     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_12_Conditional_3_Conditional_44_Template, 9, 2, "div", 72);
+    i0.ɵɵtemplate(44, AgentEditorComponent_Conditional_12_Conditional_3_Conditional_44_Template, 9, 2, "div", 69);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -300,7 +298,7 @@ function AgentEditorComponent_Conditional_12_Conditional_3_Template(rf, ctx) { i
 } }
 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.ɵɵtemplate(1, AgentEditorComponent_Conditional_12_Conditional_1_Template, 30, 2, "div", 27)(2, AgentEditorComponent_Conditional_12_Conditional_2_Template, 11, 1, "div", 28)(3, AgentEditorComponent_Conditional_12_Conditional_3_Template, 45, 7, "div", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -312,8 +310,8 @@ function AgentEditorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.activeTab === "properties" ? 3 : -1);
 } }
 function AgentEditorComponent_Conditional_13_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89);
-    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵelement(1, "i", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -322,51 +320,51 @@ function AgentEditorComponent_Conditional_13_Conditional_9_Template(rf, ctx) { i
     i0.ɵɵtextInterpolate1(" ", ctx_r1.error, " ");
 } }
 function AgentEditorComponent_Conditional_13_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 96);
+    i0.ɵɵelement(0, "span", 93);
     i0.ɵɵtext(1, " Creating... ");
 } }
 function AgentEditorComponent_Conditional_13_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 37);
+    i0.ɵɵelement(0, "i", 34);
     i0.ɵɵtext(1, " Create Sub-Agent ");
 } }
 function AgentEditorComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelementStart(0, "div", 80);
     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.ɵɵelementStart(1, "div", 81);
     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.ɵɵelementStart(2, "div", 82)(3, "h3");
+    i0.ɵɵelement(4, "i", 34);
     i0.ɵɵtext(5, " Create Sub-Agent ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 86);
+    i0.ɵɵelementStart(6, "button", 83);
     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.ɵɵelement(7, "i", 84);
     i0.ɵɵelementEnd()();
-    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.ɵɵelementStart(8, "div", 85);
+    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_13_Conditional_9_Template, 3, 1, "div", 86);
+    i0.ɵɵelementStart(10, "div", 66)(11, "label");
     i0.ɵɵtext(12, "Agent Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "input", 90);
+    i0.ɵɵelementStart(13, "input", 87);
     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", 69)(15, "label");
+    i0.ɵɵelementStart(14, "div", 66)(15, "label");
     i0.ɵɵtext(16, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "textarea", 91);
+    i0.ɵɵelementStart(17, "textarea", 88);
     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", 92)(19, "strong");
+    i0.ɵɵelementStart(18, "div", 89)(19, "strong");
     i0.ɵɵtext(20, "Parent Agent:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 93)(23, "button", 94);
+    i0.ɵɵelementStart(22, "div", 90)(23, "button", 91);
     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", 95);
+    i0.ɵɵelementStart(25, "button", 92);
     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()()()();
@@ -816,7 +814,7 @@ export class AgentEditorComponent {
         } 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: 7, consts: [["hierarchyChart", ""], [1, "agent-editor-container"], [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"], [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"], [1, "hierarchy-section"], [1, "prompts-section"], [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"], [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) {
+        } }, inputs: { agentId: "agentId" }, outputs: { close: "close", openAgent: "openAgent", openEntityRecord: "openEntityRecord" }, decls: 14, vars: 7, consts: [["hierarchyChart", ""], [1, "agent-editor-container"], [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"], [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"], ["text", "Loading agent data...", "size", "large"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "retry-btn", 3, "click"], [1, "fa-solid", "fa-retry"], [1, "hierarchy-section"], [1, "prompts-section"], [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"], [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);
@@ -826,7 +824,7 @@ export class AgentEditorComponent {
             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.ɵɵtemplate(9, AgentEditorComponent_Conditional_9_Template, 10, 6, "div", 9)(10, AgentEditorComponent_Conditional_10_Template, 2, 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.ɵɵadvance(7);
@@ -843,11 +841,11 @@ export class AgentEditorComponent {
             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], 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}"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NgControlStatus, i1.MaxLengthValidator, i1.NgModel, i2.LoadingComponent], styles: [".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.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%], .editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%] {\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.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover, .editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%]:hover {\n  border-color: #ccc;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  color: #666;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .back-btn[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n  color: #333;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%] {\n  background: #007bff;\n  color: white;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .open-btn[_ngcontent-%COMP%]:hover {\n  background: #0056b3;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .agent-breadcrumb[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #333;\n}\n.editor-header[_ngcontent-%COMP%]   .header-info[_ngcontent-%COMP%]   .agent-breadcrumb[_ngcontent-%COMP%]   .breadcrumb-item[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 4px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn[_ngcontent-%COMP%] {\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.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #2196f3;\n  color: #2196f3;\n}\n.editor-header[_ngcontent-%COMP%]   .header-controls[_ngcontent-%COMP%]   .control-btn.active[_ngcontent-%COMP%] {\n  background: #2196f3;\n  border-color: #2196f3;\n  color: white;\n}\n\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-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\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.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: #2196f3;\n  background: #f8f9fa;\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #f8f9fa;\n}\n.tab-navigation[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\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-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 20px;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%] {\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.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-top-color: #2196f3;\n  animation-delay: 0s;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-top-color: #9c27b0;\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3), .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-top-color: #ff6b35;\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .loading-text[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #666;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: #dc3545;\n  margin-bottom: 16px;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  color: #333;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  color: #666;\n}\n.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%] {\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.loading-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .loading-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .error-container[_ngcontent-%COMP%]   .loading-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover, .error-container[_ngcontent-%COMP%]   .error-content[_ngcontent-%COMP%]   .retry-btn[_ngcontent-%COMP%]:hover {\n  background: #c82333;\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.main-splitter[_ngcontent-%COMP%]   .k-pane[_ngcontent-%COMP%], .bottom-splitter[_ngcontent-%COMP%]   .k-pane[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.hierarchy-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\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.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%] {\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.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  border-color: #2196f3;\n  color: #2196f3;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .zoom-controls[_ngcontent-%COMP%]   .zoom-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #666;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect[_ngcontent-%COMP%] {\n  width: 20px;\n  height: 12px;\n  border-radius: 2px;\n  border: 1px solid;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-0[_ngcontent-%COMP%] {\n  background: #1976d2;\n  border-color: #1565c0;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-1[_ngcontent-%COMP%] {\n  background: #388e3c;\n  border-color: #2e7d32;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .hierarchy-controls[_ngcontent-%COMP%]   .hierarchy-legend[_ngcontent-%COMP%]   .legend-item[_ngcontent-%COMP%]   .legend-rect.level-2[_ngcontent-%COMP%] {\n  background: #f57c00;\n  border-color: #ef6c00;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 300px;\n  overflow: hidden;\n  position: relative;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%] {\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.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .chart-help[_ngcontent-%COMP%]   small[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%] {\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.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 18px;\n  color: #333;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 24px 0;\n  font-size: 14px;\n  color: #666;\n  line-height: 1.5;\n}\n.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   .create-subagent-btn[_ngcontent-%COMP%] {\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.hierarchy-section[_ngcontent-%COMP%]   .hierarchy-chart[_ngcontent-%COMP%]   .empty-hierarchy[_ngcontent-%COMP%]   .create-subagent-btn[_ngcontent-%COMP%]:hover {\n  background: #1976d2;\n}\n\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.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\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.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .add-prompt-btn[_ngcontent-%COMP%] {\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.prompts-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .add-prompt-btn[_ngcontent-%COMP%]:hover {\n  background: #1976d2;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px 20px;\n  color: #666;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   .add-first-prompt-btn[_ngcontent-%COMP%] {\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.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .empty-prompts[_ngcontent-%COMP%]   .add-first-prompt-btn[_ngcontent-%COMP%]:hover {\n  background: #1976d2;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  margin-bottom: 12px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid #e9ecef;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-info[_ngcontent-%COMP%]   .prompt-type[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 6px;\n  background: #007bff;\n  color: white;\n  border-radius: 3px;\n  text-transform: uppercase;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\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.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-header[_ngcontent-%COMP%]   .prompt-actions[_ngcontent-%COMP%]   .action-btn.danger[_ngcontent-%COMP%]:hover {\n  background: #dc3545;\n  border-color: #dc3545;\n  color: white;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-content[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n}\n.prompts-section[_ngcontent-%COMP%]   .prompts-list[_ngcontent-%COMP%]   .prompt-card[_ngcontent-%COMP%]   .prompt-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: #666;\n  line-height: 1.4;\n}\n\n.properties-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n}\n.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\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.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .save-btn[_ngcontent-%COMP%] {\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.properties-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .save-btn[_ngcontent-%COMP%]:hover {\n  background: #218838;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%], .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%], .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\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.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]:focus, .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-select[_ngcontent-%COMP%]:focus, .properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #2196f3;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 60px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   .checkbox-label[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n  width: auto;\n  margin: 0;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-group.checkbox-group[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  color: #666;\n  margin-top: 4px;\n  margin-left: 24px;\n}\n.properties-section[_ngcontent-%COMP%]   .properties-form[_ngcontent-%COMP%]   .form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\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.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  border-bottom: 1px solid #e9ecef;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\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.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: #666;\n  border-radius: 4px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-header[_ngcontent-%COMP%]   .close-btn[_ngcontent-%COMP%]:hover {\n  background: #f8f9fa;\n  color: #333;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%] {\n  padding: 24px;\n  flex: 1;\n  overflow-y: auto;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\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.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%], .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\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.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]:focus, .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #2196f3;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%]::placeholder, .create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%]::placeholder {\n  color: #999;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .form-textarea[_ngcontent-%COMP%] {\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .parent-info[_ngcontent-%COMP%] {\n  background: #f8f9fa;\n  border: 1px solid #e9ecef;\n  border-radius: 6px;\n  padding: 12px;\n  font-size: 14px;\n  color: #666;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-body[_ngcontent-%COMP%]   .parent-info[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: #333;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%] {\n  padding: 20px 24px;\n  border-top: 1px solid #e9ecef;\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%], .create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%] {\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.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%]:disabled, .create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%] {\n  background: white;\n  border-color: #ddd;\n  color: #666;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .cancel-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #ccc;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%] {\n  background: #2196f3;\n  border-color: #2196f3;\n  color: white;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #1976d2;\n  border-color: #1976d2;\n}\n.create-subagent-modal[_ngcontent-%COMP%]   .modal-footer[_ngcontent-%COMP%]   .create-btn[_ngcontent-%COMP%]   .loading-spinner-sm[_ngcontent-%COMP%] {\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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentEditorComponent, [{
         type: Component,
-        args: [{ selector: 'mj-agent-editor', template: "<div class=\"agent-editor-container\">\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\" >\n      \n      <!-- Hierarchy Tab -->\n      @if (activeTab === 'hierarchy') {\n        <div class=\"hierarchy-section\" >\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 >\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\" >\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\" >\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}"] }]
+        args: [{ selector: 'mj-agent-editor', template: "<div class=\"agent-editor-container\">\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      <mj-loading text=\"Loading agent data...\" size=\"large\"></mj-loading>\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\" >\n      \n      <!-- Hierarchy Tab -->\n      @if (activeTab === 'hierarchy') {\n        <div class=\"hierarchy-section\" >\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 >\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\" >\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\" >\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: [".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.editor-header .header-info {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.editor-header .header-info .header-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.editor-header .header-info .back-btn, .editor-header .header-info .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.editor-header .header-info .back-btn:hover, .editor-header .header-info .open-btn:hover {\n  border-color: #ccc;\n}\n.editor-header .header-info .back-btn {\n  background: #f8f9fa;\n  color: #666;\n}\n.editor-header .header-info .back-btn:hover {\n  background: #e9ecef;\n  color: #333;\n}\n.editor-header .header-info .open-btn {\n  background: #007bff;\n  color: white;\n}\n.editor-header .header-info .open-btn:hover {\n  background: #0056b3;\n}\n.editor-header .header-info .agent-breadcrumb h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #333;\n}\n.editor-header .header-info .agent-breadcrumb .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.editor-header .header-controls {\n  display: flex;\n  gap: 8px;\n}\n.editor-header .header-controls .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.editor-header .header-controls .control-btn:hover {\n  background: #f8f9fa;\n  border-color: #2196f3;\n  color: #2196f3;\n}\n.editor-header .header-controls .control-btn.active {\n  background: #2196f3;\n  border-color: #2196f3;\n  color: white;\n}\n\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-navigation .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.tab-navigation .tab-btn:hover {\n  color: #2196f3;\n  background: #f8f9fa;\n}\n.tab-navigation .tab-btn.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #f8f9fa;\n}\n.tab-navigation .tab-btn i {\n  font-size: 16px;\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-container .loading-content, .loading-container .error-content, .error-container .loading-content, .error-container .error-content {\n  text-align: center;\n}\n.loading-container .loading-content .loading-spinner, .loading-container .error-content .loading-spinner, .error-container .loading-content .loading-spinner, .error-container .error-content .loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 20px;\n}\n.loading-container .loading-content .spinner-ring, .loading-container .error-content .spinner-ring, .error-container .loading-content .spinner-ring, .error-container .error-content .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.loading-container .loading-content .spinner-ring:nth-child(1), .loading-container .error-content .spinner-ring:nth-child(1), .error-container .loading-content .spinner-ring:nth-child(1), .error-container .error-content .spinner-ring:nth-child(1) {\n  border-top-color: #2196f3;\n  animation-delay: 0s;\n}\n.loading-container .loading-content .spinner-ring:nth-child(2), .loading-container .error-content .spinner-ring:nth-child(2), .error-container .loading-content .spinner-ring:nth-child(2), .error-container .error-content .spinner-ring:nth-child(2) {\n  border-top-color: #9c27b0;\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n.loading-container .loading-content .spinner-ring:nth-child(3), .loading-container .error-content .spinner-ring:nth-child(3), .error-container .loading-content .spinner-ring:nth-child(3), .error-container .error-content .spinner-ring:nth-child(3) {\n  border-top-color: #ff6b35;\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n.loading-container .loading-content .loading-text, .loading-container .error-content .loading-text, .error-container .loading-content .loading-text, .error-container .error-content .loading-text {\n  font-size: 16px;\n  color: #666;\n}\n.loading-container .loading-content i, .loading-container .error-content i, .error-container .loading-content i, .error-container .error-content i {\n  font-size: 48px;\n  color: #dc3545;\n  margin-bottom: 16px;\n}\n.loading-container .loading-content h3, .loading-container .error-content h3, .error-container .loading-content h3, .error-container .error-content h3 {\n  margin: 0 0 8px 0;\n  color: #333;\n}\n.loading-container .loading-content p, .loading-container .error-content p, .error-container .loading-content p, .error-container .error-content p {\n  margin: 0 0 16px 0;\n  color: #666;\n}\n.loading-container .loading-content .retry-btn, .loading-container .error-content .retry-btn, .error-container .loading-content .retry-btn, .error-container .error-content .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.loading-container .loading-content .retry-btn:hover, .loading-container .error-content .retry-btn:hover, .error-container .loading-content .retry-btn:hover, .error-container .error-content .retry-btn:hover {\n  background: #c82333;\n}\n\n.editor-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter, .bottom-splitter {\n  height: 100%;\n}\n.main-splitter .k-pane, .bottom-splitter .k-pane {\n  overflow: hidden;\n}\n\n.hierarchy-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n}\n.hierarchy-section .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.hierarchy-section .section-header 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.hierarchy-section .section-header .hierarchy-controls {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls {\n  display: flex;\n  gap: 4px;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .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.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn:hover {\n  background: #f8f9fa;\n  border-color: #2196f3;\n  color: #2196f3;\n}\n.hierarchy-section .section-header .hierarchy-controls .zoom-controls .zoom-btn i {\n  font-size: 12px;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend {\n  display: flex;\n  gap: 16px;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: #666;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect {\n  width: 20px;\n  height: 12px;\n  border-radius: 2px;\n  border: 1px solid;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-0 {\n  background: #1976d2;\n  border-color: #1565c0;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-1 {\n  background: #388e3c;\n  border-color: #2e7d32;\n}\n.hierarchy-section .section-header .hierarchy-controls .hierarchy-legend .legend-item .legend-rect.level-2 {\n  background: #f57c00;\n  border-color: #ef6c00;\n}\n.hierarchy-section .hierarchy-chart {\n  flex: 1;\n  min-height: 300px;\n  overflow: hidden;\n  position: relative;\n}\n.hierarchy-section .hierarchy-chart .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.hierarchy-section .hierarchy-chart .chart-help small {\n  font-size: 11px;\n  color: #666;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.hierarchy-section .hierarchy-chart .chart-help small i {\n  color: #2196f3;\n}\n.hierarchy-section .hierarchy-chart .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.hierarchy-section .hierarchy-chart .empty-hierarchy i {\n  font-size: 64px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy h4 {\n  margin: 0 0 12px 0;\n  font-size: 18px;\n  color: #333;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy p {\n  margin: 0 0 24px 0;\n  font-size: 14px;\n  color: #666;\n  line-height: 1.5;\n}\n.hierarchy-section .hierarchy-chart .empty-hierarchy .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.hierarchy-section .hierarchy-chart .empty-hierarchy .create-subagent-btn:hover {\n  background: #1976d2;\n}\n\n.prompts-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #f0f0f0;\n}\n.prompts-section .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.prompts-section .section-header 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.prompts-section .section-header .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.prompts-section .section-header .add-prompt-btn:hover {\n  background: #1976d2;\n}\n.prompts-section .prompts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px 20px;\n}\n.prompts-section .prompts-list .empty-prompts {\n  text-align: center;\n  padding: 40px 20px;\n  color: #666;\n}\n.prompts-section .prompts-list .empty-prompts i {\n  font-size: 48px;\n  margin-bottom: 16px;\n}\n.prompts-section .prompts-list .empty-prompts p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n.prompts-section .prompts-list .empty-prompts .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.prompts-section .prompts-list .empty-prompts .add-first-prompt-btn:hover {\n  background: #1976d2;\n}\n.prompts-section .prompts-list .prompt-card {\n  background: #f8f9fa;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  margin-bottom: 12px;\n}\n.prompts-section .prompts-list .prompt-card .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.prompts-section .prompts-list .prompt-card .prompt-header .prompt-info h4 {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-info .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.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions {\n  display: flex;\n  gap: 4px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .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.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn:hover {\n  background: #f0f0f0;\n  border-color: #ccc;\n}\n.prompts-section .prompts-list .prompt-card .prompt-header .prompt-actions .action-btn.danger:hover {\n  background: #dc3545;\n  border-color: #dc3545;\n  color: white;\n}\n.prompts-section .prompts-list .prompt-card .prompt-content {\n  padding: 12px 16px;\n}\n.prompts-section .prompts-list .prompt-card .prompt-content p {\n  margin: 0;\n  font-size: 12px;\n  color: #666;\n  line-height: 1.4;\n}\n\n.properties-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n}\n.properties-section .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.properties-section .section-header 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.properties-section .section-header .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.properties-section .section-header .save-btn:hover {\n  background: #218838;\n}\n.properties-section .properties-form {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n.properties-section .properties-form .form-group {\n  margin-bottom: 16px;\n}\n.properties-section .properties-form .form-group label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n}\n.properties-section .properties-form .form-group .form-input, .properties-section .properties-form .form-group .form-select, .properties-section .properties-form .form-group .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.properties-section .properties-form .form-group .form-input:focus, .properties-section .properties-form .form-group .form-select:focus, .properties-section .properties-form .form-group .form-textarea:focus {\n  outline: none;\n  border-color: #2196f3;\n}\n.properties-section .properties-form .form-group .form-textarea {\n  resize: vertical;\n  min-height: 60px;\n}\n.properties-section .properties-form .form-group.checkbox-group .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.properties-section .properties-form .form-group.checkbox-group .checkbox-label input[type=checkbox] {\n  width: auto;\n  margin: 0;\n}\n.properties-section .properties-form .form-group.checkbox-group small {\n  display: block;\n  font-size: 11px;\n  color: #666;\n  margin-top: 4px;\n  margin-left: 24px;\n}\n.properties-section .properties-form .form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\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.create-subagent-modal .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.create-subagent-modal .modal-header 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.create-subagent-modal .modal-header .close-btn {\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: #666;\n  border-radius: 4px;\n}\n.create-subagent-modal .modal-header .close-btn:hover {\n  background: #f8f9fa;\n  color: #333;\n}\n.create-subagent-modal .modal-body {\n  padding: 24px;\n  flex: 1;\n  overflow-y: auto;\n}\n.create-subagent-modal .modal-body .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.create-subagent-modal .modal-body .error-message i {\n  color: #dc3545;\n}\n.create-subagent-modal .modal-body .form-group {\n  margin-bottom: 20px;\n}\n.create-subagent-modal .modal-body .form-group label {\n  display: block;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 8px;\n}\n.create-subagent-modal .modal-body .form-group .form-input, .create-subagent-modal .modal-body .form-group .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.create-subagent-modal .modal-body .form-group .form-input:focus, .create-subagent-modal .modal-body .form-group .form-textarea:focus {\n  outline: none;\n  border-color: #2196f3;\n}\n.create-subagent-modal .modal-body .form-group .form-input::placeholder, .create-subagent-modal .modal-body .form-group .form-textarea::placeholder {\n  color: #999;\n}\n.create-subagent-modal .modal-body .form-group .form-textarea {\n  resize: vertical;\n  min-height: 80px;\n  font-family: inherit;\n}\n.create-subagent-modal .modal-body .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.create-subagent-modal .modal-body .parent-info strong {\n  color: #333;\n}\n.create-subagent-modal .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.create-subagent-modal .modal-footer .cancel-btn, .create-subagent-modal .modal-footer .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.create-subagent-modal .modal-footer .cancel-btn:disabled, .create-subagent-modal .modal-footer .create-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.create-subagent-modal .modal-footer .cancel-btn {\n  background: white;\n  border-color: #ddd;\n  color: #666;\n}\n.create-subagent-modal .modal-footer .cancel-btn:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #ccc;\n}\n.create-subagent-modal .modal-footer .create-btn {\n  background: #2196f3;\n  border-color: #2196f3;\n  color: white;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.create-subagent-modal .modal-footer .create-btn:hover:not(:disabled) {\n  background: #1976d2;\n  border-color: #1976d2;\n}\n.create-subagent-modal .modal-footer .create-btn .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"] }]
     }], null, { agentId: [{
             type: Input
         }], close: [{