npm - @memberjunction/ng-flow-editor - Versions diffs - 0.0.1 → 4.1.0 - Mend

@memberjunction/ng-flow-editor 0.0.1 → 4.1.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 (58) hide show

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

@@ -0,0 +1,1139 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+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";
+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()();
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
+    i0.ɵɵtext(1, "Start");
+    i0.ɵɵelementEnd();
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.Step.Name);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.Step.Description || "\u2014", " ");
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_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.ɵɵelementStart(1, "option", 33);
+    i0.ɵɵtext(2, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "option", 34);
+    i0.ɵɵtext(4, "Disabled");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "option", 35);
+    i0.ɵɵtext(6, "Pending");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "span", 15);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", ctx_r1.statusColor);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.Step.Status, " ");
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_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.ɵɵelementEnd();
+    i0.ɵɵtext(3, " Starting Step ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("checked", ctx_r1.Step.StartingStep);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_25_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.ɵɵ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");
+    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.ɵɵ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.ɵɵ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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 5 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 10 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 15 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 16 : -1);
+    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) {
+    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.ɵɵelementStart(1, "option", 38);
+    i0.ɵɵtext(2, "Action");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "option", 39);
+    i0.ɵɵtext(4, "Prompt");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "option", 40);
+    i0.ɵɵtext(6, "Sub-Agent");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.Step.LoopBodyType || "Action", " ");
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 3 : -1);
+    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) {
+    i0.ɵɵelementStart(0, "option", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r9 = ctx.$implicit;
+    i0.ɵɵproperty("value", action_r9.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(action_r9.Name);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r1.Step.ActionID || "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.Actions);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.selectedActionName);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 3 : -1);
+    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) {
+    i0.ɵɵelementStart(0, "option", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const prompt_r11 = ctx.$implicit;
+    i0.ɵɵproperty("value", prompt_r11.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(prompt_r11.Name);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r1.Step.PromptID || "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.Prompts);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.selectedPromptName);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 3 : -1);
+    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) {
+    i0.ɵɵelementStart(0, "option", 42);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const agent_r13 = ctx.$implicit;
+    i0.ɵɵproperty("value", agent_r13.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(agent_r13.Name);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("value", ctx_r1.Step.SubAgentID || "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.Agents);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.selectedAgentName);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 4 : -1);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_31_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.ɵɵ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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showLoopConfig ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showActionPicker ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showPromptPicker ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showAgentPicker ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showLoopConfig ? 5 : -1);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_32_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22)(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.ɵɵ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.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", ctx_r1.FormatJsonDisplay(ctx_r1.Step.ActionInputMapping))("readonly", ctx_r1.ReadOnly)("lineWrapping", true);
+    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) {
+    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.ɵɵ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);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_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.ɵɵelementStart(1, "option", 47);
+    i0.ɵɵtext(2, "Fail (stop flow)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "option", 48);
+    i0.ɵɵtext(4, "Continue (ignore error)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "option", 49);
+    i0.ɵɵtext(6, "Retry");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    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) {
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.Step.RetryCount);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 4 : -1);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_38_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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    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");
+    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.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, AgentPropertiesPanelComponent_Conditional_2_Conditional_38_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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Step.OnErrorBehavior === "retry" ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 11 : -1);
+} }
+function AgentPropertiesPanelComponent_Conditional_2_Conditional_39_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.ɵɵ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.ɵɵtext(3, "STEP");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 6);
+    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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 8)(7, "div", 9);
+    i0.ɵɵelement(8, "i", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 11)(10, "span", 12);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 13)(13, "span", 14);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(15, "span", 15);
+    i0.ɵɵelementStart(16, "span", 16);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(18, AgentPropertiesPanelComponent_Conditional_2_Conditional_18_Template, 2, 0, "span", 17);
+    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.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(31, AgentPropertiesPanelComponent_Conditional_2_Conditional_31_Template, 6, 5, "div", 22);
+    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.ɵɵ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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("border-left-color", ctx_r1.stepTypeColor);
+    i0.ɵɵadvance(7);
+    i0.ɵɵstyleProp("background", ctx_r1.stepTypeColor);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.stepTypeIcon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.Step.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", ctx_r1.stepTypeColor)("background", ctx_r1.stepTypeColor + "18");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.stepTypeLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", ctx_r1.statusColor);
+    i0.ɵɵadvance(2);
+    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();
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 39 : -1);
+} }
+function AgentPropertiesPanelComponent_Conditional_3_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 61);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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");
+    i0.ɵɵtext(3, "From");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 62);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 24)(7, "label");
+    i0.ɵɵtext(8, "To");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 62);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "span", 63);
+    i0.ɵɵtext(12, "To change the route, rewire the connection on the canvas.");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.originStepName, " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.destinationStepName, " ");
+} }
+function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.PathEntity.Description || "\u2014", " ");
+} }
+function AgentPropertiesPanelComponent_Conditional_3_Conditional_32_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) {
+    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.ɵɵ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) {
+    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) {
+    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) {
+    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) {
+    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.ɵɵ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) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    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");
+    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.ɵɵ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.ɵɵ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.ɵɵelementStart(19, "span", 63);
+    i0.ɵɵtext(20, "Higher priority paths are evaluated first when multiple paths leave a step.");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly && ctx_r1.PathEntity.Condition ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly && !ctx_r1.PathEntity.Condition ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 13 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(!ctx_r1.ReadOnly ? 17 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ReadOnly ? 18 : -1);
+} }
+function AgentPropertiesPanelComponent_Conditional_3_Conditional_33_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.ɵɵ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.ɵɵtext(3, "PATH");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 6);
+    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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 8)(7, "div", 56);
+    i0.ɵɵelement(8, "i", 57);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 11)(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.ɵɵ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.ɵɵelementEnd();
+    i0.ɵɵelement(25, "i", 10);
+    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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("border-left-color", ctx_r1.pathAccentColor);
+    i0.ɵɵadvance(7);
+    i0.ɵɵstyleProp("background", ctx_r1.pathAccentColor);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.originStepName);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.destinationStepName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("color", ctx_r1.pathAccentColor)("background", ctx_r1.pathAccentColor + "18");
+    i0.ɵɵadvance();
+    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);
+} }
+/** Step type accent color mapping */
+const STEP_TYPE_COLORS = {
+    Action: '#3b82f6',
+    Prompt: '#8b5cf6',
+    'Sub-Agent': '#10b981',
+    ForEach: '#f59e0b',
+    While: '#f59e0b'
+};
+/** Step type icon mapping */
+const STEP_TYPE_ICONS = {
+    Action: 'fa-bolt',
+    Prompt: 'fa-comment-dots',
+    'Sub-Agent': 'fa-robot',
+    ForEach: 'fa-arrows-spin',
+    While: 'fa-rotate'
+};
+/**
+ * Properties panel for editing AI Agent step and path configurations.
+ * Shows context-aware sections based on the selected step type.
+ */
+export class AgentPropertiesPanelComponent {
+    // ── Inputs ──────────────────────────────────────────────────
+    Step = null;
+    SelectedConnection = null;
+    PathEntity = null;
+    ReadOnly = false;
+    Actions = [];
+    Prompts = [];
+    Agents = [];
+    AllSteps = [];
+    // ── Outputs ─────────────────────────────────────────────────
+    StepChanged = new EventEmitter();
+    PathChanged = new EventEmitter();
+    DeleteStepRequested = new EventEmitter();
+    DeletePathRequested = new EventEmitter();
+    CloseRequested = new EventEmitter();
+    // ── Collapsible section state ─────────────────────────────
+    collapsedSections = {};
+    // ── Computed Properties ─────────────────────────────────────
+    get isStepSelected() {
+        return this.Step != null;
+    }
+    get isConnectionSelected() {
+        return this.SelectedConnection != null && this.PathEntity != null;
+    }
+    get showActionPicker() {
+        return this.Step?.StepType === 'Action' ||
+            ((this.Step?.StepType === 'ForEach' || this.Step?.StepType === 'While') && this.Step?.LoopBodyType === 'Action');
+    }
+    get showPromptPicker() {
+        return this.Step?.StepType === 'Prompt' ||
+            ((this.Step?.StepType === 'ForEach' || this.Step?.StepType === 'While') && this.Step?.LoopBodyType === 'Prompt');
+    }
+    get showAgentPicker() {
+        return this.Step?.StepType === 'Sub-Agent' ||
+            ((this.Step?.StepType === 'ForEach' || this.Step?.StepType === 'While') && this.Step?.LoopBodyType === 'Sub-Agent');
+    }
+    get showLoopConfig() {
+        return this.Step?.StepType === 'ForEach' || this.Step?.StepType === 'While';
+    }
+    get stepTypeLabel() {
+        switch (this.Step?.StepType) {
+            case 'Action': return 'Action';
+            case 'Prompt': return 'Prompt';
+            case 'Sub-Agent': return 'Sub-Agent';
+            case 'ForEach': return 'For Each Loop';
+            case 'While': return 'While Loop';
+            default: return 'Step';
+        }
+    }
+    get stepTypeColor() {
+        return STEP_TYPE_COLORS[this.Step?.StepType ?? ''] ?? '#64748b';
+    }
+    get stepTypeIcon() {
+        return STEP_TYPE_ICONS[this.Step?.StepType ?? ''] ?? 'fa-circle-nodes';
+    }
+    get statusColor() {
+        switch (this.Step?.Status) {
+            case 'Active': return '#10b981';
+            case 'Disabled': return '#94a3b8';
+            case 'Pending': return '#f59e0b';
+            default: return '#94a3b8';
+        }
+    }
+    /** Path: origin step name */
+    get originStepName() {
+        if (!this.PathEntity)
+            return '';
+        const step = this.AllSteps.find(s => s.ID === this.PathEntity.OriginStepID);
+        return step?.Name ?? 'Unknown Step';
+    }
+    /** Path: destination step name */
+    get destinationStepName() {
+        if (!this.PathEntity)
+            return '';
+        const step = this.AllSteps.find(s => s.ID === this.PathEntity.DestinationStepID);
+        return step?.Name ?? 'Unknown Step';
+    }
+    /** Path: whether a condition is set */
+    get isConditionalPath() {
+        return this.PathEntity?.Condition != null && this.PathEntity.Condition.trim().length > 0;
+    }
+    /** Path accent color */
+    get pathAccentColor() {
+        return this.isConditionalPath ? '#f59e0b' : '#94a3b8';
+    }
+    /** Resolved action name for display */
+    get selectedActionName() {
+        if (!this.Step?.ActionID)
+            return 'None selected';
+        return this.Actions.find(a => a.ID === this.Step.ActionID)?.Name ?? 'Unknown';
+    }
+    /** Resolved prompt name for display */
+    get selectedPromptName() {
+        if (!this.Step?.PromptID)
+            return 'None selected';
+        return this.Prompts.find(p => p.ID === this.Step.PromptID)?.Name ?? 'Unknown';
+    }
+    /** Resolved agent name for display */
+    get selectedAgentName() {
+        if (!this.Step?.SubAgentID)
+            return 'None selected';
+        return this.Agents.find(a => a.ID === this.Step.SubAgentID)?.Name ?? 'Unknown';
+    }
+    // ── Section Collapse ──────────────────────────────────────
+    ToggleSection(sectionId) {
+        this.collapsedSections[sectionId] = !this.collapsedSections[sectionId];
+    }
+    IsSectionCollapsed(sectionId) {
+        return this.collapsedSections[sectionId] === true;
+    }
+    // ── Step Event Handlers ─────────────────────────────────────
+    OnNameChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.Name = value;
+        this.StepChanged.emit(this.Step);
+    }
+    OnDescriptionChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.Description = value;
+        this.StepChanged.emit(this.Step);
+    }
+    OnStatusChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.Status = value;
+        this.StepChanged.emit(this.Step);
+    }
+    OnStartingStepChange(checked) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.StartingStep = checked;
+        this.StepChanged.emit(this.Step);
+    }
+    OnActionChange(actionId) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.ActionID = actionId || null;
+        this.StepChanged.emit(this.Step);
+    }
+    OnPromptChange(promptId) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.PromptID = promptId || null;
+        this.StepChanged.emit(this.Step);
+    }
+    OnSubAgentChange(agentId) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.SubAgentID = agentId || null;
+        this.StepChanged.emit(this.Step);
+    }
+    OnLoopBodyTypeChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.LoopBodyType = value;
+        this.StepChanged.emit(this.Step);
+    }
+    OnInputMappingChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.ActionInputMapping = value || null;
+        this.StepChanged.emit(this.Step);
+    }
+    OnOutputMappingChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.ActionOutputMapping = value || null;
+        this.StepChanged.emit(this.Step);
+    }
+    OnErrorBehaviorChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.OnErrorBehavior = value;
+        this.StepChanged.emit(this.Step);
+    }
+    OnRetryCountChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.RetryCount = value;
+        this.StepChanged.emit(this.Step);
+    }
+    OnTimeoutChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.TimeoutSeconds = value;
+        this.StepChanged.emit(this.Step);
+    }
+    OnConfigurationChange(value) {
+        if (!this.Step || this.ReadOnly)
+            return;
+        this.Step.Configuration = value || null;
+        this.StepChanged.emit(this.Step);
+    }
+    // ── Path Event Handlers ─────────────────────────────────────
+    OnPathDescriptionChange(value) {
+        if (!this.PathEntity || this.ReadOnly)
+            return;
+        this.PathEntity.Description = value;
+        this.PathChanged.emit(this.PathEntity);
+    }
+    OnPathConditionChange(value) {
+        if (!this.PathEntity || this.ReadOnly)
+            return;
+        this.PathEntity.Condition = value || null;
+        this.PathChanged.emit(this.PathEntity);
+    }
+    OnPathPriorityChange(value) {
+        if (!this.PathEntity || this.ReadOnly)
+            return;
+        this.PathEntity.Priority = value;
+        this.PathChanged.emit(this.PathEntity);
+    }
+    OnDeleteStep() {
+        if (this.Step) {
+            this.DeleteStepRequested.emit(this.Step);
+        }
+    }
+    OnDeletePath() {
+        if (this.PathEntity) {
+            this.DeletePathRequested.emit(this.PathEntity);
+        }
+    }
+    // ── Template Helpers ──────────────────────────────────────
+    /** Safely extract string value from an input/textarea/select change event */
+    InputValue(event) {
+        return event.target.value;
+    }
+    /** Safely extract checked state from a checkbox change event */
+    CheckedValue(event) {
+        return event.target.checked;
+    }
+    /** Safely extract numeric value from a number input event */
+    NumericValue(event) {
+        return +event.target.value;
+    }
+    /** Format JSON for display */
+    FormatJsonDisplay(value) {
+        if (!value)
+            return '';
+        try {
+            return JSON.stringify(JSON.parse(value), null, 2);
+        }
+        catch {
+            return value;
+        }
+    }
+    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) {
+            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.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isStepSelected && !ctx.isConnectionSelected ? 1 : -1);
+            i0.ɵɵadvance();
+            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: #ffffff;\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 #f1f5f9;\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: #94a3b8;\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: 6px;\n  background: transparent;\n  color: #94a3b8;\n  cursor: pointer;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-close:hover { background: #f1f5f9; color: #475569; }\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: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  flex-shrink: 0;\n}\n\n.mj-agent-props-identity-icon--path {\n  border-radius: 50%;\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: 14px;\n  font-weight: 600;\n  color: #1e293b;\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: 4px;\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: 50%;\n  flex-shrink: 0;\n}\n\n.mj-agent-props-status-label {\n  font-size: 11px;\n  color: #64748b;\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: 3px;\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-props-priority-badge {\n  font-size: 11px;\n  color: #64748b;\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: 13px;\n  font-weight: 600;\n  color: #1e293b;\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: #94a3b8;\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: #cbd5e1; margin-bottom: 12px; }\n.mj-agent-props-empty p { font-size: 13px; color: #94a3b8; 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 #f1f5f9;\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: #f8fafc;\n}\n\n.mj-agent-props-section-header i {\n  font-size: 10px;\n  color: #94a3b8;\n  transition: transform 0.15s ease;\n}\n\n.mj-agent-props-section-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: #94a3b8;\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: 12px;\n  font-weight: 500;\n  color: #475569;\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 #e2e8f0;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #1e293b;\n  background: #ffffff;\n  transition: border-color 0.15s ease;\n  outline: none;\n  font-family: inherit;\n}\n\n.mj-agent-props-input:focus { border-color: #3b82f6; }\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: 13px;\n  color: #475569;\n  cursor: pointer;\n}\n\n.mj-agent-props-checkbox-label input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: #3b82f6;\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: 13px;\n  color: #1e293b;\n  background: #f8fafc;\n  border: 1px solid #f1f5f9;\n  border-radius: 6px;\n  padding: 6px 10px;\n  min-height: 34px;\n  word-break: break-word;\n}\n\n.mj-agent-props-readonly-value--muted {\n  color: #64748b;\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 #e2e8f0;\n  border-radius: 6px;\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: 12px;\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: #94a3b8;\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: 6px;\n  background: #fef2f2;\n  color: #dc2626;\n  font-size: 13px;\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: #fee2e2; border-color: #fca5a5; }\n\n.mj-agent-props-delete-btn i { font-size: 12px; }\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: #ffffff;\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 #f1f5f9;\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: #94a3b8;\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: 6px;\n  background: transparent;\n  color: #94a3b8;\n  cursor: pointer;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-props-close:hover { background: #f1f5f9; color: #475569; }\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: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  flex-shrink: 0;\n}\n\n.mj-agent-props-identity-icon--path {\n  border-radius: 50%;\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: 14px;\n  font-weight: 600;\n  color: #1e293b;\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: 4px;\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: 50%;\n  flex-shrink: 0;\n}\n\n.mj-agent-props-status-label {\n  font-size: 11px;\n  color: #64748b;\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: 3px;\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-props-priority-badge {\n  font-size: 11px;\n  color: #64748b;\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: 13px;\n  font-weight: 600;\n  color: #1e293b;\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: #94a3b8;\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: #cbd5e1; margin-bottom: 12px; }\n.mj-agent-props-empty p { font-size: 13px; color: #94a3b8; 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 #f1f5f9;\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: #f8fafc;\n}\n\n.mj-agent-props-section-header i {\n  font-size: 10px;\n  color: #94a3b8;\n  transition: transform 0.15s ease;\n}\n\n.mj-agent-props-section-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: #94a3b8;\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: 12px;\n  font-weight: 500;\n  color: #475569;\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 #e2e8f0;\n  border-radius: 6px;\n  font-size: 13px;\n  color: #1e293b;\n  background: #ffffff;\n  transition: border-color 0.15s ease;\n  outline: none;\n  font-family: inherit;\n}\n\n.mj-agent-props-input:focus { border-color: #3b82f6; }\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: 13px;\n  color: #475569;\n  cursor: pointer;\n}\n\n.mj-agent-props-checkbox-label input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  accent-color: #3b82f6;\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: 13px;\n  color: #1e293b;\n  background: #f8fafc;\n  border: 1px solid #f1f5f9;\n  border-radius: 6px;\n  padding: 6px 10px;\n  min-height: 34px;\n  word-break: break-word;\n}\n\n.mj-agent-props-readonly-value--muted {\n  color: #64748b;\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 #e2e8f0;\n  border-radius: 6px;\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: 12px;\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: #94a3b8;\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: 6px;\n  background: #fef2f2;\n  color: #dc2626;\n  font-size: 13px;\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: #fee2e2; border-color: #fca5a5; }\n\n.mj-agent-props-delete-btn i { font-size: 12px; }\n"] }]
+    }], null, { Step: [{
+            type: Input
+        }], SelectedConnection: [{
+            type: Input
+        }], PathEntity: [{
+            type: Input
+        }], ReadOnly: [{
+            type: Input
+        }], Actions: [{
+            type: Input
+        }], Prompts: [{
+            type: Input
+        }], Agents: [{
+            type: Input
+        }], AllSteps: [{
+            type: Input
+        }], StepChanged: [{
+            type: Output
+        }], PathChanged: [{
+            type: Output
+        }], DeleteStepRequested: [{
+            type: Output
+        }], DeletePathRequested: [{
+            type: Output
+        }], CloseRequested: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentPropertiesPanelComponent, { className: "AgentPropertiesPanelComponent", filePath: "src/lib/agent-editor/agent-properties-panel.component.ts", lineNumber: 35 }); })();
+//# sourceMappingURL=agent-properties-panel.component.js.map