@memberjunction/ng-flow-editor 6.1.0-edge.0 → 6.1.0-edge.2

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

@@ -6,10 +6,11 @@ import { AgentFlowTransformerService, AGENT_STEP_TYPE_CONFIGS } from './agent-fl
 import { UUIDsEqual } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "./agent-flow-transformer.service";
-import * as i2 from "@angular/common";
-import * as i3 from "../components/flow-editor.component";
-import * as i4 from "./agent-properties-panel.component";
-import * as i5 from "./agent-step-list.component";
+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";
 const _c0 = ["flowEditor"];
 function FlowAgentEditorComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -31,25 +32,35 @@ function FlowAgentEditorComponent_Conditional_4_Template(rf, ctx) { if (rf & 1)
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("disabled", !(ctx_r1.flowEditor == null ? null : ctx_r1.flowEditor.CanRedo));
 } }
-function FlowAgentEditorComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 7);
+    i0.ɵɵelement(1, "i", 10);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.CanvasTitle, " ");
+} }
+function FlowAgentEditorComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵelement(1, "i", 30);
     i0.ɵɵtext(2, " Editing ");
     i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 13);
     i0.ɵɵelement(1, "i", 31);
     i0.ɵɵtext(2, " Read Only ");
     i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 15);
     i0.ɵɵelement(1, "i", 32);
     i0.ɵɵtext(2, " Unsaved ");
     i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
@@ -59,10 +70,10 @@ function FlowAgentEditorComponent_Conditional_20_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Saved ", i0.ɵɵpipeBind2(2, 1, ctx_r1.lastSaved, "shortTime"), " ");
 } }
-function FlowAgentEditorComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 33);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Save()); });
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Save()); });
     i0.ɵɵelement(1, "i", 34);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -74,55 +85,53 @@ function FlowAgentEditorComponent_Conditional_21_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Saving..." : "Save", " ");
 } }
-function FlowAgentEditorComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelFullscreenEdit()); });
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelFullscreenEdit()); });
     i0.ɵɵelement(1, "i", 36);
     i0.ɵɵtext(2, " Cancel ");
     i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 19);
 } }
-function FlowAgentEditorComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 37);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFullscreenEditMode()); });
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFullscreenEditMode()); });
     i0.ɵɵelement(1, "i", 38);
     i0.ɵɵtext(2, " Edit ");
     i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 39);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_25_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFullScreen()); });
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFullScreen()); });
     i0.ɵɵelement(1, "i", 40);
     i0.ɵɵtext(2, " Expand ");
     i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 41);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_26_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFullScreen()); });
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFullScreen()); });
     i0.ɵɵelement(1, "i", 36);
     i0.ɵɵtext(2, " Close ");
     i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵelement(1, "i", 42);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "Loading flow...");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(1, "mj-loading", 42);
+    i0.ɵɵelementEnd();
 } }
-function FlowAgentEditorComponent_Conditional_28_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+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_28_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_28_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_28_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_28_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_28_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_28_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_28_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_28_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_28_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_28_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_28_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_28_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.ɵɵ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.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 46)(4, "mj-agent-properties-panel", 47);
-    i0.ɵɵlistener("StepChanged", function FlowAgentEditorComponent_Conditional_28_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_28_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_28_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_28_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_28_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.ɵɵ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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -133,13 +142,13 @@ function FlowAgentEditorComponent_Conditional_28_Conditional_1_Template(rf, ctx)
     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);
 } }
-function FlowAgentEditorComponent_Conditional_28_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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_28_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)); });
+    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)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "div", 46)(3, "mj-agent-properties-panel", 47);
-    i0.ɵɵlistener("StepChanged", function FlowAgentEditorComponent_Conditional_28_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_28_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_28_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_28_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_28_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.ɵɵ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.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -150,10 +159,10 @@ function FlowAgentEditorComponent_Conditional_28_Conditional_2_Template(rf, ctx)
     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);
 } }
-function FlowAgentEditorComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function FlowAgentEditorComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵconditionalCreate(1, FlowAgentEditorComponent_Conditional_28_Conditional_1_Template, 5, 21, "div", 43);
-    i0.ɵɵconditionalCreate(2, FlowAgentEditorComponent_Conditional_28_Conditional_2_Template, 4, 13, "div", 44);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -162,7 +171,7 @@ function FlowAgentEditorComponent_Conditional_28_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 2 : -1);
 } }
-function FlowAgentEditorComponent_Conditional_29_Template(rf, ctx) { if (rf & 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);
@@ -174,16 +183,16 @@ function FlowAgentEditorComponent_Conditional_29_Template(rf, ctx) { if (rf & 1)
     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_29_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogSave()); });
+    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.ɵɵtext(11, " Save & Close ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(12, "button", 57);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_29_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogDiscard()); });
+    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.ɵɵtext(13, " Discard Changes ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "button", 58);
-    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_29_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnsavedDialogCancel()); });
+    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.ɵɵtext(15, " Cancel ");
     i0.ɵɵelementEnd()()()();
 } }
@@ -202,6 +211,27 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
     AgentID = null;
     EditMode = true;
     FullScreen = false;
+    /**
+     * Whether this editor shows its own Save / Edit / Cancel controls.
+     *
+     * **Off by default, and that default is the safe one.** When a host form owns the record's save —
+     * which is the normal case, since the flow is one part of an agent — a Save button here is a
+     * second save button for the same record. The user then has two, they disagree about what "saved"
+     * means, and the unsaved indicator on one says nothing about the other.
+     *
+     * A host that turns this ON is declaring that this editor owns its own persistence (the standalone
+     * or fullscreen self-contained case). A host that leaves it off MUST call
+     * {@link FlowAgentEditorComponent.QueueSaveInto} from its own save, or flow edits will have no way
+     * to reach the database at all.
+     */
+    ShowSaveControls = false;
+    /**
+     * The title shown in the centre of the toolbar. `null` hides it.
+     *
+     * Hidden by hosts whose own page chrome already names the record — repeating it inside the canvas
+     * is a second, smaller title competing with the real one.
+     */
+    CanvasTitle = 'Flow Configuration';
     // ── Outputs ─────────────────────────────────────────────────
     FlowSaved = new EventEmitter();
     FlowChanged = new EventEmitter();
@@ -397,35 +427,27 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
         }
     }
     // ── Save ────────────────────────────────────────────────────
+    /**
+     * Saves the flow on its own — creates a transaction, queues everything into it, submits.
+     *
+     * Used when this editor owns the save (the standalone / fullscreen self-contained mode). A host
+     * that owns the record's save should call {@link QueueSaveInto} instead so the flow lands in the
+     * same transaction as the rest of the record.
+     */
     async Save() {
         if (this.isSaving || !this.AgentID)
             return;
         this.isSaving = true;
         this.cdr.detectChanges();
         try {
-            // Update positions from canvas to entities
-            this.syncPositionsFromCanvas();
-            // Bundle deletes and saves for steps + paths into one transaction so a partial save
-            // can never leave the flow in an inconsistent state.
             const p = this.ProviderToUse;
             const tg = await p.CreateTransactionGroup();
-            await this.queueRemovedEntitiesForDelete(tg);
-            for (const step of this.steps) {
-                step.TransactionGroup = tg;
-                await step.Save();
-            }
-            for (const path of this.paths) {
-                path.TransactionGroup = tg;
-                await path.Save();
-            }
+            await this.QueueSaveInto(tg);
             if (!await tg.Submit()) {
                 console.error('Failed to save flow — all changes have been rolled back');
                 return;
             }
-            this.deletedPathIDs = [];
-            this.deletedStepIDs = [];
-            this.hasUnsavedChanges = false;
-            this.lastSaved = new Date();
+            this.MarkSaved();
             // Exit self-contained fullscreen edit mode after successful save
             if (this.fullscreenEditMode) {
                 this.fullscreenEditMode = false;
@@ -440,6 +462,43 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             this.cdr.detectChanges();
         }
     }
+    /**
+     * Queues every step and path change onto a transaction the CALLER owns and will submit.
+     *
+     * Split out of {@link Save} so a host form can make the flow part of the record's own atomic save
+     * rather than a second, separate one. Two independent saves is how a record ends up looking saved
+     * while the user's step edits are gone — the form succeeds, the flow fails, and nothing says so.
+     *
+     * Deliberately does NOT submit and does NOT clear dirty state: the caller decides whether the
+     * transaction commits, and only the caller knows whether it did. Call {@link MarkSaved} after a
+     * successful submit.
+     */
+    async QueueSaveInto(tg) {
+        // 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();
+        await this.queueRemovedEntitiesForDelete(tg);
+        for (const step of this.steps) {
+            step.TransactionGroup = tg;
+            await step.Save();
+        }
+        for (const path of this.paths) {
+            path.TransactionGroup = tg;
+            await path.Save();
+        }
+    }
+    /** Clears dirty state after the owning transaction actually committed. */
+    MarkSaved() {
+        this.deletedPathIDs = [];
+        this.deletedStepIDs = [];
+        this.hasUnsavedChanges = false;
+        this.lastSaved = new Date();
+        this.cdr.detectChanges();
+    }
+    /** Whether the flow holds edits that have not been written yet. Read by a host that owns the save. */
+    get HasUnsavedChanges() {
+        return this.hasUnsavedChanges;
+    }
     syncPositionsFromCanvas() {
         this.syncPositionsToEntities();
     }
@@ -899,41 +958,39 @@ 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" }, outputs: { FlowSaved: "FlowSaved", FlowChanged: "FlowChanged", FullScreenToggled: "FullScreenToggled", StepSelected: "StepSelected" }, standalone: false, features: [i0.ɵɵProvidersFeature([AgentFlowTransformerService]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 30, vars: 21, 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, "fa-solid", "fa-diagram-project"], [1, "mj-agent-editor-view-toggle"], [1, "mj-agent-editor-view-btn", 3, "click"], [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"], [1, "fa-solid", "fa-spinner", "fa-spin"], [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"], [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) {
             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);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 6)(6, "span", 7);
-            i0.ɵɵelement(7, "i", 8);
-            i0.ɵɵtext(8, " Flow Configuration ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "div", 9)(10, "button", 10);
-            i0.ɵɵlistener("click", function FlowAgentEditorComponent_Template_button_click_10_listener() { return ctx.viewMode = "diagram"; });
-            i0.ɵɵelement(11, "i", 8);
-            i0.ɵɵtext(12, " Diagram ");
+            i0.ɵɵelementStart(5, "div", 6);
+            i0.ɵɵconditionalCreate(6, FlowAgentEditorComponent_Conditional_6_Template, 3, 1, "span", 7);
+            i0.ɵɵelementStart(7, "div", 8)(8, "button", 9);
+            i0.ɵɵlistener("click", function FlowAgentEditorComponent_Template_button_click_8_listener() { return ctx.viewMode = "diagram"; });
+            i0.ɵɵelement(9, "i", 10);
+            i0.ɵɵtext(10, " Diagram ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "button", 10);
-            i0.ɵɵlistener("click", function FlowAgentEditorComponent_Template_button_click_13_listener() { return ctx.viewMode = "list"; });
-            i0.ɵɵelement(14, "i", 11);
-            i0.ɵɵtext(15, " List ");
+            i0.ɵɵelementStart(11, "button", 9);
+            i0.ɵɵlistener("click", function FlowAgentEditorComponent_Template_button_click_11_listener() { return ctx.viewMode = "list"; });
+            i0.ɵɵelement(12, "i", 11);
+            i0.ɵɵtext(13, " List ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(16, FlowAgentEditorComponent_Conditional_16_Template, 3, 0, "span", 12);
-            i0.ɵɵconditionalCreate(17, FlowAgentEditorComponent_Conditional_17_Template, 3, 0, "span", 13);
+            i0.ɵɵconditionalCreate(14, FlowAgentEditorComponent_Conditional_14_Template, 3, 0, "span", 12);
+            i0.ɵɵconditionalCreate(15, FlowAgentEditorComponent_Conditional_15_Template, 3, 0, "span", 13);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 14);
-            i0.ɵɵconditionalCreate(19, FlowAgentEditorComponent_Conditional_19_Template, 3, 0, "span", 15);
-            i0.ɵɵconditionalCreate(20, FlowAgentEditorComponent_Conditional_20_Template, 3, 4, "span", 16);
-            i0.ɵɵconditionalCreate(21, FlowAgentEditorComponent_Conditional_21_Template, 3, 3, "button", 17);
-            i0.ɵɵconditionalCreate(22, FlowAgentEditorComponent_Conditional_22_Template, 3, 0, "button", 18);
-            i0.ɵɵconditionalCreate(23, FlowAgentEditorComponent_Conditional_23_Template, 1, 0, "div", 19);
-            i0.ɵɵconditionalCreate(24, FlowAgentEditorComponent_Conditional_24_Template, 3, 0, "button", 20);
-            i0.ɵɵconditionalCreate(25, FlowAgentEditorComponent_Conditional_25_Template, 3, 0, "button", 21);
-            i0.ɵɵconditionalCreate(26, FlowAgentEditorComponent_Conditional_26_Template, 3, 0, "button", 22);
+            i0.ɵɵelementStart(16, "div", 14);
+            i0.ɵɵconditionalCreate(17, FlowAgentEditorComponent_Conditional_17_Template, 3, 0, "span", 15);
+            i0.ɵɵconditionalCreate(18, FlowAgentEditorComponent_Conditional_18_Template, 3, 4, "span", 16);
+            i0.ɵɵconditionalCreate(19, FlowAgentEditorComponent_Conditional_19_Template, 3, 3, "button", 17);
+            i0.ɵɵconditionalCreate(20, FlowAgentEditorComponent_Conditional_20_Template, 3, 0, "button", 18);
+            i0.ɵɵconditionalCreate(21, FlowAgentEditorComponent_Conditional_21_Template, 1, 0, "div", 19);
+            i0.ɵɵconditionalCreate(22, FlowAgentEditorComponent_Conditional_22_Template, 3, 0, "button", 20);
+            i0.ɵɵconditionalCreate(23, FlowAgentEditorComponent_Conditional_23_Template, 3, 0, "button", 21);
+            i0.ɵɵconditionalCreate(24, FlowAgentEditorComponent_Conditional_24_Template, 3, 0, "button", 22);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(27, FlowAgentEditorComponent_Conditional_27_Template, 4, 0, "div", 23);
-            i0.ɵɵconditionalCreate(28, FlowAgentEditorComponent_Conditional_28_Template, 3, 2, "div", 24);
-            i0.ɵɵconditionalCreate(29, FlowAgentEditorComponent_Conditional_29_Template, 16, 0, "div", 25);
+            i0.ɵɵconditionalCreate(25, FlowAgentEditorComponent_Conditional_25_Template, 2, 0, "div", 23);
+            i0.ɵɵconditionalCreate(26, FlowAgentEditorComponent_Conditional_26_Template, 3, 2, "div", 24);
+            i0.ɵɵconditionalCreate(27, FlowAgentEditorComponent_Conditional_27_Template, 16, 0, "div", 25);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -942,41 +999,43 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.isEditingActive ? 3 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isEditingActive ? 4 : -1);
-            i0.ɵɵadvance(6);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.CanvasTitle ? 6 : -1);
+            i0.ɵɵadvance(2);
             i0.ɵɵclassProp("mj-agent-editor-view-btn--active", ctx.viewMode === "diagram");
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("mj-agent-editor-view-btn--active", ctx.viewMode === "list");
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isEditingActive ? 16 : -1);
+            i0.ɵɵconditional(ctx.isEditingActive ? 14 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isEditingActive ? 17 : -1);
+            i0.ɵɵconditional(!ctx.isEditingActive ? 15 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.hasUnsavedChanges ? 19 : -1);
+            i0.ɵɵconditional(ctx.ShowSaveControls && ctx.hasUnsavedChanges ? 17 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.lastSaved ? 20 : -1);
+            i0.ɵɵconditional(ctx.ShowSaveControls && ctx.lastSaved ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isEditingActive ? 21 : -1);
+            i0.ɵɵconditional(ctx.ShowSaveControls && ctx.isEditingActive ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.fullscreenEditMode && !ctx.EditMode ? 22 : -1);
+            i0.ɵɵconditional(ctx.ShowSaveControls && ctx.fullscreenEditMode && !ctx.EditMode ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isEditingActive ? 23 : -1);
+            i0.ɵɵconditional(ctx.ShowSaveControls && ctx.isEditingActive ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.EditMode && !ctx.fullscreenEditMode && ctx.userCanUpdate ? 24 : -1);
+            i0.ɵɵconditional(ctx.ShowSaveControls && !ctx.EditMode && !ctx.fullscreenEditMode && ctx.userCanUpdate ? 22 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.FullScreen ? 25 : -1);
+            i0.ɵɵconditional(!ctx.FullScreen ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.FullScreen ? 26 : -1);
+            i0.ɵɵconditional(ctx.FullScreen ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
+            i0.ɵɵconditional(ctx.isLoading ? 25 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 28 : -1);
+            i0.ɵɵconditional(!ctx.isLoading ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showUnsavedDialog ? 29 : -1);
-        } }, dependencies: [i2.NgClass, i3.FlowEditorComponent, i4.AgentPropertiesPanelComponent, i5.AgentStepListComponent, i2.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 });
+            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 });
 }
 (() => { (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      <span class=\"mj-agent-editor-title\">\n        <i class=\"fa-solid fa-diagram-project\"></i> Flow Configuration\n      </span>\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 (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 (lastSaved) {\n        <span class=\"mj-agent-editor-status\">\n          Saved {{ lastSaved | date:'shortTime' }}\n        </span>\n      }\n\n      <!-- Save + Cancel (when editing) -->\n      @if (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 (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 (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 (!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      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>Loading flow...</span>\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      <!-- 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"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AgentFlowTransformerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], { HostFullScreen: [{
             type: HostBinding,
             args: ['class.mj-flow-agent-editor--fullscreen']
@@ -986,6 +1045,10 @@ export class FlowAgentEditorComponent extends BaseAngularComponent {
             type: Input
         }], FullScreen: [{
             type: Input
+        }], ShowSaveControls: [{
+            type: Input
+        }], CanvasTitle: [{
+            type: Input
         }], FlowSaved: [{
             type: Output
         }], FlowChanged: [{