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

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

@@ -0,0 +1,826 @@
+/**
+ * @fileoverview Watching a graph that is running, on the canvas its author drew on.
+ *
+ * **Why this is a component and not three.** A run needs rendering in at least three places — inside
+ * an Agent Run, inside the test harness, and on a standalone workflow-runs screen — and every one of
+ * them wants the identical thing: the graph, with live status, laid out legibly, with a node you can
+ * click. Three implementations would be three chances to render the same run differently, and the
+ * one that matters most (is that branch grey because it was *not taken*, or because it *broke*?) is
+ * exactly the distinction a second implementation gets wrong.
+ *
+ * **What it owns and what it doesn't.** It owns data acquisition — reading `MJ: Tasks` and
+ * `MJ: Task Dependencies` through the host's provider — and geometry. It does not navigate: a
+ * widgets-layer component cannot know whether it sits inside Explorer, so selecting a node emits an
+ * event and the host decides what "open the agent run" means. That boundary is the whole reason
+ * this can live beside the editor rather than in Explorer.
+ *
+ * @module @memberjunction/ng-task-graph-editor
+ */
+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, 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 "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) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Message", ctx_r0.ErrorMessage);
+} }
+function TaskGraphRunViewComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵtext(1, "Loading the workflow\u2019s steps\u2026");
+    i0.ɵɵelementEnd();
+} }
+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", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    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", 4)(1, "div", 5)(2, "span", 6);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    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(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.ɵɵ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("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']);
+export class TaskGraphRunViewComponent extends BaseAngularComponent {
+    cdr;
+    /**
+     * The graph to watch — the parent `MJ: Tasks` row that represents it.
+     *
+     * Setter-based rather than `ngOnChanges`, matching the editor beside it: the reaction is
+     * explicit and costs nothing on unrelated change-detection passes.
+     */
+    set ParentTaskID(value) {
+        if (value === this.parentTaskID)
+            return;
+        this.parentTaskID = value;
+        this.settledEmitted = false;
+        void this.load();
+    }
+    get ParentTaskID() {
+        return this.parentTaskID;
+    }
+    /** Name shown on the compiled graph. Purely cosmetic; the rows carry the truth. */
+    WorkflowName = 'Workflow';
+    /**
+     * Keep re-reading while the graph is still moving.
+     *
+     * Off by default: most hosts show a finished run, and a component that polls by default would
+     * have every historical run quietly issuing queries forever.
+     */
+    LiveUpdates = false;
+    /** How often to re-read while live. Seconds, not milliseconds — this is a human-scale view. */
+    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();
+    IsLoading = false;
+    ErrorMessage = null;
+    /** 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. Uses the same map the canvas paints. */
+    get CompletedCount() {
+        return this.countRuntime('Complete');
+    }
+    get TotalCount() {
+        return this.Spec?.tasks.length ?? this.taskByID.size;
+    }
+    get SkippedCount() {
+        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.
+     *
+     * The projected `tempId` IS the task id, so the row lookup is exact — and handing the host the
+     * whole task rather than an id spares every host from re-reading a row this component already
+     * holds.
+     */
+    OnSelectionChanged(args) {
+        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.
+     *
+     * `BypassCache` throughout: a run view exists to show what is true *now*, and the whole point of
+     * the poll is to see a status that changed a second ago. A cached read would render a stale graph
+     * that looks authoritative.
+     */
+    async load() {
+        this.stopPolling();
+        if (!this.parentTaskID) {
+            this.Spec = null;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.IsLoading = this.Spec === null; // only show the spinner on first load, not on every poll
+        this.ErrorMessage = null;
+        try {
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const [tasks, deps] = await rv.RunViews([
+                {
+                    EntityName: 'MJ: Tasks',
+                    ExtraFilter: `ParentID='${this.parentTaskID}'`,
+                    // Started work in the order it ran, unstarted last, persist order as the
+                    // tiebreak — the same rule GetAgentRunTree uses, so a graph reads identically
+                    // wherever it is shown.
+                    //
+                    // `__mj_CreatedAt ASC` alone was persist order, which is the COMPILER's walk
+                    // order, not the author's numbering and not what actually happened: a settled
+                    // graph listed its steps in an order unrelated to their execution, and a skipped
+                    // step could sit above work that ran.
+                    OrderBy: 'CASE WHEN StartedAt IS NULL THEN 1 ELSE 0 END, StartedAt, __mj_CreatedAt',
+                    ResultType: 'entity_object',
+                    BypassCache: true,
+                },
+                {
+                    EntityName: 'MJ: Task Dependencies',
+                    ExtraFilter: `TaskID IN (SELECT ID FROM __mj.Task WHERE ParentID='${this.parentTaskID}')`,
+                    ResultType: 'entity_object',
+                    BypassCache: true,
+                },
+            ]);
+            if (this.destroyed)
+                return;
+            if (!tasks.Success) {
+                this.fail(`The workflow's steps could not be loaded: ${tasks.ErrorMessage}`);
+                return;
+            }
+            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();
+        }
+        catch (e) {
+            this.fail(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Rows → spec + runtime + geometry. */
+    project(taskRows, depRows) {
+        this.taskByID = new Map(taskRows.map((t) => [t.ID, t]));
+        const projection = ProjectTaskRowsToSpec(this.WorkflowName, taskRows, depRows);
+        this.Spec = projection.Spec;
+        // Correlate by ID, not by name: a projected node's tempId IS the task id, which is the one
+        // 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 = 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.
+     *
+     * Mixing the two per-node rather than choosing one for the whole graph: a workflow whose author
+     * positioned some steps and left others where they fell should keep the positions they chose.
+     * A wholly unpositioned graph — the normal case for anything an agent emitted — is laid out
+     * entirely by the algorithm.
+     */
+    resolvePositions(authored, taskRows, depRows) {
+        const missing = taskRows.filter((t) => !authored.has(t.ID)).map((t) => t.ID);
+        if (missing.length === 0)
+            return authored;
+        const edges = depRows.map((d) => ({ From: d.DependsOnTaskID, To: d.TaskID }));
+        const computed = LayoutGraphNodes(taskRows.map((t) => t.ID), edges, { Direction: 'LR' });
+        const resolved = new Map(computed);
+        for (const [id, position] of authored)
+            resolved.set(id, position);
+        return resolved;
+    }
+    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);
+    }
+    stopPolling() {
+        if (this.pollTimer) {
+            clearTimeout(this.pollTimer);
+            this.pollTimer = null;
+        }
+    }
+    fail(message) {
+        LogError(`[TaskGraphRunView] ${message}`);
+        this.ErrorMessage = message;
+        this.cdr.markForCheck();
+    }
+    /** Canvas extent, so a host can size its container to the graph rather than guessing. */
+    get GraphBounds() {
+        const box = GraphLayoutBounds(this.Positions);
+        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"]], 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.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\" [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: [{
+            type: Input
+        }], LiveUpdates: [{
+            type: Input
+        }], PollIntervalSeconds: [{
+            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: 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