@memberjunction/ng-task-graph-editor 0.0.0 → 6.1.0-edge.2

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

@@ -0,0 +1,597 @@
+/**
+ * @fileoverview View and edit a `TaskGraphSpec` on a canvas.
+ *
+ * **What makes this reusable is its subject.** It edits `TaskGraphSpec` — the one fully-qualified
+ * graph contract every producer in the program already authors against (D16) — rather than any
+ * particular persistence. A design-time flow, a graph an agent emitted at runtime, a stored workflow
+ * definition and a graph a person is drawing from scratch are all the same type here, so one
+ * component serves the Flow Agent editor, the Agent Run admin view, conversation plan cards, the
+ * Tasks view, and anything downstream.
+ *
+ * The alternative — teaching the existing agent editor a second dialect — is precisely how the two
+ * graph models drifted apart before Phase 4 pulled them onto one traversal engine.
+ *
+ * **Layer: `widgets` (L1/L2).** No `@angular/router`, no `@memberjunction/ng-shared`, no
+ * `NavigationService`. Route-derived state arrives as `@Input()`; navigation *intent* leaves as an
+ * `@Output()` the host acts on, because a widget cannot know whether it is inside Explorer, a
+ * downstream app, or an embedded panel. See `guides/UI_LAYERING_GUIDE.md`.
+ *
+ * **Validation is the engine's.** Cycles, unknown dependency refs and assignment conflicts are
+ * reported by calling `ValidateTaskGraphSpec` from `@memberjunction/ai-core-plus` — the same
+ * function `LoopAgentType` and `TaskGraphService.Submit` call. A second implementation here would be
+ * a second definition of "valid", and the graph that passes on the canvas would be free to fail at
+ * submission.
+ *
+ * @module @memberjunction/ng-task-graph-editor
+ */
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+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);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Message", ctx_r0.EmptyStateMessage);
+} }
+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();
+} if (rf & 2) {
+    const err_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(err_r3.Message);
+} }
+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", 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);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", ctx_r0.ValidationErrors.length, " problem", ctx_r0.ValidationErrors.length === 1 ? "" : "s", " to fix");
+    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, 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)); });
+    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.IsEmpty ? 0 : -1);
+    i0.ɵɵadvance();
+    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)("ShowPalette", ctx_r0.ShowPalette && !ctx_r0.ReadOnly)("ShowMinimap", ctx_r0.ShowMinimap)("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 ───────────────────────────────────────────────────────────────
+    /**
+     * The graph to show. Setter-based rather than `ngOnChanges` (repo convention): the reaction is
+     * explicit, runs only when this property changes, and costs nothing on other change-detection
+     * passes.
+     */
+    set Spec(value) {
+        this.currentSpec = value;
+        this.project();
+    }
+    get Spec() {
+        return this.currentSpec;
+    }
+    /**
+     * Live per-task state, keyed by `tempId`. Supplying it turns the canvas into a runtime view of
+     * the same graph — the convergence point the program was aiming at: one renderer for design time
+     * and run time, rather than an editor and a separate Gantt that can disagree.
+     */
+    set RuntimeStatus(value) {
+        this.currentRuntime = value;
+        this.project();
+    }
+    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;
+        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();
+        this.zoomToFitSoon();
+    }
+    /** Read-only mode. The same component is the viewer — there is no second, weaker renderer. */
+    ReadOnly = false;
+    ShowToolbar = true;
+    ShowPalette = true;
+    ShowMinimap = 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.';
+    // ── Outputs ──────────────────────────────────────────────────────────────
+    BeforeTaskAdded = new EventEmitter();
+    AfterTaskAdded = new EventEmitter();
+    BeforeTaskRemoved = new EventEmitter();
+    AfterTaskRemoved = new EventEmitter();
+    BeforeTaskUpdated = new EventEmitter();
+    AfterTaskUpdated = new EventEmitter();
+    BeforeDependencyAdded = new EventEmitter();
+    AfterDependencyAdded = new EventEmitter();
+    BeforeDependencyRemoved = new EventEmitter();
+    AfterDependencyRemoved = new EventEmitter();
+    /** Informational — no `Before` pair, because these report what already happened. */
+    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();
+    // ── Rendered state ───────────────────────────────────────────────────────
+    Nodes = [];
+    Connections = [];
+    NodeTypes = [...TASK_GRAPH_NODE_TYPES];
+    SelectedTask = null;
+    ValidationErrors = [];
+    IsValid = true;
+    canvas;
+    currentSpec = null;
+    currentRuntime = null;
+    get IsEmpty() {
+        return (this.currentSpec?.tasks?.length ?? 0) === 0;
+    }
+    // ── Public methods ───────────────────────────────────────────────────────
+    //
+    // Imperative entry points exist for exactly the case the cancelable-event contract cannot serve:
+    // a host that needs to `await` something (a confirm dialog) before the action proceeds. A
+    // `Before*` handler cannot await — control returns to the emitter before the handler sets
+    // `Cancel` — so the host awaits first and then calls one of these.
+    /** Re-runs validation and emits the result. Idempotent. */
+    Validate() {
+        const result = this.currentSpec
+            ? ValidateTaskGraphSpec(this.currentSpec)
+            : { Valid: true, Errors: [] };
+        this.IsValid = result.Valid;
+        this.ValidationErrors = result.Errors;
+        const args = new TaskGraphValidationChangedEventArgs(result.Valid, result.Errors);
+        this.ValidationChanged.emit(args);
+        return args;
+    }
+    /** Adds a task. Returns the new task, or null when a host vetoed it. */
+    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 ?? '',
+            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);
+        this.BeforeTaskAdded.emit(before);
+        if (before.Cancel)
+            return null;
+        this.commit(AddTask(this.currentSpec, task), 'TaskAdded');
+        this.AfterTaskAdded.emit(new AfterTaskAddedEventArgs(task, this.currentSpec));
+        return task;
+    }
+    /** Removes a task and every edge into it. Returns false when a host vetoed it. */
+    RemoveTask(tempId) {
+        if (this.ReadOnly || !this.currentSpec)
+            return false;
+        const task = this.findTask(tempId);
+        if (!task)
+            return false;
+        // The blast radius travels with the event: a host deciding whether to veto needs to know
+        // what else breaks, not merely which box was clicked.
+        const before = new BeforeTaskRemovedEventArgs(task, GetDependents(this.currentSpec, tempId));
+        this.BeforeTaskRemoved.emit(before);
+        if (before.Cancel)
+            return false;
+        this.commit(RemoveTask(this.currentSpec, tempId), 'TaskRemoved');
+        if (this.SelectedTask?.tempId === tempId)
+            this.selectTask(null);
+        this.AfterTaskRemoved.emit(new AfterTaskRemovedEventArgs(task, this.currentSpec));
+        return true;
+    }
+    /** Replaces a task's properties. Returns false when a host vetoed it. */
+    UpdateTask(tempId, next) {
+        if (this.ReadOnly || !this.currentSpec)
+            return false;
+        const previous = this.findTask(tempId);
+        if (!previous)
+            return false;
+        const before = new BeforeTaskUpdatedEventArgs(previous, next);
+        this.BeforeTaskUpdated.emit(before);
+        if (before.Cancel)
+            return false;
+        this.commit(UpdateTask(this.currentSpec, tempId, next), 'TaskUpdated');
+        if (this.SelectedTask?.tempId === tempId)
+            this.SelectedTask = next;
+        this.AfterTaskUpdated.emit(new AfterTaskUpdatedEventArgs(next, this.currentSpec));
+        return true;
+    }
+    /**
+     * Adds a dependency edge. Returns false when it was vetoed **or would create a cycle**.
+     *
+     * The cycle is refused unconditionally, not merely reported: a cyclic graph can never execute —
+     * nothing would ever become eligible — so allowing the canvas to draw one would let a user build
+     * something the engine must then reject. Better to refuse the stroke than to accept a graph that
+     * cannot run.
+     */
+    AddDependency(fromTempId, toTempId, condition) {
+        if (this.ReadOnly || !this.currentSpec)
+            return false;
+        const cycle = WouldCreateCycle(this.currentSpec, fromTempId, toTempId);
+        const before = new BeforeDependencyAddedEventArgs(fromTempId, toTempId, cycle);
+        this.BeforeDependencyAdded.emit(before);
+        if (before.Cancel || cycle)
+            return false;
+        this.commit(AddDependency(this.currentSpec, fromTempId, toTempId, condition), 'DependencyAdded');
+        this.AfterDependencyAdded.emit(new AfterDependencyAddedEventArgs(fromTempId, toTempId, this.currentSpec));
+        return true;
+    }
+    /** Removes a dependency edge. Returns false when a host vetoed it. */
+    RemoveDependency(fromTempId, toTempId) {
+        if (this.ReadOnly || !this.currentSpec)
+            return false;
+        const before = new BeforeDependencyRemovedEventArgs(fromTempId, toTempId);
+        this.BeforeDependencyRemoved.emit(before);
+        if (before.Cancel)
+            return false;
+        this.commit(RemoveDependency(this.currentSpec, fromTempId, toTempId), 'DependencyRemoved');
+        this.AfterDependencyRemoved.emit(new AfterDependencyRemovedEventArgs(fromTempId, toTempId, this.currentSpec));
+        return true;
+    }
+    /**
+     * Sets — or with an empty string, clears — a dependency edge's condition.
+     *
+     * Implemented as remove-then-add so it travels the same `Before*`/`After*` path as any other
+     * edge change. A separate silent mutation would be a second write path into the spec, and the
+     * veto contract would then be right in one place and wrong in the other.
+     */
+    SetDependencyCondition(fromTempId, toTempId, condition) {
+        if (this.ReadOnly || !this.currentSpec)
+            return false;
+        if (!this.RemoveDependency(fromTempId, toTempId))
+            return false;
+        return this.AddDependency(fromTempId, toTempId, condition.trim() || undefined);
+    }
+    /** Asks the host to open the agent behind a task. */
+    RequestAgentOpen(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. */
+    RequestRecordOpen(entityName, recordID) {
+        this.RecordOpenRequested.emit(new RecordOpenRequestedEventArgs(entityName, recordID));
+    }
+    // ── Canvas handlers ──────────────────────────────────────────────────────
+    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);
+    }
+    OnConnectionRemoved(connection) {
+        this.RemoveDependency(connection.SourceNodeID, connection.TargetNodeID);
+    }
+    OnNodeRemoved(node) {
+        this.RemoveTask(node.ID);
+    }
+    // ── Internals ────────────────────────────────────────────────────────────
+    findTask(tempId) {
+        return (this.currentSpec?.tasks ?? []).find((t) => t.tempId === tempId) ?? null;
+    }
+    selectTask(task) {
+        this.SelectedTask = task;
+        this.SelectionChanged.emit(new TaskGraphSelectionChangedEventArgs(task));
+    }
+    /** Applies a new spec, re-projects, re-validates, and tells the host — in that order. */
+    commit(spec, reason) {
+        this.currentSpec = spec;
+        this.project();
+        this.SpecChanged.emit(new TaskGraphSpecChangedEventArgs(spec, reason));
+    }
+    /** Re-derives the canvas from the spec. Validation rides along so the two never disagree. */
+    project() {
+        if (!this.currentSpec) {
+            this.Nodes = [];
+            this.Connections = [];
+            this.ValidationErrors = [];
+            this.IsValid = true;
+            this.hasLaidOut = false;
+            this.knownPositions.clear();
+            return;
+        }
+        this.Nodes = SpecToNodes(this.currentSpec, this.currentRuntime ?? undefined, this.knownPositions);
+        this.Connections = SpecToConnections(this.currentSpec);
+        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 });
+    }
+    /** 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;
+    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"]], 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", ShowPalette: "ShowPalette", ShowMinimap: "ShowMinimap", ShowStatusBar: "ShowStatusBar", AutoLayoutDirection: "AutoLayoutDirection", ShowProperties: "ShowProperties", AvailableAgentNames: "AvailableAgentNames", AvailableActionNames: "AvailableActionNames", 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", "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", "Nodes", "Connections", "NodeTypes", "ReadOnly", "ShowToolbar", "ShowPalette", "ShowMinimap", "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, 5, 12);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsEmpty && ctx.ReadOnly ? 1 : 2);
+        } }, dependencies: [i1.FlowEditorComponent, i2.MJEmptyStateComponent, i2.MJAlertComponent, i3.TaskGraphPropertiesPanelComponent], 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__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  <!-- 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        [ShowPalette]=\"ShowPalette && !ReadOnly\"\n        [ShowMinimap]=\"ShowMinimap\"\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      </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.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
+        }], ShowPalette: [{
+            type: Input
+        }], ShowMinimap: [{
+            type: Input
+        }], ShowStatusBar: [{
+            type: Input
+        }], AutoLayoutDirection: [{
+            type: Input
+        }], ShowProperties: [{
+            type: Input
+        }], AvailableAgentNames: [{
+            type: Input
+        }], AvailableActionNames: [{
+            type: Input
+        }], EmptyStateMessage: [{
+            type: Input
+        }], BeforeTaskAdded: [{
+            type: Output
+        }], AfterTaskAdded: [{
+            type: Output
+        }], BeforeTaskRemoved: [{
+            type: Output
+        }], AfterTaskRemoved: [{
+            type: Output
+        }], BeforeTaskUpdated: [{
+            type: Output
+        }], AfterTaskUpdated: [{
+            type: Output
+        }], BeforeDependencyAdded: [{
+            type: Output
+        }], AfterDependencyAdded: [{
+            type: Output
+        }], BeforeDependencyRemoved: [{
+            type: Output
+        }], AfterDependencyRemoved: [{
+            type: Output
+        }], SpecChanged: [{
+            type: Output
+        }], SelectionChanged: [{
+            type: Output
+        }], ValidationChanged: [{
+            type: Output
+        }], AgentOpenRequested: [{
+            type: Output
+        }], RecordOpenRequested: [{
+            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: 92 }); })();
+//# sourceMappingURL=task-graph-editor.component.js.map