@memberjunction/ng-flow-editor 0.0.1 → 4.1.0

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

@@ -0,0 +1,999 @@
+import { Component, Input, Output, EventEmitter, ViewChild, ViewEncapsulation, HostListener, HostBinding } from '@angular/core';
+import { Metadata, RunView, CompositeKey } from '@memberjunction/core';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { AgentFlowTransformerService, AGENT_STEP_TYPE_CONFIGS } from './agent-flow-transformer.service';
+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";
+const _c0 = ["flowEditor"];
+function FlowAgentEditorComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.flowEditor == null ? null : ctx_r1.flowEditor.Undo()); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", !(ctx_r1.flowEditor == null ? null : ctx_r1.flowEditor.CanUndo));
+} }
+function FlowAgentEditorComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function FlowAgentEditorComponent_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.flowEditor == null ? null : ctx_r1.flowEditor.Redo()); });
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    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) {
+    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) {
+    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) {
+    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) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "date");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Saved ", i0.ɵɵpipeBind2(2, 1, ctx_r1.lastSaved, "shortTime"), " ");
+} }
+function FlowAgentEditorComponent_Conditional_21_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.ɵɵelement(1, "i", 34);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving || !ctx_r1.hasUnsavedChanges);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.isSaving ? "fa-spinner fa-spin" : "fa-floppy-disk");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Saving..." : "Save", " ");
+} }
+function FlowAgentEditorComponent_Conditional_22_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.ɵɵelement(1, "i", 36);
+    i0.ɵɵtext(2, " Cancel ");
+    i0.ɵɵelementEnd();
+} }
+function FlowAgentEditorComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 19);
+} }
+function FlowAgentEditorComponent_Conditional_24_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.ɵɵelement(1, "i", 38);
+    i0.ɵɵtext(2, " Edit ");
+    i0.ɵɵelementEnd();
+} }
+function FlowAgentEditorComponent_Conditional_25_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.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2, " Expand ");
+    i0.ɵɵelementEnd();
+} }
+function FlowAgentEditorComponent_Conditional_26_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.ɵɵelement(1, "i", 36);
+    i0.ɵɵtext(2, " Close ");
+    i0.ɵɵelementEnd();
+} }
+function FlowAgentEditorComponent_Conditional_27_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()();
+} }
+function FlowAgentEditorComponent_Conditional_28_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.ɵɵ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.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Nodes", ctx_r1.nodes)("Connections", ctx_r1.connections)("NodeTypes", ctx_r1.nodeTypes)("ReadOnly", !ctx_r1.isEditingActive)("ShowMinimap", ctx_r1.prefShowMinimap)("ShowPalette", ctx_r1.isEditingActive)("ShowGrid", ctx_r1.prefShowGrid)("ShowLegend", ctx_r1.prefShowLegend)("ShowStatusBar", true)("ShowToolbar", true)("AutoLayoutDirection", "vertical");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("mj-agent-editor-properties--visible", ctx_r1.showPropertiesPanel);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Step", ctx_r1.selectedStep)("SelectedConnection", ctx_r1.selectedConnection)("PathEntity", ctx_r1.selectedPathEntity)("ReadOnly", !ctx_r1.isEditingActive)("Actions", ctx_r1.availableActions)("Prompts", ctx_r1.availablePrompts)("Agents", ctx_r1.availableAgents)("AllSteps", ctx_r1.steps);
+} }
+function FlowAgentEditorComponent_Conditional_28_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.ɵɵ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.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Steps", ctx_r1.steps)("Paths", ctx_r1.paths)("SelectedStepID", (ctx_r1.selectedStep == null ? null : ctx_r1.selectedStep.ID) || null);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-agent-editor-properties--visible", ctx_r1.showPropertiesPanel);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Step", ctx_r1.selectedStep)("SelectedConnection", ctx_r1.selectedConnection)("PathEntity", ctx_r1.selectedPathEntity)("ReadOnly", !ctx_r1.isEditingActive)("Actions", ctx_r1.availableActions)("Prompts", ctx_r1.availablePrompts)("Agents", ctx_r1.availableAgents)("AllSteps", ctx_r1.steps);
+} }
+function FlowAgentEditorComponent_Conditional_28_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.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.viewMode === "diagram" ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.viewMode === "list" ? 2 : -1);
+} }
+function FlowAgentEditorComponent_Conditional_29_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);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "h3", 52);
+    i0.ɵɵtext(5, "Unsaved Changes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "p", 53);
+    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.ɵɵ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.ɵɵ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.ɵɵtext(15, " Cancel ");
+    i0.ɵɵelementEnd()()()();
+} }
+/**
+ * Flow Agent Editor — wraps the generic FlowEditorComponent with
+ * MJ agent-specific CRUD, properties panel, and data transformation.
+ */
+export class FlowAgentEditorComponent {
+    cdr;
+    transformer;
+    elRef;
+    renderer;
+    // ── Host Bindings ─────────────────────────────────────────────
+    get HostFullScreen() { return this.FullScreen; }
+    // ── Inputs ──────────────────────────────────────────────────
+    AgentID = null;
+    EditMode = true;
+    FullScreen = false;
+    // ── Outputs ─────────────────────────────────────────────────
+    FlowSaved = new EventEmitter();
+    FlowChanged = new EventEmitter();
+    FullScreenToggled = new EventEmitter();
+    StepSelected = new EventEmitter();
+    // ── View Children ───────────────────────────────────────────
+    flowEditor;
+    // ── State ───────────────────────────────────────────────────
+    nodes = [];
+    connections = [];
+    nodeTypes = AGENT_STEP_TYPE_CONFIGS;
+    viewMode = 'diagram';
+    isLoading = true;
+    isSaving = false;
+    hasUnsavedChanges = false;
+    lastSaved = null;
+    // Fullscreen self-contained edit mode
+    fullscreenEditMode = false;
+    showUnsavedDialog = false;
+    // Entity data
+    steps = [];
+    paths = [];
+    deletedStepIDs = [];
+    deletedPathIDs = [];
+    // Selected items
+    selectedStep = null;
+    selectedConnection = null;
+    selectedPathEntity = null;
+    showPropertiesPanel = false;
+    // Picker data (includes icon fields for node rendering)
+    availableActions = [];
+    availablePrompts = [];
+    availableAgents = [];
+    // Permission state — cached once on init
+    userCanUpdate = false;
+    // User view preferences (persisted via UserInfoEngine)
+    prefShowGrid = true;
+    prefShowMinimap = true;
+    prefShowLegend = true;
+    static PREF_KEY = 'flow-editor/view-prefs';
+    // Initial zoom state
+    needsInitialZoom = false;
+    resizeObserver = null;
+    // Fullscreen DOM relocation state
+    originalParent = null;
+    originalNextSibling = null;
+    backdropElement = null;
+    constructor(cdr, transformer, elRef, renderer) {
+        this.cdr = cdr;
+        this.transformer = transformer;
+        this.elRef = elRef;
+        this.renderer = renderer;
+    }
+    // ── Lifecycle ───────────────────────────────────────────────
+    ngOnInit() {
+        this.loadViewPreferences();
+        this.checkUpdatePermission();
+        if (this.AgentID) {
+            this.loadAll();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['AgentID'] && !changes['AgentID'].firstChange && this.AgentID) {
+            this.loadAll();
+        }
+    }
+    ngOnDestroy() {
+        this.teardownResizeObserver();
+        // Restore element to original parent if still in fullscreen
+        if (this.FullScreen) {
+            this.restoreFromFullscreen();
+        }
+    }
+    // ── Data Loading ────────────────────────────────────────────
+    async loadAll() {
+        this.isLoading = true;
+        this.cdr.detectChanges();
+        try {
+            await Promise.all([
+                this.loadStepsAndPaths(),
+                this.loadPickerData()
+            ]);
+            this.rebuildFlowModel();
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.detectChanges();
+            // Flag that we need an initial zoom; it will fire when the host element
+            // first becomes visible (e.g. Kendo PanelBar expands)
+            this.setupInitialZoomObserver();
+        }
+    }
+    async loadStepsAndPaths() {
+        if (!this.AgentID)
+            return;
+        const rv = new RunView();
+        const [stepsResult, pathsResult] = await rv.RunViews([
+            {
+                EntityName: 'MJ: AI Agent Steps',
+                ExtraFilter: `AgentID='${this.AgentID}'`,
+                OrderBy: 'Name ASC',
+                ResultType: 'entity_object'
+            },
+            {
+                EntityName: 'MJ: AI Agent Step Paths',
+                ExtraFilter: `OriginStepID IN (SELECT ID FROM [__mj].[AIAgentStep] WHERE AgentID='${this.AgentID}')`,
+                OrderBy: 'Priority DESC',
+                ResultType: 'entity_object'
+            }
+        ]);
+        this.steps = stepsResult.Success ? stepsResult.Results : [];
+        this.paths = pathsResult.Success ? pathsResult.Results : [];
+        this.deletedStepIDs = [];
+        this.deletedPathIDs = [];
+    }
+    async loadPickerData() {
+        const rv = new RunView();
+        const [actionsResult, promptsResult, agentsResult] = await rv.RunViews([
+            {
+                EntityName: 'Actions',
+                Fields: ['ID', 'Name', 'IconClass'],
+                ExtraFilter: `Status='Active'`,
+                OrderBy: 'Name ASC',
+                ResultType: 'simple'
+            },
+            {
+                EntityName: 'AI Prompts',
+                Fields: ['ID', 'Name'],
+                ExtraFilter: '',
+                OrderBy: 'Name ASC',
+                ResultType: 'simple'
+            },
+            {
+                EntityName: 'AI Agents',
+                Fields: ['ID', 'Name', 'IconClass', 'LogoURL'],
+                ExtraFilter: this.AgentID ? `ID <> '${this.AgentID}'` : '',
+                OrderBy: 'Name ASC',
+                ResultType: 'simple'
+            }
+        ]);
+        this.availableActions = actionsResult.Success
+            ? actionsResult.Results
+            : [];
+        this.availablePrompts = promptsResult.Success
+            ? promptsResult.Results
+            : [];
+        this.availableAgents = agentsResult.Success
+            ? agentsResult.Results
+            : [];
+    }
+    rebuildFlowModel() {
+        this.nodes = this.transformer.StepsToNodes(this.steps, this.availableActions, this.availableAgents);
+        this.connections = this.transformer.PathsToConnections(this.paths);
+    }
+    /**
+     * Observe the host element's size. When it transitions from zero to non-zero height
+     * (i.e. the collapsed Kendo panel expands), trigger the initial auto-arrange or zoom-to-fit.
+     */
+    setupInitialZoomObserver() {
+        if (this.nodes.length === 0)
+            return;
+        this.needsInitialZoom = true;
+        this.teardownResizeObserver();
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const height = entry.contentRect.height;
+                if (height > 0 && this.needsInitialZoom) {
+                    this.needsInitialZoom = false;
+                    this.teardownResizeObserver();
+                    // Short delay for Foblex canvas to finish its own init after becoming visible
+                    setTimeout(() => this.applyInitialZoom(), 100);
+                }
+            }
+        });
+        this.resizeObserver.observe(this.elRef.nativeElement);
+    }
+    applyInitialZoom() {
+        if (!this.flowEditor || this.nodes.length === 0)
+            return;
+        const allAtOrigin = this.nodes.every(n => n.Position.X === 0 && n.Position.Y === 0);
+        if (allAtOrigin) {
+            this.flowEditor.AutoArrange();
+        }
+        else {
+            this.flowEditor.ZoomToFit();
+        }
+    }
+    teardownResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    // ── Save ────────────────────────────────────────────────────
+    async Save() {
+        if (this.isSaving || !this.AgentID)
+            return;
+        this.isSaving = true;
+        this.cdr.detectChanges();
+        try {
+            // Update positions from canvas to entities
+            this.syncPositionsFromCanvas();
+            // Delete removed items first
+            await this.deleteRemovedEntities();
+            // Save all steps
+            for (const step of this.steps) {
+                const result = await step.Save();
+                if (!result) {
+                    console.error(`Failed to save step: ${step.Name}`, step.LatestResult);
+                }
+            }
+            // Save all paths
+            for (const path of this.paths) {
+                const result = await path.Save();
+                if (!result) {
+                    console.error(`Failed to save path: ${path.ID}`, path.LatestResult);
+                }
+            }
+            this.hasUnsavedChanges = false;
+            this.lastSaved = new Date();
+            // Exit self-contained fullscreen edit mode after successful save
+            if (this.fullscreenEditMode) {
+                this.fullscreenEditMode = false;
+            }
+            this.FlowSaved.emit();
+        }
+        catch (err) {
+            console.error('Error saving flow:', err);
+        }
+        finally {
+            this.isSaving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    syncPositionsFromCanvas() {
+        this.syncPositionsToEntities();
+    }
+    /** Write current FlowNode positions back to the underlying step entities.
+     *  Called on every node move so that rebuildFlowModel() never loses drag changes. */
+    syncPositionsToEntities() {
+        for (const node of this.nodes) {
+            const step = this.steps.find(s => s.ID === node.ID);
+            if (step) {
+                this.transformer.ApplyNodePosition(step, node);
+            }
+        }
+    }
+    async deleteRemovedEntities() {
+        const md = new Metadata();
+        for (const pathId of this.deletedPathIDs) {
+            const pathEntity = await md.GetEntityObject('MJ: AI Agent Step Paths');
+            await pathEntity.InnerLoad(CompositeKey.FromID(pathId));
+            await pathEntity.Delete();
+        }
+        for (const stepId of this.deletedStepIDs) {
+            const stepEntity = await md.GetEntityObject('MJ: AI Agent Steps');
+            await stepEntity.InnerLoad(CompositeKey.FromID(stepId));
+            await stepEntity.Delete();
+        }
+        this.deletedPathIDs = [];
+        this.deletedStepIDs = [];
+    }
+    // ── Flow Editor Event Handlers ──────────────────────────────
+    async onNodeAdded(event) {
+        if (!this.AgentID)
+            return;
+        const md = new Metadata();
+        const step = await md.GetEntityObject('MJ: AI Agent Steps');
+        step.NewRecord(); // This generates a UUID immediately - available before Save()
+        step.AgentID = this.AgentID;
+        step.Name = event.Node.Label;
+        step.StepType = event.Node.Type;
+        step.Status = 'Active';
+        step.StartingStep = this.steps.length === 0; // First step is starting step
+        step.PositionX = Math.round(event.DropPosition.X);
+        step.PositionY = Math.round(event.DropPosition.Y);
+        step.OnErrorBehavior = 'fail';
+        step.RetryCount = 0;
+        step.TimeoutSeconds = 600;
+        // Add the unsaved step to the array - it already has a UUID from NewRecord()
+        // This allows connections to be drawn immediately without waiting for a database save
+        this.steps.push(step);
+        // Build a FlowNode using the entity's pre-generated ID so Foblex can track it
+        const newNode = this.transformer.StepToNode(step, this.availableActions, this.availableAgents);
+        this.nodes.push(newNode);
+        this.markDirty();
+        // Select the new node
+        setTimeout(() => {
+            this.flowEditor?.SelectNode(step.ID);
+            this.onNodeSelected(newNode);
+        }, 100);
+        this.cdr.detectChanges();
+    }
+    async onConnectionCreated(event) {
+        if (!this.AgentID)
+            return;
+        // Prevent duplicate
+        const exists = this.paths.some(p => p.OriginStepID === event.SourceNodeID && p.DestinationStepID === event.TargetNodeID);
+        if (exists)
+            return;
+        const md = new Metadata();
+        const path = await md.GetEntityObject('MJ: AI Agent Step Paths');
+        path.NewRecord(); // Generates UUID immediately - available before Save()
+        path.OriginStepID = event.SourceNodeID;
+        path.DestinationStepID = event.TargetNodeID;
+        path.Priority = 0;
+        // Add unsaved path to the array - save will happen on main Save() button
+        this.paths.push(path);
+        this.rebuildFlowModel();
+        this.markDirty();
+        this.cdr.detectChanges();
+    }
+    onNodeSelected(node) {
+        if (node) {
+            this.selectedStep = this.steps.find(s => s.ID === node.ID) ?? null;
+            this.selectedConnection = null;
+            this.selectedPathEntity = null;
+            this.showPropertiesPanel = true;
+            this.StepSelected.emit(this.selectedStep);
+        }
+        else {
+            this.selectedStep = null;
+            // Only hide the panel if no connection is currently selected.
+            // When the user clicks a connection, Foblex fires NodeSelected(null) AND
+            // ConnectionSelected(conn) — we must not let the null-node event hide
+            // the panel that the connection event just opened.
+            if (!this.selectedConnection) {
+                this.showPropertiesPanel = false;
+            }
+            this.StepSelected.emit(null);
+        }
+        this.cdr.detectChanges();
+    }
+    onConnectionSelected(conn) {
+        if (conn) {
+            this.selectedConnection = conn;
+            this.selectedPathEntity = this.paths.find(p => p.ID === conn.ID) ?? null;
+            this.selectedStep = null;
+            this.showPropertiesPanel = true;
+        }
+        else {
+            this.selectedConnection = null;
+            this.selectedPathEntity = null;
+        }
+        this.cdr.detectChanges();
+    }
+    onNodeRemoved(node) {
+        const step = this.steps.find(s => s.ID === node.ID);
+        if (step) {
+            // Track for deletion on save (only if it was previously saved)
+            if (step.IsSaved) {
+                this.deletedStepIDs.push(step.ID);
+                // Also mark paths connected to this step for deletion
+                const connectedPaths = this.paths.filter(p => p.OriginStepID === step.ID || p.DestinationStepID === step.ID);
+                for (const path of connectedPaths) {
+                    if (path.IsSaved) {
+                        this.deletedPathIDs.push(path.ID);
+                    }
+                }
+            }
+            this.steps = this.steps.filter(s => s.ID !== node.ID);
+            this.paths = this.paths.filter(p => p.OriginStepID !== node.ID && p.DestinationStepID !== node.ID);
+            this.markDirty();
+        }
+    }
+    onConnectionRemoved(conn) {
+        const path = this.paths.find(p => p.ID === conn.ID);
+        if (path) {
+            if (path.IsSaved) {
+                this.deletedPathIDs.push(path.ID);
+            }
+            this.paths = this.paths.filter(p => p.ID !== conn.ID);
+            this.markDirty();
+        }
+    }
+    onConnectionReassigned(event) {
+        const path = this.paths.find(p => p.ID === event.ConnectionID);
+        if (!path)
+            return;
+        // Update the entity's origin/destination to match the new visual endpoints
+        path.OriginStepID = event.NewSourceNodeID;
+        path.DestinationStepID = event.NewTargetNodeID;
+        // Rebuild all connections so sibling-based visual logic recalculates
+        // (e.g., Default vs Duplicate Default labels depend on sibling analysis)
+        this.rebuildFlowModel();
+        this.markDirty();
+        this.cdr.detectChanges();
+    }
+    onNodesChanged(nodes) {
+        this.nodes = nodes;
+        // Sync canvas positions back to entities immediately so that
+        // any subsequent rebuildFlowModel() preserves drag changes.
+        this.syncPositionsToEntities();
+        this.markDirty();
+    }
+    onConnectionsChanged(connections) {
+        this.connections = connections;
+        this.markDirty();
+    }
+    // ── Properties Panel Events ─────────────────────────────────
+    onStepChanged(step) {
+        // Update the corresponding flow node in-place and push to generic editor
+        const node = this.nodes.find(n => n.ID === step.ID);
+        if (node) {
+            const newLabel = step.Name;
+            const newSubtitle = this.transformer.BuildStepSubtitle(step);
+            const baseStatus = this.transformer.MapStepStatus(step.Status);
+            const warningMessage = (baseStatus !== 'disabled') ? this.transformer.BuildConfigWarningMessage(step) : null;
+            const newStatus = warningMessage ? 'warning' : baseStatus;
+            const newIsStart = step.StartingStep === true;
+            node.Label = newLabel;
+            node.Subtitle = newSubtitle;
+            node.Status = newStatus;
+            node.StatusMessage = warningMessage ?? undefined;
+            node.IsStartNode = newIsStart;
+            // Update input port disabled state for starting steps
+            const inputPort = node.Ports.find(p => p.Direction === 'input');
+            if (inputPort) {
+                inputPort.Disabled = newIsStart;
+            }
+            // Re-resolve icon from picker data (handles action/agent assignment changes)
+            const resolved = this.transformer.ResolveStepIcon(step, this.availableActions, this.availableAgents);
+            node.Icon = resolved.Icon;
+            if (!node.Data)
+                node.Data = {};
+            node.Data['LogoURL'] = resolved.LogoURL ?? null;
+            // For loop nodes, rebuild the loop-specific Data properties so the
+            // inner body card updates immediately when the user changes body type / config
+            if (step.StepType === 'ForEach' || step.StepType === 'While') {
+                this.updateLoopNodeData(step, node);
+            }
+            // Push visual update to the generic flow editor (creates new object ref for OnPush)
+            this.flowEditor?.UpdateNode(step.ID, {
+                Label: newLabel,
+                Subtitle: newSubtitle,
+                Status: newStatus,
+                StatusMessage: warningMessage ?? undefined,
+                IsStartNode: newIsStart,
+                Icon: resolved.Icon,
+                Data: node.Data
+            });
+        }
+        this.markDirty();
+        this.cdr.detectChanges();
+    }
+    /** Update loop-specific data fields on a FlowNode from the step entity */
+    updateLoopNodeData(step, node) {
+        if (!node.Data)
+            node.Data = {};
+        // Delegate to the transformer's public methods for consistency
+        const bodyType = step.LoopBodyType;
+        node.Data['LoopBodyType'] = bodyType ?? null;
+        node.Data['LoopBodyName'] = this.resolveLoopBodyNameFromStep(step);
+        node.Data['LoopBodyIcon'] = this.getBodyTypeIcon(bodyType);
+        node.Data['LoopBodyColor'] = this.getBodyTypeColor(bodyType);
+        node.Data['LoopIterationSummary'] = this.transformer.BuildLoopIterationSummary(step);
+    }
+    resolveLoopBodyNameFromStep(step) {
+        switch (step.LoopBodyType) {
+            case 'Action': return step.Action ?? null;
+            case 'Prompt': return step.Prompt ?? null;
+            case 'Sub-Agent': return step.SubAgent ?? null;
+            default: return null;
+        }
+    }
+    getBodyTypeIcon(bodyType) {
+        switch (bodyType) {
+            case 'Action': return 'fa-bolt';
+            case 'Prompt': return 'fa-comment-dots';
+            case 'Sub-Agent': return 'fa-robot';
+            default: return 'fa-circle-nodes';
+        }
+    }
+    getBodyTypeColor(bodyType) {
+        switch (bodyType) {
+            case 'Action': return '#3B82F6';
+            case 'Prompt': return '#8B5CF6';
+            case 'Sub-Agent': return '#10B981';
+            default: return '#6B7280';
+        }
+    }
+    onPathChanged(path) {
+        // Rebuild all connections from the same origin since always/conditional logic
+        // depends on sibling paths (e.g., "Default" label only appears when siblings exist)
+        this.rebuildFlowModel();
+        this.markDirty();
+        this.cdr.detectChanges();
+    }
+    onDeleteStepRequested(step) {
+        const node = this.nodes.find(n => n.ID === step.ID);
+        if (node) {
+            this.flowEditor?.SelectNode(step.ID);
+            this.flowEditor?.DeleteSelected();
+        }
+        this.showPropertiesPanel = false;
+        this.selectedStep = null;
+        this.cdr.detectChanges();
+    }
+    onDeletePathRequested(path) {
+        const conn = this.connections.find(c => c.ID === path.ID);
+        if (conn) {
+            if (path.IsSaved) {
+                this.deletedPathIDs.push(path.ID);
+            }
+            this.paths = this.paths.filter(p => p.ID !== path.ID);
+            this.rebuildFlowModel();
+            this.markDirty();
+        }
+        this.showPropertiesPanel = false;
+        this.selectedConnection = null;
+        this.selectedPathEntity = null;
+        this.cdr.detectChanges();
+    }
+    onCloseProperties() {
+        this.showPropertiesPanel = false;
+        this.flowEditor?.ClearSelection();
+    }
+    // ── View & UI Controls ──────────────────────────────────────
+    toggleViewMode() {
+        this.viewMode = this.viewMode === 'diagram' ? 'list' : 'diagram';
+        this.cdr.detectChanges();
+    }
+    /** Whether editing is currently allowed — combines parent EditMode + fullscreen self-contained edit */
+    get isEditingActive() {
+        return this.EditMode || this.fullscreenEditMode;
+    }
+    toggleFullscreenEditMode() {
+        this.fullscreenEditMode = !this.fullscreenEditMode;
+        this.cdr.detectChanges();
+    }
+    cancelFullscreenEdit() {
+        if (this.hasUnsavedChanges) {
+            // Reload to discard changes
+            this.fullscreenEditMode = false;
+            this.hasUnsavedChanges = false;
+            this.loadAll();
+        }
+        else {
+            this.fullscreenEditMode = false;
+            this.cdr.detectChanges();
+        }
+    }
+    toggleFullScreen() {
+        if (this.FullScreen && this.hasUnsavedChanges) {
+            this.showUnsavedDialog = true;
+            this.cdr.detectChanges();
+            return;
+        }
+        this.performFullscreenToggle();
+    }
+    onUnsavedDialogSave() {
+        this.showUnsavedDialog = false;
+        this.Save().then(() => this.performFullscreenToggle());
+    }
+    onUnsavedDialogDiscard() {
+        this.showUnsavedDialog = false;
+        this.hasUnsavedChanges = false;
+        this.fullscreenEditMode = false;
+        this.performFullscreenToggle();
+        // Reload original data
+        this.loadAll();
+    }
+    onUnsavedDialogCancel() {
+        this.showUnsavedDialog = false;
+        this.cdr.detectChanges();
+    }
+    performFullscreenToggle() {
+        this.FullScreen = !this.FullScreen;
+        if (this.FullScreen) {
+            this.moveToBodyForFullscreen();
+        }
+        else {
+            this.fullscreenEditMode = false;
+            this.restoreFromFullscreen();
+        }
+        this.FullScreenToggled.emit(this.FullScreen);
+        this.cdr.detectChanges();
+        // Re-fit after layout change
+        setTimeout(() => this.flowEditor?.ZoomToFit(), 200);
+    }
+    moveToBodyForFullscreen() {
+        const hostEl = this.elRef.nativeElement;
+        this.originalParent = hostEl.parentElement;
+        this.originalNextSibling = hostEl.nextSibling;
+        // Create backdrop as a separate body-level element so it covers everything
+        this.backdropElement = this.renderer.createElement('div');
+        this.renderer.addClass(this.backdropElement, 'mj-agent-editor-backdrop');
+        this.renderer.listen(this.backdropElement, 'click', () => this.toggleFullScreen());
+        this.renderer.appendChild(document.body, this.backdropElement);
+        // Move the host element to body — @HostBinding applies the fixed-position class
+        this.renderer.appendChild(document.body, hostEl);
+    }
+    restoreFromFullscreen() {
+        // Remove backdrop
+        if (this.backdropElement) {
+            this.renderer.removeChild(document.body, this.backdropElement);
+            this.backdropElement = null;
+        }
+        // Restore host element to original position
+        if (!this.originalParent)
+            return;
+        const hostEl = this.elRef.nativeElement;
+        if (this.originalNextSibling) {
+            this.renderer.insertBefore(this.originalParent, hostEl, this.originalNextSibling);
+        }
+        else {
+            this.renderer.appendChild(this.originalParent, hostEl);
+        }
+        this.originalParent = null;
+        this.originalNextSibling = null;
+    }
+    onStepClickedInList(step) {
+        this.selectedStep = step;
+        this.selectedConnection = null;
+        this.selectedPathEntity = null;
+        this.showPropertiesPanel = true;
+        this.StepSelected.emit(step);
+        this.cdr.detectChanges();
+    }
+    // ── Keyboard Shortcuts ─────────────────────────────────────
+    onEscapeKey() {
+        if (this.showUnsavedDialog) {
+            this.onUnsavedDialogCancel();
+        }
+        else if (this.FullScreen) {
+            this.toggleFullScreen();
+        }
+    }
+    // ── Permission Check ────────────────────────────────────────
+    checkUpdatePermission() {
+        const md = new Metadata();
+        const entity = md.EntityByName('AI Agents');
+        if (entity) {
+            const perms = entity.GetUserPermisions(md.CurrentUser);
+            this.userCanUpdate = perms?.CanUpdate === true;
+        }
+    }
+    // ── View Preference Persistence ─────────────────────────────
+    loadViewPreferences() {
+        const raw = UserInfoEngine.Instance.GetSetting(FlowAgentEditorComponent.PREF_KEY);
+        if (raw) {
+            try {
+                const prefs = JSON.parse(raw);
+                if (prefs.grid != null)
+                    this.prefShowGrid = prefs.grid;
+                if (prefs.minimap != null)
+                    this.prefShowMinimap = prefs.minimap;
+                if (prefs.legend != null)
+                    this.prefShowLegend = prefs.legend;
+            }
+            catch {
+                // Ignore malformed preference data
+            }
+        }
+    }
+    saveViewPreferences() {
+        const prefs = JSON.stringify({
+            grid: this.prefShowGrid,
+            minimap: this.prefShowMinimap,
+            legend: this.prefShowLegend
+        });
+        // Fire-and-forget — preference save errors are non-critical
+        UserInfoEngine.Instance.SetSetting(FlowAgentEditorComponent.PREF_KEY, prefs);
+    }
+    onGridPrefChanged(show) {
+        this.prefShowGrid = show;
+        this.saveViewPreferences();
+    }
+    onMinimapPrefChanged(show) {
+        this.prefShowMinimap = show;
+        this.saveViewPreferences();
+    }
+    onLegendPrefChanged(show) {
+        this.prefShowLegend = show;
+        this.saveViewPreferences();
+    }
+    // ── Helpers ─────────────────────────────────────────────────
+    markDirty() {
+        if (!this.hasUnsavedChanges) {
+            this.hasUnsavedChanges = true;
+            this.FlowChanged.emit(true);
+        }
+    }
+    static ɵfac = function FlowAgentEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowAgentEditorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.AgentFlowTransformerService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowAgentEditorComponent, selectors: [["mj-flow-agent-editor"]], viewQuery: function FlowAgentEditorComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flowEditor = _t.first);
+        } }, hostVars: 2, hostBindings: function FlowAgentEditorComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            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.ɵɵ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) {
+            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.ɵɵ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.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(16, FlowAgentEditorComponent_Conditional_16_Template, 3, 0, "span", 12);
+            i0.ɵɵconditionalCreate(17, FlowAgentEditorComponent_Conditional_17_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.ɵɵ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.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("mj-agent-editor-toolbar--editing", ctx.isEditingActive);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isEditingActive ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isEditingActive ? 4 : -1);
+            i0.ɵɵadvance(6);
+            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.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isEditingActive ? 17 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.hasUnsavedChanges ? 19 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.lastSaved ? 20 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isEditingActive ? 21 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.fullscreenEditMode && !ctx.EditMode ? 22 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isEditingActive ? 23 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.EditMode && !ctx.fullscreenEditMode && ctx.userCanUpdate ? 24 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.FullScreen ? 25 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.FullScreen ? 26 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading ? 27 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading ? 28 : -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: 10px;\n  height: auto !important;\n  min-height: unset !important;\n  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen .mj-agent-editor {\n  height: 100%;\n  min-height: unset;\n  border-radius: 10px;\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: #f8fafc;\n  border-radius: 8px;\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: rgba(0, 0, 0, 0.5);\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: #ffffff;\n  border-bottom: 1px solid #e2e8f0;\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: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);\n  border-bottom-color: #bbf7d0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar {\n  padding: 10px 16px;\n  border-bottom: 1px solid #e2e8f0;\n  background: #ffffff;\n  border-radius: 10px 10px 0 0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar--editing {\n  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);\n  border-bottom-color: #bbf7d0;\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 #e2e8f0;\n  border-radius: 6px;\n  background: #ffffff;\n  color: #475569;\n  font-size: 13px;\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: 12px; }\n\n.mj-agent-editor-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }\n.mj-agent-editor-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n.mj-agent-editor-btn--primary {\n  background: #3b82f6;\n  border-color: #3b82f6;\n  color: #ffffff;\n}\n\n.mj-agent-editor-btn--primary:hover:not(:disabled) { background: #2563eb; border-color: #2563eb; }\n\n.mj-agent-editor-btn--expand {\n  background: #f0f9ff;\n  border-color: #bae6fd;\n  color: #0284c7;\n}\n\n.mj-agent-editor-btn--expand:hover:not(:disabled) { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }\n\n.mj-agent-editor-btn--close {\n  background: #fef2f2;\n  border-color: #fecaca;\n  color: #dc2626;\n}\n\n.mj-agent-editor-btn--close:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }\n\n.mj-agent-editor-btn-divider {\n  width: 1px;\n  height: 22px;\n  background: #e2e8f0;\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 #e2e8f0;\n  border-radius: 6px;\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: #ffffff;\n  color: #64748b;\n  font-size: 12px;\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 #e2e8f0; }\n\n.mj-agent-editor-view-btn--active {\n  background: #eff6ff;\n  color: #3b82f6;\n}\n\n.mj-agent-editor-view-btn:hover:not(.mj-agent-editor-view-btn--active) { background: #f8fafc; }\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: 14px;\n  font-weight: 600;\n  color: #1e293b;\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: #3b82f6;\n  font-size: 14px;\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: 12px;\n  color: #94a3b8;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-agent-editor-status--unsaved {\n  color: #f59e0b;\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 rgba(0, 0, 0, 0.12);\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.85);\n  color: #475569;\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n  backdrop-filter: blur(4px);\n}\n\n.mj-agent-editor-inline-expand:hover {\n  background: #ffffff;\n  border-color: #94a3b8;\n  color: #1e293b;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n  transform: scale(1.05);\n}\n\n.mj-agent-editor-inline-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #f59e0b;\n  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 6px rgba(245, 158, 11, 0.4);\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: 14px;\n  color: #64748b;\n}\n\n.mj-agent-editor-loading i { font-size: 16px; }\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 #e2e8f0;\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: 12px;\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: #ecfdf5;\n  color: #059669;\n}\n\n.mj-agent-editor-mode-badge--readonly {\n  background: #f1f5f9;\n  color: #64748b;\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: #ecfdf5;\n  border-color: #a7f3d0;\n  color: #059669;\n}\n\n.mj-agent-editor-btn--edit:hover:not(:disabled) {\n  background: #d1fae5;\n  border-color: #6ee7b7;\n  color: #047857;\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: #fecaca;\n  color: #dc2626;\n  background: #ffffff;\n}\n\n.mj-agent-editor-btn--danger-outline:hover:not(:disabled) {\n  background: #fef2f2;\n  border-color: #fca5a5;\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: rgba(0, 0, 0, 0.4);\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: #ffffff;\n  border-radius: 12px;\n  padding: 28px 32px;\n  max-width: 400px;\n  width: 90%;\n  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);\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: #f59e0b;\n  margin-bottom: 12px;\n}\n\n.mj-agent-editor-dialog-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #1e293b;\n  margin: 0 0 8px;\n}\n\n.mj-agent-editor-dialog-message {\n  font-size: 13px;\n  color: #64748b;\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: 10px;\n  height: auto !important;\n  min-height: unset !important;\n  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08);\n}\n\nmj-flow-agent-editor.mj-flow-agent-editor--fullscreen .mj-agent-editor {\n  height: 100%;\n  min-height: unset;\n  border-radius: 10px;\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: #f8fafc;\n  border-radius: 8px;\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: rgba(0, 0, 0, 0.5);\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: #ffffff;\n  border-bottom: 1px solid #e2e8f0;\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: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);\n  border-bottom-color: #bbf7d0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar {\n  padding: 10px 16px;\n  border-bottom: 1px solid #e2e8f0;\n  background: #ffffff;\n  border-radius: 10px 10px 0 0;\n}\n\n.mj-flow-agent-editor--fullscreen .mj-agent-editor-toolbar--editing {\n  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);\n  border-bottom-color: #bbf7d0;\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 #e2e8f0;\n  border-radius: 6px;\n  background: #ffffff;\n  color: #475569;\n  font-size: 13px;\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: 12px; }\n\n.mj-agent-editor-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }\n.mj-agent-editor-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n.mj-agent-editor-btn--primary {\n  background: #3b82f6;\n  border-color: #3b82f6;\n  color: #ffffff;\n}\n\n.mj-agent-editor-btn--primary:hover:not(:disabled) { background: #2563eb; border-color: #2563eb; }\n\n.mj-agent-editor-btn--expand {\n  background: #f0f9ff;\n  border-color: #bae6fd;\n  color: #0284c7;\n}\n\n.mj-agent-editor-btn--expand:hover:not(:disabled) { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }\n\n.mj-agent-editor-btn--close {\n  background: #fef2f2;\n  border-color: #fecaca;\n  color: #dc2626;\n}\n\n.mj-agent-editor-btn--close:hover:not(:disabled) { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }\n\n.mj-agent-editor-btn-divider {\n  width: 1px;\n  height: 22px;\n  background: #e2e8f0;\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 #e2e8f0;\n  border-radius: 6px;\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: #ffffff;\n  color: #64748b;\n  font-size: 12px;\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 #e2e8f0; }\n\n.mj-agent-editor-view-btn--active {\n  background: #eff6ff;\n  color: #3b82f6;\n}\n\n.mj-agent-editor-view-btn:hover:not(.mj-agent-editor-view-btn--active) { background: #f8fafc; }\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: 14px;\n  font-weight: 600;\n  color: #1e293b;\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: #3b82f6;\n  font-size: 14px;\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: 12px;\n  color: #94a3b8;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.mj-agent-editor-status--unsaved {\n  color: #f59e0b;\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 rgba(0, 0, 0, 0.12);\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.85);\n  color: #475569;\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);\n  backdrop-filter: blur(4px);\n}\n\n.mj-agent-editor-inline-expand:hover {\n  background: #ffffff;\n  border-color: #94a3b8;\n  color: #1e293b;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n  transform: scale(1.05);\n}\n\n.mj-agent-editor-inline-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #f59e0b;\n  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 6px rgba(245, 158, 11, 0.4);\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: 14px;\n  color: #64748b;\n}\n\n.mj-agent-editor-loading i { font-size: 16px; }\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 #e2e8f0;\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: 12px;\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: #ecfdf5;\n  color: #059669;\n}\n\n.mj-agent-editor-mode-badge--readonly {\n  background: #f1f5f9;\n  color: #64748b;\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: #ecfdf5;\n  border-color: #a7f3d0;\n  color: #059669;\n}\n\n.mj-agent-editor-btn--edit:hover:not(:disabled) {\n  background: #d1fae5;\n  border-color: #6ee7b7;\n  color: #047857;\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: #fecaca;\n  color: #dc2626;\n  background: #ffffff;\n}\n\n.mj-agent-editor-btn--danger-outline:hover:not(:disabled) {\n  background: #fef2f2;\n  border-color: #fca5a5;\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: rgba(0, 0, 0, 0.4);\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: #ffffff;\n  border-radius: 12px;\n  padding: 28px 32px;\n  max-width: 400px;\n  width: 90%;\n  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);\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: #f59e0b;\n  margin-bottom: 12px;\n}\n\n.mj-agent-editor-dialog-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #1e293b;\n  margin: 0 0 8px;\n}\n\n.mj-agent-editor-dialog-message {\n  font-size: 13px;\n  color: #64748b;\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']
+        }], AgentID: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
+        }], FullScreen: [{
+            type: Input
+        }], FlowSaved: [{
+            type: Output
+        }], FlowChanged: [{
+            type: Output
+        }], FullScreenToggled: [{
+            type: Output
+        }], StepSelected: [{
+            type: Output
+        }], flowEditor: [{
+            type: ViewChild,
+            args: ['flowEditor']
+        }], onEscapeKey: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentEditorComponent, { className: "FlowAgentEditorComponent", filePath: "src/lib/agent-editor/flow-agent-editor.component.ts", lineNumber: 27 }); })();
+//# sourceMappingURL=flow-agent-editor.component.js.map