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

package/dist/lib/task-graph-editor.component.d.ts

@@ -24,14 +24,16 @@
  *
  * @module @memberjunction/ng-task-graph-editor
  */
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnDestroy } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { type TaskGraphSpec, type TaskGraphSpecNode, type TaskGraphValidationError } from '@memberjunction/ai-core-plus';
-import type { FlowConnection, FlowConnectionCreatedEvent, FlowLayoutDirection, FlowNode, FlowNodeTypeConfig } from '@memberjunction/ng-flow-editor';
+import { FlowEditorComponent } from '@memberjunction/ng-flow-editor';
+import type { FlowConnection, FlowConnectionCreatedEvent, FlowLayoutDirection, FlowNode, FlowNodeAddedEvent, FlowNodeMovedEvent, FlowNodeTypeConfig, FlowPosition } from '@memberjunction/ng-flow-editor';
 import { type TaskGraphRuntimeStatus } from './task-graph-canvas-adapter';
+import type { DependencyConditionChangeRequestedEventArgs, TaskPropertyChangeRequestedEventArgs } from './task-graph-properties-panel.component';
 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";
-export declare class TaskGraphEditorComponent extends BaseAngularComponent {
+export declare class TaskGraphEditorComponent extends BaseAngularComponent implements OnDestroy {
     /**
      * 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
@@ -46,6 +48,22 @@ export declare class TaskGraphEditorComponent extends BaseAngularComponent {
      */
     set RuntimeStatus(value: TaskGraphRuntimeStatus | null);
     get RuntimeStatus(): TaskGraphRuntimeStatus | null;
+    /**
+     * 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: ReadonlyMap<string, FlowPosition> | null);
     /** Read-only mode. The same component is the viewer — there is no second, weaker renderer. */
     ReadOnly: boolean;
     ShowToolbar: boolean;
@@ -53,6 +71,22 @@ export declare class TaskGraphEditorComponent extends BaseAngularComponent {
     ShowMinimap: boolean;
     ShowStatusBar: boolean;
     AutoLayoutDirection: FlowLayoutDirection;
+    /**
+     * 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: boolean;
+    /**
+     * 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: readonly string[];
+    /** Action names offered when assigning a step. Same ownership rule as `AvailableAgentNames`. */
+    AvailableActionNames: readonly string[];
     /** Shown when there is nothing to draw yet. */
     EmptyStateMessage: string;
     BeforeTaskAdded: EventEmitter<BeforeTaskAddedEventArgs>;
@@ -78,6 +112,7 @@ export declare class TaskGraphEditorComponent extends BaseAngularComponent {
     SelectedTask: TaskGraphSpecNode | null;
     ValidationErrors: readonly TaskGraphValidationError[];
     IsValid: boolean;
+    protected canvas: FlowEditorComponent | undefined;
     private currentSpec;
     private currentRuntime;
     get IsEmpty(): boolean;
@@ -113,6 +148,25 @@ export declare class TaskGraphEditorComponent extends BaseAngularComponent {
     /** Asks the host to open a record the graph references. */
     RequestRecordOpen(entityName: string, recordID: string): void;
     OnNodeSelected(node: FlowNode | null): void;
+    /**
+     * 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: FlowNodeAddedEvent): void;
+    /** Applies a properties-panel edit through the same vetoable path a canvas edit takes. */
+    OnTaskPropertyChangeRequested(args: TaskPropertyChangeRequestedEventArgs): void;
+    /** Applies a properties-panel edge-condition edit. */
+    OnDependencyConditionChangeRequested(args: DependencyConditionChangeRequestedEventArgs): void;
     OnConnectionCreated(event: FlowConnectionCreatedEvent): void;
     OnConnectionRemoved(connection: FlowConnection): void;
     OnNodeRemoved(node: FlowNode): void;
@@ -122,7 +176,55 @@ export declare class TaskGraphEditorComponent extends BaseAngularComponent {
     private commit;
     /** Re-derives the canvas from the spec. Validation rides along so the two never disagree. */
     private project;
+    /**
+     * 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.
+     */
+    private arrangeIfNeverLaidOut;
+    /**
+     * 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.
+     */
+    private zoomToFitSoon;
+    /**
+     * 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: FlowNode[]): void;
+    /** A single node was dragged. Same authority, narrower event. */
+    OnNodeMoved(event: FlowNodeMovedEvent): void;
+    ngOnDestroy(): void;
+    /** 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.
+     */
+    private readonly knownPositions;
+    /** Whether the one-time Dagre pass has run (or been made unnecessary by a hand-placed node). */
+    private hasLaidOut;
+    private pendingLayout;
     static ɵfac: i0.ɵɵFactoryDeclaration<TaskGraphEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TaskGraphEditorComponent, "mj-task-graph-editor", never, { "Spec": { "alias": "Spec"; "required": false; }; "RuntimeStatus": { "alias": "RuntimeStatus"; "required": false; }; "ReadOnly": { "alias": "ReadOnly"; "required": false; }; "ShowToolbar": { "alias": "ShowToolbar"; "required": false; }; "ShowPalette": { "alias": "ShowPalette"; "required": false; }; "ShowMinimap": { "alias": "ShowMinimap"; "required": false; }; "ShowStatusBar": { "alias": "ShowStatusBar"; "required": false; }; "AutoLayoutDirection": { "alias": "AutoLayoutDirection"; "required": false; }; "EmptyStateMessage": { "alias": "EmptyStateMessage"; "required": false; }; }, { "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"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TaskGraphEditorComponent, "mj-task-graph-editor", never, { "Spec": { "alias": "Spec"; "required": false; }; "RuntimeStatus": { "alias": "RuntimeStatus"; "required": false; }; "NodePositions": { "alias": "NodePositions"; "required": false; }; "ReadOnly": { "alias": "ReadOnly"; "required": false; }; "ShowToolbar": { "alias": "ShowToolbar"; "required": false; }; "ShowPalette": { "alias": "ShowPalette"; "required": false; }; "ShowMinimap": { "alias": "ShowMinimap"; "required": false; }; "ShowStatusBar": { "alias": "ShowStatusBar"; "required": false; }; "AutoLayoutDirection": { "alias": "AutoLayoutDirection"; "required": false; }; "ShowProperties": { "alias": "ShowProperties"; "required": false; }; "AvailableAgentNames": { "alias": "AvailableAgentNames"; "required": false; }; "AvailableActionNames": { "alias": "AvailableActionNames"; "required": false; }; "EmptyStateMessage": { "alias": "EmptyStateMessage"; "required": false; }; }, { "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"; }, never, never, false, never>;
 }
 //# sourceMappingURL=task-graph-editor.component.d.ts.map

package/dist/lib/task-graph-editor.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"task-graph-editor.component.d.ts","sourceRoot":"","sources":["../../src/lib/task-graph-editor.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"task-graph-editor.component.d.ts","sourceRoot":"","sources":["../../src/lib/task-graph-editor.component.ts"],"names":[],"mappings":"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"}

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)); });
+    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.ɵɵ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 ───────────────────────────────────────────────────────────────
@@ -100,6 +124,31 @@ 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;
+        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;
@@ -107,6 +156,22 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
     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 ──────────────────────────────────────────────────────────────
@@ -130,10 +195,11 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
     // ── Rendered state ───────────────────────────────────────────────────────
     Nodes = [];
     Connections = [];
-    NodeTypes = TASK_GRAPH_NODE_TYPES;
+    NodeTypes = [...TASK_GRAPH_NODE_TYPES];
     SelectedTask = null;
     ValidationErrors = [];
     IsValid = true;
+    canvas;
     currentSpec = null;
     currentRuntime = null;
     get IsEmpty() {
@@ -160,13 +226,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 +332,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 +345,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,29 +420,125 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
             this.Connections = [];
             this.ValidationErrors = [];
             this.IsValid = true;
+            this.hasLaidOut = false;
+            this.knownPositions.clear();
             return;
         }
-        this.Nodes = SpecToNodes(this.currentSpec, this.currentRuntime ?? undefined);
+        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"]], 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", 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, 2, 10);
+            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 ? 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.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        [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: [{
@@ -338,6 +551,12 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
             type: Input
         }], AutoLayoutDirection: [{
             type: Input
+        }], ShowProperties: [{
+            type: Input
+        }], AvailableAgentNames: [{
+            type: Input
+        }], AvailableActionNames: [{
+            type: Input
         }], EmptyStateMessage: [{
             type: Input
         }], BeforeTaskAdded: [{
@@ -370,6 +589,9 @@ export class TaskGraphEditorComponent extends BaseAngularComponent {
             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: 80 }); })();
+(() => { (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