@memberjunction/ng-task-graph-editor 6.1.0-edge.1 → 6.1.0-edge.3

package/dist/lib/task-graph-editor.component.js

@@ -24,14 +24,16 @@
  *
  * @module @memberjunction/ng-task-graph-editor
  */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
-import { ValidateTaskGraphSpec, } from '@memberjunction/ai-core-plus';
-import { AddDependency, AddTask, GetDependents, NextTempId, RemoveDependency, RemoveTask, SpecToConnections, SpecToNodes, TASK_GRAPH_NODE_TYPES, UpdateTask, WouldCreateCycle, } from './task-graph-canvas-adapter';
+import { ConfigOf, ValidateTaskGraphSpec, } from '@memberjunction/ai-core-plus';
+import { FlowEditorComponent } from '@memberjunction/ng-flow-editor';
+import { AddDependency, AddTask, GetDependents, GetNodeTypeConfig, IsAuthorableNodeType, NewTaskFromNodeType, NextTempId, RemoveDependency, RemoveTask, SpecToConnections, SpecToNodes, TASK_GRAPH_NODE_TYPES, UpdateTask, WouldCreateCycle, } from './task-graph-canvas-adapter';
 import { AfterDependencyAddedEventArgs, AfterDependencyRemovedEventArgs, AfterTaskAddedEventArgs, AfterTaskRemovedEventArgs, AfterTaskUpdatedEventArgs, AgentOpenRequestedEventArgs, BeforeDependencyAddedEventArgs, BeforeDependencyRemovedEventArgs, BeforeTaskAddedEventArgs, BeforeTaskRemovedEventArgs, BeforeTaskUpdatedEventArgs, RecordOpenRequestedEventArgs, TaskGraphSelectionChangedEventArgs, TaskGraphSpecChangedEventArgs, TaskGraphValidationChangedEventArgs, } from './task-graph-editor-events';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-flow-editor";
 import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "./task-graph-properties-panel.component";
 const _forTrack0 = ($index, $item) => $item.Code + ($item.TempId ?? "");
 function TaskGraphEditorComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-empty-state", 1);
@@ -39,7 +41,13 @@ function TaskGraphEditorComponent_Conditional_1_Template(rf, ctx) { if (rf & 1)
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Message", ctx_r0.EmptyStateMessage);
 } }
-function TaskGraphEditorComponent_Conditional_2_Conditional_0_For_5_Template(rf, ctx) { if (rf & 1) {
+function TaskGraphEditorComponent_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-alert", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Message", ctx_r0.EmptyStateMessage);
+} }
+function TaskGraphEditorComponent_Conditional_2_Conditional_1_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -48,12 +56,12 @@ function TaskGraphEditorComponent_Conditional_2_Conditional_0_For_5_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(err_r3.Message);
 } }
-function TaskGraphEditorComponent_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-alert", 2)(1, "strong");
+function TaskGraphEditorComponent_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-alert", 3)(1, "strong");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "ul", 4);
-    i0.ɵɵrepeaterCreate(4, TaskGraphEditorComponent_Conditional_2_Conditional_0_For_5_Template, 2, 1, "li", null, _forTrack0);
+    i0.ɵɵelementStart(3, "ul", 7);
+    i0.ɵɵrepeaterCreate(4, TaskGraphEditorComponent_Conditional_2_Conditional_1_For_5_Template, 2, 1, "li", null, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -62,17 +70,33 @@ function TaskGraphEditorComponent_Conditional_2_Conditional_0_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.ValidationErrors);
 } }
+function TaskGraphEditorComponent_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-task-graph-properties", 8);
+    i0.ɵɵlistener("TaskPropertyChangeRequested", function TaskGraphEditorComponent_Conditional_2_Conditional_4_Template_mj_task_graph_properties_TaskPropertyChangeRequested_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnTaskPropertyChangeRequested($event)); })("DependencyConditionChangeRequested", function TaskGraphEditorComponent_Conditional_2_Conditional_4_Template_mj_task_graph_properties_DependencyConditionChangeRequested_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDependencyConditionChangeRequested($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Task", ctx_r0.SelectedTask)("Spec", ctx_r0.Spec)("ReadOnly", ctx_r0.ReadOnly)("AvailableAgentNames", ctx_r0.AvailableAgentNames)("AvailableActionNames", ctx_r0.AvailableActionNames);
+} }
 function TaskGraphEditorComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, TaskGraphEditorComponent_Conditional_2_Conditional_0_Template, 6, 2, "mj-alert", 2);
-    i0.ɵɵelementStart(1, "mj-flow-editor", 3);
-    i0.ɵɵlistener("NodeSelected", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_NodeSelected_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnNodeSelected($event)); })("NodeRemoved", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_NodeRemoved_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnNodeRemoved($event)); })("ConnectionCreated", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_ConnectionCreated_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnConnectionCreated($event)); })("ConnectionRemoved", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_ConnectionRemoved_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnConnectionRemoved($event)); });
+    i0.ɵɵconditionalCreate(0, TaskGraphEditorComponent_Conditional_2_Conditional_0_Template, 1, 1, "mj-alert", 2);
+    i0.ɵɵconditionalCreate(1, TaskGraphEditorComponent_Conditional_2_Conditional_1_Template, 6, 2, "mj-alert", 3);
+    i0.ɵɵelementStart(2, "div", 4)(3, "mj-flow-editor", 5);
+    i0.ɵɵlistener("NodeSelected", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_NodeSelected_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnNodeSelected($event)); })("NodeAdded", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_NodeAdded_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnNodeAdded($event)); })("NodeRemoved", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_NodeRemoved_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnNodeRemoved($event)); })("NodesChanged", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_NodesChanged_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnNodesChanged($event)); })("NodeMoved", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_NodeMoved_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnNodeMoved($event)); })("ConnectionCreated", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_ConnectionCreated_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnConnectionCreated($event)); })("ConnectionRemoved", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_ConnectionRemoved_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnConnectionRemoved($event)); })("ConnectionSelected", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_ConnectionSelected_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnConnectionSelected($event)); })("LegendToggled", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_LegendToggled_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnLegendToggled($event)); })("BeforeContextMenu", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_BeforeContextMenu_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.BeforeContextMenu.emit($event)); })("AfterContextMenuAction", function TaskGraphEditorComponent_Conditional_2_Template_mj_flow_editor_AfterContextMenuAction_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.AfterContextMenuAction.emit($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, TaskGraphEditorComponent_Conditional_2_Conditional_4_Template, 1, 5, "mj-task-graph-properties", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(!ctx_r0.IsValid && ctx_r0.ValidationErrors.length > 0 ? 0 : -1);
+    i0.ɵɵconditional(ctx_r0.IsEmpty ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Nodes", ctx_r0.Nodes)("Connections", ctx_r0.Connections)("NodeTypes", ctx_r0.NodeTypes)("ReadOnly", ctx_r0.ReadOnly)("ShowToolbar", ctx_r0.ShowToolbar)("ShowPalette", ctx_r0.ShowPalette && !ctx_r0.ReadOnly)("ShowMinimap", ctx_r0.ShowMinimap)("ShowStatusBar", ctx_r0.ShowStatusBar)("AutoLayoutDirection", ctx_r0.AutoLayoutDirection);
+    i0.ɵɵconditional(!ctx_r0.IsValid && ctx_r0.ValidationErrors.length > 0 ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Nodes", ctx_r0.Nodes)("Connections", ctx_r0.Connections)("NodeTypes", ctx_r0.NodeTypes)("ReadOnly", ctx_r0.ReadOnly)("ShowToolbar", ctx_r0.ShowToolbar)("ToolbarVisibility", ctx_r0.ToolbarVisibility)("ToolbarAlign", ctx_r0.ToolbarAlign)("ShowPalette", ctx_r0.ShowPalette && !ctx_r0.ReadOnly)("ShowMinimap", ctx_r0.ShowMinimap)("ShowLegend", ctx_r0.ShowLegend)("ShowStatusBar", ctx_r0.ShowStatusBar)("AutoLayoutDirection", ctx_r0.AutoLayoutDirection);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.ShowProperties && !ctx_r0.ReadOnly ? 4 : -1);
 } }
 export class TaskGraphEditorComponent extends BaseAngularComponent {
     // ── Inputs ───────────────────────────────────────────────────────────────
@@ -100,15 +124,88 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
     get RuntimeStatus() {
         return this.currentRuntime;
     }
+    /**
+     * Geometry for the nodes, keyed by `tempId`. Supplying it places the graph instead of laying it
+     * out.
+     *
+     * **Why a host must be able to supply this.** The spec has no layout field, so without it every
+     * node projects to the origin — all of them, stacked in one place — and the canvas is left to
+     * rescue the situation with a deferred Dagre pass. That pass is fine in the editor, where the
+     * author is present and can rearrange. It was not fine in the RUN views, which held the real
+     * geometry (a workflow's authored positions, or a computed layout) and had no way to hand it
+     * over: every run rendered its steps piled on the origin, and the zoom-to-fit that followed
+     * fitted a bounding box one node wide and blew the viewport up past 250%.
+     *
+     * Applied as the starting geometry only. Once the canvas reports positions of its own — a drag,
+     * an arrange — those win, because the person moving a node is the authority on where it goes.
+     */
+    set NodePositions(value) {
+        if (!value || value.size === 0)
+            return;
+        const key = [...value.keys()].sort().join(',');
+        const firstForThisGraph = this.fittedGeometryKey !== key;
+        for (const [id, position] of value)
+            this.knownPositions.set(id, { ...position });
+        // Real geometry means the one-time Dagre pass has nothing to rescue.
+        this.hasLaidOut = true;
+        this.project();
+        // Fit once per graph. Live status / poll re-supplies the same positions as a new Map,
+        // and fitting on every write snaps the viewport back while the person is zooming.
+        if (firstForThisGraph) {
+            this.fittedGeometryKey = key;
+            this.zoomToFitSoon();
+        }
+    }
     /** Read-only mode. The same component is the viewer — there is no second, weaker renderer. */
     ReadOnly = false;
     ShowToolbar = true;
+    /** Full bar / chip / recover tab. Run views default this to minimized. */
+    ToolbarVisibility = 'shown';
+    ToolbarAlign = 'center';
     ShowPalette = true;
     ShowMinimap = true;
+    /**
+     * Whether the legend rides on the canvas.
+     *
+     * On for authoring, off for a run — and the difference is what the legend is FOR. It explains the
+     * authoring vocabulary (what a conditional edge means, what a duplicate default looks like),
+     * which is what someone drawing a graph needs. A run view is answering a different question —
+     * what happened — and the legend answers none of it while occluding a third of the canvas.
+     */
+    ShowLegend = true;
     ShowStatusBar = true;
     AutoLayoutDirection = 'vertical';
+    /**
+     * Whether the properties panel rides alongside the canvas.
+     *
+     * On by default, because without it a step added from the palette can never be named or
+     * assigned — the canvas draws structure, the panel supplies content, and one without the other
+     * is a graph the author can build but not finish. Hosts embedding the read-only viewer in a chat
+     * card turn it off.
+     */
+    ShowProperties = true;
+    /**
+     * Agent names offered when assigning a step. Supplied by the host, which owns data access —
+     * this is a widgets-layer component and does not query.
+     */
+    AvailableAgentNames = [];
+    /** Action names offered when assigning a step. Same ownership rule as `AvailableAgentNames`. */
+    AvailableActionNames = [];
     /** Shown when there is nothing to draw yet. */
     EmptyStateMessage = 'No steps yet. Add one to start building this workflow.';
+    /**
+     * Debug overlay for a run. Empty by default so an embed (agent-run timeline, test harness)
+     * never grows breakpoint badges or override styling it did not ask for.
+     */
+    set DebugOverlay(value) {
+        if (this.debugOverlay === value)
+            return;
+        this.debugOverlay = value;
+        this.project();
+    }
+    get DebugOverlay() {
+        return this.debugOverlay;
+    }
     // ── Outputs ──────────────────────────────────────────────────────────────
     BeforeTaskAdded = new EventEmitter();
     AfterTaskAdded = new EventEmitter();
@@ -121,21 +218,36 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
     BeforeDependencyRemoved = new EventEmitter();
     AfterDependencyRemoved = new EventEmitter();
     /** Informational — no `Before` pair, because these report what already happened. */
+    /**
+     * The legend was shown or hidden from the canvas toolbar.
+     *
+     * Forwarded so a host can PERSIST the choice. Without it the toolbar's toggle mutates the
+     * canvas's own flag and nothing else, so the preference dies with the view — and a host that
+     * wanted it remembered would have to add a second control beside the one that already exists,
+     * which is how a surface ends up with two buttons doing the same thing and disagreeing.
+     */
+    LegendToggled = new EventEmitter();
     SpecChanged = new EventEmitter();
     SelectionChanged = new EventEmitter();
     ValidationChanged = new EventEmitter();
     /** Intent-only — the host navigates; this widget has no Router and must not acquire one. */
     AgentOpenRequested = new EventEmitter();
     RecordOpenRequested = new EventEmitter();
+    /** A connection was clicked. Payload is the canvas connection, or null when cleared. */
+    ConnectionSelected = new EventEmitter();
+    BeforeContextMenu = new EventEmitter();
+    AfterContextMenuAction = new EventEmitter();
     // ── Rendered state ───────────────────────────────────────────────────────
     Nodes = [];
     Connections = [];
-    NodeTypes = TASK_GRAPH_NODE_TYPES;
+    NodeTypes = [...TASK_GRAPH_NODE_TYPES];
     SelectedTask = null;
     ValidationErrors = [];
     IsValid = true;
+    canvas;
     currentSpec = null;
     currentRuntime = null;
+    debugOverlay = null;
     get IsEmpty() {
         return (this.currentSpec?.tasks?.length ?? 0) === 0;
     }
@@ -160,13 +272,18 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
     AddTask(partial = {}) {
         if (this.ReadOnly || !this.currentSpec)
             return null;
+        // Kind and configuration travel together — a partial that supplies one without the other
+        // would be a node the engine cannot run, so an unspecified partial defaults to an unassigned
+        // Agent step and the validator says so immediately.
         const task = {
             tempId: partial.tempId ?? NextTempId(this.currentSpec),
             name: partial.name ?? 'New step',
             description: partial.description ?? '',
-            agentName: partial.agentName,
-            assignToUser: partial.assignToUser,
+            kind: partial.kind ?? 'Agent',
+            configuration: partial.configuration ?? { agentName: '' },
             dependsOn: partial.dependsOn ?? [],
+            policy: partial.policy,
+            layout: partial.layout,
             inputPayload: partial.inputPayload,
         };
         const before = new BeforeTaskAddedEventArgs(task);
@@ -261,8 +378,9 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
     }
     /** Asks the host to open the agent behind a task. */
     RequestAgentOpen(task) {
-        if (task.agentName) {
-            this.AgentOpenRequested.emit(new AgentOpenRequestedEventArgs(task.agentName, task));
+        const agentName = ConfigOf(task, 'Agent')?.agentName;
+        if (agentName) {
+            this.AgentOpenRequested.emit(new AgentOpenRequestedEventArgs(agentName, task));
         }
     }
     /** Asks the host to open a record the graph references. */
@@ -273,6 +391,51 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
     OnNodeSelected(node) {
         this.selectTask(node ? this.findTask(node.ID) : null);
     }
+    /**
+     * A palette entry was clicked or dragged onto the canvas.
+     *
+     * **This binding is the bug.** The canvas has always emitted `NodeAdded` for a palette drop, and
+     * this component simply never listened — so the node the canvas announced was thrown away, the
+     * spec never gained a task, and the author was told "a task graph must contain at least one
+     * task" no matter how many times they tried to add one. The canvas does not mutate its own
+     * `Nodes` on purpose (the host owns the model); an unheard event is therefore a silent no-op
+     * rather than a visible failure, which is why it survived.
+     *
+     * The new step is selected immediately: it lands unnamed and, for an agent or action step with
+     * nothing available to default to, unassigned — so the properties panel is where the author has
+     * to go next, and putting them there beats making them find it.
+     */
+    OnNodeAdded(event) {
+        if (this.ReadOnly || !this.currentSpec)
+            return;
+        const type = GetNodeTypeConfig(event.Node.Type)?.Type;
+        // Only an authorable shape can be dropped from the palette. The render set is wider, and a
+        // display-only kind arriving here would mean the palette offered something with no editor.
+        if (!type || !IsAuthorableNodeType(type))
+            return;
+        const added = this.AddTask(NewTaskFromNodeType(this.currentSpec, type, {
+            agentName: this.AvailableAgentNames[0],
+            actionName: this.AvailableActionNames[0],
+        }));
+        if (!added)
+            return;
+        // Remember where the canvas put it BEFORE anything re-projects. The spec has no geometry
+        // field, so this map is the only record that the author dropped (or clicked) it here — and
+        // without it the node would snap back to the origin on the very next edit.
+        this.knownPositions.set(added.tempId, { ...event.Node.Position });
+        // A graph that has received a hand-placed node is laid out, by definition. Marking it here
+        // stops the one-time Dagre pass from firing later and discarding that placement.
+        this.hasLaidOut = true;
+        this.selectTask(added);
+    }
+    /** Applies a properties-panel edit through the same vetoable path a canvas edit takes. */
+    OnTaskPropertyChangeRequested(args) {
+        this.UpdateTask(args.TempId, args.Next);
+    }
+    /** Applies a properties-panel edge-condition edit. */
+    OnDependencyConditionChangeRequested(args) {
+        this.SetDependencyCondition(args.FromTempId, args.ToTempId, args.Condition);
+    }
     OnConnectionCreated(event) {
         this.AddDependency(event.SourceNodeID, event.TargetNodeID);
     }
@@ -303,43 +466,164 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
             this.Connections = [];
             this.ValidationErrors = [];
             this.IsValid = true;
+            this.hasLaidOut = false;
+            this.fittedGeometryKey = null;
+            this.knownPositions.clear();
             return;
         }
-        this.Nodes = SpecToNodes(this.currentSpec, this.currentRuntime ?? undefined);
-        this.Connections = SpecToConnections(this.currentSpec);
+        this.Nodes = SpecToNodes(this.currentSpec, this.currentRuntime ?? undefined, this.knownPositions, this.debugOverlay ?? undefined);
+        this.Connections = SpecToConnections(this.currentSpec, this.currentRuntime ?? undefined, this.debugOverlay ?? undefined);
         this.Validate();
+        this.arrangeIfNeverLaidOut();
+    }
+    /**
+     * Lays the graph out ONCE — when it arrives with no geometry of its own.
+     *
+     * A `TaskGraphSpec` carries no positions, so a spec opened for the first time projects with
+     * every node at the origin and needs Dagre to make it readable. After that the author's layout
+     * is the layout: `knownPositions` carries it across re-projections, and re-arranging again would
+     * throw away the arrangement they just made.
+     *
+     * It must also not run on every edit, because `AutoArrange` ends in `ZoomToFit` — so arranging
+     * per change meant the viewport snapped to fit after every added step and every drawn
+     * connection, which on a one-node graph zooms to maximum. That is the behaviour being fixed
+     * here; the rule mirrors the Flow Agent editor's (`flow-agent-editor.component.ts`), which has
+     * always arranged only when every node sits at the origin.
+     */
+    arrangeIfNeverLaidOut() {
+        if (this.Nodes.length === 0)
+            return;
+        if (this.hasLaidOut)
+            return;
+        // Nothing to rescue a layout from: a spec whose nodes all sit at the origin has never been
+        // arranged. One node at the origin is the legitimate starting case too.
+        const allAtOrigin = this.Nodes.every((n) => n.Position.X === 0 && n.Position.Y === 0);
+        if (!allAtOrigin) {
+            this.hasLaidOut = true;
+            return;
+        }
+        this.hasLaidOut = true;
+        // Deferred one turn: the canvas has to render the nodes before Dagre can measure them.
+        // Cleared on destroy so a pending layout cannot run against a torn-down view.
+        if (this.pendingLayout !== null)
+            clearTimeout(this.pendingLayout);
+        this.pendingLayout = setTimeout(() => {
+            this.pendingLayout = null;
+            this.canvas?.AutoArrange(this.AutoLayoutDirection);
+        });
+    }
+    /**
+     * Fits the viewport to the graph, once the canvas has drawn it.
+     *
+     * Deferred for the same reason the layout pass is: `fitToScreen` measures the rendered nodes, so
+     * calling it in the same turn as the projection fits whatever was on screen a moment ago. With
+     * every node still at the origin that bounding box is a single node wide, and "fit" means zoom
+     * to ~265% — the symptom that made a four-step workflow look like one enormous box.
+     */
+    zoomToFitSoon() {
+        if (this.pendingLayout !== null)
+            clearTimeout(this.pendingLayout);
+        this.pendingLayout = setTimeout(() => {
+            this.pendingLayout = null;
+            this.canvas?.ZoomToFit();
+        });
+    }
+    /**
+     * The canvas is the authority on geometry, so remember what it reports.
+     *
+     * Without this the spec — which has no geometry field — is the only survivor of a re-projection,
+     * and every edit silently moved every node back to the origin. That is what forced a re-arrange
+     * (and therefore a re-zoom) on each change.
+     */
+    OnNodesChanged(nodes) {
+        for (const n of nodes)
+            this.knownPositions.set(n.ID, { ...n.Position });
     }
+    /** The canvas toolbar showed or hid the legend; tell whoever is remembering that choice. */
+    OnLegendToggled(show) {
+        this.ShowLegend = show;
+        this.LegendToggled.emit(show);
+    }
+    OnConnectionSelected(connection) {
+        this.ConnectionSelected.emit(connection);
+    }
+    /** A single node was dragged. Same authority, narrower event. */
+    OnNodeMoved(event) {
+        this.knownPositions.set(event.NodeID, { ...event.NewPosition });
+    }
+    ngOnDestroy() {
+        if (this.pendingLayout !== null) {
+            clearTimeout(this.pendingLayout);
+            this.pendingLayout = null;
+        }
+    }
+    /** The topology the current layout was computed for; '' when nothing has been laid out. */
+    /**
+     * Node geometry, which the spec cannot hold.
+     *
+     * `TaskGraphSpec` is an execution contract with no layout field, so a re-projection would
+     * otherwise return every node to the origin. Keyed by `tempId`; written from the canvas
+     * (`NodesChanged` / `NodeMoved`) and from the drop position of a newly added node, and read back
+     * by `SpecToNodes` on every projection.
+     */
+    knownPositions = new Map();
+    /** Whether the one-time Dagre pass has run (or been made unnecessary by a hand-placed node). */
+    hasLaidOut = false;
+    /** Task-id set we last fitted. Same ids + a new Map must not re-fit. */
+    fittedGeometryKey = null;
+    pendingLayout = null;
     static ɵfac = /*@__PURE__*/ (() => { let ɵTaskGraphEditorComponent_BaseFactory; return function TaskGraphEditorComponent_Factory(__ngFactoryType__) { return (ɵTaskGraphEditorComponent_BaseFactory || (ɵTaskGraphEditorComponent_BaseFactory = i0.ɵɵgetInheritedFactory(TaskGraphEditorComponent)))(__ngFactoryType__ || TaskGraphEditorComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TaskGraphEditorComponent, selectors: [["mj-task-graph-editor"]], inputs: { Spec: "Spec", RuntimeStatus: "RuntimeStatus", ReadOnly: "ReadOnly", ShowToolbar: "ShowToolbar", ShowPalette: "ShowPalette", ShowMinimap: "ShowMinimap", ShowStatusBar: "ShowStatusBar", AutoLayoutDirection: "AutoLayoutDirection", EmptyStateMessage: "EmptyStateMessage" }, outputs: { BeforeTaskAdded: "BeforeTaskAdded", AfterTaskAdded: "AfterTaskAdded", BeforeTaskRemoved: "BeforeTaskRemoved", AfterTaskRemoved: "AfterTaskRemoved", BeforeTaskUpdated: "BeforeTaskUpdated", AfterTaskUpdated: "AfterTaskUpdated", BeforeDependencyAdded: "BeforeDependencyAdded", AfterDependencyAdded: "AfterDependencyAdded", BeforeDependencyRemoved: "BeforeDependencyRemoved", AfterDependencyRemoved: "AfterDependencyRemoved", SpecChanged: "SpecChanged", SelectionChanged: "SelectionChanged", ValidationChanged: "ValidationChanged", AgentOpenRequested: "AgentOpenRequested", RecordOpenRequested: "RecordOpenRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "mj-tge"], ["Icon", "fa-diagram-project", "Title", "Nothing here yet", 3, "Message"], ["Variant", "warning", 1, "mj-tge__validation"], [1, "mj-tge__canvas", 3, "NodeSelected", "NodeRemoved", "ConnectionCreated", "ConnectionRemoved", "Nodes", "Connections", "NodeTypes", "ReadOnly", "ShowToolbar", "ShowPalette", "ShowMinimap", "ShowStatusBar", "AutoLayoutDirection"], [1, "mj-tge__validation-list"]], template: function TaskGraphEditorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TaskGraphEditorComponent, selectors: [["mj-task-graph-editor"]], viewQuery: function TaskGraphEditorComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(FlowEditorComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvas = _t.first);
+        } }, inputs: { Spec: "Spec", RuntimeStatus: "RuntimeStatus", NodePositions: "NodePositions", ReadOnly: "ReadOnly", ShowToolbar: "ShowToolbar", ToolbarVisibility: "ToolbarVisibility", ToolbarAlign: "ToolbarAlign", ShowPalette: "ShowPalette", ShowMinimap: "ShowMinimap", ShowLegend: "ShowLegend", ShowStatusBar: "ShowStatusBar", AutoLayoutDirection: "AutoLayoutDirection", ShowProperties: "ShowProperties", AvailableAgentNames: "AvailableAgentNames", AvailableActionNames: "AvailableActionNames", EmptyStateMessage: "EmptyStateMessage", DebugOverlay: "DebugOverlay" }, outputs: { BeforeTaskAdded: "BeforeTaskAdded", AfterTaskAdded: "AfterTaskAdded", BeforeTaskRemoved: "BeforeTaskRemoved", AfterTaskRemoved: "AfterTaskRemoved", BeforeTaskUpdated: "BeforeTaskUpdated", AfterTaskUpdated: "AfterTaskUpdated", BeforeDependencyAdded: "BeforeDependencyAdded", AfterDependencyAdded: "AfterDependencyAdded", BeforeDependencyRemoved: "BeforeDependencyRemoved", AfterDependencyRemoved: "AfterDependencyRemoved", LegendToggled: "LegendToggled", SpecChanged: "SpecChanged", SelectionChanged: "SelectionChanged", ValidationChanged: "ValidationChanged", AgentOpenRequested: "AgentOpenRequested", RecordOpenRequested: "RecordOpenRequested", ConnectionSelected: "ConnectionSelected", BeforeContextMenu: "BeforeContextMenu", AfterContextMenuAction: "AfterContextMenuAction" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "mj-tge"], ["Icon", "fa-diagram-project", "Title", "Nothing here yet", 3, "Message"], ["Variant", "info", 1, "mj-tge__empty-hint", 3, "Message"], ["Variant", "warning", 1, "mj-tge__validation"], [1, "mj-tge__workspace"], [1, "mj-tge__canvas", 3, "NodeSelected", "NodeAdded", "NodeRemoved", "NodesChanged", "NodeMoved", "ConnectionCreated", "ConnectionRemoved", "ConnectionSelected", "LegendToggled", "BeforeContextMenu", "AfterContextMenuAction", "Nodes", "Connections", "NodeTypes", "ReadOnly", "ShowToolbar", "ToolbarVisibility", "ToolbarAlign", "ShowPalette", "ShowMinimap", "ShowLegend", "ShowStatusBar", "AutoLayoutDirection"], [1, "mj-tge__properties", 3, "Task", "Spec", "ReadOnly", "AvailableAgentNames", "AvailableActionNames"], [1, "mj-tge__validation-list"], [1, "mj-tge__properties", 3, "TaskPropertyChangeRequested", "DependencyConditionChangeRequested", "Task", "Spec", "ReadOnly", "AvailableAgentNames", "AvailableActionNames"]], template: function TaskGraphEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, TaskGraphEditorComponent_Conditional_1_Template, 1, 1, "mj-empty-state", 1)(2, TaskGraphEditorComponent_Conditional_2_Template, 2, 10);
+            i0.ɵɵconditionalCreate(1, TaskGraphEditorComponent_Conditional_1_Template, 1, 1, "mj-empty-state", 1)(2, TaskGraphEditorComponent_Conditional_2_Template, 5, 15);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.IsEmpty ? 1 : 2);
-        } }, dependencies: [i1.FlowEditorComponent, i2.MJEmptyStateComponent, i2.MJAlertComponent], styles: ["\n\n.mj-tge[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-page);\n}\n\n.mj-tge__validation[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  margin: var(--mj-space-sm, 0.5rem);\n}\n\n.mj-tge__validation-list[_ngcontent-%COMP%] {\n  margin: var(--mj-space-xs, 0.25rem) 0 0;\n  padding-inline-start: 1.25rem;\n}\n\n\n\n.mj-tge__canvas[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n}"] });
+            i0.ɵɵconditional(ctx.IsEmpty && ctx.ReadOnly ? 1 : 2);
+        } }, dependencies: [i1.FlowEditorComponent, i2.MJEmptyStateComponent, i2.MJAlertComponent, i3.TaskGraphPropertiesPanelComponent], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.mj-tge[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-page);\n}\n\n.mj-tge__validation[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  margin: var(--mj-space-sm, 0.5rem);\n}\n\n.mj-tge__validation-list[_ngcontent-%COMP%] {\n  margin: var(--mj-space-xs, 0.25rem) 0 0;\n  padding-inline-start: 1.25rem;\n}\n\n\n\n.mj-tge__workspace[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n\n\n.mj-tge__canvas[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n.mj-tge__properties[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: 300px;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n@media (max-width: 900px) {\n  \n\n  .mj-tge__workspace[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .mj-tge__properties[_ngcontent-%COMP%] {\n    width: 100%;\n    max-height: 40%;\n    border-left: 0;\n    border-top: 1px solid var(--mj-border-default);\n  }\n}\n\n\n\n.mj-tge__empty-hint[_ngcontent-%COMP%] {\n  margin: var(--mj-space-2) var(--mj-space-3) 0;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskGraphEditorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-task-graph-editor', template: "<div class=\"mj-tge\">\n  @if (IsEmpty) {\n    <mj-empty-state\n      Icon=\"fa-diagram-project\"\n      Title=\"Nothing here yet\"\n      [Message]=\"EmptyStateMessage\">\n    </mj-empty-state>\n  } @else {\n    @if (!IsValid && ValidationErrors.length > 0) {\n      <!-- Author-time validation comes from the SAME function the engine runs at submission, so a\n           graph that looks fine here cannot be rejected later for a reason the canvas never showed. -->\n      <mj-alert Variant=\"warning\" class=\"mj-tge__validation\">\n        <strong>{{ ValidationErrors.length }} problem{{ ValidationErrors.length === 1 ? '' : 's' }} to fix</strong>\n        <ul class=\"mj-tge__validation-list\">\n          @for (err of ValidationErrors; track err.Code + (err.TempId ?? '')) {\n            <li>{{ err.Message }}</li>\n          }\n        </ul>\n      </mj-alert>\n    }\n\n    <mj-flow-editor\n      class=\"mj-tge__canvas\"\n      [Nodes]=\"Nodes\"\n      [Connections]=\"Connections\"\n      [NodeTypes]=\"NodeTypes\"\n      [ReadOnly]=\"ReadOnly\"\n      [ShowToolbar]=\"ShowToolbar\"\n      [ShowPalette]=\"ShowPalette && !ReadOnly\"\n      [ShowMinimap]=\"ShowMinimap\"\n      [ShowStatusBar]=\"ShowStatusBar\"\n      [AutoLayoutDirection]=\"AutoLayoutDirection\"\n      (NodeSelected)=\"OnNodeSelected($event)\"\n      (NodeRemoved)=\"OnNodeRemoved($event)\"\n      (ConnectionCreated)=\"OnConnectionCreated($event)\"\n      (ConnectionRemoved)=\"OnConnectionRemoved($event)\">\n    </mj-flow-editor>\n  }\n</div>\n", styles: ["/* Design tokens only \u2014 no hardcoded colors (see .claude/rules/design-tokens.md). */\n.mj-tge {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-page);\n}\n\n.mj-tge__validation {\n  flex: 0 0 auto;\n  margin: var(--mj-space-sm, 0.5rem);\n}\n\n.mj-tge__validation-list {\n  margin: var(--mj-space-xs, 0.25rem) 0 0;\n  padding-inline-start: 1.25rem;\n}\n\n/* The canvas takes the remaining height; min-height:0 is what lets it actually shrink inside flex. */\n.mj-tge__canvas {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-task-graph-editor', template: "<div class=\"mj-tge\">\n  <!-- An EDITABLE empty canvas must still render the editor, because the palette is the only way to\n       add a step \u2014 showing a bare empty state instead made \"Add one to start building this workflow\"\n       an instruction the user could not follow. The hint stays, as a banner above a usable canvas. -->\n  @if (IsEmpty && ReadOnly) {\n    <mj-empty-state\n      Icon=\"fa-diagram-project\"\n      Title=\"Nothing here yet\"\n      [Message]=\"EmptyStateMessage\">\n    </mj-empty-state>\n  } @else {\n    @if (IsEmpty) {\n      <mj-alert Variant=\"info\" class=\"mj-tge__empty-hint\" [Message]=\"EmptyStateMessage\"></mj-alert>\n    }\n    @if (!IsValid && ValidationErrors.length > 0) {\n      <!-- Author-time validation comes from the SAME function the engine runs at submission, so a\n           graph that looks fine here cannot be rejected later for a reason the canvas never showed. -->\n      <mj-alert Variant=\"warning\" class=\"mj-tge__validation\">\n        <strong>{{ ValidationErrors.length }} problem{{ ValidationErrors.length === 1 ? '' : 's' }} to fix</strong>\n        <ul class=\"mj-tge__validation-list\">\n          @for (err of ValidationErrors; track err.Code + (err.TempId ?? '')) {\n            <li>{{ err.Message }}</li>\n          }\n        </ul>\n      </mj-alert>\n    }\n\n    <div class=\"mj-tge__workspace\">\n      <mj-flow-editor\n        class=\"mj-tge__canvas\"\n        [Nodes]=\"Nodes\"\n        [Connections]=\"Connections\"\n        [NodeTypes]=\"NodeTypes\"\n        [ReadOnly]=\"ReadOnly\"\n        [ShowToolbar]=\"ShowToolbar\"\n        [ToolbarVisibility]=\"ToolbarVisibility\"\n        [ToolbarAlign]=\"ToolbarAlign\"\n        [ShowPalette]=\"ShowPalette && !ReadOnly\"\n        [ShowMinimap]=\"ShowMinimap\"\n        [ShowLegend]=\"ShowLegend\"\n        [ShowStatusBar]=\"ShowStatusBar\"\n        [AutoLayoutDirection]=\"AutoLayoutDirection\"\n        (NodeSelected)=\"OnNodeSelected($event)\"\n        (NodeAdded)=\"OnNodeAdded($event)\"\n        (NodeRemoved)=\"OnNodeRemoved($event)\"\n        (NodesChanged)=\"OnNodesChanged($event)\"\n        (NodeMoved)=\"OnNodeMoved($event)\"\n        (ConnectionCreated)=\"OnConnectionCreated($event)\"\n        (ConnectionRemoved)=\"OnConnectionRemoved($event)\"\n        (ConnectionSelected)=\"OnConnectionSelected($event)\"\n        (LegendToggled)=\"OnLegendToggled($event)\"\n        (BeforeContextMenu)=\"BeforeContextMenu.emit($event)\"\n        (AfterContextMenuAction)=\"AfterContextMenuAction.emit($event)\">\n      </mj-flow-editor>\n\n      <!-- The canvas draws structure; this supplies content. A step added from the palette arrives\n           unnamed and (with nothing to default to) unassigned, so without this panel the author can\n           create a step but never finish one. -->\n      @if (ShowProperties && !ReadOnly) {\n        <mj-task-graph-properties\n          class=\"mj-tge__properties\"\n          [Task]=\"SelectedTask\"\n          [Spec]=\"Spec\"\n          [ReadOnly]=\"ReadOnly\"\n          [AvailableAgentNames]=\"AvailableAgentNames\"\n          [AvailableActionNames]=\"AvailableActionNames\"\n          (TaskPropertyChangeRequested)=\"OnTaskPropertyChangeRequested($event)\"\n          (DependencyConditionChangeRequested)=\"OnDependencyConditionChangeRequested($event)\">\n        </mj-task-graph-properties>\n      }\n    </div>\n  }\n</div>\n", styles: ["/* Design tokens only \u2014 no hardcoded colors (see .claude/rules/design-tokens.md). */\n\n/* Same reason as the flow editor's host: a custom element is inline with auto height, so the\n   `height: 100%` on `.mj-tge` below had nothing to resolve against. */\n:host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.mj-tge {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: var(--mj-bg-page);\n}\n\n.mj-tge__validation {\n  flex: 0 0 auto;\n  margin: var(--mj-space-sm, 0.5rem);\n}\n\n.mj-tge__validation-list {\n  margin: var(--mj-space-xs, 0.25rem) 0 0;\n  padding-inline-start: 1.25rem;\n}\n\n/* Canvas + properties side by side; the row takes the remaining height. */\n.mj-tge__workspace {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/* The canvas takes the remaining width; min-width:0 is what lets it actually shrink inside flex. */\n.mj-tge__canvas {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n.mj-tge__properties {\n  flex: 0 0 auto;\n  width: 300px;\n  min-height: 0;\n  overflow-y: auto;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n@media (max-width: 900px) {\n  /* Below this the two side by side leave neither usable; the panel drops under the canvas. */\n  .mj-tge__workspace {\n    flex-direction: column;\n  }\n\n  .mj-tge__properties {\n    width: 100%;\n    max-height: 40%;\n    border-left: 0;\n    border-top: 1px solid var(--mj-border-default);\n  }\n}\n\n/* Shown above a usable, empty canvas \u2014 the palette stays reachable so the hint's advice is followable. */\n.mj-tge__empty-hint {\n  margin: var(--mj-space-2) var(--mj-space-3) 0;\n}\n"] }]
     }], null, { Spec: [{
             type: Input
         }], RuntimeStatus: [{
             type: Input
+        }], NodePositions: [{
+            type: Input
         }], ReadOnly: [{
             type: Input
         }], ShowToolbar: [{
             type: Input
+        }], ToolbarVisibility: [{
+            type: Input
+        }], ToolbarAlign: [{
+            type: Input
         }], ShowPalette: [{
             type: Input
         }], ShowMinimap: [{
             type: Input
+        }], ShowLegend: [{
+            type: Input
         }], ShowStatusBar: [{
             type: Input
         }], AutoLayoutDirection: [{
             type: Input
+        }], ShowProperties: [{
+            type: Input
+        }], AvailableAgentNames: [{
+            type: Input
+        }], AvailableActionNames: [{
+            type: Input
         }], EmptyStateMessage: [{
             type: Input
+        }], DebugOverlay: [{
+            type: Input
         }], BeforeTaskAdded: [{
             type: Output
         }], AfterTaskAdded: [{
@@ -360,6 +644,8 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
             type: Output
         }], AfterDependencyRemoved: [{
             type: Output
+        }], LegendToggled: [{
+            type: Output
         }], SpecChanged: [{
             type: Output
         }], SelectionChanged: [{
@@ -370,6 +656,15 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
             type: Output
         }], RecordOpenRequested: [{
             type: Output
+        }], ConnectionSelected: [{
+            type: Output
+        }], BeforeContextMenu: [{
+            type: Output
+        }], AfterContextMenuAction: [{
+            type: Output
+        }], canvas: [{
+            type: ViewChild,
+            args: [FlowEditorComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskGraphEditorComponent, { className: "TaskGraphEditorComponent", filePath: "src/lib/task-graph-editor.component.ts", lineNumber: 80 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskGraphEditorComponent, { className: "TaskGraphEditorComponent", filePath: "src/lib/task-graph-editor.component.ts", lineNumber: 97 }); })();
 //# sourceMappingURL=task-graph-editor.component.js.map