@memberjunction/ng-flow-editor 6.2.0-edge.1 → 6.2.0-edge.2

package/dist/lib/agent-editor/flow-agent-editor.component.js

@@ -4,13 +4,16 @@ import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { AgentFlowTransformerService, AGENT_STEP_TYPE_CONFIGS } from './agent-flow-transformer.service';
 import { UUIDsEqual } from '@memberjunction/global';
+import { ReadDecisionStepKey } from './decision-step-config';
+import { CheckFlowRun } from './flow-run-check';
 import * as i0 from "@angular/core";
 import * as i1 from "./agent-flow-transformer.service";
 import * as i2 from "@memberjunction/ng-shared-generic";
 import * as i3 from "@angular/common";
-import * as i4 from "../components/flow-editor.component";
-import * as i5 from "./agent-properties-panel.component";
-import * as i6 from "./agent-step-list.component";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "../components/flow-editor.component";
+import * as i6 from "./agent-properties-panel.component";
+import * as i7 from "./agent-step-list.component";
 const _c0 = ["flowEditor"];
 function FlowAgentEditorComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -125,13 +128,32 @@ function FlowAgentEditorComponent_Conditional_25_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelement(1, "mj-loading", 42);
     i0.ɵɵelementEnd();
 } }
+function FlowAgentEditorComponent_Conditional_26_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const problem_r9 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(problem_r9.Message);
+} }
 function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 43)(1, "mj-flow-editor", 45, 0);
-    i0.ɵɵlistener("NodeSelected", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_NodeSelected_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodeSelected($event)); })("NodeAdded", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_NodeAdded_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodeAdded($event)); })("NodeRemoved", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_NodeRemoved_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodeRemoved($event)); })("ConnectionCreated", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_ConnectionCreated_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionCreated($event)); })("ConnectionRemoved", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_ConnectionRemoved_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionRemoved($event)); })("ConnectionReassigned", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_ConnectionReassigned_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionReassigned($event)); })("ConnectionSelected", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_ConnectionSelected_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionSelected($event)); })("NodesChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_NodesChanged_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodesChanged($event)); })("ConnectionsChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_ConnectionsChanged_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionsChanged($event)); })("GridToggled", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_GridToggled_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onGridPrefChanged($event)); })("MinimapToggled", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_MinimapToggled_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onMinimapPrefChanged($event)); })("LegendToggled", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_flow_editor_LegendToggled_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onLegendPrefChanged($event)); });
+    i0.ɵɵelementStart(0, "mj-alert", 43)(1, "ul", 46);
+    i0.ɵɵrepeaterCreate(2, FlowAgentEditorComponent_Conditional_26_Conditional_1_For_3_Template, 2, 1, "li", null, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Title", ctx_r1.RunProblemsTitle);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.RunProblems);
+} }
+function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44)(1, "mj-flow-editor", 47, 0);
+    i0.ɵɵlistener("NodeSelected", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_NodeSelected_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodeSelected($event)); })("NodeAdded", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_NodeAdded_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodeAdded($event)); })("NodeRemoved", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_NodeRemoved_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodeRemoved($event)); })("ConnectionCreated", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_ConnectionCreated_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionCreated($event)); })("ConnectionRemoved", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_ConnectionRemoved_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionRemoved($event)); })("ConnectionReassigned", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_ConnectionReassigned_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionReassigned($event)); })("ConnectionSelected", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_ConnectionSelected_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionSelected($event)); })("NodesChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_NodesChanged_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNodesChanged($event)); })("ConnectionsChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_ConnectionsChanged_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionsChanged($event)); })("GridToggled", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_GridToggled_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onGridPrefChanged($event)); })("MinimapToggled", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_MinimapToggled_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onMinimapPrefChanged($event)); })("LegendToggled", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_flow_editor_LegendToggled_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onLegendPrefChanged($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 46)(4, "mj-agent-properties-panel", 47);
-    i0.ɵɵlistener("StepChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_agent_properties_panel_StepChanged_4_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepChanged($event)); })("PathChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_agent_properties_panel_PathChanged_4_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPathChanged($event)); })("DeleteStepRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_agent_properties_panel_DeleteStepRequested_4_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeleteStepRequested($event)); })("DeletePathRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_agent_properties_panel_DeletePathRequested_4_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeletePathRequested($event)); })("CloseRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template_mj_agent_properties_panel_CloseRequested_4_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCloseProperties()); });
+    i0.ɵɵelementStart(3, "div", 48)(4, "mj-agent-properties-panel", 49);
+    i0.ɵɵlistener("StepChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_StepChanged_4_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepChanged($event)); })("PathChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_PathChanged_4_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPathChanged($event)); })("DeleteStepRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_DeleteStepRequested_4_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeleteStepRequested($event)); })("DeletePathRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_DeletePathRequested_4_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeletePathRequested($event)); })("CloseRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_CloseRequested_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCloseProperties()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -140,15 +162,15 @@ function FlowAgentEditorComponent_Conditional_26_Conditional_1_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("mj-agent-editor-properties--visible", ctx_r1.showPropertiesPanel);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Step", ctx_r1.selectedStep)("SelectedConnection", ctx_r1.selectedConnection)("PathEntity", ctx_r1.selectedPathEntity)("ReadOnly", !ctx_r1.isEditingActive)("Actions", ctx_r1.availableActions)("Prompts", ctx_r1.availablePrompts)("Agents", ctx_r1.availableAgents)("AllSteps", ctx_r1.steps);
+    i0.ɵɵproperty("Step", ctx_r1.selectedStep)("SelectedConnection", ctx_r1.selectedConnection)("PathEntity", ctx_r1.selectedPathEntity)("ReadOnly", !ctx_r1.isEditingActive)("Actions", ctx_r1.availableActions)("Prompts", ctx_r1.availablePrompts)("Agents", ctx_r1.availableAgents)("AllSteps", ctx_r1.steps)("AllPaths", ctx_r1.paths)("DecisionModelTypeID", ctx_r1.decisionModelTypeID)("RunProblems", ctx_r1.RunProblems);
 } }
-function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44)(1, "mj-agent-step-list", 48);
-    i0.ɵɵlistener("StepClicked", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_step_list_StepClicked_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepClickedInList($event)); });
+function FlowAgentEditorComponent_Conditional_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45)(1, "mj-agent-step-list", 50);
+    i0.ɵɵlistener("StepClicked", function FlowAgentEditorComponent_Conditional_26_Conditional_3_Template_mj_agent_step_list_StepClicked_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepClickedInList($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 46)(3, "mj-agent-properties-panel", 47);
-    i0.ɵɵlistener("StepChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_StepChanged_3_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepChanged($event)); })("PathChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_PathChanged_3_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPathChanged($event)); })("DeleteStepRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_DeleteStepRequested_3_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeleteStepRequested($event)); })("DeletePathRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_DeletePathRequested_3_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeletePathRequested($event)); })("CloseRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template_mj_agent_properties_panel_CloseRequested_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCloseProperties()); });
+    i0.ɵɵelementStart(2, "div", 48)(3, "mj-agent-properties-panel", 49);
+    i0.ɵɵlistener("StepChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_3_Template_mj_agent_properties_panel_StepChanged_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStepChanged($event)); })("PathChanged", function FlowAgentEditorComponent_Conditional_26_Conditional_3_Template_mj_agent_properties_panel_PathChanged_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPathChanged($event)); })("DeleteStepRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_3_Template_mj_agent_properties_panel_DeleteStepRequested_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeleteStepRequested($event)); })("DeletePathRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_3_Template_mj_agent_properties_panel_DeletePathRequested_3_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDeletePathRequested($event)); })("CloseRequested", function FlowAgentEditorComponent_Conditional_26_Conditional_3_Template_mj_agent_properties_panel_CloseRequested_3_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCloseProperties()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -157,45 +179,69 @@ function FlowAgentEditorComponent_Conditional_26_Conditional_2_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵclassProp("mj-agent-editor-properties--visible", ctx_r1.showPropertiesPanel);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Step", ctx_r1.selectedStep)("SelectedConnection", ctx_r1.selectedConnection)("PathEntity", ctx_r1.selectedPathEntity)("ReadOnly", !ctx_r1.isEditingActive)("Actions", ctx_r1.availableActions)("Prompts", ctx_r1.availablePrompts)("Agents", ctx_r1.availableAgents)("AllSteps", ctx_r1.steps);
+    i0.ɵɵproperty("Step", ctx_r1.selectedStep)("SelectedConnection", ctx_r1.selectedConnection)("PathEntity", ctx_r1.selectedPathEntity)("ReadOnly", !ctx_r1.isEditingActive)("Actions", ctx_r1.availableActions)("Prompts", ctx_r1.availablePrompts)("Agents", ctx_r1.availableAgents)("AllSteps", ctx_r1.steps)("AllPaths", ctx_r1.paths)("DecisionModelTypeID", ctx_r1.decisionModelTypeID)("RunProblems", ctx_r1.RunProblems);
 } }
 function FlowAgentEditorComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵconditionalCreate(1, FlowAgentEditorComponent_Conditional_26_Conditional_1_Template, 5, 21, "div", 43);
-    i0.ɵɵconditionalCreate(2, FlowAgentEditorComponent_Conditional_26_Conditional_2_Template, 4, 13, "div", 44);
+    i0.ɵɵconditionalCreate(1, FlowAgentEditorComponent_Conditional_26_Conditional_1_Template, 4, 1, "mj-alert", 43);
+    i0.ɵɵconditionalCreate(2, FlowAgentEditorComponent_Conditional_26_Conditional_2_Template, 5, 24, "div", 44);
+    i0.ɵɵconditionalCreate(3, FlowAgentEditorComponent_Conditional_26_Conditional_3_Template, 4, 16, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.viewMode === "diagram" ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.RunProblems.length > 0 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.viewMode === "diagram" ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 2 : -1);
+    i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 3 : -1);
 } }
 function FlowAgentEditorComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 49)(2, "div", 50);
-    i0.ɵɵelement(3, "i", 51);
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 51)(2, "div", 52);
+    i0.ɵɵelement(3, "i", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "h3", 52);
+    i0.ɵɵelementStart(4, "h3", 54);
     i0.ɵɵtext(5, "Unsaved Changes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 53);
+    i0.ɵɵelementStart(6, "p", 55);
     i0.ɵɵtext(7, " You have unsaved changes to this flow. What would you like to do? ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 54)(9, "button", 55);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_27_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogSave()); });
-    i0.ɵɵelement(10, "i", 56);
+    i0.ɵɵelementStart(8, "div", 56)(9, "button", 57);
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_27_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogSave()); });
+    i0.ɵɵelement(10, "i", 58);
     i0.ɵɵtext(11, " Save & Close ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 57);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_27_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogDiscard()); });
+    i0.ɵɵelementStart(12, "button", 59);
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_27_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogDiscard()); });
     i0.ɵɵtext(13, " Discard Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 58);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_27_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogCancel()); });
+    i0.ɵɵelementStart(14, "button", 60);
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_27_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogCancel()); });
     i0.ɵɵtext(15, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } }
+/**
+ * Generates a unique Decision step key among existing flow steps.
+ * Starts with 'decision', then 'decision_2', 'decision_3', etc.
+ */
+export function GenerateUniqueDecisionKey(steps) {
+    const existingKeys = new Set();
+    for (const s of steps) {
+        const key = s.StepType === 'Decision' ? ReadDecisionStepKey(s.Configuration)?.trim() : undefined;
+        if (key) {
+            existingKeys.add(key);
+        }
+    }
+    if (!existingKeys.has('decision')) {
+        return 'decision';
+    }
+    let counter = 2;
+    while (existingKeys.has(`decision_${counter}`)) {
+        counter++;
+    }
+    return `decision_${counter}`;
+}
 /**
  * Flow Agent Editor — wraps the generic FlowEditorComponent with
  * MJ agent-specific CRUD, properties panel, and data transformation.
@@ -265,6 +311,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
     availableActions = [];
     availablePrompts = [];
     availableAgents = [];
+    decisionModelTypeID = null;
     // Permission state — cached once on init
     userCanUpdate = false;
     // User view preferences (persisted via UserInfoEngine)
@@ -350,7 +397,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
     }
     async loadPickerData() {
         const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-        const [actionsResult, promptsResult, agentsResult] = await rv.RunViews([
+        const [actionsResult, promptsResult, agentsResult, decisionModelTypeResult] = await rv.RunViews([
             {
                 EntityName: 'MJ: Actions',
                 Fields: ['ID', 'Name', 'IconClass'],
@@ -360,7 +407,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             },
             {
                 EntityName: 'MJ: AI Prompts',
-                Fields: ['ID', 'Name'],
+                Fields: ['ID', 'Name', 'AIModelType', 'AIModelTypeID'],
                 ExtraFilter: '',
                 OrderBy: 'Name ASC',
                 ResultType: 'simple'
@@ -371,6 +418,12 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
                 ExtraFilter: this.AgentID ? `ID <> '${this.AgentID}'` : '',
                 OrderBy: 'Name ASC',
                 ResultType: 'simple'
+            },
+            {
+                EntityName: 'MJ: AI Model Types',
+                ExtraFilter: "Name='Decision'",
+                Fields: ['ID'],
+                ResultType: 'simple'
             }
         ]);
         this.availableActions = actionsResult.Success
@@ -382,10 +435,69 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
         this.availableAgents = agentsResult.Success
             ? agentsResult.Results
             : [];
+        this.decisionModelTypeID = decisionModelTypeResult.Success && decisionModelTypeResult.Results && decisionModelTypeResult.Results.length > 0
+            ? decisionModelTypeResult.Results[0].ID
+            : null;
     }
     rebuildFlowModel() {
-        this.nodes = this.transformer.StepsToNodes(this.steps, this.availableActions, this.availableAgents);
-        this.connections = this.transformer.PathsToConnections(this.paths);
+        this.refreshRunCheck();
+        this.nodes = this.transformer.StepsToNodes(this.steps, this.availableActions, this.availableAgents, this.runProblems);
+        this.connections = this.transformer.PathsToConnections(this.paths, this.runProblems);
+        this.drawnPathProblems = this.pathProblemSignature();
+    }
+    // ── Run check ───────────────────────────────────────────────
+    /**
+     * Why the flow would not run as it stands — the runtime compiler's and validator's refusals, placed on
+     * the steps and paths they are about (see {@link CheckFlowRun}). Rechecked on every change and before
+     * a save. A save is not blocked by it: an unfinished flow is still worth saving, and the dispatcher
+     * refuses a flow that cannot run before any of it does.
+     */
+    get RunProblems() {
+        return this.runProblems;
+    }
+    /** The heading of the run-check banner. */
+    get RunProblemsTitle() {
+        const count = this.runProblems.length;
+        return `${count} ${count === 1 ? 'problem' : 'problems'} would stop this flow from running`;
+    }
+    runProblems = [];
+    /** The path problems the canvas last drew, so connections are rebuilt only when they change. */
+    drawnPathProblems = '';
+    refreshRunCheck() {
+        this.runProblems = CheckFlowRun(this.steps, this.paths);
+    }
+    /** Rechecks the flow and re-marks the canvas with the result. */
+    applyRunCheck() {
+        this.refreshRunCheck();
+        this.markRunProblems();
+    }
+    /**
+     * Re-marks every node and path with the last run check. A change to one step — a renamed question, a
+     * removed option — can break a path or a fork elsewhere in the flow. Only nodes whose warning changed
+     * are pushed to the canvas, and connections are rebuilt only when a path's problems changed.
+     */
+    markRunProblems() {
+        for (const node of this.nodes) {
+            const step = this.steps.find(s => UUIDsEqual(s.ID, node.ID));
+            if (!step)
+                continue;
+            const message = this.transformer.BuildNodeWarning(step, this.runProblems) ?? undefined;
+            const status = message ? 'warning' : this.transformer.MapStepStatus(step.Status);
+            if (status === node.Status && message === node.StatusMessage)
+                continue;
+            node.Status = status;
+            node.StatusMessage = message;
+            this.flowEditor?.UpdateNode(node.ID, { Status: status, StatusMessage: message });
+        }
+        const pathProblems = this.pathProblemSignature();
+        if (pathProblems !== this.drawnPathProblems) {
+            this.drawnPathProblems = pathProblems;
+            this.connections = this.transformer.PathsToConnections(this.paths, this.runProblems);
+        }
+    }
+    /** The path problems of the last run check, as one comparable string. */
+    pathProblemSignature() {
+        return JSON.stringify(this.runProblems.filter(p => p.PathID).map(p => [p.PathID, p.Message]));
     }
     /**
      * Observe the host element's size. When it transitions from zero to non-zero height
@@ -477,6 +589,8 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
         // Positions live on the canvas until asked for, so pull them onto the entities first — otherwise
         // a drag made just before saving is the one change that does not persist.
         this.syncPositionsFromCanvas();
+        // What is saved is what the run check last judged, so the banner never describes an older flow.
+        this.applyRunCheck();
         await this.queueRemovedEntitiesForDelete(tg);
         for (const step of this.steps) {
             step.TransactionGroup = tg;
@@ -528,11 +642,18 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
         }
     }
     // ── Flow Editor Event Handlers ──────────────────────────────
+    /**
+     * A new, empty step entity from the editor's provider. The one place a step is created, so a host or
+     * a spec can supply its own.
+     */
+    async CreateStepEntity() {
+        const p = this.ProviderToUse;
+        return p.GetEntityObject('MJ: AI Agent Steps', p.CurrentUser);
+    }
     async onNodeAdded(event) {
         if (!this.AgentID)
             return;
-        const p = this.ProviderToUse;
-        const step = await p.GetEntityObject('MJ: AI Agent Steps', p.CurrentUser);
+        const step = await this.CreateStepEntity();
         step.NewRecord(); // This generates a UUID immediately - available before Save()
         step.AgentID = this.AgentID;
         step.Name = event.Node.Label;
@@ -544,12 +665,19 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
         step.OnErrorBehavior = 'fail';
         step.RetryCount = 0;
         step.TimeoutSeconds = 600;
+        if (step.StepType === 'Decision') {
+            step.PromptID = null;
+            const key = GenerateUniqueDecisionKey(this.steps);
+            step.Configuration = JSON.stringify({ key, state: 'payload', questions: {} }, null, 2);
+        }
         // Add the unsaved step to the array - it already has a UUID from NewRecord()
         // This allows connections to be drawn immediately without waiting for a database save
         this.steps.push(step);
+        this.refreshRunCheck();
         // Build a FlowNode using the entity's pre-generated ID so Foblex can track it
-        const newNode = this.transformer.StepToNode(step, this.availableActions, this.availableAgents);
+        const newNode = this.transformer.StepToNode(step, this.availableActions, this.availableAgents, this.runProblems);
         this.nodes.push(newNode);
+        this.markRunProblems();
         this.markDirty();
         // Select the new node
         setTimeout(() => {
@@ -627,6 +755,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             }
             this.steps = this.steps.filter(s => !UUIDsEqual(s.ID, node.ID));
             this.paths = this.paths.filter(p => !UUIDsEqual(p.OriginStepID, node.ID) && !UUIDsEqual(p.DestinationStepID, node.ID));
+            this.applyRunCheck();
             this.markDirty();
         }
     }
@@ -637,6 +766,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
                 this.deletedPathIDs.push(path.ID);
             }
             this.paths = this.paths.filter(p => !UUIDsEqual(p.ID, conn.ID));
+            this.applyRunCheck();
             this.markDirty();
         }
     }
@@ -666,13 +796,14 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
     }
     // ── Properties Panel Events ─────────────────────────────────
     onStepChanged(step) {
+        this.refreshRunCheck();
         // Update the corresponding flow node in-place and push to generic editor
         const node = this.nodes.find(n => UUIDsEqual(n.ID, step.ID));
         if (node) {
             const newLabel = step.Name;
             const newSubtitle = this.transformer.BuildStepSubtitle(step);
             const baseStatus = this.transformer.MapStepStatus(step.Status);
-            const warningMessage = (baseStatus !== 'disabled') ? this.transformer.BuildConfigWarningMessage(step) : null;
+            const warningMessage = this.transformer.BuildNodeWarning(step, this.runProblems);
             const newStatus = warningMessage ? 'warning' : baseStatus;
             const newIsStart = step.StartingStep === true;
             node.Label = newLabel;
@@ -707,6 +838,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
                 Data: node.Data
             });
         }
+        this.markRunProblems();
         this.markDirty();
         this.cdr.detectChanges();
     }
@@ -962,7 +1094,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             i0.ɵɵlistener("keydown.escape", function FlowAgentEditorComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
         } if (rf & 2) {
             i0.ɵɵclassProp("mj-flow-agent-editor--fullscreen", ctx.HostFullScreen);
-        } }, inputs: { AgentID: "AgentID", EditMode: "EditMode", FullScreen: "FullScreen", ShowSaveControls: "ShowSaveControls", CanvasTitle: "CanvasTitle" }, outputs: { FlowSaved: "FlowSaved", FlowChanged: "FlowChanged", FullScreenToggled: "FullScreenToggled", StepSelected: "StepSelected" }, standalone: false, features: [i0.ɵɵProvidersFeature([AgentFlowTransformerService]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 28, vars: 22, consts: [["flowEditor", ""], [1, "mj-agent-editor"], [1, "mj-agent-editor-toolbar"], [1, "mj-agent-editor-toolbar-left"], ["title", "Undo (Ctrl+Z)", 1, "mj-agent-editor-btn", 3, "disabled"], ["title", "Redo (Ctrl+Y)", 1, "mj-agent-editor-btn", 3, "disabled"], [1, "mj-agent-editor-toolbar-center"], [1, "mj-agent-editor-title"], [1, "mj-agent-editor-view-toggle"], [1, "mj-agent-editor-view-btn", 3, "click"], [1, "fa-solid", "fa-diagram-project"], [1, "fa-solid", "fa-list"], [1, "mj-agent-editor-mode-badge", "mj-agent-editor-mode-badge--editing"], [1, "mj-agent-editor-mode-badge", "mj-agent-editor-mode-badge--readonly"], [1, "mj-agent-editor-toolbar-right"], [1, "mj-agent-editor-status", "mj-agent-editor-status--unsaved"], [1, "mj-agent-editor-status"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--primary", 3, "disabled"], ["title", "Cancel editing", 1, "mj-agent-editor-btn"], [1, "mj-agent-editor-btn-divider"], ["title", "Edit flow", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--edit"], ["title", "Expand to full screen", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--expand"], ["title", "Close full screen (Esc)", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--close"], [1, "mj-agent-editor-loading"], [1, "mj-agent-editor-body"], [1, "mj-agent-editor-dialog-overlay"], ["title", "Undo (Ctrl+Z)", 1, "mj-agent-editor-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], ["title", "Redo (Ctrl+Y)", 1, "mj-agent-editor-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-right"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-lock"], [1, "fa-solid", "fa-circle"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--primary", 3, "click", "disabled"], [1, "fa-solid", 3, "ngClass"], ["title", "Cancel editing", 1, "mj-agent-editor-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["title", "Edit flow", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--edit", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], ["title", "Expand to full screen", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--expand", 3, "click"], [1, "fa-solid", "fa-up-right-and-down-left-from-center"], ["title", "Close full screen (Esc)", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--close", 3, "click"], ["text", "Loading flow...", "size", "medium"], [1, "mj-agent-editor-diagram"], [1, "mj-agent-editor-list"], [3, "NodeSelected", "NodeAdded", "NodeRemoved", "ConnectionCreated", "ConnectionRemoved", "ConnectionReassigned", "ConnectionSelected", "NodesChanged", "ConnectionsChanged", "GridToggled", "MinimapToggled", "LegendToggled", "Nodes", "Connections", "NodeTypes", "ReadOnly", "ShowMinimap", "ShowPalette", "ShowGrid", "ShowLegend", "ShowStatusBar", "ShowToolbar", "AutoLayoutDirection"], [1, "mj-agent-editor-properties"], [3, "StepChanged", "PathChanged", "DeleteStepRequested", "DeletePathRequested", "CloseRequested", "Step", "SelectedConnection", "PathEntity", "ReadOnly", "Actions", "Prompts", "Agents", "AllSteps"], [3, "StepClicked", "Steps", "Paths", "SelectedStepID"], [1, "mj-agent-editor-dialog"], [1, "mj-agent-editor-dialog-icon"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "mj-agent-editor-dialog-title"], [1, "mj-agent-editor-dialog-message"], [1, "mj-agent-editor-dialog-actions"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--primary", 3, "click"], [1, "fa-solid", "fa-floppy-disk"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--danger-outline", 3, "click"], [1, "mj-agent-editor-btn", 3, "click"]], template: function FlowAgentEditorComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { AgentID: "AgentID", EditMode: "EditMode", FullScreen: "FullScreen", ShowSaveControls: "ShowSaveControls", CanvasTitle: "CanvasTitle" }, outputs: { FlowSaved: "FlowSaved", FlowChanged: "FlowChanged", FullScreenToggled: "FullScreenToggled", StepSelected: "StepSelected" }, standalone: false, features: [i0.ɵɵProvidersFeature([AgentFlowTransformerService]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 28, vars: 22, consts: [["flowEditor", ""], [1, "mj-agent-editor"], [1, "mj-agent-editor-toolbar"], [1, "mj-agent-editor-toolbar-left"], ["title", "Undo (Ctrl+Z)", 1, "mj-agent-editor-btn", 3, "disabled"], ["title", "Redo (Ctrl+Y)", 1, "mj-agent-editor-btn", 3, "disabled"], [1, "mj-agent-editor-toolbar-center"], [1, "mj-agent-editor-title"], [1, "mj-agent-editor-view-toggle"], [1, "mj-agent-editor-view-btn", 3, "click"], [1, "fa-solid", "fa-diagram-project"], [1, "fa-solid", "fa-list"], [1, "mj-agent-editor-mode-badge", "mj-agent-editor-mode-badge--editing"], [1, "mj-agent-editor-mode-badge", "mj-agent-editor-mode-badge--readonly"], [1, "mj-agent-editor-toolbar-right"], [1, "mj-agent-editor-status", "mj-agent-editor-status--unsaved"], [1, "mj-agent-editor-status"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--primary", 3, "disabled"], ["title", "Cancel editing", 1, "mj-agent-editor-btn"], [1, "mj-agent-editor-btn-divider"], ["title", "Edit flow", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--edit"], ["title", "Expand to full screen", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--expand"], ["title", "Close full screen (Esc)", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--close"], [1, "mj-agent-editor-loading"], [1, "mj-agent-editor-body"], [1, "mj-agent-editor-dialog-overlay"], ["title", "Undo (Ctrl+Z)", 1, "mj-agent-editor-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], ["title", "Redo (Ctrl+Y)", 1, "mj-agent-editor-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-right"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-lock"], [1, "fa-solid", "fa-circle"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--primary", 3, "click", "disabled"], [1, "fa-solid", 3, "ngClass"], ["title", "Cancel editing", 1, "mj-agent-editor-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["title", "Edit flow", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--edit", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], ["title", "Expand to full screen", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--expand", 3, "click"], [1, "fa-solid", "fa-up-right-and-down-left-from-center"], ["title", "Close full screen (Esc)", 1, "mj-agent-editor-btn", "mj-agent-editor-btn--close", 3, "click"], ["text", "Loading flow...", "size", "medium"], ["Variant", "warning", "Size", "sm", 1, "mj-agent-editor-run-problems", 3, "Title"], [1, "mj-agent-editor-diagram"], [1, "mj-agent-editor-list"], [1, "mj-agent-editor-run-problems-list"], [3, "NodeSelected", "NodeAdded", "NodeRemoved", "ConnectionCreated", "ConnectionRemoved", "ConnectionReassigned", "ConnectionSelected", "NodesChanged", "ConnectionsChanged", "GridToggled", "MinimapToggled", "LegendToggled", "Nodes", "Connections", "NodeTypes", "ReadOnly", "ShowMinimap", "ShowPalette", "ShowGrid", "ShowLegend", "ShowStatusBar", "ShowToolbar", "AutoLayoutDirection"], [1, "mj-agent-editor-properties"], [3, "StepChanged", "PathChanged", "DeleteStepRequested", "DeletePathRequested", "CloseRequested", "Step", "SelectedConnection", "PathEntity", "ReadOnly", "Actions", "Prompts", "Agents", "AllSteps", "AllPaths", "DecisionModelTypeID", "RunProblems"], [3, "StepClicked", "Steps", "Paths", "SelectedStepID"], [1, "mj-agent-editor-dialog"], [1, "mj-agent-editor-dialog-icon"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "mj-agent-editor-dialog-title"], [1, "mj-agent-editor-dialog-message"], [1, "mj-agent-editor-dialog-actions"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--primary", 3, "click"], [1, "fa-solid", "fa-floppy-disk"], [1, "mj-agent-editor-btn", "mj-agent-editor-btn--danger-outline", 3, "click"], [1, "mj-agent-editor-btn", 3, "click"]], template: function FlowAgentEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
             i0.ɵɵconditionalCreate(3, FlowAgentEditorComponent_Conditional_3_Template, 2, 1, "button", 4);
             i0.ɵɵconditionalCreate(4, FlowAgentEditorComponent_Conditional_4_Template, 2, 1, "button", 5);
@@ -993,7 +1125,7 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             i0.ɵɵconditionalCreate(24, FlowAgentEditorComponent_Conditional_24_Template, 3, 0, "button", 22);
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(25, FlowAgentEditorComponent_Conditional_25_Template, 2, 0, "div", 23);
-            i0.ɵɵconditionalCreate(26, FlowAgentEditorComponent_Conditional_26_Template, 3, 2, "div", 24);
+            i0.ɵɵconditionalCreate(26, FlowAgentEditorComponent_Conditional_26_Template, 4, 3, "div", 24);
             i0.ɵɵconditionalCreate(27, FlowAgentEditorComponent_Conditional_27_Template, 16, 0, "div", 25);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
@@ -1035,11 +1167,11 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             i0.ɵɵconditional(!ctx.isLoading ? 26 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showUnsavedDialog ? 27 : -1);
-        } }, dependencies: [i2.LoadingComponent, i3.NgClass, i4.FlowEditorComponent, i5.AgentPropertiesPanelComponent, i6.AgentStepListComponent, i3.DatePipe], styles: ["/* ============================================================\n   Flow Agent Editor \u2014 MJ-specific flow editor wrapper\n   ============================================================ */\n\n/* \u2500\u2500 Host element fullscreen positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen {\n  position: fixed;\n  top: 12px;\n  left: 12px;\n  right: 12px;\n  padding-right: 25px;\n  bottom: 12px;\n  z-index: 10000;\n  border-radius: var(--mj-radius-lg);\n  height: auto !important;\n  min-height: unset !important;\n  box-shadow: var(--mj-shadow-2xl);\n}\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen .mj-agent-editor {\n  height: 100%;\n  min-height: unset;\n  border-radius: var(--mj-radius-lg);\n}\n\n.mj-agent-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 500px;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  position: relative;\n}\n\n/* \u2500\u2500 Backdrop overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9999;\n}\n\n/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 12px;\n  flex-shrink: 0;\n  transition: background 0.2s ease, border-color 0.2s ease;\n}\n\n.mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg) var(--mj-radius-lg) 0 0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-agent-editor-toolbar-left,\n.mj-agent-editor-toolbar-center,\n.mj-agent-editor-toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-toolbar-right {\n  gap: 10px;\n}\n\n.mj-agent-editor-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.mj-agent-editor-btn i { font-size: var(--mj-text-xs); }\n\n.mj-agent-editor-btn:hover:not(:disabled) { background: var(--mj-bg-surface-sunken); border-color: var(--mj-border-strong); }\n.mj-agent-editor-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n.mj-agent-editor-btn--primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-agent-editor-btn--primary:hover:not(:disabled) { background: var(--mj-brand-primary-hover); border-color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--expand {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-btn--expand:hover:not(:disabled) { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)); color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--close {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n}\n\n.mj-agent-editor-btn--close:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error-text);\n}\n\n.mj-agent-editor-btn-divider {\n  width: 1px;\n  height: 22px;\n  background: var(--mj-border-default);\n  margin: 0 2px;\n}\n\n/* \u2500\u2500 View Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.mj-agent-editor-view-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-editor-view-btn i { font-size: 11px; }\n\n.mj-agent-editor-view-btn:not(:last-child) { border-right: 1px solid var(--mj-border-default); }\n\n.mj-agent-editor-view-btn--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-view-btn:hover:not(.mj-agent-editor-view-btn--active) { background: var(--mj-bg-page); }\n\n/* \u2500\u2500 Fullscreen Title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-title {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-right: 12px;\n}\n\n.mj-agent-editor-title i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n/* \u2500\u2500 Status Indicators \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-status {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-disabled);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-agent-editor-status--unsaved {\n  color: var(--mj-status-warning);\n}\n\n.mj-agent-editor-status--unsaved i { font-size: 6px; }\n\n/* \u2500\u2500 Inline Floating Controls (non-fullscreen) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-inline-controls {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-inline-expand {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: var(--mj-shadow-sm);\n  backdrop-filter: blur(4px);\n}\n\n.mj-agent-editor-inline-expand:hover {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-text-disabled);\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: scale(1.05);\n}\n\n.mj-agent-editor-inline-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-status-warning);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-bg-surface) 90%, transparent),\n              0 0 6px color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  animation: mj-inline-dot-pulse 2s ease-in-out infinite;\n}\n\n@keyframes mj-inline-dot-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n/* \u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  flex: 1;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-editor-loading i { font-size: var(--mj-text-base); }\n\n/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-body {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.mj-agent-editor-diagram {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-agent-editor-diagram mj-flow-editor {\n  flex: 1;\n  display: flex;\n}\n\n.mj-agent-editor-list {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n.mj-agent-editor-list mj-agent-step-list {\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* \u2500\u2500 Properties 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\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-properties {\n  width: 320px;\n  flex-shrink: 0;\n  overflow: hidden;\n  transform: translateX(320px);\n  margin-right: -320px;\n  transition: transform 0.2s ease, margin-right 0.2s ease;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.mj-agent-editor-properties--visible {\n  transform: translateX(0);\n  margin-right: 0;\n}\n\n.mj-agent-editor-properties mj-agent-properties-panel {\n  display: block;\n  width: 320px;\n  height: 100%;\n}\n\n/* \u2500\u2500 Mode Indicator Badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-mode-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-lg);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-editor-mode-badge i { font-size: 10px; }\n\n.mj-agent-editor-mode-badge--editing {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-mode-badge--readonly {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n/* \u2500\u2500 Edit Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--edit {\n  background: var(--mj-status-success-bg);\n  border-color: var(--mj-status-success-border);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-btn--edit:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success-text);\n}\n\n/* \u2500\u2500 Danger Outline Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--danger-outline {\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n  background: var(--mj-bg-surface);\n}\n\n.mj-agent-editor-btn--danger-outline:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Unsaved Changes Dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-dialog-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10001;\n  animation: mj-dialog-fade-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-agent-editor-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  padding: 28px 32px;\n  max-width: 400px;\n  width: 90%;\n  box-shadow: var(--mj-shadow-xl);\n  text-align: center;\n  animation: mj-dialog-scale-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-scale-in {\n  from { transform: scale(0.95); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.mj-agent-editor-dialog-icon {\n  font-size: 28px;\n  color: var(--mj-status-warning);\n  margin-bottom: 12px;\n}\n\n.mj-agent-editor-dialog-title {\n  font-size: var(--mj-text-base);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.mj-agent-editor-dialog-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  margin: 0 0 20px;\n  line-height: 1.5;\n}\n\n.mj-agent-editor-dialog-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n"], encapsulation: 2 });
+        } }, dependencies: [i2.LoadingComponent, i3.NgClass, i4.MJAlertComponent, i5.FlowEditorComponent, i6.AgentPropertiesPanelComponent, i7.AgentStepListComponent, i3.DatePipe], styles: ["/* ============================================================\n   Flow Agent Editor \u2014 MJ-specific flow editor wrapper\n   ============================================================ */\n\n/* \u2500\u2500 Host element fullscreen positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen {\n  position: fixed;\n  top: 12px;\n  left: 12px;\n  right: 12px;\n  padding-right: 25px;\n  bottom: 12px;\n  z-index: 10000;\n  border-radius: var(--mj-radius-lg);\n  height: auto !important;\n  min-height: unset !important;\n  box-shadow: var(--mj-shadow-2xl);\n}\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen .mj-agent-editor {\n  height: 100%;\n  min-height: unset;\n  border-radius: var(--mj-radius-lg);\n}\n\n.mj-agent-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 500px;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  position: relative;\n}\n\n/* \u2500\u2500 Backdrop overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9999;\n}\n\n/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 12px;\n  flex-shrink: 0;\n  transition: background 0.2s ease, border-color 0.2s ease;\n}\n\n.mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg) var(--mj-radius-lg) 0 0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-agent-editor-toolbar-left,\n.mj-agent-editor-toolbar-center,\n.mj-agent-editor-toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-toolbar-right {\n  gap: 10px;\n}\n\n.mj-agent-editor-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.mj-agent-editor-btn i { font-size: var(--mj-text-xs); }\n\n.mj-agent-editor-btn:hover:not(:disabled) { background: var(--mj-bg-surface-sunken); border-color: var(--mj-border-strong); }\n.mj-agent-editor-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n.mj-agent-editor-btn--primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-agent-editor-btn--primary:hover:not(:disabled) { background: var(--mj-brand-primary-hover); border-color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--expand {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-btn--expand:hover:not(:disabled) { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)); color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--close {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n}\n\n.mj-agent-editor-btn--close:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error-text);\n}\n\n.mj-agent-editor-btn-divider {\n  width: 1px;\n  height: 22px;\n  background: var(--mj-border-default);\n  margin: 0 2px;\n}\n\n/* \u2500\u2500 View Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.mj-agent-editor-view-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-editor-view-btn i { font-size: 11px; }\n\n.mj-agent-editor-view-btn:not(:last-child) { border-right: 1px solid var(--mj-border-default); }\n\n.mj-agent-editor-view-btn--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-view-btn:hover:not(.mj-agent-editor-view-btn--active) { background: var(--mj-bg-page); }\n\n/* \u2500\u2500 Fullscreen Title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-title {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-right: 12px;\n}\n\n.mj-agent-editor-title i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n/* \u2500\u2500 Status Indicators \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-status {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-disabled);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-agent-editor-status--unsaved {\n  color: var(--mj-status-warning);\n}\n\n.mj-agent-editor-status--unsaved i { font-size: 6px; }\n\n/* \u2500\u2500 Inline Floating Controls (non-fullscreen) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-inline-controls {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-inline-expand {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: var(--mj-shadow-sm);\n  backdrop-filter: blur(4px);\n}\n\n.mj-agent-editor-inline-expand:hover {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-text-disabled);\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: scale(1.05);\n}\n\n.mj-agent-editor-inline-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-status-warning);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-bg-surface) 90%, transparent),\n              0 0 6px color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  animation: mj-inline-dot-pulse 2s ease-in-out infinite;\n}\n\n@keyframes mj-inline-dot-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n/* \u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  flex: 1;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-editor-loading i { font-size: var(--mj-text-base); }\n\n/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-body {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Run-check banner: a bounded strip above the canvas, so a long list scrolls instead of pushing the flow away. */\n.mj-agent-editor-run-problems {\n  flex: 0 0 auto;\n  margin: 8px 8px 0;\n  max-height: 140px;\n  overflow-y: auto;\n}\n\n.mj-agent-editor-run-problems-list {\n  margin: 4px 0 0;\n  padding-inline-start: 1.25rem;\n}\n\n.mj-agent-editor-diagram {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-agent-editor-diagram mj-flow-editor {\n  flex: 1;\n  display: flex;\n}\n\n.mj-agent-editor-list {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n.mj-agent-editor-list mj-agent-step-list {\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* \u2500\u2500 Properties 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\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-properties {\n  width: 320px;\n  flex-shrink: 0;\n  overflow: hidden;\n  transform: translateX(320px);\n  margin-right: -320px;\n  transition: transform 0.2s ease, margin-right 0.2s ease;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.mj-agent-editor-properties--visible {\n  transform: translateX(0);\n  margin-right: 0;\n}\n\n.mj-agent-editor-properties mj-agent-properties-panel {\n  display: block;\n  width: 320px;\n  height: 100%;\n}\n\n/* \u2500\u2500 Mode Indicator Badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-mode-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-lg);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-editor-mode-badge i { font-size: 10px; }\n\n.mj-agent-editor-mode-badge--editing {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-mode-badge--readonly {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n/* \u2500\u2500 Edit Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--edit {\n  background: var(--mj-status-success-bg);\n  border-color: var(--mj-status-success-border);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-btn--edit:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success-text);\n}\n\n/* \u2500\u2500 Danger Outline Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--danger-outline {\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n  background: var(--mj-bg-surface);\n}\n\n.mj-agent-editor-btn--danger-outline:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Unsaved Changes Dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-dialog-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10001;\n  animation: mj-dialog-fade-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-agent-editor-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  padding: 28px 32px;\n  max-width: 400px;\n  width: 90%;\n  box-shadow: var(--mj-shadow-xl);\n  text-align: center;\n  animation: mj-dialog-scale-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-scale-in {\n  from { transform: scale(0.95); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.mj-agent-editor-dialog-icon {\n  font-size: 28px;\n  color: var(--mj-status-warning);\n  margin-bottom: 12px;\n}\n\n.mj-agent-editor-dialog-title {\n  font-size: var(--mj-text-base);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.mj-agent-editor-dialog-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  margin: 0 0 20px;\n  line-height: 1.5;\n}\n\n.mj-agent-editor-dialog-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowAgentEditorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-flow-agent-editor', encapsulation: ViewEncapsulation.None, providers: [AgentFlowTransformerService], template: "<div class=\"mj-agent-editor\">\n\n  <!-- \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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  <div class=\"mj-agent-editor-toolbar\" [class.mj-agent-editor-toolbar--editing]=\"isEditingActive\">\n    <div class=\"mj-agent-editor-toolbar-left\">\n      <!-- Undo / Redo (edit mode only) -->\n      @if (isEditingActive) {\n        <button class=\"mj-agent-editor-btn\"\n          [disabled]=\"!flowEditor?.CanUndo\" (click)=\"flowEditor?.Undo()\" title=\"Undo (Ctrl+Z)\">\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </button>\n      }\n      @if (isEditingActive) {\n        <button class=\"mj-agent-editor-btn\"\n          [disabled]=\"!flowEditor?.CanRedo\" (click)=\"flowEditor?.Redo()\" title=\"Redo (Ctrl+Y)\">\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </button>\n      }\n    </div>\n\n    <div class=\"mj-agent-editor-toolbar-center\">\n      <!-- Fullscreen title -->\n      @if (CanvasTitle) {\n        <span class=\"mj-agent-editor-title\">\n          <i class=\"fa-solid fa-diagram-project\"></i> {{ CanvasTitle }}\n        </span>\n      }\n\n      <!-- View Mode Toggle -->\n      <div class=\"mj-agent-editor-view-toggle\">\n        <button class=\"mj-agent-editor-view-btn\"\n          [class.mj-agent-editor-view-btn--active]=\"viewMode === 'diagram'\"\n          (click)=\"viewMode = 'diagram'\">\n          <i class=\"fa-solid fa-diagram-project\"></i> Diagram\n        </button>\n        <button class=\"mj-agent-editor-view-btn\"\n          [class.mj-agent-editor-view-btn--active]=\"viewMode === 'list'\"\n          (click)=\"viewMode = 'list'\">\n          <i class=\"fa-solid fa-list\"></i> List\n        </button>\n      </div>\n\n      <!-- Mode indicator badge -->\n      @if (isEditingActive) {\n        <span class=\"mj-agent-editor-mode-badge mj-agent-editor-mode-badge--editing\">\n          <i class=\"fa-solid fa-pen\"></i> Editing\n        </span>\n      }\n      @if (!isEditingActive) {\n        <span class=\"mj-agent-editor-mode-badge mj-agent-editor-mode-badge--readonly\">\n          <i class=\"fa-solid fa-lock\"></i> Read Only\n        </span>\n      }\n    </div>\n\n    <div class=\"mj-agent-editor-toolbar-right\">\n      <!-- Status indicators -->\n      @if (ShowSaveControls && hasUnsavedChanges) {\n        <span class=\"mj-agent-editor-status mj-agent-editor-status--unsaved\">\n          <i class=\"fa-solid fa-circle\"></i> Unsaved\n        </span>\n      }\n      @if (ShowSaveControls && lastSaved) {\n        <span class=\"mj-agent-editor-status\">\n          Saved {{ lastSaved | date:'shortTime' }}\n        </span>\n      }\n\n      <!-- Save + Cancel \u2014 only when this editor owns persistence. When a host form owns the\n           record's save, a Save button here is a SECOND save button for the same record. -->\n      @if (ShowSaveControls && isEditingActive) {\n        <button class=\"mj-agent-editor-btn mj-agent-editor-btn--primary\"\n          [disabled]=\"isSaving || !hasUnsavedChanges\" (click)=\"Save()\">\n          <i class=\"fa-solid\" [ngClass]=\"isSaving ? 'fa-spinner fa-spin' : 'fa-floppy-disk'\"></i>\n          {{ isSaving ? 'Saving...' : 'Save' }}\n        </button>\n      }\n      @if (ShowSaveControls && fullscreenEditMode && !EditMode) {\n        <button\n          class=\"mj-agent-editor-btn\"\n          (click)=\"cancelFullscreenEdit()\" title=\"Cancel editing\">\n          <i class=\"fa-solid fa-xmark\"></i> Cancel\n        </button>\n      }\n\n      @if (ShowSaveControls && isEditingActive) {\n        <div class=\"mj-agent-editor-btn-divider\"></div>\n      }\n\n      <!-- Fullscreen edit toggle (only when parent is NOT in edit mode) -->\n      @if (ShowSaveControls && !EditMode && !fullscreenEditMode && userCanUpdate) {\n        <button\n          class=\"mj-agent-editor-btn mj-agent-editor-btn--edit\"\n          (click)=\"toggleFullscreenEditMode()\" title=\"Edit flow\">\n          <i class=\"fa-solid fa-pen-to-square\"></i> Edit\n        </button>\n      }\n\n      <!-- Expand / Close fullscreen -->\n      @if (!FullScreen) {\n        <button class=\"mj-agent-editor-btn mj-agent-editor-btn--expand\"\n          (click)=\"toggleFullScreen()\" title=\"Expand to full screen\">\n          <i class=\"fa-solid fa-up-right-and-down-left-from-center\"></i> Expand\n        </button>\n      }\n      @if (FullScreen) {\n        <button class=\"mj-agent-editor-btn mj-agent-editor-btn--close\"\n          (click)=\"toggleFullScreen()\" title=\"Close full screen (Esc)\">\n          <i class=\"fa-solid fa-xmark\"></i> Close\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 Loading 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 -->\n  @if (isLoading) {\n    <div class=\"mj-agent-editor-loading\">\n      <!-- MJ's shared indicator, not a hand-rolled fa-spinner: one loading affordance across the\n           product means a slow canvas looks like every other slow thing, not like a different bug. -->\n      <mj-loading text=\"Loading flow...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Main 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\u2500\u2500\u2500 -->\n  @if (!isLoading) {\n    <div class=\"mj-agent-editor-body\">\n      <!-- Diagram View -->\n      @if (viewMode === 'diagram') {\n        <div class=\"mj-agent-editor-diagram\">\n          <mj-flow-editor #flowEditor\n            [Nodes]=\"nodes\"\n            [Connections]=\"connections\"\n            [NodeTypes]=\"nodeTypes\"\n            [ReadOnly]=\"!isEditingActive\"\n            [ShowMinimap]=\"prefShowMinimap\"\n            [ShowPalette]=\"isEditingActive\"\n            [ShowGrid]=\"prefShowGrid\"\n            [ShowLegend]=\"prefShowLegend\"\n            [ShowStatusBar]=\"true\"\n            [ShowToolbar]=\"true\"\n            [AutoLayoutDirection]=\"'vertical'\"\n            (NodeSelected)=\"onNodeSelected($event)\"\n            (NodeAdded)=\"onNodeAdded($event)\"\n            (NodeRemoved)=\"onNodeRemoved($event)\"\n            (ConnectionCreated)=\"onConnectionCreated($event)\"\n            (ConnectionRemoved)=\"onConnectionRemoved($event)\"\n            (ConnectionReassigned)=\"onConnectionReassigned($event)\"\n            (ConnectionSelected)=\"onConnectionSelected($event)\"\n            (NodesChanged)=\"onNodesChanged($event)\"\n            (ConnectionsChanged)=\"onConnectionsChanged($event)\"\n            (GridToggled)=\"onGridPrefChanged($event)\"\n            (MinimapToggled)=\"onMinimapPrefChanged($event)\"\n            (LegendToggled)=\"onLegendPrefChanged($event)\">\n          </mj-flow-editor>\n          <!-- Properties Panel -->\n          <div class=\"mj-agent-editor-properties\"\n            [class.mj-agent-editor-properties--visible]=\"showPropertiesPanel\">\n            <mj-agent-properties-panel\n              [Step]=\"selectedStep\"\n              [SelectedConnection]=\"selectedConnection\"\n              [PathEntity]=\"selectedPathEntity\"\n              [ReadOnly]=\"!isEditingActive\"\n              [Actions]=\"availableActions\"\n              [Prompts]=\"availablePrompts\"\n              [Agents]=\"availableAgents\"\n              [AllSteps]=\"steps\"\n              (StepChanged)=\"onStepChanged($event)\"\n              (PathChanged)=\"onPathChanged($event)\"\n              (DeleteStepRequested)=\"onDeleteStepRequested($event)\"\n              (DeletePathRequested)=\"onDeletePathRequested($event)\"\n              (CloseRequested)=\"onCloseProperties()\">\n            </mj-agent-properties-panel>\n          </div>\n        </div>\n      }\n      <!-- List View -->\n      @if (viewMode === 'list') {\n        <div class=\"mj-agent-editor-list\">\n          <mj-agent-step-list\n            [Steps]=\"steps\"\n            [Paths]=\"paths\"\n            [SelectedStepID]=\"selectedStep?.ID || null\"\n            (StepClicked)=\"onStepClickedInList($event)\">\n          </mj-agent-step-list>\n          <!-- Properties Panel in list mode too -->\n          <div class=\"mj-agent-editor-properties\"\n            [class.mj-agent-editor-properties--visible]=\"showPropertiesPanel\">\n            <mj-agent-properties-panel\n              [Step]=\"selectedStep\"\n              [SelectedConnection]=\"selectedConnection\"\n              [PathEntity]=\"selectedPathEntity\"\n              [ReadOnly]=\"!isEditingActive\"\n              [Actions]=\"availableActions\"\n              [Prompts]=\"availablePrompts\"\n              [Agents]=\"availableAgents\"\n              [AllSteps]=\"steps\"\n              (StepChanged)=\"onStepChanged($event)\"\n              (PathChanged)=\"onPathChanged($event)\"\n              (DeleteStepRequested)=\"onDeleteStepRequested($event)\"\n              (DeletePathRequested)=\"onDeletePathRequested($event)\"\n              (CloseRequested)=\"onCloseProperties()\">\n            </mj-agent-properties-panel>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- \u2500\u2500 Unsaved Changes Dialog \u2500\u2500\u2500\u2500\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  @if (showUnsavedDialog) {\n    <div class=\"mj-agent-editor-dialog-overlay\">\n      <div class=\"mj-agent-editor-dialog\">\n        <div class=\"mj-agent-editor-dialog-icon\">\n          <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        </div>\n        <h3 class=\"mj-agent-editor-dialog-title\">Unsaved Changes</h3>\n        <p class=\"mj-agent-editor-dialog-message\">\n          You have unsaved changes to this flow. What would you like to do?\n        </p>\n        <div class=\"mj-agent-editor-dialog-actions\">\n          <button class=\"mj-agent-editor-btn mj-agent-editor-btn--primary\" (click)=\"onUnsavedDialogSave()\">\n            <i class=\"fa-solid fa-floppy-disk\"></i> Save & Close\n          </button>\n          <button class=\"mj-agent-editor-btn mj-agent-editor-btn--danger-outline\" (click)=\"onUnsavedDialogDiscard()\">\n            Discard Changes\n          </button>\n          <button class=\"mj-agent-editor-btn\" (click)=\"onUnsavedDialogCancel()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/* ============================================================\n   Flow Agent Editor \u2014 MJ-specific flow editor wrapper\n   ============================================================ */\n\n/* \u2500\u2500 Host element fullscreen positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen {\n  position: fixed;\n  top: 12px;\n  left: 12px;\n  right: 12px;\n  padding-right: 25px;\n  bottom: 12px;\n  z-index: 10000;\n  border-radius: var(--mj-radius-lg);\n  height: auto !important;\n  min-height: unset !important;\n  box-shadow: var(--mj-shadow-2xl);\n}\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen .mj-agent-editor {\n  height: 100%;\n  min-height: unset;\n  border-radius: var(--mj-radius-lg);\n}\n\n.mj-agent-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 500px;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  position: relative;\n}\n\n/* \u2500\u2500 Backdrop overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9999;\n}\n\n/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 12px;\n  flex-shrink: 0;\n  transition: background 0.2s ease, border-color 0.2s ease;\n}\n\n.mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg) var(--mj-radius-lg) 0 0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-agent-editor-toolbar-left,\n.mj-agent-editor-toolbar-center,\n.mj-agent-editor-toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-toolbar-right {\n  gap: 10px;\n}\n\n.mj-agent-editor-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.mj-agent-editor-btn i { font-size: var(--mj-text-xs); }\n\n.mj-agent-editor-btn:hover:not(:disabled) { background: var(--mj-bg-surface-sunken); border-color: var(--mj-border-strong); }\n.mj-agent-editor-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n.mj-agent-editor-btn--primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-agent-editor-btn--primary:hover:not(:disabled) { background: var(--mj-brand-primary-hover); border-color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--expand {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-btn--expand:hover:not(:disabled) { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)); color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--close {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n}\n\n.mj-agent-editor-btn--close:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error-text);\n}\n\n.mj-agent-editor-btn-divider {\n  width: 1px;\n  height: 22px;\n  background: var(--mj-border-default);\n  margin: 0 2px;\n}\n\n/* \u2500\u2500 View Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.mj-agent-editor-view-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-editor-view-btn i { font-size: 11px; }\n\n.mj-agent-editor-view-btn:not(:last-child) { border-right: 1px solid var(--mj-border-default); }\n\n.mj-agent-editor-view-btn--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-view-btn:hover:not(.mj-agent-editor-view-btn--active) { background: var(--mj-bg-page); }\n\n/* \u2500\u2500 Fullscreen Title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-title {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-right: 12px;\n}\n\n.mj-agent-editor-title i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n/* \u2500\u2500 Status Indicators \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-status {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-disabled);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-agent-editor-status--unsaved {\n  color: var(--mj-status-warning);\n}\n\n.mj-agent-editor-status--unsaved i { font-size: 6px; }\n\n/* \u2500\u2500 Inline Floating Controls (non-fullscreen) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-inline-controls {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-inline-expand {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: var(--mj-shadow-sm);\n  backdrop-filter: blur(4px);\n}\n\n.mj-agent-editor-inline-expand:hover {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-text-disabled);\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: scale(1.05);\n}\n\n.mj-agent-editor-inline-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-status-warning);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-bg-surface) 90%, transparent),\n              0 0 6px color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  animation: mj-inline-dot-pulse 2s ease-in-out infinite;\n}\n\n@keyframes mj-inline-dot-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n/* \u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  flex: 1;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-editor-loading i { font-size: var(--mj-text-base); }\n\n/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-body {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.mj-agent-editor-diagram {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-agent-editor-diagram mj-flow-editor {\n  flex: 1;\n  display: flex;\n}\n\n.mj-agent-editor-list {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n.mj-agent-editor-list mj-agent-step-list {\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* \u2500\u2500 Properties 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\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-properties {\n  width: 320px;\n  flex-shrink: 0;\n  overflow: hidden;\n  transform: translateX(320px);\n  margin-right: -320px;\n  transition: transform 0.2s ease, margin-right 0.2s ease;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.mj-agent-editor-properties--visible {\n  transform: translateX(0);\n  margin-right: 0;\n}\n\n.mj-agent-editor-properties mj-agent-properties-panel {\n  display: block;\n  width: 320px;\n  height: 100%;\n}\n\n/* \u2500\u2500 Mode Indicator Badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-mode-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-lg);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-editor-mode-badge i { font-size: 10px; }\n\n.mj-agent-editor-mode-badge--editing {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-mode-badge--readonly {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n/* \u2500\u2500 Edit Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--edit {\n  background: var(--mj-status-success-bg);\n  border-color: var(--mj-status-success-border);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-btn--edit:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success-text);\n}\n\n/* \u2500\u2500 Danger Outline Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--danger-outline {\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n  background: var(--mj-bg-surface);\n}\n\n.mj-agent-editor-btn--danger-outline:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Unsaved Changes Dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-dialog-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10001;\n  animation: mj-dialog-fade-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-agent-editor-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  padding: 28px 32px;\n  max-width: 400px;\n  width: 90%;\n  box-shadow: var(--mj-shadow-xl);\n  text-align: center;\n  animation: mj-dialog-scale-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-scale-in {\n  from { transform: scale(0.95); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.mj-agent-editor-dialog-icon {\n  font-size: 28px;\n  color: var(--mj-status-warning);\n  margin-bottom: 12px;\n}\n\n.mj-agent-editor-dialog-title {\n  font-size: var(--mj-text-base);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.mj-agent-editor-dialog-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  margin: 0 0 20px;\n  line-height: 1.5;\n}\n\n.mj-agent-editor-dialog-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-flow-agent-editor', encapsulation: ViewEncapsulation.None, providers: [AgentFlowTransformerService], template: "<div class=\"mj-agent-editor\">\n\n  <!-- \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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  <div class=\"mj-agent-editor-toolbar\" [class.mj-agent-editor-toolbar--editing]=\"isEditingActive\">\n    <div class=\"mj-agent-editor-toolbar-left\">\n      <!-- Undo / Redo (edit mode only) -->\n      @if (isEditingActive) {\n        <button class=\"mj-agent-editor-btn\"\n          [disabled]=\"!flowEditor?.CanUndo\" (click)=\"flowEditor?.Undo()\" title=\"Undo (Ctrl+Z)\">\n          <i class=\"fa-solid fa-rotate-left\"></i>\n        </button>\n      }\n      @if (isEditingActive) {\n        <button class=\"mj-agent-editor-btn\"\n          [disabled]=\"!flowEditor?.CanRedo\" (click)=\"flowEditor?.Redo()\" title=\"Redo (Ctrl+Y)\">\n          <i class=\"fa-solid fa-rotate-right\"></i>\n        </button>\n      }\n    </div>\n\n    <div class=\"mj-agent-editor-toolbar-center\">\n      <!-- Fullscreen title -->\n      @if (CanvasTitle) {\n        <span class=\"mj-agent-editor-title\">\n          <i class=\"fa-solid fa-diagram-project\"></i> {{ CanvasTitle }}\n        </span>\n      }\n\n      <!-- View Mode Toggle -->\n      <div class=\"mj-agent-editor-view-toggle\">\n        <button class=\"mj-agent-editor-view-btn\"\n          [class.mj-agent-editor-view-btn--active]=\"viewMode === 'diagram'\"\n          (click)=\"viewMode = 'diagram'\">\n          <i class=\"fa-solid fa-diagram-project\"></i> Diagram\n        </button>\n        <button class=\"mj-agent-editor-view-btn\"\n          [class.mj-agent-editor-view-btn--active]=\"viewMode === 'list'\"\n          (click)=\"viewMode = 'list'\">\n          <i class=\"fa-solid fa-list\"></i> List\n        </button>\n      </div>\n\n      <!-- Mode indicator badge -->\n      @if (isEditingActive) {\n        <span class=\"mj-agent-editor-mode-badge mj-agent-editor-mode-badge--editing\">\n          <i class=\"fa-solid fa-pen\"></i> Editing\n        </span>\n      }\n      @if (!isEditingActive) {\n        <span class=\"mj-agent-editor-mode-badge mj-agent-editor-mode-badge--readonly\">\n          <i class=\"fa-solid fa-lock\"></i> Read Only\n        </span>\n      }\n    </div>\n\n    <div class=\"mj-agent-editor-toolbar-right\">\n      <!-- Status indicators -->\n      @if (ShowSaveControls && hasUnsavedChanges) {\n        <span class=\"mj-agent-editor-status mj-agent-editor-status--unsaved\">\n          <i class=\"fa-solid fa-circle\"></i> Unsaved\n        </span>\n      }\n      @if (ShowSaveControls && lastSaved) {\n        <span class=\"mj-agent-editor-status\">\n          Saved {{ lastSaved | date:'shortTime' }}\n        </span>\n      }\n\n      <!-- Save + Cancel \u2014 only when this editor owns persistence. When a host form owns the\n           record's save, a Save button here is a SECOND save button for the same record. -->\n      @if (ShowSaveControls && isEditingActive) {\n        <button class=\"mj-agent-editor-btn mj-agent-editor-btn--primary\"\n          [disabled]=\"isSaving || !hasUnsavedChanges\" (click)=\"Save()\">\n          <i class=\"fa-solid\" [ngClass]=\"isSaving ? 'fa-spinner fa-spin' : 'fa-floppy-disk'\"></i>\n          {{ isSaving ? 'Saving...' : 'Save' }}\n        </button>\n      }\n      @if (ShowSaveControls && fullscreenEditMode && !EditMode) {\n        <button\n          class=\"mj-agent-editor-btn\"\n          (click)=\"cancelFullscreenEdit()\" title=\"Cancel editing\">\n          <i class=\"fa-solid fa-xmark\"></i> Cancel\n        </button>\n      }\n\n      @if (ShowSaveControls && isEditingActive) {\n        <div class=\"mj-agent-editor-btn-divider\"></div>\n      }\n\n      <!-- Fullscreen edit toggle (only when parent is NOT in edit mode) -->\n      @if (ShowSaveControls && !EditMode && !fullscreenEditMode && userCanUpdate) {\n        <button\n          class=\"mj-agent-editor-btn mj-agent-editor-btn--edit\"\n          (click)=\"toggleFullscreenEditMode()\" title=\"Edit flow\">\n          <i class=\"fa-solid fa-pen-to-square\"></i> Edit\n        </button>\n      }\n\n      <!-- Expand / Close fullscreen -->\n      @if (!FullScreen) {\n        <button class=\"mj-agent-editor-btn mj-agent-editor-btn--expand\"\n          (click)=\"toggleFullScreen()\" title=\"Expand to full screen\">\n          <i class=\"fa-solid fa-up-right-and-down-left-from-center\"></i> Expand\n        </button>\n      }\n      @if (FullScreen) {\n        <button class=\"mj-agent-editor-btn mj-agent-editor-btn--close\"\n          (click)=\"toggleFullScreen()\" title=\"Close full screen (Esc)\">\n          <i class=\"fa-solid fa-xmark\"></i> Close\n        </button>\n      }\n    </div>\n  </div>\n\n  <!-- \u2500\u2500 Loading 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 -->\n  @if (isLoading) {\n    <div class=\"mj-agent-editor-loading\">\n      <!-- MJ's shared indicator, not a hand-rolled fa-spinner: one loading affordance across the\n           product means a slow canvas looks like every other slow thing, not like a different bug. -->\n      <mj-loading text=\"Loading flow...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  <!-- \u2500\u2500 Main 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\u2500\u2500\u2500 -->\n  @if (!isLoading) {\n    <div class=\"mj-agent-editor-body\">\n      <!-- What the runtime's own compiler and validator would refuse, rechecked on every change. The\n           same problems are flagged on the steps and paths they are about. -->\n      @if (RunProblems.length > 0) {\n        <mj-alert class=\"mj-agent-editor-run-problems\" Variant=\"warning\" Size=\"sm\" [Title]=\"RunProblemsTitle\">\n          <ul class=\"mj-agent-editor-run-problems-list\">\n            @for (problem of RunProblems; track $index) {\n              <li>{{ problem.Message }}</li>\n            }\n          </ul>\n        </mj-alert>\n      }\n      <!-- Diagram View -->\n      @if (viewMode === 'diagram') {\n        <div class=\"mj-agent-editor-diagram\">\n          <mj-flow-editor #flowEditor\n            [Nodes]=\"nodes\"\n            [Connections]=\"connections\"\n            [NodeTypes]=\"nodeTypes\"\n            [ReadOnly]=\"!isEditingActive\"\n            [ShowMinimap]=\"prefShowMinimap\"\n            [ShowPalette]=\"isEditingActive\"\n            [ShowGrid]=\"prefShowGrid\"\n            [ShowLegend]=\"prefShowLegend\"\n            [ShowStatusBar]=\"true\"\n            [ShowToolbar]=\"true\"\n            [AutoLayoutDirection]=\"'vertical'\"\n            (NodeSelected)=\"onNodeSelected($event)\"\n            (NodeAdded)=\"onNodeAdded($event)\"\n            (NodeRemoved)=\"onNodeRemoved($event)\"\n            (ConnectionCreated)=\"onConnectionCreated($event)\"\n            (ConnectionRemoved)=\"onConnectionRemoved($event)\"\n            (ConnectionReassigned)=\"onConnectionReassigned($event)\"\n            (ConnectionSelected)=\"onConnectionSelected($event)\"\n            (NodesChanged)=\"onNodesChanged($event)\"\n            (ConnectionsChanged)=\"onConnectionsChanged($event)\"\n            (GridToggled)=\"onGridPrefChanged($event)\"\n            (MinimapToggled)=\"onMinimapPrefChanged($event)\"\n            (LegendToggled)=\"onLegendPrefChanged($event)\">\n          </mj-flow-editor>\n          <!-- Properties Panel -->\n          <div class=\"mj-agent-editor-properties\"\n            [class.mj-agent-editor-properties--visible]=\"showPropertiesPanel\">\n            <mj-agent-properties-panel\n              [Step]=\"selectedStep\"\n              [SelectedConnection]=\"selectedConnection\"\n              [PathEntity]=\"selectedPathEntity\"\n              [ReadOnly]=\"!isEditingActive\"\n              [Actions]=\"availableActions\"\n              [Prompts]=\"availablePrompts\"\n              [Agents]=\"availableAgents\"\n              [AllSteps]=\"steps\"\n              [AllPaths]=\"paths\"\n              [DecisionModelTypeID]=\"decisionModelTypeID\"\n              [RunProblems]=\"RunProblems\"\n              (StepChanged)=\"onStepChanged($event)\"\n              (PathChanged)=\"onPathChanged($event)\"\n              (DeleteStepRequested)=\"onDeleteStepRequested($event)\"\n              (DeletePathRequested)=\"onDeletePathRequested($event)\"\n              (CloseRequested)=\"onCloseProperties()\">\n            </mj-agent-properties-panel>\n          </div>\n        </div>\n      }\n      <!-- List View -->\n      @if (viewMode === 'list') {\n        <div class=\"mj-agent-editor-list\">\n          <mj-agent-step-list\n            [Steps]=\"steps\"\n            [Paths]=\"paths\"\n            [SelectedStepID]=\"selectedStep?.ID || null\"\n            (StepClicked)=\"onStepClickedInList($event)\">\n          </mj-agent-step-list>\n          <!-- Properties Panel in list mode too -->\n          <div class=\"mj-agent-editor-properties\"\n            [class.mj-agent-editor-properties--visible]=\"showPropertiesPanel\">\n            <mj-agent-properties-panel\n              [Step]=\"selectedStep\"\n              [SelectedConnection]=\"selectedConnection\"\n              [PathEntity]=\"selectedPathEntity\"\n              [ReadOnly]=\"!isEditingActive\"\n              [Actions]=\"availableActions\"\n              [Prompts]=\"availablePrompts\"\n              [Agents]=\"availableAgents\"\n              [AllSteps]=\"steps\"\n              [AllPaths]=\"paths\"\n              [DecisionModelTypeID]=\"decisionModelTypeID\"\n              [RunProblems]=\"RunProblems\"\n              (StepChanged)=\"onStepChanged($event)\"\n              (PathChanged)=\"onPathChanged($event)\"\n              (DeleteStepRequested)=\"onDeleteStepRequested($event)\"\n              (DeletePathRequested)=\"onDeletePathRequested($event)\"\n              (CloseRequested)=\"onCloseProperties()\">\n            </mj-agent-properties-panel>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- \u2500\u2500 Unsaved Changes Dialog \u2500\u2500\u2500\u2500\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  @if (showUnsavedDialog) {\n    <div class=\"mj-agent-editor-dialog-overlay\">\n      <div class=\"mj-agent-editor-dialog\">\n        <div class=\"mj-agent-editor-dialog-icon\">\n          <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        </div>\n        <h3 class=\"mj-agent-editor-dialog-title\">Unsaved Changes</h3>\n        <p class=\"mj-agent-editor-dialog-message\">\n          You have unsaved changes to this flow. What would you like to do?\n        </p>\n        <div class=\"mj-agent-editor-dialog-actions\">\n          <button class=\"mj-agent-editor-btn mj-agent-editor-btn--primary\" (click)=\"onUnsavedDialogSave()\">\n            <i class=\"fa-solid fa-floppy-disk\"></i> Save & Close\n          </button>\n          <button class=\"mj-agent-editor-btn mj-agent-editor-btn--danger-outline\" (click)=\"onUnsavedDialogDiscard()\">\n            Discard Changes\n          </button>\n          <button class=\"mj-agent-editor-btn\" (click)=\"onUnsavedDialogCancel()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/* ============================================================\n   Flow Agent Editor \u2014 MJ-specific flow editor wrapper\n   ============================================================ */\n\n/* \u2500\u2500 Host element fullscreen positioning \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen {\n  position: fixed;\n  top: 12px;\n  left: 12px;\n  right: 12px;\n  padding-right: 25px;\n  bottom: 12px;\n  z-index: 10000;\n  border-radius: var(--mj-radius-lg);\n  height: auto !important;\n  min-height: unset !important;\n  box-shadow: var(--mj-shadow-2xl);\n}\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen .mj-agent-editor {\n  height: 100%;\n  min-height: unset;\n  border-radius: var(--mj-radius-lg);\n}\n\n.mj-agent-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 500px;\n  background: var(--mj-bg-page);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  position: relative;\n}\n\n/* \u2500\u2500 Backdrop overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 9999;\n}\n\n/* \u2500\u2500 Toolbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  gap: 12px;\n  flex-shrink: 0;\n  transition: background 0.2s ease, border-color 0.2s ease;\n}\n\n.mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg) var(--mj-radius-lg) 0 0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar--editing {\n  background: var(--mj-status-success-bg);\n  border-bottom-color: var(--mj-status-success-border);\n}\n\n.mj-agent-editor-toolbar-left,\n.mj-agent-editor-toolbar-center,\n.mj-agent-editor-toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-toolbar-right {\n  gap: 10px;\n}\n\n.mj-agent-editor-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.mj-agent-editor-btn i { font-size: var(--mj-text-xs); }\n\n.mj-agent-editor-btn:hover:not(:disabled) { background: var(--mj-bg-surface-sunken); border-color: var(--mj-border-strong); }\n.mj-agent-editor-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n.mj-agent-editor-btn--primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-agent-editor-btn--primary:hover:not(:disabled) { background: var(--mj-brand-primary-hover); border-color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--expand {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-btn--expand:hover:not(:disabled) { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, var(--mj-bg-surface)); color: var(--mj-brand-primary-hover); }\n\n.mj-agent-editor-btn--close {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n}\n\n.mj-agent-editor-btn--close:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error-text);\n}\n\n.mj-agent-editor-btn-divider {\n  width: 1px;\n  height: 22px;\n  background: var(--mj-border-default);\n  margin: 0 2px;\n}\n\n/* \u2500\u2500 View Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n}\n\n.mj-agent-editor-view-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: none;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-agent-editor-view-btn i { font-size: 11px; }\n\n.mj-agent-editor-view-btn:not(:last-child) { border-right: 1px solid var(--mj-border-default); }\n\n.mj-agent-editor-view-btn--active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.mj-agent-editor-view-btn:hover:not(.mj-agent-editor-view-btn--active) { background: var(--mj-bg-page); }\n\n/* \u2500\u2500 Fullscreen Title \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-title {\n  font-size: var(--mj-text-sm);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-right: 12px;\n}\n\n.mj-agent-editor-title i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n/* \u2500\u2500 Status Indicators \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-status {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-disabled);\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-agent-editor-status--unsaved {\n  color: var(--mj-status-warning);\n}\n\n.mj-agent-editor-status--unsaved i { font-size: 6px; }\n\n/* \u2500\u2500 Inline Floating Controls (non-fullscreen) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-inline-controls {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.mj-agent-editor-inline-expand {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: 1px solid color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n  border-radius: var(--mj-radius-md);\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-xs);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: var(--mj-shadow-sm);\n  backdrop-filter: blur(4px);\n}\n\n.mj-agent-editor-inline-expand:hover {\n  background: var(--mj-bg-surface);\n  border-color: var(--mj-text-disabled);\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: scale(1.05);\n}\n\n.mj-agent-editor-inline-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-status-warning);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-bg-surface) 90%, transparent),\n              0 0 6px color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n  animation: mj-inline-dot-pulse 2s ease-in-out infinite;\n}\n\n@keyframes mj-inline-dot-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n/* \u2500\u2500 Loading \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  flex: 1;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.mj-agent-editor-loading i { font-size: var(--mj-text-base); }\n\n/* \u2500\u2500 Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-body {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Run-check banner: a bounded strip above the canvas, so a long list scrolls instead of pushing the flow away. */\n.mj-agent-editor-run-problems {\n  flex: 0 0 auto;\n  margin: 8px 8px 0;\n  max-height: 140px;\n  overflow-y: auto;\n}\n\n.mj-agent-editor-run-problems-list {\n  margin: 4px 0 0;\n  padding-inline-start: 1.25rem;\n}\n\n.mj-agent-editor-diagram {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  position: relative;\n}\n\n.mj-agent-editor-diagram mj-flow-editor {\n  flex: 1;\n  display: flex;\n}\n\n.mj-agent-editor-list {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n}\n\n.mj-agent-editor-list mj-agent-step-list {\n  flex: 1;\n  overflow-y: auto;\n}\n\n/* \u2500\u2500 Properties 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\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-agent-editor-properties {\n  width: 320px;\n  flex-shrink: 0;\n  overflow: hidden;\n  transform: translateX(320px);\n  margin-right: -320px;\n  transition: transform 0.2s ease, margin-right 0.2s ease;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.mj-agent-editor-properties--visible {\n  transform: translateX(0);\n  margin-right: 0;\n}\n\n.mj-agent-editor-properties mj-agent-properties-panel {\n  display: block;\n  width: 320px;\n  height: 100%;\n}\n\n/* \u2500\u2500 Mode Indicator Badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-mode-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-lg);\n  letter-spacing: 0.2px;\n}\n\n.mj-agent-editor-mode-badge i { font-size: 10px; }\n\n.mj-agent-editor-mode-badge--editing {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-mode-badge--readonly {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n/* \u2500\u2500 Edit Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--edit {\n  background: var(--mj-status-success-bg);\n  border-color: var(--mj-status-success-border);\n  color: var(--mj-status-success-text);\n}\n\n.mj-agent-editor-btn--edit:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--mj-status-success) 18%, var(--mj-bg-surface));\n  border-color: var(--mj-status-success);\n  color: var(--mj-status-success-text);\n}\n\n/* \u2500\u2500 Danger Outline Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-btn--danger-outline {\n  border-color: var(--mj-status-error-border);\n  color: var(--mj-status-error);\n  background: var(--mj-bg-surface);\n}\n\n.mj-agent-editor-btn--danger-outline:hover:not(:disabled) {\n  background: var(--mj-status-error-bg);\n  border-color: var(--mj-status-error);\n}\n\n/* \u2500\u2500 Unsaved Changes Dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-editor-dialog-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10001;\n  animation: mj-dialog-fade-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-agent-editor-dialog {\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-lg);\n  padding: 28px 32px;\n  max-width: 400px;\n  width: 90%;\n  box-shadow: var(--mj-shadow-xl);\n  text-align: center;\n  animation: mj-dialog-scale-in 0.15s ease-out;\n}\n\n@keyframes mj-dialog-scale-in {\n  from { transform: scale(0.95); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.mj-agent-editor-dialog-icon {\n  font-size: 28px;\n  color: var(--mj-status-warning);\n  margin-bottom: 12px;\n}\n\n.mj-agent-editor-dialog-title {\n  font-size: var(--mj-text-base);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 8px;\n}\n\n.mj-agent-editor-dialog-message {\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  margin: 0 0 20px;\n  line-height: 1.5;\n}\n\n.mj-agent-editor-dialog-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AgentFlowTransformerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], { HostFullScreen: [{
             type: HostBinding,
             args: ['class.mj-flow-agent-editor--fullscreen']
@@ -1068,5 +1200,5 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentEditorComponent, { className: "FlowAgentEditorComponent", filePath: "src/lib/agent-editor/flow-agent-editor.component.ts", lineNumber: 29 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentEditorComponent, { className: "FlowAgentEditorComponent", filePath: "src/lib/agent-editor/flow-agent-editor.component.ts", lineNumber: 54 }); })();
 //# sourceMappingURL=flow-agent-editor.component.js.map