npm - @memberjunction/ng-flow-editor - Versions diffs - 5.42.0 → 5.44.0 - Mend

@memberjunction/ng-flow-editor 5.42.0 → 5.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/lib/agent-editor/agent-properties-panel.component.js +210 -226
package/dist/lib/agent-editor/agent-properties-panel.component.js.map +1 -1
package/dist/lib/agent-editor/agent-step-list.component.d.ts.map +1 -1
package/dist/lib/agent-editor/agent-step-list.component.js +19 -26
package/dist/lib/agent-editor/agent-step-list.component.js.map +1 -1
package/dist/lib/components/flow-editor.component.d.ts +2 -0
package/dist/lib/components/flow-editor.component.d.ts.map +1 -1
package/dist/lib/components/flow-editor.component.js +27 -35
package/dist/lib/components/flow-editor.component.js.map +1 -1
package/dist/lib/flow-editor.module.d.ts +2 -1
package/dist/lib/flow-editor.module.d.ts.map +1 -1
package/dist/lib/flow-editor.module.js +10 -3
package/dist/lib/flow-editor.module.js.map +1 -1
package/package.json +8 -6
package/dist/__tests__/exports.test.d.ts +0 -2
package/dist/__tests__/exports.test.d.ts.map +0 -1
package/dist/__tests__/exports.test.js +0 -17
package/dist/__tests__/exports.test.js.map +0 -1
package/dist/__tests__/index.test.d.ts +0 -2
package/dist/__tests__/index.test.d.ts.map +0 -1
package/dist/__tests__/index.test.js +0 -7
package/dist/__tests__/index.test.js.map +0 -1

package/dist/lib/agent-editor/agent-properties-panel.component.js CHANGED Viewed

@@ -4,28 +4,30 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
 import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "@memberjunction/ng-ui-components";
 function AgentPropertiesPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "i", 2);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "Select a step or connection to view its properties");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 1);
 } }
 function AgentPropertiesPanelComponent_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1, "Start");
     i0.ɵɵelementEnd();
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "General");
+    i0.ɵɵelementEnd();
+} }
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 30);
-    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnNameChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnNameChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.Step.Name);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -34,16 +36,16 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Step.Name);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "textarea", 31);
-    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_9_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDescriptionChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_9_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDescriptionChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.Step.Description || "");
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -52,10 +54,10 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.Step.Description || "\u2014", " ");
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 32);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_14_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnStatusChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_14_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnStatusChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementStart(1, "option", 33);
     i0.ɵɵtext(2, "Active");
     i0.ɵɵelementEnd();
@@ -69,9 +71,9 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.Step.Status);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "span", 15);
+    i0.ɵɵelement(1, "span", 14);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -81,10 +83,10 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.Step.Status, " ");
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 29)(1, "label", 36)(2, "input", 37);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_16_Template_input_change_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnStartingStepChange(ctx_r1.CheckedValue($event))); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_16_Template_input_change_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnStartingStepChange(ctx_r1.CheckedValue($event))); });
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " Starting Step ");
     i0.ɵɵelementEnd()();
@@ -93,35 +95,35 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("checked", ctx_r1.Step.StartingStep);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "label");
     i0.ɵɵtext(2, "Starting Step");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 26)(4, "span", 17);
+    i0.ɵɵelementStart(3, "div", 26)(4, "span", 16);
     i0.ɵɵtext(5, "Yes \u2014 this is the entry point");
     i0.ɵɵelementEnd()()();
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 24)(2, "label");
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24)(2, "label");
     i0.ɵɵtext(3, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_4_Template, 1, 1, "input", 25);
-    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_5_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_4_Template, 1, 1, "input", 25);
+    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_5_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 24)(7, "label");
     i0.ɵɵtext(8, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_9_Template, 1, 1, "textarea", 27);
-    i0.ɵɵconditionalCreate(10, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_10_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(9, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_9_Template, 1, 1, "textarea", 27);
+    i0.ɵɵconditionalCreate(10, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_10_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "div", 24)(12, "label");
     i0.ɵɵtext(13, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(14, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_14_Template, 7, 1, "select", 28);
-    i0.ɵɵconditionalCreate(15, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_15_Template, 3, 3, "div", 26);
+    i0.ɵɵconditionalCreate(14, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_14_Template, 7, 1, "select", 28);
+    i0.ɵɵconditionalCreate(15, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_15_Template, 3, 3, "div", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(16, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_16_Template, 4, 1, "div", 29);
-    i0.ɵɵconditionalCreate(17, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Conditional_17_Template, 6, 0, "div", 24);
+    i0.ɵɵconditionalCreate(16, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_16_Template, 4, 1, "div", 29);
+    i0.ɵɵconditionalCreate(17, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Conditional_17_Template, 6, 0, "div", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -142,10 +144,15 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly && ctx_r1.Step.StartingStep ? 17 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Configuration");
+    i0.ɵɵelementEnd();
+} }
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 32);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_1_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnLoopBodyTypeChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_1_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnLoopBodyTypeChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementStart(1, "option", 38);
     i0.ɵɵtext(2, "Action");
     i0.ɵɵelementEnd();
@@ -159,7 +166,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r1.Step.LoopBodyType || "Action");
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -168,12 +175,12 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.Step.LoopBodyType || "Action", " ");
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "label");
     i0.ɵɵtext(2, "Loop Body Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_1_Conditional_3_Template, 7, 1, "select", 28);
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_1_Conditional_4_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_1_Conditional_3_Template, 7, 1, "select", 28);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_1_Conditional_4_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -182,7 +189,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly ? 4 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_3_For_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Conditional_3_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 42);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -192,14 +199,14 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(action_r9.Name);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 32);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnActionChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnActionChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementStart(1, "option", 41);
     i0.ɵɵtext(2, "-- Select Action --");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_3_For_4_Template, 2, 2, "option", 42, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Conditional_3_For_4_Template, 2, 2, "option", 42, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -207,7 +214,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.Actions);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -216,12 +223,12 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.selectedActionName);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "label");
     i0.ɵɵtext(2, "Action");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_3_Template, 5, 1, "select", 28);
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_4_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Conditional_3_Template, 5, 1, "select", 28);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Conditional_4_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -230,7 +237,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly ? 4 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_3_For_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Conditional_3_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 42);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -240,14 +247,14 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(prompt_r11.Name);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 32);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnPromptChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnPromptChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementStart(1, "option", 41);
     i0.ɵɵtext(2, "-- Select Prompt --");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_3_For_4_Template, 2, 2, "option", 42, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Conditional_3_For_4_Template, 2, 2, "option", 42, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -255,7 +262,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.Prompts);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -264,12 +271,12 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.selectedPromptName);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "label");
     i0.ɵɵtext(2, "Prompt");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_3_Template, 5, 1, "select", 28);
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_4_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Conditional_3_Template, 5, 1, "select", 28);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Conditional_4_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -278,7 +285,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly ? 4 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_3_For_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Conditional_3_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 42);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -288,14 +295,14 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(agent_r13.Name);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 32);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSubAgentChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Conditional_3_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnSubAgentChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementStart(1, "option", 41);
     i0.ɵɵtext(2, "-- Select Agent --");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_3_For_4_Template, 2, 2, "option", 42, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Conditional_3_For_4_Template, 2, 2, "option", 42, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -303,7 +310,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r1.Agents);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -312,12 +319,12 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.selectedAgentName);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "label");
     i0.ɵɵtext(2, "Sub-Agent");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_3_Template, 5, 1, "select", 28);
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_4_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Conditional_3_Template, 5, 1, "select", 28);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Conditional_4_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -326,26 +333,26 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly ? 4 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 24)(1, "label");
     i0.ɵɵtext(2, "Loop Configuration");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "mj-code-editor", 43);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_5_Template_mj_code_editor_change_3_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConfigurationChange($event)); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_5_Template_mj_code_editor_change_3_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConfigurationChange($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r1.FormatJsonDisplay(ctx_r1.Step.Configuration))("readonly", ctx_r1.ReadOnly)("lineWrapping", true);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵconditionalCreate(1, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_1_Template, 5, 2, "div", 24);
-    i0.ɵɵconditionalCreate(2, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Template, 5, 2, "div", 24);
-    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Template, 5, 2, "div", 24);
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Template, 5, 2, "div", 24);
-    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_5_Template, 4, 3, "div", 24);
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵconditionalCreate(1, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_1_Template, 5, 2, "div", 24);
+    i0.ɵɵconditionalCreate(2, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_2_Template, 5, 2, "div", 24);
+    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_3_Template, 5, 2, "div", 24);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_4_Template, 5, 2, "div", 24);
+    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Conditional_5_Template, 4, 3, "div", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -360,19 +367,24 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.showLoopConfig ? 5 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_26_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Data Mapping");
+    i0.ɵɵelementEnd();
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_26_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 24)(2, "label");
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24)(2, "label");
     i0.ɵɵtext(3, "Input Mapping");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "mj-code-editor", 44);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Conditional_5_Template_mj_code_editor_change_4_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnInputMappingChange($event)); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_26_ng_template_2_Template_mj_code_editor_change_4_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnInputMappingChange($event)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 24)(6, "label");
     i0.ɵɵtext(7, "Output Mapping");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "mj-code-editor", 45);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Conditional_5_Template_mj_code_editor_change_8_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnOutputMappingChange($event)); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_26_ng_template_2_Template_mj_code_editor_change_8_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnOutputMappingChange($event)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -381,28 +393,25 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("value", ctx_r1.FormatJsonDisplay(ctx_r1.Step.ActionOutputMapping))("readonly", ctx_r1.ReadOnly)("lineWrapping", true);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "button", 20);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("mapping")); });
-    i0.ɵɵelementStart(2, "span", 21);
-    i0.ɵɵtext(3, "Data Mapping");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Conditional_5_Template, 9, 6, "div", 22);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function AgentPropertiesPanelComponent_Conditional_2_Conditional_26_Template_mj_accordion_panel_ExpandedChange_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleSection("mapping")); });
+    i0.ɵɵtemplate(1, AgentPropertiesPanelComponent_Conditional_2_Conditional_26_ng_template_1_Template, 2, 0, "ng-template", 19)(2, AgentPropertiesPanelComponent_Conditional_2_Conditional_26_ng_template_2_Template, 9, 6, "ng-template", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsSectionCollapsed("mapping") ? "fa-chevron-right" : "fa-chevron-down");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsSectionCollapsed("mapping") ? 5 : -1);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r1.IsSectionCollapsed("mapping"));
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Error Handling");
+    i0.ɵɵelementEnd();
+} }
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "select", 32);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_4_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnErrorBehaviorChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_4_Template_select_change_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnErrorBehaviorChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementStart(1, "option", 47);
     i0.ɵɵtext(2, "Fail (stop flow)");
     i0.ɵɵelementEnd();
@@ -416,7 +425,7 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.Step.OnErrorBehavior);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -425,16 +434,16 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.Step.OnErrorBehavior === "fail" ? "Fail (stop flow)" : ctx_r1.Step.OnErrorBehavior === "continue" ? "Continue (ignore error)" : "Retry", " ");
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 51);
-    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_6_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnRetryCountChange(ctx_r1.NumericValue($event))); });
+    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_6_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnRetryCountChange(ctx_r1.NumericValue($event))); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("value", ctx_r1.Step.RetryCount);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -443,12 +452,12 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.Step.RetryCount);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24)(1, "label");
     i0.ɵɵtext(2, "Retry Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_6_Conditional_3_Template, 1, 1, "input", 50);
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_6_Conditional_4_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_6_Conditional_3_Template, 1, 1, "input", 50);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_6_Conditional_4_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -457,16 +466,16 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly ? 4 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 52);
-    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_10_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnTimeoutChange(ctx_r1.NumericValue($event))); });
+    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_10_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnTimeoutChange(ctx_r1.NumericValue($event))); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.Step.TimeoutSeconds);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -475,19 +484,19 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ctx_r1.Step.TimeoutSeconds, "s");
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 24)(2, "label");
+function AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24)(2, "label");
     i0.ɵɵtext(3, "On Error");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_4_Template, 7, 1, "select", 28);
-    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_5_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_4_Template, 7, 1, "select", 28);
+    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_5_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_6_Template, 5, 2, "div", 24);
+    i0.ɵɵconditionalCreate(6, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_6_Template, 5, 2, "div", 24);
     i0.ɵɵelementStart(7, "div", 24)(8, "label");
     i0.ɵɵtext(9, "Timeout (seconds)");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_10_Template, 1, 1, "input", 46);
-    i0.ɵɵconditionalCreate(11, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Conditional_11_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(10, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_10_Template, 1, 1, "input", 46);
+    i0.ɵɵconditionalCreate(11, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Conditional_11_Template, 2, 1, "div", 26);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -502,67 +511,52 @@ function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly ? 11 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_2_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23)(1, "button", 53);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_2_Conditional_39_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteStep()); });
+    i0.ɵɵelementStart(0, "div", 22)(1, "button", 53);
+    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_2_Conditional_30_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeleteStep()); });
     i0.ɵɵelement(2, "i", 54);
     i0.ɵɵtext(3, " Delete Step ");
     i0.ɵɵelementEnd()();
 } }
 function AgentPropertiesPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "span", 5);
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "span", 4);
     i0.ɵɵtext(3, "STEP");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 6);
+    i0.ɵɵelementStart(4, "button", 5);
     i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseRequested.emit()); });
-    i0.ɵɵelement(5, "i", 7);
+    i0.ɵɵelement(5, "i", 6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 8)(7, "div", 9);
-    i0.ɵɵelement(8, "i", 10);
+    i0.ɵɵelementStart(6, "div", 7)(7, "div", 8);
+    i0.ɵɵelement(8, "i", 9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 11)(10, "span", 12);
+    i0.ɵɵelementStart(9, "div", 10)(10, "span", 11);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 13)(13, "span", 14);
+    i0.ɵɵelementStart(12, "span", 12)(13, "span", 13);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(15, "span", 15);
-    i0.ɵɵelementStart(16, "span", 16);
+    i0.ɵɵelement(15, "span", 14);
+    i0.ɵɵelementStart(16, "span", 15);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(18, AgentPropertiesPanelComponent_Conditional_2_Conditional_18_Template, 2, 0, "span", 17);
+    i0.ɵɵconditionalCreate(18, AgentPropertiesPanelComponent_Conditional_2_Conditional_18_Template, 2, 0, "span", 16);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(19, "div", 18)(20, "div", 19)(21, "button", 20);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_2_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("general")); });
-    i0.ɵɵelementStart(22, "span", 21);
-    i0.ɵɵtext(23, "General");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(24, "i", 10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(25, AgentPropertiesPanelComponent_Conditional_2_Conditional_25_Template, 18, 8, "div", 22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 19)(27, "button", 20);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_2_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("config")); });
-    i0.ɵɵelementStart(28, "span", 21);
-    i0.ɵɵtext(29, "Configuration");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(30, "i", 10);
+    i0.ɵɵelementStart(19, "div", 17)(20, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function AgentPropertiesPanelComponent_Conditional_2_Template_mj_accordion_panel_ExpandedChange_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("general")); });
+    i0.ɵɵtemplate(21, AgentPropertiesPanelComponent_Conditional_2_ng_template_21_Template, 2, 0, "ng-template", 19)(22, AgentPropertiesPanelComponent_Conditional_2_ng_template_22_Template, 18, 8, "ng-template", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(31, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Template, 6, 5, "div", 22);
+    i0.ɵɵelementStart(23, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function AgentPropertiesPanelComponent_Conditional_2_Template_mj_accordion_panel_ExpandedChange_23_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("config")); });
+    i0.ɵɵtemplate(24, AgentPropertiesPanelComponent_Conditional_2_ng_template_24_Template, 2, 0, "ng-template", 19)(25, AgentPropertiesPanelComponent_Conditional_2_ng_template_25_Template, 6, 5, "ng-template", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(32, AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Template, 6, 2, "div", 19);
-    i0.ɵɵelementStart(33, "div", 19)(34, "button", 20);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_2_Template_button_click_34_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("errors")); });
-    i0.ɵɵelementStart(35, "span", 21);
-    i0.ɵɵtext(36, "Error Handling");
+    i0.ɵɵconditionalCreate(26, AgentPropertiesPanelComponent_Conditional_2_Conditional_26_Template, 3, 2, "mj-accordion-panel", 21);
+    i0.ɵɵelementStart(27, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function AgentPropertiesPanelComponent_Conditional_2_Template_mj_accordion_panel_ExpandedChange_27_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("errors")); });
+    i0.ɵɵtemplate(28, AgentPropertiesPanelComponent_Conditional_2_ng_template_28_Template, 2, 0, "ng-template", 19)(29, AgentPropertiesPanelComponent_Conditional_2_ng_template_29_Template, 12, 5, "ng-template", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(37, "i", 10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(38, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_Template, 12, 5, "div", 22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(39, AgentPropertiesPanelComponent_Conditional_2_Conditional_39_Template, 4, 0, "div", 23);
+    i0.ɵɵconditionalCreate(30, AgentPropertiesPanelComponent_Conditional_2_Conditional_30_Template, 4, 0, "div", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -583,22 +577,16 @@ function AgentPropertiesPanelComponent_Conditional_2_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate(ctx_r1.Step.Status);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.Step.StartingStep ? 18 : -1);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsSectionCollapsed("general") ? "fa-chevron-right" : "fa-chevron-down");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsSectionCollapsed("general") ? 25 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsSectionCollapsed("config") ? "fa-chevron-right" : "fa-chevron-down");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsSectionCollapsed("config") ? 31 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.Step.StepType === "Action" || ctx_r1.showActionPicker ? 32 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsSectionCollapsed("errors") ? "fa-chevron-right" : "fa-chevron-down");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsSectionCollapsed("errors") ? 38 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r1.IsSectionCollapsed("general"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r1.IsSectionCollapsed("config"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.Step.StepType === "Action" || ctx_r1.showActionPicker ? 26 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 39 : -1);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r1.IsSectionCollapsed("errors"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 30 : -1);
 } }
 function AgentPropertiesPanelComponent_Conditional_3_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 61);
@@ -609,8 +597,13 @@ function AgentPropertiesPanelComponent_Conditional_3_Conditional_19_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Priority: ", ctx_r1.PathEntity.Priority, " ");
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 24)(2, "label");
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Route");
+    i0.ɵɵelementEnd();
+} }
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24)(2, "label");
     i0.ɵɵtext(3, "From");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 62);
@@ -632,16 +625,21 @@ function AgentPropertiesPanelComponent_Conditional_3_Conditional_26_Template(rf,
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.destinationStepName, " ");
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Settings");
+    i0.ɵɵelementEnd();
+} }
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 68);
-    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPathDescriptionChange(ctx_r1.InputValue($event))); });
+    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_4_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPathDescriptionChange(ctx_r1.InputValue($event))); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.PathEntity.Description || "");
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -650,46 +648,46 @@ function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.PathEntity.Description || "\u2014", " ");
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 63);
     i0.ɵɵtext(1, "Displayed as a label on the connection line");
     i0.ɵɵelementEnd();
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-code-editor", 69);
-    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_10_Template_mj_code_editor_change_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPathConditionChange($event)); });
+    i0.ɵɵlistener("change", function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_10_Template_mj_code_editor_change_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPathConditionChange($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.PathEntity.Condition || "")("readonly", false)("lineWrapping", true);
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-code-editor", 66);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.PathEntity.Condition)("readonly", true)("lineWrapping", true);
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 62);
     i0.ɵɵtext(1, " No condition (always taken) ");
     i0.ɵɵelementEnd();
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 63);
     i0.ɵɵtext(1, " JavaScript expression evaluated at runtime. Leave empty for unconditional. ");
     i0.ɵɵelementEnd();
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "input", 70);
-    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_17_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPathPriorityChange(ctx_r1.NumericValue($event))); });
+    i0.ɵɵlistener("input", function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_17_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnPathPriorityChange(ctx_r1.NumericValue($event))); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("value", ctx_r1.PathEntity.Priority);
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -698,27 +696,27 @@ function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.PathEntity.Priority);
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 24)(2, "label");
+function AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 24)(2, "label");
     i0.ɵɵtext(3, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_4_Template, 1, 1, "input", 64);
-    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_5_Template, 2, 1, "div", 26);
-    i0.ɵɵconditionalCreate(6, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_6_Template, 2, 0, "span", 63);
+    i0.ɵɵconditionalCreate(4, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_4_Template, 1, 1, "input", 64);
+    i0.ɵɵconditionalCreate(5, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_5_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(6, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_6_Template, 2, 0, "span", 63);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(7, "div", 24)(8, "label");
     i0.ɵɵtext(9, "Condition");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_10_Template, 1, 3, "mj-code-editor", 65);
-    i0.ɵɵconditionalCreate(11, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_11_Template, 1, 3, "mj-code-editor", 66);
-    i0.ɵɵconditionalCreate(12, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_12_Template, 2, 0, "div", 62);
-    i0.ɵɵconditionalCreate(13, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_13_Template, 2, 0, "span", 63);
+    i0.ɵɵconditionalCreate(10, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_10_Template, 1, 3, "mj-code-editor", 65);
+    i0.ɵɵconditionalCreate(11, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_11_Template, 1, 3, "mj-code-editor", 66);
+    i0.ɵɵconditionalCreate(12, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_12_Template, 2, 0, "div", 62);
+    i0.ɵɵconditionalCreate(13, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_13_Template, 2, 0, "span", 63);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "div", 24)(15, "label");
     i0.ɵɵtext(16, "Priority");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_17_Template, 1, 1, "input", 67);
-    i0.ɵɵconditionalCreate(18, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Conditional_18_Template, 2, 1, "div", 26);
+    i0.ɵɵconditionalCreate(17, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_17_Template, 1, 1, "input", 67);
+    i0.ɵɵconditionalCreate(18, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Conditional_18_Template, 2, 1, "div", 26);
     i0.ɵɵelementStart(19, "span", 63);
     i0.ɵɵtext(20, "Higher priority paths are evaluated first when multiple paths leave a step.");
     i0.ɵɵelementEnd()()();
@@ -743,57 +741,47 @@ function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ReadOnly ? 18 : -1);
 } }
-function AgentPropertiesPanelComponent_Conditional_3_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function AgentPropertiesPanelComponent_Conditional_3_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23)(1, "button", 53);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_3_Conditional_33_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeletePath()); });
+    i0.ɵɵelementStart(0, "div", 22)(1, "button", 53);
+    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_3_Conditional_27_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnDeletePath()); });
     i0.ɵɵelement(2, "i", 54);
     i0.ɵɵtext(3, " Delete Path ");
     i0.ɵɵelementEnd()();
 } }
 function AgentPropertiesPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 4)(2, "span", 5);
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 3)(2, "span", 4);
     i0.ɵɵtext(3, "PATH");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 6);
+    i0.ɵɵelementStart(4, "button", 5);
     i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_3_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CloseRequested.emit()); });
-    i0.ɵɵelement(5, "i", 7);
+    i0.ɵɵelement(5, "i", 6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 8)(7, "div", 56);
+    i0.ɵɵelementStart(6, "div", 7)(7, "div", 56);
     i0.ɵɵelement(8, "i", 57);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 11)(10, "span", 58)(11, "span", 59);
+    i0.ɵɵelementStart(9, "div", 10)(10, "span", 58)(11, "span", 59);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
     i0.ɵɵelement(13, "i", 60);
     i0.ɵɵelementStart(14, "span", 59);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "span", 13)(17, "span", 14);
+    i0.ɵɵelementStart(16, "span", 12)(17, "span", 13);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(19, AgentPropertiesPanelComponent_Conditional_3_Conditional_19_Template, 2, 1, "span", 61);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(20, "div", 18)(21, "div", 19)(22, "button", 20);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_3_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("path-overview")); });
-    i0.ɵɵelementStart(23, "span", 21);
-    i0.ɵɵtext(24, "Route");
+    i0.ɵɵelementStart(20, "div", 17)(21, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function AgentPropertiesPanelComponent_Conditional_3_Template_mj_accordion_panel_ExpandedChange_21_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("path-overview")); });
+    i0.ɵɵtemplate(22, AgentPropertiesPanelComponent_Conditional_3_ng_template_22_Template, 2, 0, "ng-template", 19)(23, AgentPropertiesPanelComponent_Conditional_3_ng_template_23_Template, 13, 2, "ng-template", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(25, "i", 10);
+    i0.ɵɵelementStart(24, "mj-accordion-panel", 18);
+    i0.ɵɵlistener("ExpandedChange", function AgentPropertiesPanelComponent_Conditional_3_Template_mj_accordion_panel_ExpandedChange_24_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("path-settings")); });
+    i0.ɵɵtemplate(25, AgentPropertiesPanelComponent_Conditional_3_ng_template_25_Template, 2, 0, "ng-template", 19)(26, AgentPropertiesPanelComponent_Conditional_3_ng_template_26_Template, 21, 9, "ng-template", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(26, AgentPropertiesPanelComponent_Conditional_3_Conditional_26_Template, 13, 2, "div", 22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 19)(28, "button", 20);
-    i0.ɵɵlistener("click", function AgentPropertiesPanelComponent_Conditional_3_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleSection("path-settings")); });
-    i0.ɵɵelementStart(29, "span", 21);
-    i0.ɵɵtext(30, "Settings");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(31, "i", 10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(32, AgentPropertiesPanelComponent_Conditional_3_Conditional_32_Template, 21, 9, "div", 22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(33, AgentPropertiesPanelComponent_Conditional_3_Conditional_33_Template, 4, 0, "div", 23);
+    i0.ɵɵconditionalCreate(27, AgentPropertiesPanelComponent_Conditional_3_Conditional_27_Template, 4, 0, "div", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -810,16 +798,12 @@ function AgentPropertiesPanelComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isConditionalPath ? "Conditional" : "Always", " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.PathEntity.Priority !== 0 ? 19 : -1);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsSectionCollapsed("path-overview") ? "fa-chevron-right" : "fa-chevron-down");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsSectionCollapsed("path-overview") ? 26 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngClass", ctx_r1.IsSectionCollapsed("path-settings") ? "fa-chevron-right" : "fa-chevron-down");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.IsSectionCollapsed("path-settings") ? 32 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 33 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r1.IsSectionCollapsed("path-overview"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", !ctx_r1.IsSectionCollapsed("path-settings"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 27 : -1);
 } }
 /** Step type accent color mapping */
 const STEP_TYPE_COLORS = {
@@ -1091,11 +1075,11 @@ export class AgentPropertiesPanelComponent {
         }
     }
     static ɵfac = function AgentPropertiesPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgentPropertiesPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentPropertiesPanelComponent, selectors: [["mj-agent-properties-panel"]], inputs: { Step: "Step", SelectedConnection: "SelectedConnection", PathEntity: "PathEntity", ReadOnly: "ReadOnly", Actions: "Actions", Prompts: "Prompts", Agents: "Agents", AllSteps: "AllSteps" }, outputs: { StepChanged: "StepChanged", PathChanged: "PathChanged", DeleteStepRequested: "DeleteStepRequested", DeletePathRequested: "DeletePathRequested", CloseRequested: "CloseRequested" }, standalone: false, decls: 4, vars: 3, consts: [[1, "mj-agent-props"], [1, "mj-agent-props-empty"], [1, "fa-solid", "fa-mouse-pointer"], [1, "mj-agent-props-header", "mj-agent-props-header--step"], [1, "mj-agent-props-header-top"], [1, "mj-agent-props-header-label"], ["title", "Close", 1, "mj-agent-props-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "mj-agent-props-identity"], [1, "mj-agent-props-identity-icon"], [1, "fa-solid", 3, "ngClass"], [1, "mj-agent-props-identity-info"], [1, "mj-agent-props-identity-name"], [1, "mj-agent-props-identity-meta"], [1, "mj-agent-props-type-pill"], [1, "mj-agent-props-status-dot"], [1, "mj-agent-props-status-label"], [1, "mj-agent-props-start-badge"], [1, "mj-agent-props-content"], [1, "mj-agent-props-section"], [1, "mj-agent-props-section-header", 3, "click"], [1, "mj-agent-props-section-title"], [1, "mj-agent-props-section-body"], [1, "mj-agent-props-section", "mj-agent-props-danger"], [1, "mj-agent-props-field"], ["type", "text", "placeholder", "Step name...", 1, "mj-agent-props-input", 3, "value"], [1, "mj-agent-props-readonly-value"], ["placeholder", "Optional description...", "rows", "2", 1, "mj-agent-props-input", "mj-agent-props-textarea", 3, "value"], [1, "mj-agent-props-input", 3, "value"], [1, "mj-agent-props-field", "mj-agent-props-field--row"], ["type", "text", "placeholder", "Step name...", 1, "mj-agent-props-input", 3, "input", "value"], ["placeholder", "Optional description...", "rows", "2", 1, "mj-agent-props-input", "mj-agent-props-textarea", 3, "input", "value"], [1, "mj-agent-props-input", 3, "change", "value"], ["value", "Active"], ["value", "Disabled"], ["value", "Pending"], [1, "mj-agent-props-checkbox-label"], ["type", "checkbox", 3, "change", "checked"], ["value", "Action"], ["value", "Prompt"], ["value", "Sub-Agent"], ["value", ""], [3, "value"], ["language", "json", "setup", "minimal", 3, "change", "value", "readonly", "lineWrapping"], ["language", "json", "setup", "minimal", "placeholder", "Enter JSON input mapping...", 3, "change", "value", "readonly", "lineWrapping"], ["language", "json", "setup", "minimal", "placeholder", "Enter JSON output mapping...", 3, "change", "value", "readonly", "lineWrapping"], ["type", "number", "min", "1", 1, "mj-agent-props-input", 3, "value"], ["value", "fail"], ["value", "continue"], ["value", "retry"], ["type", "number", "min", "0", "max", "10", 1, "mj-agent-props-input", 3, "value"], ["type", "number", "min", "0", "max", "10", 1, "mj-agent-props-input", 3, "input", "value"], ["type", "number", "min", "1", 1, "mj-agent-props-input", 3, "input", "value"], [1, "mj-agent-props-delete-btn", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "mj-agent-props-header", "mj-agent-props-header--path"], [1, "mj-agent-props-identity-icon", "mj-agent-props-identity-icon--path"], [1, "fa-solid", "fa-arrow-right"], [1, "mj-agent-props-path-route"], [1, "mj-agent-props-path-step-name"], [1, "fa-solid", "fa-arrow-right", "mj-agent-props-path-arrow"], [1, "mj-agent-props-priority-badge"], [1, "mj-agent-props-readonly-value", "mj-agent-props-readonly-value--muted"], [1, "mj-agent-props-hint"], ["type", "text", "placeholder", "Path label...", 1, "mj-agent-props-input", 3, "value"], ["language", "javascript", "setup", "minimal", "placeholder", "e.g. payload.status === 'active'", 3, "value", "readonly", "lineWrapping"], ["language", "javascript", "setup", "minimal", 3, "value", "readonly", "lineWrapping"], ["type", "number", "min", "-100", "max", "100", 1, "mj-agent-props-input", 3, "value"], ["type", "text", "placeholder", "Path label...", 1, "mj-agent-props-input", 3, "input", "value"], ["language", "javascript", "setup", "minimal", "placeholder", "e.g. payload.status === 'active'", 3, "change", "value", "readonly", "lineWrapping"], ["type", "number", "min", "-100", "max", "100", 1, "mj-agent-props-input", 3, "input", "value"]], template: function AgentPropertiesPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentPropertiesPanelComponent, selectors: [["mj-agent-properties-panel"]], inputs: { Step: "Step", SelectedConnection: "SelectedConnection", PathEntity: "PathEntity", ReadOnly: "ReadOnly", Actions: "Actions", Prompts: "Prompts", Agents: "Agents", AllSteps: "AllSteps" }, outputs: { StepChanged: "StepChanged", PathChanged: "PathChanged", DeleteStepRequested: "DeleteStepRequested", DeletePathRequested: "DeletePathRequested", CloseRequested: "CloseRequested" }, standalone: false, decls: 4, vars: 3, consts: [[1, "mj-agent-props"], ["Icon", "fa-solid fa-arrow-pointer", "Title", "No selection", "Message", "Select a step or connection to view its properties", 1, "mj-agent-props-empty"], [1, "mj-agent-props-header", "mj-agent-props-header--step"], [1, "mj-agent-props-header-top"], [1, "mj-agent-props-header-label"], ["title", "Close", 1, "mj-agent-props-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "mj-agent-props-identity"], [1, "mj-agent-props-identity-icon"], [1, "fa-solid", 3, "ngClass"], [1, "mj-agent-props-identity-info"], [1, "mj-agent-props-identity-name"], [1, "mj-agent-props-identity-meta"], [1, "mj-agent-props-type-pill"], [1, "mj-agent-props-status-dot"], [1, "mj-agent-props-status-label"], [1, "mj-agent-props-start-badge"], [1, "mj-agent-props-content"], ["Size", "sm", 1, "mj-agent-props-accordion", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], ["Size", "sm", 1, "mj-agent-props-accordion", 3, "FlushBody", "Expanded"], [1, "mj-agent-props-section", "mj-agent-props-danger"], [1, "mj-agent-props-section-body"], [1, "mj-agent-props-field"], ["type", "text", "placeholder", "Step name...", 1, "mj-agent-props-input", 3, "value"], [1, "mj-agent-props-readonly-value"], ["placeholder", "Optional description...", "rows", "2", 1, "mj-agent-props-input", "mj-agent-props-textarea", 3, "value"], [1, "mj-agent-props-input", 3, "value"], [1, "mj-agent-props-field", "mj-agent-props-field--row"], ["type", "text", "placeholder", "Step name...", 1, "mj-agent-props-input", 3, "input", "value"], ["placeholder", "Optional description...", "rows", "2", 1, "mj-agent-props-input", "mj-agent-props-textarea", 3, "input", "value"], [1, "mj-agent-props-input", 3, "change", "value"], ["value", "Active"], ["value", "Disabled"], ["value", "Pending"], [1, "mj-agent-props-checkbox-label"], ["type", "checkbox", 3, "change", "checked"], ["value", "Action"], ["value", "Prompt"], ["value", "Sub-Agent"], ["value", ""], [3, "value"], ["language", "json", "setup", "minimal", 3, "change", "value", "readonly", "lineWrapping"], ["language", "json", "setup", "minimal", "placeholder", "Enter JSON input mapping...", 3, "change", "value", "readonly", "lineWrapping"], ["language", "json", "setup", "minimal", "placeholder", "Enter JSON output mapping...", 3, "change", "value", "readonly", "lineWrapping"], ["type", "number", "min", "1", 1, "mj-agent-props-input", 3, "value"], ["value", "fail"], ["value", "continue"], ["value", "retry"], ["type", "number", "min", "0", "max", "10", 1, "mj-agent-props-input", 3, "value"], ["type", "number", "min", "0", "max", "10", 1, "mj-agent-props-input", 3, "input", "value"], ["type", "number", "min", "1", 1, "mj-agent-props-input", 3, "input", "value"], [1, "mj-agent-props-delete-btn", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "mj-agent-props-header", "mj-agent-props-header--path"], [1, "mj-agent-props-identity-icon", "mj-agent-props-identity-icon--path"], [1, "fa-solid", "fa-arrow-right"], [1, "mj-agent-props-path-route"], [1, "mj-agent-props-path-step-name"], [1, "fa-solid", "fa-arrow-right", "mj-agent-props-path-arrow"], [1, "mj-agent-props-priority-badge"], [1, "mj-agent-props-readonly-value", "mj-agent-props-readonly-value--muted"], [1, "mj-agent-props-hint"], ["type", "text", "placeholder", "Path label...", 1, "mj-agent-props-input", 3, "value"], ["language", "javascript", "setup", "minimal", "placeholder", "e.g. payload.status === 'active'", 3, "value", "readonly", "lineWrapping"], ["language", "javascript", "setup", "minimal", 3, "value", "readonly", "lineWrapping"], ["type", "number", "min", "-100", "max", "100", 1, "mj-agent-props-input", 3, "value"], ["type", "text", "placeholder", "Path label...", 1, "mj-agent-props-input", 3, "input", "value"], ["language", "javascript", "setup", "minimal", "placeholder", "e.g. payload.status === 'active'", 3, "change", "value", "readonly", "lineWrapping"], ["type", "number", "min", "-100", "max", "100", 1, "mj-agent-props-input", 3, "input", "value"]], template: function AgentPropertiesPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, AgentPropertiesPanelComponent_Conditional_1_Template, 4, 0, "div", 1);
-            i0.ɵɵconditionalCreate(2, AgentPropertiesPanelComponent_Conditional_2_Template, 40, 23);
-            i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_3_Template, 34, 17);
+            i0.ɵɵconditionalCreate(1, AgentPropertiesPanelComponent_Conditional_1_Template, 1, 0, "mj-empty-state", 1);
+            i0.ɵɵconditionalCreate(2, AgentPropertiesPanelComponent_Conditional_2_Template, 31, 23);
+            i0.ɵɵconditionalCreate(3, AgentPropertiesPanelComponent_Conditional_3_Template, 28, 17);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -1104,11 +1088,11 @@ export class AgentPropertiesPanelComponent {
             i0.ɵɵconditional(ctx.isStepSelected ? 2 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isConnectionSelected ? 3 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.CodeEditorComponent], styles: ["/* ============================================================\n   Agent Properties Panel \u2014 Step/Connection configuration\n   ============================================================ */\n\n.mj-agent-props {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.mj-agent-props *,\n.mj-agent-props *::before,\n.mj-agent-props *::after {\n  box-sizing: border-box;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-header {\n  flex-shrink: 0;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  border-left: 3px solid transparent;\n}\n\n.mj-agent-props-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n\n.mj-agent-props-header-label {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 1.2px;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n}\n\n.mj-agent-props-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-close:hover { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n/* \u2500\u2500 Identity Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-identity {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mj-agent-props-identity-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  border-radius: var(--mj-radius-md);\n  color: white;\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-identity-icon--path {\n  border-radius: var(--mj-radius-full);\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  font-size: 11px;\n}\n\n.mj-agent-props-identity-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.mj-agent-props-identity-name {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  word-break: break-word;\n}\n\n.mj-agent-props-identity-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-type-pill {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: var(--mj-radius-sm);\n  line-height: 1.6;\n}\n\n.mj-agent-props-status-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: var(--mj-radius-full);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-status-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-props-start-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 600;\n  color: #059669;\n  background: #ecfdf5;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-sm);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-props-priority-badge {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n/* \u2500\u2500 Path Route Display \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-path-route {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-path-step-name {\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-agent-props-path-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  flex: 1;\n}\n\n.mj-agent-props-empty i { font-size: 28px; color: var(--mj-border-strong); margin-bottom: 12px; }\n.mj-agent-props-empty p { font-size: var(--mj-text-sm); color: var(--mj-text-disabled); margin: 0; }\n\n/* \u2500\u2500 Scrollable Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-content {\n  flex: 1;\n  overflow-y: auto;\n  padding-bottom: 16px;\n}\n\n/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-section {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.mj-agent-props-section:last-child { border-bottom: none; }\n\n.mj-agent-props-section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 14px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.mj-agent-props-section-header:hover {\n  background: var(--mj-bg-page);\n}\n\n.mj-agent-props-section-header i {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.mj-agent-props-section-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mj-agent-props-section-body {\n  padding: 0 14px 12px;\n}\n\n/* \u2500\u2500 Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field {\n  margin-bottom: 12px;\n}\n\n.mj-agent-props-field label {\n  display: block;\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n}\n\n.mj-agent-props-field--row {\n  display: flex;\n  align-items: center;\n}\n\n.mj-agent-props-input {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n  outline: none;\n  font-family: inherit;\n}\n\n.mj-agent-props-input:focus { border-color: var(--mj-brand-primary); }\n.mj-agent-props-input:focus-visible { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }\n\n/* Select dropdown with consistent cross-browser styling */\nselect.mj-agent-props-input {\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n  cursor: pointer;\n}\n\n.mj-agent-props-textarea {\n  resize: vertical;\n  min-height: 48px;\n}\n\n.mj-agent-props-checkbox-label {\n  display: flex !important;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.mj-agent-props-checkbox-label input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n/* \u2500\u2500 Read-only Values \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-readonly-value {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  padding: 6px 10px;\n  min-height: 34px;\n  word-break: break-word;\n}\n\n.mj-agent-props-readonly-value--muted {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* \u2500\u2500 Code Editor in Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field mj-code-editor {\n  display: block;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  min-height: 60px;\n  max-height: 200px;\n}\n\n.mj-agent-props-field mj-code-editor .cm-editor {\n  font-size: var(--mj-text-xs);\n}\n\n/* \u2500\u2500 Hints \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-hint {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 3px;\n}\n\n/* \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-danger {\n  padding: 12px 14px;\n}\n\n.mj-agent-props-delete-btn {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #fecaca;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-error-subtle);\n  color: var(--mj-status-error);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-delete-btn:hover { background: var(--mj-status-error-subtle); border-color: #fca5a5; }\n\n.mj-agent-props-delete-btn i { font-size: var(--mj-text-xs); }\n"], encapsulation: 2 });
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.CodeEditorComponent, i4.MJEmptyStateComponent, i4.MJAccordionPanelComponent, i4.MJAccordionTitleDirective, i4.MJAccordionBodyDirective], styles: ["/* ============================================================\n   Agent Properties Panel \u2014 Step/Connection configuration\n   ============================================================ */\n\n.mj-agent-props {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.mj-agent-props *,\n.mj-agent-props *::before,\n.mj-agent-props *::after {\n  box-sizing: border-box;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-header {\n  flex-shrink: 0;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  border-left: 3px solid transparent;\n}\n\n.mj-agent-props-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n\n.mj-agent-props-header-label {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 1.2px;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n}\n\n.mj-agent-props-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-close:hover { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n/* \u2500\u2500 Identity Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-identity {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mj-agent-props-identity-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  border-radius: var(--mj-radius-md);\n  color: white;\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-identity-icon--path {\n  border-radius: var(--mj-radius-full);\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  font-size: 11px;\n}\n\n.mj-agent-props-identity-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.mj-agent-props-identity-name {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  word-break: break-word;\n}\n\n.mj-agent-props-identity-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-type-pill {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: var(--mj-radius-sm);\n  line-height: 1.6;\n}\n\n.mj-agent-props-status-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: var(--mj-radius-full);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-status-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-props-start-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 600;\n  color: #059669;\n  background: #ecfdf5;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-sm);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-props-priority-badge {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n/* \u2500\u2500 Path Route Display \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-path-route {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-path-step-name {\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-agent-props-path-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  flex: 1;\n}\n\n.mj-agent-props-empty i { font-size: 28px; color: var(--mj-border-strong); margin-bottom: 12px; }\n.mj-agent-props-empty p { font-size: var(--mj-text-sm); color: var(--mj-text-disabled); margin: 0; }\n\n/* \u2500\u2500 Scrollable Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-content {\n  flex: 1;\n  overflow-y: auto;\n  padding-bottom: 16px;\n}\n\n/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-section {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.mj-agent-props-section:last-child { border-bottom: none; }\n\n/* Section headers are now <mj-accordion-panel>; the bespoke section-header /\n   section-title chrome was removed so the accordion owns the title styling. */\n.mj-agent-props-section-body {\n  padding: 12px 14px;\n}\n\n/* \u2500\u2500 Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field {\n  margin-bottom: 12px;\n}\n\n.mj-agent-props-field label {\n  display: block;\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n}\n\n.mj-agent-props-field--row {\n  display: flex;\n  align-items: center;\n}\n\n.mj-agent-props-input {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n  outline: none;\n  font-family: inherit;\n}\n\n.mj-agent-props-input:focus { border-color: var(--mj-brand-primary); }\n.mj-agent-props-input:focus-visible { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }\n\n/* Select dropdown with consistent cross-browser styling */\nselect.mj-agent-props-input {\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n  cursor: pointer;\n}\n\n.mj-agent-props-textarea {\n  resize: vertical;\n  min-height: 48px;\n}\n\n.mj-agent-props-checkbox-label {\n  display: flex !important;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.mj-agent-props-checkbox-label input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n/* \u2500\u2500 Read-only Values \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-readonly-value {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  padding: 6px 10px;\n  min-height: 34px;\n  word-break: break-word;\n}\n\n.mj-agent-props-readonly-value--muted {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* \u2500\u2500 Code Editor in Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field mj-code-editor {\n  display: block;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  min-height: 60px;\n  max-height: 200px;\n}\n\n.mj-agent-props-field mj-code-editor .cm-editor {\n  font-size: var(--mj-text-xs);\n}\n\n/* \u2500\u2500 Hints \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-hint {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 3px;\n}\n\n/* \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-danger {\n  padding: 12px 14px;\n}\n\n.mj-agent-props-delete-btn {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #fecaca;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-error-subtle);\n  color: var(--mj-status-error);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-delete-btn:hover { background: var(--mj-status-error-subtle); border-color: #fca5a5; }\n\n.mj-agent-props-delete-btn i { font-size: var(--mj-text-xs); }\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentPropertiesPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-agent-properties-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"mj-agent-props\">\n\n  <!-- Empty State -->\n  @if (!isStepSelected && !isConnectionSelected) {\n    <div class=\"mj-agent-props-empty\">\n      <i class=\"fa-solid fa-mouse-pointer\"></i>\n      <p>Select a step or connection to view its properties</p>\n    </div>\n  }\n\n  <!-- ============================================ -->\n  <!-- STEP PROPERTIES                              -->\n  <!-- ============================================ -->\n  @if (isStepSelected) {\n    <!-- Step Header -->\n    <div class=\"mj-agent-props-header mj-agent-props-header--step\"\n      [style.border-left-color]=\"stepTypeColor\">\n      <div class=\"mj-agent-props-header-top\">\n        <span class=\"mj-agent-props-header-label\">STEP</span>\n        <button class=\"mj-agent-props-close\" (click)=\"CloseRequested.emit()\" title=\"Close\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Identity card -->\n      <div class=\"mj-agent-props-identity\">\n        <div class=\"mj-agent-props-identity-icon\" [style.background]=\"stepTypeColor\">\n          <i class=\"fa-solid\" [ngClass]=\"stepTypeIcon\"></i>\n        </div>\n        <div class=\"mj-agent-props-identity-info\">\n          <span class=\"mj-agent-props-identity-name\">{{ Step!.Name }}</span>\n          <span class=\"mj-agent-props-identity-meta\">\n            <span class=\"mj-agent-props-type-pill\" [style.color]=\"stepTypeColor\"\n            [style.background]=\"stepTypeColor + '18'\">{{ stepTypeLabel }}</span>\n            <span class=\"mj-agent-props-status-dot\" [style.background]=\"statusColor\"></span>\n            <span class=\"mj-agent-props-status-label\">{{ Step!.Status }}</span>\n            @if (Step!.StartingStep) {\n              <span class=\"mj-agent-props-start-badge\">Start</span>\n            }\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"mj-agent-props-content\">\n      <!-- \u2500\u2500 General Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"mj-agent-props-section\">\n        <button class=\"mj-agent-props-section-header\" (click)=\"ToggleSection('general')\">\n          <span class=\"mj-agent-props-section-title\">General</span>\n          <i class=\"fa-solid\" [ngClass]=\"IsSectionCollapsed('general') ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\n        </button>\n        @if (!IsSectionCollapsed('general')) {\n          <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>Name</label>\n              @if (!ReadOnly) {\n                <input type=\"text\" [value]=\"Step!.Name\"\n                  (input)=\"OnNameChange(InputValue($event))\"\n                  placeholder=\"Step name...\" class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">{{ Step!.Name }}</div>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Description</label>\n              @if (!ReadOnly) {\n                <textarea [value]=\"Step!.Description || ''\"\n                  (input)=\"OnDescriptionChange(InputValue($event))\"\n                  placeholder=\"Optional description...\" rows=\"2\"\n                class=\"mj-agent-props-input mj-agent-props-textarea\"></textarea>\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  {{ Step!.Description || '\u2014' }}\n                </div>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Status</label>\n              @if (!ReadOnly) {\n                <select [value]=\"Step!.Status\"\n                  (change)=\"OnStatusChange(InputValue($event))\"\n                  class=\"mj-agent-props-input\">\n                  <option value=\"Active\">Active</option>\n                  <option value=\"Disabled\">Disabled</option>\n                  <option value=\"Pending\">Pending</option>\n                </select>\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  <span class=\"mj-agent-props-status-dot\" [style.background]=\"statusColor\"></span>\n                  {{ Step!.Status }}\n                </div>\n              }\n            </div>\n            @if (!ReadOnly) {\n              <div class=\"mj-agent-props-field mj-agent-props-field--row\">\n                <label class=\"mj-agent-props-checkbox-label\">\n                  <input type=\"checkbox\" [checked]=\"Step!.StartingStep\"\n                    (change)=\"OnStartingStepChange(CheckedValue($event))\">\n                  Starting Step\n                </label>\n              </div>\n            }\n            @if (ReadOnly && Step!.StartingStep) {\n              <div class=\"mj-agent-props-field\">\n                <label>Starting Step</label>\n                <div class=\"mj-agent-props-readonly-value\">\n                  <span class=\"mj-agent-props-start-badge\">Yes \u2014 this is the entry point</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <!-- \u2500\u2500 Configuration Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"mj-agent-props-section\">\n        <button class=\"mj-agent-props-section-header\" (click)=\"ToggleSection('config')\">\n          <span class=\"mj-agent-props-section-title\">Configuration</span>\n          <i class=\"fa-solid\" [ngClass]=\"IsSectionCollapsed('config') ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\n        </button>\n        @if (!IsSectionCollapsed('config')) {\n          <div class=\"mj-agent-props-section-body\">\n            <!-- Loop Body Type (ForEach / While) -->\n            @if (showLoopConfig) {\n              <div class=\"mj-agent-props-field\">\n                <label>Loop Body Type</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.LoopBodyType || 'Action'\"\n                    (change)=\"OnLoopBodyTypeChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"Action\">Action</option>\n                    <option value=\"Prompt\">Prompt</option>\n                    <option value=\"Sub-Agent\">Sub-Agent</option>\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">\n                    {{ Step!.LoopBodyType || 'Action' }}\n                  </div>\n                }\n              </div>\n            }\n            <!-- Action Picker -->\n            @if (showActionPicker) {\n              <div class=\"mj-agent-props-field\">\n                <label>Action</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.ActionID || ''\"\n                    (change)=\"OnActionChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"\">-- Select Action --</option>\n                    @for (action of Actions; track action) {\n                      <option [value]=\"action.ID\">{{ action.Name }}</option>\n                    }\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ selectedActionName }}</div>\n                }\n              </div>\n            }\n            <!-- Prompt Picker -->\n            @if (showPromptPicker) {\n              <div class=\"mj-agent-props-field\">\n                <label>Prompt</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.PromptID || ''\"\n                    (change)=\"OnPromptChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"\">-- Select Prompt --</option>\n                    @for (prompt of Prompts; track prompt) {\n                      <option [value]=\"prompt.ID\">{{ prompt.Name }}</option>\n                    }\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ selectedPromptName }}</div>\n                }\n              </div>\n            }\n            <!-- Sub-Agent Picker -->\n            @if (showAgentPicker) {\n              <div class=\"mj-agent-props-field\">\n                <label>Sub-Agent</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.SubAgentID || ''\"\n                    (change)=\"OnSubAgentChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"\">-- Select Agent --</option>\n                    @for (agent of Agents; track agent) {\n                      <option [value]=\"agent.ID\">{{ agent.Name }}</option>\n                    }\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ selectedAgentName }}</div>\n                }\n              </div>\n            }\n            <!-- Loop Configuration (JSON) -->\n            @if (showLoopConfig) {\n              <div class=\"mj-agent-props-field\">\n                <label>Loop Configuration</label>\n                <mj-code-editor\n                  [value]=\"FormatJsonDisplay(Step!.Configuration)\"\n                  language=\"json\"\n                  [readonly]=\"ReadOnly\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  (change)=\"OnConfigurationChange($any($event))\">\n                </mj-code-editor>\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <!-- \u2500\u2500 Data Mapping Section (Action steps) \u2500\u2500\u2500 -->\n      @if (Step!.StepType === 'Action' || showActionPicker) {\n        <div class=\"mj-agent-props-section\">\n          <button class=\"mj-agent-props-section-header\" (click)=\"ToggleSection('mapping')\">\n            <span class=\"mj-agent-props-section-title\">Data Mapping</span>\n            <i class=\"fa-solid\" [ngClass]=\"IsSectionCollapsed('mapping') ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\n          </button>\n          @if (!IsSectionCollapsed('mapping')) {\n            <div class=\"mj-agent-props-section-body\">\n              <div class=\"mj-agent-props-field\">\n                <label>Input Mapping</label>\n                <mj-code-editor\n                  [value]=\"FormatJsonDisplay(Step!.ActionInputMapping)\"\n                  language=\"json\"\n                  [readonly]=\"ReadOnly\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  placeholder=\"Enter JSON input mapping...\"\n                  (change)=\"OnInputMappingChange($any($event))\">\n                </mj-code-editor>\n              </div>\n              <div class=\"mj-agent-props-field\">\n                <label>Output Mapping</label>\n                <mj-code-editor\n                  [value]=\"FormatJsonDisplay(Step!.ActionOutputMapping)\"\n                  language=\"json\"\n                  [readonly]=\"ReadOnly\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  placeholder=\"Enter JSON output mapping...\"\n                  (change)=\"OnOutputMappingChange($any($event))\">\n                </mj-code-editor>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <!-- \u2500\u2500 Error Handling Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"mj-agent-props-section\">\n        <button class=\"mj-agent-props-section-header\" (click)=\"ToggleSection('errors')\">\n          <span class=\"mj-agent-props-section-title\">Error Handling</span>\n          <i class=\"fa-solid\" [ngClass]=\"IsSectionCollapsed('errors') ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\n        </button>\n        @if (!IsSectionCollapsed('errors')) {\n          <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>On Error</label>\n              @if (!ReadOnly) {\n                <select [value]=\"Step!.OnErrorBehavior\"\n                  (change)=\"OnErrorBehaviorChange(InputValue($event))\"\n                  class=\"mj-agent-props-input\">\n                  <option value=\"fail\">Fail (stop flow)</option>\n                  <option value=\"continue\">Continue (ignore error)</option>\n                  <option value=\"retry\">Retry</option>\n                </select>\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  {{ Step!.OnErrorBehavior === 'fail' ? 'Fail (stop flow)' :\n                  Step!.OnErrorBehavior === 'continue' ? 'Continue (ignore error)' : 'Retry' }}\n                </div>\n              }\n            </div>\n            @if (Step!.OnErrorBehavior === 'retry') {\n              <div class=\"mj-agent-props-field\">\n                <label>Retry Count</label>\n                @if (!ReadOnly) {\n                  <input type=\"number\" [value]=\"Step!.RetryCount\" min=\"0\" max=\"10\"\n                    (input)=\"OnRetryCountChange(NumericValue($event))\"\n                    class=\"mj-agent-props-input\">\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ Step!.RetryCount }}</div>\n                }\n              </div>\n            }\n            <div class=\"mj-agent-props-field\">\n              <label>Timeout (seconds)</label>\n              @if (!ReadOnly) {\n                <input type=\"number\" [value]=\"Step!.TimeoutSeconds\" min=\"1\"\n                  (input)=\"OnTimeoutChange(NumericValue($event))\"\n                  class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">{{ Step!.TimeoutSeconds }}s</div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n      <!-- \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (!ReadOnly) {\n        <div class=\"mj-agent-props-section mj-agent-props-danger\">\n          <button class=\"mj-agent-props-delete-btn\" (click)=\"OnDeleteStep()\">\n            <i class=\"fa-solid fa-trash-can\"></i> Delete Step\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ============================================ -->\n  <!-- PATH PROPERTIES                              -->\n  <!-- ============================================ -->\n  @if (isConnectionSelected) {\n    <!-- Path Header -->\n    <div class=\"mj-agent-props-header mj-agent-props-header--path\"\n      [style.border-left-color]=\"pathAccentColor\">\n      <div class=\"mj-agent-props-header-top\">\n        <span class=\"mj-agent-props-header-label\">PATH</span>\n        <button class=\"mj-agent-props-close\" (click)=\"CloseRequested.emit()\" title=\"Close\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Path identity card -->\n      <div class=\"mj-agent-props-identity\">\n        <div class=\"mj-agent-props-identity-icon mj-agent-props-identity-icon--path\"\n          [style.background]=\"pathAccentColor\">\n          <i class=\"fa-solid fa-arrow-right\"></i>\n        </div>\n        <div class=\"mj-agent-props-identity-info\">\n          <span class=\"mj-agent-props-path-route\">\n            <span class=\"mj-agent-props-path-step-name\">{{ originStepName }}</span>\n            <i class=\"fa-solid fa-arrow-right mj-agent-props-path-arrow\"></i>\n            <span class=\"mj-agent-props-path-step-name\">{{ destinationStepName }}</span>\n          </span>\n          <span class=\"mj-agent-props-identity-meta\">\n            <span class=\"mj-agent-props-type-pill\"\n              [style.color]=\"pathAccentColor\"\n              [style.background]=\"pathAccentColor + '18'\">\n              {{ isConditionalPath ? 'Conditional' : 'Always' }}\n            </span>\n            @if (PathEntity!.Priority !== 0) {\n              <span class=\"mj-agent-props-priority-badge\">\n                Priority: {{ PathEntity!.Priority }}\n              </span>\n            }\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"mj-agent-props-content\">\n      <!-- \u2500\u2500 Overview Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"mj-agent-props-section\">\n        <button class=\"mj-agent-props-section-header\" (click)=\"ToggleSection('path-overview')\">\n          <span class=\"mj-agent-props-section-title\">Route</span>\n          <i class=\"fa-solid\" [ngClass]=\"IsSectionCollapsed('path-overview') ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\n        </button>\n        @if (!IsSectionCollapsed('path-overview')) {\n          <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>From</label>\n              <div class=\"mj-agent-props-readonly-value mj-agent-props-readonly-value--muted\">\n                {{ originStepName }}\n              </div>\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>To</label>\n              <div class=\"mj-agent-props-readonly-value mj-agent-props-readonly-value--muted\">\n                {{ destinationStepName }}\n              </div>\n            </div>\n            <span class=\"mj-agent-props-hint\">To change the route, rewire the connection on the canvas.</span>\n          </div>\n        }\n      </div>\n      <!-- \u2500\u2500 Path Settings Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"mj-agent-props-section\">\n        <button class=\"mj-agent-props-section-header\" (click)=\"ToggleSection('path-settings')\">\n          <span class=\"mj-agent-props-section-title\">Settings</span>\n          <i class=\"fa-solid\" [ngClass]=\"IsSectionCollapsed('path-settings') ? 'fa-chevron-right' : 'fa-chevron-down'\"></i>\n        </button>\n        @if (!IsSectionCollapsed('path-settings')) {\n          <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>Description</label>\n              @if (!ReadOnly) {\n                <input type=\"text\" [value]=\"PathEntity!.Description || ''\"\n                  (input)=\"OnPathDescriptionChange(InputValue($event))\"\n                  placeholder=\"Path label...\" class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  {{ PathEntity!.Description || '\u2014' }}\n                </div>\n              }\n              @if (!ReadOnly) {\n                <span class=\"mj-agent-props-hint\">Displayed as a label on the connection line</span>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Condition</label>\n              @if (!ReadOnly) {\n                <mj-code-editor\n                  [value]=\"PathEntity!.Condition || ''\"\n                  language=\"javascript\"\n                  [readonly]=\"false\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  placeholder=\"e.g. payload.status === 'active'\"\n                  (change)=\"OnPathConditionChange($any($event))\">\n                </mj-code-editor>\n              }\n              @if (ReadOnly && PathEntity!.Condition) {\n                <mj-code-editor\n                  [value]=\"PathEntity!.Condition\"\n                  language=\"javascript\"\n                  [readonly]=\"true\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\">\n                </mj-code-editor>\n              }\n              @if (ReadOnly && !PathEntity!.Condition) {\n                <div class=\"mj-agent-props-readonly-value mj-agent-props-readonly-value--muted\">\n                  No condition (always taken)\n                </div>\n              }\n              @if (!ReadOnly) {\n                <span class=\"mj-agent-props-hint\">\n                  JavaScript expression evaluated at runtime. Leave empty for unconditional.\n                </span>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Priority</label>\n              @if (!ReadOnly) {\n                <input type=\"number\" [value]=\"PathEntity!.Priority\" min=\"-100\" max=\"100\"\n                  (input)=\"OnPathPriorityChange(NumericValue($event))\"\n                  class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">{{ PathEntity!.Priority }}</div>\n              }\n              <span class=\"mj-agent-props-hint\">Higher priority paths are evaluated first when multiple paths leave a step.</span>\n            </div>\n          </div>\n        }\n      </div>\n      <!-- \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (!ReadOnly) {\n        <div class=\"mj-agent-props-section mj-agent-props-danger\">\n          <button class=\"mj-agent-props-delete-btn\" (click)=\"OnDeletePath()\">\n            <i class=\"fa-solid fa-trash-can\"></i> Delete Path\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["/* ============================================================\n   Agent Properties Panel \u2014 Step/Connection configuration\n   ============================================================ */\n\n.mj-agent-props {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.mj-agent-props *,\n.mj-agent-props *::before,\n.mj-agent-props *::after {\n  box-sizing: border-box;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-header {\n  flex-shrink: 0;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  border-left: 3px solid transparent;\n}\n\n.mj-agent-props-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n\n.mj-agent-props-header-label {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 1.2px;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n}\n\n.mj-agent-props-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-close:hover { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n/* \u2500\u2500 Identity Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-identity {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mj-agent-props-identity-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  border-radius: var(--mj-radius-md);\n  color: white;\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-identity-icon--path {\n  border-radius: var(--mj-radius-full);\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  font-size: 11px;\n}\n\n.mj-agent-props-identity-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.mj-agent-props-identity-name {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  word-break: break-word;\n}\n\n.mj-agent-props-identity-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-type-pill {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: var(--mj-radius-sm);\n  line-height: 1.6;\n}\n\n.mj-agent-props-status-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: var(--mj-radius-full);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-status-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-props-start-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 600;\n  color: #059669;\n  background: #ecfdf5;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-sm);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-props-priority-badge {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n/* \u2500\u2500 Path Route Display \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-path-route {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-path-step-name {\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-agent-props-path-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  flex: 1;\n}\n\n.mj-agent-props-empty i { font-size: 28px; color: var(--mj-border-strong); margin-bottom: 12px; }\n.mj-agent-props-empty p { font-size: var(--mj-text-sm); color: var(--mj-text-disabled); margin: 0; }\n\n/* \u2500\u2500 Scrollable Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-content {\n  flex: 1;\n  overflow-y: auto;\n  padding-bottom: 16px;\n}\n\n/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-section {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.mj-agent-props-section:last-child { border-bottom: none; }\n\n.mj-agent-props-section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 10px 14px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  transition: background-color 0.1s ease;\n}\n\n.mj-agent-props-section-header:hover {\n  background: var(--mj-bg-page);\n}\n\n.mj-agent-props-section-header i {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: transform 0.15s ease;\n}\n\n.mj-agent-props-section-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.mj-agent-props-section-body {\n  padding: 0 14px 12px;\n}\n\n/* \u2500\u2500 Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field {\n  margin-bottom: 12px;\n}\n\n.mj-agent-props-field label {\n  display: block;\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n}\n\n.mj-agent-props-field--row {\n  display: flex;\n  align-items: center;\n}\n\n.mj-agent-props-input {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n  outline: none;\n  font-family: inherit;\n}\n\n.mj-agent-props-input:focus { border-color: var(--mj-brand-primary); }\n.mj-agent-props-input:focus-visible { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }\n\n/* Select dropdown with consistent cross-browser styling */\nselect.mj-agent-props-input {\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n  cursor: pointer;\n}\n\n.mj-agent-props-textarea {\n  resize: vertical;\n  min-height: 48px;\n}\n\n.mj-agent-props-checkbox-label {\n  display: flex !important;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.mj-agent-props-checkbox-label input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n/* \u2500\u2500 Read-only Values \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-readonly-value {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  padding: 6px 10px;\n  min-height: 34px;\n  word-break: break-word;\n}\n\n.mj-agent-props-readonly-value--muted {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* \u2500\u2500 Code Editor in Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field mj-code-editor {\n  display: block;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  min-height: 60px;\n  max-height: 200px;\n}\n\n.mj-agent-props-field mj-code-editor .cm-editor {\n  font-size: var(--mj-text-xs);\n}\n\n/* \u2500\u2500 Hints \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-hint {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 3px;\n}\n\n/* \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-danger {\n  padding: 12px 14px;\n}\n\n.mj-agent-props-delete-btn {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #fecaca;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-error-subtle);\n  color: var(--mj-status-error);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-delete-btn:hover { background: var(--mj-status-error-subtle); border-color: #fca5a5; }\n\n.mj-agent-props-delete-btn i { font-size: var(--mj-text-xs); }\n"] }]
+        args: [{ standalone: false, selector: 'mj-agent-properties-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"mj-agent-props\">\n\n  <!-- Empty State -->\n  @if (!isStepSelected && !isConnectionSelected) {\n    <mj-empty-state class=\"mj-agent-props-empty\"\n      Icon=\"fa-solid fa-arrow-pointer\"\n      Title=\"No selection\"\n      Message=\"Select a step or connection to view its properties\" />\n  }\n\n  <!-- ============================================ -->\n  <!-- STEP PROPERTIES                              -->\n  <!-- ============================================ -->\n  @if (isStepSelected) {\n    <!-- Step Header -->\n    <div class=\"mj-agent-props-header mj-agent-props-header--step\"\n      [style.border-left-color]=\"stepTypeColor\">\n      <div class=\"mj-agent-props-header-top\">\n        <span class=\"mj-agent-props-header-label\">STEP</span>\n        <button class=\"mj-agent-props-close\" (click)=\"CloseRequested.emit()\" title=\"Close\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Identity card -->\n      <div class=\"mj-agent-props-identity\">\n        <div class=\"mj-agent-props-identity-icon\" [style.background]=\"stepTypeColor\">\n          <i class=\"fa-solid\" [ngClass]=\"stepTypeIcon\"></i>\n        </div>\n        <div class=\"mj-agent-props-identity-info\">\n          <span class=\"mj-agent-props-identity-name\">{{ Step!.Name }}</span>\n          <span class=\"mj-agent-props-identity-meta\">\n            <span class=\"mj-agent-props-type-pill\" [style.color]=\"stepTypeColor\"\n            [style.background]=\"stepTypeColor + '18'\">{{ stepTypeLabel }}</span>\n            <span class=\"mj-agent-props-status-dot\" [style.background]=\"statusColor\"></span>\n            <span class=\"mj-agent-props-status-label\">{{ Step!.Status }}</span>\n            @if (Step!.StartingStep) {\n              <span class=\"mj-agent-props-start-badge\">Start</span>\n            }\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"mj-agent-props-content\">\n      <!-- \u2500\u2500 General Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <mj-accordion-panel class=\"mj-agent-props-accordion\" Size=\"sm\" [FlushBody]=\"true\" [Expanded]=\"!IsSectionCollapsed('general')\" (ExpandedChange)=\"ToggleSection('general')\">\n        <ng-template mjAccordionTitle><span>General</span></ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>Name</label>\n              @if (!ReadOnly) {\n                <input type=\"text\" [value]=\"Step!.Name\"\n                  (input)=\"OnNameChange(InputValue($event))\"\n                  placeholder=\"Step name...\" class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">{{ Step!.Name }}</div>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Description</label>\n              @if (!ReadOnly) {\n                <textarea [value]=\"Step!.Description || ''\"\n                  (input)=\"OnDescriptionChange(InputValue($event))\"\n                  placeholder=\"Optional description...\" rows=\"2\"\n                class=\"mj-agent-props-input mj-agent-props-textarea\"></textarea>\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  {{ Step!.Description || '\u2014' }}\n                </div>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Status</label>\n              @if (!ReadOnly) {\n                <select [value]=\"Step!.Status\"\n                  (change)=\"OnStatusChange(InputValue($event))\"\n                  class=\"mj-agent-props-input\">\n                  <option value=\"Active\">Active</option>\n                  <option value=\"Disabled\">Disabled</option>\n                  <option value=\"Pending\">Pending</option>\n                </select>\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  <span class=\"mj-agent-props-status-dot\" [style.background]=\"statusColor\"></span>\n                  {{ Step!.Status }}\n                </div>\n              }\n            </div>\n            @if (!ReadOnly) {\n              <div class=\"mj-agent-props-field mj-agent-props-field--row\">\n                <label class=\"mj-agent-props-checkbox-label\">\n                  <input type=\"checkbox\" [checked]=\"Step!.StartingStep\"\n                    (change)=\"OnStartingStepChange(CheckedValue($event))\">\n                  Starting Step\n                </label>\n              </div>\n            }\n            @if (ReadOnly && Step!.StartingStep) {\n              <div class=\"mj-agent-props-field\">\n                <label>Starting Step</label>\n                <div class=\"mj-agent-props-readonly-value\">\n                  <span class=\"mj-agent-props-start-badge\">Yes \u2014 this is the entry point</span>\n                </div>\n              </div>\n            }\n          </div>\n          </ng-template>\n      </mj-accordion-panel>\n      <!-- \u2500\u2500 Configuration Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <mj-accordion-panel class=\"mj-agent-props-accordion\" Size=\"sm\" [FlushBody]=\"true\" [Expanded]=\"!IsSectionCollapsed('config')\" (ExpandedChange)=\"ToggleSection('config')\">\n        <ng-template mjAccordionTitle><span>Configuration</span></ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"mj-agent-props-section-body\">\n            <!-- Loop Body Type (ForEach / While) -->\n            @if (showLoopConfig) {\n              <div class=\"mj-agent-props-field\">\n                <label>Loop Body Type</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.LoopBodyType || 'Action'\"\n                    (change)=\"OnLoopBodyTypeChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"Action\">Action</option>\n                    <option value=\"Prompt\">Prompt</option>\n                    <option value=\"Sub-Agent\">Sub-Agent</option>\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">\n                    {{ Step!.LoopBodyType || 'Action' }}\n                  </div>\n                }\n              </div>\n            }\n            <!-- Action Picker -->\n            @if (showActionPicker) {\n              <div class=\"mj-agent-props-field\">\n                <label>Action</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.ActionID || ''\"\n                    (change)=\"OnActionChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"\">-- Select Action --</option>\n                    @for (action of Actions; track action) {\n                      <option [value]=\"action.ID\">{{ action.Name }}</option>\n                    }\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ selectedActionName }}</div>\n                }\n              </div>\n            }\n            <!-- Prompt Picker -->\n            @if (showPromptPicker) {\n              <div class=\"mj-agent-props-field\">\n                <label>Prompt</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.PromptID || ''\"\n                    (change)=\"OnPromptChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"\">-- Select Prompt --</option>\n                    @for (prompt of Prompts; track prompt) {\n                      <option [value]=\"prompt.ID\">{{ prompt.Name }}</option>\n                    }\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ selectedPromptName }}</div>\n                }\n              </div>\n            }\n            <!-- Sub-Agent Picker -->\n            @if (showAgentPicker) {\n              <div class=\"mj-agent-props-field\">\n                <label>Sub-Agent</label>\n                @if (!ReadOnly) {\n                  <select [value]=\"Step!.SubAgentID || ''\"\n                    (change)=\"OnSubAgentChange(InputValue($event))\"\n                    class=\"mj-agent-props-input\">\n                    <option value=\"\">-- Select Agent --</option>\n                    @for (agent of Agents; track agent) {\n                      <option [value]=\"agent.ID\">{{ agent.Name }}</option>\n                    }\n                  </select>\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ selectedAgentName }}</div>\n                }\n              </div>\n            }\n            <!-- Loop Configuration (JSON) -->\n            @if (showLoopConfig) {\n              <div class=\"mj-agent-props-field\">\n                <label>Loop Configuration</label>\n                <mj-code-editor\n                  [value]=\"FormatJsonDisplay(Step!.Configuration)\"\n                  language=\"json\"\n                  [readonly]=\"ReadOnly\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  (change)=\"OnConfigurationChange($any($event))\">\n                </mj-code-editor>\n              </div>\n            }\n          </div>\n          </ng-template>\n      </mj-accordion-panel>\n      <!-- \u2500\u2500 Data Mapping Section (Action steps) \u2500\u2500\u2500 -->\n      @if (Step!.StepType === 'Action' || showActionPicker) {\n        <mj-accordion-panel class=\"mj-agent-props-accordion\" Size=\"sm\" [FlushBody]=\"true\" [Expanded]=\"!IsSectionCollapsed('mapping')\" (ExpandedChange)=\"ToggleSection('mapping')\">\n          <ng-template mjAccordionTitle><span>Data Mapping</span></ng-template>\n            <ng-template mjAccordionBody>\n              <div class=\"mj-agent-props-section-body\">\n              <div class=\"mj-agent-props-field\">\n                <label>Input Mapping</label>\n                <mj-code-editor\n                  [value]=\"FormatJsonDisplay(Step!.ActionInputMapping)\"\n                  language=\"json\"\n                  [readonly]=\"ReadOnly\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  placeholder=\"Enter JSON input mapping...\"\n                  (change)=\"OnInputMappingChange($any($event))\">\n                </mj-code-editor>\n              </div>\n              <div class=\"mj-agent-props-field\">\n                <label>Output Mapping</label>\n                <mj-code-editor\n                  [value]=\"FormatJsonDisplay(Step!.ActionOutputMapping)\"\n                  language=\"json\"\n                  [readonly]=\"ReadOnly\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  placeholder=\"Enter JSON output mapping...\"\n                  (change)=\"OnOutputMappingChange($any($event))\">\n                </mj-code-editor>\n              </div>\n            </div>\n            </ng-template>\n        </mj-accordion-panel>\n      }\n      <!-- \u2500\u2500 Error Handling Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <mj-accordion-panel class=\"mj-agent-props-accordion\" Size=\"sm\" [FlushBody]=\"true\" [Expanded]=\"!IsSectionCollapsed('errors')\" (ExpandedChange)=\"ToggleSection('errors')\">\n        <ng-template mjAccordionTitle><span>Error Handling</span></ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>On Error</label>\n              @if (!ReadOnly) {\n                <select [value]=\"Step!.OnErrorBehavior\"\n                  (change)=\"OnErrorBehaviorChange(InputValue($event))\"\n                  class=\"mj-agent-props-input\">\n                  <option value=\"fail\">Fail (stop flow)</option>\n                  <option value=\"continue\">Continue (ignore error)</option>\n                  <option value=\"retry\">Retry</option>\n                </select>\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  {{ Step!.OnErrorBehavior === 'fail' ? 'Fail (stop flow)' :\n                  Step!.OnErrorBehavior === 'continue' ? 'Continue (ignore error)' : 'Retry' }}\n                </div>\n              }\n            </div>\n            @if (Step!.OnErrorBehavior === 'retry') {\n              <div class=\"mj-agent-props-field\">\n                <label>Retry Count</label>\n                @if (!ReadOnly) {\n                  <input type=\"number\" [value]=\"Step!.RetryCount\" min=\"0\" max=\"10\"\n                    (input)=\"OnRetryCountChange(NumericValue($event))\"\n                    class=\"mj-agent-props-input\">\n                }\n                @if (ReadOnly) {\n                  <div class=\"mj-agent-props-readonly-value\">{{ Step!.RetryCount }}</div>\n                }\n              </div>\n            }\n            <div class=\"mj-agent-props-field\">\n              <label>Timeout (seconds)</label>\n              @if (!ReadOnly) {\n                <input type=\"number\" [value]=\"Step!.TimeoutSeconds\" min=\"1\"\n                  (input)=\"OnTimeoutChange(NumericValue($event))\"\n                  class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">{{ Step!.TimeoutSeconds }}s</div>\n              }\n            </div>\n          </div>\n          </ng-template>\n      </mj-accordion-panel>\n      <!-- \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (!ReadOnly) {\n        <div class=\"mj-agent-props-section mj-agent-props-danger\">\n          <button class=\"mj-agent-props-delete-btn\" (click)=\"OnDeleteStep()\">\n            <i class=\"fa-solid fa-trash-can\"></i> Delete Step\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ============================================ -->\n  <!-- PATH PROPERTIES                              -->\n  <!-- ============================================ -->\n  @if (isConnectionSelected) {\n    <!-- Path Header -->\n    <div class=\"mj-agent-props-header mj-agent-props-header--path\"\n      [style.border-left-color]=\"pathAccentColor\">\n      <div class=\"mj-agent-props-header-top\">\n        <span class=\"mj-agent-props-header-label\">PATH</span>\n        <button class=\"mj-agent-props-close\" (click)=\"CloseRequested.emit()\" title=\"Close\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      <!-- Path identity card -->\n      <div class=\"mj-agent-props-identity\">\n        <div class=\"mj-agent-props-identity-icon mj-agent-props-identity-icon--path\"\n          [style.background]=\"pathAccentColor\">\n          <i class=\"fa-solid fa-arrow-right\"></i>\n        </div>\n        <div class=\"mj-agent-props-identity-info\">\n          <span class=\"mj-agent-props-path-route\">\n            <span class=\"mj-agent-props-path-step-name\">{{ originStepName }}</span>\n            <i class=\"fa-solid fa-arrow-right mj-agent-props-path-arrow\"></i>\n            <span class=\"mj-agent-props-path-step-name\">{{ destinationStepName }}</span>\n          </span>\n          <span class=\"mj-agent-props-identity-meta\">\n            <span class=\"mj-agent-props-type-pill\"\n              [style.color]=\"pathAccentColor\"\n              [style.background]=\"pathAccentColor + '18'\">\n              {{ isConditionalPath ? 'Conditional' : 'Always' }}\n            </span>\n            @if (PathEntity!.Priority !== 0) {\n              <span class=\"mj-agent-props-priority-badge\">\n                Priority: {{ PathEntity!.Priority }}\n              </span>\n            }\n          </span>\n        </div>\n      </div>\n    </div>\n    <div class=\"mj-agent-props-content\">\n      <!-- \u2500\u2500 Overview Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <mj-accordion-panel class=\"mj-agent-props-accordion\" Size=\"sm\" [FlushBody]=\"true\" [Expanded]=\"!IsSectionCollapsed('path-overview')\" (ExpandedChange)=\"ToggleSection('path-overview')\">\n        <ng-template mjAccordionTitle><span>Route</span></ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>From</label>\n              <div class=\"mj-agent-props-readonly-value mj-agent-props-readonly-value--muted\">\n                {{ originStepName }}\n              </div>\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>To</label>\n              <div class=\"mj-agent-props-readonly-value mj-agent-props-readonly-value--muted\">\n                {{ destinationStepName }}\n              </div>\n            </div>\n            <span class=\"mj-agent-props-hint\">To change the route, rewire the connection on the canvas.</span>\n          </div>\n          </ng-template>\n      </mj-accordion-panel>\n      <!-- \u2500\u2500 Path Settings Section \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <mj-accordion-panel class=\"mj-agent-props-accordion\" Size=\"sm\" [FlushBody]=\"true\" [Expanded]=\"!IsSectionCollapsed('path-settings')\" (ExpandedChange)=\"ToggleSection('path-settings')\">\n        <ng-template mjAccordionTitle><span>Settings</span></ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"mj-agent-props-section-body\">\n            <div class=\"mj-agent-props-field\">\n              <label>Description</label>\n              @if (!ReadOnly) {\n                <input type=\"text\" [value]=\"PathEntity!.Description || ''\"\n                  (input)=\"OnPathDescriptionChange(InputValue($event))\"\n                  placeholder=\"Path label...\" class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">\n                  {{ PathEntity!.Description || '\u2014' }}\n                </div>\n              }\n              @if (!ReadOnly) {\n                <span class=\"mj-agent-props-hint\">Displayed as a label on the connection line</span>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Condition</label>\n              @if (!ReadOnly) {\n                <mj-code-editor\n                  [value]=\"PathEntity!.Condition || ''\"\n                  language=\"javascript\"\n                  [readonly]=\"false\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\"\n                  placeholder=\"e.g. payload.status === 'active'\"\n                  (change)=\"OnPathConditionChange($any($event))\">\n                </mj-code-editor>\n              }\n              @if (ReadOnly && PathEntity!.Condition) {\n                <mj-code-editor\n                  [value]=\"PathEntity!.Condition\"\n                  language=\"javascript\"\n                  [readonly]=\"true\"\n                  setup=\"minimal\"\n                  [lineWrapping]=\"true\">\n                </mj-code-editor>\n              }\n              @if (ReadOnly && !PathEntity!.Condition) {\n                <div class=\"mj-agent-props-readonly-value mj-agent-props-readonly-value--muted\">\n                  No condition (always taken)\n                </div>\n              }\n              @if (!ReadOnly) {\n                <span class=\"mj-agent-props-hint\">\n                  JavaScript expression evaluated at runtime. Leave empty for unconditional.\n                </span>\n              }\n            </div>\n            <div class=\"mj-agent-props-field\">\n              <label>Priority</label>\n              @if (!ReadOnly) {\n                <input type=\"number\" [value]=\"PathEntity!.Priority\" min=\"-100\" max=\"100\"\n                  (input)=\"OnPathPriorityChange(NumericValue($event))\"\n                  class=\"mj-agent-props-input\">\n              }\n              @if (ReadOnly) {\n                <div class=\"mj-agent-props-readonly-value\">{{ PathEntity!.Priority }}</div>\n              }\n              <span class=\"mj-agent-props-hint\">Higher priority paths are evaluated first when multiple paths leave a step.</span>\n            </div>\n          </div>\n          </ng-template>\n      </mj-accordion-panel>\n      <!-- \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      @if (!ReadOnly) {\n        <div class=\"mj-agent-props-section mj-agent-props-danger\">\n          <button class=\"mj-agent-props-delete-btn\" (click)=\"OnDeletePath()\">\n            <i class=\"fa-solid fa-trash-can\"></i> Delete Path\n          </button>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["/* ============================================================\n   Agent Properties Panel \u2014 Step/Connection configuration\n   ============================================================ */\n\n.mj-agent-props {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.mj-agent-props *,\n.mj-agent-props *::before,\n.mj-agent-props *::after {\n  box-sizing: border-box;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-header {\n  flex-shrink: 0;\n  padding: 12px 14px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  border-left: 3px solid transparent;\n}\n\n.mj-agent-props-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n\n.mj-agent-props-header-label {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 1.2px;\n  text-transform: uppercase;\n  color: var(--mj-text-disabled);\n}\n\n.mj-agent-props-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  border-radius: var(--mj-radius-md);\n  background: transparent;\n  color: var(--mj-text-disabled);\n  cursor: pointer;\n  font-size: var(--mj-text-xs);\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-close:hover { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n/* \u2500\u2500 Identity Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-identity {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n}\n\n.mj-agent-props-identity-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  border-radius: var(--mj-radius-md);\n  color: white;\n  font-size: var(--mj-text-sm);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-identity-icon--path {\n  border-radius: var(--mj-radius-full);\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  font-size: 11px;\n}\n\n.mj-agent-props-identity-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.mj-agent-props-identity-name {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  word-break: break-word;\n}\n\n.mj-agent-props-identity-meta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-type-pill {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 1px 7px;\n  border-radius: var(--mj-radius-sm);\n  line-height: 1.6;\n}\n\n.mj-agent-props-status-dot {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  border-radius: var(--mj-radius-full);\n  flex-shrink: 0;\n}\n\n.mj-agent-props-status-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-props-start-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 600;\n  color: #059669;\n  background: #ecfdf5;\n  padding: 1px 6px;\n  border-radius: var(--mj-radius-sm);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-props-priority-badge {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n/* \u2500\u2500 Path Route Display \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-path-route {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.3;\n  flex-wrap: wrap;\n}\n\n.mj-agent-props-path-step-name {\n  max-width: 100px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.mj-agent-props-path-arrow {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  flex-shrink: 0;\n}\n\n/* \u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  flex: 1;\n}\n\n.mj-agent-props-empty i { font-size: 28px; color: var(--mj-border-strong); margin-bottom: 12px; }\n.mj-agent-props-empty p { font-size: var(--mj-text-sm); color: var(--mj-text-disabled); margin: 0; }\n\n/* \u2500\u2500 Scrollable Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-content {\n  flex: 1;\n  overflow-y: auto;\n  padding-bottom: 16px;\n}\n\n/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-section {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.mj-agent-props-section:last-child { border-bottom: none; }\n\n/* Section headers are now <mj-accordion-panel>; the bespoke section-header /\n   section-title chrome was removed so the accordion owns the title styling. */\n.mj-agent-props-section-body {\n  padding: 12px 14px;\n}\n\n/* \u2500\u2500 Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field {\n  margin-bottom: 12px;\n}\n\n.mj-agent-props-field label {\n  display: block;\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  margin-bottom: 4px;\n}\n\n.mj-agent-props-field--row {\n  display: flex;\n  align-items: center;\n}\n\n.mj-agent-props-input {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s ease;\n  outline: none;\n  font-family: inherit;\n}\n\n.mj-agent-props-input:focus { border-color: var(--mj-brand-primary); }\n.mj-agent-props-input:focus-visible { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }\n\n/* Select dropdown with consistent cross-browser styling */\nselect.mj-agent-props-input {\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n  cursor: pointer;\n}\n\n.mj-agent-props-textarea {\n  resize: vertical;\n  min-height: 48px;\n}\n\n.mj-agent-props-checkbox-label {\n  display: flex !important;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.mj-agent-props-checkbox-label input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n/* \u2500\u2500 Read-only Values \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-readonly-value {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  padding: 6px 10px;\n  min-height: 34px;\n  word-break: break-word;\n}\n\n.mj-agent-props-readonly-value--muted {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n/* \u2500\u2500 Code Editor in Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-field mj-code-editor {\n  display: block;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  min-height: 60px;\n  max-height: 200px;\n}\n\n.mj-agent-props-field mj-code-editor .cm-editor {\n  font-size: var(--mj-text-xs);\n}\n\n/* \u2500\u2500 Hints \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-hint {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 3px;\n}\n\n/* \u2500\u2500 Danger Zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-props-danger {\n  padding: 12px 14px;\n}\n\n.mj-agent-props-delete-btn {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #fecaca;\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-status-error-subtle);\n  color: var(--mj-status-error);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-delete-btn:hover { background: var(--mj-status-error-subtle); border-color: #fca5a5; }\n\n.mj-agent-props-delete-btn i { font-size: var(--mj-text-xs); }\n"] }]
     }], null, { Step: [{
             type: Input
         }], SelectedConnection: [{