@memberjunction/ng-core-entity-forms 5.0.0 → 5.2.0

package/dist/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.js

@@ -1,2014 +0,0 @@
-import { Component, ViewChild, Input, Output, EventEmitter, HostListener } from '@angular/core';
-import { Subject, debounceTime, takeUntil } from 'rxjs';
-import { Metadata } from '@memberjunction/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-dialog";
-import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-layout";
-import * as i4 from "@progress/kendo-angular-dropdowns";
-const _c0 = ["reteContainer"];
-function FlowAgentDiagramComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵelement(1, "i", 6);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "Loading flow diagram...");
-    i0.ɵɵelementEnd()();
-} }
-function FlowAgentDiagramComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "i", 7);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.error);
-} }
-function FlowAgentDiagramComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵelement(1, "i", 8);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "No workflow steps to display");
-    i0.ɵɵelementEnd()();
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_5_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.autoArrange()); });
-    i0.ɵɵelement(1, "i", 30);
-    i0.ɵɵtext(2, " Auto Arrange ");
-    i0.ɵɵelementEnd();
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 31);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_5_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.cancelConnectionMode()); });
-    i0.ɵɵelement(1, "i", 32);
-    i0.ɵɵtext(2, " Cancel Connection ");
-    i0.ɵɵelementEnd();
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.addNewStep()); });
-    i0.ɵɵelement(1, "i", 26);
-    i0.ɵɵtext(2, " Add Step ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, FlowAgentDiagramComponent_Conditional_4_Conditional_5_Conditional_3_Template, 3, 0, "button", 27)(4, FlowAgentDiagramComponent_Conditional_4_Conditional_5_Conditional_4_Template, 3, 0, "button", 28);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(false ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.connectionMode ? 4 : -1);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path", 21);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("d", ctx_r0.tempConnection.path);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵtext(1, " Click on a target step to create connection ");
-    i0.ɵɵelementEnd();
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_18_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.connectFromContextMenu()); });
-    i0.ɵɵelement(1, "i", 36);
-    i0.ɵɵtext(2, " Connect To... ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 37);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_18_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.deleteFromContextMenu()); });
-    i0.ɵɵelement(4, "i", 38);
-    i0.ɵɵtext(5, " Delete Step ");
-    i0.ɵɵelementEnd();
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 37);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_18_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.deletePathFromContextMenu()); });
-    i0.ɵɵelement(1, "i", 38);
-    i0.ɵɵtext(2, " Delete Path ");
-    i0.ɵɵelementEnd();
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_18_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r6); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵtemplate(1, FlowAgentDiagramComponent_Conditional_4_Conditional_18_Conditional_1_Template, 6, 0)(2, FlowAgentDiagramComponent_Conditional_4_Conditional_18_Conditional_2_Template, 3, 0, "button", 34);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("left", ctx_r0.contextMenu.x, "px")("top", ctx_r0.contextMenu.y, "px");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.contextMenu.type === "step" ? 1 : ctx_r0.contextMenu.type === "path" ? 2 : -1);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 43);
-    i0.ɵɵtext(1, " Step Properties ");
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
-    i0.ɵɵtext(1, " Path Properties ");
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 53);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_6_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedStep.Name, $event) || (ctx_r0.selectedStep.Name = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("blur", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_6_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.saveStepProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedStep.Name);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedStep.Name);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 54);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_11_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedStep.StepType, $event) || (ctx_r0.selectedStep.StepType = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_11_Template_kendo_dropdownlist_valueChange_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.saveStepProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("data", ctx_r0.stepTypes);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedStep.StepType);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedStep.StepType);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 55);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_16_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedStep.Description, $event) || (ctx_r0.selectedStep.Description = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("blur", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_16_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.saveStepProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedStep.Description);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedStep.Description || "No description");
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dropdownlist", 54);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_21_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedStep.Status, $event) || (ctx_r0.selectedStep.Status = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_21_Template_kendo_dropdownlist_valueChange_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.saveStepProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("data", ctx_r0.stepStatuses);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedStep.Status);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedStep.Status);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 57);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_6_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(5); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedStep.ActionInputMapping, $event) || (ctx_r0.selectedStep.ActionInputMapping = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("blur", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_6_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.saveStepProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedStep.ActionInputMapping);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedStep.ActionInputMapping || "None");
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 57);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_11_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(5); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedStep.ActionOutputMapping, $event) || (ctx_r0.selectedStep.ActionOutputMapping = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("blur", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_11_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.saveStepProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedStep.ActionOutputMapping);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedStep.ActionOutputMapping || "None");
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45)(1, "h5");
-    i0.ɵɵtext(2, "Action Configuration");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 46)(4, "div", 47);
-    i0.ɵɵtext(5, "Input Mapping");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_6_Template, 1, 1, "textarea", 56)(7, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_7_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 46)(9, "div", 47);
-    i0.ɵɵtext(10, "Output Mapping");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_11_Template, 1, 1, "textarea", 56)(12, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Conditional_12_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 6 : 7);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 11 : 12);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "button", 58);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_24_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.deleteSelectedStep()); });
-    i0.ɵɵelement(2, "i", 38);
-    i0.ɵɵtext(3, " Delete Step ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 59);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.connectFromStep()); });
-    i0.ɵɵelement(5, "i", 36);
-    i0.ɵɵtext(6, " Connect To... ");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("disabled", ctx_r0.connectionMode);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45)(1, "h5");
-    i0.ɵɵtext(2, "Basic Information");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 46)(4, "div", 47);
-    i0.ɵɵtext(5, "Name");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_6_Template, 1, 1, "input", 48)(7, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_7_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 46)(9, "div", 47);
-    i0.ɵɵtext(10, "Type");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(11, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_11_Template, 1, 2, "kendo-dropdownlist", 50)(12, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_12_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 46)(14, "div", 47);
-    i0.ɵɵtext(15, "Description");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(16, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_16_Template, 1, 1, "textarea", 51)(17, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_17_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 46)(19, "div", 47);
-    i0.ɵɵtext(20, "Status");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(21, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_21_Template, 1, 2, "kendo-dropdownlist", 50)(22, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_22_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(23, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_23_Template, 13, 2, "div", 45)(24, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Conditional_24_Template, 7, 1, "div", 52);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 6 : 7);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 11 : 12);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 16 : 17);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 21 : 22);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.selectedStep.StepType === "Action" ? 23 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.EditMode ? 24 : -1);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 55);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_16_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedPath.Condition, $event) || (ctx_r0.selectedPath.Condition = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("blur", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_16_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.savePathProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedPath.Condition);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedPath.Condition || "No condition");
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 61);
-    i0.ɵɵtwoWayListener("ngModelChange", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_21_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedPath.Priority, $event) || (ctx_r0.selectedPath.Priority = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("blur", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_21_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.savePathProperties()); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedPath.Priority);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.selectedPath.Priority);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "button", 58);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.deleteSelectedPath()); });
-    i0.ɵɵelement(2, "i", 38);
-    i0.ɵɵtext(3, " Delete Path ");
-    i0.ɵɵelementEnd()();
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45)(1, "h5");
-    i0.ɵɵtext(2, "Path Information");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 46)(4, "div", 47);
-    i0.ɵɵtext(5, "From Step");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 49);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 46)(9, "div", 47);
-    i0.ɵɵtext(10, "To Step");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 49);
-    i0.ɵɵtext(12);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 46)(14, "div", 47);
-    i0.ɵɵtext(15, "Condition");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(16, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_16_Template, 1, 1, "textarea", 51)(17, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_17_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 46)(19, "div", 47);
-    i0.ɵɵtext(20, "Priority");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(21, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_21_Template, 1, 1, "input", 60)(22, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_22_Template, 2, 1, "div", 49);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(23, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Conditional_23_Template, 4, 0, "div", 52);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate(ctx_r0.getStepName(ctx_r0.selectedPath.OriginStepID));
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r0.getStepName(ctx_r0.selectedPath.DestinationStepID));
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 16 : 17);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 21 : 22);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 23 : -1);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-splitter-pane", 24)(1, "div", 39)(2, "div", 40)(3, "h4");
-    i0.ɵɵtemplate(4, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_4_Template, 2, 0)(5, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_5_Template, 2, 0);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 41);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Conditional_19_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.closeProperties()); });
-    i0.ɵɵelement(7, "i", 32);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 42);
-    i0.ɵɵtemplate(9, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_9_Template, 25, 6)(10, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Conditional_10_Template, 24, 5);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("size", "300px")("min", "250px")("max", "400px")("collapsible", true);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r0.selectedItem.type === "step" ? 4 : 5);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r0.selectedItem.type === "step" ? 9 : 10);
-} }
-function FlowAgentDiagramComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-splitter", 5)(1, "kendo-splitter-pane", 9)(2, "div", 10, 0)(4, "div", 11);
-    i0.ɵɵtemplate(5, FlowAgentDiagramComponent_Conditional_4_Conditional_5_Template, 5, 2);
-    i0.ɵɵelementStart(6, "div", 12)(7, "button", 13);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.zoomIn()); });
-    i0.ɵɵelement(8, "i", 14);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 15);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.zoomOut()); });
-    i0.ɵɵelement(10, "i", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 17);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.resetZoom()); });
-    i0.ɵɵelement(12, "i", 18);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 19);
-    i0.ɵɵtext(14);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(15, "svg", 20);
-    i0.ɵɵlistener("click", function FlowAgentDiagramComponent_Conditional_4_Template_svg_click_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSvgClick($event)); })("contextmenu", function FlowAgentDiagramComponent_Conditional_4_Template_svg_contextmenu_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSvgContextMenu($event)); })("wheel", function FlowAgentDiagramComponent_Conditional_4_Template_svg_wheel_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onWheel($event)); })("mousedown", function FlowAgentDiagramComponent_Conditional_4_Template_svg_mousedown_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSvgMouseDown($event)); })("mousemove", function FlowAgentDiagramComponent_Conditional_4_Template_svg_mousemove_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSvgMouseMove($event)); })("mouseup", function FlowAgentDiagramComponent_Conditional_4_Template_svg_mouseup_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSvgMouseUp($event)); });
-    i0.ɵɵtemplate(16, FlowAgentDiagramComponent_Conditional_4_Conditional_16_Template, 1, 1, ":svg:path", 21);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(17, FlowAgentDiagramComponent_Conditional_4_Conditional_17_Template, 2, 0, "div", 22)(18, FlowAgentDiagramComponent_Conditional_4_Conditional_18_Template, 3, 5, "div", 23);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(19, FlowAgentDiagramComponent_Conditional_4_Conditional_19_Template, 11, 6, "kendo-splitter-pane", 24);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("collapsible", false);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r0.EditMode ? 5 : -1);
-    i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate1("", (ctx_r0.panZoom.scale * 100).toFixed(0), "%");
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("connection-mode", ctx_r0.connectionMode);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.tempConnection ? 16 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.connectionMode ? 17 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.contextMenu.visible ? 18 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.selectedItem ? 19 : -1);
-} }
-export class FlowAgentDiagramComponent {
-    constructor(dialogService) {
-        this.dialogService = dialogService;
-        this.agentId = null;
-        this.steps = [];
-        this.paths = [];
-        this.EditMode = false;
-        this.stepsChanged = new EventEmitter();
-        this.pathsChanged = new EventEmitter();
-        this.loading = true;
-        this.error = null;
-        // Selection state
-        this.selectedItem = null;
-        this.selectedStep = null;
-        this.selectedPath = null;
-        // Connection mode state
-        this.connectionMode = false;
-        this.connectionSourceStepId = null;
-        this.tempConnection = null;
-        // Context menu state
-        this.contextMenu = {
-            visible: false,
-            x: 0,
-            y: 0,
-            type: null,
-            targetId: null
-        };
-        // Dropdown data
-        this.stepTypes = ['Action', 'Sub-Agent', 'Prompt'];
-        this.stepStatuses = ['Active', 'Disabled', 'Testing'];
-        // Pan and zoom state
-        this.panZoom = {
-            scale: 1,
-            translateX: 0,
-            translateY: 0,
-            isPanning: false,
-            startX: 0,
-            startY: 0
-        };
-        this.destroy$ = new Subject();
-        this.nodeElements = new Map();
-        this.connectionElements = new Map();
-        this.positionChanges$ = new Subject();
-        this.dragState = {
-            isDragging: false,
-            element: null,
-            stepId: null,
-            startX: 0,
-            startY: 0,
-            startTransform: { x: 0, y: 0 }
-        };
-        this.onMouseMove = (event) => {
-            if (!this.dragState.isDragging || !this.dragState.element)
-                return;
-            // Get SVG element and calculate mouse position in SVG coordinates
-            const svg = this.dragState.element.ownerSVGElement;
-            if (!svg)
-                return;
-            const pt = svg.createSVGPoint();
-            pt.x = event.clientX;
-            pt.y = event.clientY;
-            const svgP = pt.matrixTransform(svg.getScreenCTM()?.inverse());
-            const dx = svgP.x - this.dragState.startX;
-            const dy = svgP.y - this.dragState.startY;
-            const newX = this.dragState.startTransform.x + dx;
-            const newY = this.dragState.startTransform.y + dy;
-            // Update element position
-            this.dragState.element.setAttribute('transform', `translate(${newX}, ${newY})`);
-            // Update connections
-            this.updateConnections();
-        };
-        this.onMouseUp = (event) => {
-            if (!this.dragState.isDragging || !this.dragState.element || !this.dragState.stepId)
-                return;
-            this.dragState.element.classList.remove('dragging');
-            // Get final position
-            const transform = this.dragState.element.getAttribute('transform');
-            const match = transform?.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-            if (match) {
-                const x = Math.round(parseFloat(match[1]));
-                const y = Math.round(parseFloat(match[2]));
-                // Emit position change for saving
-                this.positionChanges$.next({ stepId: this.dragState.stepId, x, y });
-            }
-            // Clean up
-            this.dragState = {
-                isDragging: false,
-                element: null,
-                stepId: null,
-                startX: 0,
-                startY: 0,
-                startTransform: { x: 0, y: 0 }
-            };
-            document.removeEventListener('mousemove', this.onMouseMove);
-            document.removeEventListener('mouseup', this.onMouseUp);
-        };
-    }
-    ngOnInit() {
-        // Initial setup will happen in ngAfterViewInit when container is ready
-        // Subscribe to position changes with debounce
-        this.positionChanges$.pipe(debounceTime(500), // Save after 500ms of no movement
-        takeUntil(this.destroy$)).subscribe(change => {
-            this.saveStepPosition(change.stepId, change.x, change.y);
-        });
-    }
-    ngAfterViewInit() {
-        // Defer initialization to ensure container is ready
-        setTimeout(() => {
-            this.initializeDiagram();
-        }, 0);
-    }
-    ngOnChanges(changes) {
-        if (changes['steps'] || changes['paths']) {
-            // Initialize diagram when data is provided or changes
-            if (this.reteContainer) {
-                this.initializeDiagram();
-            }
-            else {
-                // If container not ready yet, just update loading state
-                this.loading = false;
-            }
-        }
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.cleanup();
-        // Clean up any active drag state
-        if (this.dragState.isDragging) {
-            document.removeEventListener('mousemove', this.onMouseMove);
-            document.removeEventListener('mouseup', this.onMouseUp);
-        }
-    }
-    async initializeDiagram() {
-        if (!this.reteContainer) {
-            this.loading = false;
-            return;
-        }
-        // If no steps, just show empty state
-        if (!this.steps || this.steps.length === 0) {
-            this.loading = false;
-            this.error = null;
-            return;
-        }
-        this.loading = true;
-        this.error = null;
-        try {
-            // Clean up previous instance if exists
-            this.cleanup();
-            // Get the SVG element
-            const container = this.reteContainer.nativeElement;
-            const svg = container.querySelector('svg');
-            if (!svg) {
-                throw new Error('SVG element not found');
-            }
-            // Clear the SVG
-            while (svg.firstChild) {
-                svg.removeChild(svg.firstChild);
-            }
-            // Create defs for arrow markers
-            const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-            const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
-            marker.setAttribute('id', 'arrowhead');
-            marker.setAttribute('markerWidth', '10');
-            marker.setAttribute('markerHeight', '7');
-            marker.setAttribute('refX', '9');
-            marker.setAttribute('refY', '3.5');
-            marker.setAttribute('orient', 'auto');
-            const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-            polygon.setAttribute('points', '0 0, 10 3.5, 0 7');
-            polygon.setAttribute('fill', '#4a90e2');
-            marker.appendChild(polygon);
-            defs.appendChild(marker);
-            svg.appendChild(defs);
-            // Create main group for zoom/pan
-            const mainGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-            svg.appendChild(mainGroup);
-            // Create nodes and connections
-            await this.createNodesAndConnections(mainGroup);
-            // Auto-arrange nodes
-            await this.arrangeNodes();
-            // Fit to view
-            this.fitToView(svg, mainGroup);
-            this.loading = false;
-        }
-        catch (error) {
-            this.error = 'Failed to initialize flow diagram';
-            this.loading = false;
-        }
-    }
-    createNodeElement(step) {
-        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-        g.setAttribute('class', 'step-node');
-        g.setAttribute('data-step-id', step.ID);
-        // Add event handlers
-        g.addEventListener('mousedown', (e) => this.onNodeMouseDown(e, step.ID));
-        g.addEventListener('click', (e) => this.onNodeClick(e, step.ID));
-        g.addEventListener('contextmenu', (e) => this.onNodeContextMenu(e, step.ID));
-        g.style.cursor = this.EditMode ? 'move' : 'pointer';
-        const nodeWidth = 140;
-        const nodeHeight = 80;
-        const headerHeight = 35; // Increased from 30 for better text margin
-        // Create rectangle background
-        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        rect.setAttribute('width', nodeWidth.toString());
-        rect.setAttribute('height', nodeHeight.toString());
-        rect.setAttribute('rx', '6');
-        rect.setAttribute('fill', step.StartingStep ? '#f0fff4' : 'white');
-        rect.setAttribute('stroke', step.StartingStep ? '#28a745' : '#4a90e2');
-        rect.setAttribute('stroke-width', '2');
-        g.appendChild(rect);
-        // Create title background
-        const titleBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        titleBg.setAttribute('width', nodeWidth.toString());
-        titleBg.setAttribute('height', headerHeight.toString());
-        titleBg.setAttribute('rx', '6');
-        titleBg.setAttribute('fill', step.StartingStep ? '#28a745' : '#4a90e2');
-        g.appendChild(titleBg);
-        // Fix bottom corners of title background
-        const titleFix = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-        titleFix.setAttribute('y', (headerHeight - 6).toString());
-        titleFix.setAttribute('width', nodeWidth.toString());
-        titleFix.setAttribute('height', '6');
-        titleFix.setAttribute('fill', step.StartingStep ? '#28a745' : '#4a90e2');
-        g.appendChild(titleFix);
-        // Create title text with text wrapping
-        const titleWords = (step.Name || 'Unnamed Step').split(' ');
-        const lines = [];
-        let currentLine = '';
-        const maxCharsPerLine = 18;
-        for (const word of titleWords) {
-            if ((currentLine + word).length > maxCharsPerLine && currentLine) {
-                lines.push(currentLine.trim());
-                currentLine = word + ' ';
-            }
-            else {
-                currentLine += word + ' ';
-            }
-        }
-        if (currentLine)
-            lines.push(currentLine.trim());
-        // Add icon for step type or starting step using simple text symbols
-        const iconText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        iconText.setAttribute('x', '15');
-        iconText.setAttribute('y', (headerHeight / 2 + 5).toString());
-        iconText.setAttribute('fill', 'white');
-        iconText.setAttribute('font-size', '16');
-        iconText.setAttribute('font-weight', 'bold');
-        if (step.StartingStep) {
-            iconText.textContent = '▶'; // Play symbol for start
-        }
-        else if (step.StepType === 'Action') {
-            iconText.textContent = '⚙'; // Gear symbol for action
-        }
-        else if (step.StepType === 'Sub-Agent') {
-            iconText.textContent = '🤖'; // Robot emoji for sub-agent
-        }
-        else if (step.StepType === 'Prompt') {
-            iconText.textContent = '💬'; // Speech bubble for prompt
-        }
-        else {
-            iconText.textContent = '●'; // Circle (default)
-        }
-        g.appendChild(iconText);
-        // Render title lines (shifted right to accommodate icon)
-        const lineHeight = 12;
-        const startY = headerHeight / 2 - (lines.length - 1) * lineHeight / 2 + 2; // Added 2px margin
-        lines.forEach((line, index) => {
-            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            text.setAttribute('x', ((nodeWidth / 2) + 10).toString()); // Shifted right for icon
-            text.setAttribute('y', (startY + index * lineHeight).toString());
-            text.setAttribute('fill', 'white');
-            text.setAttribute('font-weight', '600');
-            text.setAttribute('font-size', '11');
-            text.setAttribute('text-anchor', 'middle');
-            text.setAttribute('class', 'step-node-title');
-            text.textContent = line;
-            g.appendChild(text);
-        });
-        // Add step type if available
-        if (step.StepType) {
-            const typeText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            typeText.setAttribute('x', (nodeWidth / 2).toString());
-            typeText.setAttribute('y', (headerHeight + 20).toString());
-            typeText.setAttribute('fill', '#666');
-            typeText.setAttribute('font-size', '10');
-            typeText.setAttribute('text-anchor', 'middle');
-            typeText.textContent = step.StepType;
-            g.appendChild(typeText);
-        }
-        // Add status if not active
-        if (step.Status && step.Status !== 'Active') {
-            const statusText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            statusText.setAttribute('x', (nodeWidth / 2).toString());
-            statusText.setAttribute('y', (headerHeight + 35).toString());
-            statusText.setAttribute('fill', step.Status === 'Disabled' ? '#c00' : '#f57c00');
-            statusText.setAttribute('font-size', '10');
-            statusText.setAttribute('text-anchor', 'middle');
-            statusText.textContent = `[${step.Status}]`;
-            g.appendChild(statusText);
-        }
-        // Add sockets
-        const socketY = nodeHeight / 2;
-        if (!step.StartingStep) {
-            // Input socket
-            const inputSocket = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            inputSocket.setAttribute('cx', '0');
-            inputSocket.setAttribute('cy', socketY.toString());
-            inputSocket.setAttribute('r', '5');
-            inputSocket.setAttribute('fill', 'white');
-            inputSocket.setAttribute('stroke', '#4a90e2');
-            inputSocket.setAttribute('stroke-width', '2');
-            inputSocket.setAttribute('class', 'input-socket');
-            // Add drop zone handler for input socket
-            if (this.EditMode) {
-                inputSocket.addEventListener('mouseenter', (e) => this.onSocketMouseEnter(e, step.ID, 'input'));
-                inputSocket.addEventListener('mouseleave', (e) => this.onSocketMouseLeave(e));
-                inputSocket.addEventListener('mouseup', (e) => this.onSocketMouseUp(e, step.ID, 'input'));
-            }
-            g.appendChild(inputSocket);
-        }
-        // Add multiple output sockets for different conditions
-        const paths = this.paths.filter(p => p.OriginStepID === step.ID);
-        if (paths.length > 1) {
-            // Multiple outputs - distribute them vertically
-            const spacing = Math.min(20, (nodeHeight - 20) / (paths.length - 1));
-            const startY = socketY - (paths.length - 1) * spacing / 2;
-            paths.forEach((path, index) => {
-                const outputSocket = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-                outputSocket.setAttribute('cx', nodeWidth.toString());
-                outputSocket.setAttribute('cy', (startY + index * spacing).toString());
-                outputSocket.setAttribute('r', '5');
-                outputSocket.setAttribute('fill', 'white');
-                outputSocket.setAttribute('stroke', '#4a90e2');
-                outputSocket.setAttribute('stroke-width', '2');
-                outputSocket.setAttribute('data-path-id', path.ID);
-                outputSocket.setAttribute('class', 'output-socket');
-                // Add drag handlers for socket
-                if (this.EditMode) {
-                    outputSocket.addEventListener('mousedown', (e) => this.onSocketMouseDown(e, step.ID, 'output'));
-                    outputSocket.style.cursor = 'crosshair';
-                }
-                g.appendChild(outputSocket);
-            });
-        }
-        else {
-            // Single output socket
-            const outputSocket = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            outputSocket.setAttribute('cx', nodeWidth.toString());
-            outputSocket.setAttribute('cy', socketY.toString());
-            outputSocket.setAttribute('r', '5');
-            outputSocket.setAttribute('fill', 'white');
-            outputSocket.setAttribute('stroke', '#4a90e2');
-            outputSocket.setAttribute('stroke-width', '2');
-            outputSocket.setAttribute('class', 'output-socket');
-            // Add drag handlers for socket
-            if (this.EditMode) {
-                outputSocket.addEventListener('mousedown', (e) => this.onSocketMouseDown(e, step.ID, 'output'));
-                outputSocket.style.cursor = 'crosshair';
-            }
-            g.appendChild(outputSocket);
-        }
-        return g;
-    }
-    createConnectionElement(fromPos, toPos, pathData) {
-        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-        g.setAttribute('class', 'connection-group');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        // Calculate control points for a nice curve
-        const dx = toPos.x - fromPos.x;
-        const dy = toPos.y - fromPos.y;
-        const cx1 = fromPos.x + dx * 0.5;
-        const cy1 = fromPos.y;
-        const cx2 = toPos.x - dx * 0.5;
-        const cy2 = toPos.y;
-        const d = `M ${fromPos.x} ${fromPos.y} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${toPos.x} ${toPos.y}`;
-        path.setAttribute('d', d);
-        path.setAttribute('fill', 'none');
-        path.setAttribute('stroke', '#4a90e2');
-        path.setAttribute('stroke-width', '2');
-        path.setAttribute('marker-end', 'url(#arrowhead)');
-        path.setAttribute('class', 'connection-path');
-        path.setAttribute('data-path-id', pathData?.ID || '');
-        // Add click handler
-        g.addEventListener('click', (e) => {
-            if (pathData) {
-                this.onPathClick(e, pathData.ID);
-            }
-        });
-        // Add context menu handler
-        g.addEventListener('contextmenu', (e) => {
-            if (pathData) {
-                this.onPathContextMenu(e, pathData.ID);
-            }
-        });
-        g.style.cursor = 'pointer';
-        g.appendChild(path);
-        // Add condition label if present
-        if (pathData?.Condition) {
-            const midX = (fromPos.x + toPos.x) / 2;
-            const midY = (fromPos.y + toPos.y) / 2;
-            // Truncate condition text if too long
-            const maxConditionLength = 100;
-            const conditionText = pathData.Condition.length > maxConditionLength
-                ? pathData.Condition.substring(0, maxConditionLength - 3) + '...'
-                : pathData.Condition;
-            // Measure text width (approximate)
-            const charWidth = 6;
-            const padding = 10;
-            const textWidth = conditionText.length * charWidth + padding * 2;
-            const rectWidth = Math.min(textWidth, 200); // Max width 200px
-            // Background rect for better readability
-            const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-            bgRect.setAttribute('x', (midX - rectWidth / 2).toString());
-            bgRect.setAttribute('y', (midY - 10).toString());
-            bgRect.setAttribute('width', rectWidth.toString());
-            bgRect.setAttribute('height', '20');
-            bgRect.setAttribute('fill', 'white');
-            bgRect.setAttribute('stroke', '#4a90e2');
-            bgRect.setAttribute('stroke-width', '1');
-            bgRect.setAttribute('rx', '3');
-            bgRect.setAttribute('opacity', '0.95');
-            g.appendChild(bgRect);
-            // Condition text
-            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-            text.setAttribute('x', midX.toString());
-            text.setAttribute('y', (midY + 4).toString());
-            text.setAttribute('fill', '#4a90e2');
-            text.setAttribute('font-size', '10');
-            text.setAttribute('text-anchor', 'middle');
-            text.setAttribute('class', 'condition-label');
-            // Wrap text if needed
-            if (conditionText.length > 30) {
-                const words = conditionText.split(' ');
-                let line1 = '';
-                let line2 = '';
-                let currentLine = 1;
-                for (const word of words) {
-                    if (currentLine === 1 && line1.length + word.length < 30) {
-                        line1 += (line1 ? ' ' : '') + word;
-                    }
-                    else {
-                        currentLine = 2;
-                        line2 += (line2 ? ' ' : '') + word;
-                    }
-                }
-                if (line2) {
-                    // Adjust rect height for two lines
-                    bgRect.setAttribute('height', '30');
-                    bgRect.setAttribute('y', (midY - 15).toString());
-                    // First line
-                    const tspan1 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-                    tspan1.setAttribute('x', midX.toString());
-                    tspan1.setAttribute('dy', '-5');
-                    tspan1.textContent = line1;
-                    text.appendChild(tspan1);
-                    // Second line
-                    const tspan2 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-                    tspan2.setAttribute('x', midX.toString());
-                    tspan2.setAttribute('dy', '12');
-                    tspan2.textContent = line2;
-                    text.appendChild(tspan2);
-                }
-                else {
-                    text.textContent = conditionText;
-                }
-            }
-            else {
-                text.textContent = conditionText;
-            }
-            g.appendChild(text);
-        }
-        return g;
-    }
-    async createNodesAndConnections(container) {
-        const nodeMap = new Map();
-        // Create nodes for each step
-        for (const step of this.steps) {
-            const nodeElement = this.createNodeElement(step);
-            container.appendChild(nodeElement);
-            nodeMap.set(step.ID, { element: nodeElement, step });
-            this.nodeElements.set(step.ID, nodeElement);
-        }
-        // Create connections based on paths
-        for (const path of this.paths) {
-            const fromNode = nodeMap.get(path.OriginStepID);
-            const toNode = nodeMap.get(path.DestinationStepID);
-            if (fromNode && toNode) {
-                // Get positions (will be set properly after arrangement)
-                const nodeWidth = 140;
-                const nodeHeight = 80;
-                const fromPos = { x: nodeWidth, y: nodeHeight / 2 }; // Default output socket position
-                const toPos = { x: 0, y: nodeHeight / 2 }; // Input socket position
-                const connectionElement = this.createConnectionElement(fromPos, toPos, path);
-                connectionElement.setAttribute('data-from', path.OriginStepID);
-                connectionElement.setAttribute('data-to', path.DestinationStepID);
-                connectionElement.setAttribute('data-path-id', path.ID);
-                // Insert connections before nodes so they appear behind
-                container.insertBefore(connectionElement, container.firstChild);
-                this.connectionElements.set(`${path.OriginStepID}-${path.DestinationStepID}`, connectionElement);
-            }
-        }
-    }
-    async arrangeNodes() {
-        const startingNodes = this.steps.filter(s => s.StartingStep);
-        const otherNodes = this.steps.filter(s => !s.StartingStep);
-        const xSpacing = 280; // Increased from 200 for better visibility of conditions
-        const ySpacing = 150; // Increased from 120 for better vertical spacing
-        const startX = 50;
-        const startY = 50;
-        // Check if any steps have saved positions
-        const hasPositions = this.steps.some(s => s.PositionX !== 0 || s.PositionY !== 0);
-        if (hasPositions) {
-            // Use saved positions
-            for (const step of this.steps) {
-                const element = this.nodeElements.get(step.ID);
-                if (element) {
-                    const x = step.PositionX || startX;
-                    const y = step.PositionY || startY;
-                    element.setAttribute('transform', `translate(${x}, ${y})`);
-                }
-            }
-        }
-        else {
-            // Auto-layout when no positions are saved
-            // Position starting nodes on the left
-            let y = startY;
-            for (const step of startingNodes) {
-                const element = this.nodeElements.get(step.ID);
-                if (element) {
-                    element.setAttribute('transform', `translate(${startX}, ${y})`);
-                }
-                y += ySpacing;
-            }
-            // Create a simple tree layout for other nodes
-            // Group nodes by their distance from start
-            const nodeDepths = new Map();
-            const visited = new Set();
-            // BFS to calculate depths
-            const queue = [];
-            startingNodes.forEach(node => {
-                queue.push({ id: node.ID, depth: 0 });
-                nodeDepths.set(node.ID, 0);
-            });
-            while (queue.length > 0) {
-                const { id, depth } = queue.shift();
-                if (visited.has(id))
-                    continue;
-                visited.add(id);
-                // Find all nodes connected from this one
-                const outgoingPaths = this.paths.filter(p => p.OriginStepID === id);
-                for (const path of outgoingPaths) {
-                    const targetStep = this.steps.find(s => s.ID === path.DestinationStepID);
-                    if (targetStep && !visited.has(targetStep.ID)) {
-                        nodeDepths.set(targetStep.ID, depth + 1);
-                        queue.push({ id: targetStep.ID, depth: depth + 1 });
-                    }
-                }
-            }
-            // Group nodes by depth
-            const nodesByDepth = new Map();
-            for (const step of this.steps) {
-                const depth = nodeDepths.get(step.ID) || 0;
-                if (!nodesByDepth.has(depth)) {
-                    nodesByDepth.set(depth, []);
-                }
-                nodesByDepth.get(depth).push(step);
-            }
-            // Position nodes by depth
-            for (const [depth, nodes] of nodesByDepth) {
-                const x = startX + depth * xSpacing;
-                const totalHeight = (nodes.length - 1) * ySpacing;
-                const startYForDepth = startY + (y - startY - totalHeight) / 2;
-                nodes.forEach((node, index) => {
-                    const element = this.nodeElements.get(node.ID);
-                    if (element) {
-                        element.setAttribute('transform', `translate(${x}, ${startYForDepth + index * ySpacing})`);
-                    }
-                });
-            }
-        }
-        // Update connection paths based on node positions
-        this.updateConnections();
-    }
-    updateConnections() {
-        for (const [key, connectionGroup] of this.connectionElements) {
-            const fromId = connectionGroup.getAttribute('data-from');
-            const toId = connectionGroup.getAttribute('data-to');
-            const pathId = connectionGroup.getAttribute('data-path-id');
-            if (fromId && toId) {
-                const fromElement = this.nodeElements.get(fromId);
-                const toElement = this.nodeElements.get(toId);
-                if (fromElement && toElement) {
-                    const fromTransform = fromElement.getAttribute('transform');
-                    const toTransform = toElement.getAttribute('transform');
-                    const fromMatch = fromTransform?.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-                    const toMatch = toTransform?.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-                    if (fromMatch && toMatch) {
-                        const nodeWidth = 140;
-                        const nodeHeight = 80;
-                        const socketY = nodeHeight / 2;
-                        // Get the proper output socket Y position for this path
-                        const fromPaths = this.paths.filter(p => p.OriginStepID === fromId);
-                        let fromY = parseInt(fromMatch[2]) + socketY;
-                        if (fromPaths.length > 1) {
-                            // Find this path's index to determine socket position
-                            const pathIndex = fromPaths.findIndex(p => p.ID === pathId);
-                            if (pathIndex !== -1) {
-                                const spacing = Math.min(20, (nodeHeight - 20) / (fromPaths.length - 1));
-                                const startY = socketY - (fromPaths.length - 1) * spacing / 2;
-                                fromY = parseInt(fromMatch[2]) + startY + pathIndex * spacing;
-                            }
-                        }
-                        const fromX = parseInt(fromMatch[1]) + nodeWidth; // Output socket
-                        const toX = parseInt(toMatch[1]); // Input socket
-                        const toY = parseInt(toMatch[2]) + socketY;
-                        // Update path element
-                        const pathElement = connectionGroup.querySelector('path');
-                        if (pathElement) {
-                            const dx = toX - fromX;
-                            const cx1 = fromX + dx * 0.5;
-                            const cy1 = fromY;
-                            const cx2 = toX - dx * 0.5;
-                            const cy2 = toY;
-                            const d = `M ${fromX} ${fromY} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${toX} ${toY}`;
-                            pathElement.setAttribute('d', d);
-                        }
-                        // Update condition label position if present
-                        const conditionRect = connectionGroup.querySelector('rect');
-                        const conditionText = connectionGroup.querySelector('.condition-label');
-                        if (conditionRect && conditionText) {
-                            const midX = (fromX + toX) / 2;
-                            const midY = (fromY + toY) / 2;
-                            // Get rect width to center it properly
-                            const rectWidth = parseFloat(conditionRect.getAttribute('width') || '80');
-                            const rectHeight = parseFloat(conditionRect.getAttribute('height') || '20');
-                            conditionRect.setAttribute('x', (midX - rectWidth / 2).toString());
-                            conditionRect.setAttribute('y', (midY - rectHeight / 2).toString());
-                            // Update text position
-                            conditionText.setAttribute('x', midX.toString());
-                            if (rectHeight > 20) {
-                                // Multi-line text
-                                const tspans = conditionText.querySelectorAll('tspan');
-                                tspans.forEach((tspan, index) => {
-                                    tspan.setAttribute('x', midX.toString());
-                                });
-                            }
-                            else {
-                                conditionText.setAttribute('y', (midY + 4).toString());
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-    fitToView(svg, container) {
-        const bbox = container.getBBox();
-        const padding = 40;
-        // Add extra zoom out by increasing the viewBox
-        const zoomFactor = 1.2; // 20% zoom out
-        const width = bbox.width * zoomFactor;
-        const height = bbox.height * zoomFactor;
-        const x = bbox.x - padding - (width - bbox.width) / 2;
-        const y = bbox.y - padding - (height - bbox.height) / 2;
-        const viewBox = `${x} ${y} ${width + 2 * padding} ${height + 2 * padding}`;
-        svg.setAttribute('viewBox', viewBox);
-    }
-    truncateText(text, maxLength) {
-        if (text.length <= maxLength)
-            return text;
-        return text.substring(0, maxLength - 3) + '...';
-    }
-    cleanup() {
-        this.nodeElements.clear();
-        this.connectionElements.clear();
-    }
-    onNodeMouseDown(event, stepId) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Only allow dragging in edit mode
-        if (!this.EditMode)
-            return;
-        const element = this.nodeElements.get(stepId);
-        if (!element)
-            return;
-        // Get current transform
-        const transform = element.getAttribute('transform');
-        const match = transform?.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-        if (!match)
-            return;
-        // Get SVG element and calculate mouse position in SVG coordinates
-        const svg = element.ownerSVGElement;
-        if (!svg)
-            return;
-        const pt = svg.createSVGPoint();
-        pt.x = event.clientX;
-        pt.y = event.clientY;
-        const svgP = pt.matrixTransform(svg.getScreenCTM()?.inverse());
-        this.dragState = {
-            isDragging: true,
-            element: element,
-            stepId: stepId,
-            startX: svgP.x,
-            startY: svgP.y,
-            startTransform: {
-                x: parseFloat(match[1]),
-                y: parseFloat(match[2])
-            }
-        };
-        element.classList.add('dragging');
-        // Add document-level event listeners
-        document.addEventListener('mousemove', this.onMouseMove);
-        document.addEventListener('mouseup', this.onMouseUp);
-    }
-    async saveStepPosition(stepId, x, y) {
-        const step = this.steps.find(s => s.ID === stepId);
-        if (!step)
-            return;
-        try {
-            step.PositionX = Math.round(x);
-            step.PositionY = Math.round(y);
-            // Save the step
-            const result = await step.Save();
-            if (!result) {
-                // Failed to save step position
-            }
-        }
-        catch (error) {
-            // Error saving step position
-        }
-    }
-    async addNewStep() {
-        try {
-            const md = new Metadata();
-            const newStep = await md.GetEntityObject('MJ: AI Agent Steps');
-            // Set default values
-            newStep.AgentID = this.agentId;
-            newStep.Name = 'New Step';
-            newStep.StepType = 'Action';
-            newStep.Status = 'Active';
-            newStep.StartingStep = this.steps.length === 0; // First step is starting step
-            // Find a good position for the new step
-            let x = 350;
-            let y = 50;
-            if (this.steps.length > 0) {
-                // Place it to the right of existing steps
-                const maxX = Math.max(...this.steps.map(s => s.PositionX || 0));
-                x = maxX + 280;
-                // Center vertically
-                const avgY = this.steps.reduce((sum, s) => sum + (s.PositionY || 0), 0) / this.steps.length;
-                y = avgY;
-            }
-            newStep.PositionX = Math.round(x);
-            newStep.PositionY = Math.round(y);
-            const result = await newStep.Save();
-            if (result) {
-                // Add to steps array
-                this.steps.push(newStep);
-                // Recreate diagram
-                await this.initializeDiagram();
-                // Select the new step
-                this.selectStep(newStep.ID);
-                // Emit change
-                this.stepsChanged.emit();
-            }
-        }
-        catch (error) {
-            alert('Failed to create new step');
-        }
-    }
-    async autoArrange() {
-        // Reset all positions to 0,0 to trigger auto-layout
-        for (const step of this.steps) {
-            step.PositionX = 0;
-            step.PositionY = 0;
-        }
-        // Re-arrange nodes
-        await this.arrangeNodes();
-        // Save all positions
-        for (const step of this.steps) {
-            const element = this.nodeElements.get(step.ID);
-            if (element) {
-                const transform = element.getAttribute('transform');
-                const match = transform?.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-                if (match) {
-                    const x = Math.round(parseFloat(match[1]));
-                    const y = Math.round(parseFloat(match[2]));
-                    await this.saveStepPosition(step.ID, x, y);
-                }
-            }
-        }
-    }
-    // Selection handling
-    onNodeClick(event, stepId) {
-        event.stopPropagation();
-        if (this.connectionMode) {
-            // Handle connection creation
-            this.handleConnectionCreation(stepId);
-        }
-        else {
-            // Handle selection
-            this.selectStep(stepId);
-        }
-    }
-    onPathClick(event, pathId) {
-        event.stopPropagation();
-        this.selectPath(pathId);
-    }
-    selectStep(stepId) {
-        // Clear previous selection
-        this.clearSelection();
-        // Set new selection
-        this.selectedItem = { type: 'step', id: stepId };
-        this.selectedStep = this.steps.find(s => s.ID === stepId) || null;
-        this.selectedPath = null;
-        // Update visual selection
-        const element = this.nodeElements.get(stepId);
-        if (element) {
-            element.classList.add('selected');
-        }
-    }
-    selectPath(pathId) {
-        // Clear previous selection
-        this.clearSelection();
-        // Set new selection
-        this.selectedItem = { type: 'path', id: pathId };
-        this.selectedPath = this.paths.find(p => p.ID === pathId) || null;
-        this.selectedStep = null;
-        // Update visual selection
-        const element = this.connectionElements.get(pathId);
-        if (element) {
-            const path = element.querySelector('path');
-            if (path) {
-                path.classList.add('selected');
-            }
-        }
-    }
-    clearSelection() {
-        // Clear visual selection
-        this.nodeElements.forEach(element => {
-            element.classList.remove('selected');
-        });
-        this.connectionElements.forEach(element => {
-            const path = element.querySelector('path');
-            if (path) {
-                path.classList.remove('selected');
-            }
-        });
-    }
-    closeProperties() {
-        this.selectedItem = null;
-        this.selectedStep = null;
-        this.selectedPath = null;
-        this.clearSelection();
-    }
-    // Connection mode handling
-    connectFromStep() {
-        if (!this.selectedStep)
-            return;
-        this.connectionMode = true;
-        this.connectionSourceStepId = this.selectedStep.ID;
-        this.closeProperties();
-    }
-    cancelConnectionMode() {
-        this.connectionMode = false;
-        this.connectionSourceStepId = null;
-        this.tempConnection = null;
-    }
-    async handleConnectionCreation(targetStepId) {
-        if (!this.connectionSourceStepId || this.connectionSourceStepId === targetStepId) {
-            this.cancelConnectionMode();
-            return;
-        }
-        try {
-            // Create new path entity
-            const md = new Metadata();
-            const newPath = await md.GetEntityObject('MJ: AI Agent Step Paths');
-            newPath.OriginStepID = this.connectionSourceStepId;
-            newPath.DestinationStepID = targetStepId;
-            newPath.Priority = 0;
-            newPath.Condition = '';
-            const result = await newPath.Save();
-            if (result) {
-                // Add to paths array
-                this.paths.push(newPath);
-                // Recreate the diagram to show new path
-                await this.initializeDiagram();
-                // Emit change
-                this.pathsChanged.emit();
-                // Select the new path
-                this.selectPath(newPath.ID);
-            }
-        }
-        catch (error) {
-            alert('Failed to create connection');
-        }
-        finally {
-            this.cancelConnectionMode();
-        }
-    }
-    onSvgClick(event) {
-        // Clear selection if clicking on empty space
-        if (event.target === event.currentTarget) {
-            this.closeProperties();
-        }
-        // Hide context menu
-        this.contextMenu.visible = false;
-    }
-    onSvgContextMenu(event) {
-        event.preventDefault();
-        // Hide context menu if right-clicking on empty space
-        this.contextMenu.visible = false;
-    }
-    // Document click handler to hide context menu
-    onDocumentClick(event) {
-        // Hide context menu when clicking outside
-        if (this.contextMenu.visible) {
-            this.contextMenu.visible = false;
-        }
-    }
-    // Mouse move handler for magnetic connection
-    onDocumentMouseMove(event) {
-        if (this.connectionMode && this.connectionSourceStepId) {
-            this.updateTempConnection(event);
-        }
-    }
-    updateTempConnection(event) {
-        if (!this.reteContainer)
-            return;
-        const svg = this.reteContainer.nativeElement.querySelector('svg');
-        if (!svg)
-            return;
-        const sourceElement = this.nodeElements.get(this.connectionSourceStepId);
-        if (!sourceElement)
-            return;
-        // Get source position
-        const sourceTransform = sourceElement.getAttribute('transform');
-        const sourceMatch = sourceTransform?.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-        if (!sourceMatch)
-            return;
-        const sourceX = parseFloat(sourceMatch[1]) + 140; // node width
-        const sourceY = parseFloat(sourceMatch[2]) + 40; // half height
-        // Get mouse position in SVG coordinates
-        const pt = svg.createSVGPoint();
-        pt.x = event.clientX;
-        pt.y = event.clientY;
-        const svgP = pt.matrixTransform(svg.getScreenCTM()?.inverse());
-        // Create bezier path
-        const dx = svgP.x - sourceX;
-        const cx1 = sourceX + dx * 0.5;
-        const cy1 = sourceY;
-        const cx2 = svgP.x - dx * 0.5;
-        const cy2 = svgP.y;
-        this.tempConnection = {
-            path: `M ${sourceX} ${sourceY} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${svgP.x} ${svgP.y}`
-        };
-    }
-    // Property editing methods
-    async saveStepProperties() {
-        if (!this.selectedStep)
-            return;
-        try {
-            const result = await this.selectedStep.Save();
-            if (result) {
-                // Don't reinitialize the diagram - just emit change event
-                this.stepsChanged.emit();
-            }
-        }
-        catch (error) {
-            alert('Failed to save step properties');
-        }
-    }
-    async savePathProperties() {
-        if (!this.selectedPath)
-            return;
-        try {
-            const result = await this.selectedPath.Save();
-            if (result) {
-                // Don't reinitialize the diagram - just emit change event
-                this.pathsChanged.emit();
-            }
-        }
-        catch (error) {
-            alert('Failed to save path properties');
-        }
-    }
-    async showConfirmDialog(title, content) {
-        const dialog = this.dialogService.open({
-            title: title,
-            content: content,
-            actions: [
-                { text: 'No', primary: false },
-                { text: 'Yes', primary: true, themeColor: 'primary' }
-            ],
-            width: 450,
-            height: 200
-        });
-        try {
-            const result = await dialog.result;
-            return !!(result && result.text === 'Yes');
-        }
-        catch {
-            // Dialog was closed with X button or ESC
-            return false;
-        }
-    }
-    async deleteSelectedStep() {
-        if (!this.selectedStep)
-            return;
-        const confirmed = await this.showConfirmDialog('Delete Step', `Are you sure you want to delete the step "${this.selectedStep.Name}"? This will also delete all connected paths.`);
-        if (!confirmed)
-            return;
-        try {
-            // Delete all paths connected to this step
-            const connectedPaths = this.paths.filter(p => p.OriginStepID === this.selectedStep.ID ||
-                p.DestinationStepID === this.selectedStep.ID);
-            for (const path of connectedPaths) {
-                const pathResult = await path.Delete();
-                if (!pathResult) {
-                    // Log the error details
-                    if (path.LatestResult) {
-                        console.error('Failed to delete path:', {
-                            pathId: path.ID,
-                            error: path.LatestResult.CompleteMessage
-                        });
-                    }
-                    alert('Failed to delete connected paths. Cannot delete step.');
-                    return;
-                }
-            }
-            // Delete the step
-            const result = await this.selectedStep.Delete();
-            if (result) {
-                // Remove from arrays
-                this.steps = this.steps.filter(s => s.ID !== this.selectedStep.ID);
-                this.paths = this.paths.filter(p => p.OriginStepID !== this.selectedStep.ID &&
-                    p.DestinationStepID !== this.selectedStep.ID);
-                // Close properties
-                this.closeProperties();
-                // Recreate diagram
-                await this.initializeDiagram();
-                // Emit changes
-                this.stepsChanged.emit();
-                this.pathsChanged.emit();
-            }
-            else {
-                // Log the error details
-                if (this.selectedStep.LatestResult) {
-                    console.error('Failed to delete step:', {
-                        stepId: this.selectedStep.ID,
-                        stepName: this.selectedStep.Name,
-                        error: this.selectedStep.LatestResult.CompleteMessage
-                    });
-                }
-                alert('Failed to delete step. Please check the console for details.');
-            }
-        }
-        catch (error) {
-            console.error('Exception while deleting step:', error);
-            alert('Failed to delete step. Please ensure all related connections are removed first.');
-        }
-    }
-    async deleteSelectedPath() {
-        if (!this.selectedPath)
-            return;
-        const confirmed = await this.showConfirmDialog('Delete Connection', 'Are you sure you want to delete this connection?');
-        if (!confirmed)
-            return;
-        try {
-            const result = await this.selectedPath.Delete();
-            if (result) {
-                // Remove from array
-                this.paths = this.paths.filter(p => p.ID !== this.selectedPath.ID);
-                // Close properties
-                this.closeProperties();
-                // Recreate diagram
-                await this.initializeDiagram();
-                // Emit change
-                this.pathsChanged.emit();
-            }
-            else {
-                // Log the error details
-                if (this.selectedPath.LatestResult) {
-                    console.error('Failed to delete path:', {
-                        pathId: this.selectedPath.ID,
-                        originStepId: this.selectedPath.OriginStepID,
-                        destinationStepId: this.selectedPath.DestinationStepID,
-                        error: this.selectedPath.LatestResult.CompleteMessage
-                    });
-                }
-                alert('Failed to delete connection. Please check the console for details.');
-            }
-        }
-        catch (error) {
-            console.error('Exception while deleting path:', error);
-            alert('Failed to delete connection');
-        }
-    }
-    getStepName(stepId) {
-        const step = this.steps.find(s => s.ID === stepId);
-        return step?.Name || 'Unknown Step';
-    }
-    // Pan and zoom methods
-    zoomIn() {
-        this.panZoom.scale = Math.min(this.panZoom.scale * 1.2, 3);
-        this.updateTransform();
-    }
-    zoomOut() {
-        this.panZoom.scale = Math.max(this.panZoom.scale / 1.2, 0.3);
-        this.updateTransform();
-    }
-    resetZoom() {
-        this.panZoom.scale = 1;
-        this.panZoom.translateX = 0;
-        this.panZoom.translateY = 0;
-        this.updateTransform();
-    }
-    onWheel(event) {
-        event.preventDefault();
-        const delta = event.deltaY > 0 ? 0.9 : 1.1;
-        this.panZoom.scale = Math.max(0.3, Math.min(3, this.panZoom.scale * delta));
-        this.updateTransform();
-    }
-    onSvgMouseDown(event) {
-        if (event.button === 0 && !this.connectionMode && event.target === event.currentTarget) {
-            this.panZoom.isPanning = true;
-            this.panZoom.startX = event.clientX - this.panZoom.translateX;
-            this.panZoom.startY = event.clientY - this.panZoom.translateY;
-            event.preventDefault();
-        }
-    }
-    onSvgMouseMove(event) {
-        if (this.panZoom.isPanning) {
-            this.panZoom.translateX = event.clientX - this.panZoom.startX;
-            this.panZoom.translateY = event.clientY - this.panZoom.startY;
-            this.updateTransform();
-        }
-    }
-    onSvgMouseUp(event) {
-        this.panZoom.isPanning = false;
-    }
-    updateTransform() {
-        const svg = this.reteContainer?.nativeElement?.querySelector('svg');
-        if (svg) {
-            const mainGroup = svg.querySelector('g');
-            if (mainGroup) {
-                mainGroup.setAttribute('transform', `translate(${this.panZoom.translateX}, ${this.panZoom.translateY}) scale(${this.panZoom.scale})`);
-            }
-        }
-    }
-    // Context menu methods
-    onNodeContextMenu(event, stepId) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.EditMode)
-            return;
-        // Show context menu
-        const rect = this.reteContainer.nativeElement.getBoundingClientRect();
-        this.contextMenu = {
-            visible: true,
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
-            type: 'step',
-            targetId: stepId
-        };
-        // Select the step
-        this.selectStep(stepId);
-    }
-    onPathContextMenu(event, pathId) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (!this.EditMode)
-            return;
-        // Show context menu
-        const rect = this.reteContainer.nativeElement.getBoundingClientRect();
-        this.contextMenu = {
-            visible: true,
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
-            type: 'path',
-            targetId: pathId
-        };
-        // Select the path
-        this.selectPath(pathId);
-    }
-    connectFromContextMenu() {
-        if (this.contextMenu.targetId) {
-            this.contextMenu.visible = false;
-            this.connectFromStep();
-        }
-    }
-    deleteFromContextMenu() {
-        if (this.contextMenu.targetId) {
-            this.contextMenu.visible = false;
-            this.deleteSelectedStep();
-        }
-    }
-    deletePathFromContextMenu() {
-        if (this.contextMenu.targetId) {
-            this.contextMenu.visible = false;
-            this.deleteSelectedPath();
-        }
-    }
-    // Socket drag-and-drop handlers
-    onSocketMouseDown(event, stepId, socketType) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (socketType === 'output') {
-            // Start connection from output socket
-            this.connectionMode = true;
-            this.connectionSourceStepId = stepId;
-            // Create temp connection that follows mouse
-            const sourceNode = this.nodeElements.get(stepId);
-            if (sourceNode) {
-                const transform = sourceNode.getAttribute('transform');
-                const match = transform?.match(/translate\(([-\d.]+),\s*([-\d.]+)\)/);
-                if (match) {
-                    const nodeX = parseFloat(match[1]);
-                    const nodeY = parseFloat(match[2]);
-                    const outputX = nodeX + 140; // Node width
-                    const outputY = nodeY + 40; // Node height / 2
-                    // Start tracking mouse for temp connection
-                    this.updateTempConnection(event);
-                }
-            }
-        }
-    }
-    onSocketMouseEnter(event, stepId, socketType) {
-        if (this.connectionMode && socketType === 'input' && stepId !== this.connectionSourceStepId) {
-            // Highlight socket when hovering during connection mode
-            const socket = event.target;
-            socket.setAttribute('r', '7');
-            socket.setAttribute('fill', '#4a90e2');
-        }
-    }
-    onSocketMouseLeave(event) {
-        if (this.connectionMode) {
-            // Remove highlight
-            const socket = event.target;
-            socket.setAttribute('r', '5');
-            socket.setAttribute('fill', 'white');
-        }
-    }
-    onSocketMouseUp(event, stepId, socketType) {
-        if (this.connectionMode && socketType === 'input' && this.connectionSourceStepId && stepId !== this.connectionSourceStepId) {
-            // Complete the connection
-            event.stopPropagation();
-            this.handleConnectionCreation(stepId);
-        }
-    }
-    static { this.ɵfac = function FlowAgentDiagramComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowAgentDiagramComponent)(i0.ɵɵdirectiveInject(i1.DialogService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowAgentDiagramComponent, selectors: [["mj-flow-agent-diagram"]], viewQuery: function FlowAgentDiagramComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reteContainer = _t.first);
-        } }, hostBindings: function FlowAgentDiagramComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("click", function FlowAgentDiagramComponent_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, false, i0.ɵɵresolveDocument)("mousemove", function FlowAgentDiagramComponent_mousemove_HostBindingHandler($event) { return ctx.onDocumentMouseMove($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { agentId: "agentId", steps: "steps", paths: "paths", EditMode: "EditMode" }, outputs: { stepsChanged: "stepsChanged", pathsChanged: "pathsChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 5, vars: 1, consts: [["reteContainer", ""], [1, "flow-diagram-container"], [1, "loading-state"], [1, "error-state"], [1, "empty-state"], ["orientation", "horizontal", 2, "height", "100%"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-info-circle"], [3, "collapsible"], [1, "rete-container"], [1, "diagram-toolbar"], [1, "zoom-controls"], ["title", "Zoom in", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom out", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset zoom", 3, "click"], [1, "fa-solid", "fa-compress"], [1, "zoom-level"], ["width", "100%", "height", "100%", 1, "rete-svg", 3, "click", "contextmenu", "wheel", "mousedown", "mousemove", "mouseup"], ["fill", "none", "stroke", "#4a90e2", "stroke-width", "2", "stroke-dasharray", "5,5", "opacity", "0.6"], [1, "connection-hint"], [1, "context-menu", 3, "left", "top"], [3, "size", "min", "max", "collapsible"], ["title", "Add new step", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Auto-arrange nodes"], [1, "connection-mode-active"], ["title", "Auto-arrange nodes", 3, "click"], [1, "fa-solid", "fa-magic"], [1, "connection-mode-active", 3, "click"], [1, "fa-solid", "fa-times"], [1, "context-menu", 3, "click"], [1, "danger"], [3, "click"], [1, "fa-solid", "fa-link"], [1, "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "properties-pane"], [1, "properties-header"], ["title", "Close", 3, "click"], [1, "properties-content"], [1, "fa-solid", "fa-circle-nodes"], [1, "fa-solid", "fa-route"], [1, "property-group"], [1, "property-item"], [1, "property-label"], ["type", "text", 1, "property-input", 3, "ngModel"], [1, "property-value"], [3, "data", "ngModel"], ["rows", "3", 1, "property-textarea", 3, "ngModel"], [1, "property-actions"], ["type", "text", 1, "property-input", 3, "ngModelChange", "blur", "ngModel"], [3, "ngModelChange", "valueChange", "data", "ngModel"], ["rows", "3", 1, "property-textarea", 3, "ngModelChange", "blur", "ngModel"], ["rows", "2", 1, "property-textarea", 3, "ngModel"], ["rows", "2", 1, "property-textarea", 3, "ngModelChange", "blur", "ngModel"], [1, "danger-button", 3, "click"], [3, "click", "disabled"], ["type", "number", 1, "property-input", 3, "ngModel"], ["type", "number", 1, "property-input", 3, "ngModelChange", "blur", "ngModel"]], template: function FlowAgentDiagramComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, FlowAgentDiagramComponent_Conditional_1_Template, 4, 0, "div", 2)(2, FlowAgentDiagramComponent_Conditional_2_Template, 4, 1, "div", 3)(3, FlowAgentDiagramComponent_Conditional_3_Template, 4, 0, "div", 4)(4, FlowAgentDiagramComponent_Conditional_4_Template, 20, 9, "kendo-splitter", 5);
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.loading ? 1 : ctx.error ? 2 : !ctx.steps || ctx.steps.length === 0 ? 3 : 4);
-        } }, dependencies: [i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.NgControlStatus, i2.NgModel, i3.SplitterComponent, i3.SplitterPaneComponent, i4.DropDownListComponent], styles: [".flow-diagram-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 600px;\n      min-height: 400px;\n      max-height: 1200px;\n      position: relative;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      overflow: auto;\n      resize: vertical;\n    }\n    \n    .flow-diagram-container[_ngcontent-%COMP%]::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      width: 20px;\n      height: 20px;\n      cursor: ns-resize;\n      background: linear-gradient(135deg, transparent 50%, #999 50%);\n      border-bottom-right-radius: 4px;\n      pointer-events: none;\n    }\n    \n    .diagram-toolbar[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 10px;\n      right: 10px;\n      left: 10px;\n      display: flex;\n      gap: 5px;\n      z-index: 10;\n      background: white;\n      padding: 5px;\n      border-radius: 4px;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n      justify-content: space-between;\n    }\n    \n    .zoom-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n    }\n    \n    .zoom-level[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n      margin-left: 8px;\n    }\n    \n    .diagram-toolbar[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n      padding: 5px 10px;\n      border: 1px solid #ddd;\n      background: white;\n      border-radius: 3px;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    \n    .diagram-toolbar[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n      background: #f0f0f0;\n      border-color: #4a90e2;\n    }\n    \n    .diagram-toolbar[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 14px;\n    }\n    \n    .rete-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n    }\n    \n    .rete-svg[_ngcontent-%COMP%] {\n      min-width: 100%;\n      min-height: 100%;\n    }\n    \n    .loading-state[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%], .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      gap: 0.5rem;\n      color: #666;\n    }\n    \n    .error-state[_ngcontent-%COMP%] {\n      color: #c00;\n    }\n    \n    .empty-state[_ngcontent-%COMP%] {\n      flex-direction: column;\n    }\n    \n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 2rem;\n      opacity: 0.5;\n    }\n    \n    [_nghost-%COMP%]     .step-node {\n      cursor: move;\n    }\n    \n    [_nghost-%COMP%]     .step-node.dragging {\n      opacity: 0.8;\n    }\n    \n    [_nghost-%COMP%]     .step-node-title {\n      font-family: Arial, sans-serif;\n    }\n    \n    [_nghost-%COMP%]     .connection-path {\n      cursor: pointer;\n    }\n    \n    [_nghost-%COMP%]     .connection-path:hover {\n      stroke-width: 3;\n    }\n    \n    .context-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n      padding: 5px 0;\n      min-width: 150px;\n      z-index: 1000;\n      display: none;\n    }\n    \n    .context-menu.show[_ngcontent-%COMP%] {\n      display: block;\n    }\n    \n    .context-menu-item[_ngcontent-%COMP%] {\n      padding: 8px 15px;\n      cursor: pointer;\n      font-size: 13px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .context-menu-item[_ngcontent-%COMP%]:hover {\n      background: #f0f0f0;\n    }\n    \n    .context-menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      text-align: center;\n    }\n    \n    .context-menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 5px 0;\n    }\n    \n    .properties-pane[_ngcontent-%COMP%] {\n      height: 100%;\n      background: white;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    .connection-mode-active[_ngcontent-%COMP%] {\n      background: #ff4444 !important;\n      color: white !important;\n      border-color: #ff4444 !important;\n    }\n    \n    .rete-svg.connection-mode[_ngcontent-%COMP%] {\n      cursor: crosshair;\n    }\n    \n    .connection-hint[_ngcontent-%COMP%] {\n      position: absolute;\n      bottom: 20px;\n      left: 50%;\n      transform: translateX(-50%);\n      background: rgba(0, 0, 0, 0.8);\n      color: white;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n    }\n    \n    .context-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      background: white;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n      z-index: 1000;\n      padding: 4px 0;\n      min-width: 150px;\n    }\n    \n    .context-menu[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      padding: 8px 16px;\n      border: none;\n      background: none;\n      text-align: left;\n      cursor: pointer;\n      font-size: 13px;\n      transition: background-color 0.2s;\n    }\n    \n    .context-menu[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n      background-color: #f0f0f0;\n    }\n    \n    .context-menu[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%] {\n      color: #c00;\n    }\n    \n    .context-menu[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%]:hover {\n      background-color: #fee;\n    }\n    \n    .context-menu[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 8px;\n      width: 16px;\n      text-align: center;\n    }\n    \n    .properties-header[_ngcontent-%COMP%] {\n      padding: 10px 15px;\n      border-bottom: 1px solid #e0e0e0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n    \n    .properties-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n    \n    .properties-header[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 4px;\n      color: #666;\n    }\n    \n    .properties-content[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      padding: 15px;\n    }\n    \n    .property-group[_ngcontent-%COMP%] {\n      margin-bottom: 20px;\n    }\n    \n    .property-group[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n      margin: 0 0 10px 0;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n    \n    .property-item[_ngcontent-%COMP%] {\n      margin-bottom: 10px;\n    }\n    \n    .property-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #666;\n      margin-bottom: 3px;\n    }\n    \n    .property-value[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #333;\n      padding: 5px 8px;\n      background: #f5f5f5;\n      border-radius: 3px;\n      word-break: break-word;\n    }\n    \n    .property-actions[_ngcontent-%COMP%] {\n      margin-top: 10px;\n      display: flex;\n      gap: 5px;\n    }\n    \n    .property-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n      padding: 5px 10px;\n      font-size: 12px;\n      border: 1px solid #ddd;\n      background: white;\n      border-radius: 3px;\n      cursor: pointer;\n    }\n    \n    .property-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n      background: #f0f0f0;\n      border-color: #4a90e2;\n    }\n    \n    .property-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 6px 10px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      font-size: 13px;\n    }\n    \n    .property-textarea[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 6px 10px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      font-size: 13px;\n      resize: vertical;\n    }\n    \n    .property-value[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: #333;\n      padding: 6px 10px;\n      background: #f5f5f5;\n      border-radius: 3px;\n      min-height: 32px;\n      display: flex;\n      align-items: center;\n    }\n    \n    .danger-button[_ngcontent-%COMP%] {\n      background: #ff4444 !important;\n      color: white !important;\n      border-color: #ff4444 !important;\n    }\n    \n    .danger-button[_ngcontent-%COMP%]:hover {\n      background: #cc0000 !important;\n      border-color: #cc0000 !important;\n    }\n    \n    [_nghost-%COMP%]     .step-node.selected {\n      filter: drop-shadow(0 0 8px #4a90e2);\n    }\n    \n    [_nghost-%COMP%]     .connection-path.selected {\n      stroke: #ff9800;\n      stroke-width: 3;\n    }\n    \n    [_nghost-%COMP%]     .output-socket:hover {\n      r: 7;\n      fill: #e3f2fd;\n    }\n    \n    [_nghost-%COMP%]     .input-socket:hover {\n      r: 7;\n      fill: #e3f2fd;\n    }"] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowAgentDiagramComponent, [{
-        type: Component,
-        args: [{ selector: 'mj-flow-agent-diagram', template: `
-    <div class="flow-diagram-container">
-      @if (loading) {
-        <div class="loading-state">
-          <i class="fa-solid fa-spinner fa-spin"></i>
-          <span>Loading flow diagram...</span>
-        </div>
-      } @else if (error) {
-        <div class="error-state">
-          <i class="fa-solid fa-exclamation-triangle"></i>
-          <span>{{ error }}</span>
-        </div>
-      } @else if (!steps || steps.length === 0) {
-        <div class="empty-state">
-          <i class="fa-solid fa-info-circle"></i>
-          <span>No workflow steps to display</span>
-        </div>
-      } @else {
-        <kendo-splitter orientation="horizontal" style="height: 100%;">
-          <kendo-splitter-pane [collapsible]="false">
-            <div class="rete-container" #reteContainer>
-              <div class="diagram-toolbar">
-                @if (EditMode) {
-                  <button (click)="addNewStep()" title="Add new step">
-                    <i class="fa-solid fa-plus"></i>
-                    Add Step
-                  </button>
-                  @if (false) {
-                    <button (click)="autoArrange()" title="Auto-arrange nodes">
-                      <i class="fa-solid fa-magic"></i>
-                      Auto Arrange
-                    </button>
-                  }
-                  @if (connectionMode) {
-                    <button (click)="cancelConnectionMode()" class="connection-mode-active">
-                      <i class="fa-solid fa-times"></i>
-                      Cancel Connection
-                    </button>
-                  }
-                }
-                <div class="zoom-controls">
-                  <button (click)="zoomIn()" title="Zoom in">
-                    <i class="fa-solid fa-search-plus"></i>
-                  </button>
-                  <button (click)="zoomOut()" title="Zoom out">
-                    <i class="fa-solid fa-search-minus"></i>
-                  </button>
-                  <button (click)="resetZoom()" title="Reset zoom">
-                    <i class="fa-solid fa-compress"></i>
-                  </button>
-                  <span class="zoom-level">{{ (panZoom.scale * 100).toFixed(0) }}%</span>
-                </div>
-              </div>
-              <svg class="rete-svg" width="100%" height="100%" 
-                   (click)="onSvgClick($event)"
-                   (contextmenu)="onSvgContextMenu($event)"
-                   (wheel)="onWheel($event)"
-                   (mousedown)="onSvgMouseDown($event)"
-                   (mousemove)="onSvgMouseMove($event)"
-                   (mouseup)="onSvgMouseUp($event)"
-                   [class.connection-mode]="connectionMode">
-                @if (tempConnection) {
-                  <path [attr.d]="tempConnection.path" 
-                        fill="none" 
-                        stroke="#4a90e2" 
-                        stroke-width="2"
-                        stroke-dasharray="5,5"
-                        opacity="0.6"/>
-                }
-              </svg>
-              @if (connectionMode) {
-                <div class="connection-hint">
-                  Click on a target step to create connection
-                </div>
-              }
-              @if (contextMenu.visible) {
-                <div class="context-menu" 
-                     [style.left.px]="contextMenu.x" 
-                     [style.top.px]="contextMenu.y"
-                     (click)="$event.stopPropagation()">
-                  @if (contextMenu.type === 'step') {
-                    <button (click)="connectFromContextMenu()">
-                      <i class="fa-solid fa-link"></i>
-                      Connect To...
-                    </button>
-                    <button (click)="deleteFromContextMenu()" class="danger">
-                      <i class="fa-solid fa-trash"></i>
-                      Delete Step
-                    </button>
-                  } @else if (contextMenu.type === 'path') {
-                    <button (click)="deletePathFromContextMenu()" class="danger">
-                      <i class="fa-solid fa-trash"></i>
-                      Delete Path
-                    </button>
-                  }
-                </div>
-              }
-            </div>
-          </kendo-splitter-pane>
-          @if (selectedItem) {
-            <kendo-splitter-pane [size]="'300px'" [min]="'250px'" [max]="'400px'" [collapsible]="true">
-              <div class="properties-pane">
-                <div class="properties-header">
-                  <h4>
-                    @if (selectedItem.type === 'step') {
-                      <i class="fa-solid fa-circle-nodes"></i> Step Properties
-                    } @else {
-                      <i class="fa-solid fa-route"></i> Path Properties
-                    }
-                  </h4>
-                  <button (click)="closeProperties()" title="Close">
-                    <i class="fa-solid fa-times"></i>
-                  </button>
-                </div>
-                <div class="properties-content">
-                  @if (selectedItem.type === 'step') {
-                    <div class="property-group">
-                      <h5>Basic Information</h5>
-                      <div class="property-item">
-                        <div class="property-label">Name</div>
-                        @if (EditMode) {
-                          <input type="text" 
-                                 class="property-input" 
-                                 [(ngModel)]="selectedStep!.Name"
-                                 (blur)="saveStepProperties()">
-                        } @else {
-                          <div class="property-value">{{ selectedStep!.Name }}</div>
-                        }
-                      </div>
-                      <div class="property-item">
-                        <div class="property-label">Type</div>
-                        @if (EditMode) {
-                          <kendo-dropdownlist 
-                            [data]="stepTypes"
-                            [(ngModel)]="selectedStep!.StepType"
-                            (valueChange)="saveStepProperties()">
-                          </kendo-dropdownlist>
-                        } @else {
-                          <div class="property-value">{{ selectedStep!.StepType }}</div>
-                        }
-                      </div>
-                      <div class="property-item">
-                        <div class="property-label">Description</div>
-                        @if (EditMode) {
-                          <textarea class="property-textarea" 
-                                    [(ngModel)]="selectedStep!.Description"
-                                    (blur)="saveStepProperties()"
-                                    rows="3"></textarea>
-                        } @else {
-                          <div class="property-value">{{ selectedStep!.Description || 'No description' }}</div>
-                        }
-                      </div>
-                      <div class="property-item">
-                        <div class="property-label">Status</div>
-                        @if (EditMode) {
-                          <kendo-dropdownlist 
-                            [data]="stepStatuses"
-                            [(ngModel)]="selectedStep!.Status"
-                            (valueChange)="saveStepProperties()">
-                          </kendo-dropdownlist>
-                        } @else {
-                          <div class="property-value">{{ selectedStep!.Status }}</div>
-                        }
-                      </div>
-                    </div>
-                    @if (selectedStep!.StepType === 'Action') {
-                      <div class="property-group">
-                        <h5>Action Configuration</h5>
-                        <div class="property-item">
-                          <div class="property-label">Input Mapping</div>
-                          @if (EditMode) {
-                            <textarea class="property-textarea" 
-                                      [(ngModel)]="selectedStep!.ActionInputMapping"
-                                      (blur)="saveStepProperties()"
-                                      rows="2"></textarea>
-                          } @else {
-                            <div class="property-value">{{ selectedStep!.ActionInputMapping || 'None' }}</div>
-                          }
-                        </div>
-                        <div class="property-item">
-                          <div class="property-label">Output Mapping</div>
-                          @if (EditMode) {
-                            <textarea class="property-textarea" 
-                                      [(ngModel)]="selectedStep!.ActionOutputMapping"
-                                      (blur)="saveStepProperties()"
-                                      rows="2"></textarea>
-                          } @else {
-                            <div class="property-value">{{ selectedStep!.ActionOutputMapping || 'None' }}</div>
-                          }
-                        </div>
-                      </div>
-                    }
-                    @if (EditMode) {
-                      <div class="property-actions">
-                        <button (click)="deleteSelectedStep()" class="danger-button">
-                          <i class="fa-solid fa-trash"></i>
-                          Delete Step
-                        </button>
-                        <button (click)="connectFromStep()" [disabled]="connectionMode">
-                          <i class="fa-solid fa-link"></i>
-                          Connect To...
-                        </button>
-                      </div>
-                    }
-                  } @else {
-                    <div class="property-group">
-                      <h5>Path Information</h5>
-                      <div class="property-item">
-                        <div class="property-label">From Step</div>
-                        <div class="property-value">{{ getStepName(selectedPath!.OriginStepID) }}</div>
-                      </div>
-                      <div class="property-item">
-                        <div class="property-label">To Step</div>
-                        <div class="property-value">{{ getStepName(selectedPath!.DestinationStepID) }}</div>
-                      </div>
-                      <div class="property-item">
-                        <div class="property-label">Condition</div>
-                        @if (EditMode) {
-                          <textarea class="property-textarea" 
-                                    [(ngModel)]="selectedPath!.Condition"
-                                    (blur)="savePathProperties()"
-                                    rows="3"></textarea>
-                        } @else {
-                          <div class="property-value">{{ selectedPath!.Condition || 'No condition' }}</div>
-                        }
-                      </div>
-                      <div class="property-item">
-                        <div class="property-label">Priority</div>
-                        @if (EditMode) {
-                          <input type="number" 
-                                 class="property-input" 
-                                 [(ngModel)]="selectedPath!.Priority"
-                                 (blur)="savePathProperties()">
-                        } @else {
-                          <div class="property-value">{{ selectedPath!.Priority }}</div>
-                        }
-                      </div>
-                    </div>
-                    @if (EditMode) {
-                      <div class="property-actions">
-                        <button (click)="deleteSelectedPath()" class="danger-button">
-                          <i class="fa-solid fa-trash"></i>
-                          Delete Path
-                        </button>
-                      </div>
-                    }
-                  }
-                </div>
-              </div>
-            </kendo-splitter-pane>
-          }
-        </kendo-splitter>
-      }
-    </div>
-  `, styles: ["\n    .flow-diagram-container {\n      width: 100%;\n      height: 600px;\n      min-height: 400px;\n      max-height: 1200px;\n      position: relative;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      overflow: auto;\n      resize: vertical;\n    }\n    \n    .flow-diagram-container::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      width: 20px;\n      height: 20px;\n      cursor: ns-resize;\n      background: linear-gradient(135deg, transparent 50%, #999 50%);\n      border-bottom-right-radius: 4px;\n      pointer-events: none;\n    }\n    \n    .diagram-toolbar {\n      position: absolute;\n      top: 10px;\n      right: 10px;\n      left: 10px;\n      display: flex;\n      gap: 5px;\n      z-index: 10;\n      background: white;\n      padding: 5px;\n      border-radius: 4px;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n      justify-content: space-between;\n    }\n    \n    .zoom-controls {\n      display: flex;\n      gap: 4px;\n      align-items: center;\n    }\n    \n    .zoom-level {\n      font-size: 12px;\n      color: #666;\n      margin-left: 8px;\n    }\n    \n    .diagram-toolbar button {\n      padding: 5px 10px;\n      border: 1px solid #ddd;\n      background: white;\n      border-radius: 3px;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n    \n    .diagram-toolbar button:hover {\n      background: #f0f0f0;\n      border-color: #4a90e2;\n    }\n    \n    .diagram-toolbar button i {\n      font-size: 14px;\n    }\n    \n    .rete-container {\n      width: 100%;\n      height: 100%;\n      position: relative;\n      overflow: auto;\n    }\n    \n    .rete-svg {\n      min-width: 100%;\n      min-height: 100%;\n    }\n    \n    .loading-state, .error-state, .empty-state {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      gap: 0.5rem;\n      color: #666;\n    }\n    \n    .error-state {\n      color: #c00;\n    }\n    \n    .empty-state {\n      flex-direction: column;\n    }\n    \n    .empty-state i {\n      font-size: 2rem;\n      opacity: 0.5;\n    }\n    \n    :host ::ng-deep .step-node {\n      cursor: move;\n    }\n    \n    :host ::ng-deep .step-node.dragging {\n      opacity: 0.8;\n    }\n    \n    :host ::ng-deep .step-node-title {\n      font-family: Arial, sans-serif;\n    }\n    \n    :host ::ng-deep .connection-path {\n      cursor: pointer;\n    }\n    \n    :host ::ng-deep .connection-path:hover {\n      stroke-width: 3;\n    }\n    \n    .context-menu {\n      position: absolute;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n      padding: 5px 0;\n      min-width: 150px;\n      z-index: 1000;\n      display: none;\n    }\n    \n    .context-menu.show {\n      display: block;\n    }\n    \n    .context-menu-item {\n      padding: 8px 15px;\n      cursor: pointer;\n      font-size: 13px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    .context-menu-item:hover {\n      background: #f0f0f0;\n    }\n    \n    .context-menu-item i {\n      width: 16px;\n      text-align: center;\n    }\n    \n    .context-menu-divider {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 5px 0;\n    }\n    \n    .properties-pane {\n      height: 100%;\n      background: white;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    .connection-mode-active {\n      background: #ff4444 !important;\n      color: white !important;\n      border-color: #ff4444 !important;\n    }\n    \n    .rete-svg.connection-mode {\n      cursor: crosshair;\n    }\n    \n    .connection-hint {\n      position: absolute;\n      bottom: 20px;\n      left: 50%;\n      transform: translateX(-50%);\n      background: rgba(0, 0, 0, 0.8);\n      color: white;\n      padding: 8px 16px;\n      border-radius: 4px;\n      font-size: 12px;\n    }\n    \n    .context-menu {\n      position: absolute;\n      background: white;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n      z-index: 1000;\n      padding: 4px 0;\n      min-width: 150px;\n    }\n    \n    .context-menu button {\n      display: block;\n      width: 100%;\n      padding: 8px 16px;\n      border: none;\n      background: none;\n      text-align: left;\n      cursor: pointer;\n      font-size: 13px;\n      transition: background-color 0.2s;\n    }\n    \n    .context-menu button:hover {\n      background-color: #f0f0f0;\n    }\n    \n    .context-menu button.danger {\n      color: #c00;\n    }\n    \n    .context-menu button.danger:hover {\n      background-color: #fee;\n    }\n    \n    .context-menu i {\n      margin-right: 8px;\n      width: 16px;\n      text-align: center;\n    }\n    \n    .properties-header {\n      padding: 10px 15px;\n      border-bottom: 1px solid #e0e0e0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n    \n    .properties-header h4 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n    }\n    \n    .properties-header button {\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 4px;\n      color: #666;\n    }\n    \n    .properties-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 15px;\n    }\n    \n    .property-group {\n      margin-bottom: 20px;\n    }\n    \n    .property-group h5 {\n      margin: 0 0 10px 0;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n    \n    .property-item {\n      margin-bottom: 10px;\n    }\n    \n    .property-label {\n      font-size: 12px;\n      color: #666;\n      margin-bottom: 3px;\n    }\n    \n    .property-value {\n      font-size: 13px;\n      color: #333;\n      padding: 5px 8px;\n      background: #f5f5f5;\n      border-radius: 3px;\n      word-break: break-word;\n    }\n    \n    .property-actions {\n      margin-top: 10px;\n      display: flex;\n      gap: 5px;\n    }\n    \n    .property-actions button {\n      padding: 5px 10px;\n      font-size: 12px;\n      border: 1px solid #ddd;\n      background: white;\n      border-radius: 3px;\n      cursor: pointer;\n    }\n    \n    .property-actions button:hover {\n      background: #f0f0f0;\n      border-color: #4a90e2;\n    }\n    \n    .property-input {\n      width: 100%;\n      padding: 6px 10px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      font-size: 13px;\n    }\n    \n    .property-textarea {\n      width: 100%;\n      padding: 6px 10px;\n      border: 1px solid #ddd;\n      border-radius: 3px;\n      font-size: 13px;\n      resize: vertical;\n    }\n    \n    .property-value {\n      font-size: 13px;\n      color: #333;\n      padding: 6px 10px;\n      background: #f5f5f5;\n      border-radius: 3px;\n      min-height: 32px;\n      display: flex;\n      align-items: center;\n    }\n    \n    .danger-button {\n      background: #ff4444 !important;\n      color: white !important;\n      border-color: #ff4444 !important;\n    }\n    \n    .danger-button:hover {\n      background: #cc0000 !important;\n      border-color: #cc0000 !important;\n    }\n    \n    :host ::ng-deep .step-node.selected {\n      filter: drop-shadow(0 0 8px #4a90e2);\n    }\n    \n    :host ::ng-deep .connection-path.selected {\n      stroke: #ff9800;\n      stroke-width: 3;\n    }\n    \n    :host ::ng-deep .output-socket:hover {\n      r: 7;\n      fill: #e3f2fd;\n    }\n    \n    :host ::ng-deep .input-socket:hover {\n      r: 7;\n      fill: #e3f2fd;\n    }\n  "] }]
-    }], () => [{ type: i1.DialogService }], { reteContainer: [{
-            type: ViewChild,
-            args: ['reteContainer', { static: false }]
-        }], agentId: [{
-            type: Input
-        }], steps: [{
-            type: Input
-        }], paths: [{
-            type: Input
-        }], EditMode: [{
-            type: Input
-        }], stepsChanged: [{
-            type: Output
-        }], pathsChanged: [{
-            type: Output
-        }], onDocumentClick: [{
-            type: HostListener,
-            args: ['document:click', ['$event']]
-        }], onDocumentMouseMove: [{
-            type: HostListener,
-            args: ['document:mousemove', ['$event']]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentDiagramComponent, { className: "FlowAgentDiagramComponent" }); })();
-//# sourceMappingURL=flow-agent-diagram.component.js.map