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

package/dist/lib/task-graph-run-view.component.js

@@ -16,14 +16,20 @@
  *
  * @module @memberjunction/ng-task-graph-editor
  */
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output, } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { LogError, RunView } from '@memberjunction/core';
+import { UUIDsEqual } from '@memberjunction/global';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { ToPaneSizePair } from './pane-split';
+import { TaskGraphRunPrefsStore } from './task-graph-run-prefs';
 import { GraphLayoutBounds, LayoutGraphNodes, ProjectTaskRowsToSpec, } from '@memberjunction/ai-core-plus';
-import { BuildRuntimeStatus } from './task-graph-runtime-source';
+import { BuildRuntimeStatus, IsRuntimeSettled, NormalizeRuntimeState } from './task-graph-runtime-source';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-ui-components";
-import * as i2 from "./task-graph-editor.component";
+import * as i2 from "angular-split";
+import * as i3 from "./task-graph-variables.component";
+import * as i4 from "./task-graph-editor.component";
 function TaskGraphRunViewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-alert", 0);
 } if (rf & 2) {
@@ -39,7 +45,7 @@ function TaskGraphRunViewComponent_Conditional_2_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelement(0, "mj-empty-state", 2);
 } }
 function TaskGraphRunViewComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵelementStart(0, "span", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -47,26 +53,114 @@ function TaskGraphRunViewComponent_Conditional_3_Conditional_4_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ctx_r0.SkippedCount, " not taken");
 } }
+function TaskGraphRunViewComponent_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 8);
+    i0.ɵɵtext(1, "Finished");
+    i0.ɵɵelementEnd();
+} }
+function TaskGraphRunViewComponent_Conditional_3_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵtextInterpolate1(" Waiting on ", ctx_r0.WaitingStepName, " ");
+} }
+function TaskGraphRunViewComponent_Conditional_3_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Waiting to start \u2014 Continue or Step ");
+} }
+function TaskGraphRunViewComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 9);
+    i0.ɵɵconditionalCreate(1, TaskGraphRunViewComponent_Conditional_3_Conditional_6_Conditional_1_Template, 1, 1)(2, TaskGraphRunViewComponent_Conditional_3_Conditional_6_Conditional_2_Template, 1, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.PausedAtTaskID ? 1 : 2);
+} }
+function TaskGraphRunViewComponent_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r0.RunningCount, " running");
+} }
+function TaskGraphRunViewComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function TaskGraphRunViewComponent_Conditional_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnToggleSelectedBreakpoint()); });
+    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 25);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("run-view-bp-on", ctx_r0.HasSelectedBreakpoint);
+    i0.ɵɵproperty("title", ctx_r0.HasSelectedBreakpoint ? "Remove breakpoint" : "Break before this step");
+    i0.ɵɵattribute("aria-pressed", ctx_r0.HasSelectedBreakpoint)("aria-label", ctx_r0.HasSelectedBreakpoint ? "Remove breakpoint from " + ctx_r0.SelectedTaskName : "Add breakpoint on " + ctx_r0.SelectedTaskName);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-solid", ctx_r0.HasSelectedBreakpoint)("fa-regular", !ctx_r0.HasSelectedBreakpoint);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.SelectedTaskName);
+} }
+function TaskGraphRunViewComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function TaskGraphRunViewComponent_Conditional_3_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnToggleInvocation()); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Data");
+    i0.ɵɵelementEnd()();
+} }
 function TaskGraphRunViewComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "span", 5);
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "span", 6);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, TaskGraphRunViewComponent_Conditional_3_Conditional_4_Template, 2, 1, "span", 6);
+    i0.ɵɵconditionalCreate(4, TaskGraphRunViewComponent_Conditional_3_Conditional_4_Template, 2, 1, "span", 7);
+    i0.ɵɵconditionalCreate(5, TaskGraphRunViewComponent_Conditional_3_Conditional_5_Template, 2, 0, "span", 8)(6, TaskGraphRunViewComponent_Conditional_3_Conditional_6_Template, 3, 1, "span", 9)(7, TaskGraphRunViewComponent_Conditional_3_Conditional_7_Template, 2, 1, "span", 10);
+    i0.ɵɵconditionalCreate(8, TaskGraphRunViewComponent_Conditional_3_Conditional_8_Template, 4, 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 11);
+    i0.ɵɵconditionalCreate(10, TaskGraphRunViewComponent_Conditional_3_Conditional_10_Template, 4, 0, "button", 12);
+    i0.ɵɵelementStart(11, "as-split", 13);
+    i0.ɵɵlistener("dragEnd", function TaskGraphRunViewComponent_Conditional_3_Template_as_split_dragEnd_11_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnInvocationSplitDragEnd($event.sizes)); });
+    i0.ɵɵelementStart(12, "as-split-area", 14)(13, "div", 15)(14, "div", 16)(15, "span");
+    i0.ɵɵtext(16, "Data");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 7)(6, "mj-task-graph-editor", 8);
-    i0.ɵɵlistener("SelectionChanged", function TaskGraphRunViewComponent_Conditional_3_Template_mj_task_graph_editor_SelectionChanged_6_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSelectionChanged($event)); });
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "button", 17);
+    i0.ɵɵlistener("click", function TaskGraphRunViewComponent_Conditional_3_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnToggleInvocation()); });
+    i0.ɵɵelement(18, "i", 18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(19, "mj-task-graph-variables", 19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "as-split-area", 20)(21, "div", 21)(22, "mj-task-graph-editor", 22);
+    i0.ɵɵlistener("SelectionChanged", function TaskGraphRunViewComponent_Conditional_3_Template_mj_task_graph_editor_SelectionChanged_22_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSelectionChanged($event)); })("ConnectionSelected", function TaskGraphRunViewComponent_Conditional_3_Template_mj_task_graph_editor_ConnectionSelected_22_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnConnectionSelected($event)); })("LegendToggled", function TaskGraphRunViewComponent_Conditional_3_Template_mj_task_graph_editor_LegendToggled_22_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.LegendToggled.emit($event)); })("BeforeContextMenu", function TaskGraphRunViewComponent_Conditional_3_Template_mj_task_graph_editor_BeforeContextMenu_22_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBeforeContextMenu($event)); })("AfterContextMenuAction", function TaskGraphRunViewComponent_Conditional_3_Template_mj_task_graph_editor_AfterContextMenuAction_22_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAfterContextMenuAction($event)); });
+    i0.ɵɵelementEnd()()()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("height", ctx_r0.Height);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate2("", ctx_r0.CompletedCount, " of ", ctx_r0.TotalCount, " complete");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.SkippedCount > 0 ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("height", ctx_r0.Height);
+    i0.ɵɵconditional(ctx_r0.IsSettled ? 5 : ctx_r0.GraphPaused ? 6 : ctx_r0.RunningCount > 0 ? 7 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.AllowBreakpointEditing && ctx_r0.SelectedTaskID ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.ShowVariables && !ctx_r0.Prefs.InvocationOpen ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("gutterSize", 8);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Spec", ctx_r0.Spec)("RuntimeStatus", ctx_r0.RuntimeStatus)("NodePositions", ctx_r0.Positions)("ReadOnly", true)("ShowToolbar", false)("ShowPalette", false)("ShowProperties", false)("ShowMinimap", false)("ShowStatusBar", false);
+    i0.ɵɵproperty("size", ctx_r0.InvocationPaneSize)("minSize", 14)("visible", ctx_r0.InvocationPaneOpen);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("InputPayload", ctx_r0.SelectedTask == null ? null : ctx_r0.SelectedTask.InputPayload)("OutputPayload", ctx_r0.SelectedTask == null ? null : ctx_r0.SelectedTask.OutputPayload)("Invocation", ctx_r0.Invocation);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r0.CanvasPaneSize)("minSize", 40);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Spec", ctx_r0.Spec)("RuntimeStatus", ctx_r0.RuntimeStatus)("NodePositions", ctx_r0.Positions)("DebugOverlay", ctx_r0.Overlay)("ReadOnly", true)("ShowToolbar", ctx_r0.ShowToolbar)("ToolbarVisibility", ctx_r0.ToolbarVisibility)("ToolbarAlign", ctx_r0.ToolbarAlign)("ShowPalette", false)("ShowProperties", false)("ShowMinimap", false)("ShowStatusBar", false)("ShowLegend", ctx_r0.ShowLegend);
 } }
 /** Statuses at which a graph has stopped moving, so polling can stop with it. */
 const SETTLED = new Set(['Complete', 'Failed', 'Cancelled', 'Skipped']);
@@ -82,6 +176,7 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
         if (value === this.parentTaskID)
             return;
         this.parentTaskID = value;
+        this.settledEmitted = false;
         void this.load();
     }
     get ParentTaskID() {
@@ -100,9 +195,136 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
     PollIntervalSeconds = 3;
     /** Height of the canvas. Hosts embed this in very different amounts of space. */
     Height = '320px';
+    /**
+     * Whether the canvas legend shows. **Off by default here**, unlike the editor.
+     *
+     * The legend explains the authoring vocabulary — what a conditional edge means, what a duplicate
+     * default looks like. That is what someone drawing a graph needs. A run view answers a different
+     * question, "what happened", which the legend helps with not at all while covering a corner of
+     * the canvas the graph is usually occupying.
+     */
+    ShowLegend = false;
+    /**
+     * Whether the canvas toolbar rides above the graph.
+     *
+     * Debug and other run hosts leave this on and set `ToolbarVisibility` to `minimized` so the
+     * graph is the picture, not a floating tool strip. The chip in the corner restores the bar.
+     */
+    ShowToolbar = true;
+    ToolbarVisibility = 'minimized';
+    ToolbarAlign = 'left';
+    /**
+     * The latest live dispatcher frame, handed in by the host.
+     *
+     * The host owns the subscription (`GraphQLDataProvider.TaskGraphFrames` or anything shaped like
+     * it) and binds each arrival here; the widget folds it into the overlay. Frames are advisory —
+     * a task frame patches the node's status in place for sub-second feedback, and the frames that
+     * imply CASCADES (a skip, a block, settlement) trigger a debounced row reload, because the
+     * dispatcher's propagation writes rows this component cannot infer from one frame. Rows remain
+     * the truth; the existing poll (if enabled) remains the safety net.
+     */
+    set LiveFrame(frame) {
+        if (!frame)
+            return;
+        this.foldFrame(frame);
+    }
+    /**
+     * Replay: render the run as it stood at this moment, reconstructed from each step's
+     * `StartedAt`/`CompletedAt`. Null (the default) renders the present. A step that had not
+     * started reads Pending; one mid-flight reads In Progress; one already finished reads its
+     * final status — the same three answers the rows would have given a viewer at that time.
+     */
+    set ReplayAt(value) {
+        if (value?.getTime() === this.replayAt?.getTime())
+            return;
+        this.replayAt = value;
+        this.applyReplay();
+    }
+    get ReplayAt() {
+        return this.replayAt;
+    }
+    /**
+     * Armed breakpoint task IDs, from the parent row's `$.debug.breakpoints`. Empty by default so
+     * embeds (agent-run timeline, test harness) never grow debugger chrome they did not ask for.
+     */
+    set Breakpoints(value) {
+        this.breakpoints = value ?? [];
+        this.rebuildOverlay();
+    }
+    get Breakpoints() {
+        return this.breakpoints;
+    }
+    /** The step a breakpoint actually stopped on. */
+    set PausedAtTaskID(value) {
+        this.pausedAtTaskID = value;
+        if (value)
+            this.SelectedTaskID = value;
+        this.rebuildOverlay();
+    }
+    get PausedAtTaskID() {
+        return this.pausedAtTaskID;
+    }
+    /**
+     * The graph is claim-gated. Combined with `PausedAtTaskID` so start-paused (no specific
+     * step yet) can still light the entry node as waiting.
+     */
+    set GraphPaused(value) {
+        this.graphPaused = value;
+        this.rebuildOverlay();
+    }
+    get GraphPaused() {
+        return this.graphPaused;
+    }
+    /** Operator-forced edge verdicts, keyed by `MJ: Task Dependencies` row ID. */
+    set EdgeOverrides(value) {
+        this.edgeOverrides = value ?? {};
+        this.rebuildOverlay();
+    }
+    get EdgeOverrides() {
+        return this.edgeOverrides;
+    }
+    /**
+     * Whether this host may arm/disarm breakpoints from the selected-step control.
+     * Off by default — the run view also renders where those controls would be wrong.
+     */
+    AllowBreakpointEditing = false;
+    /** Compact debug key under the summary line. Off unless the host is a debugger. */
+    ShowDebugLegend = false;
+    /** VS Code VARIABLES pane to the left of the canvas. Off unless the host is debugging. */
+    ShowVariables = false;
+    /** The parent bag's `data` / `context` roots, for the Invocation scope. */
+    Invocation = null;
     NodeSelected = new EventEmitter();
+    /** The legend was toggled from the toolbar, so a host can remember the choice. */
+    LegendToggled = new EventEmitter();
     /** Emitted once, when every step has reached a terminal status. */
     Settled = new EventEmitter();
+    /** A connection was clicked. `EdgeID` is the dependency row id when the projection carried one. */
+    ConnectionSelected = new EventEmitter();
+    /** Intent only — the host owns `SetBreakpoints`. */
+    BreakpointToggled = new EventEmitter();
+    /** Intent only — the host owns `OverrideEdge`. */
+    EdgeOverrideRequested = new EventEmitter();
+    /** What each running step says it is doing, from `NodeProgress` frames. Keyed by task row id. */
+    LiveActivity = new Map();
+    /** The last step the person selected, so the breakpoint control has a target. */
+    SelectedTaskID = null;
+    /** Stable overlay object — rebuilt only when debug inputs change, so the editor does not re-project every CD cycle. */
+    Overlay = { showConditions: true };
+    breakpoints = [];
+    pausedAtTaskID = null;
+    graphPaused = false;
+    edgeOverrides = {};
+    /** `Settled` is once-per-parent — a finished poll must not re-fire the host. */
+    settledEmitted = false;
+    /** Left data pane + split sizes. One JSON bag in `MJ: User Settings`. */
+    get Prefs() {
+        return this.prefsStore.Value;
+    }
+    prefsStore = new TaskGraphRunPrefsStore({
+        Get: () => undefined,
+        Set: () => { },
+    });
     Spec = null;
     RuntimeStatus = null;
     Positions = new Map();
@@ -111,25 +333,69 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
     /** Rows by id, so a selection event can hand the host the whole task rather than an id. */
     taskByID = new Map();
     parentTaskID = null;
+    replayAt = null;
     pollTimer = null;
+    frameReloadTimer = null;
     destroyed = false;
     constructor(cdr) {
         super();
         this.cdr = cdr;
+        try {
+            this.prefsStore = new TaskGraphRunPrefsStore({
+                Get: (key) => UserInfoEngine.Instance.GetSetting(key),
+                Set: (key, value) => UserInfoEngine.Instance.SetSettingDebounced(key, value),
+            });
+            this.prefsStore.Restore();
+        }
+        catch {
+            // Engine not configured yet (unit tests, pre-bootstrap) — keep the default.
+        }
+    }
+    get InvocationPaneOpen() {
+        return this.ShowVariables && this.Prefs.InvocationOpen;
+    }
+    get InvocationPaneSize() {
+        return this.InvocationPaneOpen ? this.Prefs.InvocationSplit[0] : 0;
+    }
+    get CanvasPaneSize() {
+        return this.InvocationPaneOpen ? this.Prefs.InvocationSplit[1] : 100;
+    }
+    OnToggleInvocation() {
+        this.prefsStore.SetInvocationOpen(!this.Prefs.InvocationOpen);
+        this.cdr.markForCheck();
+    }
+    OnInvocationSplitDragEnd(sizes) {
+        const pair = ToPaneSizePair(sizes);
+        if (!pair)
+            return;
+        this.prefsStore.SetInvocationSplit(pair);
+        this.cdr.markForCheck();
     }
     ngOnDestroy() {
         this.destroyed = true;
         this.stopPolling();
+        if (this.frameReloadTimer) {
+            clearTimeout(this.frameReloadTimer);
+            this.frameReloadTimer = null;
+        }
     }
-    /** Steps in a terminal state, for the host's summary line. */
+    /** Steps in a terminal state, for the host's summary line. Uses the same map the canvas paints. */
     get CompletedCount() {
-        return [...this.taskByID.values()].filter((t) => t.Status === 'Complete').length;
+        return this.countRuntime('Complete');
     }
     get TotalCount() {
-        return this.taskByID.size;
+        return this.Spec?.tasks.length ?? this.taskByID.size;
     }
     get SkippedCount() {
-        return [...this.taskByID.values()].filter((t) => t.Status === 'Skipped').length;
+        return this.countRuntime('Skipped');
+    }
+    get RunningCount() {
+        return this.countRuntime('In Progress');
+    }
+    get IsSettled() {
+        if (!this.Spec || this.Spec.tasks.length === 0)
+            return false;
+        return IsRuntimeSettled(this.RuntimeStatus ?? {}, this.Spec.tasks.map((t) => t.tempId));
     }
     /**
      * A node was selected on the canvas.
@@ -142,7 +408,142 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
         const tempId = args?.Task?.tempId;
         if (!tempId)
             return;
+        this.SelectedTaskID = tempId;
         this.NodeSelected.emit({ TaskID: tempId, Task: this.taskByID.get(tempId) ?? null });
+        this.cdr.markForCheck();
+    }
+    OnConnectionSelected(connection) {
+        if (!connection) {
+            this.ConnectionSelected.emit({ EdgeID: null, FromTaskID: '', ToTaskID: '' });
+            return;
+        }
+        const data = connection.Data ?? {};
+        const edgeID = typeof data['EdgeID'] === 'string' ? data['EdgeID'] : null;
+        const from = typeof data['FromTempId'] === 'string' ? data['FromTempId'] : connection.SourceNodeID;
+        const to = typeof data['ToTempId'] === 'string' ? data['ToTempId'] : connection.TargetNodeID;
+        this.ConnectionSelected.emit({
+            EdgeID: edgeID,
+            FromTaskID: from,
+            ToTaskID: to,
+            Condition: connection.Condition,
+        });
+    }
+    countRuntime(state) {
+        if (!this.RuntimeStatus) {
+            return [...this.taskByID.values()].filter((t) => NormalizeRuntimeState(t.Status) === state).length;
+        }
+        return Object.values(this.RuntimeStatus).filter((s) => s === state).length;
+    }
+    get HasSelectedBreakpoint() {
+        return !!this.SelectedTaskID && this.hasBreakpoint(this.SelectedTaskID);
+    }
+    get SelectedTaskName() {
+        if (!this.SelectedTaskID)
+            return '';
+        return this.taskByID.get(this.SelectedTaskID)?.Name ?? 'this step';
+    }
+    get WaitingStepName() {
+        if (this.pausedAtTaskID) {
+            return this.taskByID.get(this.pausedAtTaskID)?.Name
+                ?? this.Spec?.tasks.find((t) => t.tempId === this.pausedAtTaskID)?.name
+                ?? 'this step';
+        }
+        const entry = this.Spec?.tasks.find((t) => (t.dependsOn?.length ?? 0) === 0);
+        return entry?.name ?? 'the first step';
+    }
+    get SelectedTask() {
+        return this.SelectedTaskID ? this.taskByID.get(this.SelectedTaskID) ?? null : null;
+    }
+    OnToggleSelectedBreakpoint() {
+        if (!this.AllowBreakpointEditing || !this.SelectedTaskID)
+            return;
+        this.BreakpointToggled.emit({
+            TaskID: this.SelectedTaskID,
+            Enabled: !this.HasSelectedBreakpoint,
+        });
+    }
+    /** Debug attaches here: replace Edit/Remove with breakpoint / path-override items. */
+    OnBeforeContextMenu(event) {
+        if (!this.AllowBreakpointEditing) {
+            event.Cancel = true;
+            return;
+        }
+        if (event.Target === 'node' && event.Node) {
+            const on = this.hasBreakpoint(event.Node.ID);
+            event.Items = [{
+                    ID: 'toggle-breakpoint',
+                    Label: on ? 'Remove Breakpoint' : 'Add Breakpoint',
+                    Icon: 'fa-circle',
+                    Shortcut: 'F9',
+                }];
+            return;
+        }
+        if (event.Target === 'connection' && event.Connection?.Condition?.trim()) {
+            const edgeID = typeof event.Connection.Data?.['EdgeID'] === 'string'
+                ? event.Connection.Data['EdgeID']
+                : null;
+            if (!edgeID) {
+                event.Cancel = true;
+                return;
+            }
+            event.Items = [
+                { ID: 'force-true', Label: 'Take this path', Icon: 'fa-check' },
+                { ID: 'force-false', Label: 'Skip this path', Icon: 'fa-xmark' },
+                { ID: 'force-clear', Label: 'Clear override', Icon: 'fa-rotate-left' },
+            ];
+            return;
+        }
+        event.Cancel = true;
+    }
+    OnAfterContextMenuAction(event) {
+        if (event.ActionID === 'toggle-breakpoint' && event.Node) {
+            this.BreakpointToggled.emit({
+                TaskID: event.Node.ID,
+                Enabled: !this.hasBreakpoint(event.Node.ID),
+            });
+            return;
+        }
+        const edgeID = typeof event.Connection?.Data?.['EdgeID'] === 'string'
+            ? event.Connection.Data['EdgeID']
+            : null;
+        if (!edgeID)
+            return;
+        if (event.ActionID === 'force-true')
+            this.EdgeOverrideRequested.emit({ EdgeID: edgeID, Verdict: 'true' });
+        if (event.ActionID === 'force-false')
+            this.EdgeOverrideRequested.emit({ EdgeID: edgeID, Verdict: 'false' });
+        if (event.ActionID === 'force-clear')
+            this.EdgeOverrideRequested.emit({ EdgeID: edgeID, Verdict: null });
+    }
+    hasBreakpoint(taskID) {
+        return this.breakpoints.some((id) => UUIDsEqual(id, taskID));
+    }
+    OnDebugHotkey(event) {
+        if (!this.AllowBreakpointEditing)
+            return;
+        if (isTypingTarget(event.target))
+            return;
+        if (event.key === 'F9') {
+            event.preventDefault();
+            this.OnToggleSelectedBreakpoint();
+        }
+    }
+    rebuildOverlay() {
+        this.Overlay = {
+            breakpoints: this.breakpoints,
+            // A finished graph is not "paused here" — the durable bag can still name the last
+            // breakpoint after every step is terminal.
+            pausedAtTaskID: this.IsSettled ? null : this.pausedAtTaskID,
+            paused: !this.IsSettled && this.graphPaused,
+            edgeOverrides: this.edgeOverrides,
+            showConditions: true,
+        };
+    }
+    emitSettledOnce() {
+        if (this.settledEmitted || !this.IsSettled)
+            return;
+        this.settledEmitted = true;
+        this.Settled.emit();
     }
     /**
      * Reads the graph and projects it onto the canvas.
@@ -194,10 +595,10 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
             const taskRows = (tasks.Results ?? []);
             const depRows = (deps.Success ? (deps.Results ?? []) : []);
             this.project(taskRows, depRows);
+            this.rebuildOverlay();
+            this.emitSettledOnce();
             if (this.LiveUpdates && !this.isSettled(taskRows))
                 this.schedulePoll();
-            else if (taskRows.length > 0)
-                this.Settled.emit();
         }
         catch (e) {
             this.fail(e instanceof Error ? e.message : String(e));
@@ -216,9 +617,37 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
         // case where an id match is exact. Name correlation exists for specs whose tempIds were
         // never real, and would be needlessly lossy here.
         const knownIDs = new Set(taskRows.map((t) => t.ID));
-        this.RuntimeStatus = BuildRuntimeStatus(taskRows, new Map(), knownIDs);
+        this.RuntimeStatus = this.replayAt
+            ? this.statusAt(this.replayAt)
+            : BuildRuntimeStatus(taskRows, new Map(), knownIDs);
         this.Positions = this.resolvePositions(projection.AuthoredPositions, taskRows, depRows);
     }
+    /** Re-derives the overlay for the current replay position (or the present) from held rows. */
+    applyReplay() {
+        if (this.taskByID.size === 0)
+            return;
+        const rows = [...this.taskByID.values()];
+        this.RuntimeStatus = this.replayAt
+            ? this.statusAt(this.replayAt)
+            : BuildRuntimeStatus(rows, new Map(), new Set(rows.map((t) => t.ID)));
+        this.cdr.markForCheck();
+    }
+    /** The overlay as it stood at `moment`, from each row's own timestamps. */
+    statusAt(moment) {
+        const at = moment.getTime();
+        const status = {};
+        for (const [id, row] of this.taskByID) {
+            const started = row.StartedAt?.getTime?.() ?? (row.StartedAt ? new Date(row.StartedAt).getTime() : null);
+            const completed = row.CompletedAt?.getTime?.() ?? (row.CompletedAt ? new Date(row.CompletedAt).getTime() : null);
+            if (started == null || started > at)
+                status[id] = 'Pending';
+            else if (completed == null || completed > at)
+                status[id] = 'In Progress';
+            else
+                status[id] = NormalizeRuntimeState(row.Status);
+        }
+        return status;
+    }
     /**
      * The author's arrangement where there is one, a computed layout everywhere else.
      *
@@ -241,6 +670,67 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
     isSettled(taskRows) {
         return taskRows.length > 0 && taskRows.every((t) => SETTLED.has(t.Status));
     }
+    /**
+     * Folds one live frame into the overlay.
+     *
+     * Direct status frames patch in place — a new `RuntimeStatus` object, because the canvas is
+     * OnPush and mutation would render nothing. Frames whose consequences the dispatcher computes
+     * across the whole graph (skips cascade, blocks propagate, settlement rolls up) reload the rows
+     * instead: inferring a cascade client-side would be a second implementation of the engine's
+     * rules, free to drift.
+     */
+    foldFrame(frame) {
+        switch (frame.kind) {
+            case 'TaskStarted':
+            case 'TaskCompleted':
+            case 'TaskFailed':
+                if (frame.taskId && frame.status && this.RuntimeStatus) {
+                    const row = this.taskByID.get(frame.taskId);
+                    if (row)
+                        row.Status = frame.status;
+                    this.RuntimeStatus = { ...this.RuntimeStatus, [frame.taskId]: NormalizeRuntimeState(frame.status) };
+                    if (frame.kind !== 'TaskStarted')
+                        this.LiveActivity.delete(frame.taskId);
+                    this.rebuildOverlay();
+                    this.emitSettledOnce();
+                    this.cdr.markForCheck();
+                }
+                break;
+            case 'NodeProgress':
+                if (frame.taskId && frame.progressMessage) {
+                    this.LiveActivity.set(frame.taskId, { Message: frame.progressMessage, Percent: frame.progressPercent });
+                    this.cdr.markForCheck();
+                }
+                break;
+            case 'GraphSettled':
+                this.scheduleFrameReload();
+                // The engine said the graph is done — do not wait for the row reload to tell the host.
+                if (!this.settledEmitted) {
+                    this.settledEmitted = true;
+                    this.Settled.emit();
+                }
+                break;
+            case 'TaskSkipped':
+            case 'TaskBlocked':
+            case 'TaskAwaitingHuman':
+            case 'GraphResumed':
+                this.scheduleFrameReload();
+                break;
+            default:
+                // GateDecision / ClaimChanged / PassCompleted / GraphPaused / BreakpointHit are
+                // console-chrome concerns the HOST renders; unknown kinds are a newer server.
+                break;
+        }
+    }
+    /** One reload per burst of cascade frames, not one per frame. */
+    scheduleFrameReload() {
+        if (this.frameReloadTimer)
+            return;
+        this.frameReloadTimer = setTimeout(() => {
+            this.frameReloadTimer = null;
+            void this.load();
+        }, 250);
+    }
     schedulePoll() {
         this.pollTimer = setTimeout(() => void this.load(), Math.max(1, this.PollIntervalSeconds) * 1000);
     }
@@ -261,15 +751,17 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
         return { Width: box.Width, Height: box.Height };
     }
     static ɵfac = function TaskGraphRunViewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TaskGraphRunViewComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TaskGraphRunViewComponent, selectors: [["mj-task-graph-run-view"]], inputs: { ParentTaskID: "ParentTaskID", WorkflowName: "WorkflowName", LiveUpdates: "LiveUpdates", PollIntervalSeconds: "PollIntervalSeconds", Height: "Height" }, outputs: { NodeSelected: "NodeSelected", Settled: "Settled" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 1, consts: [["Variant", "error", 3, "Message"], [1, "run-view-loading"], ["Icon", "fa-solid fa-diagram-project", "Title", "No steps yet", "Message", "This workflow has not created any steps."], [1, "run-view"], [1, "run-view-summary"], [1, "run-view-count"], [1, "run-view-skipped"], [1, "run-view-canvas"], [3, "SelectionChanged", "Spec", "RuntimeStatus", "NodePositions", "ReadOnly", "ShowToolbar", "ShowPalette", "ShowProperties", "ShowMinimap", "ShowStatusBar"]], template: function TaskGraphRunViewComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, TaskGraphRunViewComponent_Conditional_0_Template, 1, 1, "mj-alert", 0)(1, TaskGraphRunViewComponent_Conditional_1_Template, 2, 0, "div", 1)(2, TaskGraphRunViewComponent_Conditional_2_Template, 1, 0, "mj-empty-state", 2)(3, TaskGraphRunViewComponent_Conditional_3_Template, 7, 14, "div", 3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TaskGraphRunViewComponent, selectors: [["mj-task-graph-run-view"]], hostBindings: function TaskGraphRunViewComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function TaskGraphRunViewComponent_keydown_HostBindingHandler($event) { return ctx.OnDebugHotkey($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { ParentTaskID: "ParentTaskID", WorkflowName: "WorkflowName", LiveUpdates: "LiveUpdates", PollIntervalSeconds: "PollIntervalSeconds", Height: "Height", ShowLegend: "ShowLegend", ShowToolbar: "ShowToolbar", ToolbarVisibility: "ToolbarVisibility", ToolbarAlign: "ToolbarAlign", LiveFrame: "LiveFrame", ReplayAt: "ReplayAt", Breakpoints: "Breakpoints", PausedAtTaskID: "PausedAtTaskID", GraphPaused: "GraphPaused", EdgeOverrides: "EdgeOverrides", AllowBreakpointEditing: "AllowBreakpointEditing", ShowDebugLegend: "ShowDebugLegend", ShowVariables: "ShowVariables", Invocation: "Invocation" }, outputs: { NodeSelected: "NodeSelected", LegendToggled: "LegendToggled", Settled: "Settled", ConnectionSelected: "ConnectionSelected", BreakpointToggled: "BreakpointToggled", EdgeOverrideRequested: "EdgeOverrideRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 1, consts: [["Variant", "error", 3, "Message"], [1, "run-view-loading"], ["Icon", "fa-solid fa-diagram-project", "Title", "No steps yet", "Message", "This workflow has not created any steps."], [1, "run-view", 3, "height"], [1, "run-view"], [1, "run-view-summary"], [1, "run-view-count"], [1, "run-view-skipped"], [1, "run-view-done"], [1, "run-view-waiting"], [1, "run-view-running"], [1, "run-view-body"], ["type", "button", "title", "Show invocation and output", "aria-label", "Show invocation and output", 1, "run-view-vars-rail"], ["direction", "horizontal", "unit", "percent", 1, "run-view-split", 3, "dragEnd", "gutterSize"], [3, "size", "minSize", "visible"], [1, "run-view-vars"], [1, "run-view-vars-bar"], ["type", "button", "title", "Minimize", "aria-label", "Minimize invocation and output", 1, "run-view-vars-min", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-left"], [3, "InputPayload", "OutputPayload", "Invocation"], [3, "size", "minSize"], [1, "run-view-canvas"], [3, "SelectionChanged", "ConnectionSelected", "LegendToggled", "BeforeContextMenu", "AfterContextMenuAction", "Spec", "RuntimeStatus", "NodePositions", "DebugOverlay", "ReadOnly", "ShowToolbar", "ToolbarVisibility", "ToolbarAlign", "ShowPalette", "ShowProperties", "ShowMinimap", "ShowStatusBar", "ShowLegend"], ["type", "button", 1, "run-view-bp", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-circle"], [1, "run-view-bp-name"], ["type", "button", "title", "Show invocation and output", "aria-label", "Show invocation and output", 1, "run-view-vars-rail", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-code"]], template: function TaskGraphRunViewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, TaskGraphRunViewComponent_Conditional_0_Template, 1, 1, "mj-alert", 0)(1, TaskGraphRunViewComponent_Conditional_1_Template, 2, 0, "div", 1)(2, TaskGraphRunViewComponent_Conditional_2_Template, 1, 0, "mj-empty-state", 2)(3, TaskGraphRunViewComponent_Conditional_3_Template, 23, 30, "div", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.ErrorMessage ? 0 : ctx.IsLoading ? 1 : !ctx.Spec || ctx.Spec.tasks.length === 0 ? 2 : 3);
-        } }, dependencies: [i1.MJEmptyStateComponent, i1.MJAlertComponent, i2.TaskGraphEditorComponent], styles: ["[_nghost-%COMP%] { display: block; }\n\n.run-view[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: var(--mj-space-2); }\n\n.run-view-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n}\n\n.run-view-count[_ngcontent-%COMP%] { font-weight: 500; }\n\n\n\n\n.run-view-skipped[_ngcontent-%COMP%] { color: var(--mj-text-tertiary); }\n\n.run-view-canvas[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.run-view-loading[_ngcontent-%COMP%] {\n  padding: var(--mj-space-4);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-sm);\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.MJEmptyStateComponent, i1.MJAlertComponent, i2.SplitComponent, i2.SplitAreaComponent, i3.TaskGraphVariablesComponent, i4.TaskGraphEditorComponent], styles: ["\n\n\n[_nghost-%COMP%] { display: block; height: 100%; min-height: 0; }\n\n.run-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  height: 100%;\n  min-height: 0;\n}\n\n.run-view-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n}\n\n.run-view-count[_ngcontent-%COMP%] { font-weight: 500; }\n\n\n\n\n.run-view-skipped[_ngcontent-%COMP%] { color: var(--mj-text-tertiary); }\n.run-view-running[_ngcontent-%COMP%] { color: var(--mj-brand-primary); font-weight: 600; }\n.run-view-waiting[_ngcontent-%COMP%] { color: var(--mj-brand-primary); font-weight: 700; }\n.run-view-done[_ngcontent-%COMP%] { color: var(--mj-status-success); font-weight: 600; }\n\n.run-view-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  min-width: 0;\n}\n\n.run-view-vars-rail[_ngcontent-%COMP%] {\n  flex: 0 0 28px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.run-view-vars-rail[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n.run-view-vars-rail[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-size: var(--mj-font-size-xs);\n  font-weight: 700;\n}\n.run-view-vars-rail[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; }\n\n.run-view-split[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  min-width: 0;\n}\n\n[_nghost-%COMP%]     .run-view-split > .as-split-gutter {\n  background: transparent;\n}\n[_nghost-%COMP%]     .run-view-split > .as-split-gutter::after {\n  content: '';\n  display: block;\n  margin: auto;\n  background: var(--mj-border-default);\n  border-radius: 1px;\n}\n[_nghost-%COMP%]     .run-view-split.as-horizontal > .as-split-gutter::after {\n  width: 3px;\n  height: 32px;\n}\n[_nghost-%COMP%]     .run-view-split > .as-split-gutter:hover::after {\n  background: var(--mj-brand-primary);\n}\n[_nghost-%COMP%]     .run-view-split > .as-split-area {\n  overflow: hidden;\n}\n\n\n\n\n\n.run-view-canvas[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.run-view-vars[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  min-width: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n.run-view-vars-bar[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: 4px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-xs);\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.run-view-vars-min[_ngcontent-%COMP%] {\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.run-view-vars-min[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n.run-view-vars[_ngcontent-%COMP%]   mj-task-graph-variables[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.run-view-loading[_ngcontent-%COMP%] {\n  padding: var(--mj-space-4);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-sm);\n}\n\n.run-view-bp[_ngcontent-%COMP%] {\n  margin-left: auto;\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.run-view-bp[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); }\n.run-view-bp-on[_ngcontent-%COMP%], \n.run-view-bp-on[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); }\n.run-view-bp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n.run-view-bp-name[_ngcontent-%COMP%] {\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-muted);\n}\n\n.run-view-legend[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-3);\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-muted);\n}\n.run-view-legend[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.run-view-key-break[_ngcontent-%COMP%] { color: var(--mj-status-error); font-size: 8px; }\n.run-view-key-paused[_ngcontent-%COMP%] { color: var(--mj-brand-primary); font-size: 10px; }\n.run-view-key-forced[_ngcontent-%COMP%] { color: var(--mj-status-warning); font-size: 10px; }\n.run-view-key-if[_ngcontent-%COMP%] {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-style: italic;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskGraphRunViewComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-task-graph-run-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (ErrorMessage) {\n  <mj-alert Variant=\"error\" [Message]=\"ErrorMessage\"></mj-alert>\n} @else if (IsLoading) {\n  <div class=\"run-view-loading\">Loading the workflow&rsquo;s steps&hellip;</div>\n} @else if (!Spec || Spec.tasks.length === 0) {\n  <mj-empty-state\n    Icon=\"fa-solid fa-diagram-project\"\n    Title=\"No steps yet\"\n    Message=\"This workflow has not created any steps.\">\n  </mj-empty-state>\n} @else {\n  <div class=\"run-view\">\n    <div class=\"run-view-summary\">\n      <span class=\"run-view-count\">{{ CompletedCount }} of {{ TotalCount }} complete</span>\n      @if (SkippedCount > 0) {\n        <span class=\"run-view-skipped\">{{ SkippedCount }} not taken</span>\n      }\n    </div>\n\n    <div class=\"run-view-canvas\" [style.height]=\"Height\">\n      <mj-task-graph-editor\n        [Spec]=\"Spec\"\n        [RuntimeStatus]=\"RuntimeStatus\"\n        [NodePositions]=\"Positions\"\n        [ReadOnly]=\"true\"\n        [ShowToolbar]=\"false\"\n        [ShowPalette]=\"false\"\n        [ShowProperties]=\"false\"\n        [ShowMinimap]=\"false\"\n        [ShowStatusBar]=\"false\"\n        (SelectionChanged)=\"OnSelectionChanged($event)\">\n      </mj-task-graph-editor>\n    </div>\n  </div>\n}\n", styles: [":host { display: block; }\n\n.run-view { display: flex; flex-direction: column; gap: var(--mj-space-2); }\n\n.run-view-summary {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n}\n\n.run-view-count { font-weight: 500; }\n\n/* Not-taken reads as neutral, never as a failure: a skipped branch is a normal outcome, and\n   colouring it like an error sends people hunting for a bug that does not exist. */\n.run-view-skipped { color: var(--mj-text-tertiary); }\n\n.run-view-canvas {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.run-view-loading {\n  padding: var(--mj-space-4);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-sm);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-task-graph-run-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (ErrorMessage) {\n  <mj-alert Variant=\"error\" [Message]=\"ErrorMessage\"></mj-alert>\n} @else if (IsLoading) {\n  <div class=\"run-view-loading\">Loading the workflow&rsquo;s steps&hellip;</div>\n} @else if (!Spec || Spec.tasks.length === 0) {\n  <mj-empty-state\n    Icon=\"fa-solid fa-diagram-project\"\n    Title=\"No steps yet\"\n    Message=\"This workflow has not created any steps.\">\n  </mj-empty-state>\n} @else {\n  <div class=\"run-view\" [style.height]=\"Height\">\n    <div class=\"run-view-summary\">\n      <span class=\"run-view-count\">{{ CompletedCount }} of {{ TotalCount }} complete</span>\n      @if (SkippedCount > 0) {\n        <span class=\"run-view-skipped\">{{ SkippedCount }} not taken</span>\n      }\n      @if (IsSettled) {\n        <span class=\"run-view-done\">Finished</span>\n      } @else if (GraphPaused) {\n        <span class=\"run-view-waiting\">\n          @if (PausedAtTaskID) { Waiting on {{ WaitingStepName }} }\n          @else { Waiting to start \u2014 Continue or Step }\n        </span>\n      } @else if (RunningCount > 0) {\n        <span class=\"run-view-running\">{{ RunningCount }} running</span>\n      }\n      @if (AllowBreakpointEditing && SelectedTaskID) {\n        <button\n          type=\"button\"\n          class=\"run-view-bp\"\n          [class.run-view-bp-on]=\"HasSelectedBreakpoint\"\n          (click)=\"OnToggleSelectedBreakpoint()\"\n          [attr.aria-pressed]=\"HasSelectedBreakpoint\"\n          [attr.aria-label]=\"HasSelectedBreakpoint ? 'Remove breakpoint from ' + SelectedTaskName : 'Add breakpoint on ' + SelectedTaskName\"\n          [title]=\"HasSelectedBreakpoint ? 'Remove breakpoint' : 'Break before this step'\">\n          <i class=\"fa-circle\" [class.fa-solid]=\"HasSelectedBreakpoint\" [class.fa-regular]=\"!HasSelectedBreakpoint\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"run-view-bp-name\">{{ SelectedTaskName }}</span>\n      }\n    </div>\n\n    <div class=\"run-view-body\">\n      @if (ShowVariables && !Prefs.InvocationOpen) {\n        <button type=\"button\" class=\"run-view-vars-rail\"\n                (click)=\"OnToggleInvocation()\"\n                title=\"Show invocation and output\"\n                aria-label=\"Show invocation and output\">\n          <i class=\"fa-solid fa-code\" aria-hidden=\"true\"></i>\n          <span>Data</span>\n        </button>\n      }\n      <as-split class=\"run-view-split\" direction=\"horizontal\" unit=\"percent\"\n                [gutterSize]=\"8\" (dragEnd)=\"OnInvocationSplitDragEnd($event.sizes)\">\n        <as-split-area [size]=\"InvocationPaneSize\" [minSize]=\"14\" [visible]=\"InvocationPaneOpen\">\n          <div class=\"run-view-vars\">\n            <div class=\"run-view-vars-bar\">\n              <span>Data</span>\n              <button type=\"button\" class=\"run-view-vars-min\"\n                      (click)=\"OnToggleInvocation()\"\n                      title=\"Minimize\"\n                      aria-label=\"Minimize invocation and output\">\n                <i class=\"fa-solid fa-chevron-left\" aria-hidden=\"true\"></i>\n              </button>\n            </div>\n            <mj-task-graph-variables\n              [InputPayload]=\"SelectedTask?.InputPayload\"\n              [OutputPayload]=\"SelectedTask?.OutputPayload\"\n              [Invocation]=\"Invocation\">\n            </mj-task-graph-variables>\n          </div>\n        </as-split-area>\n        <as-split-area [size]=\"CanvasPaneSize\" [minSize]=\"40\">\n          <div class=\"run-view-canvas\">\n            <mj-task-graph-editor\n              [Spec]=\"Spec\"\n              [RuntimeStatus]=\"RuntimeStatus\"\n              [NodePositions]=\"Positions\"\n              [DebugOverlay]=\"Overlay\"\n              [ReadOnly]=\"true\"\n              [ShowToolbar]=\"ShowToolbar\"\n              [ToolbarVisibility]=\"ToolbarVisibility\"\n              [ToolbarAlign]=\"ToolbarAlign\"\n              [ShowPalette]=\"false\"\n              [ShowProperties]=\"false\"\n              [ShowMinimap]=\"false\"\n              [ShowStatusBar]=\"false\"\n              [ShowLegend]=\"ShowLegend\"\n              (SelectionChanged)=\"OnSelectionChanged($event)\"\n              (ConnectionSelected)=\"OnConnectionSelected($event)\"\n              (LegendToggled)=\"LegendToggled.emit($event)\"\n              (BeforeContextMenu)=\"OnBeforeContextMenu($event)\"\n              (AfterContextMenuAction)=\"OnAfterContextMenuAction($event)\">\n            </mj-task-graph-editor>\n          </div>\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n}\n", styles: ["/* `height: 100%` here resolves to auto when the host's parent has no definite height, so this is\n   safe for both callers: one that gives the widget a box to fill, and one that asks for 320px. */\n:host { display: block; height: 100%; min-height: 0; }\n\n.run-view {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mj-space-2);\n  height: 100%;\n  min-height: 0;\n}\n\n.run-view-summary {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-3);\n  font-size: var(--mj-font-size-sm);\n  color: var(--mj-text-secondary);\n}\n\n.run-view-count { font-weight: 500; }\n\n/* Not-taken reads as neutral, never as a failure: a skipped branch is a normal outcome, and\n   colouring it like an error sends people hunting for a bug that does not exist. */\n.run-view-skipped { color: var(--mj-text-tertiary); }\n.run-view-running { color: var(--mj-brand-primary); font-weight: 600; }\n.run-view-waiting { color: var(--mj-brand-primary); font-weight: 700; }\n.run-view-done { color: var(--mj-status-success); font-weight: 600; }\n\n.run-view-body {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  min-width: 0;\n}\n\n.run-view-vars-rail {\n  flex: 0 0 28px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--mj-space-2);\n  padding: var(--mj-space-3) 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n.run-view-vars-rail:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n.run-view-vars-rail span {\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-size: var(--mj-font-size-xs);\n  font-weight: 700;\n}\n.run-view-vars-rail i { font-size: 11px; }\n\n.run-view-split {\n  flex: 1 1 auto;\n  min-height: 0;\n  min-width: 0;\n}\n\n:host ::ng-deep .run-view-split > .as-split-gutter {\n  background: transparent;\n}\n:host ::ng-deep .run-view-split > .as-split-gutter::after {\n  content: '';\n  display: block;\n  margin: auto;\n  background: var(--mj-border-default);\n  border-radius: 1px;\n}\n:host ::ng-deep .run-view-split.as-horizontal > .as-split-gutter::after {\n  width: 3px;\n  height: 32px;\n}\n:host ::ng-deep .run-view-split > .as-split-gutter:hover::after {\n  background: var(--mj-brand-primary);\n}\n:host ::ng-deep .run-view-split > .as-split-area {\n  overflow: hidden;\n}\n\n/* Takes what the summary line leaves, rather than a percentage of an ancestor that may not have a\n   definite height \u2014 which is what left a canvas stopping halfway down its pane with dead space\n   below it. */\n.run-view-canvas {\n  height: 100%;\n  min-height: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.run-view-vars {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  min-width: 0;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n.run-view-vars-bar {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--mj-space-2);\n  padding: 4px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-xs);\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.run-view-vars-min {\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-radius: var(--mj-radius-sm);\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.run-view-vars-min:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n.run-view-vars mj-task-graph-variables {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.run-view-loading {\n  padding: var(--mj-space-4);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-font-size-sm);\n}\n\n.run-view-bp {\n  margin-left: auto;\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n}\n.run-view-bp:hover { color: var(--mj-status-error); }\n.run-view-bp-on,\n.run-view-bp-on:hover { color: var(--mj-status-error); }\n.run-view-bp i { font-size: 10px; }\n.run-view-bp-name {\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-muted);\n}\n\n.run-view-legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--mj-space-3);\n  font-size: var(--mj-font-size-xs);\n  color: var(--mj-text-muted);\n}\n.run-view-legend span {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.run-view-key-break { color: var(--mj-status-error); font-size: 8px; }\n.run-view-key-paused { color: var(--mj-brand-primary); font-size: 10px; }\n.run-view-key-forced { color: var(--mj-status-warning); font-size: 10px; }\n.run-view-key-if {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-style: italic;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { ParentTaskID: [{
             type: Input
         }], WorkflowName: [{
@@ -280,10 +772,55 @@ export class TaskGraphRunViewComponent extends BaseAngularComponent {
             type: Input
         }], Height: [{
             type: Input
+        }], ShowLegend: [{
+            type: Input
+        }], ShowToolbar: [{
+            type: Input
+        }], ToolbarVisibility: [{
+            type: Input
+        }], ToolbarAlign: [{
+            type: Input
+        }], LiveFrame: [{
+            type: Input
+        }], ReplayAt: [{
+            type: Input
+        }], Breakpoints: [{
+            type: Input
+        }], PausedAtTaskID: [{
+            type: Input
+        }], GraphPaused: [{
+            type: Input
+        }], EdgeOverrides: [{
+            type: Input
+        }], AllowBreakpointEditing: [{
+            type: Input
+        }], ShowDebugLegend: [{
+            type: Input
+        }], ShowVariables: [{
+            type: Input
+        }], Invocation: [{
+            type: Input
         }], NodeSelected: [{
             type: Output
+        }], LegendToggled: [{
+            type: Output
         }], Settled: [{
             type: Output
+        }], ConnectionSelected: [{
+            type: Output
+        }], BreakpointToggled: [{
+            type: Output
+        }], EdgeOverrideRequested: [{
+            type: Output
+        }], OnDebugHotkey: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskGraphRunViewComponent, { className: "TaskGraphRunViewComponent", filePath: "src/lib/task-graph-run-view.component.ts", lineNumber: 60 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskGraphRunViewComponent, { className: "TaskGraphRunViewComponent", filePath: "src/lib/task-graph-run-view.component.ts", lineNumber: 108 }); })();
+function isTypingTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    const tag = target.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable;
+}
 //# sourceMappingURL=task-graph-run-view.component.js.map