@memberjunction/ng-dashboards 3.4.0 → 4.1.0

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

@@ -1,22 +1,24 @@
 import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
-import { RunView, Metadata, LogError, LogStatus } from '@memberjunction/core';
+import { RunView, 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";
+import * as i1 from "@memberjunction/ng-agents";
+import * as i2 from "@memberjunction/ng-shared";
+import * as i3 from "@angular/forms";
+import * as i4 from "@memberjunction/ng-shared-generic";
 const _c0 = ["hierarchyChart"];
 const _forTrack0 = ($index, $item) => $item.id;
 function AgentEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵelementStart(0, "button", 13);
     i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCurrentAgentRecord()); });
-    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelement(1, "i", 14);
     i0.ɵɵtext(2, " Open Record ");
     i0.ɵɵelementEnd();
 } }
 function AgentEditorComponent_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 16);
-    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -28,7 +30,7 @@ function AgentEditorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8)(1, "h2");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, AgentEditorComponent_Conditional_8_Conditional_3_Template, 3, 1, "span", 16);
+    i0.ɵɵconditionalCreate(3, AgentEditorComponent_Conditional_8_Conditional_3_Template, 3, 1, "span", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -39,19 +41,19 @@ function AgentEditorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
 } }
 function AgentEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "button", 18);
+    i0.ɵɵelementStart(0, "div", 9)(1, "button", 17);
     i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveTab("hierarchy")); });
-    i0.ɵɵelement(2, "i", 19);
+    i0.ɵɵelement(2, "i", 18);
     i0.ɵɵtext(3, " Hierarchy ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 18);
+    i0.ɵɵelementStart(4, "button", 17);
     i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveTab("prompts")); });
-    i0.ɵɵelement(5, "i", 20);
+    i0.ɵɵelement(5, "i", 19);
     i0.ɵɵtext(6, " Prompts ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 18);
+    i0.ɵɵelementStart(7, "button", 17);
     i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveTab("properties")); });
-    i0.ɵɵelement(8, "i", 21);
+    i0.ɵɵelement(8, "i", 20);
     i0.ɵɵtext(9, " Properties ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -65,22 +67,22 @@ function AgentEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
 } }
 function AgentEditorComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "mj-loading", 22);
+    i0.ɵɵelement(1, "mj-loading", 21);
     i0.ɵɵelementEnd();
 } }
 function AgentEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 11)(1, "div", 23);
-    i0.ɵɵelement(2, "i", 24);
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 22);
+    i0.ɵɵelement(2, "i", 23);
     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", 25);
+    i0.ɵɵelementStart(7, "button", 24);
     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", 26);
+    i0.ɵɵelement(8, "i", 25);
     i0.ɵɵtext(9, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -89,62 +91,63 @@ 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", 45)(1, "small");
-    i0.ɵɵelement(2, "i", 47);
+    i0.ɵɵelementStart(0, "div", 44)(1, "small");
+    i0.ɵɵelement(2, "i", 46);
     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", 46);
-    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelement(1, "i", 18);
     i0.ɵɵelementStart(2, "h4");
     i0.ɵɵtext(3, "No Agent Hierarchy");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5, "This agent doesn't have any parent or child agents yet.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 48);
+    i0.ɵɵelementStart(6, "button", 47);
     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", 34);
+    i0.ɵɵelement(7, "i", 33);
     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", 27)(1, "div", 30)(2, "h3");
-    i0.ɵɵelement(3, "i", 19);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 29)(2, "h3");
+    i0.ɵɵelement(3, "i", 18);
     i0.ɵɵtext(4, " Agent Hierarchy ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 31)(6, "div", 32)(7, "button", 33);
+    i0.ɵɵelementStart(5, "div", 30)(6, "div", 31)(7, "button", 32);
     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", 34);
+    i0.ɵɵelement(8, "i", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 35);
+    i0.ɵɵelementStart(9, "button", 34);
     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", 36);
+    i0.ɵɵelement(10, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 37);
+    i0.ɵɵelementStart(11, "button", 36);
     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", 38);
+    i0.ɵɵelement(12, "i", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 39)(14, "div", 40);
-    i0.ɵɵelement(15, "div", 41);
+    i0.ɵɵelementStart(13, "div", 38)(14, "div", 39);
+    i0.ɵɵelement(15, "div", 40);
     i0.ɵɵelementStart(16, "span");
     i0.ɵɵtext(17, "Root");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 40);
-    i0.ɵɵelement(19, "div", 42);
+    i0.ɵɵelementStart(18, "div", 39);
+    i0.ɵɵelement(19, "div", 41);
     i0.ɵɵelementStart(20, "span");
     i0.ɵɵtext(21, "Level 1");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 40);
-    i0.ɵɵelement(23, "div", 43);
+    i0.ɵɵelementStart(22, "div", 39);
+    i0.ɵɵelement(23, "div", 42);
     i0.ɵɵelementStart(24, "span");
     i0.ɵɵtext(25, "Level 2+");
     i0.ɵɵelementEnd()()()()();
-    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.ɵɵelementStart(26, "div", 43, 0);
+    i0.ɵɵconditionalCreate(28, AgentEditorComponent_Conditional_12_Conditional_1_Conditional_28_Template, 4, 0, "div", 44);
+    i0.ɵɵconditionalCreate(29, AgentEditorComponent_Conditional_12_Conditional_1_Conditional_29_Template, 9, 0, "div", 45);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -154,30 +157,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", 51);
-    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No prompts configured for this agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 52);
-    i0.ɵɵelement(5, "i", 34);
+    i0.ɵɵelementStart(4, "button", 51);
+    i0.ɵɵelement(5, "i", 33);
     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", 53)(1, "div", 54)(2, "div", 55)(3, "h4");
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53)(2, "div", 54)(3, "h4");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 56);
+    i0.ɵɵelementStart(5, "span", 55);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 57)(8, "button", 58);
-    i0.ɵɵelement(9, "i", 59);
+    i0.ɵɵelementStart(7, "div", 56)(8, "button", 57);
+    i0.ɵɵelement(9, "i", 58);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 60);
-    i0.ɵɵelement(11, "i", 61);
+    i0.ɵɵelementStart(10, "button", 59);
+    i0.ɵɵelement(11, "i", 60);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 62)(13, "p");
+    i0.ɵɵelementStart(12, "div", 61)(13, "p");
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -190,22 +193,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", 53, _forTrack0);
+    i0.ɵɵrepeaterCreate(0, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_For_1_Template, 15, 3, "div", 52, _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", 28)(1, "div", 30)(2, "h3");
-    i0.ɵɵelement(3, "i", 20);
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 29)(2, "h3");
+    i0.ɵɵelement(3, "i", 19);
     i0.ɵɵtext(4, " Agent Prompts ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 49);
-    i0.ɵɵelement(6, "i", 34);
+    i0.ɵɵelementStart(5, "button", 48);
+    i0.ɵɵelement(6, "i", 33);
     i0.ɵɵtext(7, " Add Prompt ");
     i0.ɵɵelementEnd()();
-    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.ɵɵelementStart(8, "div", 49);
+    i0.ɵɵconditionalCreate(9, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_9_Template, 7, 0, "div", 50)(10, AgentEditorComponent_Conditional_12_Conditional_2_Conditional_10_Template, 2, 0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -213,15 +216,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", 69)(1, "div", 66)(2, "label");
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 65)(2, "label");
     i0.ɵɵtext(3, "Message Threshold");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "input", 78);
+    i0.ɵɵelement(4, "input", 77);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 66)(6, "label");
+    i0.ɵɵelementStart(5, "div", 65)(6, "label");
     i0.ɵɵtext(7, "Retention Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(8, "input", 79);
+    i0.ɵɵelement(8, "input", 78);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -231,53 +234,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", 29)(1, "div", 30)(2, "h3");
-    i0.ɵɵelement(3, "i", 21);
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29)(2, "h3");
+    i0.ɵɵelement(3, "i", 20);
     i0.ɵɵtext(4, " Agent Properties ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 63);
-    i0.ɵɵelement(6, "i", 64);
+    i0.ɵɵelementStart(5, "button", 62);
+    i0.ɵɵelement(6, "i", 63);
     i0.ɵɵtext(7, " Save ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 65)(9, "div", 66)(10, "label");
+    i0.ɵɵelementStart(8, "div", 64)(9, "div", 65)(10, "label");
     i0.ɵɵtext(11, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(12, "input", 67);
+    i0.ɵɵelement(12, "input", 66);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 66)(14, "label");
+    i0.ɵɵelementStart(13, "div", 65)(14, "label");
     i0.ɵɵtext(15, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(16, "textarea", 68);
+    i0.ɵɵelement(16, "textarea", 67);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 69)(18, "div", 66)(19, "label");
+    i0.ɵɵelementStart(17, "div", 68)(18, "div", 65)(19, "label");
     i0.ɵɵtext(20, "Execution Mode");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "select", 70)(22, "option", 71);
+    i0.ɵɵelementStart(21, "select", 69)(22, "option", 70);
     i0.ɵɵtext(23, "Sequential");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "option", 72);
+    i0.ɵɵelementStart(24, "option", 71);
     i0.ɵɵtext(25, "Parallel");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(26, "div", 66)(27, "label");
+    i0.ɵɵelementStart(26, "div", 65)(27, "label");
     i0.ɵɵtext(28, "Execution Order");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(29, "input", 73);
+    i0.ɵɵelement(29, "input", 72);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(30, "div", 74)(31, "label", 75);
-    i0.ɵɵelement(32, "input", 76)(33, "span", 77);
+    i0.ɵɵelementStart(30, "div", 73)(31, "label", 74);
+    i0.ɵɵelement(32, "input", 75)(33, "span", 76);
     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", 74)(38, "label", 75);
-    i0.ɵɵelement(39, "input", 76)(40, "span", 77);
+    i0.ɵɵelementStart(37, "div", 73)(38, "label", 74);
+    i0.ɵɵelement(39, "input", 75)(40, "span", 76);
     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", 69);
+    i0.ɵɵconditionalCreate(44, AgentEditorComponent_Conditional_12_Conditional_3_Conditional_44_Template, 9, 2, "div", 68);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -298,7 +301,9 @@ 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", 27)(2, AgentEditorComponent_Conditional_12_Conditional_2_Template, 11, 1, "div", 28)(3, AgentEditorComponent_Conditional_12_Conditional_3_Template, 45, 7, "div", 29);
+    i0.ɵɵconditionalCreate(1, AgentEditorComponent_Conditional_12_Conditional_1_Template, 30, 2, "div", 26);
+    i0.ɵɵconditionalCreate(2, AgentEditorComponent_Conditional_12_Conditional_2_Template, 11, 1, "div", 27);
+    i0.ɵɵconditionalCreate(3, AgentEditorComponent_Conditional_12_Conditional_3_Template, 45, 7, "div", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -309,85 +314,9 @@ function AgentEditorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.activeTab === "properties" ? 3 : -1);
 } }
-function AgentEditorComponent_Conditional_13_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵelement(1, "i", 24);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.error, " ");
-} }
-function AgentEditorComponent_Conditional_13_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    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", 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", 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", 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", 82)(3, "h3");
-    i0.ɵɵelement(4, "i", 34);
-    i0.ɵɵtext(5, " Create Sub-Agent ");
-    i0.ɵɵelementEnd();
-    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", 84);
-    i0.ɵɵelementEnd()();
-    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", 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", 66)(15, "label");
-    i0.ɵɵtext(16, "Description");
-    i0.ɵɵelementEnd();
-    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", 89)(19, "strong");
-    i0.ɵɵtext(20, "Parent Agent:");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtext(21);
-    i0.ɵɵelementEnd()();
-    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", 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()()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
-    i0.ɵɵconditional(ctx_r1.error ? 9 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newSubAgentName);
-    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newSubAgentDescription);
-    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentAgent == null ? null : ctx_r1.currentAgent.Name, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r1.newSubAgentName.trim() || ctx_r1.isLoading);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isLoading ? 26 : 27);
-} }
 export class AgentEditorComponent {
+    createAgentService;
+    navigationService;
     agentId = null;
     close = new EventEmitter();
     openAgent = new EventEmitter();
@@ -406,16 +335,16 @@ export class AgentEditorComponent {
     showHierarchy = true;
     showPrompts = true;
     showProperties = true;
-    // Sub-agent creation
-    showCreateSubAgent = false;
-    newSubAgentName = '';
-    newSubAgentDescription = '';
     // D3 variables
     svg;
     g;
     tree;
     root;
     zoom;
+    constructor(createAgentService, navigationService) {
+        this.createAgentService = createAgentService;
+        this.navigationService = navigationService;
+    }
     ngOnInit() {
         if (this.agentId) {
             this.loadAgentData();
@@ -733,54 +662,62 @@ export class AgentEditorComponent {
     getExecutionModeIcon(mode) {
         return mode === 'Sequential' ? 'fa-solid fa-list-ol' : 'fa-solid fa-layer-group';
     }
+    /**
+     * Opens the create sub-agent slide-in panel using the new CreateAgentService.
+     * After successful creation, saves the agent and navigates to it.
+     */
     openCreateSubAgent() {
-        this.showCreateSubAgent = true;
-        this.newSubAgentName = '';
-        this.newSubAgentDescription = '';
+        if (!this.currentAgent)
+            return;
         this.error = null;
+        this.createAgentService.OpenSubAgentSlideIn(this.currentAgent.ID, this.currentAgent.Name || 'Agent').subscribe({
+            next: async (dialogResult) => {
+                if (!dialogResult.Cancelled && dialogResult.Result) {
+                    await this.handleAgentCreated(dialogResult.Result);
+                }
+            },
+            error: (err) => {
+                console.error('Error in create sub-agent slide-in:', err);
+                this.error = 'Failed to open create sub-agent panel';
+            }
+        });
     }
-    closeCreateSubAgent() {
-        this.showCreateSubAgent = false;
-        this.newSubAgentName = '';
-        this.newSubAgentDescription = '';
-    }
-    async createSubAgent() {
-        if (!this.currentAgent || !this.newSubAgentName.trim())
-            return;
+    /**
+     * Handles the result from the create agent slide-in.
+     * Saves the agent and navigates to the new record.
+     */
+    async handleAgentCreated(result) {
         try {
             this.isLoading = true;
             this.error = null;
-            const md = Metadata.Provider;
-            if (!md) {
-                throw new Error('Metadata provider not available');
-            }
-            // Create new AI Agent entity
-            const newAgent = await md.GetEntityObject('AI Agents', md.CurrentUser);
-            // Set agent properties
-            newAgent.Name = this.newSubAgentName.trim();
-            newAgent.Description = this.newSubAgentDescription.trim() || '';
-            newAgent.ParentID = this.currentAgent.ID;
-            // Set default values based on parent agent
-            newAgent.ExecutionMode = this.currentAgent.ExecutionMode || 'Sequential';
-            newAgent.ExecutionOrder = 1; // Default to 1, could be made configurable
-            newAgent.ExposeAsAction = false; // Default to false for sub-agents
-            newAgent.EnableContextCompression = this.currentAgent.EnableContextCompression || false;
-            newAgent.ContextCompressionMessageThreshold = this.currentAgent.ContextCompressionMessageThreshold || 10;
-            newAgent.ContextCompressionMessageRetentionCount = this.currentAgent.ContextCompressionMessageRetentionCount || 5;
+            const agent = result.Agent;
             // Save the new agent
-            const result = await newAgent.Save();
-            if (result) {
+            const saveResult = await agent.Save();
+            if (saveResult) {
                 LogStatus('Sub-agent created successfully');
-                // Close the dialog
-                this.closeCreateSubAgent();
+                // Save any linked prompts
+                if (result.AgentPrompts && result.AgentPrompts.length > 0) {
+                    for (const agentPrompt of result.AgentPrompts) {
+                        // Update the AgentID now that the agent has been saved
+                        agentPrompt.AgentID = agent.ID;
+                        await agentPrompt.Save();
+                    }
+                }
+                // Save any linked actions
+                if (result.AgentActions && result.AgentActions.length > 0) {
+                    for (const agentAction of result.AgentActions) {
+                        // Update the AgentID now that the agent has been saved
+                        agentAction.AgentID = agent.ID;
+                        await agentAction.Save();
+                    }
+                }
                 // Reload agent data to show the new hierarchy
                 await this.loadAgentData();
-                // Navigate to the newly created agent
-                this.openAgent.emit(newAgent.ID);
+                // Navigate to the newly created agent record
+                this.navigationService.OpenEntityRecord('AI Agents', agent.PrimaryKey);
             }
             else {
-                // Handle save failure
-                const errorMessage = newAgent.LatestResult?.Message || 'Unknown error occurred while creating sub-agent';
+                const errorMessage = agent.LatestResult?.Message || 'Unknown error occurred while creating sub-agent';
                 this.error = `Failed to create sub-agent: ${errorMessage}`;
                 LogError('Sub-agent creation failed', undefined, errorMessage);
             }
@@ -808,23 +745,26 @@ export class AgentEditorComponent {
             this.openEntityRecord.emit({ entityName: 'AI Agents', recordId: this.currentAgent.ID });
         }
     }
-    static ɵfac = function AgentEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgentEditorComponent)(); };
+    static ɵfac = function AgentEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgentEditorComponent)(i0.ɵɵdirectiveInject(i1.CreateAgentService), i0.ɵɵdirectiveInject(i2.NavigationService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentEditorComponent, selectors: [["mj-agent-editor"]], viewQuery: function AgentEditorComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.hierarchyChartRef = _t.first);
-        } }, inputs: { agentId: "agentId" }, outputs: { close: "close", openAgent: "openAgent", openEntityRecord: "openEntityRecord" }, decls: 14, vars: 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) {
+        } }, inputs: { agentId: "agentId" }, outputs: { close: "close", openAgent: "openAgent", openEntityRecord: "openEntityRecord" }, standalone: false, decls: 13, vars: 6, 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"], ["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"]], template: function AgentEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "button", 5);
             i0.ɵɵlistener("click", function AgentEditorComponent_Template_button_click_4_listener() { return ctx.closeEditor(); });
             i0.ɵɵelement(5, "i", 6);
             i0.ɵɵtext(6, " Back to Agents ");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, AgentEditorComponent_Conditional_7_Template, 3, 0, "button", 7);
+            i0.ɵɵconditionalCreate(7, AgentEditorComponent_Conditional_7_Template, 3, 0, "button", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(8, AgentEditorComponent_Conditional_8_Template, 4, 2, "div", 8);
+            i0.ɵɵconditionalCreate(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, 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.ɵɵconditionalCreate(9, AgentEditorComponent_Conditional_9_Template, 10, 6, "div", 9);
+            i0.ɵɵconditionalCreate(10, AgentEditorComponent_Conditional_10_Template, 2, 0, "div", 10);
+            i0.ɵɵconditionalCreate(11, AgentEditorComponent_Conditional_11_Template, 10, 1, "div", 11);
+            i0.ɵɵconditionalCreate(12, AgentEditorComponent_Conditional_12_Template, 4, 3, "div", 12);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(7);
@@ -839,14 +779,12 @@ export class AgentEditorComponent {
             i0.ɵɵconditional(ctx.error ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 12 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCreateSubAgent ? 13 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NgControlStatus, i1.MaxLengthValidator, i1.NgModel, i2.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}"] });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.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      <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: [{
+        args: [{ standalone: false, 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 now uses CreateAgentService slide-in panel -->\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"] }]
+    }], () => [{ type: i1.CreateAgentService }, { type: i2.NavigationService }], { agentId: [{
             type: Input
         }], close: [{
             type: Output
@@ -858,5 +796,5 @@ export class AgentEditorComponent {
             type: ViewChild,
             args: ['hierarchyChart', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentEditorComponent, { className: "AgentEditorComponent", filePath: "src/AI/components/agents/agent-editor.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentEditorComponent, { className: "AgentEditorComponent", filePath: "src/AI/components/agents/agent-editor.component.ts", lineNumber: 31 }); })();
 //# sourceMappingURL=agent-editor.component.js.map