@memberjunction/ng-core-entity-forms 2.74.0 → 2.76.0

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

@@ -0,0 +1,2020 @@
+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.Error,
+                            errors: path.LatestResult.Errors,
+                            message: path.LatestResult.Message
+                        });
+                    }
+                    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.Error,
+                        errors: this.selectedStep.LatestResult.Errors,
+                        message: this.selectedStep.LatestResult.Message
+                    });
+                }
+                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.Error,
+                        errors: this.selectedPath.LatestResult.Errors,
+                        message: this.selectedPath.LatestResult.Message
+                    });
+                }
+                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(t) { return new (t || 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", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-agent-diagram.component.ts", lineNumber: 641 }); })();
+//# sourceMappingURL=flow-agent-diagram.component.js.map