@memberjunction/ng-dashboards 2.42.0

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

@@ -0,0 +1,869 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { RunView, Metadata, LogError, LogStatus } from '@memberjunction/core';
+import * as d3 from 'd3';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-container-directives";
+const _c0 = ["hierarchyChart"];
+const _forTrack0 = ($index, $item) => $item.id;
+function AgentEditorComponent_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵelement(1, "i", 13);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Child of ", ctx_r0.currentAgent.Parent, " ");
+} }
+function AgentEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "h2");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, AgentEditorComponent_Conditional_6_Conditional_3_Template, 3, 1, "span", 12);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.currentAgent.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.currentAgent.Parent ? 3 : -1);
+} }
+function AgentEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "button", 14);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("hierarchy")); });
+    i0.ɵɵelement(2, "i", 15);
+    i0.ɵɵtext(3, " Hierarchy ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 14);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("prompts")); });
+    i0.ɵɵelement(5, "i", 16);
+    i0.ɵɵtext(6, " Prompts ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 14);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("properties")); });
+    i0.ɵɵelement(8, "i", 17);
+    i0.ɵɵtext(9, " Properties ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "hierarchy");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "prompts");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "properties");
+} }
+function AgentEditorComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 18)(2, "div", 19);
+    i0.ɵɵelement(3, "div", 20)(4, "div", 20)(5, "div", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 21);
+    i0.ɵɵtext(7, "Loading agent data...");
+    i0.ɵɵelementEnd()()();
+} }
+function AgentEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 22);
+    i0.ɵɵelement(2, "i", 23);
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵtext(4, "Error Loading Agent");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 24);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_9_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.loadAgentData()); });
+    i0.ɵɵelement(8, "i", 25);
+    i0.ɵɵtext(9, " Retry ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.error);
+} }
+function AgentEditorComponent_Conditional_10_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44)(1, "small");
+    i0.ɵɵelement(2, "i", 46);
+    i0.ɵɵtext(3, " Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate ");
+    i0.ɵɵelementEnd()();
+} }
+function AgentEditorComponent_Conditional_10_Conditional_1_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelement(1, "i", 15);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "No Agent Hierarchy");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "This agent doesn't have any parent or child agents yet.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 47);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Conditional_29_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.openCreateSubAgent()); });
+    i0.ɵɵelement(7, "i", 33);
+    i0.ɵɵtext(8, " Create Sub-Agent ");
+    i0.ɵɵelementEnd()();
+} }
+function AgentEditorComponent_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 29)(2, "h3");
+    i0.ɵɵelement(3, "i", 15);
+    i0.ɵɵtext(4, " Agent Hierarchy ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 30)(6, "div", 31)(7, "button", 32);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.zoomIn()); });
+    i0.ɵɵelement(8, "i", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 34);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.zoomOut()); });
+    i0.ɵɵelement(10, "i", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 36);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_10_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.resetZoom()); });
+    i0.ɵɵelement(12, "i", 37);
+    i0.ɵɵelementEnd()();
+    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", 39);
+    i0.ɵɵelement(19, "div", 41);
+    i0.ɵɵelementStart(20, "span");
+    i0.ɵɵtext(21, "Level 1");
+    i0.ɵɵelementEnd()();
+    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", 43, 0);
+    i0.ɵɵtemplate(28, AgentEditorComponent_Conditional_10_Conditional_1_Conditional_28_Template, 4, 0, "div", 44)(29, AgentEditorComponent_Conditional_10_Conditional_1_Conditional_29_Template, 9, 0, "div", 45);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(28);
+    i0.ɵɵconditional(ctx_r0.hierarchyData && (ctx_r0.hasChildren() || ctx_r0.hasParent()) ? 28 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.hierarchyData || !ctx_r0.hasChildren() && !ctx_r0.hasParent() ? 29 : -1);
+} }
+function AgentEditorComponent_Conditional_10_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "i", 16);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No prompts configured for this agent");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 51);
+    i0.ɵɵelement(5, "i", 33);
+    i0.ɵɵtext(6, " Add First Prompt ");
+    i0.ɵɵelementEnd()();
+} }
+function AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53)(2, "div", 54)(3, "h4");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 55);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 56)(8, "button", 57);
+    i0.ɵɵelement(9, "i", 58);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 59);
+    i0.ɵɵelement(11, "i", 60);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "div", 61)(13, "p");
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const prompt_r6 = ctx.$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(prompt_r6.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(prompt_r6.type);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(prompt_r6.content);
+} }
+function AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_For_1_Template, 15, 3, "div", 52, _forTrack0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r0.agentPrompts);
+} }
+function AgentEditorComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 29)(2, "h3");
+    i0.ɵɵelement(3, "i", 16);
+    i0.ɵɵtext(4, " Agent Prompts ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 48);
+    i0.ɵɵelement(6, "i", 33);
+    i0.ɵɵtext(7, " Add Prompt ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 49);
+    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_10_Conditional_2_Conditional_9_Template, 7, 0, "div", 50)(10, AgentEditorComponent_Conditional_10_Conditional_2_Conditional_10_Template, 2, 0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(9);
+    i0.ɵɵconditional(ctx_r0.agentPrompts.length === 0 ? 9 : 10);
+} }
+function AgentEditorComponent_Conditional_10_Conditional_3_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 65)(2, "label");
+    i0.ɵɵtext(3, "Message Threshold");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "input", 77);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 65)(6, "label");
+    i0.ɵɵtext(7, "Retention Count");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(8, "input", 78);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r0.currentAgent.ContextCompressionMessageThreshold);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r0.currentAgent.ContextCompressionMessageRetentionCount);
+} }
+function AgentEditorComponent_Conditional_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29)(2, "h3");
+    i0.ɵɵelement(3, "i", 17);
+    i0.ɵɵtext(4, " Agent Properties ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 62);
+    i0.ɵɵelement(6, "i", 63);
+    i0.ɵɵtext(7, " Save ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 64)(9, "div", 65)(10, "label");
+    i0.ɵɵtext(11, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(12, "input", 66);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 65)(14, "label");
+    i0.ɵɵtext(15, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(16, "textarea", 67);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 68)(18, "div", 65)(19, "label");
+    i0.ɵɵtext(20, "Execution Mode");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "select", 69)(22, "option", 70);
+    i0.ɵɵtext(23, "Sequential");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "option", 71);
+    i0.ɵɵtext(25, "Parallel");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(26, "div", 65)(27, "label");
+    i0.ɵɵtext(28, "Execution Order");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(29, "input", 72);
+    i0.ɵɵelementEnd()();
+    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", 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_10_Conditional_3_Conditional_44_Template, 9, 2, "div", 68);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(12);
+    i0.ɵɵproperty("value", ctx_r0.currentAgent.Name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r0.currentAgent.Description);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r0.currentAgent.ExecutionMode);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("value", ctx_r0.currentAgent.ExecutionOrder);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("checked", ctx_r0.currentAgent.ExposeAsAction);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("checked", ctx_r0.currentAgent.EnableContextCompression);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r0.currentAgent.EnableContextCompression ? 44 : -1);
+} }
+function AgentEditorComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵtemplate(1, AgentEditorComponent_Conditional_10_Conditional_1_Template, 30, 2, "div", 26)(2, AgentEditorComponent_Conditional_10_Conditional_2_Template, 11, 1, "div", 27)(3, AgentEditorComponent_Conditional_10_Conditional_3_Template, 45, 7, "div", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeTab === "hierarchy" ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeTab === "prompts" ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeTab === "properties" ? 3 : -1);
+} }
+function AgentEditorComponent_Conditional_11_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.error, " ");
+} }
+function AgentEditorComponent_Conditional_11_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 92);
+    i0.ɵɵtext(1, " Creating... ");
+} }
+function AgentEditorComponent_Conditional_11_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 33);
+    i0.ɵɵtext(1, " Create Sub-Agent ");
+} }
+function AgentEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeCreateSubAgent()); });
+    i0.ɵɵelementStart(1, "div", 80);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 81)(3, "h3");
+    i0.ɵɵelement(4, "i", 33);
+    i0.ɵɵtext(5, " Create Sub-Agent ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 82);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeCreateSubAgent()); });
+    i0.ɵɵelement(7, "i", 83);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 84);
+    i0.ɵɵtemplate(9, AgentEditorComponent_Conditional_11_Conditional_9_Template, 3, 1, "div", 85);
+    i0.ɵɵelementStart(10, "div", 65)(11, "label");
+    i0.ɵɵtext(12, "Agent Name *");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "input", 86);
+    i0.ɵɵtwoWayListener("ngModelChange", function AgentEditorComponent_Conditional_11_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.newSubAgentName, $event) || (ctx_r0.newSubAgentName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 65)(15, "label");
+    i0.ɵɵtext(16, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "textarea", 87);
+    i0.ɵɵtwoWayListener("ngModelChange", function AgentEditorComponent_Conditional_11_Template_textarea_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.newSubAgentDescription, $event) || (ctx_r0.newSubAgentDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 88)(19, "strong");
+    i0.ɵɵtext(20, "Parent Agent:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 89)(23, "button", 90);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeCreateSubAgent()); });
+    i0.ɵɵtext(24, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "button", 91);
+    i0.ɵɵlistener("click", function AgentEditorComponent_Conditional_11_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createSubAgent()); });
+    i0.ɵɵtemplate(26, AgentEditorComponent_Conditional_11_Conditional_26_Template, 2, 0)(27, AgentEditorComponent_Conditional_11_Conditional_27_Template, 2, 0);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(9);
+    i0.ɵɵconditional(ctx_r0.error ? 9 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.newSubAgentName);
+    i0.ɵɵproperty("disabled", ctx_r0.isLoading);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.newSubAgentDescription);
+    i0.ɵɵproperty("disabled", ctx_r0.isLoading);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.currentAgent == null ? null : ctx_r0.currentAgent.Name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r0.isLoading);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r0.newSubAgentName.trim() || ctx_r0.isLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isLoading ? 26 : 27);
+} }
+export class AgentEditorComponent {
+    constructor() {
+        this.agentId = null;
+        this.close = new EventEmitter();
+        this.openAgent = new EventEmitter();
+        this.isLoading = false;
+        this.error = null;
+        this.currentAgent = null;
+        this.allAgents = [];
+        this.hierarchyData = null;
+        this.selectedNode = null;
+        this.agentPrompts = [];
+        // Tab settings
+        this.activeTab = 'hierarchy';
+        // Legacy layout settings (keeping for compatibility)
+        this.showHierarchy = true;
+        this.showPrompts = true;
+        this.showProperties = true;
+        // Sub-agent creation
+        this.showCreateSubAgent = false;
+        this.newSubAgentName = '';
+        this.newSubAgentDescription = '';
+    }
+    ngOnInit() {
+        if (this.agentId) {
+            this.loadAgentData();
+        }
+    }
+    ngAfterViewInit() {
+        // Chart initialization now happens after data loading in loadAgentData()
+    }
+    ngOnDestroy() {
+        // Cleanup D3
+        if (this.svg) {
+            this.svg.remove();
+        }
+    }
+    loadAgentData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.isLoading = true;
+                this.error = null;
+                // Load all agents to build hierarchy
+                const rv = new RunView();
+                const result = yield rv.RunView({
+                    EntityName: 'AI Agents',
+                    ExtraFilter: '',
+                    OrderBy: 'Name',
+                    MaxRows: 1000
+                });
+                this.allAgents = result.Results;
+                this.currentAgent = this.allAgents.find(a => a.ID === this.agentId) || null;
+                if (this.currentAgent) {
+                    this.buildHierarchy();
+                    this.loadAgentPrompts();
+                    // Initialize chart after data is loaded
+                    setTimeout(() => {
+                        if (this.hierarchyChartRef) {
+                            this.initializeChart();
+                        }
+                    }, 100);
+                }
+            }
+            catch (error) {
+                console.error('Error loading agent data:', error);
+                this.error = 'Failed to load agent data';
+            }
+            finally {
+                this.isLoading = false;
+            }
+        });
+    }
+    buildHierarchy() {
+        if (!this.currentAgent)
+            return;
+        console.log('Building hierarchy for agent:', this.currentAgent.Name, 'ID:', this.currentAgent.ID);
+        console.log('All agents:', this.allAgents.length);
+        // Find the root of the hierarchy that contains our current agent
+        const rootAgent = this.findRootAgent(this.currentAgent);
+        console.log('Root agent found:', rootAgent.Name);
+        this.hierarchyData = this.buildHierarchyTree(rootAgent);
+        this.selectedNode = this.findNodeInHierarchy(this.hierarchyData, this.currentAgent.ID);
+        console.log('Hierarchy data:', this.hierarchyData);
+        console.log('Selected node:', this.selectedNode);
+    }
+    findRootAgent(agent) {
+        let current = agent;
+        while (current.ParentID) {
+            const parent = this.allAgents.find(a => a.ID === current.ParentID);
+            if (!parent)
+                break;
+            current = parent;
+        }
+        return current;
+    }
+    buildHierarchyTree(agent) {
+        const children = this.allAgents
+            .filter(a => a.ParentID === agent.ID)
+            .map(child => this.buildHierarchyTree(child));
+        const node = {
+            id: agent.ID,
+            name: agent.Name || 'Unnamed Agent',
+            agent: agent,
+            children: children
+        };
+        // Set parent references
+        if (node.children) {
+            node.children.forEach(child => child.parent = node);
+        }
+        return node;
+    }
+    findNodeInHierarchy(node, agentId) {
+        if (node.id === agentId)
+            return node;
+        if (node.children) {
+            for (const child of node.children) {
+                const found = this.findNodeInHierarchy(child, agentId);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    loadAgentPrompts() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.currentAgent)
+                return;
+            try {
+                // This would load prompts associated with the agent
+                // For now, using mock data structure
+                this.agentPrompts = [
+                    { id: '1', name: 'System Prompt', content: 'Default system instructions...', type: 'system' },
+                    { id: '2', name: 'User Prompt', content: 'User interaction template...', type: 'user' }
+                ];
+            }
+            catch (error) {
+                console.error('Error loading agent prompts:', error);
+            }
+        });
+    }
+    initializeChart() {
+        var _a;
+        if (!((_a = this.hierarchyChartRef) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            return;
+        }
+        const container = this.hierarchyChartRef.nativeElement;
+        const width = container.clientWidth || 800;
+        const height = container.clientHeight || 600;
+        // Clear any existing SVG
+        d3.select(container).selectAll('*').remove();
+        // Create SVG with zoom/pan functionality
+        this.svg = d3.select(container)
+            .append('svg')
+            .attr('width', width)
+            .attr('height', height)
+            .style('background', '#fafafa')
+            .style('border', '1px solid #e0e0e0');
+        // Create zoom behavior with wheel support
+        this.zoom = d3.zoom()
+            .scaleExtent([0.1, 3])
+            .wheelDelta((event) => -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * (event.ctrlKey ? 10 : 1))
+            .on('zoom', (event) => {
+            this.g.attr('transform', event.transform);
+        });
+        // Apply zoom to SVG
+        this.svg.call(this.zoom);
+        // Create main group for chart content
+        this.g = this.svg.append('g');
+        // Create tree layout with proper spacing - use nodeSize for fixed spacing
+        this.tree = d3.tree()
+            .nodeSize([150, 100]) // Fixed node spacing: 150px horizontal, 100px vertical
+            .separation((a, b) => a.parent === b.parent ? 1 : 1.5);
+        this.renderHierarchy();
+    }
+    renderHierarchy() {
+        if (!this.hierarchyData || !this.g || !this.tree) {
+            return;
+        }
+        // Create hierarchy
+        this.root = d3.hierarchy(this.hierarchyData);
+        this.tree(this.root);
+        // Clear previous render
+        this.g.selectAll('*').remove();
+        // Get container dimensions
+        const container = this.hierarchyChartRef.nativeElement;
+        const containerWidth = container.clientWidth || 800;
+        // Calculate the tree bounds after layout
+        const treeBounds = this.getTreeBounds(this.root);
+        // Calculate centering offsets
+        const offsetX = (containerWidth - treeBounds.width) / 2 - treeBounds.minX;
+        const offsetY = 150; // Top margin for the tree
+        // Apply transform to center the tree properly
+        this.g.attr('transform', `translate(${offsetX}, ${offsetY})`);
+        // Draw links
+        this.g.selectAll('.link')
+            .data(this.root.links())
+            .enter().append('path')
+            .attr('class', 'link')
+            .attr('d', d3.linkVertical()
+            .x((d) => d.x)
+            .y((d) => d.y))
+            .style('fill', 'none')
+            .style('stroke', '#999')
+            .style('stroke-width', '2px')
+            .style('stroke-opacity', 0.6);
+        // Draw nodes
+        const nodes = this.g.selectAll('.node')
+            .data(this.root.descendants())
+            .enter().append('g')
+            .attr('class', 'node')
+            .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
+            .style('cursor', 'pointer')
+            .on('click', (_event, d) => this.onNodeClick(d.data));
+        // Add rectangles for nodes
+        const nodeWidth = 120;
+        const nodeHeight = 40;
+        nodes.append('rect')
+            .attr('x', -nodeWidth / 2)
+            .attr('y', -nodeHeight / 2)
+            .attr('width', nodeWidth)
+            .attr('height', nodeHeight)
+            .attr('rx', 6)
+            .attr('ry', 6)
+            .style('fill', (d) => this.getNodeColor(d))
+            .style('stroke', (d) => this.getNodeStrokeColor(d))
+            .style('stroke-width', (d) => { var _a; return d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID) ? '3px' : '2px'; })
+            .style('opacity', 0.9);
+        // Add node labels (agent names)
+        nodes.append('text')
+            .attr('dy', -2)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '11px')
+            .style('font-weight', (d) => { var _a; return d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID) ? 'bold' : '500'; })
+            .style('fill', '#333')
+            .style('pointer-events', 'none')
+            .text((d) => {
+            const name = d.data.name;
+            return name.length > 14 ? name.substring(0, 11) + '...' : name;
+        });
+        // Add execution mode labels
+        nodes.append('text')
+            .attr('dy', 12)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '9px')
+            .style('fill', '#666')
+            .style('pointer-events', 'none')
+            .text((d) => d.data.agent.ExecutionMode);
+        // Add level indicators
+        nodes.append('text')
+            .attr('x', nodeWidth / 2 - 8)
+            .attr('y', -nodeHeight / 2 + 12)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '8px')
+            .style('font-weight', 'bold')
+            .style('fill', '#fff')
+            .style('pointer-events', 'none')
+            .text((d) => `L${d.depth}`);
+    }
+    getTreeBounds(root) {
+        let minX = Infinity, maxX = -Infinity;
+        let minY = Infinity, maxY = -Infinity;
+        root.descendants().forEach((d) => {
+            minX = Math.min(minX, d.x);
+            maxX = Math.max(maxX, d.x);
+            minY = Math.min(minY, d.y);
+            maxY = Math.max(maxY, d.y);
+        });
+        return {
+            width: maxX - minX,
+            height: maxY - minY,
+            minX,
+            maxX,
+            minY,
+            maxY
+        };
+    }
+    getNodeColor(d) {
+        var _a;
+        const level = d.depth;
+        const isCurrentAgent = d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID);
+        // Level-based color scheme
+        const levelColors = [
+            '#1976d2', // Level 0 (root) - Blue
+            '#388e3c', // Level 1 - Green  
+            '#f57c00', // Level 2 - Orange
+            '#7b1fa2', // Level 3 - Purple
+            '#c2185b', // Level 4 - Pink
+            '#5d4037' // Level 5+ - Brown
+        ];
+        const baseColor = levelColors[Math.min(level, levelColors.length - 1)];
+        // Highlight current agent with brighter color
+        if (isCurrentAgent) {
+            return baseColor;
+        }
+        // Make non-current agents slightly lighter
+        return this.lightenColor(baseColor, 0.3);
+    }
+    getNodeStrokeColor(d) {
+        var _a;
+        const isCurrentAgent = d.data.id === ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID);
+        if (isCurrentAgent) {
+            return '#000';
+        }
+        return '#666';
+    }
+    lightenColor(color, factor) {
+        // Simple color lightening function
+        const hex = color.replace('#', '');
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        const newR = Math.min(255, Math.floor(r + (255 - r) * factor));
+        const newG = Math.min(255, Math.floor(g + (255 - g) * factor));
+        const newB = Math.min(255, Math.floor(b + (255 - b) * factor));
+        return `rgb(${newR}, ${newG}, ${newB})`;
+    }
+    onNodeClick(node) {
+        var _a;
+        if (node.id !== ((_a = this.currentAgent) === null || _a === void 0 ? void 0 : _a.ID)) {
+            this.openAgent.emit(node.id);
+        }
+    }
+    zoomIn() {
+        if (this.svg && this.zoom) {
+            this.svg.transition().call(this.zoom.scaleBy, 1.5);
+        }
+    }
+    zoomOut() {
+        if (this.svg && this.zoom) {
+            this.svg.transition().call(this.zoom.scaleBy, 1 / 1.5);
+        }
+    }
+    resetZoom() {
+        if (this.svg && this.zoom) {
+            // Reset to initial centered position
+            this.svg.transition().call(this.zoom.transform, d3.zoomIdentity);
+        }
+    }
+    navigateToAgent(agentId) {
+        this.openAgent.emit(agentId);
+    }
+    closeEditor() {
+        this.close.emit();
+    }
+    setActiveTab(tab) {
+        this.activeTab = tab;
+    }
+    getExecutionModeColor(mode) {
+        return mode === 'Sequential' ? '#2196f3' : '#4caf50';
+    }
+    getExecutionModeIcon(mode) {
+        return mode === 'Sequential' ? 'fa-solid fa-list-ol' : 'fa-solid fa-layer-group';
+    }
+    openCreateSubAgent() {
+        this.showCreateSubAgent = true;
+        this.newSubAgentName = '';
+        this.newSubAgentDescription = '';
+        this.error = null;
+    }
+    closeCreateSubAgent() {
+        this.showCreateSubAgent = false;
+        this.newSubAgentName = '';
+        this.newSubAgentDescription = '';
+    }
+    createSubAgent() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!this.currentAgent || !this.newSubAgentName.trim())
+                return;
+            try {
+                this.isLoading = true;
+                this.error = null;
+                const md = Metadata.Provider;
+                if (!md) {
+                    throw new Error('Metadata provider not available');
+                }
+                // Create new AI Agent entity
+                const newAgent = yield md.GetEntityObject('AI Agents', md.CurrentUser);
+                // Set agent properties
+                newAgent.Name = this.newSubAgentName.trim();
+                newAgent.Description = this.newSubAgentDescription.trim() || '';
+                newAgent.ParentID = this.currentAgent.ID;
+                // Set default values based on parent agent
+                newAgent.ExecutionMode = this.currentAgent.ExecutionMode || 'Sequential';
+                newAgent.ExecutionOrder = 1; // Default to 1, could be made configurable
+                newAgent.ExposeAsAction = false; // Default to false for sub-agents
+                newAgent.EnableContextCompression = this.currentAgent.EnableContextCompression || false;
+                newAgent.ContextCompressionMessageThreshold = this.currentAgent.ContextCompressionMessageThreshold || 10;
+                newAgent.ContextCompressionMessageRetentionCount = this.currentAgent.ContextCompressionMessageRetentionCount || 5;
+                // Save the new agent
+                const result = yield newAgent.Save();
+                if (result) {
+                    LogStatus('Sub-agent created successfully');
+                    // Close the dialog
+                    this.closeCreateSubAgent();
+                    // Reload agent data to show the new hierarchy
+                    yield this.loadAgentData();
+                    // Navigate to the newly created agent
+                    this.openAgent.emit(newAgent.ID);
+                }
+                else {
+                    // Handle save failure
+                    const errorMessage = ((_a = newAgent.LatestResult) === null || _a === void 0 ? void 0 : _a.Message) || 'Unknown error occurred while creating sub-agent';
+                    this.error = `Failed to create sub-agent: ${errorMessage}`;
+                    LogError('Sub-agent creation failed', undefined, errorMessage);
+                }
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+                this.error = `Failed to create sub-agent: ${errorMessage}`;
+                LogError('Error creating sub-agent', undefined, error);
+            }
+            finally {
+                this.isLoading = false;
+            }
+        });
+    }
+    hasChildren() {
+        var _a;
+        return ((_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.children) && this.selectedNode.children.length > 0 || false;
+    }
+    hasParent() {
+        var _a;
+        return ((_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.parent) !== undefined;
+    }
+    getChildCount() {
+        var _a, _b;
+        return ((_b = (_a = this.selectedNode) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    }
+}
+AgentEditorComponent.ɵfac = function AgentEditorComponent_Factory(t) { return new (t || AgentEditorComponent)(); };
+AgentEditorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentEditorComponent, selectors: [["mj-agent-editor"]], viewQuery: function AgentEditorComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.hierarchyChartRef = _t.first);
+    } }, inputs: { agentId: "agentId" }, outputs: { close: "close", openAgent: "openAgent" }, decls: 12, vars: 8, consts: [["hierarchyChart", ""], ["mjFillContainer", "", 1, "agent-editor-container", 3, "rightMargin", "bottomMargin"], [1, "editor-header"], [1, "header-info"], ["type", "button", "title", "Back to Agent List", 1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "agent-breadcrumb"], [1, "tab-navigation"], [1, "loading-container"], [1, "error-container"], ["mjFillContainer", "", 1, "tab-content"], [1, "modal-overlay"], [1, "breadcrumb-item"], [1, "fa-solid", "fa-chevron-right"], ["type", "button", 1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-sitemap"], [1, "fa-solid", "fa-comment-dots"], [1, "fa-solid", "fa-cog"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "retry-btn", 3, "click"], [1, "fa-solid", "fa-retry"], ["mjFillContainer", "", 1, "hierarchy-section"], ["mjFillContainer", "", 1, "prompts-section"], ["mjFillContainer", "", 1, "properties-section"], [1, "section-header"], [1, "hierarchy-controls"], [1, "zoom-controls"], ["type", "button", "title", "Zoom In", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["type", "button", "title", "Zoom Out", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-minus"], ["type", "button", "title", "Reset Zoom", 1, "zoom-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "hierarchy-legend"], [1, "legend-item"], [1, "legend-rect", "level-0"], [1, "legend-rect", "level-1"], [1, "legend-rect", "level-2"], ["mjFillContainer", "", 1, "hierarchy-chart"], [1, "chart-help"], [1, "empty-hierarchy"], [1, "fa-solid", "fa-hand-pointer"], [1, "create-subagent-btn", 3, "click"], ["title", "Add New Prompt", 1, "add-prompt-btn"], [1, "prompts-list"], [1, "empty-prompts"], [1, "add-first-prompt-btn"], [1, "prompt-card"], [1, "prompt-header"], [1, "prompt-info"], [1, "prompt-type"], [1, "prompt-actions"], ["title", "Edit Prompt", 1, "action-btn"], [1, "fa-solid", "fa-edit"], ["title", "Delete Prompt", 1, "action-btn", "danger"], [1, "fa-solid", "fa-trash"], [1, "prompt-content"], ["title", "Save Changes", 1, "save-btn"], [1, "fa-solid", "fa-save"], [1, "properties-form"], [1, "form-group"], ["type", "text", "placeholder", "Agent name", 1, "form-input", 3, "value"], ["placeholder", "Agent description", "rows", "3", 1, "form-textarea", 3, "value"], [1, "form-row"], [1, "form-select", 3, "value"], ["value", "Sequential"], ["value", "Parallel"], ["type", "number", "min", "0", 1, "form-input", 3, "value"], [1, "form-group", "checkbox-group"], [1, "checkbox-label"], ["type", "checkbox", 3, "checked"], [1, "checkmark"], ["type", "number", "min", "1", "placeholder", "Number of messages", 1, "form-input", 3, "value"], ["type", "number", "min", "0", "placeholder", "Messages to keep", 1, "form-input", 3, "value"], [1, "modal-overlay", 3, "click"], [1, "create-subagent-modal", 3, "click"], [1, "modal-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "error-message"], ["type", "text", "placeholder", "Enter agent name...", "maxlength", "255", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], ["placeholder", "Describe what this sub-agent will do...", "rows", "4", 1, "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "parent-info"], [1, "modal-footer"], [1, "cancel-btn", 3, "click", "disabled"], [1, "create-btn", 3, "click", "disabled"], [1, "loading-spinner-sm"]], template: function AgentEditorComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "button", 4);
+        i0.ɵɵlistener("click", function AgentEditorComponent_Template_button_click_3_listener() { return ctx.closeEditor(); });
+        i0.ɵɵelement(4, "i", 5);
+        i0.ɵɵtext(5, " Back to Agents ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(6, AgentEditorComponent_Conditional_6_Template, 4, 2, "div", 6);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵtemplate(7, AgentEditorComponent_Conditional_7_Template, 10, 6, "div", 7)(8, AgentEditorComponent_Conditional_8_Template, 8, 0, "div", 8)(9, AgentEditorComponent_Conditional_9_Template, 10, 1, "div", 9)(10, AgentEditorComponent_Conditional_10_Template, 4, 3, "div", 10)(11, AgentEditorComponent_Conditional_11_Template, 28, 9, "div", 11);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
+        i0.ɵɵadvance(6);
+        i0.ɵɵconditional(ctx.currentAgent ? 6 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 7 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.isLoading ? 8 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.error ? 9 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.currentAgent ? 10 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.showCreateSubAgent ? 11 : -1);
+    } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NgControlStatus, i1.MaxLengthValidator, i1.NgModel, i2.FillContainer], styles: ["@use \"../../../../../../../dist/packages/Angular/Explorer/explorer-core/src/generic/generic-browse-list.component\";\n\n.agent-editor-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    \n    .back-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      text-decoration: none;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #e9ecef;\n        border-color: #ccc;\n        color: #333;\n      }\n    }\n    \n    .agent-breadcrumb {\n      h2 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #333;\n      }\n      \n      .breadcrumb-item {\n        font-size: 14px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-top: 4px;\n      }\n    }\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 12px;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #f8f9fa;\n        border-color: #2196f3;\n        color: #2196f3;\n      }\n      \n      &.active {\n        background: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Tab[_ngcontent-%COMP%]   Navigation\n.tab-navigation[_ngcontent-%COMP%] {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  \n  .tab-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #666;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    \n    &:hover {\n      color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    i {\n      font-size: 16px;\n    }\n  }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  \n  .loading-content, .error-content {\n    text-align: center;\n    \n    .loading-spinner {\n      position: relative;\n      width: 60px;\n      height: 60px;\n      margin: 0 auto 20px;\n    }\n    \n    .spinner-ring {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border: 3px solid transparent;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n      \n      &:nth-child(1) {\n        border-top-color: #2196f3;\n        animation-delay: 0s;\n      }\n      \n      &:nth-child(2) {\n        border-top-color: #9c27b0;\n        animation-delay: 0.3s;\n        transform: scale(0.8);\n      }\n      \n      &:nth-child(3) {\n        border-top-color: #ff6b35;\n        animation-delay: 0.6s;\n        transform: scale(0.6);\n      }\n    }\n    \n    .loading-text {\n      font-size: 16px;\n      color: #666;\n    }\n    \n    i {\n      font-size: 48px;\n      color: #dc3545;\n      margin-bottom: 16px;\n    }\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #333;\n    }\n    \n    p {\n      margin: 0 0 16px 0;\n      color: #666;\n    }\n    \n    .retry-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #dc3545;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      cursor: pointer;\n      \n      &:hover {\n        background: #c82333;\n      }\n    }\n  }\n}\n\n.editor-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter[_ngcontent-%COMP%], .bottom-splitter[_ngcontent-%COMP%] {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n//[_ngcontent-%COMP%]   Hierarchy[_ngcontent-%COMP%]   Section\n.hierarchy-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .hierarchy-controls {\n      display: flex;\n      align-items: center;\n      gap: 20px;\n      \n      .zoom-controls {\n        display: flex;\n        gap: 4px;\n        \n        .zoom-btn {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          background: white;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          color: #666;\n          cursor: pointer;\n          transition: all 0.2s;\n          \n          &:hover {\n            background: #f8f9fa;\n            border-color: #2196f3;\n            color: #2196f3;\n          }\n          \n          i {\n            font-size: 12px;\n          }\n        }\n      }\n      \n      .hierarchy-legend {\n        display: flex;\n        gap: 16px;\n        \n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          font-size: 12px;\n          color: #666;\n          \n          .legend-rect {\n            width: 20px;\n            height: 12px;\n            border-radius: 2px;\n            border: 1px solid;\n            \n            &.level-0 {\n              background: #1976d2;\n              border-color: #1565c0;\n            }\n            \n            &.level-1 {\n              background: #388e3c;\n              border-color: #2e7d32;\n            }\n            \n            &.level-2 {\n              background: #f57c00;\n              border-color: #ef6c00;\n            }\n          }\n        }\n      }\n    }\n  }\n  \n  .hierarchy-chart {\n    flex: 1;\n    min-height: 300px;\n    overflow: hidden;\n    position: relative;\n    \n    .chart-help {\n      position: absolute;\n      bottom: 10px;\n      left: 10px;\n      background: rgba(255, 255, 255, 0.9);\n      padding: 6px 10px;\n      border-radius: 4px;\n      border: 1px solid #e0e0e0;\n      z-index: 10;\n      \n      small {\n        font-size: 11px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        \n        i {\n          color: #2196f3;\n        }\n      }\n    }\n    \n    .empty-hierarchy {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 40px 20px;\n      text-align: center;\n      color: #666;\n      \n      i {\n        font-size: 64px;\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h4 {\n        margin: 0 0 12px 0;\n        font-size: 18px;\n        color: #333;\n      }\n      \n      p {\n        margin: 0 0 24px 0;\n        font-size: 14px;\n        color: #666;\n        line-height: 1.5;\n      }\n      \n      .create-subagent-btn {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        background: #2196f3;\n        border: none;\n        border-radius: 6px;\n        color: white;\n        font-size: 14px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: background 0.2s;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n  }\n  \n}\n\n//[_ngcontent-%COMP%]   Prompts[_ngcontent-%COMP%]   Section\n.prompts-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #f0f0f0;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .add-prompt-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #2196f3;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #1976d2;\n      }\n    }\n  }\n  \n  .prompts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 20px;\n    \n    .empty-prompts {\n      text-align: center;\n      padding: 40px 20px;\n      color: #666;\n      \n      i {\n        font-size: 48px;\n        margin-bottom: 16px;\n      }\n      \n      p {\n        margin: 0 0 20px 0;\n        font-size: 14px;\n      }\n      \n      .add-first-prompt-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 16px;\n        background: #2196f3;\n        border: none;\n        border-radius: 4px;\n        color: white;\n        cursor: pointer;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n    \n    .prompt-card {\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      margin-bottom: 12px;\n      \n      .prompt-header {\n        padding: 12px 16px;\n        border-bottom: 1px solid #e9ecef;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .prompt-info {\n          h4 {\n            margin: 0 0 4px 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #333;\n          }\n          \n          .prompt-type {\n            font-size: 11px;\n            padding: 2px 6px;\n            background: #007bff;\n            color: white;\n            border-radius: 3px;\n            text-transform: uppercase;\n          }\n        }\n        \n        .prompt-actions {\n          display: flex;\n          gap: 4px;\n          \n          .action-btn {\n            padding: 4px 8px;\n            background: none;\n            border: 1px solid #e0e0e0;\n            border-radius: 3px;\n            color: #666;\n            cursor: pointer;\n            font-size: 12px;\n            \n            &:hover {\n              background: #f0f0f0;\n              border-color: #ccc;\n            }\n            \n            &.danger:hover {\n              background: #dc3545;\n              border-color: #dc3545;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .prompt-content {\n        padding: 12px 16px;\n        \n        p {\n          margin: 0;\n          font-size: 12px;\n          color: #666;\n          line-height: 1.4;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Properties[_ngcontent-%COMP%]   Section\n.properties-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .save-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #28a745;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #218838;\n      }\n    }\n  }\n  \n  .properties-form {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    \n    .form-group {\n      margin-bottom: 16px;\n      \n      label {\n        display: block;\n        font-size: 12px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 4px;\n      }\n      \n      .form-input, .form-select, .form-textarea {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-size: 13px;\n        background: white;\n        box-sizing: border-box;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 60px;\n      }\n      \n      &.checkbox-group {\n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 500;\n          \n          input[type=\"checkbox\"] {\n            width: auto;\n            margin: 0;\n          }\n        }\n        \n        small {\n          display: block;\n          font-size: 11px;\n          color: #666;\n          margin-top: 4px;\n          margin-left: 24px;\n        }\n      }\n    }\n    \n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n//[_ngcontent-%COMP%]   Sub-Agent[_ngcontent-%COMP%]   Creation[_ngcontent-%COMP%]   Modal\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n  \n  .modal-header {\n    padding: 20px 24px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    \n    h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    \n    .close-btn {\n      background: none;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      color: #666;\n      border-radius: 4px;\n      \n      &:hover {\n        background: #f8f9fa;\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-body {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n    \n    .error-message {\n      background: #f8d7da;\n      border: 1px solid #f5c6cb;\n      border-radius: 6px;\n      padding: 12px;\n      margin-bottom: 20px;\n      color: #721c24;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      i {\n        color: #dc3545;\n      }\n    }\n    \n    .form-group {\n      margin-bottom: 20px;\n      \n      label {\n        display: block;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 8px;\n      }\n      \n      .form-input, .form-textarea {\n        width: 100%;\n        padding: 12px;\n        border: 1px solid #ddd;\n        border-radius: 6px;\n        font-size: 14px;\n        background: white;\n        box-sizing: border-box;\n        transition: border-color 0.2s;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n        \n        &::placeholder {\n          color: #999;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 80px;\n        font-family: inherit;\n      }\n    }\n    \n    .parent-info {\n      background: #f8f9fa;\n      border: 1px solid #e9ecef;\n      border-radius: 6px;\n      padding: 12px;\n      font-size: 14px;\n      color: #666;\n      \n      strong {\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-footer {\n    padding: 20px 24px;\n    border-top: 1px solid #e9ecef;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    \n    .cancel-btn, .create-btn {\n      padding: 10px 20px;\n      border: 1px solid;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n    \n    .cancel-btn {\n      background: white;\n      border-color: #ddd;\n      color: #666;\n      \n      &:hover:not(:disabled) {\n        background: #f8f9fa;\n        border-color: #ccc;\n      }\n    }\n    \n    .create-btn {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      &:hover:not(:disabled) {\n        background: #1976d2;\n        border-color: #1976d2;\n      }\n      \n      .loading-spinner-sm {\n        width: 14px;\n        height: 14px;\n        border: 2px solid transparent;\n        border-top-color: currentColor;\n        border-radius: 50%;\n        animation: _ngcontent-%COMP%_spin 1s linear infinite;\n      }\n    }\n  }\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentEditorComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-agent-editor', template: "<div class=\"agent-editor-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  <!-- Header -->\n  <div class=\"editor-header\">\n    <div class=\"header-info\">\n      <button \n        type=\"button\" \n        class=\"back-btn\"\n        (click)=\"closeEditor()\"\n        title=\"Back to Agent List\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        Back to Agents\n      </button>\n      \n      @if (currentAgent) {\n        <div class=\"agent-breadcrumb\">\n          <h2>{{ currentAgent.Name }}</h2>\n          @if (currentAgent.Parent) {\n            <span class=\"breadcrumb-item\">\n              <i class=\"fa-solid fa-chevron-right\"></i>\n              Child of {{ currentAgent.Parent }}\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Tab Navigation -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-navigation\">\n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'hierarchy'\"\n        (click)=\"setActiveTab('hierarchy')\">\n        <i class=\"fa-solid fa-sitemap\"></i>\n        Hierarchy\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'prompts'\"\n        (click)=\"setActiveTab('prompts')\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        Prompts\n      </button>\n      \n      <button \n        type=\"button\" \n        class=\"tab-btn\"\n        [class.active]=\"activeTab === 'properties'\"\n        (click)=\"setActiveTab('properties')\">\n        <i class=\"fa-solid fa-cog\"></i>\n        Properties\n      </button>\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n        </div>\n        <div class=\"loading-text\">Loading agent data...</div>\n      </div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <h3>Error Loading Agent</h3>\n        <p>{{ error }}</p>\n        <button class=\"retry-btn\" (click)=\"loadAgentData()\">\n          <i class=\"fa-solid fa-retry\"></i>\n          Retry\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Tab Content -->\n  @if (!isLoading && !error && currentAgent) {\n    <div class=\"tab-content\" mjFillContainer>\n      \n      <!-- Hierarchy Tab -->\n      @if (activeTab === 'hierarchy') {\n        <div class=\"hierarchy-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-sitemap\"></i>\n              Agent Hierarchy\n            </h3>\n            \n            <div class=\"hierarchy-controls\">\n              <div class=\"zoom-controls\">\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomIn()\"\n                  title=\"Zoom In\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"zoomOut()\"\n                  title=\"Zoom Out\">\n                  <i class=\"fa-solid fa-minus\"></i>\n                </button>\n                <button \n                  type=\"button\" \n                  class=\"zoom-btn\"\n                  (click)=\"resetZoom()\"\n                  title=\"Reset Zoom\">\n                  <i class=\"fa-solid fa-expand\"></i>\n                </button>\n              </div>\n              \n              <div class=\"hierarchy-legend\">\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-0\"></div>\n                  <span>Root</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-1\"></div>\n                  <span>Level 1</span>\n                </div>\n                <div class=\"legend-item\">\n                  <div class=\"legend-rect level-2\"></div>\n                  <span>Level 2+</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <div class=\"hierarchy-chart\" #hierarchyChart mjFillContainer>\n            <!-- Help text overlay -->\n            @if (hierarchyData && (hasChildren() || hasParent())) {\n              <div class=\"chart-help\">\n                <small>\n                  <i class=\"fa-solid fa-hand-pointer\"></i>\n                  Drag to pan \u2022 Use zoom controls or scroll to zoom \u2022 Click nodes to navigate\n                </small>\n              </div>\n            }\n            \n            <!-- Empty state for hierarchy -->\n            @if (!hierarchyData || (!hasChildren() && !hasParent())) {\n              <div class=\"empty-hierarchy\">\n                <i class=\"fa-solid fa-sitemap\"></i>\n                <h4>No Agent Hierarchy</h4>\n                <p>This agent doesn't have any parent or child agents yet.</p>\n                <button class=\"create-subagent-btn\" (click)=\"openCreateSubAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create Sub-Agent\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Prompts Tab -->\n      @if (activeTab === 'prompts') {\n        <div class=\"prompts-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-comment-dots\"></i>\n              Agent Prompts\n            </h3>\n            <button class=\"add-prompt-btn\" title=\"Add New Prompt\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Add Prompt\n            </button>\n          </div>\n          \n          <div class=\"prompts-list\">\n            @if (agentPrompts.length === 0) {\n              <div class=\"empty-prompts\">\n                <i class=\"fa-solid fa-comment-dots\"></i>\n                <p>No prompts configured for this agent</p>\n                <button class=\"add-first-prompt-btn\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Add First Prompt\n                </button>\n              </div>\n            } @else {\n              @for (prompt of agentPrompts; track prompt.id) {\n                <div class=\"prompt-card\">\n                  <div class=\"prompt-header\">\n                    <div class=\"prompt-info\">\n                      <h4>{{ prompt.name }}</h4>\n                      <span class=\"prompt-type\">{{ prompt.type }}</span>\n                    </div>\n                    <div class=\"prompt-actions\">\n                      <button class=\"action-btn\" title=\"Edit Prompt\">\n                        <i class=\"fa-solid fa-edit\"></i>\n                      </button>\n                      <button class=\"action-btn danger\" title=\"Delete Prompt\">\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    </div>\n                  </div>\n                  <div class=\"prompt-content\">\n                    <p>{{ prompt.content }}</p>\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n      \n      <!-- Properties Tab -->\n      @if (activeTab === 'properties') {\n        <div class=\"properties-section\" mjFillContainer>\n          <div class=\"section-header\">\n            <h3>\n              <i class=\"fa-solid fa-cog\"></i>\n              Agent Properties\n            </h3>\n            <button class=\"save-btn\" title=\"Save Changes\">\n              <i class=\"fa-solid fa-save\"></i>\n              Save\n            </button>\n          </div>\n          \n          <div class=\"properties-form\">\n            <div class=\"form-group\">\n              <label>Name</label>\n              <input \n                type=\"text\" \n                class=\"form-input\"\n                [value]=\"currentAgent.Name\"\n                placeholder=\"Agent name\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Description</label>\n              <textarea \n                class=\"form-textarea\"\n                [value]=\"currentAgent.Description\"\n                placeholder=\"Agent description\"\n                rows=\"3\"></textarea>\n            </div>\n            \n            <div class=\"form-row\">\n              <div class=\"form-group\">\n                <label>Execution Mode</label>\n                <select class=\"form-select\" [value]=\"currentAgent.ExecutionMode\">\n                  <option value=\"Sequential\">Sequential</option>\n                  <option value=\"Parallel\">Parallel</option>\n                </select>\n              </div>\n              \n              <div class=\"form-group\">\n                <label>Execution Order</label>\n                <input \n                  type=\"number\" \n                  class=\"form-input\"\n                  [value]=\"currentAgent.ExecutionOrder\"\n                  min=\"0\">\n              </div>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.ExposeAsAction\">\n                <span class=\"checkmark\"></span>\n                Expose as Action\n              </label>\n              <small>Allow this agent to be used as an action by other agents</small>\n            </div>\n            \n            <div class=\"form-group checkbox-group\">\n              <label class=\"checkbox-label\">\n                <input \n                  type=\"checkbox\" \n                  [checked]=\"currentAgent.EnableContextCompression\">\n                <span class=\"checkmark\"></span>\n                Enable Context Compression\n              </label>\n              <small>Automatically compress conversation context when threshold is reached</small>\n            </div>\n            \n            @if (currentAgent.EnableContextCompression) {\n              <div class=\"form-row\">\n                <div class=\"form-group\">\n                  <label>Message Threshold</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageThreshold\"\n                    min=\"1\"\n                    placeholder=\"Number of messages\">\n                </div>\n                \n                <div class=\"form-group\">\n                  <label>Retention Count</label>\n                  <input \n                    type=\"number\" \n                    class=\"form-input\"\n                    [value]=\"currentAgent.ContextCompressionMessageRetentionCount\"\n                    min=\"0\"\n                    placeholder=\"Messages to keep\">\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Sub-Agent Creation Modal -->\n  @if (showCreateSubAgent) {\n    <div class=\"modal-overlay\" (click)=\"closeCreateSubAgent()\">\n      <div class=\"create-subagent-modal\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>\n            <i class=\"fa-solid fa-plus\"></i>\n            Create Sub-Agent\n          </h3>\n          <button class=\"close-btn\" (click)=\"closeCreateSubAgent()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        \n        <div class=\"modal-body\">\n          @if (error) {\n            <div class=\"error-message\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              {{ error }}\n            </div>\n          }\n          \n          <div class=\"form-group\">\n            <label>Agent Name *</label>\n            <input \n              type=\"text\" \n              class=\"form-input\"\n              [(ngModel)]=\"newSubAgentName\"\n              placeholder=\"Enter agent name...\"\n              maxlength=\"255\"\n              [disabled]=\"isLoading\">\n          </div>\n          \n          <div class=\"form-group\">\n            <label>Description</label>\n            <textarea \n              class=\"form-textarea\"\n              [(ngModel)]=\"newSubAgentDescription\"\n              placeholder=\"Describe what this sub-agent will do...\"\n              rows=\"4\"\n              [disabled]=\"isLoading\"></textarea>\n          </div>\n          \n          <div class=\"parent-info\">\n            <strong>Parent Agent:</strong> {{ currentAgent?.Name }}\n          </div>\n        </div>\n        \n        <div class=\"modal-footer\">\n          <button \n            class=\"cancel-btn\" \n            (click)=\"closeCreateSubAgent()\"\n            [disabled]=\"isLoading\">\n            Cancel\n          </button>\n          <button \n            class=\"create-btn\" \n            (click)=\"createSubAgent()\"\n            [disabled]=\"!newSubAgentName.trim() || isLoading\">\n            @if (isLoading) {\n              <span class=\"loading-spinner-sm\"></span>\n              Creating...\n            } @else {\n              <i class=\"fa-solid fa-plus\"></i>\n              Create Sub-Agent\n            }\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: ["@use \"../../../../../../../dist/packages/Angular/Explorer/explorer-core/src/generic/generic-browse-list.component\";\n\n.agent-editor-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n.editor-header {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 16px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n  \n  .header-info {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    \n    .back-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      text-decoration: none;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #e9ecef;\n        border-color: #ccc;\n        color: #333;\n      }\n    }\n    \n    .agent-breadcrumb {\n      h2 {\n        margin: 0;\n        font-size: 24px;\n        font-weight: 600;\n        color: #333;\n      }\n      \n      .breadcrumb-item {\n        font-size: 14px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-top: 4px;\n      }\n    }\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 12px;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      color: #666;\n      font-size: 12px;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:hover {\n        background: #f8f9fa;\n        border-color: #2196f3;\n        color: #2196f3;\n      }\n      \n      &.active {\n        background: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n    }\n  }\n}\n\n// Tab Navigation\n.tab-navigation {\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  padding: 0 20px;\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  \n  .tab-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 3px solid transparent;\n    color: #666;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.2s;\n    \n    &:hover {\n      color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    &.active {\n      color: #2196f3;\n      border-bottom-color: #2196f3;\n      background: #f8f9fa;\n    }\n    \n    i {\n      font-size: 16px;\n    }\n  }\n}\n\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.loading-container, .error-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  \n  .loading-content, .error-content {\n    text-align: center;\n    \n    .loading-spinner {\n      position: relative;\n      width: 60px;\n      height: 60px;\n      margin: 0 auto 20px;\n    }\n    \n    .spinner-ring {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      border: 3px solid transparent;\n      border-radius: 50%;\n      animation: spin 1.5s linear infinite;\n      \n      &:nth-child(1) {\n        border-top-color: #2196f3;\n        animation-delay: 0s;\n      }\n      \n      &:nth-child(2) {\n        border-top-color: #9c27b0;\n        animation-delay: 0.3s;\n        transform: scale(0.8);\n      }\n      \n      &:nth-child(3) {\n        border-top-color: #ff6b35;\n        animation-delay: 0.6s;\n        transform: scale(0.6);\n      }\n    }\n    \n    .loading-text {\n      font-size: 16px;\n      color: #666;\n    }\n    \n    i {\n      font-size: 48px;\n      color: #dc3545;\n      margin-bottom: 16px;\n    }\n    \n    h3 {\n      margin: 0 0 8px 0;\n      color: #333;\n    }\n    \n    p {\n      margin: 0 0 16px 0;\n      color: #666;\n    }\n    \n    .retry-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #dc3545;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      cursor: pointer;\n      \n      &:hover {\n        background: #c82333;\n      }\n    }\n  }\n}\n\n.editor-content {\n  flex: 1;\n  overflow: hidden;\n}\n\n.main-splitter, .bottom-splitter {\n  height: 100%;\n  \n  .k-pane {\n    overflow: hidden;\n  }\n}\n\n// Hierarchy Section\n.hierarchy-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .hierarchy-controls {\n      display: flex;\n      align-items: center;\n      gap: 20px;\n      \n      .zoom-controls {\n        display: flex;\n        gap: 4px;\n        \n        .zoom-btn {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          background: white;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          color: #666;\n          cursor: pointer;\n          transition: all 0.2s;\n          \n          &:hover {\n            background: #f8f9fa;\n            border-color: #2196f3;\n            color: #2196f3;\n          }\n          \n          i {\n            font-size: 12px;\n          }\n        }\n      }\n      \n      .hierarchy-legend {\n        display: flex;\n        gap: 16px;\n        \n        .legend-item {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          font-size: 12px;\n          color: #666;\n          \n          .legend-rect {\n            width: 20px;\n            height: 12px;\n            border-radius: 2px;\n            border: 1px solid;\n            \n            &.level-0 {\n              background: #1976d2;\n              border-color: #1565c0;\n            }\n            \n            &.level-1 {\n              background: #388e3c;\n              border-color: #2e7d32;\n            }\n            \n            &.level-2 {\n              background: #f57c00;\n              border-color: #ef6c00;\n            }\n          }\n        }\n      }\n    }\n  }\n  \n  .hierarchy-chart {\n    flex: 1;\n    min-height: 300px;\n    overflow: hidden;\n    position: relative;\n    \n    .chart-help {\n      position: absolute;\n      bottom: 10px;\n      left: 10px;\n      background: rgba(255, 255, 255, 0.9);\n      padding: 6px 10px;\n      border-radius: 4px;\n      border: 1px solid #e0e0e0;\n      z-index: 10;\n      \n      small {\n        font-size: 11px;\n        color: #666;\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        \n        i {\n          color: #2196f3;\n        }\n      }\n    }\n    \n    .empty-hierarchy {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 40px 20px;\n      text-align: center;\n      color: #666;\n      \n      i {\n        font-size: 64px;\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h4 {\n        margin: 0 0 12px 0;\n        font-size: 18px;\n        color: #333;\n      }\n      \n      p {\n        margin: 0 0 24px 0;\n        font-size: 14px;\n        color: #666;\n        line-height: 1.5;\n      }\n      \n      .create-subagent-btn {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        background: #2196f3;\n        border: none;\n        border-radius: 6px;\n        color: white;\n        font-size: 14px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: background 0.2s;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n  }\n  \n}\n\n// Prompts Section\n.prompts-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #f0f0f0;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .add-prompt-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #2196f3;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #1976d2;\n      }\n    }\n  }\n  \n  .prompts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 20px;\n    \n    .empty-prompts {\n      text-align: center;\n      padding: 40px 20px;\n      color: #666;\n      \n      i {\n        font-size: 48px;\n        margin-bottom: 16px;\n      }\n      \n      p {\n        margin: 0 0 20px 0;\n        font-size: 14px;\n      }\n      \n      .add-first-prompt-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 16px;\n        background: #2196f3;\n        border: none;\n        border-radius: 4px;\n        color: white;\n        cursor: pointer;\n        \n        &:hover {\n          background: #1976d2;\n        }\n      }\n    }\n    \n    .prompt-card {\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 4px;\n      margin-bottom: 12px;\n      \n      .prompt-header {\n        padding: 12px 16px;\n        border-bottom: 1px solid #e9ecef;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .prompt-info {\n          h4 {\n            margin: 0 0 4px 0;\n            font-size: 14px;\n            font-weight: 600;\n            color: #333;\n          }\n          \n          .prompt-type {\n            font-size: 11px;\n            padding: 2px 6px;\n            background: #007bff;\n            color: white;\n            border-radius: 3px;\n            text-transform: uppercase;\n          }\n        }\n        \n        .prompt-actions {\n          display: flex;\n          gap: 4px;\n          \n          .action-btn {\n            padding: 4px 8px;\n            background: none;\n            border: 1px solid #e0e0e0;\n            border-radius: 3px;\n            color: #666;\n            cursor: pointer;\n            font-size: 12px;\n            \n            &:hover {\n              background: #f0f0f0;\n              border-color: #ccc;\n            }\n            \n            &.danger:hover {\n              background: #dc3545;\n              border-color: #dc3545;\n              color: white;\n            }\n          }\n        }\n      }\n      \n      .prompt-content {\n        padding: 12px 16px;\n        \n        p {\n          margin: 0;\n          font-size: 12px;\n          color: #666;\n          line-height: 1.4;\n        }\n      }\n    }\n  }\n}\n\n// Properties Section\n.properties-section {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: white;\n  \n  .section-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid #f0f0f0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-shrink: 0;\n    \n    h3 {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .save-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #28a745;\n      border: none;\n      border-radius: 4px;\n      color: white;\n      font-size: 12px;\n      cursor: pointer;\n      \n      &:hover {\n        background: #218838;\n      }\n    }\n  }\n  \n  .properties-form {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    \n    .form-group {\n      margin-bottom: 16px;\n      \n      label {\n        display: block;\n        font-size: 12px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 4px;\n      }\n      \n      .form-input, .form-select, .form-textarea {\n        width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        font-size: 13px;\n        background: white;\n        box-sizing: border-box;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 60px;\n      }\n      \n      &.checkbox-group {\n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 13px;\n          font-weight: 500;\n          \n          input[type=\"checkbox\"] {\n            width: auto;\n            margin: 0;\n          }\n        }\n        \n        small {\n          display: block;\n          font-size: 11px;\n          color: #666;\n          margin-top: 4px;\n          margin-left: 24px;\n        }\n      }\n    }\n    \n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n  }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n// Sub-Agent Creation Modal\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.create-subagent-modal {\n  background: white;\n  border-radius: 8px;\n  width: 100%;\n  max-width: 500px;\n  max-height: calc(100vh - 40px);\n  min-height: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n  position: relative;\n  \n  .modal-header {\n    padding: 20px 24px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    \n    h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    \n    .close-btn {\n      background: none;\n      border: none;\n      padding: 8px;\n      cursor: pointer;\n      color: #666;\n      border-radius: 4px;\n      \n      &:hover {\n        background: #f8f9fa;\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-body {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n    \n    .error-message {\n      background: #f8d7da;\n      border: 1px solid #f5c6cb;\n      border-radius: 6px;\n      padding: 12px;\n      margin-bottom: 20px;\n      color: #721c24;\n      font-size: 14px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      i {\n        color: #dc3545;\n      }\n    }\n    \n    .form-group {\n      margin-bottom: 20px;\n      \n      label {\n        display: block;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        margin-bottom: 8px;\n      }\n      \n      .form-input, .form-textarea {\n        width: 100%;\n        padding: 12px;\n        border: 1px solid #ddd;\n        border-radius: 6px;\n        font-size: 14px;\n        background: white;\n        box-sizing: border-box;\n        transition: border-color 0.2s;\n        \n        &:focus {\n          outline: none;\n          border-color: #2196f3;\n        }\n        \n        &::placeholder {\n          color: #999;\n        }\n      }\n      \n      .form-textarea {\n        resize: vertical;\n        min-height: 80px;\n        font-family: inherit;\n      }\n    }\n    \n    .parent-info {\n      background: #f8f9fa;\n      border: 1px solid #e9ecef;\n      border-radius: 6px;\n      padding: 12px;\n      font-size: 14px;\n      color: #666;\n      \n      strong {\n        color: #333;\n      }\n    }\n  }\n  \n  .modal-footer {\n    padding: 20px 24px;\n    border-top: 1px solid #e9ecef;\n    display: flex;\n    justify-content: flex-end;\n    gap: 12px;\n    \n    .cancel-btn, .create-btn {\n      padding: 10px 20px;\n      border: 1px solid;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n    }\n    \n    .cancel-btn {\n      background: white;\n      border-color: #ddd;\n      color: #666;\n      \n      &:hover:not(:disabled) {\n        background: #f8f9fa;\n        border-color: #ccc;\n      }\n    }\n    \n    .create-btn {\n      background: #2196f3;\n      border-color: #2196f3;\n      color: white;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      \n      &:hover:not(:disabled) {\n        background: #1976d2;\n        border-color: #1976d2;\n      }\n      \n      .loading-spinner-sm {\n        width: 14px;\n        height: 14px;\n        border: 2px solid transparent;\n        border-top-color: currentColor;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n      }\n    }\n  }\n}"] }]
+    }], null, { agentId: [{
+            type: Input
+        }], close: [{
+            type: Output
+        }], openAgent: [{
+            type: Output
+        }], hierarchyChartRef: [{
+            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 }); })();
+//# sourceMappingURL=agent-editor.component.js.map